/* Primeseats design system: tokens. The one system; styles.css and control.css are frozen legacy.
   Source of the look: the EventTicket mobile concept (Behance 212932811), taken as a language (colour, type scale,
   component shapes, purchase flow), never its photos or logo. Rules and the breaking points: DESIGN.md.
   Every name starts with --ds- so none can collide with a legacy token. */

/* shortcut: nested @import costs one extra request; move to a <link> per template when pages migrate */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&subset=cyrillic,cyrillic-ext,latin,latin-ext&display=swap");

/* Brand and status colours: the same in both themes, so a button reads the same everywhere. */
:root {
    --ds-blue: #1a4bf5;          /* the one action colour of the concept; 6.2:1 against white text */
    --ds-blue-press: #1239c4;    /* pressed state, one step darker, keeps 8.7:1 with white */
    --ds-blue-soft: #8fa8ff;     /* blue for text and icons on dark surfaces, 8.5:1 on the dark page */
    --ds-lime: #c7f43a;          /* selected date and rating in the concept; always carries dark text */
    --ds-pink: #ec4c8a;          /* genre tile accent, decoration only, never text */
    --ds-orange: #f0734a;        /* genre tile accent, decoration only, never text */
    --ds-green: #12805c;         /* success text on light surfaces, 4.9:1 on white */
    --ds-amber: #9a5b00;         /* warning text on light surfaces, 5.4:1 on white */
    --ds-red: #c9303a;           /* error text on light surfaces, 5.3:1 on white */
}

/* Light theme: the default, as in the concept's main screens. */
:root,
:root[data-theme="light"] {
    --ds-bg: #ffffff;            /* page */
    --ds-surface: #f2f4f9;       /* grey-blue tiles and rows in the concept */
    --ds-surface-raised: #ffffff; /* cards that sit on --ds-surface */
    --ds-line: #d3daf0;          /* thin blue-tinted frames, the concept's signature hairline */
    --ds-text: #0d1220;          /* body text, 18.7:1 on --ds-bg */
    --ds-text-muted: #566079;    /* secondary text, 6.3:1 on --ds-bg, 5.7:1 on --ds-surface */
    --ds-on-blue: #ffffff;       /* text on --ds-blue */
    --ds-link: #1a4bf5;          /* links in running text */
    --ds-success: #12805c;       /* status text, picks the light-safe shade */
    --ds-warning: #9a5b00;       /* status text, picks the light-safe shade */
    --ds-danger: #c9303a;        /* status text, picks the light-safe shade */
    --ds-focus: #1a4bf5;         /* focus ring, visible on white and on tiles */
    --ds-shadow: 0 8px 24px -8px rgba(13, 18, 32, 0.18); /* offset plus soft blur, never a flat halo */
}

/* Dark theme only when the page sets data-theme="dark"; the system preference is ignored, light is always the default. */
:root[data-theme="dark"] {
    --ds-bg: #0b0d14;            /* page */
    --ds-surface: #151926;       /* rows and tiles */
    --ds-surface-raised: #1e2333; /* cards on --ds-surface */
    --ds-line: #2b3350;          /* hairlines */
    --ds-text: #f3f5fa;          /* body text */
    --ds-text-muted: #a3aac0;    /* secondary text */
    --ds-on-blue: #ffffff;       /* text on --ds-blue */
    --ds-link: #8fa8ff;          /* links */
    --ds-success: #4cc59a;       /* status text */
    --ds-warning: #f0b440;       /* status text */
    --ds-danger: #ff7a82;        /* status text */
    --ds-focus: #8fa8ff;         /* focus ring */
    --ds-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6); /* shadow */
}

/* Type: the concept's scale (SF Pro Text on iOS), carried by the system font on Apple and Inter elsewhere. */
:root {
    --ds-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; /* native on Apple, Inter on the rest; Inter has Cyrillic */
    --ds-text-title1: 600 1.375rem/1.18 var(--ds-font-sans); /* 22/26 semibold, screen titles */
    --ds-text-title2: 600 1.125rem/1.22 var(--ds-font-sans); /* 18/22 semibold, section titles */
    --ds-text-headline: 600 1.0625rem/1.3 var(--ds-font-sans); /* 17/22 semibold, card titles */
    --ds-text-body: 400 0.9375rem/1.4 var(--ds-font-sans); /* 15/21 regular, reading text */
    --ds-text-label: 500 0.9375rem/1.33 var(--ds-font-sans); /* 15/20 medium, buttons and row labels */
    --ds-text-caption: 500 0.75rem/1.33 var(--ds-font-sans); /* 12/16 medium, meta lines under 16px only for non-essential info */
    --ds-text-display: 700 clamp(1.75rem, 1.2rem + 2.4vw, 3rem)/1.08 var(--ds-font-sans); /* hero on wide screens; the concept has none, so it is derived, max 3rem */
}

/* Shape: rounded tiles and pill controls, as in the UI kit. */
:root {
    --ds-radius-sm: 10px;        /* chips inside rows, small inputs */
    --ds-radius-md: 16px;        /* tiles, rows, inputs */
    --ds-radius-lg: 24px;        /* event cards and sheets */
    --ds-radius-pill: 999px;     /* buttons, date chips, tabs: the concept's button shape */
    --ds-border: 1px solid var(--ds-line); /* the hairline frame used on tiles and rows */
}

/* Space: 4px grid, 16px screen gutter as in the 390-wide screens. */
:root {
    --ds-space-1: 4px;           /* icon to label */
    --ds-space-2: 8px;           /* inside a chip or a tight row */
    --ds-space-3: 12px;          /* between row items */
    --ds-space-4: 16px;          /* screen gutter on phones, card padding */
    --ds-space-5: 24px;          /* between groups */
    --ds-space-6: 32px;          /* between sections on phones */
    --ds-space-7: 56px;          /* between sections on wide screens */
    --ds-tap: 44px;              /* minimum touch target, the concept's button height is 48 */
    --ds-container: 1200px;      /* wide-screen content width, derived: the concept is phone-only */
}

/* Motion: one ease, two durations. */
:root {
    --ds-ease: cubic-bezier(0.16, 1, 0.3, 1); /* exponential ease-out, starts from a visible state */
    --ds-fast: 150ms;            /* hover and press */
    --ds-slow: 280ms;            /* sheets and page changes */
}

/* Browser surfaces the system themes, so nothing ships as a browser default. */
::selection { background: var(--ds-blue); color: var(--ds-on-blue); }
:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }

/* Scrollbars, form controls and canvas follow the page theme. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Booking page shell on the tokens: light by default, dark by system preference. The seat map and dialogs
   below it are still the legacy dark components until their tickets restyle them; they carry their own
   light text (--ds-on-blue is white in both themes). */
.booking-page { background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font-sans); }
.booking-page #map-container-wrapper { color: var(--ds-on-blue); }
.booking-page .event-hero-title { color: var(--ds-text); text-shadow: none; }
.booking-page .no-showings,
.booking-page .map-loading { padding: var(--ds-space-5); text-align: center; color: var(--ds-text-muted); }

/* Hall overview and section tabs: pill tabs, then a zone row per section under the plan picture.
   A zone with seats is a blue-framed row with its price range; a sold-out zone is a dashed row. */
.booking-page .section-tabs { background: var(--ds-surface); border: var(--ds-border); border-radius: var(--ds-radius-pill); box-shadow: var(--ds-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; padding: var(--ds-space-1); gap: var(--ds-space-1); }
.booking-page .tab-btn { min-height: var(--ds-tap); padding: 0 var(--ds-space-4); border: 2px solid transparent; border-radius: var(--ds-radius-pill); background: transparent; color: var(--ds-text); font: var(--ds-text-label); }
.booking-page .tab-btn:hover { background: var(--ds-surface-raised); color: var(--ds-text); }
.booking-page .tab-btn.active { background: var(--ds-blue); border-color: var(--ds-blue); color: var(--ds-on-blue); box-shadow: none; }
.booking-page .tab-btn-badge { background: var(--ds-surface-raised); color: var(--ds-text-muted); font: var(--ds-text-caption); }
.booking-page .tab-btn.active .tab-btn-badge { background: var(--ds-on-blue); color: var(--ds-blue); }
/* My seats on a floor: the same dark disc with a check as the "your seats" key. */
.booking-page .tab-btn-mine { padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-text); color: var(--ds-bg); font: var(--ds-text-caption); }
/* Way back to the hall overview: a link above the floor tabs, not one more tab. */
.overview-link { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-tap); margin: var(--ds-space-1) var(--ds-space-4) 0; padding: 0; border: 0; background: none; color: var(--ds-link); font: var(--ds-text-label); cursor: pointer; }
/* The chevron sits in a small round chip, the same arrow as the screen back button, nudging left on hover. */
.overview-link svg { flex: none; box-sizing: content-box; padding: var(--ds-space-1); border-radius: var(--ds-radius-pill); background: var(--ds-surface-raised); transition: transform var(--ds-fast) var(--ds-ease); }
.overview-link:hover svg { transform: translateX(calc(-1 * var(--ds-space-1))); }
.overview-link[hidden] { display: none; }
.booking-page .hall-overview { color: var(--ds-text); }
.booking-page .overview-title { font: var(--ds-text-label); }
/* One card per hall section: mini plan with this section filled, name, note, price. */
.booking-page .overview-card { display: flex; align-items: center; gap: var(--ds-space-3); width: 100%; padding: var(--ds-space-3); border: 2px solid var(--ds-blue); border-radius: var(--ds-radius-md); background: var(--ds-surface-raised); color: var(--ds-text); text-align: left; cursor: pointer; box-sizing: border-box; }
.booking-page .overview-card.is-soldout { border: 2px dashed var(--ds-line); background: var(--ds-surface); color: var(--ds-text-muted); cursor: default; }
.booking-page .overview-card-thumb { flex: none; width: 96px; }
.booking-page .overview-card-thumb svg { display: block; width: 100%; height: auto; }
.booking-page .overview-card-thumb text { display: none; }
.booking-page .overview-card-thumb rect, .booking-page .overview-card-thumb [data-section-id] { fill: var(--ds-surface); stroke: var(--ds-line); stroke-width: 6; }
.booking-page .overview-card-thumb [data-section-id].is-active { fill: var(--ds-blue); stroke: var(--ds-blue); }
.booking-page .overview-card.is-soldout .overview-card-thumb [data-section-id].is-active { fill: var(--ds-line); stroke: var(--ds-line); }
.booking-page .overview-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-1); }
.booking-page .overview-card-name { font: var(--ds-text-headline); }
.booking-page .overview-card-note { font: var(--ds-text-body); color: var(--ds-text-muted); }
.booking-page .overview-card-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; font: var(--ds-text-label); }
.booking-page .overview-card-unit { font: var(--ds-text-caption); color: var(--ds-text-muted); }

/* Seat map: four seat states told apart by fill, frame, size and a mark (number, check, dots), never colour alone.
   A sold seat is a small pale dot with no mark, so the free seats stand out.
   A free seat keeps its price-zone colour as the frame; the mark itself is drawn by the page script. */
.booking-page #map-container-wrapper { color: var(--ds-text); }
.booking-page .map-block { background: var(--ds-bg); border: var(--ds-border); box-shadow: var(--ds-shadow); }
.booking-page .svg-map-layer .seat.seat-free { fill: var(--zone-color, var(--ds-blue)) !important; stroke: var(--zone-color, var(--ds-blue)) !important; stroke-width: 2; opacity: 1; filter: none; }
.booking-page .svg-map-layer .seat.seat-free:hover { opacity: 0.75; filter: none; }
.booking-page .svg-map-layer .seat.seat-selected { fill: var(--ds-text) !important; stroke: var(--ds-text) !important; stroke-width: 4; filter: none; }
.booking-page .svg-map-layer .seat.seat-taken { fill: var(--ds-line) !important; stroke: var(--ds-line) !important; opacity: 1; scale: 0.45; transform-box: fill-box; transform-origin: center; }
.booking-page .svg-map-layer .seat.seat-hold { fill: var(--ds-line) !important; stroke: var(--ds-text-muted) !important; stroke-dasharray: 3 2; animation: none; }
.seat-mark { text-anchor: middle; dominant-baseline: central; fill: var(--ds-text); font-family: var(--ds-font-sans); font-weight: 600; pointer-events: none; user-select: none; }
.row-label { text-anchor: middle; dominant-baseline: central; fill: var(--ds-text-muted); font-family: var(--ds-font-sans); font-weight: 600; pointer-events: none; user-select: none; }
.seat-selected + .seat-mark { fill: var(--ds-bg); font-weight: 700; }
.seat-hold + .seat-mark { fill: var(--ds-text-muted); }
/* A tapped seat keeps no focus frame (Chrome on Android drew one); the keyboard ring stays. */
.svg-map-layer .seat { -webkit-tap-highlight-color: transparent; }
.svg-map-layer .seat:focus:not(:focus-visible) { outline: none; }

/* Stage: a plain pill with one word. */
.booking-page .stage-indicator { width: 80%; height: 32px; margin: 0 auto var(--ds-space-4); border: var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text-muted); font: var(--ds-text-caption); letter-spacing: 0.1em; text-shadow: none; }
.booking-page .stage-indicator.stage-bottom { margin: var(--ds-space-4) auto 0; transform: none; }

/* Key and zone chips under the map. */
.booking-page .map-info { background: var(--ds-bg); color: var(--ds-text); border-top: var(--ds-border); }
.booking-page .map-info .legend { gap: var(--ds-space-2); justify-content: flex-start; }
.booking-page .map-info .legend:empty { display: none; }
.booking-page .legend-item { color: var(--ds-text); font: var(--ds-text-caption); }
.zone-chip { padding: var(--ds-space-1) var(--ds-space-3); border: var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-surface); }
.zone-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
/* Key entry for the selected seat: the same dark disc with a check as on the map. */
.zone-dot.key-sold { background: var(--ds-line); scale: 0.5; }
.zone-dot.key-selected { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--ds-text); color: var(--ds-bg); font-size: 11px; font-weight: 700; line-height: 1; }

/* Floor tabs are hidden: another section is picked only on the hall overview. */
.booking-page .section-tabs { display: none; position: static; transform: none; margin: var(--ds-space-3) var(--ds-space-4) 0; width: fit-content; max-width: calc(100% - 2 * var(--ds-space-4)); flex-wrap: wrap; overflow-x: visible; }
.booking-page .map-wrapper.has-section-tabs #map-content { padding-top: 0; padding-bottom: 0; }
/* Phones: floor tabs and price chips each keep one line that scrolls sideways; the cut-off chip shows there is more. */
@media (max-width: 900px) {
    .booking-page .section-tabs, .booking-page .map-info .legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .booking-page .map-info .legend > * { flex: none; white-space: nowrap; }
}

/* Seat screen: top bar with a back arrow, the recap, and the summary under the hall (pinned on phones). */
/* The bar is a header: the page's own padding is cancelled so it sits on the gutter edge, the arrow glyph flush with the content. */
body.booking-page .main-content { padding: var(--ds-space-1) var(--ds-space-4) 80px; }
.screen-bar { display: flex; align-items: center; gap: var(--ds-space-2); margin: 0 0 0 calc(-1 * var(--ds-space-3)); }
.screen-bar-back { display: flex; align-items: center; justify-content: center; width: var(--ds-tap); height: var(--ds-tap); border: 0; border-radius: var(--ds-radius-pill); background: transparent; color: var(--ds-text); cursor: pointer; }
.screen-bar-title { margin: 0; font: var(--ds-text-title2); color: var(--ds-text); }
.screen-recap { margin-bottom: 0; }
.screen-recap-title { margin: 0 0 var(--ds-space-2); font: var(--ds-text-title1); color: var(--ds-text); }
.screen-recap-list { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-1) var(--ds-space-4); margin: 0; font: var(--ds-text-body); }
.screen-recap-list dt { color: var(--ds-text-muted); }
.screen-recap-list dd { margin: 0; color: var(--ds-text); }
.screen-recap-line { margin: 0; font: var(--ds-text-body); color: var(--ds-text-muted); }
.seat-summary { display: flex; flex-direction: column; gap: var(--ds-space-3); margin-top: var(--ds-space-4); padding: var(--ds-space-4) 0 calc(var(--ds-space-4) + env(safe-area-inset-bottom)); background: var(--ds-bg); color: var(--ds-text); }
/* The total line is a button: it folds and unfolds the seat list; the chevron tells which way. */
.seat-summary-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); width: 100%; min-height: var(--ds-tap); padding: 0; border: 0; background: none; color: var(--ds-text); text-align: left; cursor: pointer; }
.seat-summary-head[hidden], .seat-summary-note[hidden], .seat-summary-rows[hidden] { display: none; }
.seat-summary-heading { margin: 0; font: var(--ds-text-headline); }
.seat-summary-heading::after { content: " ▾"; color: var(--ds-text-muted); }
.seat-summary-head[aria-expanded="true"] .seat-summary-heading::after { content: " ▴"; }
.seat-summary-time { font: var(--ds-text-caption); color: var(--ds-text-muted); font-variant-numeric: tabular-nums; }
.seat-summary-time.is-urgent, .hold-countdown.is-urgent { color: var(--ds-danger); font: var(--ds-text-label); }
.seat-summary-note { margin: 0; padding: var(--ds-space-3) var(--ds-space-4); border: 2px solid var(--ds-danger); border-radius: var(--ds-radius-md); font: var(--ds-text-label); }
.seat-summary-rows { display: flex; flex-direction: column; gap: var(--ds-space-2); max-height: 30vh; overflow-y: auto; }
.seat-summary-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); padding: 0 0 0 var(--ds-space-3); border-radius: var(--ds-radius-md); background: var(--ds-surface); }
.seat-summary-value { font: var(--ds-text-label); overflow-wrap: anywhere; }
.seat-summary-drop { flex: none; min-width: var(--ds-tap); min-height: var(--ds-tap); border: 0; background: none; color: var(--ds-text-muted); font: var(--ds-text-label); cursor: pointer; }
.seat-summary-cta { min-height: var(--ds-tap); border: 0; border-radius: var(--ds-radius-pill); background: var(--ds-blue); color: var(--ds-on-blue); font: var(--ds-text-label); cursor: pointer; }
.seat-summary-cta:disabled { background: var(--ds-surface); color: var(--ds-text-muted); cursor: default; }
/* Bottom bar on phones: one full-width strip with the screen's action, pinned to the window on the event, seat and
   checkout screens alike. The page script keeps that much room under the page (reserveBottomBar). */
@media (max-width: 900px) {
    .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; box-sizing: border-box; z-index: 100; padding: var(--ds-space-3) var(--ds-space-4) calc(var(--ds-space-3) + env(safe-area-inset-bottom)); border-top: var(--ds-border); background: var(--ds-bg); box-shadow: var(--ds-shadow); }
    .booking-page .seat-summary.bottom-bar, .booking-page .checkout-bar { gap: var(--ds-space-2); margin: 0; }
}

/* Event screen: a centred column of reading width. Media on top, a chip row, title, venue line, description, then the
   action button; on phones the button is pinned to the bottom edge and the column leaves room for it. */
.booking-page .show-hero { grid-area: hero; display: flex; flex-direction: column; gap: var(--ds-space-4); width: 100%; max-width: 40rem; margin-inline: auto; min-width: 0; }
.booking-page .show-intro { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ds-radius-md); background: var(--ds-surface); }
.booking-page .show-intro[hidden] { display: none; }
.booking-page .show-intro--clickable { cursor: pointer; }
.booking-page .show-intro-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.booking-page .show-intro-poster[hidden] { display: none; }
/* The 16:9 frame is scaled up so the player chrome falls outside the box; hidden until the player reports it is playing. */
.booking-page .show-intro-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transform: scale(1.35); pointer-events: none; opacity: 0; transition: opacity var(--ds-slow) var(--ds-ease); }
.booking-page .show-intro--playing .show-intro-video { opacity: 1; }
.booking-page .show-intro-sound { position: absolute; top: var(--ds-space-3); right: var(--ds-space-3); display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-tap); padding: 0 var(--ds-space-4); border: var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-surface-raised); color: var(--ds-text); font: var(--ds-text-label); cursor: pointer; }
.booking-page .show-intro-sound[hidden] { display: none; }
.booking-page .show-card { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.booking-page .event-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.booking-page .event-chips:not(:has(.event-chip:not([hidden]))) { display: none; }
.booking-page .event-chip { padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text); font: var(--ds-text-label); }
.booking-page .event-chip[hidden] { display: none; }
.booking-page .event-chip--price { background: var(--ds-blue); color: var(--ds-on-blue); }
/* Phones: the price and genre chips keep one line that scrolls sideways, saving height. */
@media (max-width: 900px) {
    .booking-page .event-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .booking-page .event-chip { flex: none; white-space: nowrap; }
    /* The script marks the edge that hides more chips; the mask only needs opacity, so any colour will do. */
    .booking-page .event-chips.fade-end { mask-image: linear-gradient(to right, currentcolor calc(100% - var(--ds-space-5)), transparent); }
    .booking-page .event-chips.fade-start { mask-image: linear-gradient(to left, currentcolor calc(100% - var(--ds-space-5)), transparent); }
    .booking-page .event-chips.fade-start.fade-end { mask-image: linear-gradient(to right, transparent, currentcolor var(--ds-space-5), currentcolor calc(100% - var(--ds-space-5)), transparent); }
}
.booking-page .show-card-title { margin: 0; color: var(--ds-text); font: var(--ds-text-title1); }
.booking-page .event-venue-line { margin: 0; color: var(--ds-text-muted); font: var(--ds-text-label); }
.booking-page .event-maps { color: var(--ds-link); white-space: nowrap; }
.booking-page .show-card-facts { margin: 0; color: var(--ds-text-muted); font: var(--ds-text-caption); }
.booking-page .show-card-desc { margin: 0; color: var(--ds-text); font: var(--ds-text-body); white-space: pre-line; }
.booking-page .show-card-desc:empty { display: none; }
.booking-page .show-card-desc:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.booking-page .show-card-more { align-self: flex-start; min-height: var(--ds-tap); padding: 0; border: 0; background: none; color: var(--ds-link); font: var(--ds-text-label); cursor: pointer; }
.booking-page .show-card-more[hidden] { display: none; }
.booking-page .event-gallery-row img { cursor: zoom-in; }
/* Photo viewer: full-screen dialog, photos in a snap strip so a swipe pages them; the close button sits top right. */
.photo-lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ds-bg); color: var(--ds-text); overflow: hidden; overscroll-behavior: contain; }
.photo-lightbox:not([open]) { display: none; }
.photo-lightbox-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.booking-page { touch-action: pan-x pan-y; } /* no browser pinch-zoom of the page; the photo viewer and the hall plan zoom themselves */
.photo-lightbox-track { touch-action: pan-x; }
.photo-lightbox-track.is-zoomed { overflow-x: hidden; touch-action: none; }
.photo-lightbox-track img { user-select: none; -webkit-user-drag: none; flex: none; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; scroll-snap-stop: always; }
.photo-lightbox-close { position: absolute; top: max(var(--ds-space-3), env(safe-area-inset-top)); right: var(--ds-space-3); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--ds-tap); height: var(--ds-tap); border: var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-surface-raised); color: var(--ds-text); cursor: pointer; }
.booking-page .event-gallery { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.booking-page .event-gallery[hidden] { display: none; }
.booking-page .event-gallery-title { margin: 0; color: var(--ds-text); font: var(--ds-text-title2); }
.booking-page .event-gallery-row { display: flex; gap: var(--ds-space-3); overflow-x: auto; scroll-snap-type: x proximity; }
.booking-page .event-gallery-row img { flex: none; height: 160px; width: auto; max-width: 80%; object-fit: cover; border-radius: var(--ds-radius-md); scroll-snap-align: start; }
.booking-page .event-gallery-row img[hidden] { display: none; }
.booking-page .show-card-cta { display: block; width: 100%; min-height: var(--ds-tap); border: 0; border-radius: var(--ds-radius-pill); background: var(--ds-blue); color: var(--ds-on-blue); font: var(--ds-text-label); cursor: pointer; }
@media (max-width: 900px) {
}

/* Checkout screen: a centred column of reading width - recap, recipient inputs with floating labels, promo, total, pay button. */
.booking-page #screen-checkout { grid-area: hero; width: 100%; max-width: 40rem; margin-inline: auto; gap: var(--ds-space-4); }
/* The seat screen sits in the same slot as checkout, so the back bar keeps one height and position across screens. */
.booking-page #screen-seats { grid-area: hero; width: 100%; max-width: 40rem; margin-inline: auto; gap: var(--ds-space-4); }
.sheet-label { display: block; margin-bottom: var(--ds-space-1); font: var(--ds-text-caption); color: var(--ds-text-muted); }
.checkout-recipient { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.checkout-heading { margin: 0; color: var(--ds-text); font: var(--ds-text-title2); }
.checkout-sub { margin: 0; color: var(--ds-text-muted); font: var(--ds-text-caption); }
.float-field { position: relative; }
.booking-page .float-field .form-input { box-sizing: border-box; min-height: calc(var(--ds-tap) + var(--ds-space-3)); padding: var(--ds-space-5) var(--ds-space-4) var(--ds-space-2); border: 2px solid transparent; background: var(--ds-surface); }
.booking-page .float-field .form-input:focus { border-color: var(--ds-blue); }
.booking-page .float-field .form-input.input-error { border-color: var(--ds-danger); }
.float-field label { position: absolute; left: var(--ds-space-4); top: 50%; transform: translateY(-50%); transform-origin: left top; color: var(--ds-text-muted); font: var(--ds-text-body); pointer-events: none; transition: top var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease); }
.float-field .form-input:focus + label, .float-field .form-input:not(:placeholder-shown) + label { top: var(--ds-space-2); transform: scale(0.75); }
.field-error { margin: var(--ds-space-1) 0 0; color: var(--ds-danger); font: var(--ds-text-caption); }
.field-error[hidden] { display: none; }
.checkout-pay, .checkout-bar { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.booking-page .order-savings, .booking-page .order-total-label, .booking-page .order-total-tax, .booking-page .checkout-note { color: var(--ds-text-muted); font: var(--ds-text-caption); }
.booking-page .order-savings-value { color: var(--ds-success); }
.booking-page .checkout-note { margin: 0; }
.booking-page .checkout-note a { color: var(--ds-link); }
.booking-page .order-total-label { font: var(--ds-text-headline); color: var(--ds-text); }
.booking-page .order-total-value { margin-left: auto; color: var(--ds-text); font: var(--ds-text-title1); font-variant-numeric: tabular-nums; }
.booking-page .form-input { min-height: var(--ds-tap); border: var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-bg); color: var(--ds-text); box-shadow: none; }
.booking-page .form-input:focus { border-color: var(--ds-blue); box-shadow: none; }
.booking-page .form-input.input-error { border: 2px solid var(--ds-danger); box-shadow: none; animation: none; }
.booking-page .promo-apply-btn { min-height: var(--ds-tap); border: 2px solid var(--ds-blue); border-radius: var(--ds-radius-pill); background: var(--ds-bg); color: var(--ds-text); font: var(--ds-text-label); }
.promo-feedback { min-height: 1.2em; margin-top: var(--ds-space-1); font: var(--ds-text-caption); }
.hold-countdown { font: var(--ds-text-label); color: var(--ds-text-muted); }
.booking-page .panel-notice { border: 2px solid var(--ds-danger); background: var(--ds-surface); color: var(--ds-text); font: var(--ds-text-label); animation: none; }
.checkout-cta { min-height: var(--ds-tap); border: 0; border-radius: var(--ds-radius-pill); background: var(--ds-blue); color: var(--ds-on-blue); font: var(--ds-text-label); cursor: pointer; }
.checkout-cta:disabled { opacity: 0.6; cursor: default; }
.booking-page .btn-spinner { border: 2px solid var(--ds-on-blue); border-top-color: transparent; }
@media (prefers-reduced-motion: reduce) { .booking-page .btn-spinner { animation: none; } .float-field label { transition: none; } }

/* Payment states on the checkout screen: title, hint, one button that leads on. */
.booking-page .panel-notice-state { display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--ds-space-4); border: var(--ds-border); border-radius: var(--ds-radius-md); }
.booking-page .panel-notice-state[hidden] { display: none; }
.state-note-title { font: var(--ds-text-headline); }
.state-note-hint { color: var(--ds-text-muted); font: var(--ds-text-body); }
.state-note-btn { display: flex; align-items: center; justify-content: center; min-height: var(--ds-tap); padding: 0 var(--ds-space-5); border: 2px solid var(--ds-blue); border-radius: var(--ds-radius-pill); background: var(--ds-blue); color: var(--ds-on-blue); font: var(--ds-text-label); cursor: pointer; }
.state-note-btn--outline { background: var(--ds-bg); color: var(--ds-text); }

/* Token pages (body.token-page): one sans family for every heading and control, the footer on the page tokens,
   and a poster that failed to load gives way to the surface behind it. Reused by any page that adopts the class. */
/* shortcut: blanket font reset, migration shim until the legacy font-family rules in styles.css are deleted; then drop the `*`. */
html body.token-page, html body.token-page * { font-family: var(--ds-font-sans); }
.token-page img[hidden] { display: none; }
body.token-page { background: var(--ds-bg); color: var(--ds-text); }
.token-page .site-footer { border-top: var(--ds-border); background: var(--ds-bg); }
.token-page .footer-links a { color: var(--ds-link); }
.token-page .footer-links a:hover { color: var(--ds-link); text-decoration: underline; }
.token-page .footer-copy, .token-page .footer-entity { color: var(--ds-text-muted); }

/* Events page: one card per show on the tokens, light by default and dark with the system. */
.ev-page { padding-top: var(--ds-space-5); padding-bottom: var(--ds-space-7); }
.ev-title { margin: 0 0 var(--ds-space-5); font: var(--ds-text-display); color: var(--ds-text); }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--ds-space-7) * 5), 1fr)); gap: var(--ds-space-5); }
.ev-card { display: flex; flex-direction: column; overflow: hidden; border: var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface-raised); box-shadow: var(--ds-shadow); }
.ev-poster { aspect-ratio: 4 / 3; background: var(--ds-surface); }
.ev-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-body { display: flex; flex-direction: column; flex: 1; gap: var(--ds-space-2); padding: var(--ds-space-4); }
.ev-card-title { margin: 0; font: var(--ds-text-headline); color: var(--ds-text); }
.ev-meta { margin: 0; font: var(--ds-text-body); color: var(--ds-text-muted); }
.ev-more { color: var(--ds-link); }
.ev-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-top: auto; padding-top: var(--ds-space-3); }
.ev-price { font: var(--ds-text-label); color: var(--ds-text); }
.ev-pill { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ds-tap); padding: 0 var(--ds-space-5); border: 0; border-radius: var(--ds-radius-pill); background: var(--ds-blue); color: var(--ds-on-blue); font: var(--ds-text-label); text-decoration: none; cursor: pointer; transition: background var(--ds-fast) var(--ds-ease); }
.ev-pill:hover { background: var(--ds-blue-press); }
.ev-note { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-7) 0; text-align: center; font: var(--ds-text-body); color: var(--ds-text-muted); }
@keyframes ev-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.ev-skel { aspect-ratio: 4 / 5; border-radius: var(--ds-radius-lg); background: linear-gradient(90deg, var(--ds-surface), var(--ds-surface-raised), var(--ds-surface)); background-size: 200% 100%; animation: ev-shimmer calc(var(--ds-slow) * 5) var(--ds-ease) infinite; }
@media (prefers-reduced-motion: reduce) { .ev-skel { animation: none; } }

/* «Расписание»: native dialog, a bottom sheet on phones and a centred dialog on desktop; one link row per showing. */
.schedule { box-sizing: border-box; width: min(100%, 480px); max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; margin: auto; padding: var(--ds-space-4); border: 0; border-radius: var(--ds-radius-lg); background: var(--ds-bg); color: var(--ds-text); box-shadow: var(--ds-shadow); font-family: var(--ds-font-sans); }
html:has(.schedule[open]) { overflow: hidden; } /* the page behind the open sheet does not scroll; the sheet itself does */
.schedule::backdrop { background: color-mix(in srgb, var(--ds-text) 50%, transparent); }
.schedule-grabber { display: none; width: 40px; height: 4px; margin: 0 auto var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-line); }
.schedule-title { margin: 0 0 var(--ds-space-4); font: var(--ds-text-title1); text-align: center; }
.schedule-rows { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.schedule-row { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: var(--ds-space-2) var(--ds-space-3); min-height: var(--ds-tap); padding: var(--ds-space-4); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-text); text-decoration: none; }
.schedule-row:hover { background: var(--ds-surface-raised); box-shadow: inset 0 0 0 1px var(--ds-blue); }
.schedule-place { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--ds-space-1); overflow-wrap: anywhere; }
/* The city is the first thing the eye lands on: large, link blue, with a pin; the venue is quiet text under it. */
.schedule-city { display: flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-link); font: var(--ds-text-title1); }
.schedule-city svg { flex: none; }
.schedule-venue { color: var(--ds-text-muted); font: var(--ds-text-body); }
.schedule-cell { display: flex; flex-direction: column; gap: var(--ds-space-1); font: var(--ds-text-label); white-space: nowrap; }
.schedule-label { font: var(--ds-text-caption); color: var(--ds-text-muted); }
.schedule-price { justify-self: end; padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-blue); color: var(--ds-on-blue); font: var(--ds-text-label); white-space: nowrap; }
@media (max-width: 900px) {
    .schedule { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; padding-bottom: calc(var(--ds-space-4) + env(safe-area-inset-bottom)); }
    .schedule-grabber { display: block; }
    /* Opens by rising from the bottom edge while the dimming fades in; closing and dragging are driven by the page script. */
    .schedule[open] { animation: schedule-rise var(--ds-slow) var(--ds-ease); }
    .schedule[open]::backdrop { animation: schedule-dim var(--ds-slow) var(--ds-ease); }
}
@keyframes schedule-rise { from { transform: translateY(100%); } }
@keyframes schedule-dim { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .schedule[open], .schedule[open]::backdrop { animation: none; } }

/* Hall slot transition: only the slot moves, on the compositor. The default root cross-fade re-blends the whole
   page and the default group morph animates width/height on the main thread; both made the zoom stutter above 60 Hz. */
::view-transition-group(root), ::view-transition-group(hall-slot) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(hall-slot), ::view-transition-new(hall-slot) { will-change: transform, opacity; }

/* Экраны страницы бронирования: показан один (атрибут hidden должен перебить display колонок). */
.booking-layout-v3 > [hidden] { display: none; }