/* ═══════════════════════════════════════════════════
   MOVICARE — SCROLL FIX
   Add this AFTER landing-responsive.css in _Layout.cshtml
   <link rel="stylesheet" href="~/LandingPage/css/landing-scroll-fix.css" />
   ═══════════════════════════════════════════════════ */

/* ── 1. ROOT CAUSE: Remove overflow from section-inner ──
   landing-responsive.css sets overflow-x:hidden on .section-inner
   which creates a new stacking/scroll context on some browsers,
   producing a secondary scrollbar or scroll lag.
*/
.section-inner {
    overflow: visible !important; /* undo the responsive override */
    overflow-x: clip !important; /* clip without creating scroll context */
}

/* ── 2. Only the body + html should control page scroll ── */
html, body {
    overflow-x: hidden;
    overflow-y: auto; /* single scroll root */
    /* Smooth scroll is already on html{} — keep it */
}

/* ── 3. Sections must never generate their own scroll ── */
section,
#services,
#why,
#treatments,
#homerehab,
#office,
#reviews,
#booking {
    overflow: visible; /* NO section-level scroll */
}

/* ── 4. Reviews slider — only the slider wrapper clips, not sections ── */
.reviews-slider {
    overflow: hidden; /* intentional: clips the marquee */
}

/* ── 5. GPU scroll-jank fix: promote heavy painted layers ──
   backdrop-filter:blur() on .why-item, .booking-form-card, .modal etc.
   forces the browser to re-composite every scroll tick.
   contain:layout style tells the browser these boxes are independent.
*/
.why-item,
.why-stat-card,
.booking-form-card,
.contact-method,
.modal {
    contain: layout style;
    will-change: auto; /* let browser decide; avoids forced layers */
}

/* ── 6. Blob background: the 3 animated blobs with filter:blur(80px)
   are the #1 cause of scroll jank on mid-range phones.
   Move them to their own composite layer and reduce repaint cost.
*/
.blob {
    will-change: transform; /* promote each blob to its own GPU layer */
    transform: translateZ(0); /* force compositing */
}

/* On mobile, the blobs are already hidden (landing-responsive.css),
   so this only matters on desktop — where GPU is stronger anyway.
   Still, reduce blur on medium screens: */
@media (max-width: 1280px) and (min-width: 769px) {
    .blob {
        filter: blur(60px) !important; /* was 80px — less repaint area */
        opacity: .04 !important;
    }
}

/* ── 7. Nav backdrop-filter — repainted on every scroll tick ──
   Adding will-change:transform isolates it to its own layer.
*/
.nav {
    will-change: transform;
    transform: translateZ(0);
}

/* ── 8. Float buttons — same fix ── */
.float-btns {
    will-change: transform;
    transform: translateZ(0);
}

/* ── 9. Loader overlay — must never affect page layout ── */
#loaderOverlay {
    overflow: hidden;
}

/* ── 10. Treatments panel: active panel uses display:grid ──
   Adding overflow:visible ensures inner content doesn't clip.
*/
.treatment-panels > div.active {
    overflow: visible;
}

/* ── 11. prevent any accidental double-scrollbar on Windows browsers ──
   Windows shows scrollbars on overflow:auto even when not needed.
*/
@media (min-width: 769px) {
    .section-inner,
    .clinic-info,
    .homecare-steps,
    .why-items,
    .benefit-list,
    .contact-methods {
        overflow: visible;
        overflow-x: clip;
    }
}