/* ===================================================================
 * BeWeb Cinema — design system + base styles
 *
 * Design direction (per creative-director plan):
 *   - Near-monochrome dark canvas
 *   - Rouge cinéma accent for selected seats + primary CTAs
 *   - Vintage gold for premium / live indicators
 *   - Typography does the heavy lifting (Geist display, Inter body)
 *   - Motion 200-300ms cubic-bezier(0.22, 1, 0.36, 1) — physics, not bouncy
 *   - OKLCH color tokens for accurate Western European palette
 * =================================================================== */


/* ===== 1. FONTS (self-hosted, subset latin) ===== */

@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/geist-sans-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/geist-sans-latin-500-normal.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/geist-sans-latin-700-normal.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/inter-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/inter-latin-500-normal.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/inter-latin-700-normal.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/static/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/static/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}


/* ===== 2. DESIGN TOKENS ===== */

:root {
    /* Color palette — OKLCH (with sRGB fallbacks for older browsers) */
    --bg:           oklch(0.14 0.005 270);
    --bg-elevated:  oklch(0.18 0.006 270);
    --bg-input:     oklch(0.20 0.008 270);
    --fg:           oklch(0.97 0.003 270);
    --fg-muted:     oklch(0.68 0.008 270);
    --fg-faint:     oklch(0.50 0.008 270);
    --hairline:     oklch(1 0 0 / 0.08);
    --hairline-strong: oklch(1 0 0 / 0.14);

    --accent:       oklch(0.72 0.19 35);     /* rouge cinéma */
    --accent-hover: oklch(0.76 0.19 35);
    --accent-fg:    oklch(0.99 0 0);
    --premium:      oklch(0.82 0.14 85);     /* vintage gold */
    --warn:         oklch(0.62 0.12 50);     /* muted amber */
    --danger:       oklch(0.60 0.20 25);     /* destructive */

    /* sRGB fallbacks for browsers without OKLCH support */
    @supports not (color: oklch(0.5 0.1 0)) {
        --bg: #1a1a1d;
        --bg-elevated: #232328;
        --fg: #f3f3f4;
        --accent: #c83d52;
    }

    /* Typography */
    --font-display: 'Geist', 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* Type scale (fluid via clamp) */
    --size-display-xl: clamp(3.5rem, 9vw, 8rem);
    --size-display-l:  clamp(2.5rem, 5.5vw, 4.5rem);
    --size-h2:         clamp(1.75rem, 2.8vw, 2.5rem);
    --size-h3:         clamp(1.25rem, 1.8vw, 1.5rem);
    --size-h4:         1.125rem;
    --size-body-l:     1.125rem;
    --size-body:       1rem;
    --size-body-s:     0.875rem;
    --size-caption:    0.8125rem;
    --size-eyebrow:    0.6875rem;
    --size-mono-l:     1.5rem;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* Radii */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 120ms;
    --dur:      220ms;
    --dur-slow: 360ms;
}


/* ===== 3. MODERN RESET ===== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ===== 4. BASE TYPOGRAPHY ===== */

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
h1 { font-size: var(--size-display-l); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); }

p { line-height: 1.6; color: var(--fg); }
small { font-size: var(--size-caption); color: var(--fg-muted); }

.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.eyebrow {
    font-size: var(--size-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
    font-weight: 500;
}


/* ===== 5. LAYOUT PRIMITIVES ===== */

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: var(--space-5);
}
.container--narrow { max-width: 720px; }
.container--tiny   { max-width: 460px; }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.stack-xl > * + * { margin-top: var(--space-8); }


/* ===== 6. SITE HEADER + FOOTER ===== */

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: oklch(0.14 0.005 270 / 0.78);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); }
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
}
.brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.03em;
}
.brand__mark { color: var(--accent); }
.nav-links { display: flex; gap: var(--space-5); align-items: center; }
.nav-links a {
    font-size: var(--size-body-s);
    color: var(--fg-muted);
    transition: color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--fg); }

.site-footer {
    margin-top: var(--space-9);
    padding-block: var(--space-6);
    border-top: 1px solid var(--hairline);
    color: var(--fg-faint);
    font-size: var(--size-caption);
}
.site-footer__inner {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--space-3);
}


/* ===== 7. BUTTONS ===== */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    padding: 14px 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--size-body);
    letter-spacing: -0.01em;
    line-height: 1;
    transition:
        background var(--dur) var(--ease),
        color var(--dur) var(--ease),
        transform var(--dur-fast) var(--ease);
    user-select: none;
}
.btn--primary {
    background: var(--accent);
    color: var(--accent-fg);
}
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { transform: scale(0.98); }
.btn--ghost {
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--hairline-strong);
}
.btn--ghost:hover { background: oklch(1 0 0 / 0.04); }
.btn--link {
    background: transparent;
    color: var(--fg-muted);
    padding: 4px 8px;
}
.btn--link:hover { color: var(--fg); }
.btn--full { width: 100%; }
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5; pointer-events: none;
}


/* ===== 8. FORMS ===== */

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
    font-size: var(--size-eyebrow);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-muted);
    font-weight: 500;
}
.field__input,
.field__select {
    width: 100%;
    background: var(--bg-input);
    color: var(--fg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: var(--size-body);
    line-height: 1.4;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field__input:focus,
.field__select:focus {
    outline: none;
    border-color: var(--accent);
    background: oklch(0.22 0.008 270);
}
.field__input::placeholder { color: var(--fg-faint); }
.field__hint { font-size: var(--size-caption); color: var(--fg-muted); }
.field__error { font-size: var(--size-caption); color: var(--danger); }
.field[data-state="valid"] .field__input  { border-color: oklch(0.62 0.15 145); }
.field[data-state="taken"] .field__input  { border-color: var(--danger); }
.field[data-state="checking"] .field__input { border-color: var(--warn); }

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 720px) {
    .form-grid--2col {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4) var(--space-5);
    }
}


/* ===== 9. ALERTS / NOTICES ===== */

.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: var(--size-body-s);
    line-height: 1.5;
    border: 1px solid transparent;
}
.alert--error  { background: oklch(0.20 0.05 25 / 0.5); border-color: oklch(0.45 0.10 25); color: oklch(0.92 0.05 25); }
.alert--notice { background: oklch(0.22 0.02 270 / 0.5); border-color: var(--hairline-strong); color: var(--fg); }
.alert--warn   { background: oklch(0.25 0.06 60 / 0.4); border-color: oklch(0.50 0.10 60); color: oklch(0.92 0.06 60); }


/* ===== 10. CARDS + SURFACES ===== */

.card {
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}


/* ===== 11. LANDING / HERO ===== */

.hero {
    min-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    justify-content: center;
    padding-block: var(--space-7);
}
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero__headline {
    font-family: var(--font-display);
    font-size: var(--size-display-xl);
    line-height: 0.95;
    letter-spacing: -0.035em;
    font-weight: 700;
    max-width: 14ch;
}
.hero__sub {
    margin-top: var(--space-5);
    font-size: var(--size-body-l);
    color: var(--fg-muted);
    max-width: 50ch;
    line-height: 1.5;
}
.hero__cta {
    margin-top: var(--space-6);
    display: flex; gap: var(--space-3); flex-wrap: wrap;
}


/* ===== 12. ACTIVATE — code input ===== */

.code-input-group {
    display: flex; gap: var(--space-3); justify-content: center;
    margin-block: var(--space-6);
}
.code-input {
    width: 64px; height: 72px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 500;
    background: var(--bg-input);
    color: var(--fg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    caret-color: var(--accent);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.code-input:focus {
    outline: none;
    border-color: var(--accent);
    background: oklch(0.22 0.008 270);
}
.code-input[data-filled="true"] {
    border-color: var(--accent);
}

.code-countdown {
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--size-mono-l);
    color: var(--fg-muted);
    margin-top: var(--space-4);
    font-variant-numeric: tabular-nums;
}
.code-countdown[data-state="warn"]   { color: var(--warn); }
.code-countdown[data-state="urgent"] { color: var(--danger); }

@media (max-width: 520px) {
    .code-input { width: 48px; height: 56px; font-size: 24px; }
}


/* ===== 13. AUTH PAGE WRAPPER ===== */

.auth-shell {
    min-height: calc(100vh - 64px);
    display: flex; align-items: center; justify-content: center;
    padding-block: var(--space-7);
}
.auth-card {
    width: 100%;
    max-width: 460px;
}
.auth-card--wide {
    max-width: 640px;
}
.auth-card__intro {
    margin-bottom: var(--space-6);
}
.auth-card__title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
    letter-spacing: -0.025em;
}
.auth-card__sub {
    color: var(--fg-muted);
    font-size: var(--size-body);
}


/* ===== 14. ERROR PAGE ===== */

.error-page {
    min-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start;
}
.error-page__code {
    font-family: var(--font-mono);
    font-size: var(--size-display-xl);
    line-height: 1; color: var(--accent);
    font-weight: 500;
}


/* ===== 15. UTILITIES ===== */

.text-center { text-align: center; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.text-muted { color: var(--fg-muted); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ===== 16. MOTION (respect prefers-reduced-motion) ===== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ===================================================================
 * STAGE E ADDITIONS — search, screenings, seat map, ticket, bookings
 * =================================================================== */


/* ---- Page intro shared header ---- */
.page-intro { padding-block: var(--space-6) var(--space-5); }
.page-title { margin-top: var(--space-2); font-size: clamp(2.25rem, 4vw, 3.5rem); }


/* ---- Cinema search bar ---- */
.search-bar {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr auto;
    gap: var(--space-3);
    align-items: end;
    padding: var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}
.search-bar__field { display: flex; flex-direction: column; gap: 8px; }
.search-bar .btn { height: 52px; padding-inline: 28px; white-space: nowrap; }
@media (max-width: 720px) {
    .search-bar { grid-template-columns: 1fr; }
    .search-bar .btn { width: 100%; }
}
.results-meta {
    color: var(--fg-muted);
    font-size: var(--size-body-s);
    padding-block: var(--space-3) var(--space-5);
    display: flex; align-items: center;
}


/* ---- Cinema card list ---- */
.cinema-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
    padding-bottom: var(--space-7);
}
.cinema-card {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cinema-card:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }
.cinema-card__link { display: block; padding: var(--space-5); }
.cinema-card__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.cinema-card__addr { margin-top: 6px; font-size: var(--size-body-s); }
.cinema-card__loc { margin-top: 4px; font-size: var(--size-caption); color: var(--fg-faint); }
.cinema-card__cta {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--size-body-s);
    color: var(--accent);
    transition: color var(--dur) var(--ease);
}
.cinema-card:hover .cinema-card__cta { color: var(--accent-hover); }


/* ---- Empty state ---- */
.empty-state {
    padding: var(--space-8) var(--space-5);
    text-align: center;
    border: 1px dashed var(--hairline);
    border-radius: var(--radius-lg);
    color: var(--fg-muted);
}
.empty-state h3 { margin-bottom: var(--space-2); color: var(--fg); }


/* ---- Cinema header on screenings page ---- */
.cinema-header { font-size: clamp(2.5rem, 5vw, 4rem); }


/* ---- Date strip ---- */
.date-strip {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-block: var(--space-5);
    scrollbar-width: thin;
}
.date-tile {
    flex: 0 0 auto;
    width: 64px; height: 80px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--fg-muted);
    transition: all var(--dur) var(--ease);
    text-decoration: none;
}
.date-tile:hover { border-color: var(--hairline-strong); color: var(--fg); }
.date-tile.is-selected {
    border-color: var(--accent);
    color: var(--fg);
    background: oklch(0.18 0.04 35 / 0.4);
}
.date-tile__day { font-size: 11px; letter-spacing: 0.1em; font-weight: 500; }
.date-tile__num { font-size: 24px; font-weight: 700; font-family: var(--font-display); }


/* ---- Movie / screenings list ---- */
.movie-list { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-7); }
.movie-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-5);
    align-items: center;
    padding-block: var(--space-5);
    border-top: 1px solid var(--hairline);
}
.movie-row:first-child { border-top: 1px solid var(--hairline-strong); }
.movie-row__title { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -0.02em; }
.movie-row__sub { font-size: var(--size-body-s); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.time-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.time-chip {
    min-width: 96px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    text-align: center;
    font-size: var(--size-body-s);
    line-height: 1.2;
    transition: all var(--dur) var(--ease);
}
.time-chip:hover { border-color: var(--accent); background: oklch(0.22 0.04 35 / 0.3); }
.time-chip__avail { display: block; font-size: 11px; color: var(--fg-muted); margin-top: 2px; letter-spacing: 0.05em; }
.time-chip.is-sold-out {
    color: var(--fg-faint);
    text-decoration: line-through;
    pointer-events: none;
    border-style: dashed;
}
@media (max-width: 720px) {
    .movie-row { grid-template-columns: 1fr; }
    .time-chips { justify-content: flex-start; }
}


/* ===================================================================
 * SEAT MAP — the signature page
 * =================================================================== */

.seat-page {
    min-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
}
.seat-page__topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--hairline);
}
.seat-page__title { text-align: center; font-size: var(--size-body-s); }
.seat-page__layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 0;
    min-height: 0;
}
@media (max-width: 980px) {
    .seat-page__layout { grid-template-columns: 1fr; }
}

.seat-area {
    padding: var(--space-7) var(--space-5) var(--space-6);
    display: flex; flex-direction: column; align-items: center;
}

/* The arced screen indicator with light bleed */
.screen-indicator {
    width: 80%; max-width: 720px;
    text-align: center;
    margin-bottom: var(--space-7);
}
.screen-arc {
    width: 100%; height: 80px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border: 1px solid var(--hairline-strong);
    border-top: none;
    background: radial-gradient(ellipse at center top,
        oklch(0.78 0.05 270 / 0.18) 0%,
        oklch(0.78 0.05 270 / 0.05) 40%,
        transparent 70%);
}
.screen-label {
    margin-top: var(--space-3);
    color: var(--fg-faint);
}

/* The seat grid */
.seat-grid { display: flex; flex-direction: column; gap: 8px; }
.seat-row {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    gap: var(--space-3);
}
.row-label {
    color: var(--fg-faint);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}
.seats {
    display: flex; gap: 8px;
    justify-content: center;
}

.seat {
    width: 32px; height: 32px;
    border-radius: 6px 6px 4px 4px;  /* slight asymmetry — reads as a seat back */
    border: 1px solid var(--hairline-strong);
    background: transparent;
    cursor: pointer;
    transition:
        background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur) var(--ease);
    padding: 0;
}
.seat--available:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background: oklch(0.22 0.06 35 / 0.4);
}
.seat--selected {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px oklch(0.72 0.19 35 / 0.4);
}
.seat--selected:hover { transform: translateY(-2px); background: var(--accent-hover); }
.seat--held {
    background: oklch(0.45 0.10 270);
    border-color: oklch(0.55 0.10 270);
    cursor: not-allowed;
    opacity: 0.65;
}
.seat--taken {
    background:
        repeating-linear-gradient(45deg,
            oklch(0.30 0.005 270) 0, oklch(0.30 0.005 270) 3px,
            oklch(0.22 0.005 270) 3px, oklch(0.22 0.005 270) 6px);
    border-color: oklch(0.30 0.005 270);
    cursor: not-allowed;
}
.seat:active { transform: scale(0.92); }
.seat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Legend */
.seat-legend {
    display: flex; gap: var(--space-5); justify-content: center;
    margin-top: var(--space-7);
    font-size: 12px;
    color: var(--fg-muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-swatch { width: 18px; height: 18px; cursor: default; pointer-events: none; }

/* Right rail — order summary */
.order-rail {
    border-left: 1px solid var(--hairline);
    background: var(--bg-elevated);
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
}
.order-rail__inner {
    padding: var(--space-6) var(--space-5);
    display: flex; flex-direction: column;
    height: 100%;
}
.order-rail__title {
    margin-top: var(--space-2);
    font-size: 1.5rem;
}
.order-rail__when { margin-top: var(--space-2); font-size: 13px; }
.order-rail__seat {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--hairline);
    font-size: var(--size-body);
}
.order-rail__total {
    margin-top: auto;
    padding-block: var(--space-5);
    border-top: 1px solid var(--hairline);
    display: flex; flex-direction: column;
}
.order-rail__price {
    font-size: 36px;
    font-weight: 500;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
    transition: color var(--dur) var(--ease);
}
.order-rail__price.is-active { color: var(--accent); }

@media (max-width: 980px) {
    .order-rail {
        position: sticky;
        top: auto; bottom: 0;
        border-left: none;
        border-top: 1px solid var(--hairline);
        height: auto;
    }
    .order-rail__inner { padding: var(--space-4) var(--space-5); }
    .order-rail__seat { margin-top: var(--space-3); padding-top: var(--space-3); }
    .order-rail__total { margin-top: var(--space-3); padding-block: 0 var(--space-3); }
}


/* ===================================================================
 * TICKET REVEAL PAGE
 * =================================================================== */

.ticket-page {
    min-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding-block: var(--space-7);
}
.ticket-page__greeting { text-align: center; margin-bottom: var(--space-6); }
.ticket-page__line {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-top: var(--space-2);
}

.ticket {
    width: 100%; max-width: 720px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    background: var(--bg-elevated);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ticket__left, .ticket__right { padding: var(--space-6); }
.ticket__title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-top: var(--space-2);
    letter-spacing: -0.02em;
}
.ticket__meta { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.ticket__row { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-3); align-items: baseline; }
.ticket__row dt { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.ticket__row dd { font-size: var(--size-body-s); }
.ticket__row dd.mono { font-size: var(--size-body); }

/* Perforated divider — dashed line + two semicircle notches */
.ticket__perf {
    width: 1px;
    background:
        linear-gradient(to bottom,
            transparent 0, transparent 8px,
            var(--hairline-strong) 8px, var(--hairline-strong) 12px,
            transparent 12px, transparent 20px) repeat-y;
    background-size: 1px 12px;
    position: relative;
}
.ticket__perf::before, .ticket__perf::after {
    content: '';
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 18px; height: 18px;
    background: var(--bg);
    border-radius: 50%;
}
.ticket__perf::before { top: -9px; }
.ticket__perf::after  { bottom: -9px; }

.ticket__right {
    display: flex; flex-direction: column;
    align-items: center;
    text-align: center;
}
.ticket__code {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-top: var(--space-3);
    color: var(--accent);
    font-family: var(--font-mono);
}
.ticket__qr {
    margin-top: var(--space-5);
    width: 140px; height: 140px;
    color: var(--fg);
    background: oklch(0.22 0.005 270);
    border-radius: var(--radius-sm);
    padding: 8px;
    image-rendering: pixelated;
}

.ticket-page__actions {
    margin-top: var(--space-6);
    display: flex; gap: var(--space-3);
    justify-content: center;
}

.ticket-page.is-fresh .ticket {
    animation: ticketReveal 700ms var(--ease) both;
}
@keyframes ticketReveal {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
    .ticket { grid-template-columns: 1fr; }
    .ticket__perf {
        height: 1px; width: 100%;
        background:
            linear-gradient(to right,
                transparent 0, transparent 8px,
                var(--hairline-strong) 8px, var(--hairline-strong) 12px,
                transparent 12px, transparent 20px) repeat-x;
        background-size: 12px 1px;
    }
    .ticket__perf::before { left: -9px; top: 50%; transform: translateY(-50%); }
    .ticket__perf::after  { left: auto; right: -9px; top: 50%; bottom: auto; transform: translateY(-50%); }
}


/* ===================================================================
 * MY BOOKINGS PAGE
 * =================================================================== */

.tabs { display: flex; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-5); }
.tab {
    padding: 8px 0;
    color: var(--fg-muted);
    font-size: var(--size-body-s);
    border-bottom: 2px solid transparent;
    transition: all var(--dur) var(--ease);
}
.tab:hover { color: var(--fg); }
.tab.is-active { color: var(--fg); border-bottom-color: var(--accent); }

.booking-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-7); }
.booking-row {
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--bg-elevated);
}
.booking-row__date {
    width: 64px; height: 64px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
}
.booking-row__day { font-size: 24px; font-weight: 700; line-height: 1; }
.booking-row__mon { font-size: 11px; letter-spacing: 0.1em; margin-top: 4px; color: var(--fg-muted); }
.booking-row__title { display: block; font-size: 1.125rem; font-weight: 500; }
.booking-row__title:hover { color: var(--accent); }
.booking-row__sub { margin-top: 4px; font-size: 13px; }
.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 500;
    text-transform: uppercase;
}
.status-pill--conf { background: oklch(0.30 0.10 145 / 0.3); color: oklch(0.82 0.10 145); }
.status-pill--chg  { background: oklch(0.30 0.10 60  / 0.3); color: oklch(0.85 0.10 60); }
.status-pill--canc { background: oklch(0.30 0.005 270 / 0.5); color: var(--fg-faint); }