/* =========================================================================
   TicketBooth storefront – mobile-first, Bootstrap 5.3 companion styles.
   Colour tokens derive from the logo (navy / purple / cyan).
   ========================================================================= */
:root {
    --tb-ink: #07173d;
    --tb-muted: #5b6784;
    --tb-line: #e1e4ea;
    --tb-soft: #f4f7ff;
    --tb-cyan: #10d7d5;
    --tb-cyan-dark: #00a9b5;
    --tb-purple: #8300d7;
    --tb-purple-2: #a900e4;
    --tb-grad: linear-gradient(100deg, #a900e4, #7300ce);
    /* Wash inside the active tab and its panel: brand cyan thinned into white. */
    --tb-tab-tint: color-mix(in srgb, var(--tb-cyan) 16%, #fff);
    --tb-tab-frame: 2px;
    --tb-radius: 12px;
    --tb-radius-sm: 8px;
    --tb-shadow: 0 8px 24px rgba(13, 29, 78, .10);
    --tb-shadow-sm: 0 3px 10px rgba(23, 34, 70, .05);
    --tb-header-h: 70px;
    --tb-gutter: 14px;
    --bs-primary: #8300d7;
    --bs-primary-rgb: 131, 0, 215;
    --bs-link-color: #8300d7;
    --bs-link-color-rgb: 131, 0, 215;
    --bs-link-hover-color: #6400a6;
    --bs-body-color: #07173d;
    --bs-body-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 0.9375rem;
}

body { font-family: var(--bs-body-font-family); color: var(--tb-ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; }
.text-muted { color: var(--tb-muted) !important; }
.fw-800 { font-weight: 700; }
.min-w-0 { min-width: 0; }
.letter-tight { letter-spacing: -.03em; }
/* Inputs ≥16px on mobile prevents iOS auto-zoom. */
.form-control, .form-select { font-size: 1rem; border-color: #d6dcea; border-radius: var(--tb-radius-sm); }
.form-control:focus, .form-select:focus { border-color: var(--tb-purple); box-shadow: 0 0 0 .2rem rgba(131, 0, 215, .15); }

/* ---- Buttons ---- */
.btn { border-radius: 999px; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { min-height: 36px; }
.btn-primary, .btn-tb { background: var(--tb-grad); border: 0; color: #fff; box-shadow: 0 6px 14px rgba(115, 0, 206, .22); }
.btn-primary:hover, .btn-tb:hover, .btn-primary:focus { background: linear-gradient(100deg, #9600cc, #6200b3); color: #fff; }
.btn-outline-primary { color: var(--tb-purple); border-color: var(--tb-purple); }
.btn-outline-primary:hover { background: var(--tb-purple); border-color: var(--tb-purple); }
.btn-ghost { background: #fff; border: 1px solid #a9b1c1; color: var(--tb-ink); }
.btn-ghost:hover { border-color: var(--tb-ink); color: var(--tb-ink); }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }

/* ---- Section/Block titles: closer to their own content than to what's above ---- */
.block-title { margin: 32px 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.block-title h2, .block-title h1 { font-size: clamp(1.25rem, 1rem + 1vw, 1.25rem); font-weight: 700; letter-spacing: -.04em; margin: 0; }
.block-title .see-all { color: var(--tb-purple); font-weight: 700; font-size: .84rem; white-space: nowrap; }

/* ---- Page wrapper (reference ".wrap"): 1450px max, gutter grows with the viewport ---- */
.tb-wrap { max-width: 1450px; margin-inline: auto; padding-inline: var(--tb-gutter); }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 1030; background: #fff; box-shadow: 0 1px 0 var(--tb-line); padding-top: env(safe-area-inset-top); }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--tb-header-h); }
.site-header .brand { flex-shrink: 0; }
.site-header .brand img { display: block; width: clamp(150px, 42vw, 275px); height: 80px; object-fit: contain; object-position: left center; }
/* Logo in the mobile off-canvas menu; uploaded logos may have any aspect ratio. */
.menu-logo { width: auto; height: auto; max-width: 160px; max-height: 43px; object-fit: contain; }
.main-nav { align-items: center; gap: 18px; font-size: .92rem; font-weight: 600;    display: none !important; }
.main-nav > a, .main-nav .dropdown-toggle { color: var(--tb-ink); padding: 10px 0; }
.main-nav > a:hover, .main-nav > a.active, .main-nav .dropdown-toggle:hover, .main-nav .show > .dropdown-toggle { color: var(--tb-purple); }
.main-nav .dropdown-menu { border: 1px solid var(--tb-line); border-radius: var(--tb-radius); padding: 6px; font-size: .9rem; }
.main-nav .dropdown-item { border-radius: var(--tb-radius-sm); padding: 8px 12px; }
.main-nav .dropdown-item:active { background: var(--tb-purple); }
/* Header filter dropdowns (ticketing types + locations) */
.header-filters { align-items: center; gap: 10px; margin-left: 8px; }
.filter-dropdown-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1.5px solid #d6dcea; border-radius: 999px; background: #fff; color: var(--tb-ink); font-weight: 700; font-size: .88rem; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.filter-dropdown-btn:hover { border-color: var(--tb-purple); box-shadow: var(--tb-shadow-sm); }
.filter-dropdown-btn > i:first-child { font-size: 1.1rem; color: var(--tb-purple); }
.filter-dropdown-btn.is-active { border-color: var(--tb-purple); background: var(--tb-soft); color: var(--tb-purple); }
.filter-dropdown-btn .filter-caret { font-size: .75rem; color: var(--tb-muted); transition: transform .18s ease; }
.filter-dropdown-btn[aria-expanded="true"] .filter-caret { transform: rotate(180deg); }
.filter-dropdown-menu { border: 1px solid var(--tb-line); border-radius: var(--tb-radius); padding: 6px; font-size: .9rem; min-width: 220px; }
.filter-dropdown-menu .dropdown-item { border-radius: var(--tb-radius-sm); padding: 9px 12px; font-weight: 600; display: flex; align-items: center; }
.filter-dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 10px; }
.filter-dropdown-menu .dropdown-item i { color: var(--tb-muted); font-size: 1.05rem; flex-shrink: 0; }
.filter-dropdown-menu .dropdown-item:hover { background: var(--tb-soft); color: var(--tb-purple); }
.filter-dropdown-menu .dropdown-item:hover i { color: var(--tb-purple); }
.filter-dropdown-menu .dropdown-item.active { background: var(--tb-soft); color: var(--tb-purple); font-weight: 700; }
.filter-dropdown-menu .dropdown-item.active i { color: var(--tb-purple); }
.account { display: flex; align-items: center; gap: 4px; }
.search-icon, .menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--tb-ink); font-size: 1.35rem; border-radius: 50%; }
.menu-toggle { font-size: 1.75rem; }
.search-icon:hover, .menu-toggle:hover { color: var(--tb-purple); background: var(--tb-soft); }
.pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 999px; padding: 0 14px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.pill-login { background: #fff; border: 1px solid #a9b1c1; color: var(--tb-ink); }
.pill-login:hover { border-color: var(--tb-ink); color: var(--tb-ink); }
.pill-signup { background: linear-gradient(105deg, #9c00df, #7200d1); color: #fff; box-shadow: 0 7px 15px rgba(132, 0, 210, .16); }
.pill-signup:hover { color: #fff; background: linear-gradient(105deg, #8a00c6, #6200b3); }
.offcanvas .nav-link { padding: .8rem 0; font-size: 1rem; color: var(--tb-ink); border-bottom: 1px solid var(--tb-line); }

/* ---- Hero (reference: cinema photo, left-to-right navy overlay) ---- */
.hero { position: relative; height: 418px; color: #fff; background: #041036 url('../images/hero-1024.webp') center 52% / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1, 9, 35, .80), rgba(1, 9, 35, .27) 53%, rgba(18, 0, 31, .13)); }
.hero-inner { position: relative; z-index: 2; height: 100%; padding-top: 48px; }
.hero h1 { font-size: clamp(2.6rem, 1.9rem + 2.4vw, 2.25rem); line-height: 1.02;  font-weight: 600; margin: 0 0 10px; max-width: 340px; }
.hero h1 span { color: var(--tb-cyan); }
.hero p { font-size: .96rem; line-height: 1.4; margin: 0; max-width: 300px; }

/* ---- Homepage slideshow: a ticketing type's hero rotates through its own slides ----
   The carousel is a layer of the hero — absolutely positioned to the hero's own edges, so it is
   exactly as wide and as tall as the hero with no viewport-width arithmetic to go wrong with a
   scrollbar — and .hero-inner (z-index 2) keeps the finder on top of it, exactly as it sits behind
   the plain headline. Slides cross-fade with a slow drift on the picture, and the controls only
   appear once the script has taken over: without JavaScript the first slide is shown on its own and
   the hero is complete.

   Every piece of slide copy is capped to the same 1450px measure as .tb-wrap and padded by the page
   gutter, so a full-bleed headline still lines up with the finder and the rest of the page. */
.hero-slides { position: absolute; inset: 0; z-index: 1; background: #041036; }
/* No headline above the finder on a slideshow hero, so the wrapper does not pad itself down. */
.hero--slides .hero-inner { padding-top: 0; }
.hero-slide-track { position: relative; display: grid; height: 100%; }
.hero-slide { grid-area: 1 / 1; position: relative; display: flex; align-items: flex-end; height: 100%; min-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }
/* A slide with no picture is painted with its type's overlay colour rather than left as a gap. */
.hero-slide-media { position: absolute; inset: 0; background: var(--slide-backdrop, linear-gradient(120deg, #3a2a6d, #04102e 78%)); }
.hero-slide-media img { width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; transform: scale(1.08) translate3d(0, 0, 0); transition: transform 9s linear; }
/* A slow drift across a fixed 8% oversample rather than a zoom in. Zooming further softens the
   picture a little more on every cycle; panning a constant oversample adds the same movement and
   never renders the image larger than the box it is already filling. */
.hero-slide.is-active .hero-slide-media img { transform: scale(1.08) translate3d(-1.6%, -1%, 0); }
/* A scrim across the whole slide, not just behind the copy, so the headline stays legible over any
   photograph and the finder keeps a dark band to sit against. */
.hero-slide-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(72deg, rgba(3, 8, 26, .88), rgba(3, 8, 26, .60) 40%, rgba(3, 8, 26, .10) 74%), linear-gradient(180deg, rgba(3, 8, 26, .34), transparent 34%, rgba(3, 8, 26, .62)); }
.hero-slide-body { position: relative; z-index: 2; width: 100%; max-width: 1450px; margin-inline: auto; padding: 20px var(--tb-gutter) 178px; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .55); }
.hero-slide-title { max-width: 15ch; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.06; letter-spacing: -.025em; font-weight: 700; margin: 0; }
.hero-slide-subtitle { max-width: 46ch; margin: 8px 0 0; font-size: .96rem; line-height: 1.4; opacity: .92; }
.hero-slide-cta { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; margin-top: 16px; padding: 0 20px; border-radius: 999px; background: var(--tb-grad); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: 0 8px 20px rgba(115, 0, 206, .38); }
.hero-slide-cta:hover, .hero-slide-cta:focus-visible { color: #fff; background: linear-gradient(100deg, #9600cc, #6200b3); transform: translateY(-2px); }
/* Progress hairline: the dwell on the current slide, so a viewer can see it is not stuck. It runs
   along the top edge because the finder owns the bottom of the hero. The bar is a CSS animation the
   script restarts on each change, so pausing it is one class. */
.hero-slides::before { content: ""; position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 3px; background: rgba(255, 255, 255, .20); opacity: 0; transition: opacity .3s; }
.hero-slides.is-live::before { opacity: 1; }
.hero-slide-progress { position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 3px; background: var(--tb-cyan); transform: scaleX(0); transform-origin: left center; opacity: 0; }
.hero-slides.is-live .hero-slide-progress { opacity: 1; animation: hero-slide-progress var(--hero-interval, 6500ms) linear forwards; }
.hero-slides.is-paused .hero-slide-progress { animation-play-state: paused; }
@keyframes hero-slide-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Controls line up with the copy: a full-width bar, padded to the container measure, is how the dots
   reach the right edge without any viewport maths. The arrows only appear from 992px, where there is
   room for them beside the copy. */
.hero-slide-dots { position: absolute; left: 0; right: 0; top: 16px; z-index: 6; display: none; align-items: center; justify-content: flex-end; gap: 7px; padding-inline: max(var(--tb-gutter), calc((100% - 1450px) / 2 + var(--tb-gutter))); }
.hero-slides.is-live .hero-slide-dots { display: flex; }
.hero-slide-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transition: width .25s ease, background .25s ease; }
.hero-slide-dot:hover { background: #fff; }
.hero-slide-dot.is-active { width: 24px; background: #fff; }
.hero-slide-arrow { position: absolute; top: 50%; z-index: 6; display: none; align-items: center; justify-content: center; width: 42px; height: 42px; margin-top: -21px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 50%; background: rgba(4, 16, 54, .40); color: #fff; font-size: 1.05rem; opacity: 0; transition: opacity .2s, background .2s, transform .2s; }
.hero-slides.is-live .hero-slide-arrow { display: flex; }
.hero-slides:hover .hero-slide-arrow, .hero-slides:focus-within .hero-slide-arrow { opacity: 1; }
.hero-slide-arrow:hover { background: rgba(4, 16, 54, .70); transform: scale(1.08); }
.hero-slide-prev { left: max(16px, calc((100% - 1450px) / 2 - 58px)); }
.hero-slide-next { right: max(16px, calc((100% - 1450px) / 2 - 58px)); }
/* The extra bottom padding on the copy clears the finder, which is 64px tall and sits 25px up from
   the hero's bottom edge from the 768px breakpoint, and is a tall stacked card below it. From that
   breakpoint the dots move down to sit just above the pill, where they read as part of the slide. */
@media (min-width: 768px) {
    .hero-slide-body { padding-top: 30px; padding-bottom: 118px; }
    .hero-slide-dots { top: auto; bottom: 106px; }
}
/* Below 992px the arrows would sit on the copy, so the dots carry the control and stay in the top
   corner, where the tall stacked finder cannot reach. */
@media (max-width: 991.98px) {
    .hero-slide-arrow { display: none !important; }
}
/* A visitor who asked for calm gets a slideshow that holds still: the rotation is the script's to
   decide, but the drift and the transitions are decoration and are dropped here. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-slide.is-active, .hero-slide-media img, .hero-slide.is-active .hero-slide-media img { transition: none; transform: none; }
    .hero-slide-dot { transition: none; }
}
/* Finder: Where → What → When. Mobile: stacked card hanging below the hero. */
.finder { position: absolute; z-index: 3; left: var(--tb-gutter); right: var(--tb-gutter); bottom: -44px; background: #fff; border-radius: 17px; padding: 7px; box-shadow: 0 13px 24px rgba(2, 7, 29, .22); color: var(--tb-ink); }
.finder .field { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; margin: 0; border-bottom: 1px solid var(--tb-line); }
.finder .field:last-of-type { border-bottom: 0; }
.finder .field i { font-size: 1.2rem; color: var(--tb-ink); }
.finder .form-control, .finder .form-select { border: 0; box-shadow: none; padding-left: 0; background-color: transparent; color: #697287; min-height: 0; }
.finder .btn { width: 100%; height: 44px; margin-top: 5px; font-weight: 700; font-size: 1rem; box-shadow: 0 4px 9px rgba(115, 0, 206, .3); }

/* ---- Category rail (reference: 10 two-line items; horizontal scroll on small screens) ---- */
.home-categories { position: relative; z-index: 2; max-width: 1370px; margin: 56px auto 0; padding-inline: var(--tb-gutter); }
.category-rail { display: flex; overflow-x: auto; scroll-snap-type: x proximity; min-height: 113px; padding: 13px 7px; margin-top: 12px; background: #fff; border: 1px solid var(--tb-line); border-radius: 13px; box-shadow: var(--tb-shadow); scrollbar-width: none; }
.home-categories .category-rail { margin-top: 0; }
.category-rail::-webkit-scrollbar { display: none; }
.category-rail a { flex: 0 0 94px; display: flex; flex-direction: column; align-items: center; justify-content: center; scroll-snap-align: start; padding: 0 6px; border-right: 1px solid var(--tb-line); color: var(--tb-ink); font-size: .77rem; line-height: 1.2; text-align: center; transition: color .15s; }
.category-rail a:last-child { border-right: 0; }
/* Two lines, then an ellipsis: one long category name must not make its tile taller than the
   rest of the rail. overflow-wrap keeps a single unbroken word from spilling out sideways. */
.category-rail .cat-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; max-width: 100%; }
.category-rail a:hover, .category-rail a.active { color: var(--tb-purple); }
.category-rail a.active { font-weight: 700; }
.category-rail a:hover .cat-icon { transform: translateY(-2px); }
.cat-icon {  border-radius: 50%; display: grid; place-items: center; margin: 0 auto 7px; font-size: 1.35rem; flex-shrink: 0; transition: transform .15s; background: transparent; }
.tone-purple { color: var(--tb-purple); background: linear-gradient(145deg, #eef1ff, #efe5ff); }
.tone-cyan { color: #178ee6; background: #e6f5ff; }
.tone-teal { color: #00ab9d; background: #e4fbf5; }
.tone-pink { color: #f50088; background: #fff0f7; }
.tone-blue { color: #2c5bd8; background: #e8eeff; }

/* ---- Category rail: individual coloured boxes on a transparent block ----
   Shared by the type homepage and the listing. No band background: each category is its
   own box filled with a light gradient from the logo palette, with a white icon and a
   white title. Hover lifts and deepens the box; the active one gets a white ring. */
.category-rail-band { padding-inline: 0; }
.category-rail-band .category-rail { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 28px; min-height: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; scrollbar-width: none; }
.category-rail-band .category-rail a {     flex: 0 0 112px;
    /* The band tiles are one dark-to-purple gradient; the cat-tone-* rules below are what tinted
       them individually. See also the .active override further down. */
    background: linear-gradient(135deg, #000746, #8c00a3)!important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 12px;
    color: var(--tb-ink);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    scroll-snap-align: start;}
.category-rail-band .category-rail a.cat-tone-purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); border-color: transparent; color: #fff; }
.category-rail-band .category-rail a.cat-tone-cyan { background: linear-gradient(135deg, #22d3ee, #0891b2); border-color: transparent; color: #fff; }
.category-rail-band .category-rail a.cat-tone-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); border-color: transparent; color: #fff; }
.category-rail-band .category-rail a.cat-tone-pink { background: linear-gradient(135deg, #f472b6, #db2777); border-color: transparent; color: #fff; }
.category-rail-band .category-rail a.cat-tone-blue { background: linear-gradient(135deg, #60a5fa, #2563eb); border-color: transparent; color: #fff; }
/* The icon chip drops its tint: a white icon on a subtle lighter backdrop. */
.category-rail-band .category-rail a[class*="cat-tone-"] .cat-icon { background: transparent; color: #fff; }
.category-rail-band .category-rail a:hover .cat-icon { transform: scale(1.08); }
.category-rail-band .category-rail a:hover, .category-rail-band .category-rail a.active { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(8, 22, 61, .20); filter: brightness(.93);background: linear-gradient(135deg, #000040, #01c3bf) !important;border:transparent;
    }
/* The chosen category is blue, whatever tone its tile normally carries: on the listing page this
   is the one tile that is filtered by, so it has to read as selected at a glance rather than
   blending into the row of coloured tiles. A blue halo replaces the old white outline, which was
   invisible against the page. The homepage never marks a tile active, so this only lands here. */
.category-rail-band .category-rail a.active,
.category-rail-band .category-rail a.cat-tone-purple.active,
.category-rail-band .category-rail a.cat-tone-cyan.active,
.category-rail-band .category-rail a.cat-tone-teal.active,
.category-rail-band .category-rail a.cat-tone-pink.active,
.category-rail-band .category-rail a.cat-tone-blue.active {  border-color: transparent; color: #fff; box-shadow: 0 12px 24px rgba(8, 22, 61, .20), 0 0 0 3px rgba(37, 99, 235, .35); }
.category-rail-band .category-rail .cat-icon { border-radius: 11px; display: grid; place-items: center; margin: 0; font-size: 1.75rem; flex-shrink: 0; transition: transform .15s ease; }
.category-rail-band .category-rail a.more { border-style: dashed; }
@media (min-width: 992px) {
    /* Every category fits in one row: equal columns filling the rail, no scrolling. */
    .category-rail-band .category-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
    .category-rail-band .category-rail a { flex: none; }
}

/* ---- Product cards ---- */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.tb-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--tb-line); border-radius: 9px; overflow: hidden; box-shadow: 0 3px 10px rgba(23, 34, 70, .04); color: var(--tb-ink); transition: transform .18s, box-shadow .18s; }
.tb-card:hover { transform: translateY(-4px); box-shadow: var(--tb-shadow); color: var(--tb-ink); }
.tb-card .visual { position: relative; aspect-ratio: 16 / 9; background: var(--tb-soft); overflow: hidden; }
.tb-card .visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .12), transparent 55%); pointer-events: none; }
.tb-card .visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.tb-card:hover .visual img { transform: scale(1.04); }
.tb-card .body { padding: 9px 10px 10px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tb-card h3 { font-size: .88rem; line-height: 1.16; font-weight: 700; margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-card .sub, .tb-card .loc, .tb-card .when { font-size: .8rem; color: #394253; margin: 0 0 5px; }
.tb-card .loc, .tb-card .when { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tb-card .loc i, .tb-card .when i { flex-shrink: 0; }
.tb-card .loc span, .tb-card .when span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tb-card .sub { display:none; }
.tb-card .foot { margin-top: auto; border-top: 1px solid #f1f3f8; padding-top: 7px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px;flex-direction: column; }
.tb-card .foot .pill { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tb-card .price { font-size: .76rem; font-weight: 900; white-space: nowrap;  }
.pill { display: inline-block; padding: 4px 7px; border-radius: 4px; font-size: .66rem; font-weight: 700; white-space: nowrap; background: #f1dcff; color: #7800bf; }
.pill.tone-cyan { background: #dff1ff; color: #0075ca; }
.pill.tone-teal { background: #dffaf3; color: #008f85; }
.pill.tone-pink { background: #ffdced; color: #e0007a; }
.pill.tone-blue { background: #e3e9ff; color: #2c4fc2; }

/* Image placeholder (no image available). */
.img-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--tb-cyan) 0%, #3b5bf0 50%, var(--tb-purple) 100%); }
.img-placeholder i { font-size: 2rem; opacity: .9; }

/* ---- Homepage: featured section ---- */
.home-content { max-width: 1370px; margin: 0 auto;  }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.section-head h2 { font-size: 1.4rem; font-weight: 700;  margin: 0; }
.see-all { color: var(--tb-purple); font-weight: 700; font-size: .84rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }

/* ---- Partner storefront (/p/{slug}): banner, intro panel, product grid ---- */
.partner-page { padding-bottom: 48px; }
.partner-masthead { position: relative; overflow: hidden;  min-height: 132px; }
.partner-masthead-photo { min-height: 150px; height: clamp(150px, 38vw, 220px); }
.partner-masthead-img { position: absolute; inset: 0; width: 100%; /*height: 100%; object-fit: cover;*/ }
.partner-masthead-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 16, 54, .12) 0%, rgba(4, 16, 54, .58) 100%); pointer-events: none; }
.partner-masthead-plain .partner-masthead-wash { background: radial-gradient(120% 80% at 80% 0%, rgba(16, 215, 213, .35), transparent 55%), linear-gradient(180deg, transparent, rgba(4, 16, 54, .35)); }
.partner-page-inner { position: relative; z-index: 1; }
.partner-intro { display: grid; gap: 18px; margin-top: 18px; padding: 18px; background: #fff; border: 1px solid var(--tb-line); border-radius: 18px; box-shadow: var(--tb-shadow); }
.partner-intro-overlap { margin-top: -72px; }
.partner-logo-wrap { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.partner-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; border: 3px solid #fff; box-shadow: 0 10px 24px rgba(8, 22, 61, .18); background: var(--tb-soft); }
.partner-logo-fallback { display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; letter-spacing: -.04em; color: #fff; background: var(--tb-grad); }
.partner-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--tb-muted); font-size: .82rem; font-weight: 700; }
.partner-kicker > i { color: var(--tb-purple); }
.partner-premium-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(100deg, #f6c343, #e09a12); color: #3a2a00; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.partner-intro h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; margin: 0 0 10px; }
.partner-intro-text { margin: 0; color: #3a4461; line-height: 1.55; max-width: 46rem; white-space: pre-line; }
.partner-cats { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; }
.partner-intro-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.partner-catalog { margin-top: 28px; }
.partner-catalog .section-head { margin-bottom: 16px;display: none; }
@media (min-width: 768px) {
    .partner-masthead-plain { min-height: 168px; }
    .partner-intro {         grid-template-columns: auto 1fr;
      align-items: start;
      gap: 24px;
      padding: 15px 15px;
      background: #fff;
      border: 1px solid #dbdbdb; }
    .partner-intro-overlap { margin-top: -40px; }
    .partner-logo-wrap, .partner-logo { width: 112px; height: 112px; border-radius: 26px; }
    .partner-catalog { margin-top: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .partner-intro-overlap { margin-top: 18px; }
}

/* ---- Partner CTA (mobile: text spans two feature columns) ---- */
.home-partner { margin-top: 22px; }
.partner-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 20px; padding: 24px; border: 1px solid #dce7f8; border-radius: var(--tb-radius); background: linear-gradient(110deg, #f4f9ff, #edf5ff); }
.partner-text { grid-column: 1 / -1; }
.partner-box small { font-weight: 700; letter-spacing: .12em; font-size: .68rem; }
.partner-box h2 { margin: 2px 0 4px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.055em; }
.partner-box h2 span { color: var(--tb-purple); }
.partner-box p { margin: 0; max-width: 510px; line-height: 1.32; color: #25385e; }
.partner-box .cta { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 11px; padding: 0 18px; border-radius: 999px; background: var(--tb-grad); color: #fff; font-weight: 700; }
.partner-box .cta:hover { color: #fff; background: linear-gradient(100deg, #9600cc, #6200b3); }
.feature { text-align: center; border-left: 1px solid #cfdceb; padding-left: 9px; }
.feature i { display: block; font-size: 1.35rem; color: #00bed9; margin-bottom: 4px; }
.feature b { font-size: .82rem; line-height: 1.2; display: block; }

/* ---- Product page ---- */
.product-hero { position: relative; border-radius: var(--tb-radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--tb-soft); }
.product-hero img { width: 100%; height: 100%; object-fit: cover; }
/* Title / subtitle / pills sit on the picture, over a scrim that keeps them readable on any photo. */
.hero-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 46px 16px 14px; color: #fff; background: linear-gradient(180deg, transparent, rgba(4, 10, 30, .82)); }
.hero-caption h1, .hero-caption p { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }

/* Corner group on the product picture: the category / location pills stacked above the
   Save and Share buttons. Above the caption's z-index so it never gets scrimmed over. */
.product-hero-actions { position: absolute; top: 0; inset-inline-end: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 72%; padding: 8px; }
.product-hero-actions .pill { box-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.meta-list { list-style: none; padding: 0; margin: 0; }
.meta-list li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.meta-list i { font-size: 1.15rem; color: var(--tb-ink); margin-top: 1px; }
/* Product page: Organizer / Venue / Category-Location as three columns. */
.meta-list-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; }
.meta-list-cols li { padding: 2px 0; }
@media (max-width: 575.98px) {
    .meta-list-cols { grid-template-columns: 1fr; }
}
.meta-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tb-muted); }
/* Dated products with no sessions: the event window sits under Organizer / Venue. */
.product-date-range { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); background: #fff; }
.product-date-range i { font-size: 1.15rem; color: var(--tb-ink); margin-top: 1px; }
.product-date-range strong { font-weight: 700; }
.cast-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tb-soft); color: var(--tb-purple); font-size: 1.2rem; flex: 0 0 auto; }
.ticket-box { background: var(--tb-soft); border: 1px solid var(--tb-line); border-radius: var(--tb-radius); padding: 14px; }
/* Session picker sits above the booking card. The prompt is the default until a date is chosen. */
.session-picker { background: #fff; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); box-shadow: var(--tb-shadow-sm); }
.session-picker-field { position: relative; }
.session-picker-field .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tb-purple); font-size: 1.05rem; pointer-events: none; z-index: 1; }
.session-picker-field .form-select { min-height: 48px; padding-left: 42px; font-weight: 700; background-color: #fff; }
.ticket-box.is-session-locked { position: relative; }
.ticket-box.is-session-locked .session-lock-body {  pointer-events: none; user-select: none; }
.session-lock { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; background: color-mix(in srgb, #000 65%, transparent); border-radius: inherit; }
.session-lock p { margin: 0; max-width: 16rem; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: #fff;  }
.ticket-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--tb-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.ticket-row .name { flex: 1; min-width: 0; }
.ticket-row .name small { display: block; color: var(--tb-muted); font-size: .75rem; }
.ticket-row .amount { font-weight: 700; white-space: nowrap; }
.stepper { display: inline-flex; align-items: center; border: 1px solid #d6dcea; border-radius: 10px; overflow: hidden; }
.stepper button { width: 40px; height: 40px; border: 0; background: #fff; color: var(--tb-purple); font-size: 1.1rem; }
.stepper button:disabled { color: #b9c0d0; }
.stepper input { width: 40px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: .75rem; }
.trust i { font-size: 1.2rem; }

/* Seat map */
.seat-map { overflow-x: auto; padding: 8px 0; }
.seat-map .stage { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .2em; color: var(--tb-muted); background: #e9edf7; border-radius: 6px; padding: 4px; margin-bottom: 10px; }
.seat-row { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
.seat-row .row-label { width: 20px; font-size: .72rem; font-weight: 700; color: var(--tb-muted); }
.seat { position: relative; }
.seat input { position: absolute; opacity: 0; inset: 0; }
.seat span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px 6px 3px 3px; border: 1px solid #c8d0e3; background: #fff; font-size: .62rem; font-weight: 700; cursor: pointer; }
.seat input:checked + span { background: var(--tb-purple); border-color: var(--tb-purple); color: #fff; }
.seat input:focus-visible + span { outline: 2px solid var(--tb-cyan); }
.seat input:disabled + span { background: #e3e7f0; color: #a5adbf; cursor: not-allowed; text-decoration: line-through; }

/* --- Venue seating map (reserved seating) ---------------------------------------------
   Prefer the assigned venue's labelled SVG when present; otherwise draw a grid from Seat rows.
   Interactive seats are <g class="vm-seat"> wrapping a shape (rect/circle/path/…). */
.venue-map { display: block; width: 100%; height: auto; max-width: 720px; margin-inline: auto; }
.venue-map--assigned { max-width: 100%; }
.venue-map .vm-stage-label { font-size: 11px; font-weight: 800; letter-spacing: .22em; fill: #33406b; }
.venue-map .vm-row-label { font-size: 11px; font-weight: 800; fill: #5b6784; }
.venue-map .vm-seat-number { font-size: 10px; font-weight: 700; }
.venue-map--static .vm-seat { pointer-events: none; }
.venue-map--interactive .vm-seat { cursor: pointer; }
.venue-map--interactive .vm-seat:hover rect,
.venue-map--interactive .vm-seat:hover circle,
.venue-map--interactive .vm-seat:hover path,
.venue-map--interactive .vm-seat:hover polygon,
.venue-map--interactive .vm-seat:hover polyline { filter: brightness(.96); }
.venue-map--interactive .vm-seat:focus { outline: none; }
.venue-map--interactive .vm-seat:focus-visible rect,
.venue-map--interactive .vm-seat:focus-visible circle,
.venue-map--interactive .vm-seat:focus-visible path,
.venue-map--interactive .vm-seat:focus-visible polygon,
.venue-map--interactive .vm-seat:focus-visible polyline { outline: 2px solid var(--tb-cyan); outline-offset: 2px; }
.venue-map .vm-seat.is-selected rect,
.venue-map .vm-seat.is-selected circle,
.venue-map .vm-seat.is-selected path,
.venue-map .vm-seat.is-selected polygon,
.venue-map .vm-seat.is-selected polyline { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.venue-map .vm-seat.is-taken,
.venue-map .vm-seat.is-unavailable { cursor: not-allowed; }
.venue-map .vm-seat.is-unavailable { opacity: .45; }
.venue-map .vm-seat.is-locked { opacity: .55; cursor: not-allowed; }
.venue-map .vm-seat.is-zone-hidden { visibility: hidden; pointer-events: none; }

.venue-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 0; justify-content: center; font-size: .75rem; color: var(--tb-muted); }
.venue-legend li { display: inline-flex; align-items: center; gap: 6px; }
.venue-legend-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--swatch); }

/* The aside's entry point to the picker: the same map, clickable. */
.venue-preview { position: relative; display: block; width: 100%; padding: 8px; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); background: #fff; }
.venue-preview:hover { border-color: var(--tb-purple); }
.venue-preview-hint { position: absolute; inset-inline: 0; bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--tb-purple); background: rgba(255, 255, 255, .94); border-radius: 8px; padding: 4px; }

/* Full-screen picker: map on the left at 80%, the whole booking on the right at 20%. */
.seat-modal .modal-content { border: 0; border-radius: 0; }
.seat-modal-body { display: flex; gap: 0; padding: 0; min-height: 100vh; }
.seat-map-pane { flex: 0 0 80%; width: 80%; display: flex; flex-direction: column; min-width: 0; background: var(--tb-soft); }
.seat-actions-pane { flex: 0 0 20%; width: 20%; display: flex; flex-direction: column; min-width: 260px; border-inline-start: 1px solid var(--tb-line); background: #fff; }
.seat-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--tb-line); background: #fff; }
.seat-pane-head-main { display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.seat-pane-head-session { margin-left: auto; flex-shrink: 0; font-weight: 800;  white-space: nowrap; }
.seat-pane-body { flex: 1; overflow: auto; padding: 20px 18px; position: relative; }

/* Seat booking countdown: high-contrast banner on the ticket-box and across the map modal. */
.booking-timer {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; border: 2px solid #07173d; border-radius: 14px;
  background: linear-gradient(135deg, #07173d 0%, #1a0a4a 55%, #8300d7 100%);
  color: #fff; font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 28px rgba(7, 23, 61, .28);
}
.booking-timer[hidden] { display: none !important; }
.booking-timer-icon {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  font-size: 1.35rem; color: #10d7d5;
}
.booking-timer-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; line-height: 1.15; }
.booking-timer-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #10d7d5; }
.booking-timer-hint { font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking-timer-value {
  flex-shrink: 0; min-width: 4.6ch; text-align: right;
  font-size: clamp(1.65rem, 4.5vw, 2.15rem); font-weight: 800; letter-spacing: .02em;
  line-height: 1; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.booking-timer--compact { margin-bottom: 12px; }
.booking-timer--bar {
  border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
  position: sticky; top: 0; z-index: 5;
}
.booking-timer.is-idle { opacity: .96; }
.booking-timer.is-urgent {
  border-color: #f0a202;
  background: linear-gradient(135deg, #7a2e00 0%, #c2410c 45%, #f0a202 100%);
  animation: booking-timer-pulse 1s ease-in-out infinite;
}
.booking-timer.is-urgent .booking-timer-icon { color: #fff7ed; background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .28); }
.booking-timer.is-urgent .booking-timer-label { color: #ffedd5; }
.booking-timer.is-urgent .booking-timer-value { color: #fff; }
@keyframes booking-timer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 162, 2, .45), 0 10px 28px rgba(194, 65, 12, .35); }
  50% { box-shadow: 0 0 0 8px rgba(240, 162, 2, 0), 0 10px 28px rgba(194, 65, 12, .35); }
}
@media (max-width: 575.98px) {
  .booking-timer { gap: 10px; padding: 10px 12px; }
  .booking-timer-icon { width: 36px; height: 36px; font-size: 1.15rem; border-radius: 10px; }
  .booking-timer-hint { display: none; }
  .booking-timer-value { font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-timer.is-urgent { animation: none; }
}

.seat-zone-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.seat-zone-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--tb-line); border-radius: 10px; background: #fff; color: inherit; text-align: left; }
.seat-zone-chip:hover { border-color: var(--tb-purple); background: var(--tb-soft); }
.seat-zone-chip[aria-pressed="true"] { border-color: var(--tb-purple); background: #f3e8ff; box-shadow: inset 0 0 0 1px var(--tb-purple); }
.seat-zone-chip-copy { display: flex; flex-direction: column; line-height: 1.2; }
.seat-zone-chip-name { font-size: .8rem; font-weight: 700; }
.seat-zone-chip-price { font-size: .72rem; color: var(--tb-muted); font-variant-numeric: tabular-nums; }

.seat-hover-tip { position: fixed; z-index: 2000; padding: 4px 8px; border-radius: 6px; background: #07173d; color: #fff; font-size: .75rem; font-weight: 700; pointer-events: none; box-shadow: 0 4px 12px rgba(7, 23, 61, .25); }
.seat-actions-body { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.seat-chosen { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.seat-chosen-empty { font-size: .8rem; color: var(--tb-muted); }
.seat-chosen li.seat-chosen-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .82rem; padding: 8px 10px; border: 1px solid var(--tb-line); border-radius: 8px; background: var(--tb-soft); }
.seat-chosen .seat-chip { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.seat-chosen button { border: 0; background: none; color: var(--tb-muted); line-height: 1; padding: 2px 4px; }

.seat-cart { border: 1px solid var(--tb-line); border-radius: 10px; padding: 12px; }
.seat-cart-breakdown { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--tb-line); display: flex; flex-direction: column; gap: 4px; }
.seat-cart [data-seat-total-row] { border-top: 1px solid var(--tb-line); padding-top: 8px; margin-top: 8px; }
.seat-cart-breakdown.d-none + [data-seat-total-row] { border-top: 0; padding-top: 0; margin-top: 4px; }
.seat-voucher { margin-top: auto; }

/* Confirm and Cancel sit on one row: confirming is the point, cancelling is the escape. */
.seat-actions-row { display: flex; gap: 8px; align-items: stretch; }
.seat-actions-row .btn { white-space: nowrap; }

/* The voucher is a link into the chooser, not a code field to fill in blind. */
.seat-voucher-link { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 11px; font-size: .82rem; font-weight: 600; color: var(--tb-purple); background: #fff; border: 1px solid var(--tb-line); border-radius: 10px; }
.seat-voucher-link:hover:not(:disabled) { border-color: var(--tb-purple); background: var(--tb-soft); }
.seat-voucher-link:disabled { opacity: .55; }
/* Silent until app.js has something to report: a rejected code, or one that was accepted. */
.seat-voucher-note:empty { display: none; }

.voucher-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 6px; font-size: .82rem; color: inherit; background: #fff; border: 1px solid var(--tb-line); border-radius: 10px; }
.voucher-option:hover { border-color: var(--tb-purple); background: var(--tb-soft); }

/* Below a laptop the 20% column is too narrow to read, so the map goes on top and the actions
   become a bar underneath rather than a sliver. */
@media (max-width: 991.98px) {
  .seat-modal-body { flex-direction: column; }
  .seat-map-pane, .seat-actions-pane { flex: 0 0 auto; width: 100%; }
  .seat-map-pane { min-height: 55vh; }
  .seat-actions-pane { min-width: 0; border-inline-start: 0; border-top: 1px solid var(--tb-line); }
  .seat-actions-body { overflow: visible; }
}

/* ---- Tabs: folder tabs whose active one joins a cyan-framed panel ----
   Inactive tabs sit on the panel's top rule (white, rounded). The active tab is taller, tinted
   the same as the panel, and its cyan sides/top continue the panel frame so they read as one piece. */
.nav-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--tb-ink);
    --bs-nav-tabs-link-active-bg: var(--tb-tab-tint);
    --bs-nav-tabs-link-active-border-color: var(--tb-cyan);
    gap: 6px;
    align-items: flex-end;
    border-bottom: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
    margin-bottom: calc(var(--tb-tab-frame) * -1);
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
    box-sizing: border-box;
    border: var(--tb-tab-frame) solid transparent;
    border-bottom-color: var(--tb-cyan);
    border-radius: 14px 14px 0 0;
    margin-bottom: 0;
    padding: 10px 20px;
    background: #fff;
    color: var(--tb-ink);
    font-weight: 700;
    white-space: nowrap;
    min-height: 44px;
    box-shadow: none;
    /* Colour only: changing border-width or padding here makes hover jump vs the active tab. */
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.nav-tabs .nav-link:hover:not(.active) {
    background: #fff;
    color: var(--tb-ink);
    border-top-color: color-mix(in srgb, var(--tb-cyan) 45%, #fff);
    border-left-color: color-mix(in srgb, var(--tb-cyan) 45%, #fff);
    border-right-color: color-mix(in srgb, var(--tb-cyan) 45%, #fff);
    border-bottom-color: var(--tb-cyan);
    border-bottom-width: var(--tb-tab-frame);
}
.nav-tabs .nav-link:focus-visible {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tb-cyan) 35%, transparent);
}
/* A tab may carry its own colour utility (e.g. a destructive label); do not overrule that. */
.nav-tabs .nav-link:not([class*="text-"]).active {
    background: var(--tb-tab-tint);
    color: var(--tb-ink);
    border-color: var(--tb-cyan);
    border-bottom-color: var(--tb-tab-tint);
    box-shadow: none;
    z-index: 2;
}
.tab-content {
    background: var(--tb-tab-tint);
    border: var(--tb-tab-frame) solid var(--tb-cyan);
    border-radius: 0 0 12px 12px;
    padding: 15px 15px;
    position: relative;
    z-index: 0;
}
/* First tab is the panel's top-left corner; square that off so the cyan frame is one stroke. */
.nav-tabs:has(.nav-item:first-child .nav-link.active) + .tab-content {
    border-top-left-radius: 0;
}

/* Accordions: closed by default; opened header gets an obvious style */
.accordion-button { font-weight: 700; color: var(--tb-ink); }
.accordion-item.is-open .accordion-button, .accordion-button:not(.collapsed) { background: #f3e8ff; color: var(--tb-purple); box-shadow: inset 4px 0 0 var(--tb-purple); }
/* FAQ rows inside a tab panel sit on white cards so they read against the mint wash. */
.tab-content .accordion { --bs-accordion-bg: #fff; --bs-accordion-border-color: transparent; --bs-accordion-inner-border-radius: 12px; --bs-accordion-border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.tab-content .accordion-item { border: 0; border-radius: 12px; overflow: hidden; background: #fff; }
.tab-content .accordion-button { background: #fff; box-shadow: none; }
.tab-content .accordion-button:not(.collapsed) { background: #fff; color: var(--tb-ink); box-shadow: none; }

/* Checkout */
.summary-card { border: 1px solid var(--tb-line); border-radius: var(--tb-radius); padding: 16px; background: #fff; box-shadow: var(--tb-shadow-sm); }
.summary-card dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: .9rem; }
.summary-card dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.summary-card .total { font-size: 1.1rem; font-weight: 700; border-top: 1px solid var(--tb-line); padding-top: 8px; margin-top: 4px; }
/* The discount opener sits between the line items and the Total, spanning both columns. */
.summary-card .summary-discount-link { grid-column: 1 / -1; justify-self: stretch; margin-top: 8px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }

/* Checkout / seat-picker discount modal: type first, then a clearly bounded voucher or ID pane.
   #discount-form wraps header/body/footer, so flex + overflow lives on that inner shell — otherwise
   Bootstrap's modal-dialog-scrollable cannot reach .modal-body and the pane/footer get clipped. */
#discountModal .modal-dialog { --bs-modal-width: min(720px, calc(100vw - 1.5rem)); max-width: var(--bs-modal-width); max-height: calc(100dvh - 1rem); margin-top: .5rem; margin-bottom: .5rem; }
.discount-modal { display: flex; flex-direction: column; max-height: calc(100dvh - 1rem); border: 0; border-radius: var(--tb-radius); overflow: hidden; box-shadow: var(--tb-shadow); }
.discount-modal-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 100%; }
.discount-modal-head { flex: 0 0 auto; align-items: flex-start; background: var(--tb-soft); border-bottom: 1px solid var(--tb-line); padding: 16px; }
.discount-modal-icon { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--tb-grad); color: #fff; font-size: 1.25rem; }
.discount-modal-lead { color: var(--tb-muted); }
.discount-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.discount-type-card { border: 1px solid var(--tb-line); border-radius: var(--tb-radius); background: #fff; padding: 14px; box-shadow: var(--tb-shadow-sm); }
.discount-type-card .form-select-lg { min-height: 36px; font-weight: 700; }
.discount-pane { margin-top: 0px; border: 1px solid var(--tb-line); border-radius: 0; background: var(--tb-soft); padding: 14px; }
.discount-pane-title { font-weight: 800; color: var(--tb-ink); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.discount-modal-foot { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; border-top: 1px solid var(--tb-line); background: #fff; }

@media (max-width: 575.98px) {
    .discount-modal-foot .btn { flex: 1 1 100%; }
}
.panel { border: 1px solid var(--tb-line); border-radius: var(--tb-radius); padding: 16px; background: #fff; }
.panel + .panel { margin-top: 12px; }
.panel-title { font-size: 1rem; font-weight: 700; margin: 0 0 10px; }

/* Tickets / QR */
.qr-ticket { border: 1px solid var(--tb-line); border-radius: var(--tb-radius); overflow: hidden; background: #fff; box-shadow: var(--tb-shadow-sm); }
.qr-ticket .head { background: var(--tb-grad); color: #fff; padding: 12px 16px; }
.qr-ticket .qr { background: #fff; padding: 12px; text-align: center; border-bottom: 2px dashed var(--tb-line); }
.qr-ticket .qr img { width: 100%; max-width: 220px; image-rendering: pixelated; }
.qr-ticket.is-inactive .qr img { opacity: .15; filter: grayscale(1); }

/* Account side menu */
.account-nav .list-group-item { border: 0; border-radius: 10px !important; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 10px; }
.account-nav .list-group-item.active { background: #f3e8ff; color: var(--tb-purple); }

/* Tables (storefront) */
.table-fit { width: 1%; white-space: nowrap; }
.truncate { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Footer & mobile bottom navigation */
.site-footer { border-top: 1px solid var(--tb-line); padding: 15px 0; font-size: .8rem; color: #0a0a0a; margin-top: 0px; }
.footer-bar { display: flex; flex-direction: column; gap: 8px; }
.site-footer small { font-size: .8rem; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; }
.footer-links a { display: inline-flex; align-items: center; color: #000; }
.footer-links a + a::before { content: "·"; margin: 0 8px; color: #868686; }
.site-footer a:hover { color: var(--tb-purple); }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--tb-line); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; font-size: .68rem; color: var(--tb-muted); }
.bottom-nav a i { font-size: 1.2rem; }
.bottom-nav a.active { color: var(--tb-purple); }

.empty-state { text-align: center; padding: 40px 16px; color: var(--tb-muted); border: 1px dashed #ced5e6; border-radius: var(--tb-radius); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: 8px; color: var(--tb-purple); }
.auth-card { max-width: 460px; margin: 32px auto; }

/* ---- Auth (login / register / password): split card, brand panel on top for mobile ---- */
.page-auth main { background: radial-gradient(circle at 12% 0%, #efe4ff 0, transparent 40%), radial-gradient(circle at 100% 100%, #e1fbfa 0, transparent 45%), var(--tb-soft); }
.page-auth .site-footer { margin-top: 0; }
.auth-page { padding: 16px var(--tb-gutter) 32px; display: grid; place-items: center; }
.auth-shell { width: 100%; max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; border: 1px solid var(--tb-line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(7, 23, 61, .12); }
.auth-brand { position: relative; display: flex; align-items: flex-end; padding: 22px 20px; color: #fff; background: linear-gradient(135deg, rgba(1, 9, 35, .9) 10%, rgba(1, 9, 35, .55) 55%, rgba(131, 0, 215, .72)), #041036 url('../images/hero-1024.webp') center 52% / cover no-repeat; }
.auth-brand h2 { font-size: clamp(1.45rem, 1rem + 2vw, 2.5rem); line-height: 1.04; letter-spacing: -.055em; font-weight: 700; margin: 0; }
.auth-brand h2 span { color: var(--tb-cyan); }
.auth-brand p, .auth-perks { display: none; }
.auth-perks { list-style: none; padding: 0; margin: 20px 0 0; }
.auth-perks li { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-weight: 600; font-size: .92rem; }
.auth-perks i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--tb-cyan); font-size: 1rem; flex-shrink: 0; }
.auth-panel { padding: 24px 20px; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 20px; background: #f1f3f9; border-radius: 999px; }
.auth-switch a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; font-weight: 700; color: var(--tb-muted); }
.auth-switch a.active { background: #fff; color: var(--tb-ink); box-shadow: 0 2px 8px rgba(7, 23, 61, .1); }
.auth-title { font-size: 1.55rem; font-weight: 700; letter-spacing: -.05em; margin: 0 0 6px; }
.auth-note { color: var(--tb-muted); font-size: .92rem; line-height: 1.45; margin: 0 0 18px; }
.auth-field { margin-bottom: 12px; }
.auth-field .form-label { font-size: .78rem; font-weight: 700; margin-bottom: 5px; }
.auth-input { position: relative; }
.auth-input > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8a91a1; pointer-events: none; z-index: 1; }
.auth-input .form-control { min-height: 48px; padding-left: 42px; border-color: #d9dfeb; border-radius: 9px; }
.auth-input .form-control.is-invalid { background-image: none; }
.auth-input .toggle-password { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: #8a91a1; border-radius: 50%; }
.auth-input .toggle-password:hover { color: var(--tb-purple); }
.auth-input:has(.toggle-password) .form-control { padding-right: 48px; }
.btn-auth { min-height: 50px; border-radius: 10px; font-size: 1rem; font-weight: 700; }
.auth-legal { font-size: .78rem; color: var(--tb-muted); text-align: center; margin: 10px 0 0; }
.auth-footer { text-align: center; font-size: .88rem; color: var(--tb-muted); margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--tb-line); }
.auth-footer a { font-weight: 700; }
.fade-up { animation: fadeUp .5s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-up, .tb-card, .flexinline a, .flexinline a::before, .flexinline a::after { animation: none; transition: none; } }

/* ================= ≥576px ================= */
@media (min-width: 576px) {
    .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
    .auth-panel { padding: 32px; }
}

/* ================= ≥768px ================= */
@media (min-width: 768px) {
    :root { --tb-header-h: 86px; --tb-gutter: 40px; }
    .account { gap: 12px; }
    .pill-btn { padding: 0 25px; font-size: .92rem; }
    .site-header .brand img { max-width: 250px; max-height: 70px; }
    .hero { height: 340px; }
    .hero-inner { padding-top: 46px; }
    .hero h1 { max-width: 100%; }
    .hero p { font-size: 1.1rem; max-width: 100%; }
    /* Finder becomes the reference pill inside the hero's bottom edge. */
    .finder { bottom: 25px; height: 64px; padding: 0; display: grid; grid-template-columns: 2fr 1.06fr 1fr 158px; align-items: center; border: 7px solid rgba(255, 255, 255, .96); border-radius: 999px; }
    .finder .field { padding: 0 20px; gap: 14px; border-bottom: 0; border-right: 1px solid var(--tb-line); }
    .finder .field:nth-of-type(3) { border-right: 0; }
    .finder .field i { font-size: 1.35rem; }
    .finder .btn { height: 48px; margin: 0 2px; width: auto; }
    .home-categories { margin-top: 15px; }
    .category-rail { border-radius: 17px; }
    .home-content { padding-top: 26px; }
    .section-head h2 { font-size: 1.7rem; }
    .partner-box h2 { font-size: 1.75rem; }
    .feature { padding-left: 10px; }
    .site-footer { padding-bottom: 15px; font-size: .8rem; }
    .footer-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}

/* iPad / tablet: keep page content off the screen edges (portrait 768, landscape ~1024). */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .container {
        --bs-gutter-x: 80px;
    }
}

/* Homepage category band: left/right gutter on tablet only (768–1200). */
@media (min-width: 768px) and (max-width: 1200px) {
    .home-categories.category-rail-band { padding-inline: var(--tb-gutter); }
    .home-content { padding: 25px var(--tb-gutter) 0; }
}

/* ================= ≥992px ================= */
@media (min-width: 992px) {
    .card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .product-aside { position: sticky; top: calc(var(--tb-header-h) + 16px); }
    .hero, .auth-brand { background-image: url('../images/hero-1920.webp'); }
    /* All rail items fit in one row: equal columns, no scrolling. */
    .category-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; min-height: 128px; }
    .partner-box { grid-template-columns: 1.55fr repeat(4, minmax(0, 1fr)); gap: 10px; padding: 20px 26px; }
    .partner-text { grid-column: auto; }
    .auth-page { padding: 40px var(--tb-gutter) 56px; min-height: calc(100vh - var(--tb-header-h) - 80px); }
    .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .auth-brand { padding: 40px; }
    .auth-brand p { display: block; margin: 12px 0 0; max-width: 340px; opacity: .92; line-height: 1.45; }
    .auth-perks { display: block; }
    .auth-panel { padding: 40px 44px; align-self: center; }
    .auth-title { font-size: 1.75rem; }
}

/* ================= ≥1200px ================= */
@media (min-width: 1200px) {
    :root { --tb-gutter: 42px; }
    .card-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    
}

/* ================= ≥1400px: full reference header ================= */
@media (min-width: 1400px) {
    .site-header .brand img { max-width: 290px; max-height: 76px; }
    .main-nav { gap: 30px; }
}

/* ---- Generic homepage (no ticketing type chosen): the hero is only the type chooser + search ----
   Placed last so the .hero-generic rules override the photo hero and its fixed heights set above.

   No photo here: an aurora of brand glows over deep navy gives the chooser depth without an LCP
   image. The dot grid and the halo are painted on .hero-generic's own pseudo-elements, which sit
   behind the content because .hero-inner is z-index 2. */
.hero-generic { height: auto; padding: 30px 0 30px; overflow: hidden; background-image: radial-gradient(1100px 430px at 6% -14%, rgba(169, 0, 228, .58), transparent 62%), radial-gradient(880px 430px at 94% 4%, rgba(16, 215, 213, .42), transparent 64%), radial-gradient(760px 340px at 50% 120%, rgba(126, 34, 220, .42), transparent 70%), linear-gradient(165deg, #04102e, #0a1a4d 48%, #150636); }
.hero-generic::before { background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 74%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 74%); }
.hero-generic::after { content: ""; position: absolute; left: 50%; top: -180px; width: 640px; height: 640px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .11), transparent 62%); pointer-events: none; }
.hero-generic .hero-inner { height: auto; padding-top: 0; }
.hero-generic .finder { position: static; margin: 26px auto 0; box-shadow: 0 20px 44px rgba(2, 7, 29, .40); }

/* Type chooser: glass tiles in one row, each in its own accent so the options read apart. Every
   tile leads with the type's picture (its icon when it has none) and carries the label and blurb
   the type is sold with. --tile is an rgb triple, so one hue drives the wash, the icon fallback and
   the hover ring. A type added later has no rule of its own and falls back to the default accent. */
.flexinline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 0; }
.flexinline a { --tile: 169 0 228; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; border: 1px solid rgba(255, 255, 255, .17); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05)); color: #fff; text-align: left; -webkit-backdrop-filter: blur(10px) saturate(1.25); backdrop-filter: blur(10px) saturate(1.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 26px rgba(2, 7, 29, .30); transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s, border-color .2s; }
.flexinline a[data-type="event"] { --tile: 140 0 200; }
.flexinline a[data-type="attraction"] { --tile: 0 132 154; }
.flexinline a[data-type="tour"] { --tile: 214 92 18; }
.flexinline a[data-type="transport"] { --tile: 48 92 230; }
/* Accent wash bleeding down from the top edge, plus a highlight bar that wipes in on hover. */
.flexinline a::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 0%, rgb(var(--tile) / .75), transparent 68%); opacity: .28; transition: opacity .2s; }
.flexinline a::after { content: ""; position: absolute; top: 0; left: 50%; width: 62%; height: 2px; z-index: 3; transform: translateX(-50%) scaleX(0); background: linear-gradient(90deg, transparent, #fff, transparent); transition: transform .25s cubic-bezier(.2, .8, .3, 1); }
.flexinline a:hover, .flexinline a:focus-visible { transform: translateY(-6px); border-color: rgb(var(--tile) / .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 22px 40px rgba(2, 7, 29, .42), 0 0 0 4px rgb(var(--tile) / .16); }
.flexinline a:hover::before, .flexinline a:focus-visible::before { opacity: .62; }
.flexinline a:hover::after, .flexinline a:focus-visible::after { transform: translateX(-50%) scaleX(1); }
.flexinline a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The picture fills the top of the tile; the label and blurb sit on the glass below it. */
.flexinline .type-figure { position: relative; z-index: 1; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgb(var(--tile) / .22); }
.flexinline .type-figure img, .flexinline .type-figure .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.flexinline .type-figure .img-placeholder { background: linear-gradient(150deg, rgb(var(--tile) / .9), rgb(var(--tile) / .40)); }
.flexinline .type-figure .img-placeholder i { font-size: 1.6rem; }
/* The type's overlay colour washed over the picture: half strength at rest so the photo keeps its
   mood, gone on hover so it reads clearly. --overlay comes from the type's overlay_color. */
.flexinline .type-overlay { position: absolute; inset: 0; z-index: 1; background: var(--overlay, #64748b); opacity: .5; transition: opacity .25s ease; }
.flexinline a:hover .type-overlay, .flexinline a:focus-visible .type-overlay { opacity: 0; }
.flexinline .type-body { position: relative; z-index: 1; display: block; flex: 1 1 auto; padding: 13px 15px 15px; }
.flexinline .type-body strong { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
/* The blurb is clamped so a long description cannot make one tile taller than the rest. */
.flexinline .type-body small { display: -webkit-box; margin-top: 5px; overflow: hidden; font-size: .8rem; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .74); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

@media (min-width: 768px) {
    /* All four types fit in one row: equal columns filling the wrapper's width. */
    .hero-generic { padding: 25px 0; }
    .flexinline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .flexinline a { border-radius: 26px; }
    .flexinline .type-body { padding: 15px 18px 18px; }
    .flexinline .type-body strong { font-size: 1.12rem; }
    .flexinline .type-body small { font-size: .84rem; }
}
.btn.disabled, .btn:disabled, fieldset:disabled .btn { color: #fff;}

/* =========================================================================
   Product page chat assistant
   -------------------------------------------------------------------------
   A live-chat window, not a form: launcher bottom-right, panel above it, one
   column of bubbles. z-index 1040 keeps it above the sticky header (1030) and
   the mobile bottom navigation, and below the off-canvas (1045) and modals
   (1055) so it never traps a dialog. Closed, only the launcher exists, so it
   cannot sit on top of Buy Ticket / checkout.
   ========================================================================= */
.tb-chat { position: fixed; right: 18px; bottom: 18px; z-index: 1040; font-size: .9375rem; }
.tb-chat-launcher { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--tb-grad); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 12px 30px rgba(115, 0, 206, .32); transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, opacity .18s ease, visibility .18s ease; }
.tb-chat-launcher:hover, .tb-chat-launcher:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(115, 0, 206, .38); }
/* The window has its own close and minimize controls, so the launcher steps aside while it is open. */
.tb-chat.is-open .tb-chat-launcher { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.9); }
.tb-chat-launcher-icon { font-size: 1.4rem; line-height: 1; }
.tb-chat-launcher::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(169, 0, 228, .55); animation: tbChatPulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes tbChatPulse { 70% { box-shadow: 0 0 0 16px rgba(169, 0, 228, 0); } 100% { box-shadow: 0 0 0 0 rgba(169, 0, 228, 0); } }
/* The hint bubble sits beside the launcher and only hints before the first open. */
.tb-chat-hint { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--tb-ink); font-size: .82rem; font-weight: 700; white-space: nowrap; box-shadow: var(--tb-shadow); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.tb-chat-hint::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; background: #fff; transform: translateY(-50%) rotate(45deg); }
.tb-chat:not(.is-seen) .tb-chat-hint { opacity: 1; }
/* Unread pip while the window is closed and an answer has arrived. */
.tb-chat-badge { position: absolute; top: 4px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--tb-cyan); box-shadow: 0 0 0 2px #fff; opacity: 0; transition: opacity .2s ease; }
.tb-chat.has-unread .tb-chat-badge { opacity: 1; }

.tb-chat-panel { position: absolute; right: 0; bottom: 72px; width: 400px; height: 600px; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); display: none; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--tb-line); border-radius: 18px; box-shadow: 0 26px 60px rgba(7, 23, 61, .24); transform-origin: bottom right; }
.tb-chat.is-open .tb-chat-panel { display: flex; animation: tbChatIn .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes tbChatIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---- Header ---- */
.tb-chat-head { display: flex; align-items: center; gap: 11px; padding: 12px 12px 12px 14px; color: #fff; background: linear-gradient(105deg, #7a00cc, #a100e8 62%, #8b00dd); }
.tb-chat-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 1.1rem; }
.tb-chat-identity { flex: 1; min-width: 0; line-height: 1.25; }
.tb-chat-identity strong { display: block; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.tb-chat-status { display: flex; align-items: center; gap: 5px; font-size: .74rem; opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-chat-status i { font-size: .48rem; color: var(--tb-cyan); }
.tb-chat-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: .95rem; cursor: pointer; transition: background .18s ease; }
.tb-chat-icon:hover, .tb-chat-icon:focus-visible { background: rgba(255, 255, 255, .28); }

/* ---- Transcript ---- */
.tb-chat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 6px; background: linear-gradient(180deg, var(--tb-soft), #fff 120px); }
.tb-chat-day { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--tb-muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tb-chat-day::before, .tb-chat-day::after { content: ""; flex: 1; height: 1px; background: var(--tb-line); }
.tb-chat-row { display: flex; margin-bottom: 10px; animation: tbChatBubble .18s ease both; }
@keyframes tbChatBubble { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tb-chat-row-assistant { justify-content: flex-start; }
.tb-chat-row-user { justify-content: flex-end; }
.tb-chat-bubble { max-width: 84%; padding: 9px 13px; border-radius: 16px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; box-shadow: var(--tb-shadow-sm); }
.tb-chat-row-assistant .tb-chat-bubble { background: #fff; border: 1px solid var(--tb-line); border-bottom-left-radius: 5px; }
.tb-chat-row-user .tb-chat-bubble { background: var(--tb-grad); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 4px 12px rgba(115, 0, 206, .20); }
.tb-chat-meta { margin-top: 3px; padding: 0 4px; color: var(--tb-muted); font-size: .68rem; }
.tb-chat-row-user .tb-chat-meta { text-align: right; }
.tb-chat-row-note .tb-chat-bubble { background: #fff7e6; border: 1px solid #ffe2a8; color: #7a5600; }

/* ---- Quick questions ---- */
.tb-chat-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.tb-chat-quick[hidden] { display: none; }
.tb-chip { padding: 6px 12px; border: 1px solid #d9c2f5; border-radius: 999px; background: #fff; color: var(--tb-purple); font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .16s ease, border-color .16s ease; }
.tb-chip:hover, .tb-chip:focus-visible { background: var(--tb-soft); border-color: var(--tb-purple); }

/* ---- Typing indicator ---- */
.tb-chat-typing { display: inline-flex; align-items: center; gap: 4px; padding: 11px 13px; border-radius: 16px 16px 16px 5px; background: #fff; border: 1px solid var(--tb-line); box-shadow: var(--tb-shadow-sm); }
.tb-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: #a9b1c1; animation: tbChatDot 1.1s ease-in-out infinite; }
.tb-chat-typing span:nth-child(2) { animation-delay: .16s; }
.tb-chat-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes tbChatDot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* ---- Composer ---- */
.tb-chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--tb-line); }
.tb-chat-input { flex: 1; min-width: 0; max-height: 120px; min-height: 44px; padding: 11px 14px; border: 1px solid #d6dcea; border-radius: 22px; background: var(--tb-soft); color: var(--tb-ink); font: inherit; font-size: .95rem; line-height: 1.4; resize: none; overflow-y: auto; }
.tb-chat-input:focus { outline: 0; background: #fff; border-color: var(--tb-purple); box-shadow: 0 0 0 3px rgba(131, 0, 215, .14); }
.tb-chat-send { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--tb-grad); color: #fff; font-size: 1.05rem; cursor: pointer; box-shadow: 0 6px 14px rgba(115, 0, 206, .24); transition: opacity .18s ease, transform .18s ease; }
.tb-chat-send:hover, .tb-chat-send:focus-visible { transform: translateY(-1px); }
.tb-chat.is-busy .tb-chat-send { opacity: .45; cursor: default; transform: none; }
.tb-chat-note { margin: 0; padding: 8px 14px 12px; background: #fff; color: var(--tb-muted); font-size: .72rem; line-height: 1.4; }
.tb-chat-note i { color: var(--tb-purple); }
.tb-chat-note a { color: var(--tb-purple); font-weight: 700; }

/* ---- Mobile: a messaging app, not a corner window ---- */
@media (max-width: 575.98px) {
    .tb-chat { right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 68px); }
    .tb-chat-hint { right: auto; left: 0; top: auto; bottom: calc(100% + 8px); transform: none; }
    .tb-chat-hint::after { right: auto; left: 22px; top: -5px; transform: rotate(45deg); }
    .tb-chat-panel { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .tb-chat-head { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
    .tb-chat-input { font-size: 1rem; }
    .tb-chat-compose { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
    .tb-chat-note { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-chat-launcher::after, .tb-chat-typing span { animation: none; }
    .tb-chat.is-open .tb-chat-panel, .tb-chat-row { animation: none; }
    .tb-chat-launcher, .tb-chat-hint, .tb-chat-badge { transition: none; }
}

main#main{background-color: #f4f6fb;}
.modal-backdrop.show
 {
    opacity: .75;
}

.modal-body {
    padding: .5rem;
}