/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST APPROACH
   ============================================ */

/* Tablet & Mobile - 768px and below */
@media screen and (max-width: 768px) {
  
  /* Navigation */
  .hamburger-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .navigation-links {
    display: none;
  }

  aside {
    display: block;
  }

  .main-heading {
    padding: var(--spacing-md);
  }

  .logo-text {
    font-size: var(--font-size-lg);
  }

  /* Main Container */
  .main-body-container {
    padding: 0 var(--spacing-md);
    margin: var(--spacing-xl) auto;
  }

  /* Hero Content */
  .hero-content h1 {
    font-size: var(--font-size-2xl);
  }

  .hero-content p {
    font-size: var(--font-size-base);
  }

  /* Step Sections */
  .first-section-container,
  .second-section-container,
  .third-section-container,
  .fourth-section {
    padding: var(--spacing-lg);
  }

  .step-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .step-info h2 {
    font-size: var(--font-size-xl);
  }

  .step-info p {
    font-size: var(--font-size-sm);
  }

  /* Selection Items */
  .selection {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    }

  .selection-item label{
    -ms-flex-item-align: center;
        align-self: center;
    margin-top:10px;
    margin-bottom: 0;
  }



  /* Results Flex */
  .first-results-flex,
  .second-results-flex {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
  }

 .novdec-group-container{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  /* Buttons */
  .second-section-buttons,
  .third-section-buttons,
  .fourth-section-buttons {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  .second-section-buttons button,
  .third-section-buttons button,
  .fourth-section-buttons button {
    width: 100%;
  }

  .section-continue-button,
  .next-btn,
  .find-programs-btn {
    font-size: var(--font-size-base);
    padding: var(--spacing-md);
  }

  /* Payment Form */
  .all-form-group {
    grid-template-columns: 1fr;
  }

  .payment-form {
    padding: var(--spacing-lg);
  }

  .payment-form h3 {
    font-size: var(--font-size-lg);
  }

  /* Summary */
  .summary {
    padding: var(--spacing-lg);
  }

  .summary-header p {
    font-size: var(--font-size-lg);
  }

  .summary-icon {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-base);
  }

  .summary-content h4 {
    font-size: var(--font-size-base);
  }

  .amount-to-pay {
    font-size: var(--font-size-lg);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .amount-to-pay b {
    font-size: var(--font-size-xl);
  }
}

/* Mobile - 480px and below */
@media screen and (max-width: 480px) {
  /* Main Container */

.first-section-container,.second-section-container,.third-section-container,.fourth-section{
  padding:10px !important;
}

  /* Typography */
  .hero-content h1 {
    font-size: var(--font-size-xl);
    letter-spacing: -0.5px;
  }

  .hero-content p {
    font-size: var(--font-size-sm);
  }

  .badge {
    font-size: var(--font-size-xs);
    padding: 4px var(--spacing-sm);
  }

  /* Step Sections */
  .first-section-container,
  .second-section-container,
  .third-section-container,
  .fourth-section {
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);

  }

  .step-number {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }

  .step-info h2 {
    font-size: var(--font-size-lg);
  }

  .step-info p {
    font-size: var(--font-size-xs);
  }

  /* Form Elements */
  .selection-item label,
  .telephone-number-section label,
  .form-group label {
    font-size: var(--font-size-sm);
  }

  .selection-item select,
  .selection-item input,
  .telephone-number-section input,
  .form-group input,
  .form-group select {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  /* Buttons */
  .section-continue-button,
  .next-btn,
  .find-programs-btn,
  .previous-btn,
  .prev-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /* Loading */
  .loader {
    width: 48px;
    height: 48px;
    border-width: 4px;
  }

  .loading-container-step5 p {
    font-size: var(--font-size-base);
  }

  /* Payment */
  #pay-button {
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* Large Tablet - 769px to 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  
  .main-body-container {
    max-width: 800px;
  }

  .selection {
    grid-template-columns: repeat(2, 1fr);
  }

  #details-flex {
    grid-template-columns: repeat(2, 1fr);
  }

  .all-form-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop Large - 1440px and above */
@media screen and (min-width: 1440px) {
  
  .main-body-container {
    max-width: 1000px;
  }

  .hero-content h1 {
    font-size: var(--font-size-4xl);
  }

  .hero-content p {
    font-size: var(--font-size-xl);
  }

  .first-section-container,
  .second-section-container,
  .third-section-container,
  .fourth-section {
    padding: var(--spacing-2xl) 3rem;
  }

  .step-number {
    width: 56px;
    height: 56px;
    font-size: var(--font-size-2xl);
  }

  .step-info h2 {
    font-size: var(--font-size-3xl);
  }

  .step-info p {
    font-size: var(--font-size-lg);
  }
}

/* Landscape Orientation on Mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
  
  .hero-content h1 {
    font-size: var(--font-size-xl);
  }

  .hero-content {
    margin-bottom: var(--spacing-lg);
  }

  .first-section-container,
  .second-section-container,
  .third-section-container,
  .fourth-section {
    padding: var(--spacing-md);
  }

  aside {
    width: 240px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  
  /* Larger touch targets */
  .navigation-links a,
  .aside-links a,
  button,
  select,
  input {
    min-height: 48px;
  }

  /* Remove hover effects on touch */
  .navigation-links a:hover,
  .stat-card:hover,
  .summary-item:hover,
  .rating-box:hover {
    -webkit-transform: none;
            transform: none;
  }

  /* Ensure buttons are tappable */
  .hamburger-icon {
    width: 48px;
    height: 48px;
  }

  .hamburger-close {
    width: 48px;
    height: 48px;
  }
}

/* Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  
  :root {
    --border-color: #ffffff;
    --text-secondary: #e2e8f0;
  }

  .navigation-links a,
  .aside-links a,
  button {
    border: 2px solid var(--border-color);
  }
}

/* Print Styles */
@media print {
  
  header,
  .hamburger-icon,
  .section-continue-button,
  .second-section-buttons,
  .third-section-buttons,
  .fourth-section-buttons,
  .payment-form,
  .testimony-container,
  footer {
    display: none;
  }

  .main-body-container {
    max-width: 100%;
    padding: 0;
  }

  .first-section-container,
  .second-section-container,
  .third-section-container,
  .summary {
    -webkit-box-shadow: none;
            box-shadow: none;
    border: 1px solid #000;
    page-break-inside: avoid;
  }

  body {
    background: white;
    color: black;
  }
}

/* Container Queries (Modern Browsers) */
@supports (container-type: inline-size) {
  
  .main-body-container {
    container-type: inline-size;
  }

  @container (max-width: 600px) {
    .selection {
      grid-template-columns: 1fr;
    }

    .step-header {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      text-align: center;
    }
  }
}