/* ============================================
    Age & Region verification popup
    Smooth overlay with cinematic enter/exit.
    ============================================ */

    /* Easings — reused everywhere for visual consistency */
    :root {
        --age-gate-ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* easeOutQuint — for entrances */
        --age-gate-ease-in:  cubic-bezier(0.64, 0, 0.78, 0);    /* easeInQuart — for exits */
    }

    /* ── Shell — overlay wrapper ──────────────────── */
    .age-gate {
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;

        /* Initial state — invisible & uninteractive until JS adds .is-open */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity   0.45s var(--age-gate-ease-out),
            visibility 0s   linear 0.45s;
    }

    .age-gate.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 0.45s var(--age-gate-ease-out),
            visibility 0s linear 0s;
    }

    .age-gate.is-closing {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s var(--age-gate-ease-in);
    }

    /* ── Backdrop — frosted overlay so the page behind stays visible ──
    Dark + heavy blur reads as "modal on top of site" instead of "new page". */
    .age-gate__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.72);
        -webkit-backdrop-filter: blur(28px) saturate(150%);
                backdrop-filter: blur(28px) saturate(150%);
    }

    /* Browsers without backdrop-filter (older Firefox/Safari) — fall back to a
    slightly more opaque solid so the gate is still legible. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .age-gate__backdrop {
            background: rgba(0, 0, 0, 0.92);
        }
    }

    /* ── Panel — scales + lifts on enter, falls on exit ─ */
    .age-gate__panel {
        position: relative;
        width: 100%;
        max-width: 1100px;
        background: #000;
        border: 1px solid #fff;
        color: #fff;
        display: flex;
        flex-direction: column;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);

        /* Initial state — slightly smaller & pushed down */
        opacity: 0;
        transform: scale(0.96) translateY(16px);
        transition:
            opacity   0.55s var(--age-gate-ease-out) 0.05s,
            transform 0.55s var(--age-gate-ease-out) 0.05s;
    }

    .age-gate.is-open .age-gate__panel {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    .age-gate.is-closing .age-gate__panel {
        opacity: 0;
        transform: scale(0.98) translateY(-8px);
        transition:
            opacity   0.3s var(--age-gate-ease-in),
            transform 0.3s var(--age-gate-ease-in);
    }

    /* ── Two columns ─────────────────────────────── */
    .age-gate__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid #fff;
    }

    .age-gate__cell {
        min-height: 380px;
        padding: 56px 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .age-gate__cell--region {
        border-right: 1px solid #fff;
    }

    /* Subtle staggered fade-in for the two title rows so the eye lands naturally */
    .age-gate__title {
        font-family: var(--font-display, 'Cormorant', serif);
        font-weight: 300;
        font-size: clamp(36px, 6vw, 64px);
        letter-spacing: 0.02em;
        margin: 0 0 36px;
        line-height: 1.1;

        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity   0.55s var(--age-gate-ease-out) 0.25s,
            transform 0.55s var(--age-gate-ease-out) 0.25s;
    }

    .age-gate.is-open .age-gate__title {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger the right-column title slightly behind the left */
    .age-gate.is-open .age-gate__cell--age .age-gate__title {
        transition-delay: 0.32s;
    }

    /* ── Region select (custom dropdown) ─────────── */
    .age-gate__select-wrap {
        position: relative;
        /* Without its own z-index, this wrap doesn't root a stacking
           context — .age-gate__options' z-index:20 then can't reliably
           beat .age-gate__cell--age's z-index:1 (a sibling grid item),
           which is exactly why the region dropdown (this wrap) showed
           the year cell's content through it while the year dropdown
           (which DOES set its own z-index on .age-gate__select-wrap--year
           below) never had the problem. */
        z-index: 20;
        width: 100%;
        max-width: 360px;

        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity   0.55s var(--age-gate-ease-out) 0.35s,
            transform 0.55s var(--age-gate-ease-out) 0.35s;
    }

    .age-gate.is-open .age-gate__select-wrap {
        opacity: 1;
        transform: translateY(0);
    }

    /* Pill button: 3-column grid keeps the value perfectly centered while the
    arrow sits in the right cell. The left cell is an invisible spacer of the
    same width so optical balance holds. */
    .age-gate__select {
        display: grid;
        grid-template-columns: 32px 1fr 32px;
        align-items: center;
        width: 100%;
        height: 56px;
        padding: 0 24px;
        background: transparent;
        border: 1px solid #fff;
        border-radius: 999px;
        color: #fff;
        font-family: inherit;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition:
            background-color 0.2s ease,
            border-color     0.2s ease;
    }

    .age-gate__select:hover,
    .age-gate__select:focus-visible {
        background: rgba(255, 255, 255, 0.05);
        outline: none;
    }

    .age-gate__select-value {
        grid-column: 2;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .age-gate__select-arrow {
        grid-column: 3;
        justify-self: end;
        width: 16px;
        height: 16px;
        transition: transform 0.3s var(--age-gate-ease-out);
    }

    .age-gate__select[aria-expanded="true"] .age-gate__select-arrow {
        transform: rotate(-90deg);
    }

    /* ── Dropdown panel — enterprise-style: crisp border, padded content ──
    The previous mask-image fade was eating the top border and clipping the
    first row. Enterprise dropdowns (Linear, Stripe, Apple) use a solid
    border + generous inner padding instead — content never crowds the edge,
    so no fade is needed. */
    .age-gate__options {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        list-style: none;
        margin: 0;
        padding: 8px;             /* symmetric padding all around — keeps the scrollbar away from the border */
        background: #000;          /* pure black — matches the panel */
        border: 1px solid rgba(255, 255, 255, 0.92);
        border-radius: 16px;
        max-height: 280px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        /* Must beat .age-gate__select-wrap--year's z-index:5 and
           .age-gate__options--year's z-index:10 below — all age-gate
           descendants share one flat stacking context (no intermediate
           ancestor sets its own position+z-index), so without this the
           year column's title/button/Continue button paint in FRONT of
           this dropdown wherever they have content, showing through in
           the gaps — the "transparent dropdown" bug wasn't a rendering
           glitch, it was this dropdown genuinely losing the paint order. */
        z-index: 20;
        box-shadow:
            0 24px 48px rgba(0, 0, 0, 0.55),
            0 8px 16px rgba(0, 0, 0, 0.35);

        /* Firefox — native styling */
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        transition: scrollbar-color 0.2s ease;

        /* Closed state — smoothly hidden, not display:none */
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
        transform-origin: top center;
        pointer-events: none;
        visibility: hidden;
        transition:
            opacity   0.18s var(--age-gate-ease-out),
            transform 0.18s var(--age-gate-ease-out),
            visibility 0s   linear 0.18s;
    }

    .age-gate__options.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        visibility: visible;
        transition:
            opacity   0.18s var(--age-gate-ease-out),
            transform 0.18s var(--age-gate-ease-out),
            visibility 0s   linear 0s;
    }

    /* Webkit scrollbar — invisible at rest, fades in on hover (macOS pattern) */
    .age-gate__options::-webkit-scrollbar {
        width: 6px;
    }
    .age-gate__options::-webkit-scrollbar-track {
        background: transparent;
        margin: 8px 0; /* keeps the track inside the rounded corners */
    }
    .age-gate__options::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 999px;
        transition: background-color 0.2s ease;
    }

    /* Reveal the thumb when the user is interacting with the dropdown */
    .age-gate__options:hover::-webkit-scrollbar-thumb,
    .age-gate__options:focus-within::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.18);
    }
    .age-gate__options::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    /* Reveal the Firefox-native scrollbar the same way */
    .age-gate__options:hover,
    .age-gate__options:focus-within {
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }

    .age-gate__option {
        position: relative;
        padding: 10px 36px 10px 36px; /* symmetric padding so the centered text stays visually centered with the checkmark on the right */
        margin: 1px 0;
        cursor: pointer;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 400;
        text-align: center;
        line-height: 1.35;
        color: rgba(255, 255, 255, 0.78);
        transition:
            background-color 0.12s ease,
            color            0.12s ease;
    }

    .age-gate__option:hover,
    .age-gate__option:focus-visible {
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        outline: none;
    }

    /* Selected — subtle background + a small checkmark on the right.
    Stripe / Linear / Apple-style indicator: clean, unmistakable, doesn't
    visually dominate the choice. */
    .age-gate__option.is-selected {
        background: rgba(255, 255, 255, 0.07);
        color: #fff;
        font-weight: 500;
    }

    .age-gate__option.is-selected::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 14px;
        width: 14px;
        height: 14px;
        transform: translateY(-50%);
        background-color: #fff;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5L6.5 12L13 4.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5L6.5 12L13 4.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    }

    .age-gate__option.is-selected:hover,
    .age-gate__option.is-selected:focus-visible {
        background: rgba(255, 255, 255, 0.11);
    }

    /* ── Year-of-birth column: dropdown + Continue button ─── */
    /* Establish a stacking context on the year cell so the dropdown can layer
    above the Continue button beneath it. */
    .age-gate__cell--age {
        position: relative;
        z-index: 1;
    }

    .age-gate__select-wrap--year {
        /* Continue button moved to a balanced full-width action row below the
        grid, so this no longer needs bottom spacing — both columns now centre
        their single dropdown identically. */
        margin-bottom: 0;
        position: relative;
        z-index: 5;
        transition-delay: 0.38s;
    }

    /* Year dropdown: pop above the Continue button with a high z-index. */
    .age-gate__options--year {
        z-index: 10;
        max-height: 240px;
    }

    .age-gate.is-open .age-gate__cell--age .age-gate__title {
        transition-delay: 0.32s;
    }

    /* ── Action row — full-width band below both columns ───
    Sits between the two-column grid and the disclaimer so the Continue button
    is the single, centred next step. Its own bottom border keeps the panel's
    three zones (grid / action / disclaimer) cleanly divided, consistent with
    the rest of the outlined design. */
    .age-gate__actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 36px 40px;
        border-bottom: 1px solid #fff;
    }

    /* Higher specificity (.age-gate .age-gate__btn--continue) so this wins over the
    later .age-gate__btn base rule (which also sets border-radius:999px). */
    .age-gate .age-gate__btn--continue {
        /* Content-hugging "simple button" — generous padding rather than a fixed
        height stretched to the column width, so the label has real breathing
        room top/bottom and left/right. */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 220px;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 14px 56px;
        background: #fff;
        color: #000;
        border: 1px solid #fff;
        /* Architectural radius instead of a wide 999px pill — reads more premium
        and intentional next to the elegant serif type. */
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        /* Gentle lift so the white CTA sits *above* the black panel rather than
        looking like a flat painted block. */
        box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);

        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity            0.55s var(--age-gate-ease-out) 0.45s,
            transform          0.55s var(--age-gate-ease-out) 0.45s,
            background-color   0.25s var(--age-gate-ease-out),
            color              0.25s var(--age-gate-ease-out),
            border-color       0.25s var(--age-gate-ease-out),
            box-shadow         0.25s var(--age-gate-ease-out);
    }

    .age-gate.is-open .age-gate__btn--continue {
        opacity: 1;
        transform: translateY(0);
    }

    /* Hover/focus — invert to the outlined treatment used everywhere else, so the
    button belongs to the same visual family as the dropdowns. */
    .age-gate .age-gate__btn--continue:hover,
    .age-gate .age-gate__btn--continue:focus-visible {
        background: transparent;
        color: #fff;
        box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
        transform: translateY(-1px);
    }

    .age-gate .age-gate__btn--continue:active {
        transform: translateY(0) scale(0.985);
        box-shadow: none;
    }

    .age-gate .age-gate__btn--continue[disabled] {
        background: transparent;
        color: rgba(255, 255, 255, 0.4);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        cursor: not-allowed;
    }
    .age-gate .age-gate__btn--continue[disabled]:hover,
    .age-gate .age-gate__btn--continue[disabled]:focus-visible {
        background: transparent;
        color: rgba(255, 255, 255, 0.4);
        transform: none;
        box-shadow: none;
    }

    .age-gate__error {
        margin: 16px 0 0;
        color: #ff7676;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.4;
        text-align: center;
        max-width: 360px;
    }

    /* ── Age buttons (legacy YES/NO — still styled in case used elsewhere) ─ */
    .age-gate__buttons {
        display: flex;
        gap: 24px;
        width: 100%;
        max-width: 360px;
        justify-content: center;

        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity   0.55s var(--age-gate-ease-out) 0.42s,
            transform 0.55s var(--age-gate-ease-out) 0.42s;
    }

    .age-gate.is-open .age-gate__buttons {
        opacity: 1;
        transform: translateY(0);
    }

    .age-gate__btn {
        flex: 1;
        min-width: 140px;
        height: 54px;
        background: transparent;
        border: 1px solid #fff;
        border-radius: 999px;
        color: #fff;
        font: inherit;
        font-size: 22px;
        font-weight: 300;
        cursor: pointer;
        transition:
            background-color 0.25s var(--age-gate-ease-out),
            color            0.25s var(--age-gate-ease-out),
            transform        0.15s ease;
    }

    .age-gate__btn:hover,
    .age-gate__btn:focus-visible {
        background: #fff;
        color: #000;
        outline: none;
    }

    .age-gate__btn:active {
        transform: scale(0.97);
    }

    /* ── Disclaimer — last in the stagger ─────────── */
    .age-gate__disclaimer {
        margin: 0;
        padding: 28px 24px;
        text-align: center;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 0.01em;

        opacity: 0;
        transition: opacity 0.55s var(--age-gate-ease-out) 0.5s;
    }

    .age-gate.is-open .age-gate__disclaimer {
        opacity: 1;
    }

    /* ── Mobile ──────────────────────────────────── */
    @media (max-width: 768px) {
        .age-gate { padding: 16px; }

        .age-gate__grid {
            grid-template-columns: 1fr;
        }

        .age-gate__cell {
            min-height: 0;
            padding: 36px 20px;
        }

        .age-gate__cell--region {
            border-right: none;
            border-bottom: 1px solid #fff;
        }

        .age-gate__title {
            font-size: 36px;
            margin-bottom: 24px;
        }

        .age-gate__btn { font-size: 18px; height: 48px; }

        .age-gate__actions { padding: 28px 20px; }

        .age-gate .age-gate__btn--continue { padding: 12px 40px; }

        .age-gate__disclaimer { padding: 20px 16px; font-size: 14px; }
    }

    /* ── Body scroll lock while the gate is open ──── */
    html.age-gate-open,
    body.age-gate-open {
        overflow: hidden;
    }

    /* ── Reduced motion: respect users who disabled animations ── */
    @media (prefers-reduced-motion: reduce) {
        .age-gate,
        .age-gate__panel,
        .age-gate__title,
        .age-gate__select-wrap,
        .age-gate__buttons,
        .age-gate__disclaimer,
        .age-gate__options,
        .age-gate__select-arrow {
            transition-duration: 0.01ms !important;
            transition-delay:    0s !important;
        }
    }