/* =====================================================================
   ALTERZ PHYSIOTHERAPY CLINIC — RESPONSIVE OVERRIDES
   Comprehensive mobile-first responsive system.
   Breakpoints: xs <375 | sm 375–575 | md 576–767 | tablet 768–991 |
                lg 992–1199 | xl 1200–1399 | xxl 1400+
   ===================================================================== */

/* =====================================================================
   1.  GLOBAL SCROLL GUARDS & BASE
   ===================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
html { scroll-behavior: smooth; }

/* =====================================================================
   2.  PREMIUM SCROLLBAR (desktop only — no visual noise on touch)
   ===================================================================== */
@media (min-width: 992px) {
  ::-webkit-scrollbar              { width: 9px; height: 9px; }
  ::-webkit-scrollbar-track        { background: var(--color-bg-soft); }
  ::-webkit-scrollbar-thumb        { background: var(--color-border-strong); border-radius: var(--radius-sm); border: 2px solid var(--color-bg-soft); }
  ::-webkit-scrollbar-thumb:hover  { background: var(--color-text-faint); }
}

/* =====================================================================
   3.  iOS INPUT-ZOOM PREVENTION
       Any focusable field must be at least 16 px on mobile
   ===================================================================== */
@media (max-width: 767.98px) {
  .alterz-form-control,
  .admin-form-control,
  .alterz-footer-newsletter-form input,
  select { font-size: 16px !important; }
}

/* =====================================================================
   4.  RETINA / HIGH-DPI RENDERING
   ===================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body { -webkit-font-smoothing: subpixel-antialiased; }
}

/* =====================================================================
   5.  REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .alterz-hero-slide          { transition: opacity 1.4s ease; transform: none !important; }
  .aos-fade-up                 { transition: none !important; opacity: 1; transform: none; }
  .alterz-service-card,
  .alterz-feature-card,
  .alterz-testimonial-card,
  .alterz-contact-card,
  .btn-alterz                 { transition: none !important; }
}

/* =====================================================================
   6.  TOUCH DEVICE — disable hover-lift, use :active instead
   ===================================================================== */
@media (hover: none) {
  .alterz-service-card:hover,
  .alterz-feature-card:hover,
  .alterz-testimonial-card:hover,
  .alterz-contact-card:hover,
  .alterz-gallery-item:hover  { transform: none; box-shadow: var(--shadow-card); }

  .alterz-service-card:active,
  .alterz-feature-card:active { transform: scale(0.98); }

  /* Restore border on touch so cards still look interactive */
  .alterz-service-card:hover  { border-color: var(--color-border); }
}

/* =====================================================================
   7.  GLOBAL TAP TARGETS — 44 px minimum (WCAG 2.5.5 / Apple HIG)
   ===================================================================== */
@media (max-width: 991.98px) {
  .btn-alterz,
  .alterz-card-link,
  .alterz-nav a,
  .alterz-hamburger,
  .alterz-mobile-close,
  .alterz-float-btn,
  .alterz-mobile-sticky-cta a,
  .admin-icon-btn,
  .admin-btn { min-height: 44px; }

  /* Expand hero dot tap area without changing the visual dot */
  .alterz-hero-dots button { position: relative; }
  .alterz-hero-dots button::before {
    content: '';
    position: absolute;
    inset: -14px;
  }

  .alterz-footer-links a      { min-height: 36px; }
  .alterz-footer-social a     { width: 46px; height: 46px; }
  .alterz-accordion-header    { min-height: 56px; }
}

/* =====================================================================
   8.  MOBILE STICKY BAR & BODY PADDING
   ===================================================================== */
@media (max-width: 991.98px) {
  body                              { padding-bottom: 60px; }
  .alterz-float-stack              { bottom: calc(60px + var(--space-sm)); }
}
@media (min-width: 992px) {
  .alterz-mobile-sticky-cta        { display: none; }
  body                              { padding-bottom: 0; }
}

/* =====================================================================
   9.  SECTION VERTICAL PADDING SCALING
   ===================================================================== */
@media (max-width: 767.98px) {
  section { padding: var(--space-xl) 0; }
}
@media (max-width: 575.98px) {
  section { padding: calc(var(--space-xl) * 0.85) 0; }
}

/* =====================================================================
   10. CONTAINER PADDING — tighten on small screens
   ===================================================================== */
@media (max-width: 767.98px) {
  .container-alterz { padding-left: 1.15rem; padding-right: 1.15rem; }
}
@media (max-width: 480px) {
  .container-alterz { padding-left: 1rem; padding-right: 1rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-alterz { padding-left: var(--space-lg); padding-right: var(--space-lg); }
}

/* =====================================================================
   11. CONTAINER MAX-WIDTH SCALING (large desktops)
   ===================================================================== */
@media (min-width: 1400px) { :root { --container-max: 1320px; } }
@media (min-width: 1800px) { :root { --container-max: 1440px; } }

/* =====================================================================
   12. TYPOGRAPHY SCALING
   ===================================================================== */

/* --- Extra-small (< 376 px) --- */
@media (max-width: 375.98px) {
  .alterz-logo-text          { font-size: 1.1rem; }
  .btn-alterz                { padding: 0.75rem 1.2rem; font-size: 0.875rem; }
  .section-heading h2,
  .section-heading-center h2  { font-size: 1.6rem; }
}

/* --- Small phones (376–575 px) --- */
@media (max-width: 575.98px) {
  .section-heading h2,
  .section-heading-center h2  { font-size: 1.75rem; }
  .section-eyebrow            { font-size: 0.72rem; letter-spacing: 0.08em; }
  .alterz-form-card          { padding: 1.25rem; }
  .alterz-cta-band           { padding: var(--space-xl) var(--space-md); }
  .alterz-cta-band h2        { font-size: 1.55rem; }
  .alterz-testimonial-card,
  .alterz-feature-card,
  .alterz-contact-card       { padding: var(--space-md) 1rem; }
  .alterz-feature-icon       { width: 54px; height: 54px; font-size: 1.4rem; }
  .alterz-accordion-header   { font-size: 0.95rem; }
  .alterz-about-media img    { max-height: 320px; object-fit: cover; }
}

/* =====================================================================
   13. LOGO IMAGE — breakpoint-specific heights
   ===================================================================== */
@media (max-width: 575.98px) {
  .alterz-logo-img                        { height: 44px !important; max-height: 44px !important; }
  .alterz-header.is-scrolled .alterz-logo-img { height: 36px !important; max-height: 36px !important; }
}

/* =====================================================================
   14. HEADER — small-screen height & padding alignment
   ===================================================================== */
@media (max-width: 991.98px) {
  .alterz-header {
    padding-left: calc(1.25rem + env(safe-area-inset-left)) !important;
    padding-right: calc(1.25rem + env(safe-area-inset-right)) !important;
  }
  .alterz-header .container-alterz {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 575.98px) {
  /* Keep header slightly shorter on very small phones */
  .alterz-header:not(.is-scrolled) { height: calc(var(--header-height) - 4px); }
  .alterz-header {
    padding-left: calc(1rem + env(safe-area-inset-left)) !important;
    padding-right: calc(1rem + env(safe-area-inset-right)) !important;
  }
}

/* =====================================================================
   15. HERO
   ===================================================================== */

/* Tablet & below: full-bleed background video, left-aligned text, shifted video focus to the right */
@media (max-width: 991.98px) {
  .alterz-hero {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #000000 !important;
    position: relative;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .alterz-hero-visual {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    overflow: hidden;
  }

  .alterz-hero-visual .alterz-hero-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 70% center !important;
    transform: none !important;
  }

  .alterz-hero-visual .alterz-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 30%, rgba(15, 23, 42, 0.6) 65%, rgba(15, 23, 42, 0.15) 100%) !important;
    z-index: 2;
  }
  .alterz-hero-visual .alterz-hero-overlay::after {
    display: none !important;
  }

  .alterz-hero-inner {
    position: relative !important;
    z-index: 3;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    padding-top: calc(var(--header-height) + 3.5rem) !important;
    padding-bottom: calc(var(--header-height) + 2.5rem) !important;
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .alterz-hero-content {
    height: auto !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    text-align: left !important;
    align-items: flex-start !important;
    margin: 0 !important;
    gap: var(--space-md) !important;
  }

  .alterz-hero-content h1 {
    text-align: left !important;
    font-size: clamp(1.8rem, 6.5vw, 2.5rem) !important;
    margin-bottom: 0.5rem !important;
  }

  .alterz-hero-desc {
    text-align: left !important;
    margin: 0 0 var(--space-md) 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  .alterz-hero-actions {
    justify-content: flex-start !important;
    width: 100%;
  }

  .hero-br {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .alterz-hero-visual .alterz-hero-video {
    object-position: 70% center !important;
  }
  .alterz-hero-content {
    max-width: 82% !important;
  }
  .alterz-hero h1 {
    font-size: clamp(1.65rem, 7.5vw, 2rem) !important;
  }
  .alterz-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .alterz-hero-actions .btn-alterz {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 375.98px) {
  .alterz-hero-visual .alterz-hero-video {
    object-position: 70% center !important;
  }
}

/* Landscape phones (short viewport) */
@media (max-height: 480px) and (orientation: landscape) {
  .alterz-hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 2rem;
  }
  .alterz-hero-visual {
    height: 100vh !important;
  }
}

/* Mid desktop range */
@media (max-width: 1199.98px) and (min-width: 992px) {
  .alterz-hero-content { max-width: 560px; }
}

/* =====================================================================
   16. ABOUT SECTION BADGE
   ===================================================================== */
/* Hide on phones where image width doesn't give room for badge to sit outside */
@media (max-width: 767.98px) { .alterz-about-badge { display: none; } }
@media (min-width: 768px)    { .alterz-about-badge { display: block; } }

/* On tablet the image is full-width; adjust badge position so it doesn't
   overflow the section container */
@media (min-width: 768px) and (max-width: 991.98px) {
  .alterz-about-badge { left: 1rem; bottom: -1rem; }
}

/* =====================================================================
   17. SERVICE CARDS
   ===================================================================== */
@media (max-width: 767.98px) { .alterz-service-card-img { height: 200px; } }
@media (max-width: 575.98px) { .alterz-service-card-img { height: 180px; } }
@media (min-width: 768px) and (max-width: 991.98px) { .alterz-service-card-img { height: 200px; } }

/* =====================================================================
   18. FEATURE CARDS — 2-column on phones, 4-col on desktop
       The grid is handled by Bootstrap col classes in HTML, but
       we ensure card layout stays clean on every width.
   ===================================================================== */
@media (max-width: 575.98px) {
  /* col-6 gives two columns; reduce horizontal padding so content fits */
  .alterz-feature-card { padding: 1rem 0.85rem; }
  .alterz-feature-card h4 { font-size: 0.95rem; }
}

/* =====================================================================
   19. TREATMENT PROCESS — mobile vertical layout
   ===================================================================== */
@media (max-width: 767.98px) {
  .alterz-process-dot  { width: 44px; height: 44px; font-size: 1rem; }
  .alterz-process-step { padding-bottom: var(--space-md); }
}

/* =====================================================================
   20. TESTIMONIALS
   ===================================================================== */
@media (max-width: 575.98px) {
  .alterz-testimonial-card p.quote { font-size: var(--fs-body); }
}

/* =====================================================================
   21. FAQ ACCORDION
   ===================================================================== */
@media (max-width: 575.98px) {
  .alterz-accordion-header { padding: 0.85rem 0; font-size: 0.92rem; }
  .alterz-accordion-panel-inner { font-size: var(--fs-small); }
}

/* =====================================================================
   22. CTA BAND
   ===================================================================== */
@media (max-width: 575.98px) {
  .alterz-cta-band { border-radius: var(--radius-card); }
}
@media (max-width: 767.98px) {
  .alterz-cta-band { border-radius: var(--radius-card); }
}

/* =====================================================================
   23. CONTACT PAGE — map min-height on larger screens
   ===================================================================== */
@media (min-width: 992px) {
  .alterz-contact-map-wrap,
  .alterz-contact-map-wrap .alterz-map-frame { min-height: 420px; }
}

/* =====================================================================
   24. PAGE BANNER (inner pages)
   ===================================================================== */
@media (max-width: 991.98px) {
  .alterz-page-banner {
    padding: calc(var(--header-height) + 4.5rem) 0 3.5rem !important;
  }
}
@media (max-width: 575.98px) {
  .alterz-page-banner {
    padding: calc(var(--header-height) + 4rem) 0 3rem !important;
  }
  .alterz-page-banner h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* =====================================================================
   25. GALLERY IMAGES — height scaling
   ===================================================================== */
@media (max-width: 575.98px) { .alterz-gallery-item img { height: 180px; } }
@media (min-width: 576px)    { .alterz-gallery-item img { height: 240px; } }
@media (min-width: 768px)    { .alterz-gallery-item img { height: 280px; } }

/* =====================================================================
   26. FOOTER
   ===================================================================== */
@media (max-width: 767.98px) {
  /* Stack the footer bottom bar vertically */
  .alterz-footer-bottom      { flex-direction: column; text-align: center; }
  .alterz-footer-bottom-links { justify-content: center; }
  .alterz-footer p           { max-width: 100%; }
}

@media (max-width: 575.98px) {
  .alterz-footer             { padding: var(--space-xl) 0 0; }
  .alterz-footer-social a    { width: 44px; height: 44px; }
  /* Newsletter form: stack on very narrow screens */
  .alterz-footer-newsletter-form { flex-direction: column; gap: 0.6rem; }
  .alterz-footer-newsletter-form button { width: 100%; height: 46px; border-radius: var(--radius-sm); }
}

/* =====================================================================
   27. FLOATING ACTION BUTTONS — avoid sticky bar overlap
   ===================================================================== */
@media (max-width: 575.98px) {
  .alterz-float-btn          { width: 50px; height: 50px; font-size: 1.25rem; }
}

/* =====================================================================
   28. MOBILE MENU — full-height safe-area support
   ===================================================================== */
@media (max-width: 991.98px) {
  .alterz-mobile-menu {
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  }
  .alterz-mobile-sticky-cta {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* =====================================================================
   29. ADMIN PANEL RESPONSIVE
   ===================================================================== */
@media (max-width: 991.98px) {
  .admin-content        { padding: var(--space-md); }
  .admin-page-header    { margin-bottom: var(--space-md); }
  .admin-table th,
  .admin-table td       { padding: 0.65rem var(--space-sm); }
  .admin-card-header    { padding: var(--space-sm) var(--space-md); }
}
@media (max-width: 575.98px) {
  .admin-stat-card      { flex-direction: column; text-align: center; gap: 0.5rem; padding: var(--space-sm); }
  .admin-stat-icon      { width: 44px; height: 44px; font-size: 1.2rem; }
  .admin-login-card     { padding: var(--space-lg) var(--space-md); }
}

/* =====================================================================
   30. SAFE-AREA INSETS — iPhone notch / home indicator
   ===================================================================== */
.alterz-mobile-sticky-cta {
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
.alterz-float-stack {
  right:   calc(var(--space-md) + env(safe-area-inset-right));
  bottom:  calc(var(--space-md) + env(safe-area-inset-bottom));
}
@media (max-width: 991.98px) {
  .alterz-float-stack {
    bottom: calc(60px + env(safe-area-inset-bottom) + var(--space-sm));
  }
}

/* =====================================================================
   ABOUT ORBIT RESPONSIVE OVERRIDES
   ===================================================================== */
@media (max-width: 767.98px) {
  .about-visual-container {
    height: 320px;
  }
  .about-visual-circle {
    width: 200px;
    height: 200px;
  }
  .about-center-badge {
    width: 100px;
    height: 100px;
  }
  .badge-logo-mark {
    font-size: 1.85rem;
  }
  .badge-brand {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }
  .about-orbit-pill {
    padding: 0.5rem 0.85rem;
    font-size: 0.75rem;
  }
  .about-orbit-pill.pill-1 {
    top: 10%;
    left: 2%;
  }
  .about-orbit-pill.pill-2 {
    bottom: 12%;
    left: 4%;
  }
  .about-orbit-pill.pill-3 {
    top: 45%;
    right: 2%;
  }
}
@media (max-width: 480px) {
  .about-visual-container {
    height: 280px;
  }
  .about-visual-circle {
    width: 170px;
    height: 170px;
  }
  .about-center-badge {
    width: 85px;
    height: 85px;
  }
  .badge-logo-mark {
    font-size: 1.6rem;
  }
  .badge-brand {
    display: none;
  }
  .about-orbit-pill {
    padding: 0.4rem 0.75rem;
    font-size: 0.7rem;
  }
  .about-orbit-pill.pill-1 {
    top: 5%;
    left: 0%;
  }
  .about-orbit-pill.pill-2 {
    bottom: 10%;
    left: 0%;
  }
  .about-orbit-pill.pill-3 {
    top: 45%;
    right: 0%;
  }
}

/* =====================================================================
   VALUES GRID RESPONSIVE OVERRIDES
   ===================================================================== */
@media (max-width: 991.98px) {
  .value-info-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem 0;
  }
  .value-info-card {
    padding: 3rem 2rem;
  }
}

@media (max-width: 575.98px) {
  .value-info-card.card-even {
    text-align: left;
  }
  .value-info-card.card-even::before {
    bottom: auto;
    top: -2px;
    left: 80px;
    width: calc(40% - 30px);
    border-bottom: none;
    border-top: 2px dotted var(--card-color);
  }
  .value-info-card.card-even .value-info-number {
    bottom: auto;
    top: -32px;
    left: 40px;
  }
  .value-info-card.card-even .value-info-icon-wrap {
    top: auto;
    bottom: -34px;
    left: 40px;
  }
  .value-info-card.card-odd, .value-info-card.card-even {
    border-radius: 40px 40px 0 40px !important;
  }
}

/* =====================================================================
   PREMIUM WAVY PRICING CARDS & ABOUT SHOWCASE RESPONSIVE OVERRIDES
   ===================================================================== */
@media (max-width: 991.98px) {
  .pricing-card-wrapper.popular {
    transform: none !important;
    margin: 0 !important;
    border-width: 1px !important;
  }
  .pricing-card-wrapper.popular:hover {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .about-visual-showcase {
    max-width: 340px !important;
    margin: var(--space-xl) auto 0 !important;
  }
}

@media (max-width: 767.98px) {
  section {
    padding: 3rem 0 !important;
  }
  .alterz-about-badge {
    display: none !important;
  }
  .alterz-about-media {
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 575.98px) {
  .pricing-card-header {
    padding: 2rem 1rem 3rem !important;
  }
  .pricing-card-body {
    padding: 1.75rem 1.25rem 1.75rem !important;
  }
  .pricing-card-price {
    font-size: 2.15rem !important;
  }
  .pricing-card-features {
    gap: 10px !important;
  }
  .premium-service-card {
    padding: 1.75rem 1.25rem !important;
  }
}

/* =====================================================================
   28. PACKAGE DETAILS PAGE RESPONSIVE ADJUSTMENTS
   ===================================================================== */
@media (max-width: 991.98px) {
  .package-details-section {
    padding: var(--space-lg) 0 !important;
  }
}

@media (max-width: 767.98px) {
  .package-details-section {
    padding: var(--space-md) 0 !important;
  }
  .package-checklist-card {
    padding: var(--space-md) var(--space-sm) !important;
    margin-bottom: var(--space-md);
  }
  .package-sidebar-container {
    gap: var(--space-sm);
  }
  .package-sidebar-card {
    padding: var(--space-sm) !important;
  }
}

@media (max-width: 575.98px) {
  .package-actions {
    flex-direction: column;
    width: 100%;
  }
  .package-actions .btn-alterz {
    width: 100%;
    text-align: center;
  }
}

/* =====================================================================
   29. SERVICES DETAILS PAGE RESPONSIVE ADJUSTMENTS
   ===================================================================== */
@media (max-width: 767.98px) {
  .service-overview-card {
    padding: var(--space-lg) var(--space-md) !important;
  }
  .service-quality-card {
    padding: var(--space-md) !important;
  }
}

@media (max-width: 575.98px) {
  .service-actions {
    flex-direction: column;
    width: 100%;
  }
  .service-actions .btn-alterz {
    width: 100%;
    text-align: center;
  }
}