/* ============================================================
   Size Guide overlay shell
   ------------------------------------------------------------
   Hosts the finalized standalone AC calculator (/ac-sizing-guide.html)
   in an isolated, near-fullscreen iframe. The calculator's own design
   (markup + CSS + inline JS + Three.js) lives INSIDE the iframe, so this
   file only styles the overlay chrome — no calculator component styles.
   ============================================================ */
.sg-modal { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:2vh 2vw; }
.sg-modal[hidden] { display:none; }
.sg-backdrop { position:absolute; inset:0; background:rgba(6,14,25,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }

.sg-frame-wrap {
    position:relative; width:96vw; height:95vh; max-width:1360px;
    background:#f4f7fb; border-radius:14px; overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.42); animation:sgIn .25s ease;
}
@keyframes sgIn { from { opacity:0; transform:translateY(12px) scale(.99); } to { opacity:1; transform:none; } }

#sizeGuideFrame { width:100%; height:100%; border:0; display:block; background:#f4f7fb; }

.sg-close {
    position:absolute; top:10px; inset-inline-end:14px; z-index:5;
    width:40px; height:40px; border:0; border-radius:50%;
    background:rgba(255,255,255,.92); color:#0a1929; font-size:26px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 12px rgba(0,0,0,.22); transition:transform .15s, background .15s;
}
.sg-close:hover { background:#fff; transform:scale(1.06); }

/* Lock background scroll + hide page slider arrows that would poke through the overlay
   (Swiper / product-slider chevrons live at the page edges, outside the overlay). */
body.sg-modal-open { overflow:hidden; }
body.sg-modal-open .swiper-button-prev,
body.sg-modal-open .swiper-button-next,
body.sg-modal-open .swiper-nav,
body.sg-modal-open .ps-nav-prev,
body.sg-modal-open .ps-nav-next {
    visibility:hidden !important;
    pointer-events:none !important;
}

@media (max-width: 640px) {
    .sg-modal { padding:0; }
    .sg-frame-wrap { width:100vw; height:100vh; max-width:none; border-radius:0; }
    .sg-close { top:8px; inset-inline-end:8px; width:36px; height:36px; font-size:24px; }
}