/* ─────────────────────────────────────────────
   Overlay – reusable overlay system
   
   Variants (via data-overlay-variant):
     "mega-menu"  → top-aligned panel (default)
     "modal"      → vertically centered dialog
     "fullscreen" → covers entire viewport
     "slide-right"→ slides in from the right edge
   ───────────────────────────────────────────── */

/* ── Base: covers viewport, hidden by default ── */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.overlay.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* ── Backdrop ── */
.overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Content (shared base) ── */
.overlay__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 960px;
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);

    /* default animation: slide up */
    margin-top: 80px;
    transform: translateY(24px);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
    opacity: 0;
}

.overlay.is-active .overlay__content {
    transform: translateY(0);
    opacity: 1;
}

/* ════════════════════════════════════════════════
   VARIANT: mega-menu  (default – no extra class)
   ════════════════════════════════════════════════ */
/* Already handled by the base styles above.     */

/* ════════════════════════════════════════════════
   VARIANT: modal – vertically centered
   ════════════════════════════════════════════════ */
.overlay[data-overlay-variant="modal"] {
    align-items: center;
}

.overlay[data-overlay-variant="modal"] .overlay__content {
    max-width: 560px;
    margin-top: 0;
    transform: scale(0.95) translateY(12px);
}

.overlay[data-overlay-variant="modal"].is-active .overlay__content {
    transform: scale(1) translateY(0);
}

/* ════════════════════════════════════════════════
   VARIANT: fullscreen – edge-to-edge
   ════════════════════════════════════════════════ */
.overlay[data-overlay-variant="fullscreen"] {
    align-items: stretch;
}

.overlay[data-overlay-variant="fullscreen"] .overlay__content {
    max-width: none;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;

    transform: translateY(-24px);
    opacity: 0;
}

.overlay[data-overlay-variant="fullscreen"].is-active .overlay__content {
    transform: translateY(0);
    opacity: 1;
}

/* ════════════════════════════════════════════════
   VARIANT: slide-right – side panel from right
   ════════════════════════════════════════════════ */
.overlay[data-overlay-variant="slide-right"] {
    justify-content: flex-end;
    align-items: stretch;
}

.overlay[data-overlay-variant="slide-right"] .overlay__content {
    max-width: 480px;
    margin-top: 0;
    border-radius: 0;
    min-height: 100vh;

    transform: translateX(100%);
    opacity: 1;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.overlay[data-overlay-variant="slide-right"].is-active .overlay__content {
    transform: translateX(0);
}

/* ── Body scroll lock ── */
.overlay-open {
    overflow: hidden;
}