:root {
    /* Site-wide palette — pitch-green + navy-ink + warm paper, harmonized
       with the checkout page and every premium-event surface. Token NAMES
       are unchanged so all existing var(--*) usages continue to work; only
       the VALUES are swapped. */
    --bg-base:           #f4f4f0;   /* warm paper background — matches event/checkout pages */
    --bg-surface:        #ffffff;   /* cards, modals */
    --bg-surface-hover:  #ebebe5;   /* row hover, secondary card bg */
    --text-primary:      #0a1628;   /* navy ink — main copy */
    --text-secondary:    #2d3e5a;   /* lighter navy — meta */
    --text-muted:        #5a6a82;   /* even lighter — captions */
    --border-subtle:     #d8d8d0;   /* warm gray hairline */
    --border-strong:     #b8b8b0;   /* warm gray, more visible */
    --primary:           #00d97e;   /* pitch green — accent, CTAs, hover */
    --primary-hover:     #00b369;   /* pitch deep — active state */
    --accent:            #ffb800;   /* amber — premium / VIP / highlight */
    --success:           #00d97e;   /* pitch green */
    --danger:            #ff3b30;   /* alert red (iOS-style) */
    --warning:           #ffb800;   /* amber */
}

.lucide-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2px;
    vertical-align: -3px;
    color: var(--text-secondary);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}
a { color: var(--text-primary); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--primary); }
img { max-width: 100%; height: auto; }
/* iOS Safari fixes */
input, select, button, textarea { font-size: 16px; } /* Prevent iOS zoom on focus */
@supports (-webkit-touch-callout: none) {
    input[type="date"] { min-height: 38px; }
}
.container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

/* ========== HEADER ==========
   Sticky, white bg. Shadow appears on scroll via .is-scrolled class
   (added by header-scroll observer in app.js if present, or via plain
   CSS when window.scrollY > 0). Animated underline on nav hovers. */
.header {
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--border-subtle);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.header.is-scrolled {
    box-shadow: 0 1px 0 var(--border-subtle), 0 6px 18px rgba(10,22,40,0.05);
    border-bottom-color: transparent;
}
.header-bar {
    max-width: 1440px; margin: 0 auto; padding: 0 40px;
    height: 60px;
    display: flex; align-items: center; gap: 6px;
}

/* -- Logo -- */
.header-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0; margin-right: 28px;
    transition: opacity 0.15s;
}
.header-logo:hover { color: var(--text-primary); opacity: 0.88; }
.header-logo-img { height: 40px; width: auto; }
.header-logo-text {
    font-size: 1.05rem; font-weight: 700; color: var(--text-primary);
    letter-spacing: -0.015em; white-space: nowrap;
}

/* -- Desktop nav (animated underline) -- */
.header-nav {
    display: flex; align-items: center; gap: 2px; margin-right: auto;
}
.header-nav a {
    position: relative;
    font-size: .88rem; font-weight: 500; color: var(--text-secondary);
    padding: 8px 14px;
    transition: color 0.15s;
    white-space: nowrap;
}
.header-nav a::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px;
    bottom: 2px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}
.header-nav a:hover {
    color: var(--text-primary);
}
.header-nav a:hover::after { transform: scaleX(1); }
.header-nav a.active {
    color: var(--text-primary);
    font-weight: 600;
}
.header-nav a.active::after { transform: scaleX(1); }

/* -- Right actions -- */
.header-actions {
    display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.header-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 6px; border: none;
    background: transparent; color: var(--text-muted);
    cursor: pointer; transition: color 0.15s;
}
.header-icon-btn:hover { color: var(--text-primary); }
.header-selects { display: flex; align-items: center; gap: 4px; margin-left: 4px; }

/* WhatsApp icon button in the header (desktop only).
   Uses official WhatsApp brand green so users instantly recognize the channel. */
.header-wa-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    margin-right: 6px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(37,211,102,0.22);
}
.header-wa-btn:hover {
    background: #1ebd5b;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37,211,102,0.32);
    color: #fff;
}
.header-wa-btn svg { width: 18px; height: 18px; }

/* Mobile contact bar — fixed to bottom of viewport, only shown <900px.
   Split into two equal halves: Call (left, brand green) + WhatsApp (right,
   WhatsApp brand green). Both are tappable, both lead to the same number.
   Sits below modal-overlay (z:1100) so booking flows cover it; body gets
   padding-bottom in the same breakpoint so content isn't clipped. */
/* ========== THIN TOP UTILITY BAR ==========
   Above the main header bar. Dark navy strip with trust badge on the left
   and quick links + call number on the right. On mobile, only the call link
   stays visible to keep the bar minimal. */
.header-utility {
    background: var(--text-primary, #0a1628);
    color: rgba(255,255,255,0.85);
    font-size: .75rem;
    line-height: 1;
}
.header-utility-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 6px 40px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    min-height: 32px;
}
.header-utility-left { display: flex; align-items: center; }
.header-utility-right { display: flex; align-items: center; gap: 18px; }
.hu-trust {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: rgba(255,255,255,0.85);
}
.hu-trust-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    flex: 0 0 auto;
}
.hu-link {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.005em;
    transition: color 0.15s;
}
.hu-link:hover { color: #fff; }
.hu-call {
    display: inline-flex; align-items: center; gap: 6px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.hu-call svg { opacity: 0.85; }
.hu-call:hover { color: var(--primary); }
.hu-call:hover svg { opacity: 1; color: var(--primary); }

/* ========== FLOATING WHATSAPP FAB (mobile) ==========
   Visible only on mobile (<=880px). Replaces the old split call+WhatsApp
   bottom bar. Sits in the bottom-right corner above the scroll-to-top btn.
   Booking flows still cover this (modal-overlay z-index 1100). */
.fab-whatsapp {
    display: none;  /* hidden by default; mobile breakpoint flips this on */
    position: fixed;
    right: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 54px; height: 54px;
    border-radius: 50%;
    background: #25d366;  /* WhatsApp brand green */
    color: #fff;
    align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37,211,102,0.4), 0 2px 6px rgba(0,0,0,0.18);
    z-index: 95;
    transition: transform 0.15s, box-shadow 0.15s;
}
.fab-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,0.5), 0 2px 6px rgba(0,0,0,0.2); }
.fab-whatsapp:active { transform: translateY(0); }

/* Custom header dropdowns */
.hdr-dropdown { position: relative; }
.hdr-dropdown-btn {
    display: flex; align-items: center; gap: 4px;
    background: none; border: 1px solid transparent; border-radius: 6px;
    color: var(--text-secondary); padding: 5px 8px;
    font-size: .78rem; font-weight: 500; cursor: pointer;
    font-family: inherit; transition: all 0.15s; white-space: nowrap;
}
.hdr-dropdown-btn:hover { color: var(--text-primary); background: var(--bg-surface-hover); }
.hdr-dropdown.open .hdr-dropdown-btn { color: var(--text-primary); background: var(--bg-surface-hover); border-color: var(--border-subtle); }
.hdr-dropdown-btn svg { opacity: 0.5; transition: transform 0.2s; }
.hdr-dropdown.open .hdr-dropdown-btn svg { transform: rotate(180deg); }

.hdr-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    background: #fff; border: 1px solid var(--border-subtle);
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    min-width: 120px; max-height: 240px; overflow-y: auto;
    z-index: 200; padding: 4px;
}
.hdr-dropdown.open .hdr-dropdown-menu { display: block; }

.hdr-dropdown-item {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px; border-radius: 5px;
    font-size: .8rem; font-weight: 500; color: var(--text-secondary);
    cursor: pointer; transition: all 0.1s; white-space: nowrap;
}
.hdr-dropdown-item:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.hdr-dropdown-item.active { color: var(--primary); font-weight: 600; }
.hdr-dropdown-item.active::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); margin-left: auto; }
/* Hint at the bottom of the currency dropdown — clarifies that the picked
   currency is display-only and Zoho still charges in USD. */
.hdr-dropdown-hint {
    margin: 6px -6px -6px; padding: 8px 12px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface-hover);
    border-radius: 0 0 7px 7px;
    font-size: .68rem; font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    text-align: center;
}

/* Mobile pickers (inline chip selectors) */
.hdr-mobile-picker { flex: 1; }
.hdr-mobile-picker-label {
    display: block; font-size: .65rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px;
}
.hdr-mobile-picker-options { display: flex; flex-wrap: wrap; gap: 6px; }
.hdr-mobile-chip {
    padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border-subtle);
    font-size: .78rem; font-weight: 500; color: var(--text-secondary);
    cursor: pointer; background: var(--bg-base); transition: all 0.15s;
}
.hdr-mobile-chip.active {
    border-color: var(--primary); color: var(--primary);
    background: rgba(0,217,126,0.06); font-weight: 600;
}

/* -- Hamburger (hidden on desktop) -- */
.header-hamburger {
    display: none; width: 34px; height: 34px;
    background: transparent; border: none; cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 0;
}
.header-hamburger span {
    display: block; width: 18px; height: 1.5px; background: var(--text-primary);
    border-radius: 1px; transition: all 0.25s ease;
}
.header-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.header-hamburger.open span:nth-child(2) { opacity: 0; }
.header-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* -- Search overlay -- */
.header-search-overlay {
    display: none; position: absolute; top: 0; left: 0; right: 0;
    height: 52px; background: #fff;
    border-bottom: 1px solid #e8e8e8;
    z-index: 110; align-items: center; padding: 0 24px;
}
.header-search-overlay.open { display: flex; }
.header-search-inner {
    max-width: 560px; width: 100%; margin: 0 auto;
    position: relative; display: flex; align-items: center;
}
.header-search-icon {
    position: absolute; left: 12px; color: var(--text-muted); pointer-events: none;
}
.header-search-inner input {
    width: 100%; padding: 9px 40px 9px 40px; border-radius: 6px;
    border: 1px solid var(--border-subtle); background: var(--bg-base);
    font-size: .88rem; color: var(--text-primary); transition: border-color 0.15s;
}
.header-search-inner input::placeholder { color: var(--text-muted); }
.header-search-inner input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0,217,126,0.1);
}
.header-search-close {
    position: absolute; right: 4px;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 4px;
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer;
}
.header-search-close:hover { color: var(--text-primary); }

/* -- Mobile menu -- */
.header-mobile-menu {
    display: none; flex-direction: column;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 4px 24px 12px;
}
.header-mobile-menu.open { display: flex; }
.header-mobile-nav { display: flex; flex-direction: column; }
.header-mobile-nav a {
    color: var(--text-secondary); font-size: .9rem; font-weight: 500;
    padding: 11px 0; border-bottom: 1px solid #f0f0f0;
    transition: color 0.15s;
}
.header-mobile-nav a:last-child { border-bottom: none; }
.header-mobile-nav a:hover, .header-mobile-nav a.active { color: var(--primary); }
.header-mobile-controls {
    display: flex; gap: 8px; padding-top: 10px;
    border-top: 1px solid #e8e8e8; margin-top: 2px;
}

/* Autocomplete Dropdown */
.search-dropdown {
    position: absolute; top: calc(100% + 10px); left: 0; width: max(100%, 380px);
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(10,22,40,0.42), 0 6px 18px rgba(10,22,40,0.18);
    z-index: 1200;
    /* Visible area scales with viewport so the dropdown never spills off
       the bottom of the screen on shorter laptops. Anything beyond scrolls
       inside, so results never hide behind the page content. */
    max-height: min(420px, calc(100vh - 320px));
    overflow-y: auto; overscroll-behavior: contain;
    text-align: left;
    max-width: calc(100vw - 32px);
}
/* Sticky group headers so the category label stays visible as the user
   scrolls through long result sets. */
.search-dropdown-group {
    position: sticky; top: 0; z-index: 1;
}
/* Slimmer scrollbar that fits the premium feel. */
.search-dropdown::-webkit-scrollbar { width: 8px; }
.search-dropdown::-webkit-scrollbar-track { background: transparent; }
.search-dropdown::-webkit-scrollbar-thumb {
    background: rgba(10,22,40,0.18);
    border-radius: 999px;
}
.search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(10,22,40,0.28); }
.search-dropdown.hidden { display: none; }
.search-dropdown-group {
    padding: 8px 12px; font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase;
    background: var(--bg-surface-hover);
    border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.search-dropdown-group:first-child { border-top: none; }
.search-dropdown-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    cursor: pointer; transition: background 0.15s;
}
.search-dropdown-item:hover { background: var(--bg-surface-hover); }
.search-dropdown-item-content { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.search-dropdown-item-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.search-dropdown-item-subtitle { font-size: 0.75rem; color: var(--text-secondary); }
.search-dropdown-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 2px; flex-shrink: 0; }
.search-dropdown-loading, .search-dropdown-empty {
    padding: 16px; text-align: center; color: var(--text-muted); font-size: 0.85rem;
}

/* ========== MAIN ========== */
.main-content { min-height: 70vh; padding: 28px 40px 48px; max-width: 1440px; margin: 0 auto; }
.main-content.full-width { max-width: 100%; padding: 0; }

/* ========== HERO ==========
   Editorial dark hero: huge Bebas-Neue display headline, trust strip with
   green check marks, and a white tabbed multi-field search card pinned at
   the bottom. The existing badge + stats are preserved, just re-balanced
   inside the new layout.

   Existing element wiring (#heroSearch, heroSearchGo(), handleSearchInput,
   #heroSearchDropdown) is left untouched so the global search dropdown
   continues to work — the card is purely a visual upgrade on top.
*/
.hero {
    position: relative;
    z-index: 60; /* Above the search backdrop (z=50), below header (z=100) */
    width: 100vw; margin-left: calc(-50vw + 50%);
    margin-top: -28px;
    padding: 60px 24px 60px;
    /* Fill the rest of the viewport after the 60px header + ~40px trust bar
       so the hero + trust bar together = exactly one full screen. Anything
       below ("Browse by Sport" etc.) only appears once the user scrolls. */
    min-height: calc(100vh - 80px);
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    margin-bottom: 0;
    isolation: isolate;
    /* Intentionally NOT clipping overflow here — the bg layer below clips
       itself, and the autocomplete dropdown needs to spill past the hero. */
}
.hero-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    background: url('/images/hero.jpg') center 40% / cover no-repeat;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
/* Dual-layer overlay — first dark gradient for legibility, then a subtle
   pitch-green glow at top-right for brand presence. */
.hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 900px 480px at 88% 12%, rgba(0,217,126,0.18), transparent 60%),
        radial-gradient(ellipse 700px 380px at 10% 90%, rgba(0,217,126,0.08), transparent 65%),
        linear-gradient(180deg, rgba(10,22,40,0.78) 0%, rgba(10,22,40,0.88) 60%, rgba(10,22,40,0.95) 100%);
}
/* Subtle diagonal-line texture — same recipe as the premium hero so the
   whole site has a consistent depth pattern. */
.hero-bg::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(135deg, transparent 0 36px, rgba(244,244,240,0.025) 36px 37px);
    pointer-events: none;
}
.hero-content {
    position: relative; z-index: 1;
    max-width: 1180px; width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}
.hero h1 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(1.8rem, 3.6vw, 3.1rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.05;
    letter-spacing: 0.005em;
    margin: 0 auto 22px;
    max-width: 820px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.2);
}
.hero h1 span { color: var(--primary); }

/* Tabbed search card — white surface that contrasts against the dark hero. */
.hero-search-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(10,22,40,0.32), 0 2px 6px rgba(10,22,40,0.14);
    overflow: visible;
    max-width: 1080px;
    margin: 0 auto;
}

/* Dim everything below the hero when the dropdown is open. Backdrop z=50
   sits below the hero (z=60) and below the header (z=100), so only the
   page content (homeContent) gets darkened — the hero, card, and dropdown
   stay crisp. Same idea Ticketmaster / Vivid / SeatGeek use. */
body.search-results-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 40, 0.55);
    z-index: 50;
    pointer-events: auto;
    animation: search-backdrop-in 0.18s ease-out;
}
@keyframes search-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.hero-tabs {
    display: flex; align-items: stretch;
    gap: 2px;
    padding: 6px 6px 0;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
    scrollbar-width: none;
}
.hero-tabs::-webkit-scrollbar { display: none; }
.hero-tab {
    appearance: none;
    background: transparent; border: none;
    padding: 14px 18px 16px;
    display: inline-flex; align-items: center; gap: 8px;
    font: inherit;
    font-size: .9rem; font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.15s;
    border-radius: 8px 8px 0 0;
}
.hero-tab svg { color: currentColor; }
.hero-tab:hover { color: var(--text-primary); }
.hero-tab.is-active {
    color: var(--text-primary);
}
.hero-tab.is-active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: -1px;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
}

/* Search row — multi-field layout with vertical dividers and a big CTA. */
.hero-search {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 6px 6px 6px 0;
    gap: 0;
}
.hero-search-field {
    display: flex; flex-direction: column;
    justify-content: center;
    padding: 14px 22px;
    min-width: 0;
    flex: 1 1 0;
    /* Force left-align even though .hero-content is centered overall.
       Field labels and inputs read better aligned to their left edge. */
    text-align: left;
}
.hero-search-field-main { flex: 2 1 0; }
.hero-search-field-when { flex: 1 1 0; min-width: 180px; }
.hero-field-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
    line-height: 1;
}
.hero-search input[type="text"] {
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem; font-weight: 500;
    color: var(--text-primary);
    outline: none;
    line-height: 1.3;
}
.hero-search input::placeholder { color: var(--text-muted); font-weight: 400; }

/* Custom WHEN field — looks identical to the EVENT field but the whole area
   is clickable and pops a styled calendar (no native browser picker). */
.hero-search-field-when {
    position: relative;
    cursor: pointer;
    padding-right: 44px; /* room for the calendar icon */
}
.hero-search-field-when:focus { outline: none; }
.hero-search-field-when:focus-visible {
    outline: 2px solid rgba(0,217,126,0.4);
    outline-offset: -2px;
    border-radius: 8px;
}
.hero-date-display {
    font-size: 1rem; font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    min-height: 1.3em;
}
.hero-date-placeholder { color: var(--text-muted); font-weight: 400; }
.hero-date-value { color: var(--text-primary); font-weight: 600; }
.hero-date-icon {
    position: absolute;
    right: 18px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.15s;
}
.hero-search-field-when:hover .hero-date-icon { color: var(--primary); }

/* Calendar popup — styled to match the search dropdown. */
.hero-calendar {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(10,22,40,0.42), 0 6px 18px rgba(10,22,40,0.18);
    padding: 14px;
    z-index: 1300;
    cursor: default;
    animation: hero-cal-pop 0.16s ease-out;
}
.hero-calendar.hidden { display: none; }
@keyframes hero-cal-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-cal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px;
}
.hero-cal-month {
    flex: 1;
    text-align: center;
    font-size: .95rem; font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.005em;
}
.hero-cal-nav {
    appearance: none;
    width: 30px; height: 30px;
    border: none; border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.hero-cal-nav:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.hero-cal-nav:active { transform: scale(0.94); }

.hero-cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.hero-cal-weekday {
    text-align: center;
    font-size: .68rem; font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 0;
}
.hero-cal-days {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.hero-cal-day {
    appearance: none;
    width: 100%; height: 38px;
    border: none; background: transparent;
    border-radius: 50%;
    font: inherit; font-size: .88rem; font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.hero-cal-day.is-empty { visibility: hidden; cursor: default; }
.hero-cal-day:hover:not(:disabled):not(.is-empty) {
    background: var(--bg-surface-hover);
}
.hero-cal-day.is-past {
    color: var(--border-strong);
    cursor: not-allowed;
}
.hero-cal-day.is-today {
    box-shadow: inset 0 0 0 1.5px var(--primary);
    color: var(--primary);
    font-weight: 700;
}
.hero-cal-day.is-selected {
    background: var(--primary);
    color: var(--text-primary);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,217,126,0.36);
}
.hero-cal-day.is-selected.is-today { box-shadow: 0 4px 12px rgba(0,217,126,0.36); }

.hero-cal-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}
.hero-cal-btn {
    appearance: none;
    border: none; background: transparent;
    font: inherit; font-size: .82rem; font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
}
.hero-cal-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}
.hero-cal-today { color: var(--primary); }
.hero-cal-today:hover { background: rgba(0,217,126,0.1); color: var(--primary-hover); }
.hero-search-divider {
    width: 1px;
    align-self: center;
    height: 42px;
    background: var(--border-subtle);
    flex: 0 0 auto;
}
.hero-search-submit {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 0 28px;
    margin: 6px;
    min-width: 140px;
    border: none; border-radius: 10px;
    background: var(--primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: .95rem; font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 6px 18px rgba(0,217,126,0.28);
    flex: 0 0 auto;
}
.hero-search-submit:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,217,126,0.38);
}
.hero-search-submit:active {
    transform: translateY(0); box-shadow: 0 4px 10px rgba(0,217,126,0.28);
}

/* Hero stats — sit below the search card, centered with the rest. */
.hero-stats {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; margin-top: 22px; flex-wrap: wrap;
}
.hero-stat {
    display: flex; align-items: baseline; gap: 6px;
    color: rgba(244,244,240,0.6);
    font-size: .78rem; font-weight: 500;
    letter-spacing: 0.04em;
}
.hero-stat strong {
    color: var(--primary);
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1;
}
.hero-stat-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(244,244,240,0.22); }

/* ========== TRUST BAR ==========
   Thin single-line strip below the hero — minimal: small inline icon +
   bold label, no subtitle, faint dividers between items.
*/
.trust-bar {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 28px;
}
.trust-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.trust-bar-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 22px;
    position: relative;
}
.trust-bar-item::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 16px;
    background: var(--border-subtle);
}
.trust-bar-item:last-child::after { display: none; }
.trust-bar-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    color: var(--primary);
}
.trust-bar-icon svg { width: 16px; height: 16px; }
.trust-bar-text { display: inline-flex; align-items: baseline; gap: 0; }
.trust-bar-text strong {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: 0.005em;
}
.trust-bar-text small { display: none; } /* kept in markup, hidden in minimal style */
@media (max-width: 880px) {
    .trust-bar-inner { padding: 8px 12px; gap: 4px 0; }
    .trust-bar-item { padding: 4px 12px; }
    .trust-bar-text strong { font-size: .74rem; }
}
@media (max-width: 540px) {
    .trust-bar-item::after { display: none; }
    .trust-bar-item { padding: 2px 10px; }
    .trust-bar-text strong { font-size: .72rem; }
}

/* Mobile — center copy, stack search-card fields vertically. */
@media (max-width: 880px) {
    .hero { padding: 36px 16px 72px; margin-bottom: 0; }
    .hero-content { text-align: center; padding: 0 8px; }
    .hero h1 { margin-left: auto; margin-right: auto; }
    .hero-search-card { margin: 0 auto; }
    .hero-search { flex-direction: column; padding: 4px; }
    .hero-search-field { padding: 12px 16px; }
    .hero-search-divider { width: auto; height: 1px; align-self: stretch; margin: 0 16px; }
    .hero-search-submit { margin: 6px; min-height: 50px; }
    /* Calendar spans the full WHEN field on mobile so days are easier to tap. */
    .hero-calendar { left: 0; right: 0; width: auto; max-width: calc(100vw - 32px); }
    .hero-stats { justify-content: center; }
}
@media (max-width: 520px) {
    .hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
    .hero-tab { padding: 12px 12px 14px; font-size: .82rem; }
    .hero-tab.is-active::after { left: 10px; right: 10px; }
}

/* ========== SECTION HEADERS ========== */
.section-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin: 40px 0 20px; gap: 16px;
}
.section-header:first-of-type { margin-top: 0; }
.section-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    line-height: 1.15;
    font-family: 'Bebas Neue', Impact, sans-serif;
    text-transform: none;
}
.section-header .btn-link {
    font-size: .85rem; font-weight: 600;
    color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}
.section-header .btn-link:hover {
    color: var(--primary);
    background: rgba(0,217,126,0.08);
}

/* ========== TOURNAMENT HERO ==========
   Shared hero used on listing pages (tournament events, sport events, team
   events, etc). Larger cinematic hero with optional background image set
   via `--hero-img` (football.jpg / wimbledon.jpg today; dark fallback for
   everything else). Kept .tournament-hero-* class names so all listing
   page templates render unchanged. */
.tournament-hero {
    --th-ink: #0a1628;
    --th-ink-2: #11203a;
    --th-paper: #f4f4f0;
    --th-lime: #00d97e;
    --th-lime-soft: rgba(0,217,126,0.16);
    --th-line-light: rgba(244,244,240,0.12);

    position: relative;
    margin: 0 0 28px;
    padding: 56px 44px 48px;
    min-height: 340px;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    color: var(--th-paper);
    border: 1px solid var(--th-line-light);
    display: flex; flex-direction: column;

    /* Image hero — when --hero-img is set, layer a dark gradient on top so
       text stays readable. background-color is the fallback while the
       image loads, or shows through transparent gradient stops. */
    background-color: var(--th-ink);
    background-image:
        linear-gradient(180deg, rgba(10,22,40,0.45) 0%, rgba(10,22,40,0.75) 65%, rgba(10,22,40,0.92) 100%),
        var(--hero-img, none);
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}
/* No-image fallback — keep the prior aesthetic: dark navy + soft lime glow. */
.tournament-hero[data-no-image] {
    background-image:
        radial-gradient(ellipse 900px 480px at 20% 10%, rgba(0,217,126,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 700px 400px at 90% 80%, rgba(0,217,126,0.05) 0%, transparent 60%),
        linear-gradient(180deg, var(--th-ink-2) 0%, var(--th-ink) 100%);
}
/* Subtle dotted texture, faded toward the bottom (only on no-image hero
   — for image heroes the photo provides enough visual interest). */
.tournament-hero[data-no-image]::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(244,244,240,0.05) 1px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), transparent 78%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), transparent 78%);
    pointer-events: none;
}
/* Soft lime glow — only on no-image hero (image heroes don't need it). */
.tournament-hero[data-no-image] .tournament-hero-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(620px 240px at -8% 110%, rgba(0,217,126,0.10), transparent 62%),
        radial-gradient(560px 220px at 108% -20%, rgba(0,217,126,0.08), transparent 60%);
}
.tournament-hero:not([data-no-image]) .tournament-hero-glow { display: none; }
.tournament-hero-content {
    position: relative;
    z-index: 1;
    margin-top: auto;        /* push title block to the bottom of the hero */
    max-width: 1100px;
}

.tournament-hero .breadcrumb,
.tournament-hero .tournament-hero-crumbs {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    color: rgba(244,244,240,0.62);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tournament-hero .breadcrumb a { color: rgba(244,244,240,0.78); text-decoration: none; }
.tournament-hero .breadcrumb a:hover { color: var(--th-lime); }
.tournament-hero .breadcrumb .sep { color: rgba(244,244,240,0.3); }

.tournament-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--th-lime);
    color: var(--th-ink);
    border: 1px solid var(--th-lime);
    font-size: .7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 14px;
}
.tournament-hero-eyebrow .lucide-icon,
.tournament-hero-eyebrow svg { width: 13px; height: 13px; color: var(--th-ink); stroke-width: 2.4; }

.tournament-hero-title {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 0.98;
    color: var(--th-paper);
}
.tournament-hero-title .title-name { color: var(--th-paper); }
.tournament-hero-title .title-divider {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--th-lime);
    align-self: center; flex-shrink: 0;
}
.tournament-hero-title .title-sport {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 400;
    color: var(--th-lime);
    letter-spacing: 0.01em;
}

.tournament-hero-meta {
    display: flex; align-items: center; gap: 8px;
    margin-top: 18px; flex-wrap: wrap;
}
.tournament-hero-meta .th-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(244,244,240,0.07);
    border: 1px solid rgba(244,244,240,0.14);
    color: rgba(244,244,240,0.92);
    font-size: .78rem; font-weight: 500;
}
.tournament-hero-meta .th-chip .lucide-icon,
.tournament-hero-meta .th-chip svg {
    width: 13px; height: 13px;
    color: var(--th-lime);
    stroke-width: 2.2px;
}
.tournament-hero-meta .th-chip-soft {
    background: var(--th-lime-soft);
    border-color: rgba(0,217,126,0.32);
    color: var(--th-paper);
}
.tournament-hero-meta .th-chip-soft .lucide-icon,
.tournament-hero-meta .th-chip-soft svg { color: var(--th-lime); }

@media (max-width: 768px) {
    .tournament-hero { padding: 24px 20px 22px; border-radius: 14px; }
    .tournament-hero-title { font-size: clamp(1.8rem, 6vw, 2.2rem); gap: 10px; }
    .tournament-hero-title .title-sport { font-size: clamp(1rem, 4vw, 1.3rem); }
    .tournament-hero-title .title-divider { width: 5px; height: 5px; }
}

/* ========== CARDS GRID ========== */
/* ========== LISTING SHELL — 2-column sidebar + main =========================
   Used on listing pages with the new vertical filter sidebar (tournament-events
   currently). Sidebar collapses into a slide-out drawer at <900px. */
.listing-shell {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-bottom: 32px;
}
.listing-main { min-width: 0; }
.listing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 2px 14px;
    flex-wrap: wrap;
}
.listing-result-count { font-size: 0.88rem; color: var(--text-secondary); }
.listing-result-count strong { color: var(--text-primary); font-weight: 600; }
.listing-result-count .rc-dim { color: var(--text-muted); margin-left: 2px; }
.listing-sort { flex-shrink: 0; }
.listing-sort .filter-pill { min-width: 0; }

/* Mobile filter drawer trigger — hidden on desktop; sidebar is always present. */
.filter-drawer-toggle { display: none; }

/* ========== FILTER SIDEBAR ================================================ */
.filter-sidebar {
    --fsb-ink: #0a1628;
    --fsb-ink-soft: rgba(10,22,40,0.72);
    --fsb-ink-dim: rgba(10,22,40,0.48);
    --fsb-line: rgba(10,22,40,0.10);
    --fsb-line-soft: rgba(10,22,40,0.06);
    --fsb-paper: #f4f4f0;
    --fsb-paper-2: #ebebe5;
    --fsb-lime: #00d97e;

    background: #fff;
    border: 1px solid var(--fsb-line);
    border-radius: 14px;
    padding: 18px 18px 8px;
    position: sticky;
    top: 72px;
    align-self: start;
    /* Cap sidebar to viewport height — when its content is taller, an
       internal scrollbar appears so the user can browse all filters by
       wheel-scrolling over the sidebar. Wheel routes naturally:
         - cursor over sidebar → sidebar scrolls
         - cursor over tickets → page scrolls
       No `overscroll-behavior` setting — when sidebar's internal scroll
       reaches its boundary, the wheel chains to the page (default browser
       behaviour) so the user can keep scrolling without moving the cursor. */
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Thin custom scrollbar so the internal scroll doesn't look like a
       system browser pane. */
    scrollbar-width: thin;
    scrollbar-color: rgba(10,22,40,0.18) transparent;
}
.filter-sidebar::-webkit-scrollbar { width: 6px; }
.filter-sidebar::-webkit-scrollbar-track { background: transparent; }
.filter-sidebar::-webkit-scrollbar-thumb {
    background: rgba(10,22,40,0.18);
    border-radius: 999px;
}
.filter-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(10,22,40,0.36); }

/* Header — title + active count + Clear all */
.fsb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--fsb-line);
    margin-bottom: 6px;
    gap: 12px;
}
.fsb-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 1rem; font-weight: 700;
    color: var(--fsb-ink);
    margin: 0;
    letter-spacing: -0.005em;
}
.fsb-title > i, .fsb-title > svg {
    width: 18px; height: 18px;
    color: var(--fsb-ink-soft);
}
.fsb-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 7px;
    background: var(--fsb-lime);
    color: var(--fsb-ink);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}
.fsb-header-actions {
    display: flex; align-items: center; gap: 4px;
}
.fsb-clear {
    background: transparent;
    border: 0;
    color: var(--fsb-ink-soft);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 2px;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(10,22,40,0.25);
}
.fsb-clear:hover { color: var(--fsb-ink); text-decoration-color: var(--fsb-ink); }

/* Close (X) button — hidden on desktop where sidebar is always visible;
   shown on mobile so users have a clear way to dismiss the drawer
   without hunting for the scrim. */
.fsb-close {
    display: none;
    background: transparent;
    border: 1px solid var(--fsb-line);
    border-radius: 50%;
    width: 32px; height: 32px;
    align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--fsb-ink-soft);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fsb-close:hover {
    background: var(--fsb-paper);
    color: var(--fsb-ink);
    border-color: var(--fsb-ink-soft);
}
.fsb-close i, .fsb-close svg { width: 16px; height: 16px; }

/* Each section is a native <details> — open/close + free a11y, no JS state.
   Sections (Price range, Available only, Dates, Teams, Cities, Venues,
   Rounds, Categories) are stacked vertically with subtle dividers between. */
.fsb-section {
    border-bottom: 1px solid var(--fsb-line-soft);
    padding: 0;
}
.fsb-section:last-of-type { border-bottom: 0; }

/* Summary row — the clickable accordion header. Strip the default UA marker
   and provide our own chevron icon that rotates on [open]. */
.fsb-section-head {
    display: flex; align-items: center;
    gap: 10px;
    padding: 14px 2px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background 0.12s;
}
.fsb-section-head::-webkit-details-marker { display: none; }
.fsb-section-head:hover { background: rgba(10,22,40,0.02); }
.fsb-section-head:focus-visible {
    outline: 2px solid var(--fsb-lime);
    outline-offset: 2px;
    border-radius: 4px;
}

.fsb-section-title {
    flex: 1;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--fsb-ink);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.fsb-section-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--fsb-ink-dim);
    letter-spacing: 0.06em;
    text-transform: none;
    flex-shrink: 0;
}
.fsb-section-chev {
    width: 18px; height: 18px;
    color: var(--fsb-ink-soft);
    transition: transform 0.22s ease;
    flex-shrink: 0;
}
.fsb-section[open] > .fsb-section-head .fsb-section-chev {
    transform: rotate(180deg);
    color: var(--fsb-ink);
}

/* Body — the actual filter content (lists, toggle, price slider) */
.fsb-section-body {
    padding: 2px 2px 16px;
}

/* Toggle row (Available only) */
.fsb-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 2px 0;
    user-select: none;
}
.fsb-toggle-text {
    font-size: 0.88rem;
    color: var(--fsb-ink-soft);
}
.fsb-toggle-switch {
    position: relative;
    width: 38px; height: 22px;
    border-radius: 999px;
    background: rgba(10,22,40,0.18);
    flex-shrink: 0;
    transition: background 0.15s;
}
.fsb-toggle-knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(10,22,40,0.2);
    transition: transform 0.18s ease;
}
.fsb-toggle-switch.is-on { background: var(--fsb-ink); }
.fsb-toggle-switch.is-on .fsb-toggle-knob {
    transform: translateX(16px);
    background: var(--fsb-lime);
}

/* Checkbox lists (Dates, Teams, Cities, Venues, Rounds, Categories) */
.fsb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; flex-direction: column;
    gap: 2px;
}
/* Critical override — .fsb-list's `display: flex` above wins the cascade
   against the UA stylesheet's `[hidden] { display: none }`, which would
   leave the "Show less" overflow list visible no matter what JS does to
   `.hidden`. Restore the hide behaviour at higher specificity. */
.fsb-list[hidden] { display: none !important; }
.fsb-row { margin: 0; }
.fsb-check-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 4px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}
.fsb-check-row:hover { background: var(--fsb-paper); }
.fsb-check {
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--fsb-line);
    background: #fff;
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}
.fsb-check > i, .fsb-check > svg {
    width: 12px; height: 12px;
    color: transparent;
    stroke-width: 3;
    transition: color 0.12s;
}
.fsb-row.is-on .fsb-check {
    background: var(--fsb-lime);
    border-color: var(--fsb-ink);
}
.fsb-row.is-on .fsb-check > i,
.fsb-row.is-on .fsb-check > svg {
    color: var(--fsb-ink);
}
.fsb-check-label {
    font-size: 0.88rem;
    color: var(--fsb-ink-soft);
    flex: 1;
    line-height: 1.35;
}
.fsb-row.is-on .fsb-check-label {
    color: var(--fsb-ink);
    font-weight: 600;
}
.fsb-check-count {
    font-size: 0.78rem;
    color: var(--fsb-ink-dim);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.fsb-row-trail {
    width: 14px; height: 14px;
    color: var(--fsb-ink-dim);
    flex-shrink: 0;
}

/* "Show all" / "Show less" expander */
.fsb-show-all {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px;
    padding: 6px 4px;
    background: transparent;
    border: 0;
    color: var(--fsb-ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border-radius: 4px;
}
.fsb-show-all:hover { color: var(--fsb-ink); }
.fsb-show-all i, .fsb-show-all svg { width: 13px; height: 13px; }

/* Price section — reuse the existing slider track but display the values
   as labeled MIN/MAX boxes underneath (matches the screenshot reference). */
.fsb-price { padding: 0; width: auto; }
.fsb-price-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.fsb-price-input {
    background: #fff;
    border: 1px solid var(--fsb-line);
    border-radius: 8px;
    padding: 6px 10px;
    display: flex; flex-direction: column;
    line-height: 1.1;
}
.fsb-price-input-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--fsb-ink-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.fsb-price-input-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--fsb-ink);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Drawer scrim — hidden on desktop, fades in when sidebar drawer opens. */
.filter-drawer-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,22,40,0.45);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.2s;
}
body.filter-drawer-open .filter-drawer-scrim {
    display: block;
    opacity: 1;
}

/* ========== END LISTING SHELL ============================================= */

/* Shared 3-col grid used by tournament tiles, participant tiles, city tiles,
   venue tiles, etc. Event cards (.event-card) span the full row inside this
   same grid via `grid-column: 1 / -1` (see EVENT CARDS below) so events list
   as horizontal rows while other tile cards stay in the 3-col layout. */
.cards-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-bottom: 32px;
}
.card {
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: 8px; padding: 16px; cursor: pointer;
}
.card:hover { border-color: var(--border-strong); }
.card-logo {
    width: 36px; height: 36px; border-radius: 6px;
    background: var(--bg-surface-hover); display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-subtle);
    margin-bottom: 12px; overflow: hidden; color: var(--text-muted);
}
.card-logo img { width: 100%; height: 100%; object-fit: contain; }
.card h3 { font-size: .9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.card .card-meta { font-size: .8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.card .card-price { margin-top: 8px; font-size: .9rem; font-weight: 600; color: var(--text-primary); }
.card .card-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px;
    border: 1px solid var(--border-subtle); font-size: .7rem; font-weight: 500;
    margin-bottom: 8px; color: var(--text-secondary); background: var(--bg-surface-hover);
}

.badge-confirmed { background: #edfcf4; color: #166548; border-color: #a8e6c7; }
.badge-pending { background: #fef9ec; color: #7c6520; border-color: #f0d890; }
.badge-cancelled { background: #fdf0f0; color: #983b3b; border-color: #f5c4c4; }
.badge-vip { background: #edf5fd; color: #2e5a8a; border-color: #b8d6f0; }
.badge-instant { background: #edfcf4; color: #166548; border-color: #a8e6c7; }

/* ========== ALPHABETICAL INDEX (countries / cities directory) ========== */
.alpha-index {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 24px;
    overflow: hidden;          /* contain wrapped rows; never overflow horizontally */
}
.alpha-section {
    padding: 12px 0;
}
.alpha-section + .alpha-section {
    border-top: 1px solid var(--border-subtle);
}
.alpha-letter {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.alpha-items {
    /* Flex-wrap so long names break to the next row instead of clipping. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 6px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.alpha-item {
    color: var(--text-primary);
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;        /* keep individual country names on one line */
}
.alpha-item:hover {
    color: var(--primary);
    background: var(--bg-surface-hover);
}
.alpha-sep {
    color: var(--border-strong);
    user-select: none;
    font-size: 0.85rem;
}

/* Tighter on mobile */
@media (max-width: 600px) {
    .alpha-index { padding: 14px 16px; }
    .alpha-letter { font-size: 1rem; margin-bottom: 6px; }
    .alpha-items { font-size: 0.85rem; column-gap: 2px; row-gap: 4px; }
    .alpha-item { padding: 2px 6px; }
}

/* ========== EVENT CARDS (horizontal row, premium aesthetic) ==========
   Forces full-row width inside .cards-grid so events list vertically while
   other tile components (tournament/team/city/venue cards) stay in the
   shared 3-col grid. Layout: date stub (left, 88px) | info (middle, 1fr) |
   price + CTA rail (right, auto).

   Palette is scoped local-token style here (--ec-* vars) so the rest of the
   site's primary green isn't touched. Same lime / ink / paper aesthetic as
   the premium event-detail and ticket cards. */
.event-card {
    --ec-ink: #0a1628;
    --ec-ink-soft: rgba(10,22,40,0.7);
    --ec-ink-dim: rgba(10,22,40,0.45);
    --ec-paper: #f4f4f0;
    --ec-paper-2: #ebebe5;
    --ec-lime: #00d97e;
    --ec-line: rgba(10,22,40,0.10);

    grid-column: 1 / -1;            /* span the full width of .cards-grid */
    display: grid;
    grid-template-columns: 116px 1fr auto;
    align-items: stretch;
    min-height: 116px;
    background: var(--ec-paper-2);
    border: 1px solid var(--ec-line);
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
    position: relative;
    text-decoration: none;
}
.event-card::before {
    /* Hidden lime left-edge accent that appears on hover — same pattern as
       the premium ticket cards on event-detail pages. */
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--ec-lime);
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1;
}
.event-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(10,22,40,0.08);
    border-color: var(--ec-ink-soft);
}
.event-card:hover::before { opacity: 1; }
.event-card:focus-visible {
    outline: 2px solid var(--ec-lime);
    outline-offset: 2px;
}

/* Date stub (left) — larger, more confident */
.ec-stub {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 18px 10px;
    background: var(--ec-paper);
    color: var(--ec-ink);
    border-right: 1px dashed var(--ec-line);
    line-height: 1;
    text-align: center;
}
.ec-stub-month {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.78;
}
.ec-stub-day {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 48px;
    line-height: 0.86;
    margin: 6px 0 4px;
    font-weight: 400;
    letter-spacing: 0.005em;
}
.ec-stub-year {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    opacity: 0.78;
}

/* Body (middle) — taller, more breathing room */
.ec-body {
    padding: 20px 24px;
    display: flex; flex-direction: column;
    gap: 10px;
    min-width: 0;
    justify-content: center;
}
.ec-name {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--ec-ink);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ec-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 0.88rem;
    color: var(--ec-ink-soft);
}
.ec-meta-item {
    display: inline-flex; align-items: center; gap: 6px;
    line-height: 1.35;
}
.ec-meta-item > i,
.ec-meta-item > svg {
    width: 14px; height: 14px;
    color: var(--ec-ink-dim);
    flex-shrink: 0;
}
.ec-tbc {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b25e02;
    background: #ffedd5;
    border: 1px solid #ffd8a8;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: help;
    margin-left: 4px;
}
.ec-tbc i, .ec-tbc svg { width: 11px !important; height: 11px !important; color: inherit !important; }
.ec-tags {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 2px;
}
.ec-tag {
    display: inline-flex; align-items: center;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ec-ink-soft);
    background: rgba(10,22,40,0.05);
    border: 1px solid var(--ec-line);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.ec-tag-tournament {
    background: rgba(0,217,126,0.18);
    border-color: rgba(10,22,40,0.18);
    color: var(--ec-ink);
}

/* Right rail (price + CTA) — taller and more prominent */
.ec-rail {
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: center;
    gap: 12px;
    padding: 20px 22px;
    border-left: 1px solid var(--ec-line);
    min-width: 210px;
    background: rgba(255,255,255,0.45);
}
.ec-price {
    display: flex; flex-direction: column; align-items: flex-end;
    text-align: right;
    line-height: 1.1;
}
.ec-price-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ec-ink-dim);
    margin-bottom: 4px;
}
.ec-price-label-check {
    font-weight: 600;
    letter-spacing: 0.06em;
}
.ec-price-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ec-ink);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}
.ec-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    background: var(--ec-ink);
    color: var(--ec-paper);
    border: 0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(10,22,40,0.15);
}
.ec-cta:hover {
    background: var(--ec-lime);
    color: var(--ec-ink);
    box-shadow: 0 6px 18px rgba(0,217,126,0.32);
}
.ec-cta:active { transform: scale(0.98); }
.ec-cta i, .ec-cta svg { width: 15px; height: 15px; }

/* Safety fallback for .tbc-badge — referenced from a handful of dead-code
   paths in the legacy standard event-detail render (unreachable since the
   premium fork now applies to every event). Kept so any future code that
   reaches those branches still renders the badge legibly. */
.tbc-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #b25e02; background: #ffedd5;
    border: 1px solid #ffd8a8;
    padding: 2px 7px; border-radius: 4px;
    margin-left: 4px;
}
.tbc-badge i, .tbc-badge svg { width: 11px; height: 11px; color: inherit; }

/* API HTML Content — styles for rich HTML returned by the SE365 API */
.api-html-content ul, .api-html-content ol {
    margin: 6px 0;
    padding-left: 20px;
}
.api-html-content li {
    margin-bottom: 4px;
    line-height: 1.5;
}
.api-html-content p {
    margin: 4px 0;
}
.api-html-content a {
    color: var(--primary);
    text-decoration: underline;
    word-break: break-all;
}
.api-html-content a:hover {
    opacity: 0.8;
}
.api-html-content strong, .api-html-content b {
    font-weight: 600;
}

.event-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
    padding: 3px 8px;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.event-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed var(--border-subtle);
    margin-top: auto;
}

.event-card-price-wrap {
    display: flex;
    flex-direction: column;
}

.price-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.price-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.event-card-action .btn {
    font-size: 0.78rem;
    padding: 5px 12px;
}

/* ========== EVENT DETAIL (Full-Width 3-Column Layout) ========== */
body.event-detail-active { overflow: hidden; }
body.event-detail-active .footer { display: none; }

.event-page-wrapper {
    display: flex;
    flex-direction: column;
    background: #fff;
    height: calc(100vh - 65px);
    overflow: hidden;
}
.event-page-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-subtle);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.event-page-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.event-page-header h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111;
    margin: 0;
    letter-spacing: -0.02em;
}
.event-page-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.event-page-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg-surface-hover); border: 1px solid var(--border-subtle);
    border-radius: 20px; padding: 4px 12px; font-size: .75rem;
    color: var(--text-secondary); font-weight: 500;
}
.event-page-tag.tag-price {
    color: var(--primary); border-color: var(--primary); background: rgba(0,217,126,0.08);
    font-weight: 600;
}
.event-page-header-actions {
    display: flex; gap: 8px; align-items: center;
}

/* Inline meta strip directly under the H1: date · time  |  venue, city, country.
   Replaces the former left sidebar (date/venue cards). Wraps gracefully if a
   long venue name pushes past the available width. */
.event-page-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.event-meta-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.event-meta-icon {
    width: 15px; height: 15px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.event-meta-text { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.event-meta-dot {
    color: var(--text-muted);
    margin: 0 2px;
}
.event-meta-sep {
    width: 1px;
    height: 14px;
    background: var(--border-strong);
    margin: 0 4px;
    display: inline-block;
}
.event-meta-location a {
    color: var(--text-secondary);
    font-weight: 500;
    transition: color .12s;
}
.event-meta-location a:hover { color: var(--primary); }
.event-meta-comma { color: var(--text-muted); margin: 0 2px 0 -2px; }
.header-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 8px 14px; font-size: .82rem; color: var(--text-secondary);
    cursor: pointer; font-family: inherit; font-weight: 500;
    transition: all 0.15s;
}
.header-action-btn:hover { background: var(--bg-surface-hover); border-color: var(--border-strong); color: var(--text-primary); }
.header-action-btn i { width: 16px; height: 16px; }

.event-page-content {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}
.event-sidebar {
    width: 260px;
    border-right: 1px solid var(--border-subtle);
    background: #fff;
    padding: 20px;
    flex-shrink: 0;
    overflow-y: auto;
}
.event-sidebar::-webkit-scrollbar { width: 4px; }
.event-sidebar::-webkit-scrollbar-track { background: transparent; }
.event-sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.event-tickets-panel {
    flex: 1;
    min-width: 340px;
    max-width: 540px;
    background: #fff;
    border-right: 1px solid var(--border-subtle);
    padding: 20px;
    overflow-y: auto;
}
.event-tickets-panel::-webkit-scrollbar { width: 4px; }
.event-tickets-panel::-webkit-scrollbar-track { background: transparent; }
.event-tickets-panel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.event-map-panel {
    flex: 1;
    background: var(--bg-base);
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.event-map-panel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
    cursor: default;
    transition: transform 0.15s ease;
    user-select: none;
    -webkit-user-drag: none;
}

/* Map Controls */
.map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}
.map-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--border-subtle);
    border-radius: 8px; cursor: pointer;
    color: var(--text-secondary); font-size: 18px;
    transition: all 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.map-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); border-color: var(--border-strong); }
.map-btn:active { transform: scale(0.95); }
.map-btn i { width: 18px; height: 18px; }

.map-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: 8px; color: var(--text-muted); padding: 24px;
}
.map-empty-state i { width: 32px; height: 32px; stroke-width: 1.5; }
.map-empty-state span { font-size: .85rem; font-weight: 500; }

/* Map fullscreen overlay */
.map-fullscreen-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.map-fullscreen-overlay.open { opacity: 1; pointer-events: auto; }
.map-fullscreen-overlay img {
    max-width: 90vw; max-height: 90vh;
    object-fit: contain; border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.map-fullscreen-close {
    position: absolute; top: 20px; right: 20px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px; cursor: pointer; color: #fff;
    transition: all 0.15s;
}
.map-fullscreen-close:hover { background: rgba(255,255,255,0.25); }
.map-fullscreen-close i { width: 20px; height: 20px; }

.info-section { margin-bottom: 24px; }
.info-section-title { font-size: .7rem; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.8px; }
.info-item-sm { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.info-item-sm .label { font-size: .75rem; color: var(--text-muted); font-weight: 500; }
.info-item-sm .value { font-size: .85rem; color: var(--text-primary); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.info-item-sm .value a { color: var(--text-primary); }
.info-item-sm .value a:hover { color: var(--primary); }
.info-item-sm .value i { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

/* ========== SIDEBAR CARDS (Event Detail) ========== */
.sidebar-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.sidebar-card:hover { border-color: var(--border-strong); }
.sidebar-card-highlight {
    border-color: rgba(0,217,126,0.25);
    background: linear-gradient(135deg, rgba(0,217,126,0.03), rgba(91,181,213,0.03));
}
.sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-hover);
}
.sidebar-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar-card-icon i { width: 15px; height: 15px; color: var(--text-secondary); }
.sidebar-card-icon-accent {
    background: rgba(0,217,126,0.1);
    border-color: rgba(0,217,126,0.2);
}
.sidebar-card-icon-accent i { color: var(--primary); }
.sidebar-card-title {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.sidebar-card-body { padding: 14px; }

.sidebar-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: .85rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
}
.sidebar-detail-row i {
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.sidebar-detail-row + .sidebar-detail-row {
    border-top: 1px solid var(--border-subtle);
}
.sidebar-detail-row-link a {
    color: var(--text-primary);
    font-weight: 500;
    transition: color 0.15s;
}
.sidebar-detail-row-link a:hover { color: var(--primary); }
.sidebar-detail-note {
    font-size: .75rem;
    color: var(--text-muted);
    line-height: 1.5;
    padding: 4px 0 4px 23px;
}

/* Matchup (Home vs Away) — row layout with inline labels */
.matchup-strip { display: flex; flex-direction: column; }
.matchup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s;
}
.matchup-row:hover { background: var(--bg-surface-hover); }
.matchup-row + .matchup-row { border-top: 1px solid var(--border-subtle); }
.matchup-row-badge {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .65rem; font-weight: 800; color: #fff; letter-spacing: .5px;
}
.matchup-row-badge.home { background: var(--primary); }
.matchup-row-badge.away { background: var(--accent); }
.matchup-row-name {
    flex: 1; min-width: 0;
    font-size: .88rem; font-weight: 600; color: var(--text-primary);
    line-height: 1.3;
}
.matchup-row:hover .matchup-row-name { color: var(--primary); }
.matchup-row-label {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}
.matchup-row-label.home { background: #edfcf4; color: #166548; }
.matchup-row-label.away { background: #edf5fd; color: #2e5a8a; }
.sidebar-team-label {
    font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-muted); background: var(--bg-surface-hover);
    padding: 1px 6px; border-radius: 4px;
}

/* Availability Banner */
.sidebar-avail-banner {
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0faf5 0%, #e8f7f0 100%);
    border-radius: 11px;
}
.sidebar-avail-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-avail-count {
    font-size: 1.5rem; font-weight: 800; color: var(--primary); line-height: 1;
    flex-shrink: 0;
}
.sidebar-avail-text {
    font-size: .8rem; font-weight: 500; color: var(--text-secondary); line-height: 1.35;
}
.sidebar-avail-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,217,126,0.15);
}
.sidebar-avail-price-from {
    font-size: .72rem; font-weight: 500; color: var(--text-muted);
}
.sidebar-avail-price-val {
    font-size: 1.1rem; font-weight: 800; color: var(--primary); line-height: 1;
}

/* ========== EVENT DETAIL (Old fallback to be removed/replaced) ========== */
.event-detail-header {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 24px; margin-bottom: 24px;
}
.event-detail-header h1 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.02em; }
.event-info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px; margin-top: 16px;
}
.info-item .label { font-size: .75rem; color: var(--text-muted); margin-bottom: 2px; font-weight: 500; }
.info-item .value { font-size: .9rem; color: var(--text-primary); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.venue-map { margin-top: 16px; border-radius: 6px; overflow: hidden; max-width: 480px; border: 1px solid var(--border-subtle); }
.venue-map img { width: 100%; display: block; }

/* ========== TICKETS ========== */
.tickets-section { margin-top: 0; }
.ticket-card {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    background: var(--bg-surface);
}
.ticket-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(58, 166, 117, 0.1); }
.ticket-date {
    text-align: center;
    min-width: 52px; width: 52px;
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ticket-date .month { font-size: .8rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.ticket-date .day { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; margin: 2px 0; }
.ticket-date .year { font-size: .75rem; color: var(--text-muted); }
.ticket-info { flex: 1; min-width: 0; }
.ticket-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.day-tag { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 4px; font-size: .7rem; font-weight: 600; gap: 4px; }
.day-tag.saturday { background: #fef9ec; color: #7c6520; }
.day-tag.sunday { background: #edfcf4; color: #166548; }
.day-tag.friday { background: #edf5fd; color: #2e5a8a; }
.day-tag.sat-sun { background: var(--bg-surface-hover); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.category-name { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; line-height: 1.3; }
.ticket-package-details { margin: 4px 0 6px 0; padding-left: 0; font-size: .73rem; color: var(--text-muted); line-height: 1.5; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ticket-package-details li { position: relative; padding-left: 12px; }
.ticket-package-details li::before { content: ''; position: absolute; left: 0; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.ticket-price-area { text-align: right; flex-shrink: 0; min-width: 90px; }
.ticket-price-area .from-text { font-size: .75rem; color: var(--text-muted); font-weight: 500; }
.ticket-price-area .price { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; margin-bottom: 2px; }
.ticket-price-area .onwards { font-size: .7rem; color: var(--text-muted); }

/* Remove old ticket-header classes etc. that are no longer used */
.ticket-header, .ticket-price-box, .ticket-meta, .ticket-restrictions, .ticket-notes, .ticket-actions, .ticket-delivery { display: none; }

/* ========== BUTTONS ========== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 7px 14px; border-radius: 6px; border: 1px solid transparent;
    font-weight: 500; font-size: .85rem; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #247f5b; border-color: #247f5b; }
.btn-outline { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--text-primary); }
.btn-outline:hover { background: var(--bg-surface-hover); border-color: var(--border-strong); }
.btn-text { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-text:hover { color: var(--text-primary); background: var(--bg-surface-hover); }
.btn-sm { padding: 5px 10px; font-size: .8rem; }
.btn-lg { padding: 9px 18px; font-size: .9rem; }

/* ========== TABS ========== */
.tabs { display: flex; gap: 20px; margin-bottom: 20px; overflow-x: auto; border-bottom: 1px solid var(--border-subtle); }
.tab {
    padding: 8px 0; border: none; border-bottom: 2px solid transparent;
    background: transparent; color: var(--text-secondary);
    font-size: .85rem; font-weight: 500; cursor: pointer; white-space: nowrap; border-radius: 0;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }

/* ========== FILTERS ========== */
.filters-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; align-items: flex-end; }
.filter-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filter-field label { font-size: .7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.filters-bar select, .filter-field input {
    padding: 8px 10px; border-radius: 6px;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    color: var(--text-primary); font-size: .85rem; font-family: inherit; font-weight: 500;
    min-width: 140px; min-height: 38px;
}
.filter-field input::placeholder { color: var(--text-muted); font-weight: 400; }
.filters-bar select:focus, .filter-field input:focus { outline: none; border-color: var(--primary); }
.filters-bar label { font-size: .85rem; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; font-weight: 500; cursor: pointer; }

/* ========== PRO FILTER BAR ========== */
.filter-bar-pro {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    background: var(--bg-surface-hover);
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 24px;
}
.filter-bar-pro .filter-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: .9rem;
    margin-right: 4px;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: .85rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    min-width: 170px;
    min-height: 42px;
    justify-content: space-between;
    user-select: none;
    transition: border-color .15s, box-shadow .15s;
}
.filter-pill:hover { border-color: var(--primary); }
.filter-pill .pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}
.filter-pill .pill-arrow {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    transition: transform .15s;
}
.filter-pill .pill-arrow svg { width: 16px; height: 16px; }
.filter-pill.has-value { border-color: var(--primary); color: var(--primary); }
.filter-dropdown.open .filter-pill { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,217,126,0.12); }
.filter-dropdown.open .filter-pill .pill-arrow { transform: rotate(180deg); }

.filter-pill-input {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0 14px;
    min-width: 230px;
    min-height: 42px;
    transition: border-color .15s, box-shadow .15s;
    gap: 6px;
}
.filter-pill-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,217,126,0.12);
}
.filter-pill-icon { color: var(--text-muted); display: inline-flex; }
.filter-pill-icon svg { width: 16px; height: 16px; }
.filter-pill-input input {
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 0;
    color: var(--text-primary);
    font-size: .85rem;
    font-family: inherit;
    flex: 1;
    min-width: 0;
}
.filter-pill-input input::placeholder { color: var(--text-muted); }
.filter-pill-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.filter-pill-clear:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

/* Refinement group — wraps price-range slider + sort (or Clear) into a
   single right-aligned cluster so they NEVER split across rows. When the
   filter row is too narrow to keep everything on one line, this whole
   group wraps as a unit to the next line, still right-aligned. */
.filter-bar-refine {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    flex-wrap: nowrap;
    padding: 4px 6px 4px 14px;
    border-left: 1px solid rgba(10,22,40,0.08);
}

/* Price-range slider — dual-thumb client-side filter that sits INLINE with
   the rest of the filter-bar-pro pills (matches the SE365 provider layout).
   Compact fixed width so it doesn't push other pills/sort to a new row,
   with the label tucked above the track and live min/max values below. */
.filter-price-range {
    display: flex; flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    width: 200px;
    padding: 0;
    align-self: center;
}
.filter-price-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}
.price-slider {
    position: relative;
    height: 22px;
    margin: 2px 4px 0;
}
.price-slider-track {
    position: absolute;
    top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    height: 4px;
    background: rgba(10,22,40,0.10);
    border-radius: 999px;
}
.price-slider-fill {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    height: 4px;
    background: #0a1628;
    border-radius: 999px;
    pointer-events: none;
}
.price-slider-input {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 22px;
    background: transparent;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    pointer-events: none;          /* track is non-interactive; thumbs re-enable */
    margin: 0;
}
.price-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0a1628;
    cursor: grab;
    box-shadow: 0 2px 4px rgba(10,22,40,0.18);
    transition: transform 0.1s, box-shadow 0.15s;
}
.price-slider-input::-webkit-slider-thumb:hover { transform: scale(1.12); }
.price-slider-input::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.18);
    box-shadow: 0 0 0 5px rgba(0,217,126,0.35);
}
.price-slider-input::-moz-range-thumb {
    pointer-events: auto;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0a1628;
    cursor: grab;
    box-shadow: 0 2px 4px rgba(10,22,40,0.18);
    transition: transform 0.1s, box-shadow 0.15s;
}
.price-slider-input::-moz-range-thumb:active {
    cursor: grabbing;
    box-shadow: 0 0 0 5px rgba(0,217,126,0.35);
}
.price-slider-input::-moz-range-track { background: transparent; }
.price-slider-vals {
    display: flex; justify-content: space-between;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
    line-height: 1.2;
}

.filter-clear-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 11px 28px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: auto;
    min-height: 42px;
    transition: background .15s;
}
.filter-clear-btn:hover { background: var(--primary-hover); }

/* Dropdown panel ------------------------------------------------ */
.filter-dropdown { position: relative; }
.filter-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15, 44, 94, 0.12);
    padding: 8px 0;
    min-width: 220px;
    z-index: 200;
    display: none;
}
.filter-dropdown.open .filter-dropdown-panel { display: block; }
.filter-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: .85rem;
    cursor: pointer;
}
.filter-dropdown-item:hover { background: var(--bg-surface-hover); }
.filter-dropdown-item.selected { color: var(--primary); font-weight: 600; }
.filter-dropdown-item .checkmark { color: var(--primary); display: none; }
.filter-dropdown-item .checkmark svg { width: 16px; height: 16px; }
.filter-dropdown-item.selected .checkmark { display: inline-flex; }
.filter-dropdown-item svg { width: 16px; height: 16px; color: var(--text-muted); }
.filter-dropdown-item.selected svg { color: var(--primary); }

/* Tournament filter bar — extras shared across the page only.
   The base .filter-bar-pro / .filter-pill / .filter-dropdown rules already
   handle layout, hover, mobile stacking, and dropdown behavior. These rules
   only add the new affordances introduced for tournament filtering. */
.tournament-filter-bar { row-gap: 10px; }
.tournament-filter-bar .filter-pill { min-width: 200px; }
.filter-pill .filter-pill-icon-inline {
    width: 16px; height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-right: 6px;
    vertical-align: -3px;
}
.filter-pill.has-value .filter-pill-icon-inline { color: var(--primary); }

/* Long, scrollable dropdowns (cities, teams) */
.filter-dropdown-panel--scroll {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.filter-dropdown-panel--scroll::-webkit-scrollbar { width: 8px; }
.filter-dropdown-panel--scroll::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 4px;
}
.filter-dropdown-panel--scroll::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* Sort dropdown anchored to the right edge so it doesn't overflow viewport */
.filter-dropdown.filter-dropdown--right { margin-left: auto; }
.filter-dropdown--right .filter-dropdown-panel { left: auto; right: 0; }
/* When a sort dropdown lives inside the refinement group (right-edge of the
   row), open its panel toward the right edge so it doesn't overflow the
   container — same as the legacy --right modifier did when applied directly. */
.filter-bar-refine .filter-dropdown .filter-dropdown-panel,
.filter-dropdown-panel--align-right { left: auto; right: 0; }

/* ==== Multi-select dropdown (cities, teams) ==== */
/* The panel is a list of rows, each with a real checkbox square on the left.
   Clicking a row toggles selection without closing the panel. */
.filter-dropdown-panel--multi { padding: 6px 0; }

.filter-dropdown-item--check {
    justify-content: flex-start;            /* checkbox on the left, label after */
    gap: 10px;
    padding: 9px 14px;
}
.filter-dropdown-item--check .filter-dropdown-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The checkbox square. Empty by default; brand-green fill + tick when selected. */
.filter-checkbox {
    width: 18px; height: 18px;
    flex-shrink: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    background: var(--bg-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s, transform .08s;
}
.filter-dropdown-item--check:hover .filter-checkbox {
    border-color: var(--primary);
}
.filter-checkbox .filter-checkbox-tick {
    width: 13px; height: 13px;
    color: #fff;
    opacity: 0;
    transition: opacity .12s;
}
/* Override the generic .filter-dropdown-item svg color rule so the tick stays
   white (visible) on the green-filled square when selected. */
.filter-dropdown-item--check .filter-checkbox svg { color: #fff; }
.filter-dropdown-item--check.selected .filter-checkbox {
    background: var(--primary);
    border-color: var(--primary);
}
.filter-dropdown-item--check.selected .filter-checkbox-tick {
    opacity: 1;
}
.filter-dropdown-item--check.selected {
    color: var(--text-primary);             /* don't recolor the label — the checkbox already signals state */
    font-weight: 500;
}
.filter-dropdown-item--check:active .filter-checkbox { transform: scale(0.92); }

/* "Clear (N)" link inside the panel — appears only when 1+ items are selected.
   Sits at the very top of the list, above the rows. */
.filter-dropdown-clear {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 10px;
    margin: 0 6px 4px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: .78rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    text-transform: none;
}
.filter-dropdown-clear:hover { color: var(--primary-hover, var(--primary)); }
.filter-dropdown-clear svg { width: 14px; height: 14px; }

/* Available-only toggle — pill that visibly looks like a switch */
.filter-pill-toggle {
    min-width: 0 !important;
    gap: 10px;
}
.filter-pill-toggle .pill-toggle-dot {
    width: 30px; height: 18px;
    border-radius: 999px;
    background: var(--border-strong);
    position: relative;
    transition: background .15s;
    flex-shrink: 0;
}
.filter-pill-toggle .pill-toggle-dot::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: left .15s;
}
.filter-pill-toggle.is-on .pill-toggle-dot { background: var(--primary); }
.filter-pill-toggle.is-on .pill-toggle-dot::after { left: 14px; }

/* Active filter chips — small pills with × that remove the filter */
.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 16px;
}
.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: rgba(91,181,213,0.08);
    color: var(--text-primary);
    font-size: .78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.active-filter-chip:hover {
    background: rgba(91,181,213,0.16);
    border-color: var(--primary);
}
.active-filter-chip .afc-prefix {
    color: var(--text-muted);
    font-weight: 600;
}
.active-filter-chip .afc-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    margin-left: 2px;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1;
}
.active-filter-chip:hover .afc-x {
    background: var(--primary);
    color: #fff;
}
.active-filter-reset {
    margin-left: 4px;
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: .8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 999px;
}
.active-filter-reset:hover {
    background: rgba(0,217,126,0.10);
}

/* Result count line above the grid */
.result-count {
    color: var(--text-secondary);
    font-size: .85rem;
    margin: 0 2px 14px;
}
.result-count strong {
    color: var(--text-primary);
    font-weight: 600;
}
.result-count .rc-dim {
    color: var(--text-muted);
    margin-left: 2px;
}

@media (max-width: 768px) {
    .filter-dropdown.filter-dropdown--right { margin-left: 0; }

    /* Refinement group — when the page narrows, drop the left border and
       margin-auto so the group flows naturally beneath the filter pills. */
    .filter-bar-refine {
        margin-left: 0;
        border-left: 0;
        padding: 0;
        gap: 12px;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .filter-bar-refine .filter-price-range { flex: 1 1 100%; width: auto; }
    .filter-bar-refine .filter-dropdown { width: 100%; }
    .filter-bar-refine .filter-pill { width: 100%; justify-content: space-between; }

    .filter-pill-toggle { width: 100%; justify-content: space-between; }

    .active-filter-chips { gap: 6px; }
    .active-filter-chip { font-size: .75rem; }
}

/* Calendar widget ----------------------------------------------- */
.calendar-widget {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 44, 94, 0.18);
    padding: 16px;
    z-index: 250;
    width: 320px;
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.calendar-nav-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1;
    height: 28px;
}
.calendar-nav-btn:hover { background: var(--bg-surface-hover); border-color: var(--primary); }
.calendar-title { font-weight: 600; color: var(--text-primary); font-size: .95rem; }
.calendar-range-pills {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}
.calendar-range-pill {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .8rem;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.calendar-range-pill.active { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.calendar-range-pill.empty { color: var(--text-muted); }
.calendar-range-sep { color: var(--text-muted); }
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.calendar-day-name {
    text-align: center;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    padding: 6px 0;
    text-transform: uppercase;
}
.calendar-day {
    text-align: center;
    padding: 8px 0;
    font-size: .82rem;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 50%;
    user-select: none;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calendar-day:hover:not(.other-month) { background: var(--bg-surface-hover); }
.calendar-day.other-month { color: var(--text-muted); opacity: .35; cursor: default; pointer-events: none; }
.calendar-day.in-range { background: rgba(58, 166, 117, 0.15); border-radius: 0; }
.calendar-day.range-start, .calendar-day.range-end {
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 600;
}
.calendar-day.range-start.in-range { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }
.calendar-day.range-end.in-range { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }
.calendar-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}
.cal-btn {
    flex: 1;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .85rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
}
.cal-btn:hover { background: var(--bg-surface-hover); }
.cal-btn.primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.cal-btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* ========== PAGINATION ========== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 32px 0; flex-wrap: wrap; }
.pagination button {
    padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(10,22,40,0.14);
    background: #fff; color: rgba(10,22,40,0.7);
    font-size: .82rem; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.pagination button:hover:not(:disabled) {
    background: #0a1628; border-color: #0a1628; color: #fff;
    transform: translateY(-1px);
}
.pagination button:disabled { opacity: .35; cursor: not-allowed; }
.pagination .page-info {
    font-size: .82rem; color: rgba(10,22,40,0.55);
    letter-spacing: 0.02em;
    margin: 0 8px;
    font-variant-numeric: tabular-nums;
}

/* ========== MODAL ========== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4);
    display: none; align-items: center; justify-content: center;
    z-index: 1100; padding: 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.modal-overlay.open { display: flex; }
.modal {
    background: var(--bg-surface); border-radius: 8px;
    width: 100%; max-width: 540px; max-height: 90vh;
    overflow-y: auto; border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.modal-header h2 { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.modal-close {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 4px; border-radius: 4px;
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: 20px; }

/* ========== FORM ========== */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: .8rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 9px 12px; border-radius: 8px;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    color: var(--text-primary); font-size: .88rem; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,217,126,0.1);
}
.form-group input:hover, .form-group select:hover, .form-group textarea:hover {
    border-color: var(--border-strong);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 24px 0; }
.form-section-title { font-size: .8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; margin-top: 4px; text-transform: none; letter-spacing: 0; }

/* ========== ORDER FORM — Redesigned ========== */
/* Summary banner */
.order-summary-banner {
    background: var(--bg-surface-hover); border: 1px solid var(--border-subtle);
    border-radius: 10px; padding: 16px; margin-bottom: 20px;
}
.order-summary-event {
    font-size: .82rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 2px;
}
.order-summary-ticket {
    font-size: .75rem; color: var(--text-secondary); margin-bottom: 8px;
}
/* Mandatory supplier-provided category description, shown in the order modal summary. */
.order-summary-cat-desc {
    font-size: .72rem; color: var(--text-secondary); line-height: 1.5;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: 6px; padding: 8px 10px; margin-bottom: 12px;
}
.order-summary-cat-desc p { margin: 0 0 4px; }
.order-summary-cat-desc p:last-child { margin-bottom: 0; }

/* ========== BOOKING PROTECTION (Insurance) Cards ========== */
.ins-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ins-opt {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}
.ins-opt:hover {
    border-color: var(--border-strong);
    background: var(--bg-surface-hover);
}
/* Selected via :has() (Chrome 105+, Safari 15.4+, Firefox 121+) … */
.ins-opt:has(input[type="radio"]:checked),
/* … and via .is-selected class as a defensive fallback for older WebViews. */
.ins-opt.is-selected {
    border-color: var(--primary);
    background: rgba(58, 166, 117, 0.06);
    box-shadow: 0 0 0 1px var(--primary);
}
/* Don't apply the hover restyle on top of the selected style. */
.ins-opt:has(input[type="radio"]:checked):hover,
.ins-opt.is-selected:hover {
    background: rgba(58, 166, 117, 0.06);
    border-color: var(--primary);
}
.ins-opt input[type="radio"] {
    flex: none;
    margin: 3px 0 0;
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}
.ins-opt-body {
    flex: 1;
    min-width: 0;
}
.ins-opt-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.3;
}
.ins-opt-tagline {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.ins-opt-benefits {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.ins-opt-benefits li {
    padding-left: 14px;
    position: relative;
    margin-top: 4px;
}
.ins-opt-benefits li:first-child { margin-top: 0; }
.ins-opt-benefits li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.8;
}
.ins-opt-price {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.3;
    flex: none;
    white-space: nowrap;
    align-self: center;
}
/* Selected price shifts to brand color for clear feedback. */
.ins-opt:has(input[type="radio"]:checked) .ins-opt-price,
.ins-opt.is-selected .ins-opt-price {
    color: var(--primary);
}
/* The "Free / No protection" row — neutral pricing color even when selected. */
.ins-opt[data-free="1"] .ins-opt-price,
.ins-opt[data-free="1"]:has(input[type="radio"]:checked) .ins-opt-price,
.ins-opt[data-free="1"].is-selected .ins-opt-price {
    color: var(--text-secondary);
    font-weight: 500;
}
/* Mobile tightening */
@media (max-width: 600px) {
    .ins-opt { padding: 12px 14px; gap: 12px; }
    .ins-opt-title { font-size: 0.9rem; }
    .ins-opt-tagline { font-size: 0.75rem; }
    .ins-opt-benefits { font-size: 0.78rem; }
    .ins-opt-price { font-size: 0.9rem; }
}
.order-summary-breakdown {
    border-top: 1px solid var(--border-subtle); padding-top: 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.order-summary-line {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .78rem; color: var(--text-secondary);
}
.order-summary-total {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .9rem; font-weight: 700; color: var(--text-primary);
    padding-top: 8px; margin-top: 4px;
    border-top: 1px dashed var(--border-subtle);
}
.order-summary-total span:last-child { color: var(--primary); }

/* Form card sections */
.form-card {
    border: 1px solid var(--border-subtle); border-radius: 10px;
    margin-bottom: 16px; overflow: hidden;
}
.form-card-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--bg-surface-hover);
    font-size: .78rem; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border-subtle);
}
.form-card-icon { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.form-card-body { padding: 14px; }
.form-card-body .form-group:last-child { margin-bottom: 0; }
.form-card-sub-block {
    margin-top: 12px; padding: 12px;
    background: var(--bg-surface-hover); border-radius: 8px;
    border: 1px solid var(--border-subtle);
}
.form-card-sub-title {
    display: flex; align-items: center; gap: 6px;
    font-size: .75rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 10px;
}

/* Alert box */
.form-alert-box {
    background: #fef9ec; border: 1px solid #f0d890; border-radius: 10px;
    padding: 14px 16px; margin-bottom: 16px;
}
.form-alert-header {
    display: flex; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 700; color: #7c6520; margin-bottom: 8px;
}
.form-alert-body {
    font-size: .8rem; color: #5a4a18; line-height: 1.55; margin-bottom: 10px;
}
.form-alert-confirm {
    display: flex; align-items: flex-start; gap: 8px;
    cursor: pointer; font-size: .8rem; color: #5a4a18; font-weight: 500;
}
.form-alert-confirm input {
    accent-color: var(--primary); width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0;
}

/* Static delivery display (single method) */
.delivery-static {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--bg-surface-hover); border: 1px solid var(--border-subtle);
    border-radius: 8px;
}
.delivery-static-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.delivery-static-icon i { width: 18px; height: 18px; color: var(--text-secondary); }
.delivery-static-info { flex: 1; min-width: 0; }
.delivery-static-name { font-size: .85rem; font-weight: 600; color: var(--text-primary); }
.delivery-static-price { font-size: .75rem; font-weight: 500; color: var(--primary); margin-top: 1px; }

/* Custom select wrapper */
.custom-select-wrap {
    position: relative;
    display: flex;
}
.custom-select-wrap select {
    width: 100%;
    padding: 10px 44px 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.4;
}
.custom-select-wrap select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,217,126,0.12);
}
.custom-select-wrap select:hover { border-color: var(--border-strong); }
.custom-select-wrap select option {
    padding: 10px 12px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-surface);
}
.custom-select-wrap select option:checked {
    background: rgba(0,217,126,0.1);
    color: var(--primary);
    font-weight: 600;
}
.custom-select-arrow {
    position: absolute;
    right: 1px; top: 1px; bottom: 1px;
    width: 38px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    color: var(--text-muted);
    background: var(--bg-surface-hover);
    border-left: 1px solid var(--border-subtle);
    border-radius: 0 7px 7px 0;
    transition: color 0.15s;
}
.custom-select-wrap select:focus + .custom-select-arrow { color: var(--primary); }
.custom-select-wrap select:hover + .custom-select-arrow { color: var(--text-secondary); }

/* Submit button */
.order-submit-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 12px 20px; margin-top: 16px;
    border: none; border-radius: 10px; cursor: pointer;
    background: var(--primary); color: #fff;
    font-size: .92rem; font-weight: 700; font-family: inherit;
    transition: background 0.15s;
}
.order-submit-btn:hover { background: var(--primary-hover); }
.order-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ========== BREADCRUMB ========== */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb .sep { color: var(--text-muted); font-size: .75rem; }

/* ========== LOADING ========== */
.loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 60px 0; color: var(--text-muted); font-size: .85rem; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--border-subtle); border-top-color: var(--text-secondary); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== SCROLL TO TOP ========== */
.scroll-top-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s, background 0.15s, color 0.15s;
}
.scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.scroll-top-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ========== TOAST (polished) ========== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100vw - 32px);
    pointer-events: none; /* container ignores clicks; individual toasts re-enable */
}
.toast {
    --tt-accent: #5a6a82;
    --tt-accent-soft: rgba(90, 106, 130, 0.12);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
    width: 360px;
    max-width: 100%;
    padding: 12px 14px 14px;
    background: #fff;
    color: #1a2030;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow:
        0 10px 30px -8px rgba(15, 23, 42, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.06);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    pointer-events: auto;
    overflow: hidden;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.2s ease;
}
.toast.toast--in { transform: translateX(0); opacity: 1; }
.toast.toast--out { transform: translateX(120%); opacity: 0; }

.toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--tt-accent-soft);
    color: var(--tt-accent);
    flex-shrink: 0;
}
.toast-icon svg { width: 18px; height: 18px; }

.toast-body {
    color: #1a2030;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.toast-close {
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(26, 32, 48, 0.4);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s, color 0.15s;
    align-self: start;
    margin-top: -2px;
}
.toast-close:hover { background: rgba(15, 23, 42, 0.06); color: #1a2030; }
.toast-close:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 1px; }

.toast-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--tt-accent);
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform linear;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Per-type accent palette */
.toast-success {
    --tt-accent: #00a868;
    --tt-accent-soft: rgba(0, 168, 104, 0.12);
}
.toast-error {
    --tt-accent: #e23a3a;
    --tt-accent-soft: rgba(226, 58, 58, 0.12);
}
.toast-warning {
    --tt-accent: #d6932a;
    --tt-accent-soft: rgba(214, 147, 42, 0.14);
}
.toast-info {
    --tt-accent: #2563d6;
    --tt-accent-soft: rgba(37, 99, 214, 0.12);
}

@media (max-width: 480px) {
    .toast-container { left: 12px; right: 12px; bottom: 12px; }
    .toast { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity 0.15s ease; transform: none; }
    .toast.toast--in { transform: none; }
    .toast.toast--out { transform: none; }
    .toast-progress { transition-duration: 0ms !important; }
}

/* ========== EMPTY STATE ========== */
.empty-state { text-align: center; padding: 60px 20px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface); }
.empty-state .icon { margin-bottom: 12px; color: var(--text-muted); display: inline-flex; }
.empty-state .icon .lucide-icon { width: 20px; height: 20px; }
.empty-state h3 { font-size: .9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.empty-state p { font-size: .85rem; color: var(--text-secondary); }

/* ========== BACK BUTTON ========== */
.back-btn {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--text-secondary); font-size: .85rem; font-weight: 500;
    margin-bottom: 20px; cursor: pointer; background: none; border: none;
}
.back-btn:hover { color: var(--text-primary); }

/* ========== FOOTER ========== */
.footer {
    border-top: 1px solid var(--border-subtle);
    margin-top: 80px;
    background: var(--bg-surface);
    padding-top: 8px;
    position: relative;
}
/* Subtle accent bar at the very top — bridges the page to the footer
   with a hint of pitch green for brand continuity. */
.footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    opacity: 0.35;
}
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 56px 40px 36px; }
.footer-top {
    display: flex; justify-content: space-between; gap: 64px; margin-bottom: 56px;
    flex-wrap: wrap;
}
.footer-brand { flex: 0 0 340px; }
.footer-logo {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 1.18rem; font-weight: 700; color: var(--text-primary);
    text-decoration: none; margin-bottom: 18px;
    letter-spacing: -0.015em;
    transition: opacity 0.15s;
}
.footer-logo:hover { color: var(--text-primary); opacity: 0.88; }
.footer-logo-img { height: 32px; width: auto; }
.footer-tagline {
    font-size: .92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 18px;
    max-width: 340px;
}
.footer-links { display: flex; gap: 72px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; min-width: 140px; }
.footer-col h4 {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 18px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.footer-col a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .9rem;
    color: var(--text-secondary);
    padding: 6px 0;
    text-decoration: none;
    transition: color 0.15s, transform 0.15s;
    font-weight: 500;
    width: fit-content;
}
.footer-col a:hover {
    color: var(--primary);
    transform: translateX(2px);
}
.footer-legal {
    padding: 24px 0;
    border-top: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; gap: 14px;
}
.footer-legal-p {
    margin: 0;
    font-size: .78rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 1000px;
}
.footer-legal-disclaimer strong { color: var(--text-secondary); font-weight: 600; }
.footer-legal-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--border-subtle);
    transition: color 0.15s, border-color 0.15s;
}
.footer-legal-link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}
.footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    font-size: .78rem; color: var(--text-muted);
    padding-top: 24px; border-top: 1px solid var(--border-subtle);
    gap: 16px;
}
.footer-bottom-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: 0.01em; }
.footer-bottom-right { display: flex; align-items: center; gap: 28px; }
.footer-bottom a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
    font-weight: 500;
    position: relative;
}
.footer-bottom a:hover { color: var(--primary); }
.footer-sep { color: var(--border-subtle); margin: 0 2px; }

/* ========== QUICK LINKS (Sports Grid) ==========
   Minimal text chips — no dot, no shadow, no lift. Just a tight border
   that darkens on hover. Reads like a navigation strip, not a button row. */
.sport-grid {
    display: flex; flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 40px;
}
.sport-card {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    cursor: pointer; text-decoration: none;
    font-size: .82rem; font-weight: 500;
    color: var(--text-secondary);
    display: inline-flex; align-items: center;
    transition: border-color 0.15s, color 0.15s;
    letter-spacing: 0.005em;
}
.sport-card:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* ========== ORDER STATUS ========== */
.order-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 20px; margin-bottom: 12px; }
.order-card:hover { border-color: var(--border-strong); }
.order-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.order-header h3 { font-size: .95rem; font-weight: 600; color: var(--text-primary); }
.order-details { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.order-detail-item .label { font-size: .7rem; font-weight: 500; color: var(--text-muted); margin-bottom: 2px; }
.order-detail-item .value { font-size: .85rem; color: var(--text-primary); font-weight: 500; }

/* ========== SEARCH RESULTS TITLE ========== */
.search-results-title { font-size: 1.8rem; }

/* ========== PREMIUM LANDING (custom event pages) ==========
   Stadium-ticket aesthetic adapted from miscellaneous/Stadium Ticket Page.html.
   Palette + typography are scoped to .premium-page so nothing leaks into the
   standard event flow. Applied to the events listed in PREMIUM_EVENTS in app.js.
   Layout: image hero → trust strip → 2-col (tickets + sticky venue-map rail)
   → included strip → FAQ → bottom CTA. */
.premium-page {
    /* Inspo palette — ink / lime / paper / terra */
    --ink: #0a1628;
    --ink-2: #11203a;
    --ink-soft: rgba(10,22,40,0.7);
    --ink-dim: rgba(10,22,40,0.45);
    --paper: #f4f4f0;
    --paper-2: #ebebe5;
    --paper-dim: rgba(10,22,40,0.18);
    --lime: #00d97e;
    --lime-deep: #00b369;
    --terra: #ff3b30;
    --line: rgba(10,22,40,0.12);
    --line-2: rgba(10,22,40,0.06);
    --line-light: rgba(244,244,240,0.12);
    --display-font: 'Bebas Neue', Impact, sans-serif;
    --mono-font: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

    background: var(--paper);
    background-image: radial-gradient(circle at 1px 1px, rgba(10,22,40,0.06) 1px, transparent 0);
    background-size: 4px 4px;
    min-height: 100vh;
    color: var(--ink);
}
.premium-page .mono {
    font-family: var(--mono-font);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* ========== HERO ========== */
.premium-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--ink);
    background-image:
        linear-gradient(180deg, rgba(10,22,40,0.55) 0%, rgba(10,22,40,0.78) 55%, var(--ink) 100%),
        var(--hero-img, none);
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    color: var(--paper);
    padding: 96px 32px 0;
    border-bottom: 1px solid var(--line-light);
}
/* No-image hero — keep it intentional: subtle radial accent + the same
   diagonal-line texture below give it presence instead of looking flat. */
.premium-hero[data-no-image] {
    background-image:
        radial-gradient(ellipse 900px 480px at 20% 10%, rgba(0,217,126,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 700px 400px at 90% 80%, rgba(0,217,126,0.05) 0%, transparent 60%),
        linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
}

/* Faint diagonal-line texture across the hero for the editorial feel */
.premium-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: repeating-linear-gradient(135deg, transparent 0 36px, rgba(244,244,240,0.025) 36px 37px);
    pointer-events: none;
}
.premium-hero > * { position: relative; z-index: 1; }

/* Back chip — light-on-dark to read against the image */
.premium-back {
    position: absolute;
    top: 88px; left: 24px;
    z-index: 5;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(10,22,40,0.55);
    border: 1px solid rgba(244,244,240,0.18);
    color: var(--paper);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: transform .15s, background .15s, border-color .15s;
}
.premium-back:hover {
    transform: translateX(-2px);
    background: rgba(10,22,40,0.75);
    border-color: var(--lime);
    color: var(--lime);
}
.premium-back i, .premium-back svg { width: 16px; height: 16px; }

.premium-hero-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 0 56px;
}

/* On-sale + eyebrow pill row */
.premium-meta-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 28px;
}
.premium-chip-onsale {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--lime);
    color: var(--ink);
    font-family: var(--mono-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 6px 12px;
    border-radius: 100px;
}
.premium-chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink);
    animation: premium-pulse 1.4s ease-in-out infinite;
}
@keyframes premium-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.premium-chip-ghost {
    display: inline-flex; align-items: center;
    background: transparent;
    border: 1px solid rgba(244,244,240,0.22);
    color: rgba(244,244,240,0.88);
    font-family: var(--mono-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 100px;
}

/* Big display title */
.premium-title {
    font-family: var(--display-font);
    font-size: clamp(2.4rem, 5.2vw, 5rem);
    line-height: 0.95;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: var(--paper);
    margin: 0 0 16px;
    max-width: 1100px;
    text-wrap: balance;
}
.premium-tagline {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.45;
    color: rgba(244,244,240,0.78);
    max-width: 720px;
    margin: 0 0 28px;
    font-weight: 400;
}

/* Quick info chips below tagline */
.premium-quickchips {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.premium-quickchip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(244,244,240,0.07);
    border: 1px solid rgba(244,244,240,0.14);
    border-radius: 100px;
    font-size: .82rem;
    color: var(--paper);
    backdrop-filter: blur(4px);
}
.premium-quickchip i, .premium-quickchip svg {
    width: 15px; height: 15px;
    color: var(--lime);
    flex-shrink: 0;
}

/* Hero stats strip — pinned to the hero bottom, full-bleed grid */
.premium-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 56px -32px 0;
    border-top: 1px solid var(--line-light);
    background: rgba(10,22,40,0.35);
}
.premium-stat {
    padding: 22px 28px;
    display: flex; flex-direction: column; gap: 6px;
    border-right: 1px solid var(--line-light);
    position: relative;
}
.premium-stat:last-child { border-right: 0; }
.premium-stat.is-highlight { background: rgba(0,217,126,0.05); }
.premium-stat.is-highlight::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--lime);
}
.premium-stat-l {
    font-size: 9px;
    color: rgba(244,244,240,0.5);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}
.premium-stat-v {
    font-size: 15px;
    color: var(--paper);
    font-weight: 500;
    line-height: 1.25;
}
.premium-stat-v.mono { font-family: var(--mono-font); font-size: 14px; }
.premium-stat-sub {
    font-size: 9px;
    color: rgba(244,244,240,0.45);
    letter-spacing: 0.12em;
    margin-top: 2px;
    text-transform: uppercase;
}

/* Big "starting from" price in the highlight stat cell */
.premium-price-hero {
    font-family: var(--display-font);
    font-size: 44px;
    line-height: 0.95;
    color: var(--paper);
    font-weight: 400;
    letter-spacing: 0.01em;
    display: flex; align-items: baseline; gap: 4px;
}
.premium-price-hero .ph-cur {
    font-family: var(--mono-font);
    font-size: 18px;
    color: rgba(244,244,240,0.7);
    font-weight: 500;
}
.premium-price-hero .ph-cents {
    font-size: 20px;
    opacity: 0.7;
}

/* ========== TRUST STRIP ========== */
.premium-trust {
    max-width: 1480px;
    margin: 0 auto;
    padding: 18px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    border-bottom: 1px solid var(--line);
    background: var(--paper-2);
}
.premium-trust-item {
    display: flex; align-items: center; gap: 10px;
    font-size: .82rem;
    color: var(--ink-soft);
    line-height: 1.35;
}
.premium-trust-item i, .premium-trust-item svg {
    width: 18px; height: 18px;
    color: var(--ink);
    flex-shrink: 0;
}
.premium-trust-item strong {
    color: var(--ink);
    font-weight: 600;
}

/* ========== MAIN GRID — tickets + sticky map rail ========== */
.premium-main {
    max-width: 1480px;
    margin: 0 auto;
    padding: 36px 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 580px;
    gap: 32px;
    align-items: start;
}
.premium-tickets-col { min-width: 0; }

/* Filters header */
.premium-filters {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.premium-section-title {
    font-family: var(--display-font);
    font-size: 36px;
    line-height: 1;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
    font-weight: 400;
    color: var(--ink);
}
.premium-ttl-count {
    font-size: 18px;
    color: var(--ink-dim);
    margin-left: 4px;
    font-family: var(--mono-font);
    font-weight: 500;
}
.premium-section-sub {
    font-size: 11px;
    color: var(--ink-dim);
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.premium-section-eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-dim);
    margin-bottom: 8px;
    font-family: var(--mono-font);
}

/* Sort toolbar */
.premium-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--ink);
    border-radius: 100px;
    padding: 4px;
}
.premium-toolbar-label {
    font-size: 10px;
    color: rgba(244,244,240,0.5);
    letter-spacing: 0.12em;
    padding: 0 12px 0 8px;
    font-family: var(--mono-font);
}
.premium-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: transparent;
    border: 0;
    color: rgba(244,244,240,0.7);
    font-size: .8rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: 100px;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.premium-sort-btn:hover { color: var(--paper); }
.premium-sort-btn.is-active {
    background: var(--lime);
    color: var(--ink);
    font-weight: 600;
}
.premium-sort-btn i, .premium-sort-btn svg { width: 12px; height: 12px; }

/* ========== TICKETS (stub-style cards) ========== */
.premium-ticket-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.premium-ticket-card {
    display: grid;
    grid-template-columns: 110px 14px 1fr;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
    position: relative;
}
.premium-ticket-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(10,22,40,0.10);
    border-color: var(--ink-soft);
}
.premium-ticket-card:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}
.premium-ticket-card.is-vip {
    border-color: rgba(0,217,126,0.4);
}
.premium-ticket-card.is-oos {
    cursor: default;
    opacity: 0.65;
}
.premium-ticket-card.is-oos:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
}

/* Stub (left) — date + sport tag, tone driven by data-tone */
.ptk-stub {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 18px 10px;
    position: relative;
    background: var(--paper);
    color: var(--ink);
    text-align: center;
}
.ptk-stub[data-tone="lime"]  { background: var(--lime);  color: var(--ink); }
.ptk-stub[data-tone="terra"] { background: var(--terra); color: var(--paper); }
.ptk-stub[data-tone="navy"]  { background: var(--ink);   color: var(--paper); }
.ptk-stub[data-tone="paper"] { background: var(--paper); color: var(--ink); }

.ptk-stub-date {
    display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.ptk-stub-month {
    font-size: 10px;
    opacity: 0.75;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ptk-stub-day {
    font-family: var(--display-font);
    font-size: 52px;
    line-height: 0.88;
    margin: 4px 0;
    font-weight: 400;
    letter-spacing: 0.005em;
}
.ptk-stub-year {
    font-size: 10px;
    opacity: 0.75;
    letter-spacing: 0.14em;
}
.ptk-stub-perf {
    display: flex; gap: 3px;
    margin: 14px 0 10px;
    opacity: 0.4;
}
.ptk-stub-perf span {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: currentColor;
}
.ptk-stub-tag {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
    padding: 0 4px;
    text-align: center;
    line-height: 1.2;
}

/* Perforated edge between stub and body */
.ptk-perf {
    background-image: radial-gradient(circle at 7px 7px, var(--paper) 3.5px, transparent 4px);
    background-size: 14px 14px;
    background-position: -7px 0;
    background-repeat: repeat-y;
}

/* Body (right) */
.ptk-body {
    padding: 18px 22px 16px 18px;
    display: flex; flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.ptk-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 18px;
}
.ptk-head-l { min-width: 0; flex: 1; }

/* Tag row */
.ptk-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px;
}
.ptk-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1.2;
}
.ptk-tag i, .ptk-tag svg { width: 11px; height: 11px; }
.ptk-tag-instant { background: var(--lime); color: var(--ink); }
.ptk-tag-vip {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
    color: var(--lime);
}
.ptk-tag-hold {
    background: rgba(91,181,213,0.18);
    color: #1f5a86;
    border: 1px solid rgba(91,181,213,0.35);
}
.ptk-tag-alert {
    background: var(--terra);
    color: var(--paper);
}
.ptk-tag-oos {
    background: transparent;
    border: 1px solid var(--ink-soft);
    color: var(--ink-soft);
}

.ptk-name {
    font-family: var(--display-font);
    font-size: 26px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: 0.01em;
    margin: 0 0 4px;
}
.ptk-sub {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.4;
    margin-top: 2px;
}

/* Price (right of head) */
.ptk-price { text-align: right; flex-shrink: 0; }
.ptk-price-label {
    font-size: 9.5px;
    color: var(--ink-dim);
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}
.ptk-price-val {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 2px;
    line-height: 1;
}
.ptk-price-cur {
    font-size: 16px;
    color: var(--ink-soft);
    font-weight: 500;
}
.ptk-price-num {
    font-family: var(--display-font);
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: 0.005em;
}
.ptk-price-cents {
    font-size: 18px;
    color: var(--ink-soft);
    margin-left: 1px;
}
.ptk-price-fee {
    font-size: 10px;
    color: var(--ink-dim);
    margin-top: 6px;
    letter-spacing: 0.04em;
}

/* Bullets list (parsed from splittedCategoryName / packageDetails) */
.ptk-bullets {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex; flex-direction: column; gap: 2px;
}
.ptk-bullets li {
    font-size: 12.5px;
    color: var(--ink-soft);
    padding-left: 14px;
    position: relative;
    line-height: 1.5;
}
.ptk-bullets li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--ink);
}
.ptk-bullets-more { color: var(--ink-dim) !important; font-style: italic; }
.ptk-bullets-more::before { background: var(--ink-dim) !important; }

/* Meta (sitting arrangement, delivery) */
.ptk-meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 11px;
    color: var(--ink-soft);
    padding: 10px 0;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
}
.ptk-meta span {
    display: inline-flex; align-items: center; gap: 5px;
}
.ptk-meta i, .ptk-meta svg {
    width: 12px; height: 12px;
    color: var(--ink-dim);
    flex-shrink: 0;
}

/* Restrictions warn */
.ptk-warn {
    display: flex; gap: 8px; align-items: flex-start;
    background: rgba(255,59,48,0.08);
    border: 1px solid rgba(255,59,48,0.25);
    color: var(--ink);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
}
.ptk-warn i, .ptk-warn svg {
    width: 14px; height: 14px;
    color: var(--terra);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Footer row — hint + CTA */
.ptk-foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
    margin-top: 4px;
}
.ptk-section-hint {
    font-size: 10px;
    color: var(--ink-dim);
    letter-spacing: 0.12em;
}
.ptk-cta {
    background: var(--ink);
    color: var(--paper);
    border: 0;
    padding: 0 16px;
    height: 38px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, color .15s, transform .15s;
}
.ptk-cta:hover {
    background: var(--lime);
    color: var(--ink);
    transform: translateY(-1px);
}
.ptk-cta:disabled {
    background: transparent;
    color: var(--ink-dim);
    border: 1px solid var(--line);
    cursor: not-allowed;
}
.ptk-cta i, .ptk-cta svg { width: 14px; height: 14px; }

/* ========== STICKY MAP RAIL (replaces "Your Order" + "Last Booked") ========== */
.premium-rail {
    position: sticky;
    top: 88px;
    display: flex; flex-direction: column;
    gap: 16px;
}
.premium-rail-card {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.premium-rail-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-light);
    gap: 12px;
}
.premium-rail-label {
    font-size: 10px;
    color: rgba(244,244,240,0.55);
    letter-spacing: 0.14em;
    margin-bottom: 4px;
    font-weight: 600;
}
.premium-rail-sub {
    font-size: 14px;
    font-weight: 500;
    color: var(--paper);
    line-height: 1.3;
}
.premium-rail-fs {
    background: transparent;
    border: 1px solid var(--line-light);
    color: rgba(244,244,240,0.85);
    width: 32px; height: 32px;
    border-radius: 8px;
    display: grid; place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, color .15s, background .15s;
}
.premium-rail-fs:hover {
    border-color: var(--lime);
    color: var(--lime);
    background: rgba(0,217,126,0.06);
}
.premium-rail-fs i, .premium-rail-fs svg { width: 14px; height: 14px; }

/* Map frame — height comes from the image's natural aspect so we don't
   pad the dark background below landscape stadium maps. min-height is a
   fallback for the loading state and for venues without a map. */
.premium-map-frame {
    position: relative;
    min-height: 420px;
    background: linear-gradient(180deg, var(--ink), var(--ink-2));
    overflow: hidden;
}
.premium-map-frame img {
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.15s ease;
    display: block;
}
.premium-map-ctrls {
    position: absolute;
    top: 12px; right: 12px;
    display: flex; flex-direction: column; gap: 6px;
    z-index: 2;
}
.premium-map-btn {
    width: 30px; height: 30px;
    background: rgba(10,22,40,0.72);
    border: 1px solid rgba(244,244,240,0.18);
    border-radius: 6px;
    color: var(--paper);
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s, border-color .15s;
}
.premium-map-btn:hover {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--ink);
}
.premium-map-btn i, .premium-map-btn svg { width: 14px; height: 14px; }
.premium-map-overlay {
    position: absolute;
    bottom: 10px; left: 12px;
    font-size: 9px;
    color: rgba(244,244,240,0.55);
    letter-spacing: 0.14em;
    pointer-events: none;
}
.premium-map-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    color: rgba(244,244,240,0.55);
    font-size: 13px;
}
.premium-map-empty i, .premium-map-empty svg {
    width: 32px; height: 32px;
}

/* Map rail footer (city, address, Where will I sit?) */
.premium-rail-foot {
    padding: 14px 18px;
    border-top: 1px solid var(--line-light);
    background: var(--ink-2);
    display: flex; flex-direction: column; gap: 8px;
}
.premium-rail-foot-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    font-size: 11px;
    color: rgba(244,244,240,0.75);
    letter-spacing: 0.06em;
}
.premium-rail-foot-row > span {
    display: inline-flex; align-items: center; gap: 5px;
}
.premium-rail-foot-row i, .premium-rail-foot-row svg {
    width: 13px; height: 13px;
    color: var(--lime);
}
.premium-rail-link {
    background: transparent;
    border: 1px solid rgba(244,244,240,0.18);
    color: var(--paper);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--mono-font);
    letter-spacing: 0.04em;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: border-color .15s, color .15s, background .15s;
}
.premium-rail-link:hover {
    border-color: var(--lime);
    color: var(--lime);
}
.premium-rail-link i, .premium-rail-link svg { width: 12px; height: 12px; }
.premium-rail-addr {
    font-size: 11px;
    color: rgba(244,244,240,0.55);
    line-height: 1.4;
}

/* ========== INCLUDED STRIP ========== */
.premium-included {
    margin-top: 28px;
    padding: 20px 24px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}
.premium-included-item {
    display: flex; align-items: flex-start; gap: 10px;
    line-height: 1.4;
}
.premium-included-item > i,
.premium-included-item > svg {
    width: 20px; height: 20px;
    color: var(--ink);
    flex-shrink: 0;
    margin-top: 2px;
}
.premium-included-item > div {
    display: flex; flex-direction: column;
}
.premium-included-item strong {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
}
.premium-included-item span {
    font-size: .72rem;
    color: var(--ink-soft);
    margin-top: 2px;
}

/* ========== SECTION SHELL (used by FAQ) ========== */
.premium-section {
    max-width: 1480px;
    margin: 0 auto;
    padding: 56px 32px;
}

/* ========== FAQ ========== */
.premium-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
}
.premium-faq-item {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.premium-faq-item[open] {
    border-color: var(--ink);
    box-shadow: 0 2px 12px rgba(10,22,40,0.06);
}
.premium-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink);
    list-style: none;
}
.premium-faq-q::-webkit-details-marker { display: none; }
.premium-faq-chev {
    width: 18px; height: 18px;
    color: var(--ink-dim);
    transition: transform .2s;
    flex-shrink: 0;
}
.premium-faq-item[open] .premium-faq-chev {
    transform: rotate(180deg);
    color: var(--ink);
}
.premium-faq-a {
    padding: 0 20px 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ========== BOTTOM CTA ========== */
.premium-bottom-cta {
    max-width: 1480px;
    margin: 0 auto 64px;
    padding: 28px 32px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.premium-bottom-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(244,244,240,0.025) 12px 24px);
    pointer-events: none;
}
.premium-bottom-cta > * { position: relative; z-index: 1; }
.premium-bottom-cta-eyebrow {
    font-size: 10px;
    color: var(--lime);
    letter-spacing: 0.14em;
    margin-bottom: 6px;
    font-weight: 600;
}
.premium-bottom-cta-title {
    font-family: var(--display-font);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.1;
}
.premium-cta-btn {
    background: var(--lime);
    color: var(--ink);
    border: none;
    padding: 14px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .92rem;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.premium-cta-btn:hover {
    transform: translateY(-2px);
    background: var(--paper);
    box-shadow: 0 10px 28px rgba(0,217,126,0.25);
}
.premium-cta-btn i, .premium-cta-btn svg { width: 16px; height: 16px; }

/* ============================================================
   PREMIUM TICKET DETAIL — full-page view for premium events.
   No monospace fonts (Inter + Bebas Neue display only, per brief).
   Lives at /premium-ticket/:id. Re-uses .premium-page palette.
   ============================================================ */
.premium-ptd-page {
    /* Force-disable JetBrains Mono inside this page even if .mono is reused */
    --mono-font: 'Inter', -apple-system, system-ui, sans-serif;
}
.premium-ptd-page .mono {
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    letter-spacing: normal;
}

/* HERO STRIP — paper bg, ink text */
.premium-ptd-hero {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    padding: 32px 32px 36px;
    position: relative;
}
.premium-ptd-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 24px;
    transition: transform .15s, border-color .15s, color .15s, background .15s;
}
.premium-ptd-back:hover {
    transform: translateX(-2px);
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}
.premium-ptd-back i, .premium-ptd-back svg { width: 16px; height: 16px; }

.premium-ptd-hero-inner {
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 24px;
    align-items: flex-start;
}
.premium-ptd-stub {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 18px 12px;
    background: var(--paper);
    color: var(--ink);
    border-radius: 12px;
    border: 1px solid var(--line);
    text-align: center;
    box-shadow: 0 1px 3px rgba(10,22,40,0.05);
}
.premium-ptd-stub[data-tone="lime"]  { background: var(--lime);  color: var(--ink);   border-color: var(--lime-deep); }
.premium-ptd-stub[data-tone="navy"]  { background: var(--ink);   color: var(--paper); border-color: var(--ink-2); }
.premium-ptd-stub[data-tone="paper"] { background: var(--paper); color: var(--ink); }
.ptd-stub-month {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
}
.ptd-stub-day {
    font-family: var(--display-font);
    font-size: 56px;
    line-height: 0.88;
    margin: 4px 0;
    font-weight: 400;
}
.ptd-stub-year {
    font-size: 11px;
    letter-spacing: 0.12em;
    opacity: 0.75;
}
.ptd-stub-tag {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed currentColor;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
    width: 100%;
    text-align: center;
    line-height: 1.2;
}

.premium-ptd-hero-text { min-width: 0; }
.premium-ptd-eyebrow {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--lime);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
}
.premium-ptd-evtname {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 8px;
    font-weight: 500;
}
.premium-ptd-title {
    font-family: var(--display-font);
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: var(--ink);
    margin: 0 0 8px;
    text-wrap: balance;
}
.premium-ptd-subtitle {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.45;
    margin-bottom: 14px;
    max-width: 720px;
}
.premium-ptd-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}
.ptd-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 5px;
    line-height: 1.2;
}
.ptd-tag i, .ptd-tag svg { width: 12px; height: 12px; }
.ptd-tag-instant { background: var(--lime); color: var(--ink); }
.ptd-tag-vip {
    background: linear-gradient(135deg, var(--ink), var(--ink-2));
    color: var(--lime);
}
.ptd-tag-hold {
    background: rgba(91,181,213,0.18);
    color: #1f5a86;
    border: 1px solid rgba(91,181,213,0.35);
}
.ptd-tag-alert {
    background: var(--terra);
    color: var(--paper);
}

/* ========== MAIN 2-COL ========== */
.premium-ptd-main {
    max-width: 1480px;
    margin: 0 auto;
    padding: 36px 32px 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 32px;
    align-items: start;
}
.premium-ptd-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Cards / sections in the left column */
.premium-ptd-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px;
}
.premium-ptd-card-soft {
    background: var(--paper-2);
}
.premium-ptd-card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-dim);
    margin-bottom: 12px;
}
.premium-ptd-card-html {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
}
.premium-ptd-card-html p { margin: 0 0 10px; }
.premium-ptd-card-html p:last-child { margin-bottom: 0; }
.premium-ptd-card-html ul,
.premium-ptd-card-html ol { margin: 0 0 10px; padding-left: 22px; }
.premium-ptd-card-html li { margin-bottom: 4px; }

.premium-ptd-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.premium-ptd-bullets li {
    font-size: 14px;
    color: var(--ink-soft);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}
.premium-ptd-bullets li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ink);
}

/* Specs grid (Seating / Qty / Currency / Sections) */
.premium-ptd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.premium-ptd-cell {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 0;
}
.premium-ptd-cell-wide {
    grid-column: 1 / -1;
}
.premium-ptd-cell-l {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-dim);
    margin-bottom: 6px;
}
.premium-ptd-cell-v {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
}

/* Delivery methods list */
.premium-ptd-delivery-list {
    display: flex; flex-direction: column; gap: 8px;
}
.premium-ptd-delivery {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.premium-ptd-delivery-l {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    min-width: 0;
}
.premium-ptd-delivery-l i, .premium-ptd-delivery-l svg {
    width: 16px; height: 16px;
    color: var(--ink-dim);
    flex-shrink: 0;
}
.premium-ptd-delivery-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    flex-shrink: 0;
}

/* Callouts (Confirmation / Hold / Restrictions / Alert) */
.premium-ptd-callout {
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid;
}
.premium-ptd-callout-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.premium-ptd-callout-head i, .premium-ptd-callout-head svg {
    width: 16px; height: 16px;
}
.premium-ptd-callout-body {
    font-size: 14px;
    line-height: 1.55;
}
.premium-ptd-callout-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed currentColor;
    font-size: 12px;
    line-height: 1.5;
    display: flex; align-items: flex-start; gap: 6px;
    opacity: 0.85;
}
.premium-ptd-callout-foot i, .premium-ptd-callout-foot svg {
    width: 13px; height: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}
.premium-ptd-callout-good {
    background: #edfcf4;
    border-color: #a8e6c7;
    color: #166548;
}
.premium-ptd-callout-good .premium-ptd-callout-body,
.premium-ptd-callout-good .premium-ptd-card-html { color: #145a3f; }
.premium-ptd-callout-info {
    background: #edf5fd;
    border-color: #b8d6f0;
    color: #2e5a8a;
}
.premium-ptd-callout-info .premium-ptd-callout-body,
.premium-ptd-callout-info .premium-ptd-card-html { color: #234770; }
.premium-ptd-callout-warn {
    background: #fef9ec;
    border-color: #f0d890;
    color: #7c6520;
}
.premium-ptd-callout-warn .premium-ptd-bullets li {
    color: #7c6520;
    padding-left: 16px;
}
.premium-ptd-callout-warn .premium-ptd-bullets li::before {
    background: #7c6520;
}
.premium-ptd-callout-alert {
    background: #fdf0f0;
    border-color: #f5c4c4;
    color: #983b3b;
}
.premium-ptd-callout-alert .premium-ptd-callout-body { color: #7a2f2f; }

/* Pills (required attendee fields) */
.premium-ptd-pill-row {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.premium-ptd-pill {
    display: inline-flex; align-items: center;
    font-size: 12.5px;
    padding: 6px 12px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    color: var(--ink);
    font-weight: 500;
}
.premium-ptd-help {
    margin-top: 10px;
    font-size: 12px;
    color: var(--ink-dim);
    line-height: 1.5;
}

/* ========== ORDER SUMMARY RAIL ========== */
.premium-ptd-rail {
    position: sticky;
    top: 88px;
}
.premium-ptd-summary {
    background: var(--ink);
    color: var(--paper);
    border-radius: 16px;
    padding: 22px;
    display: flex; flex-direction: column; gap: 16px;
}
.premium-ptd-summary-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244,244,240,0.55);
}

.premium-ptd-price-block {
    padding: 16px 0 18px;
    border-bottom: 1px solid var(--line-light);
}
.premium-ptd-price-l {
    font-size: 12px;
    color: rgba(244,244,240,0.6);
    margin-bottom: 6px;
}
.premium-ptd-price-v {
    display: flex; align-items: baseline; gap: 3px;
    line-height: 1;
    color: var(--paper);
}
.ptd-price-cur {
    font-size: 22px;
    color: rgba(244,244,240,0.75);
    font-weight: 500;
}
.ptd-price-num {
    font-family: var(--display-font);
    font-size: 56px;
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--paper);
}
.ptd-price-cents {
    font-size: 28px;
    color: rgba(244,244,240,0.7);
    margin-left: 2px;
}
.premium-ptd-price-foot {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(244,244,240,0.55);
    line-height: 1.4;
}

/* Form fields (qty, delivery) */
.premium-ptd-field {
    display: flex; flex-direction: column; gap: 6px;
}
.premium-ptd-field label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244,244,240,0.7);
}
.premium-ptd-select-wrap {
    position: relative;
}
.premium-ptd-select-wrap select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(244,244,240,0.06);
    border: 1px solid rgba(244,244,240,0.18);
    color: var(--paper);
    padding: 11px 36px 11px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.premium-ptd-select-wrap select:focus,
.premium-ptd-select-wrap select:hover {
    border-color: var(--lime);
    background: rgba(0,217,126,0.06);
    outline: none;
}
.premium-ptd-select-wrap select option {
    background: var(--ink);
    color: var(--paper);
}
.premium-ptd-select-wrap svg {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    color: rgba(244,244,240,0.6);
    pointer-events: none;
}
.premium-ptd-static {
    font-size: 14px;
    color: var(--paper);
    padding: 11px 14px;
    background: rgba(244,244,240,0.06);
    border: 1px solid rgba(244,244,240,0.14);
    border-radius: 10px;
    font-weight: 500;
}

/* Totals */
.premium-ptd-totals {
    padding-top: 14px;
    border-top: 1px solid var(--line-light);
    display: flex; flex-direction: column; gap: 8px;
}
.premium-ptd-total-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px;
    color: rgba(244,244,240,0.75);
}
.premium-ptd-total-row span:last-child {
    color: var(--paper);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.premium-ptd-total-grand {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--line-light);
    font-size: 14px;
    color: var(--paper);
    font-weight: 700;
}
.premium-ptd-total-grand span:last-child {
    font-family: var(--display-font);
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
}

/* CTA */
.premium-ptd-cta {
    width: 100%;
    background: var(--lime);
    color: var(--ink);
    border: 0;
    padding: 0 18px;
    height: 50px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: transform .15s, background .15s, box-shadow .15s;
    margin-top: 4px;
}
.premium-ptd-cta:hover {
    transform: translateY(-1px);
    background: var(--paper);
    box-shadow: 0 8px 24px rgba(0,217,126,0.25);
}
.premium-ptd-cta i, .premium-ptd-cta svg { width: 16px; height: 16px; }

.premium-ptd-trust {
    display: flex; flex-direction: column; gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line-light);
    font-size: 11.5px;
    color: rgba(244,244,240,0.75);
}
.premium-ptd-trust span {
    display: inline-flex; align-items: center; gap: 8px;
}
.premium-ptd-trust i, .premium-ptd-trust svg {
    width: 14px; height: 14px;
    color: var(--lime);
    flex-shrink: 0;
}

/* Session-expired card */
.premium-ptd-expired {
    max-width: 540px;
    margin: 80px auto;
    padding: 40px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: center;
}
.premium-ptd-expired h2 {
    font-family: var(--display-font);
    font-size: 28px;
    font-weight: 400;
    margin: 0 0 8px;
    color: var(--ink);
}
.premium-ptd-expired p {
    color: var(--ink-soft);
    margin: 0 0 22px;
    font-size: 14px;
}
.premium-ptd-expired .premium-ptd-cta {
    max-width: 240px;
    margin: 0 auto;
    justify-content: center;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1180px) {
    .premium-ptd-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .premium-ptd-rail { position: static; }
}
@media (max-width: 768px) {
    .premium-ptd-hero { padding: 24px 20px 28px; }
    .premium-ptd-hero-inner { grid-template-columns: 96px 1fr; gap: 18px; }
    .premium-ptd-stub { padding: 14px 8px; }
    .ptd-stub-day { font-size: 44px; }
    .premium-ptd-main { padding: 24px 20px 48px; }
    .premium-ptd-grid { grid-template-columns: 1fr; }
    .ptd-price-num { font-size: 44px; }
    .ptd-price-cur { font-size: 18px; }
    .ptd-price-cents { font-size: 22px; }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1180px) {
    .premium-included { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1280px) {
    .premium-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .premium-rail {
        position: static;
    }
    /* Image now dictates height; keep a small floor for the loading state and
       venues without a map so the empty-state card doesn't collapse. */
    .premium-map-frame { min-height: 240px; }
}
@media (max-width: 900px) {
    .premium-hero { padding: 76px 20px 0; }
    .premium-back { top: 70px; left: 14px; padding: 6px 12px; font-size: .76rem; }
    .premium-hero-inner { padding-bottom: 40px; }
    .premium-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        margin: 40px -20px 0;
    }
    .premium-stat { padding: 16px 18px; }
    .premium-stat:nth-child(2) { border-right: 0; }
    .premium-trust {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px 20px;
        gap: 16px;
    }
    .premium-main { padding: 24px 20px; }
    .premium-section { padding: 40px 20px; }
    .premium-included { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .premium-bottom-cta {
        margin: 0 20px 48px;
        flex-direction: column;
        align-items: flex-start;
    }
    .premium-cta-btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
    .premium-hero { padding: 70px 16px 0; }
    .premium-title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .premium-trust { grid-template-columns: 1fr; gap: 12px; }
    .premium-hero-stats { grid-template-columns: 1fr; margin: 36px -16px 0; }
    .premium-stat { border-right: 0; border-bottom: 1px solid var(--line-light); }
    .premium-stat:last-child { border-bottom: 0; }
    .premium-filters { flex-direction: column; align-items: flex-start; }
    .premium-toolbar { width: 100%; justify-content: flex-start; overflow-x: auto; }

    /* Ticket card — narrower stub, stacked head, full-width CTA */
    .premium-ticket-card { grid-template-columns: 72px 10px 1fr; }
    .ptk-stub { padding: 12px 4px; }
    .ptk-stub-day { font-size: 38px; }
    .ptk-stub-month, .ptk-stub-year { font-size: 9px; letter-spacing: 0.12em; }
    .ptk-stub-perf { margin: 10px 0 8px; }
    .ptk-stub-tag {
        font-size: 8.5px;
        letter-spacing: 0.08em;
        line-height: 1.25;
    }
    .ptk-body { padding: 14px 14px 14px 12px; }
    .ptk-head { flex-direction: column; gap: 8px; }
    .ptk-price { text-align: left; }
    .ptk-price-val { justify-content: flex-start; }
    .ptk-price-num { font-size: 30px; }
    .ptk-name { font-size: 22px; }

    /* Stack the foot so the CTA gets full width and "View seats" never wraps */
    .ptk-foot { flex-direction: column; align-items: stretch; gap: 8px; }
    .ptk-section-hint { display: none; }
    .ptk-cta {
        width: 100%;
        justify-content: center;
        height: 42px;
    }

    .premium-included { grid-template-columns: 1fr; }
    .premium-bottom-cta-title { font-size: 22px; }

    /* Map rail when stacked on mobile — no forced empty space below image */
    .premium-map-frame { min-height: 200px; }
}

/* ========== RESPONSIVE ========== */

/* -- Tablet landscape -- */
@media (max-width: 1100px) {
    .event-sidebar { width: 220px; padding: 16px; }
    .event-tickets-panel { min-width: 280px; max-width: 440px; }
}

/* -- Tablet portrait / small laptop -- */
@media (max-width: 900px) {
    /* Header: collapse nav, show hamburger, hide both desktop contact buttons (mobile bar takes over) */
    .header-nav { display: none; }
    .header-hamburger { display: flex; }
    .header-selects { display: none; }
    .header-wa-btn { display: none; }
    .header-bar { padding: 0 20px; }

    /* Listing shell — collapse to single column, sidebar becomes a slide-out
       drawer triggered by the .filter-drawer-toggle button. */
    .listing-shell { grid-template-columns: 1fr; }
    .filter-drawer-toggle {
        display: inline-flex; align-items: center; gap: 8px;
        margin: 0 0 16px;
        padding: 10px 16px;
        background: #fff;
        border: 1px solid rgba(10,22,40,0.12);
        border-radius: 999px;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 600;
        color: #0a1628;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(10,22,40,0.04);
        position: relative;
    }
    .filter-drawer-toggle:hover { border-color: rgba(10,22,40,0.32); }
    .filter-drawer-toggle i, .filter-drawer-toggle svg { width: 16px; height: 16px; }
    .filter-drawer-toggle-dot {
        display: inline-block;
        width: 7px; height: 7px;
        border-radius: 50%;
        background: #00d97e;
        border: 1px solid #0a1628;
        margin-left: 4px;
    }
    .filter-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(320px, 88vw);
        max-height: none;
        border-radius: 0;
        border: 0;
        border-right: 1px solid rgba(10,22,40,0.12);
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        padding: 20px 18px 80px;
        overflow-y: auto;
    }
    body.filter-drawer-open .filter-sidebar { transform: translateX(0); }

    /* Reveal the close (X) button only in the mobile drawer context */
    .fsb-close { display: inline-flex; }

    /* Lock page scroll while the drawer is open so the page behind the
       drawer doesn't scroll under finger drags — fixes the "scrolling
       tickets also scrolls filters" complaint. */
    html.filter-drawer-open,
    body.filter-drawer-open {
        overflow: hidden;
        touch-action: none;
    }
    /* But re-enable touch inside the drawer itself so users can still
       scroll within the filter list. */
    body.filter-drawer-open .filter-sidebar {
        touch-action: pan-y;
    }

    /* Mobile: move the utility bar to the BOTTOM of the viewport as a fixed
       strip (back to the old call-bar position). Only the call number stays,
       centered. The bar lives outside the sticky header flow on mobile. */
    .header-utility {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        top: auto;
        z-index: 95;
        box-shadow: 0 -6px 18px rgba(0,0,0,0.18);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .header-utility-inner {
        padding: 7px 14px;     /* +20% vs the old top variant (5/28 → 7/34) */
        min-height: 34px;
        justify-content: center;
    }
    .header-utility-left { display: none; }
    .header-utility-right { gap: 0; width: 100%; justify-content: center; }
    .hu-link { display: none; }
    .hu-call { font-size: .9rem; }   /* a notch bigger so it reads in a tap target */
    .hu-call svg { width: 13px; height: 13px; }

    /* Floating WhatsApp FAB replaces the old bottom call+WhatsApp split bar.
       Lifted above the new bottom utility bar so they don't collide. */
    .fab-whatsapp {
        display: inline-flex;
        bottom: calc(54px + env(safe-area-inset-bottom, 0px));
    }
    /* Scroll-to-top: smaller utility button stacked above the WhatsApp FAB.
       Right offset (25px) centers the 36px button under the 54px FAB at right:16px. */
    .scroll-top-btn {
        width: 36px;
        height: 36px;
        right: 25px;
        bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }
    /* Push body content up so the bottom bar doesn't cover the last items. */
    body { padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px)); }
    .main-content { padding: 24px 20px 40px; }
    /* Mobile: account for the fixed mobile call bar (64px) and shorter
       header (48px) when sizing the first-screen hero. */
    .hero { margin-top: -24px; min-height: calc(100vh - 150px); }
    .sport-grid { gap: 6px; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }

    /* Event detail: stack columns */
    body.event-detail-active { overflow: auto; }
    body.event-detail-active .footer { display: block; }
    .event-page-wrapper { height: auto; min-height: calc(100vh - 65px); overflow: auto; }
    .event-page-content { flex-direction: column; height: auto; }
    .event-sidebar {
        width: 100%; border-right: none; border-bottom: 1px solid var(--border-subtle);
        padding: 16px; overflow: visible;
        display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .sidebar-card { margin-bottom: 0; }
    .sidebar-card-highlight { grid-column: 1 / -1; }
    .event-tickets-panel { border-right: none; max-width: 100%; min-width: 0; overflow: visible; padding: 16px; }
    .event-map-panel { height: 300px; border-top: 1px solid var(--border-subtle); }
    .event-page-header { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    .event-page-header h1 { font-size: 1.1rem; }
    .event-page-header-actions { display: flex; }
    .event-page-header-actions .header-action-btn { padding: 6px 12px; font-size: .8rem; }

    /* Footer */
    .footer-inner { padding: 32px 20px 20px; }
    .footer { margin-top: 40px; }
    .footer-top { flex-direction: column; gap: 24px; }
    .footer-brand { flex: none; }
    .footer-links { gap: 24px; }
}

/* -- Mobile -- */
@media (max-width: 768px) {
    /* Global */
    .container { padding: 0 16px; }
    .main-content { padding: 20px 16px 36px; }

    /* Header mobile tweaks */
    .header-bar { padding: 0 14px; height: 48px; }
    .header-logo { margin-right: auto; }
    .header-logo-img { height: 32px; }
    .header-logo-text { font-size: .88rem; }
    .header-icon-btn { width: 32px; height: 32px; }
    .header-icon-btn svg { width: 17px; height: 17px; }
    .header-mobile-menu { padding: 4px 16px 12px; }
    .header-search-overlay { padding: 0 14px; height: 48px; }

    /* Hero — small-tablet/large-phone overrides on top of the .hero-v2
       mobile rules. Old pill-search input/button selectors are gone now;
       the hero-search-card stacks its fields via the breakpoints colocated
       with the hero block. */
    .hero { margin-top: -20px; margin-bottom: 24px; }
    .hero h1 { font-size: clamp(2.2rem, 8vw, 2.8rem); }
    .hero-stats { gap: 14px; margin-top: 22px; }
    .hero-stat { font-size: .72rem; }
    .hero-stat strong { font-size: 1.2rem; }

    /* Section headers */
    .section-header h2 { font-size: .95rem; }

    /* Sport grid — horizontal scroll on mobile */
    .sport-grid {
        flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px; margin-bottom: 24px;
        padding-bottom: 4px; scrollbar-width: none;
    }
    .sport-grid::-webkit-scrollbar { display: none; }
    .sport-card { flex-shrink: 0; padding: 8px 14px; font-size: .8rem; }

    /* Cards grid */
    .cards-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }

    /* Event cards */
    /* Event card — collapse the right rail under the body on tablets so the
       horizontal row doesn't run out of room for price + CTA. */
    .event-card { grid-template-columns: 92px 1fr; min-height: 0; }
    .ec-stub { padding: 14px 8px; }
    .ec-stub-day { font-size: 38px; }
    .ec-body { padding: 16px 18px; gap: 8px; }
    .ec-name { font-size: 1rem; }
    .ec-meta { gap: 4px 14px; font-size: 0.82rem; }
    .ec-rail {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 18px;
        border-left: 0;
        border-top: 1px dashed var(--ec-line, rgba(10,22,40,0.10));
        min-width: 0;
    }
    .ec-price { align-items: flex-start; text-align: left; }
    .ec-price-val { font-size: 1.15rem; }
    .ec-cta { padding: 10px 16px; font-size: 0.85rem; }

    /* Ticket cards */
    .ticket-card { flex-direction: column; align-items: stretch; padding: 14px; gap: 8px; }
    .ticket-date { display: none; }
    .ticket-info .ticket-tags { margin-bottom: 4px; }
    .ticket-info .category-name { font-size: .95rem; }
    .ticket-price-area {
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px dashed var(--border-subtle);
    }
    .ticket-price-area .from-text { display: none; }
    .ticket-price-area .price { font-size: 1.1rem; }
    .ticket-price-area .onwards { font-size: .7rem; }
    .ticket-price-area .btn { width: auto; }

    /* Forms / modal */
    .form-row { grid-template-columns: 1fr; gap: 8px; }
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
    }
    .modal-body { padding: 16px; }
    .modal-header { padding: 14px 16px; }
    /* Ticket detail 2-col grid collapses on mobile */
    .ticket-detail-view .mobile-grid-collapse {
        grid-template-columns: 1fr !important;
    }

    /* Filters — wrap and fill width */
    .filters-bar {
        gap: 8px;
        flex-direction: row; flex-wrap: wrap;
        align-items: flex-end;
    }
    .filter-field { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .filters-bar select, .filter-field input {
        font-size: .82rem;
        padding: 9px 10px;
        width: 100%; min-width: 0;
    }
    .filters-bar label { font-size: .8rem; }
    .filters-bar .btn { flex: 1 1 100%; justify-content: center; }

    /* Pro filter bar — stack vertically on mobile */
    .filter-bar-pro {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 10px;
    }
    .filter-bar-pro .filter-label {
        font-size: .85rem;
        margin-right: 0;
        margin-bottom: 2px;
    }
    .filter-pill, .filter-pill-input {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }
    .filter-clear-btn {
        width: 100%;
        margin-left: 0;
    }
    .filter-dropdown { width: 100%; }
    .filter-dropdown-panel {
        width: 100%;
        min-width: 0;
        right: 0;
    }
    .calendar-widget {
        width: 100%;
        left: 0;
        right: 0;
        box-sizing: border-box;
    }

    /* Pagination */
    .pagination { gap: 4px; margin: 24px 0; }
    .pagination button { padding: 6px 10px; font-size: .8rem; }
    .pagination .page-info { font-size: .8rem; margin: 0 6px; }

    /* Breadcrumb */
    .breadcrumb { font-size: .8rem; margin-bottom: 16px; flex-wrap: wrap; }

    /* Tabs — scrollable */
    .tabs { gap: 12px; margin-bottom: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { font-size: .8rem; padding: 6px 0; flex-shrink: 0; }

    /* Empty state */
    .empty-state { padding: 40px 16px; }
    .empty-state h3 { font-size: .85rem; }
    .empty-state p { font-size: .8rem; }

    /* Order cards */
    .order-details { grid-template-columns: 1fr 1fr; gap: 12px; }

    /* Toast */
    .toast-container { bottom: 12px; right: 12px; left: 12px; }
    .toast { max-width: 100%; }
    /* Event detail header — show back button on mobile */
    .event-page-header { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
    .event-page-header h1 { font-size: 1.05rem; line-height: 1.3; }
    .event-page-header-actions { display: flex !important; gap: 6px; }
    .event-page-header-actions .header-action-btn {
        padding: 8px 14px;
        font-size: .8rem;
    }
    .event-page-tags { gap: 6px; }
    .event-page-tag { font-size: .7rem; padding: 3px 8px; }

    /* Event sidebar on mobile — 2-col grid */
    .event-sidebar {
        padding: 16px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .sidebar-card { margin-bottom: 0; }
    .sidebar-card-highlight { grid-column: 1 / -1; }
    .sidebar-matchup { flex-direction: row; }
    .event-tickets-panel { padding: 16px; }
    .event-tickets-panel h2 { font-size: .95rem !important; }

    /* Ticket filters */
    .ticket-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }
    .ticket-filters select { width: 100%; }

    /* Search dropdown cap to viewport */
    .search-dropdown { width: 100% !important; max-width: 100vw; left: 0; right: 0; }

    /* Map fullscreen */
    .map-fullscreen-overlay img { max-width: 96vw; max-height: 85vh; border-radius: 4px; }
    .map-fullscreen-close { top: 12px; right: 12px; width: 36px; height: 36px; }

    /* Footer */
    .footer-inner { padding: 40px 16px 24px; }
    .footer-top { flex-direction: column; gap: 32px; }
    .footer-links { flex-direction: column; gap: 24px; }
    .footer-col { min-width: 100%; }
    .footer-col h4 { font-size: .75rem; margin-bottom: 12px; }
    .footer-col a { font-size: .85rem; }
    .footer-sep { display: none; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; font-size: .8rem; }
    .footer-bottom-left { flex-direction: column; align-items: flex-start; gap: 6px; }
    .footer-bottom-right { gap: 16px; width: 100%; border-top: 1px solid var(--border-subtle); padding-top: 16px; flex-wrap: wrap; }

    /* Search results page title */
    .search-results-title { font-size: 1.1rem !important; }
}

/* -- Small phone -- */
@media (max-width: 380px) {
    .container { padding: 0 12px; }
    .main-content { padding: 16px 12px 28px; }
    .hero { margin-top: -16px; padding: 32px 16px 64px; }
    .hero h1 { font-size: 1.7rem; }
    .hero-stats { gap: 12px; margin-top: 18px; }
    .header-logo-text { font-size: .82rem; }
    .header-logo-img { height: 28px; }
    /* Event card on phones — tighter stub, smaller date digit. The
       3-col→2-col collapse from the 768px breakpoint already moved the
       rail under the body, so we just shrink dimensions here. */
    .event-card { grid-template-columns: 64px 1fr; border-radius: 12px; }
    .ec-stub { padding: 10px 4px; }
    .ec-stub-day { font-size: 26px; }
    .ec-stub-month, .ec-stub-year { font-size: 9px; letter-spacing: 0.12em; }
    .ec-body { padding: 12px 14px; gap: 5px; }
    .ec-name { font-size: 0.92rem; line-height: 1.25; }
    .ec-meta { gap: 3px 10px; font-size: 0.76rem; }
    .ec-meta-item > i, .ec-meta-item > svg { width: 12px; height: 12px; }
    .ec-tag { font-size: 9.5px; padding: 2px 7px; }
    .ec-rail { padding: 10px 14px; }
    .ec-price-val { font-size: 1rem; }
    .ec-cta { padding: 7px 12px; font-size: 0.78rem; }
    .sport-card { padding: 7px 12px; font-size: .75rem; }
    .order-details { grid-template-columns: 1fr; }
    .footer-inner { padding: 24px 12px 16px; }
    .footer-links { gap: 12px; }
    .footer-col h4 { font-size: .65rem; }
    .footer-col a { font-size: .7rem; }
    /* Event detail header compact */
    .event-page-header h1 { font-size: .95rem; }
    .event-page-tag { font-size: .65rem; padding: 2px 6px; }
    /* Sidebar single column on small phones */
    .event-sidebar { grid-template-columns: 1fr; }
    /* Ticket card tighter */
    .ticket-card { padding: 12px; }
    .ticket-price-area .price { font-size: 1rem; }
    /* Modal full screen */
    .modal-overlay { padding: 0; }
    .modal { max-height: 100vh; border-radius: 0; }
}

/* ========== OUT OF STOCK ========== */
.ticket-out-of-stock { opacity: .5; background: var(--bg-surface-hover); }
.badge-oos { background: var(--bg-surface-hover); color: var(--text-muted); border-color: var(--border-subtle); }
.price-oos { text-decoration: line-through; color: var(--text-muted) !important; }
.oos-message { font-size: .85rem; color: var(--text-secondary); font-weight: 500; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border-subtle); background: var(--bg-surface-hover); }

/* ========== TICKET FILTERS ========== */
.ticket-filters {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; align-items: center;
    padding: 10px 14px; background: var(--bg-surface); border-radius: 6px; border: 1px solid var(--border-subtle);
}
.ticket-filters select { padding: 6px 10px; border-radius: 4px; background: var(--bg-surface-hover); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: .85rem; font-weight: 500; }
.ticket-filters select:focus { outline: none; border-color: var(--border-strong); }
.ticket-filters label { font-size: .85rem; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 500; }
.ticket-filters input[type="checkbox"] { accent-color: var(--primary); width: 14px; height: 14px; }

/* ============================================================ */
/* THANK YOU PAGE — generic post-payment landing                */
/* Lives at /thank-you. Re-uses the checkout palette (navy/cream/*/
/* pitch-green) but is a tighter, marketing-friendly layout with */
/* a static URL marketing can target for conversion tracking.   */
/* Inter only — no monospace fonts.                             */
/* ============================================================ */
.thank-you-page {
    /* Inherit the checkout palette tokens — same names so designers can re-skin in one place */
    --ty-navy: #0a1628;
    --ty-navy-2: #11203a;
    --ty-ink: #0a1628;
    --ty-ink-2: #2d3e5a;
    --ty-ink-3: #5a6a82;
    --ty-ink-4: #8a96a8;
    --ty-bg: #f4f4f0;
    --ty-bg-2: #ebebe5;
    --ty-paper: #ffffff;
    --ty-pitch: #00d97e;
    --ty-pitch-2: #00b369;
    --ty-pitch-deep: #006b3f;
    --ty-amber: #ffb800;
    --ty-line: #d8d8d0;
    --ty-line-soft: #e5e5dd;

    background: var(--ty-bg);
    background-image: radial-gradient(ellipse 800px 400px at 50% -100px, rgba(0, 217, 126, 0.05) 0%, transparent 60%);
    color: var(--ty-ink);
    -webkit-font-smoothing: antialiased;
    min-height: calc(100vh - 200px);
    padding: 36px 16px 72px;
}
.thank-you-page * { box-sizing: border-box; }

.ty-shell {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── HERO (navy success card) ─────────────────────────────── */
.ty-hero {
    background: linear-gradient(180deg, var(--ty-navy) 0%, var(--ty-navy-2) 100%);
    color: #fff;
    border-radius: 18px;
    padding: 48px 32px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ty-hero::after {
    /* Subtle pitch stripes echoing the checkout hero */
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg,
        rgba(0, 217, 126, 0.06) 0,
        rgba(0, 217, 126, 0.06) 80px,
        transparent 80px, transparent 160px);
    background-size: 160px 100%;
    background-repeat: repeat-x;
    background-position: center 0;
    pointer-events: none;
    opacity: 0.6;
}
.ty-hero > * { position: relative; z-index: 1; }

/* Animated checkmark */
.ty-check {
    width: 96px; height: 96px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: rgba(0, 217, 126, 0.14);
    display: grid; place-items: center;
    animation: ty-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ty-check svg {
    color: var(--ty-pitch);
}
.ty-check-circle {
    stroke: var(--ty-pitch);
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: ty-draw-circle 0.6s 0.2s ease-out forwards;
}
.ty-check-mark {
    stroke: var(--ty-pitch);
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: ty-draw-check 0.4s 0.7s ease-out forwards;
}
@keyframes ty-pop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes ty-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes ty-draw-check { to { stroke-dashoffset: 0; } }

.ty-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 217, 126, 0.18);
    color: var(--ty-pitch);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 18px;
}
.ty-title {
    font-size: clamp(1.7rem, 3.8vw, 2.4rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: #fff;
    text-wrap: balance;
}
.ty-sub {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
    margin: 0 auto;
    max-width: 540px;
}

.ty-ref {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
}
.ty-ref-l {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.ty-ref-v {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ── WHAT HAPPENS NEXT ────────────────────────────────────── */
.ty-steps {
    background: var(--ty-paper);
    border: 1px solid var(--ty-line);
    border-radius: 16px;
    padding: 28px 28px 32px;
}
.ty-section-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ty-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 20px;
}
.ty-step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ty-step {
    position: relative;
    padding: 20px 18px;
    background: var(--ty-bg);
    border: 1px solid var(--ty-line-soft);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ty-step-num {
    position: absolute;
    top: 14px; right: 16px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--ty-ink-4);
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}
.ty-step-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(0, 217, 126, 0.12);
    color: var(--ty-pitch-deep);
    display: grid; place-items: center;
    margin-bottom: 2px;
}
.ty-step-icon i, .ty-step-icon svg { width: 20px; height: 20px; }
.ty-step-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ty-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.ty-step-text {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--ty-ink-2);
    margin: 0;
}

/* ── SUPPORT STRIP ────────────────────────────────────────── */
.ty-support {
    background: var(--ty-paper);
    border: 1px solid var(--ty-line);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.ty-support-l { min-width: 0; }
.ty-support-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ty-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 4px;
}
.ty-support-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ty-ink);
}
.ty-support-r {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.ty-support-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ty-bg);
    border: 1px solid var(--ty-line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--ty-ink);
    font-size: .9rem;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.ty-support-link:hover {
    border-color: var(--ty-pitch);
    background: rgba(0, 217, 126, 0.06);
    transform: translateY(-1px);
}
.ty-support-link i, .ty-support-link svg {
    width: 16px; height: 16px;
    color: var(--ty-pitch-deep);
}

/* ── CTA ROW ──────────────────────────────────────────────── */
.ty-cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.ty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 12px;
    font-size: .92rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    flex: 1 1 200px;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ty-btn i, .ty-btn svg { width: 16px; height: 16px; }
.ty-btn-primary {
    background: var(--ty-pitch);
    color: var(--ty-navy);
    border-color: var(--ty-pitch);
}
.ty-btn-primary:hover {
    background: var(--ty-pitch-2);
    border-color: var(--ty-pitch-2);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 217, 126, 0.22);
}
.ty-btn-secondary {
    background: var(--ty-navy);
    color: #fff;
    border-color: var(--ty-navy);
}
.ty-btn-secondary:hover {
    background: var(--ty-navy-2);
    border-color: var(--ty-navy-2);
    transform: translateY(-1px);
}
.ty-btn-ghost {
    background: var(--ty-paper);
    color: var(--ty-ink);
    border-color: var(--ty-line);
}
.ty-btn-ghost:hover {
    border-color: var(--ty-ink-2);
    background: var(--ty-bg-2);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 720px) {
    .thank-you-page { padding: 24px 14px 56px; }
    .ty-hero { padding: 36px 22px 32px; border-radius: 14px; }
    .ty-check { width: 80px; height: 80px; margin-bottom: 18px; }
    .ty-check svg { width: 52px; height: 52px; }
    .ty-steps { padding: 22px 18px 24px; border-radius: 12px; }
    .ty-step-grid { grid-template-columns: 1fr; gap: 12px; }
    .ty-step { padding: 16px 14px; }
    .ty-support { flex-direction: column; align-items: flex-start; padding: 18px 18px; }
    .ty-support-r { width: 100%; flex-direction: column; gap: 8px; }
    .ty-support-link { width: 100%; justify-content: center; }
    .ty-cta-row { flex-direction: column; }
    .ty-btn { width: 100%; flex: 0 0 auto; }
}

/* ============================================================ */
/* CHECKOUT PAGE — Matchday Program design                      */
/* Full-page route at /checkout/:id. Design tokens & all child   */
/* selectors are scoped under .checkout-page so the rest of the  */
/* site is untouched.                                            */
/* ============================================================ */
.checkout-page {
    --co-navy: #0a1628;
    --co-navy-2: #11203a;
    --co-ink: #0a1628;
    --co-ink-2: #2d3e5a;
    --co-ink-3: #5a6a82;
    --co-ink-4: #8a96a8;
    --co-bg: #f4f4f0;
    --co-bg-2: #ebebe5;
    --co-paper: #ffffff;
    --co-pitch: #00d97e;
    --co-pitch-2: #00b369;
    --co-pitch-deep: #006b3f;
    --co-amber: #ffb800;
    --co-amber-deep: #e29b00;
    --co-red: #ff3b30;
    --co-line: #d8d8d0;
    --co-line-soft: #e5e5dd;

    background: var(--co-bg);
    background-image: radial-gradient(ellipse 800px 400px at 50% -100px, rgba(0, 217, 126, 0.04) 0%, transparent 60%);
    color: var(--co-ink);
    -webkit-font-smoothing: antialiased;
    min-height: calc(100vh - 200px);
    padding: 24px 16px 64px;
}
.checkout-page *,
.checkout-page *::before,
.checkout-page *::after { box-sizing: border-box; }

/* Layout grid */
.checkout-shell {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}
.checkout-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.checkout-side {
    position: sticky;
    /* Site header is sticky at top:0 with height ~53px — offset the side column
       below it (header height + a small breathing margin) so scrolling doesn't
       leave the stub overlapping the header. */
    top: 64px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: start;
    /* Below the site header (z-index:100) so the header always wins on overlap. */
    z-index: 1;
}

/* ── Hero (event header / matchup) ───────────────────────── */
.checkout-page .co-hero {
    background: linear-gradient(180deg, var(--co-navy) 0%, var(--co-navy-2) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 28px 32px 24px;
    position: relative;
    overflow: hidden;
}
.checkout-page .co-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Single 160px tile (80px stripe + 80px gap) repeated horizontally and
       centered. background-position: center anchors one tile to the card's
       horizontal midline so the visible pattern is symmetric — instead of
       starting flush against the left edge. */
    background-image: linear-gradient(90deg,
        rgba(0, 217, 126, 0.06) 0,
        rgba(0, 217, 126, 0.06) 80px,
        transparent 80px, transparent 160px);
    background-size: 160px 100%;
    background-repeat: repeat-x;
    background-position: center 0;
    pointer-events: none;
}
.checkout-page .co-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    gap: 12px;
    padding-right: 44px;
}
.checkout-page .co-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    flex-wrap: wrap;
}
.checkout-page .co-breadcrumb a.crumb { color: rgba(255,255,255,0.55); text-decoration: none; }
.checkout-page .co-breadcrumb a.crumb:hover { color: #fff; }
.checkout-page .co-breadcrumb .crumb.active { color: #fff; }
.checkout-page .co-breadcrumb .sep { opacity: 0.4; }
.checkout-page .co-hero-actions { display: flex; align-items: center; gap: 12px; }
.checkout-page .co-live-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 59, 48, 0.12);
    border: 1px solid rgba(255, 59, 48, 0.4);
    border-radius: 999px;
    padding: 5px 12px 5px 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}
.checkout-page .co-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--co-red);
    animation: co-pulse 1.6s infinite;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6);
}
@keyframes co-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
.checkout-page .co-close-x {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 32px; height: 32px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    display: grid; place-items: center;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.checkout-page .co-close-x svg { width: 14px; height: 14px; display: block; }
.checkout-page .co-close-x:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); }

/* Matchup */
.checkout-page .co-stage-eyebrow {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--co-amber);
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.checkout-page .co-matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.checkout-page .co-team {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.checkout-page .co-team.away {
    justify-content: flex-end;
    text-align: right;
    flex-direction: row-reverse;
}
.checkout-page .co-crest {
    width: 56px; height: 56px;
    background: #fff;
    color: var(--co-navy);
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.checkout-page .co-crest.alt { background: var(--co-pitch); color: var(--co-navy); }
.checkout-page .co-team-info { min-width: 0; flex: 1; }
.checkout-page .co-team.away .co-team-info { text-align: right; }
.checkout-page .co-team-info .label {
    font-size: 9px;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    margin-bottom: 2px;
    font-weight: 500;
}
.checkout-page .co-team-info .name {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checkout-page .co-vs-pill {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    width: 48px; height: 48px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #fff;
    flex-shrink: 0;
}
/* Single-name event title (non-matchup events) */
.checkout-page .co-event-title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

/* Countdown */
.checkout-page .co-countdown {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 18px;
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.checkout-page .co-countdown-text { display: flex; flex-direction: column; }
.checkout-page .co-countdown-label {
    font-size: 9px;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 500;
}
.checkout-page .co-countdown-value {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--co-amber);
    font-variant-numeric: tabular-nums;
}
.checkout-page .co-countdown-sub {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
    font-weight: 500;
}

/* Meta strip */
.checkout-page .co-meta-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 1;
}
.checkout-page .co-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.85);
    min-width: 0;
}
.checkout-page .co-meta .icon {
    width: 28px; height: 28px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.checkout-page .co-meta .icon svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 1.5; }
.checkout-page .co-meta-text { min-width: 0; }
.checkout-page .co-meta .k {
    font-size: 9px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    font-weight: 500;
}
.checkout-page .co-meta .v {
    font-weight: 600;
    font-size: 13px;
    margin-top: 1px;
    letter-spacing: -0.005em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Pitch stripes */
.checkout-page .co-pitch-stripes {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background-image: repeating-linear-gradient(90deg,
        var(--co-pitch) 0, var(--co-pitch) 40px,
        var(--co-pitch-2) 40px, var(--co-pitch-2) 80px);
}

/* ── Cards ────────────────────────────────────────────────── */
.checkout-page .co-card {
    background: var(--co-paper);
    border-radius: 14px;
    border: 1px solid var(--co-line);
    overflow: hidden;
}
.checkout-page .co-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--co-line-soft);
    background: linear-gradient(180deg, #fafaf6 0%, var(--co-paper) 100%);
}
.checkout-page .co-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.005em;
    color: var(--co-ink);
    flex-shrink: 1;
    min-width: 0;
}
.checkout-page .co-card-title .step {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--co-navy);
    color: #fff;
    display: grid; place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.checkout-page .co-card-title .step.done { background: var(--co-pitch); color: var(--co-navy); }
.checkout-page .co-card-pill {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--co-ink-3);
    text-transform: uppercase;
    font-weight: 500;
    padding: 4px 8px;
    background: var(--co-bg);
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.checkout-page .co-card-pill.green { color: var(--co-pitch-deep); background: rgba(0,217,126,0.1); }
.checkout-page .co-card-pill.amber { color: var(--co-amber-deep); background: rgba(255,184,0,0.12); }
.checkout-page .co-card-body { padding: 24px; }

/* Seat preview */
.checkout-page .co-seat-preview {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--co-line-soft);
    background: var(--co-bg);
}
.checkout-page .co-stadium-svg {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    background: var(--co-navy);
    border-radius: 8px;
    padding: 8px;
    display: block;
}

/* Real venue map (from supplier event.venue.mapUrl) replacing the SVG mock. */
.checkout-page .co-venue-map {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    background: var(--co-navy);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s ease;
    cursor: zoom-in;
}
.checkout-page .co-venue-map:hover { transform: translateY(-1px); }
.checkout-page .co-venue-map img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--co-paper);
    display: block;
}
.checkout-page .co-venue-map-tag {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--co-navy);
    color: #fff;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 7px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0.9;
}
/* If the supplier image 404s, the onerror handler flips this class on so the
   broken-image icon doesn't show — we just leave the navy box visible. */
.checkout-page .co-venue-map--fallback img { display: none; }
.checkout-page .co-venue-map--fallback::before {
    content: "Map unavailable";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.checkout-page .co-seat-info { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.checkout-page .co-seat-info .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--co-line);
    font-size: 12px;
}
.checkout-page .co-seat-info .row:last-child { border-bottom: none; }
.checkout-page .co-seat-info .k {
    color: var(--co-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
}
.checkout-page .co-seat-info .v {
    font-weight: 600;
    color: var(--co-ink);
    font-size: 13px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.checkout-page .co-seat-info .v.green { color: var(--co-pitch-deep); }

/* Mandatory category description block */
.checkout-page .co-cat-desc {
    margin: 0 24px 20px;
    padding: 12px 14px;
    background: rgba(0, 217, 126, 0.05);
    border: 1px solid rgba(0, 217, 126, 0.3);
    border-radius: 10px;
}
.checkout-page .co-cat-desc-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--co-pitch-deep);
    font-weight: 700;
    margin-bottom: 6px;
}
.checkout-page .co-cat-desc-body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--co-ink-2);
}
.checkout-page .co-cat-desc-body p { margin: 0 0 6px; }
.checkout-page .co-cat-desc-body p:last-child { margin: 0; }

/* ── Form fields ──────────────────────────────────────────── */
.checkout-page .co-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.checkout-page .co-grid-2 .co-full { grid-column: 1 / -1; }
.checkout-page .co-field-label {
    display: block;
    font-size: 12px;
    color: var(--co-ink-2);
    margin-bottom: 6px;
    font-weight: 600;
}
.checkout-page .co-field-label .req { color: var(--co-red); margin-left: 2px; }
.checkout-page .co-field-label .opt-tag { color: var(--co-ink-4); font-weight: 400; margin-left: 4px; }
.checkout-page .co-input-wrap { position: relative; }
.checkout-page .co-input-wrap .lead-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--co-ink-4);
    pointer-events: none;
    display: grid; place-items: center;
}
.checkout-page .co-input-wrap .lead-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.checkout-page input.co-input,
.checkout-page select.co-select,
.checkout-page textarea.co-textarea {
    width: 100%;
    background: var(--co-paper);
    border: 1px solid var(--co-line);
    border-radius: 8px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--co-ink);
    outline: none;
    transition: all 0.15s;
    line-height: 1.4;
}
.checkout-page .co-input-wrap.has-icon input.co-input { padding-left: 40px; }
.checkout-page input.co-input::placeholder,
.checkout-page textarea.co-textarea::placeholder {
    color: var(--co-ink-4);
    font-weight: 400;
}
.checkout-page input.co-input:focus,
.checkout-page select.co-select:focus,
.checkout-page textarea.co-textarea:focus {
    border-color: var(--co-navy);
    box-shadow: 0 0 0 3px rgba(10, 22, 40, 0.08);
}
.checkout-page select.co-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235a6a82' stroke-width='1.5' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}
.checkout-page textarea.co-textarea {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

/* ── Option cards (delivery & protection) ────────────────── */
.checkout-page .co-opt-list { display: flex; flex-direction: column; gap: 8px; }
.checkout-page .co-opt {
    border: 1px solid var(--co-line);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    align-items: start;
    background: var(--co-paper);
    position: relative;
}
.checkout-page .co-opt:hover { border-color: var(--co-ink-3); }
.checkout-page .co-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.checkout-page .co-opt:has(input[type="radio"]:checked),
.checkout-page .co-opt.is-selected {
    border-color: var(--co-navy);
    background: linear-gradient(180deg, rgba(10,22,40,0.025), rgba(10,22,40,0.015));
    box-shadow: 0 0 0 1px var(--co-navy);
}
.checkout-page .co-opt-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--co-bg);
    display: grid; place-items: center;
    color: var(--co-ink-2);
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.15s;
}
.checkout-page .co-opt:has(input[type="radio"]:checked) .co-opt-icon,
.checkout-page .co-opt.is-selected .co-opt-icon {
    background: var(--co-navy);
    color: #fff;
}
.checkout-page .co-opt-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.checkout-page .co-opt-body { min-width: 0; }
.checkout-page .co-opt-name {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--co-ink);
}
.checkout-page .co-opt-desc {
    font-size: 13px;
    color: var(--co-ink-3);
    margin-top: 2px;
    line-height: 1.4;
}
.checkout-page .co-opt-bullets {
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    color: var(--co-ink-2);
    line-height: 1.5;
    display: none;
    list-style: none;
}
.checkout-page .co-opt:has(input[type="radio"]:checked) .co-opt-bullets,
.checkout-page .co-opt.is-selected .co-opt-bullets { display: block; }
.checkout-page .co-opt-bullets li {
    padding-left: 18px;
    position: relative;
    margin-bottom: 3px;
}
.checkout-page .co-opt-bullets li::before {
    content: "";
    position: absolute;
    left: 2px; top: 7px;
    width: 8px; height: 4px;
    border-left: 1.5px solid var(--co-pitch);
    border-bottom: 1.5px solid var(--co-pitch);
    transform: rotate(-45deg);
}
.checkout-page .co-opt-price {
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--co-ink);
    white-space: nowrap;
    /* Chip — rectangular tinted bar behind the rate. Tier-specific tint is set
       below via [data-ins-tier]. Keeps the price visually distinct from the
       descriptive copy and gives each option a subtle "fare badge" look. */
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--co-bg-2);
    border: 1px solid var(--co-line);
    box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04);
    justify-self: end;
    align-self: center;
}
.checkout-page .co-opt-terms {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--co-ink-2);
    text-decoration: underline;
    text-decoration-color: var(--co-ink-4);
    text-underline-offset: 2px;
    line-height: 1.4;
}
.checkout-page .co-opt-terms:hover {
    color: var(--co-pitch-deep);
    text-decoration-color: currentColor;
}
.checkout-page .co-opt-price.free {
    color: var(--co-pitch-deep);
    background: rgba(0, 217, 126, 0.10);
    border-color: rgba(0, 217, 126, 0.32);
}
.checkout-page .co-opt[data-ins-tier="event"] .co-opt-price {
    background: rgba(91, 181, 213, 0.12);
    border-color: rgba(91, 181, 213, 0.34);
    color: #2e5a8a;
}
.checkout-page .co-opt[data-ins-tier="umbrella"] .co-opt-price {
    background: rgba(255, 184, 0, 0.14);
    border-color: rgba(255, 184, 0, 0.40);
    color: var(--co-amber-deep);
}
.checkout-page .co-opt-recommended {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--co-amber);
    color: var(--co-navy);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    margin-left: 8px;
    vertical-align: 2px;
}

/* Per-tier accents on insurance option cards (only visible when not selected —
   the .is-selected style takes over with navy/white). Subtle so the option-card
   rhythm stays unified across delivery and protection. */
.checkout-page .co-opt[data-ins-tier="off"]:not(.is-selected) .co-opt-icon {
    color: var(--co-ink-3); /* muted: implies "no premium feature" */
}
.checkout-page .co-opt[data-ins-tier="event"]:not(.is-selected) .co-opt-icon {
    background: rgba(91, 181, 213, 0.14); /* neutral blue accent for standard coverage */
    color: #2e5a8a;
}
.checkout-page .co-opt[data-ins-tier="umbrella"]:not(.is-selected) .co-opt-icon {
    background: rgba(255, 184, 0, 0.18);  /* subtle gold accent — premium tier */
    color: var(--co-amber-deep);
}

/* Hotel / Home delivery sub-blocks */
.checkout-page .co-sub-block {
    margin-top: 14px;
    padding: 14px;
    background: var(--co-bg);
    border: 1px dashed var(--co-line);
    border-radius: 10px;
}
.checkout-page .co-sub-block-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--co-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.checkout-page .co-sub-block-title svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8;
}

/* ── Attendee card ────────────────────────────────────────── */
.checkout-page .co-attendee-card {
    border: 1px solid var(--co-line);
    border-radius: 10px;
    padding: 16px 18px 18px;
    background: var(--co-bg);
    margin-bottom: 12px;
}
.checkout-page .co-attendee-card:last-child { margin-bottom: 0; }
.checkout-page .co-attendee-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--co-line);
    flex-wrap: wrap;
    gap: 8px;
}
.checkout-page .co-attendee-num {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700;
    font-size: 14px;
    color: var(--co-ink);
}
.checkout-page .co-seat-tag {
    font-size: 10px;
    background: var(--co-navy);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.checkout-page .co-attendee-card input.co-input,
.checkout-page .co-attendee-card select.co-select {
    background: var(--co-paper);
}

/* ── Alert ────────────────────────────────────────────────── */
.checkout-page .co-alert {
    background: rgba(255, 184, 0, 0.08);
    border: 1px solid rgba(255, 184, 0, 0.32);
    border-radius: 10px;
    padding: 16px 18px;
}
.checkout-page .co-alert-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.checkout-page .co-alert-head .ico {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--co-amber);
    color: var(--co-navy);
    display: grid; place-items: center;
    font-weight: 800;
    font-size: 13px;
}
.checkout-page .co-alert-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--co-ink);
}
.checkout-page .co-alert-body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--co-ink-2);
}
.checkout-page .co-alert-body p { margin: 0 0 6px; }
.checkout-page .co-alert-body p:last-child { margin: 0; }
.checkout-page .co-alert-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,184,0,0.45);
    cursor: pointer;
    user-select: none;
    position: relative;
}
.checkout-page .co-alert-check input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.checkout-page .co-alert-check .checkbox {
    width: 18px; height: 18px;
    border: 1.5px solid var(--co-ink-2);
    border-radius: 5px;
    flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--co-paper);
    margin-top: 1px;
    transition: all 0.15s;
    position: relative;
}
.checkout-page .co-alert-check.checked .checkbox {
    background: var(--co-navy);
    border-color: var(--co-navy);
}
.checkout-page .co-alert-check.checked .checkbox::after {
    content: "";
    width: 9px; height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}
.checkout-page .co-alert-check-text {
    font-size: 13px;
    color: var(--co-ink);
    line-height: 1.5;
    font-weight: 500;
}

/* ── Side ticket-stub ─────────────────────────────────────── */
.checkout-page .co-ticket {
    background: var(--co-paper);
    border-radius: 14px;
    border: 1px solid var(--co-line);
    overflow: hidden;
    position: relative;
}
.checkout-page .co-ticket-stub {
    background: var(--co-navy);
    color: #fff;
    padding: 18px 20px 22px;
    position: relative;
}
.checkout-page .co-ticket-stub::after {
    content: "";
    position: absolute;
    bottom: -13px; left: 0; right: 0;
    height: 26px;
    /* White punch-outs (was cream), ~30% bigger: radius 7→9, tile 20→26.
       background-position: center 0 anchors a tile to the card's horizontal
       midline so the scalloped pattern is symmetric on both sides. */
    background-image: radial-gradient(circle at 13px 13px, #fff 9px, transparent 10px);
    background-size: 26px 26px;
    background-position: center 0;
    background-repeat: repeat-x;
}
.checkout-page .co-stub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.checkout-page .co-stub-pill {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--co-navy);
    background: var(--co-pitch);
    padding: 3px 7px;
    border-radius: 3px;
    font-weight: 700;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.checkout-page .co-stub-ref {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}
.checkout-page .co-stub-event {
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 8px 0 4px;
}
.checkout-page .co-stub-when {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
}
.checkout-page .co-ticket-body { padding: 20px; }
.checkout-page .co-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    font-size: 13px;
    gap: 12px;
}
.checkout-page .co-summary-line .desc {
    color: var(--co-ink-2);
    flex: 1;
    min-width: 0;
}
.checkout-page .co-summary-line .desc small {
    display: block;
    color: var(--co-ink-4);
    font-size: 11px;
    margin-top: 1px;
    font-weight: 500;
}
.checkout-page .co-summary-line .amt {
    font-weight: 600;
    color: var(--co-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.checkout-page .co-summary-line .amt.free { color: var(--co-pitch-deep); }
.checkout-page .co-summary-divider {
    height: 1px;
    background-image: linear-gradient(90deg, var(--co-line) 50%, transparent 0);
    background-size: 8px 1px;
    margin: 8px 0;
}
.checkout-page .co-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1.5px solid var(--co-ink);
    gap: 12px;
}
.checkout-page .co-summary-total .lbl {
    font-weight: 700;
    font-size: 15px;
    color: var(--co-ink);
}
.checkout-page .co-summary-total .val {
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--co-ink);
}

/* Place Order button */
.checkout-page .co-place-order {
    width: 100%;
    background: var(--co-pitch);
    color: var(--co-navy);
    border: none;
    padding: 16px 20px;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.005em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    transition: all 0.15s;
    box-shadow: 0 2px 0 var(--co-pitch-deep);
}
.checkout-page .co-place-order:hover:not(:disabled) {
    background: var(--co-pitch-2);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--co-pitch-deep);
}
.checkout-page .co-place-order:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 0 0 var(--co-pitch-deep);
}
.checkout-page .co-place-order .total-px {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.checkout-page .co-place-order:disabled {
    background: var(--co-ink-4);
    color: rgba(255,255,255,0.85);
    box-shadow: 0 2px 0 var(--co-ink-3);
    cursor: not-allowed;
}
.checkout-page .co-secure-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 4px;
    font-size: 11px;
    color: var(--co-ink-3);
    justify-content: center;
    font-weight: 500;
}
.checkout-page .co-secure-note svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8;
}
.checkout-page .co-trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: var(--co-paper);
    border: 1px solid var(--co-line);
    border-radius: 10px;
    padding: 12px;
}
.checkout-page .co-trust-cell {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px;
    color: var(--co-ink-2);
    font-weight: 500;
    line-height: 1.3;
}
.checkout-page .co-trust-cell .ico {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: rgba(0,217,126,0.12);
    color: var(--co-pitch-deep);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.checkout-page .co-trust-cell .ico svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2;
}

/* While a payment session is being created the page is locked — no fiddling
   with delivery, insurance, attendees or contact info while the server is
   binding those values into the signed booking_token. */
.checkout-page--processing .co-card,
.checkout-page--processing .co-alert,
.checkout-page--processing .co-trust-row {
    pointer-events: none;
    opacity: 0.65;
    transition: opacity 0.18s ease;
}
.checkout-page--processing .checkout-side .co-place-order {
    cursor: wait;
}
/* The side stub stays interactive only enough to show the disabled button
   and progress text — total/breakdown reading is fine, no inputs in there. */
.checkout-page--processing .co-ticket {
    pointer-events: none;
}

/* Loading shimmer used while insurance is being fetched */
.checkout-page .co-loading-row {
    height: 70px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--co-bg-2) 0%, var(--co-bg) 50%, var(--co-bg-2) 100%);
    background-size: 200% 100%;
    animation: co-shimmer 1.4s infinite;
}
@keyframes co-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 980px) {
    .checkout-shell {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .checkout-side { position: static; order: 2; }
    .checkout-main { order: 1; }
    .checkout-page { padding: 20px 12px 48px; }
}
@media (max-width: 720px) {
    .checkout-page { padding: 12px 8px 32px; }
    .checkout-page .co-hero { padding: 18px 18px 16px; border-radius: 12px; }
    .checkout-page .co-team-info .name { font-size: 16px; }
    .checkout-page .co-crest { width: 48px; height: 48px; font-size: 16px; }
    .checkout-page .co-vs-pill { width: 38px; height: 38px; font-size: 10px; }
    .checkout-page .co-meta-strip { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
    .checkout-page .co-card-header { padding: 14px 16px; }
    .checkout-page .co-card-body { padding: 16px; }
    .checkout-page .co-seat-preview { grid-template-columns: 140px 1fr; gap: 14px; padding: 16px; }
    .checkout-page .co-cat-desc { margin: 0 16px 16px; }
    .checkout-page .co-grid-2 { grid-template-columns: 1fr; gap: 12px; }
    .checkout-page .co-event-title { font-size: 18px; }
    .checkout-page .co-countdown-value { font-size: 18px; }
    .checkout-page .co-summary-total .val { font-size: 22px; }
    .checkout-page .co-place-order { font-size: 14px; padding: 14px 16px; }
}
@media (max-width: 480px) {
    .checkout-page .co-hero { padding: 16px 14px 14px; }
    .checkout-page .co-hero-top { margin-bottom: 16px; }
    .checkout-page .co-close-x { width: 26px; height: 26px; top: 12px; right: 12px; }
    .checkout-page .co-close-x svg { width: 11px; height: 11px; }
    .checkout-page .co-hero-top { padding-right: 36px; }
    .checkout-page .co-matchup { gap: 8px; }
    .checkout-page .co-team { gap: 10px; }
    .checkout-page .co-crest { width: 42px; height: 42px; font-size: 14px; }
    .checkout-page .co-team-info .name { font-size: 14px; }
    .checkout-page .co-team-info .label { font-size: 8px; }
    .checkout-page .co-vs-pill { width: 32px; height: 32px; font-size: 9px; }
    .checkout-page .co-meta-strip { padding-top: 14px; margin-top: 16px; }
    .checkout-page .co-meta .v { font-size: 12px; }
    .checkout-page .co-card-header {
        padding: 12px 14px;
        gap: 8px;
    }
    .checkout-page .co-card-title { font-size: 14px; }
    .checkout-page .co-card-pill { font-size: 9px; padding: 3px 7px; }
    .checkout-page .co-card-body { padding: 14px; }
    .checkout-page .co-seat-preview {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .checkout-page .co-stadium-svg { max-width: 200px; margin: 0 auto; }
    .checkout-page .co-trust-row { grid-template-columns: 1fr; }
    .checkout-page .co-opt { grid-template-columns: 32px 1fr; }
    .checkout-page .co-opt-price {
        grid-column: 1 / -1;
        justify-self: start;
        margin-left: 46px;
        margin-top: 12px;
    }
    .checkout-page .co-opt-icon { width: 32px; height: 32px; }
}
@media (max-width: 380px) {
    .checkout-page .co-hero { padding: 14px; }
    .checkout-page .co-meta-strip { grid-template-columns: 1fr; gap: 10px; }
    .checkout-page .co-attendee-head { flex-direction: column; align-items: flex-start; }
    .checkout-page .co-stub-event { font-size: 14px; }
}

/* ============================================================
   CAMPAIGN LANDING PAGES (chromeless subdomains)
   ------------------------------------------------------------
   Everything here is scoped under body.lp-mode or the
   .premium-tournament / .premium-day-* classes, so none of it can
   affect the main www.eventtkts.com site. Loaded for the focused
   Wimbledon + World Cup subdomains via landing.html.
   ============================================================ */

/* Full lockdown — remove any in-page route off the funnel. The header/footer
   aren't in landing.html at all; this hides the remaining in-content escape
   hatches (Back chip, breadcrumbs) so the visitor stays on the campaign page. */
body.lp-mode .premium-back,
body.lp-mode .breadcrumb,
body.lp-mode .tournament-hero-crumbs { display: none !important; }

/* The chromeless shell has no sticky header taking layout space, so the
   full-width premium page already flows from the very top. Guard against any
   stray top padding. */
body.lp-mode .main-content { padding-top: 0; }

/* ---- Premium tournament: day / session list ----
   The day cards reuse the football page's .premium-ticket-card / .ptk-* styles
   verbatim, so only the section wrapper + the "Check availability" price slot
   (the tournament listing has no per-day price) need bespoke rules here. */
.premium-tournament .premium-days-section {
    max-width: 1480px;
    margin: 0 auto;
    padding: 40px 32px 8px;
}
.premium-days-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
/* "Check availability" sits where the price normally goes on a ticket card. */
.ptk-price-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lime-deep);
    font-weight: 600;
    text-align: right;
}
.ptk-price-check i, .ptk-price-check svg {
    width: 14px; height: 14px;
    color: var(--lime-deep);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .premium-tournament .premium-days-section { padding: 28px 16px 4px; }
}