/* ============================================
   INDEX PAGE MOBILE OPTIMIZATION
   Оптимизира всички секции на index.html
   ============================================ */

@media (max-width: 768px) {

/* ============================================
   МОБИЛНИ НАСТРОЙКИ ЗА HERO BACKGROUND СНИМКА
   Нагласи тези променливи за да контролираш
   какво се вижда от background снимката
   ============================================ */
:root {
  /* РАЗМЕР НА СНИМКАТА */
  --mobile-hero-image-size: 1140px;  
  /* Опции: cover (запълва), contain (побира се), 150%, 200%, 300% и т.н. */
  
  /* ПОЗИЦИЯ ХОРИЗОНТАЛНА (ляво-дясно) */
  --mobile-hero-image-x: -65px;
  /* Опции: left (ляво), center (център), right (дясно), 0%, 50%, 100% и т.н. */
  
  /* ПОЗИЦИЯ ВЕРТИКАЛНА (горе-долу) */
  --mobile-hero-image-y: top;
  /* Опции: top (горе), center (център), bottom (долу), 0%, 50%, 100% и т.н. */
  
  /* ВИСОЧИНА НА HERO СЕКЦИЯТА */
  --mobile-hero-height: 50vh;
  /* Опции: 50vh, 60vh, 70vh, 80vh, 100vh и т.н. */
}

/* ============================================
   1. HERO SECTION - COMPACT & CENTERED
   ============================================ */
.hero {
  min-height: var(--mobile-hero-height) !important;
  padding: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* ИЗПОЛЗВАНЕ НА ПРОМЕНЛИВИТЕ ЗА BACKGROUND */
  background-size: var(--mobile-hero-image-size) !important;
  background-position: var(--mobile-hero-image-x) var(--mobile-hero-image-y) !important;
  background-repeat: no-repeat !important;
  
  margin-top: 56px !important; /* offset fixed navbar */
}

.hero .container {
  margin: 0 auto !important;
  max-width: 100% !important;
  padding: 0 16px !important;
}

.hero-content {
  text-align: center !important;
  padding: 20px !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

.hero-content h1,
.hero-content .display-4 {
  font-size: 32px !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
  font-weight: 800 !important;
}

.hero-content p,
.hero-content .lead {
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin-bottom: 24px !important;
  opacity: 0.95 !important;
}

/* Slightly stronger overlay for readability on photos */
.hero::before {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.15) 100%) !important;
}

.hero-content .btn {
  display: inline-block !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  width: auto !important;
  max-width: 280px !important;
}

/* ============================================
   2. TITLE SECTION - COMPACT
   ============================================ */
.title-section {
  padding: 15px 0 !important;
  margin: 18px !important;
}

.clickable-title {
  text-align: center !important;
  padding: 14px 0px !important;
  cursor: pointer !important;
}

.title-question {
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}

.title-description {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.dynamic-text-box {
  display: inline-block !important;
}

.dynamic-text {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* ============================================
   3. VIDEO + STATS SECTION - STACKED
   ============================================ */
.video-section {
  padding: 40px 0 !important;
}

.video-stats-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.video-container {
  width: 100% !important;
  padding: 0 16px !important;
}

.ratio {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Stats Grid - 2x2 */
.stats-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  padding: 0 16px !important;
}

.stat-item {
  background: white !important;
  padding: 20px 16px !important;
  border-radius: 12px !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e9ecef !important;
}

.stat-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6c757d !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

.stat-number {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #19861C !important;
  display: block !important;
}

/* ============================================
   4. MOTIVATION SECTION - MOBILE ACCORDION
   ============================================ */

/* FORCE OVERRIDE: Section Container */
section.motivation-section,
.motivation-section {
  padding: 40px 0 50px 0 !important;
  background: #f8f9fa !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* FORCE OVERRIDE: Header */
.motivation-section .motivation-header,
.motivation-header {
  text-align: center !important;
  padding: 0 20px 30px 20px !important;
  margin-bottom: 0 !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.motivation-section .motivation-title,
.motivation-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  line-height: 1.2 !important;
  color: #212529 !important;
  letter-spacing: -0.3px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.motivation-section .motivation-subtitle,
.motivation-subtitle {
  font-size: 14px !important;
  color: #6c757d !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* FORCE OVERRIDE: Panels Container */
.motivation-section .panels-grid,
.panels-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 16px !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: none !important; /* OVERRIDE DESKTOP GRID */
}

/* FORCE OVERRIDE: Individual Panel Card - Premium Animation */
.motivation-section .motivation-panel,
.motivation-panel {
  background: white !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition:
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer !important;
  position: static !important; /* OVERRIDE DESKTOP POSITION */
  min-height: auto !important; /* OVERRIDE DESKTOP MIN-HEIGHT */
  z-index: auto !important; /* OVERRIDE DESKTOP Z-INDEX */
  transform: translateZ(0) !important; /* Hardware acceleration */
}

.motivation-section .motivation-panel:hover,
.motivation-panel:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) scale(1.01) !important;
}

.motivation-section .motivation-panel:active,
.motivation-panel:active {
  transform: translateY(-1px) scale(0.99) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12) !important;
  transition-duration: 0.1s !important;
}

/* FORCE OVERRIDE: Remove desktop expanded styles */
.motivation-section .motivation-panel.expanded,
.motivation-panel.expanded {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; /* RESET DESKTOP SHADOW */
  transform: none !important; /* RESET DESKTOP TRANSFORM */
  z-index: auto !important; /* RESET DESKTOP Z-INDEX */
}

/* FORCE OVERRIDE: Panel Header - Compact Layout */
.motivation-section .panel-header,
.panel-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px !important;
  position: relative !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

/* FORCE OVERRIDE: Icon */
.motivation-section .panel-icon,
.panel-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #19861C 0%, #5cb85c 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(25, 134, 28, 0.25) !important;
  margin-bottom: 0 !important; /* OVERRIDE DESKTOP MARGIN */
  transition: none !important; /* OVERRIDE DESKTOP TRANSITION */
}

.motivation-section .panel-icon i,
.panel-icon i {
  font-size: 22px !important;
  color: white !important;
}

/* FORCE OVERRIDE: Header Content */
.panel-header-content {
  flex: 1 !important;
  min-width: 0 !important;
}

/* FORCE OVERRIDE: Title */
.motivation-section .panel-title,
.panel-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.2px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* FORCE OVERRIDE: Preview Text - Fully Visible */
.motivation-section .panel-preview,
.panel-preview {
  font-size: 14px !important;
  color: #dfdfdf !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  display: block !important; /* OVERRIDE ANY TRUNCATION */
  -webkit-line-clamp: none !important;
  -webkit-box-orient: horizontal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* FORCE OVERRIDE: Expand Indicator - Premium Animation */
.motivation-section .panel-expand-indicator,
.panel-expand-indicator {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(25, 134, 28, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  position: static !important; /* OVERRIDE DESKTOP POSITION */
  top: auto !important; /* OVERRIDE DESKTOP TOP */
  right: auto !important; /* OVERRIDE DESKTOP RIGHT */
  border: none !important; /* OVERRIDE DESKTOP BORDER */
  transform: translateZ(0) !important; /* Hardware acceleration */
}

.motivation-section .panel-expand-indicator:hover,
.panel-expand-indicator:hover {
  background: rgba(25, 134, 28, 0.2) !important;
  transform: scale(1.05) !important;
}

.motivation-section .panel-expand-indicator i,
.panel-expand-indicator i {
  font-size: 16px !important;
  color: #19861C !important;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* FORCE OVERRIDE: Expanded State */
.motivation-section .motivation-panel.expanded .panel-expand-indicator,
.motivation-panel.expanded .panel-expand-indicator {
  background: #19861C !important;
  transform: rotate(180deg) !important;
}

.motivation-section .motivation-panel.expanded .panel-expand-indicator i,
.motivation-panel.expanded .panel-expand-indicator i {
  color: white !important;
  transform: rotate(180deg) !important;
}

/* MOBILE ACCORDION: PANELS START COLLAPSED */
@media (max-width: 768px) {
  /* FORCE REMOVE EXPANDED CLASS FROM ALL PANELS */
  .motivation-section .motivation-panel.expanded,
  .motivation-panel.expanded {
    /* Reset desktop expanded styles for mobile */
    transform: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    z-index: auto !important;
  }

  /* ENSURE ALL PANELS START COLLAPSED - NO EXPANDED CLASS */
  .motivation-section .motivation-panel,
  .motivation-panel {
    /* Panels start collapsed - no expanded class by default */
  }

  /* PANEL CONTENT: SMOOTH ANIMATION - COLLAPSED STATE */
  .motivation-section .panel-content-motivationCard,
  .panel-content-motivationCard {
    max-height: 0px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateY(-8px) scale(0.98) !important;
    transition:
      max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  /* PANEL CONTENT: SMOOTH ANIMATION - EXPANDED STATE */
  .motivation-section .motivation-panel.expanded .panel-content-motivationCard,
  .motivation-panel.expanded .panel-content-motivationCard {
    max-height: 380px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    transition-delay: 0.1s !important; /* Subtle stagger effect */
  }
}

/* FORCE OVERRIDE: Panel Details */
.motivation-section .panel-details,
.panel-details {
  padding: 20px 16px 24px 16px !important;
  background: linear-gradient(135deg, rgba(25, 134, 28, 0.03) 0%, rgba(25, 134, 28, 0.06) 100%) !important;
  border-top: 1px solid rgba(25, 134, 28, 0.08) !important;
}

.motivation-section .panel-details p,
.panel-details p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #495057 !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}

/* FORCE OVERRIDE: Features List */
.motivation-section .panel-features,
.panel-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.motivation-section .panel-features li,
.panel-features li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  color: #495057 !important;
  line-height: 1.5 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(25, 134, 28, 0.06) !important;
  transition: all 0.2s ease !important;
}

.motivation-section .panel-features li:hover,
.panel-features li:hover {
  background: white !important;
  transform: translateX(2px) !important;
}

.motivation-section .panel-features li i,
.panel-features li i {
  font-size: 16px !important;
  color: #19861C !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* ============================================
   MOBILE SPECIFIC IMPROVEMENTS
   ============================================ */

/* Better touch targets for mobile */
.panel-header {
  min-height: 44px !important; /* iOS Human Interface Guidelines */
  -webkit-touch-callout: none !important;
}

.panel-expand-indicator {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ============================================
   SMALL SCREENS ADJUSTMENTS - FORCE OVERRIDE
   ============================================ */
@media (max-width: 480px) {
  .motivation-section,
  section.motivation-section {
    padding: 35px 0 45px 0 !important;
  }

  .motivation-section .motivation-header,
  .motivation-header {
    padding: 0 16px 25px 16px !important;
  }

  .motivation-section .motivation-title,
  .motivation-title {
    font-size: 22px !important;
  }

  .motivation-section .motivation-subtitle,
  .motivation-subtitle {
    font-size: 13px !important;
  }

  .motivation-section .panels-grid,
  .panels-grid {
    gap: 14px !important;
    padding: 0 14px !important;
  }

  .motivation-section .panel-header,
  .panel-header {
    padding: 14px !important;
    gap: 10px !important;
  }

  .motivation-section .panel-icon,
  .panel-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .motivation-section .panel-icon i,
  .panel-icon i {
    font-size: 20px !important;
  }

  .motivation-section .panel-title,
  .panel-title {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .motivation-section .panel-preview,
  .panel-preview {
    font-size: 13px !important;
  }

  .motivation-section .panel-expand-indicator,
  .panel-expand-indicator {
    width: 30px !important;
    height: 30px !important;
  }

  .motivation-section .panel-expand-indicator i,
  .panel-expand-indicator i {
    font-size: 14px !important;
  }

  .motivation-section .panel-details,
  .panel-details {
    padding: 18px 14px 20px 14px !important;
  }

  .motivation-section .panel-details p,
  .panel-details p {
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }

  .motivation-section .panel-features li,
  .panel-features li {
    padding: 9px 10px !important;
    font-size: 12px !important;
    gap: 8px !important;
  }

  .motivation-section .panel-features li i,
  .panel-features li i {
    font-size: 15px !important;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .motivation-panel,
  .panel-icon,
  .panel-expand-indicator,
  .panel-content,
  .panel-features li {
    transition: none !important;
  }

  .motivation-panel:active,
  .motivation-panel:hover {
    transform: none !important;
  }
}

/* ============================================
   5. FEATURES SECTION (ako ima)
   ============================================ */
.feature-section {
  padding: 40px 0 !important;
}

.feature-section .container {
  padding: 0 16px !important;
}

.feature-section h2 {
  font-size: 26px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 32px !important;
}

.features-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.feature-card {
  background: white !important;
  padding: 24px 20px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e9ecef !important;
  text-align: center !important;
}

.feature-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: rgba(25, 134, 28, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px auto !important;
}

.feature-icon i {
  font-size: 32px !important;
  color: #19861C !important;
}

.feature-card h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  color: #212529 !important;
}

.feature-card p {
  font-size: 14px !important;
  color: #6c757d !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ============================================
   6. CTA SECTION (Call to Action)
   ============================================ */
.cta-section {
  padding: 60px 20px !important;
  background: linear-gradient(135deg, #19861C 0%, #5cb85c 100%) !important;
  text-align: center !important;
}

.cta-section h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: white !important;
  margin-bottom: 16px !important;
  line-height: 1.3 !important;
}

.cta-section p {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 24px !important;
  line-height: 1.5 !important;
}

.cta-section .btn {
  display: inline-block !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: white !important;
  color: #19861C !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* CAROUSEL STYLES MOVED TO carousel-mobile.css */

/* ============================================
   8. GENERAL MOBILE IMPROVEMENTS
   ============================================ */

/* Container adjustments */
.container {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Section spacing */
section {
  margin-bottom: 0 !important;
}

/* Headings */
h1 {
  font-size: 28px !important;
}

h2 {
  font-size: 24px !important;
}

h3 {
  font-size: 20px !important;
}

h4 {
  font-size: 18px !important;
}

/* Buttons */
.btn {
  min-height: 48px !important;
  padding: 12px 24px !important;
  font-size: 16px !important;
  border-radius: 10px !important;
}

/* Images */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Cards */
.card {
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}

} /* End of @media (max-width: 768px) */