/* Floodlit — Ticketscore.net homepage design system.
   Dark editorial, condensed display, acid-lime signature.
   Used site-wide via layout.twig; standalone on ticketscore.net/ + /search. */

/* Anton — SIL OFL. Impact-alternative loaded so mobile devices (iOS Safari,
   Android without a bundled Impact) get a consistent condensed display
   face. Desktops with real Impact installed still use Impact first (which
   gives the "nested-letter" hallucination that makes the wordmark
   distinctive). font-display: swap prevents any flash of invisible text. */
@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/Anton-Regular.ttf') format('truetype');
}

/* Visually-hidden utility for screen readers + SEO anchors (semantic h1s
   that shouldn't compete with the visual hero). Standard a11y pattern. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------- Site-wide shell + Tailwind compat --------
   When body has .fl-shell, Tailwind's slate palette is remapped to the
   Floodlit dark palette so existing page templates keep working without
   per-file changes. Scoped to .fl-shell so /hq admin stays light.        */

body.fl-shell {
    background: #0a0d10;
    color: #eef1f5;
}
body.fl-shell .bg-white              { background: #14181f; }
body.fl-shell .bg-slate-50           { background: #0a0d10; }
body.fl-shell .bg-slate-100          { background: #1c222b; }
body.fl-shell .bg-slate-200          { background: #262d38; }

body.fl-shell .text-slate-900,
body.fl-shell .text-slate-800,
body.fl-shell .text-slate-700        { color: #eef1f5; }
body.fl-shell .text-slate-600,
body.fl-shell .text-slate-500,
body.fl-shell .text-slate-400        { color: #7a8494; }

body.fl-shell .border,
body.fl-shell .border-slate-100,
body.fl-shell .border-slate-200,
body.fl-shell .border-slate-300      { border-color: #262d38; }

body.fl-shell .divide-slate-100 > * + *,
body.fl-shell .divide-slate-200 > * + * { border-color: #262d38; }

body.fl-shell .hover\:bg-slate-50:hover,
body.fl-shell .hover\:bg-slate-100:hover { background: #1c222b; }

body.fl-shell .hover\:text-slate-600:hover,
body.fl-shell .hover\:text-slate-700:hover,
body.fl-shell .hover\:text-slate-800:hover,
body.fl-shell .hover\:text-slate-900:hover { color: var(--accent); }

/* Dark hero/cta blocks that were already dark stay dark, only rounding/glow tweak. */
body.fl-shell .bg-slate-900          { background: #0a0d10; }
body.fl-shell .bg-slate-950          { background: #050709; }

/* Shadows disappear on dark grounds — swap for a subtle stacked shadow. */
body.fl-shell .shadow,
body.fl-shell .shadow-sm,
body.fl-shell .shadow-md,
body.fl-shell .shadow-lg,
body.fl-shell .shadow-xl             { box-shadow: 0 6px 24px rgba(0,0,0,0.4); }

/* Rings + focus states — recolour to accent. */
body.fl-shell .ring-slate-200,
body.fl-shell .ring-slate-300        { --tw-ring-color: #262d38; }
body.fl-shell input:focus,
body.fl-shell select:focus,
body.fl-shell textarea:focus         { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Inputs — dark surface with visible border. */
body.fl-shell input[type="text"],
body.fl-shell input[type="email"],
body.fl-shell input[type="password"],
body.fl-shell input[type="number"],
body.fl-shell input[type="search"],
body.fl-shell input[type="tel"],
body.fl-shell input[type="url"],
body.fl-shell input[type="date"],
body.fl-shell input[type="datetime-local"],
body.fl-shell select,
body.fl-shell textarea {
    background: #14181f;
    color: #eef1f5;
    border-color: #262d38;
}
body.fl-shell input::placeholder,
body.fl-shell textarea::placeholder  { color: #4b5361; }

/* Primary buttons that used bg-slate-900 → accent CTA. */
body.fl-shell .bg-gradient-to-r      { background: linear-gradient(135deg, #14181f, #1c222b); }

/* Currency picker in nav — inherits our select overrides, but strip border/bg for chrome look. */
.fl-currency select {
    background: transparent !important;
    border: 0 !important;
    color: #eef1f5;
    padding: 4px 20px 4px 4px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237a8494' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 10px auto !important;
}
.fl-currency select:hover { color: var(--accent); }
.fl-currency select option { background: #14181f; color: #eef1f5; }

/* Cart button in nav — accent pill matching .fl-sell */
.fl-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #0a0d10;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.fl-cart svg { width: 14px; height: 14px; }
.fl-cart.hidden { display: none; }

/* Full footer (site-wide) — richer than the compact home footer.
   The single-line footer used inside home.twig content is .fl-footer (below). */
.fl-footer-full {
    background: #14181f;
    border-top: 1px solid #262d38;
    margin-top: 64px;
    color: #7a8494;
    font-size: 14px;
    line-height: 1.55;
}
.fl-footer-cols {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    padding: 48px 32px 32px;
}
.fl-footer-cols p { color: #7a8494; margin: 8px 0 0; max-width: 40em; }
.fl-logo-footer {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    line-height: 1;
}
.fl-logo-footer .fl-logo-img {
    height: 42px;
}
.fl-footer-heading {
    color: #eef1f5;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}
.fl-footer-full ul { margin: 0; padding: 0; list-style: none; }
.fl-footer-full li { padding: 5px 0; }
.fl-footer-full a { transition: color 0.15s; }
.fl-footer-full a:hover { color: var(--accent); }
.fl-footer-legal {
    border-top: 1px solid #262d38;
    padding: 18px 32px;
    max-width: 1280px;
    margin: 0 auto;
}
.fl-footer-legal p { font-size: 12px; margin: 0; }

@media (max-width: 720px) {
    .fl-footer-cols { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px 20px; }
    .fl-footer-legal { padding: 16px 20px; }
}

/* -------- FanSure — the buyer-protection brand mark --------
   Escrow-backed guarantee. Renders in three sizes:
   .fl-fansure-sm   — card corner badge (11px)
   .fl-fansure      — inline pill (13px, most placements)
   .fl-fansure-lg   — hero / landing-page mark (24px+)                  */

.fl-fansure,
.fl-fansure-sm,
.fl-fansure-lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Impact, 'Haettenschweiler', 'Franklin Gothic Medium', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 400;
    line-height: 1;
}
.fl-fansure { font-size: 13px; }
.fl-fansure-sm { font-size: 10px; letter-spacing: 0.14em; gap: 4px; }
.fl-fansure-lg { font-size: 28px; gap: 10px; }
.fl-fansure-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex: none;
}
.fl-fansure    .fl-fansure-icon { width: 14px; height: 14px; }
.fl-fansure-sm .fl-fansure-icon { width: 11px; height: 11px; }
.fl-fansure-lg .fl-fansure-icon { width: 26px; height: 26px; }
.fl-fansure .fs-sure,
.fl-fansure-sm .fs-sure,
.fl-fansure-lg .fs-sure { color: var(--accent); }
.fl-fansure .fs-fan,
.fl-fansure-sm .fs-fan,
.fl-fansure-lg .fs-fan { color: inherit; }

/* Filled chip variant (for use on photo backgrounds) */
.fl-fansure-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0a0d10;
    padding: 6px 10px;
    font-family: Impact, sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1;
}
.fl-fansure-chip .fl-fansure-icon { width: 12px; height: 12px; color: var(--accent); }
.fl-fansure-chip .fs-fan { color: #eef1f5; }
.fl-fansure-chip .fs-sure { color: var(--accent); }

/* Position — bottom-right of card photo, subtle trust anchor. */
.fl-card-fansure,
.fl-match-fansure {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
}

/* -------- Content pages (FAQ, how-it-works, blog, contact, static) -------- */

/* Page hero (narrower + calmer than home hero, one accent light) */
.fl-page-hero {
    padding: 72px 32px 56px;
    border-bottom: 1px solid #262d38;
    background: linear-gradient(180deg, #0a0d10 0%, #050709 100%);
    position: relative;
    overflow: hidden;
}
.fl-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 300px at 15% 30%, rgba(217, 255, 63, 0.06), transparent 60%),
        repeating-linear-gradient(90deg, rgba(217, 255, 63, 0.025) 0 1px, transparent 1px 44px);
    pointer-events: none;
}
.fl-page-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; }
.fl-page-eyebrow {
    display: inline-block;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: var(--accent);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 400;
}
.fl-page-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: clamp(44px, 6vw, 84px);
    line-height: 0.95;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 20px;
    font-weight: 400;
    color: #eef1f5;
    text-wrap: balance;
}
.fl-page-lede {
    font-size: 18px;
    color: #7a8494;
    max-width: 640px;
    line-height: 1.5;
    margin: 0;
}

/* Content container + sections */
.fl-content { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.fl-content-section {
    padding: 56px 0;
    border-bottom: 1px solid #262d38;
}
.fl-content-section:last-child { border-bottom: 0; }
.fl-content-section > .fl-h2:first-child { margin-top: 0; }

/* ==================== TEAMS INDEX ==================== */
.fl-empty {
    background: #14181f;
    border: 1px dashed #262d38;
    padding: 56px 24px;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.fl-empty h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0 0 8px;
    font-weight: 400;
    color: #eef1f5;
}
.fl-empty p { color: #7a8494; margin: 0; font-size: 14px; }

.fl-teams-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 0 32px;
    border-bottom: 1px solid #262d38;
    margin-bottom: 40px;
}
.fl-teams-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #14181f;
    border: 1px solid #262d38;
    color: #eef1f5;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.fl-teams-chip:hover { border-color: var(--accent); color: var(--accent); }
.fl-teams-chip-count {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    padding: 2px 6px;
    background: rgba(217, 255, 63, 0.08);
    border-radius: 2px;
}

.fl-teams-group { margin-bottom: 56px; scroll-margin-top: 40px; }
.fl-teams-group:last-child { margin-bottom: 0; }
.fl-teams-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #262d38;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.fl-teams-group-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0;
    font-weight: 400;
}
.fl-teams-group-count {
    font-size: 12px;
    color: #7a8494;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
}

.fl-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.fl-team-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 16px;
    background: #14181f;
    border: 1px solid #262d38;
    color: #eef1f5;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
    min-height: 92px;
}
.fl-team-tile:hover {
    border-color: var(--accent);
    background: #181c24;
}
.fl-team-tile-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: #eef1f5;
    text-transform: none;
}
.fl-team-tile-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
}
.fl-team-tile-count {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}
.fl-team-tile-next {
    font-size: 12px;
    color: #7a8494;
}

@media (max-width: 640px) {
    .fl-teams-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .fl-team-tile-name { font-size: 17px; }
    .fl-teams-group-title { font-size: 24px; }
}
.fl-h2 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 28px;
    font-weight: 400;
    color: #eef1f5;
}
.fl-h2 .accent { color: var(--accent); }
.fl-body {
    font-size: 16px;
    line-height: 1.65;
    color: #b8c0cc;
    max-width: 640px;
}
.fl-body p { margin: 0 0 16px; }
.fl-body p:last-child { margin: 0; }
.fl-body strong { color: #eef1f5; }
.fl-body a {
    color: var(--accent);
    border-bottom: 1px solid rgba(217, 255, 63, 0.3);
    transition: border-color 0.15s;
}
.fl-body a:hover { border-color: var(--accent); }
.fl-body code {
    font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    background: #14181f;
    border: 1px solid #262d38;
    padding: 1px 6px;
    font-size: 0.9em;
    color: #eef1f5;
}

/* Numbered step list (how-it-works) */
.fl-steps {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fl-steps li {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 24px;
    align-items: baseline;
}
.fl-step-num {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 64px;
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    text-align: right;
    padding-top: 6px;
}
.fl-step-content h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: #eef1f5;
}
.fl-step-content p {
    font-size: 15px;
    line-height: 1.55;
    color: #b8c0cc;
    margin: 0;
    max-width: 60ch;
}

/* Feature card grid (benefit tiles) */
.fl-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.fl-feature {
    background: #14181f;
    border: 1px solid #262d38;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s;
}
.fl-feature:hover { border-color: var(--accent); }
.fl-feature h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 4px;
    font-weight: 400;
    color: #eef1f5;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fl-feature h3::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--accent);
    transform: rotate(45deg);
    flex: none;
}
.fl-feature p {
    font-size: 14px;
    line-height: 1.55;
    color: #b8c0cc;
    margin: 0;
}

/* FAQ accordion (native <details>) */
.fl-faq { max-width: 800px; }
.fl-faq details {
    border-bottom: 1px solid #262d38;
    padding: 20px 0;
}
.fl-faq details:first-of-type { border-top: 1px solid #262d38; }
.fl-faq summary {
    list-style: none;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: #eef1f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 4px 0;
    transition: color 0.15s;
}
.fl-faq summary:hover { color: var(--accent); }
.fl-faq summary::-webkit-details-marker { display: none; }
.fl-faq summary::after {
    content: '+';
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 26px;
    color: var(--accent);
    line-height: 1;
    flex: none;
    transition: transform 0.2s;
}
.fl-faq details[open] summary::after { content: '−'; }
.fl-faq-body {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.65;
    color: #b8c0cc;
}
.fl-faq-body p { margin: 0 0 12px; }
.fl-faq-body p:last-child { margin: 0; }
.fl-faq-body a { color: var(--accent); border-bottom: 1px solid rgba(217, 255, 63, 0.3); }
.fl-faq-body a:hover { border-color: var(--accent); }
.fl-faq-group + .fl-faq-group { margin-top: 40px; }
.fl-faq-group-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a8494;
    margin: 0 0 4px;
    font-weight: 400;
}

/* Blog index grid */
.fl-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.fl-blog-card {
    background: #14181f;
    border: 1px solid #262d38;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s, transform 0.15s;
    text-decoration: none;
}
.fl-blog-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.fl-blog-card-meta {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 400;
}
.fl-blog-card h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
    color: #eef1f5;
}
.fl-blog-card p {
    font-size: 14px;
    line-height: 1.55;
    color: #b8c0cc;
    margin: 0;
}
.fl-blog-card-cta {
    margin-top: auto;
    font-size: 13px;
    color: #eef1f5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Blog article body */
.fl-article {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 32px 40px;
}
.fl-article-back {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    margin-bottom: 24px;
    transition: color 0.15s;
}
.fl-article-back:hover { color: var(--accent); }
.fl-article-meta {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
    font-weight: 400;
}
.fl-article-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 20px;
    font-weight: 400;
    color: #eef1f5;
    text-wrap: balance;
}
.fl-article-byline {
    color: #7a8494;
    font-size: 14px;
    letter-spacing: 0.02em;
    margin: 0 0 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #262d38;
}
.fl-article-body {
    font-size: 17px;
    line-height: 1.7;
    color: #b8c0cc;
}
.fl-article-body h2 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 40px 0 16px;
    font-weight: 400;
    color: #eef1f5;
}
.fl-article-body h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 32px 0 12px;
    color: #eef1f5;
}
.fl-article-body p { margin: 0 0 20px; }
.fl-article-body strong { color: #eef1f5; }
.fl-article-body a {
    color: var(--accent);
    border-bottom: 1px solid rgba(217, 255, 63, 0.3);
}
.fl-article-body a:hover { border-color: var(--accent); }
.fl-article-body ul,
.fl-article-body ol { padding-left: 22px; margin: 0 0 20px; }
.fl-article-body li { margin-bottom: 8px; }
.fl-article-body blockquote {
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px 20px;
    margin: 24px 0;
    color: #eef1f5;
    font-style: italic;
}
.fl-article-nav {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid #262d38;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.fl-article-nav-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}
.fl-article-nav-item:last-child { text-align: right; }
.fl-article-nav-item .label {
    font-family: Impact, sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 400;
}
.fl-article-nav-item a {
    color: #eef1f5;
    font-weight: 600;
    transition: color 0.15s;
}
.fl-article-nav-item a:hover { color: var(--accent); }

/* Contact tiles */
.fl-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.fl-contact-tile {
    background: #14181f;
    border: 1px solid #262d38;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s;
}
.fl-contact-tile:hover { border-color: var(--accent); }
.fl-contact-tile-label {
    font-family: Impact, sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    margin-bottom: 4px;
    font-weight: 400;
}
.fl-contact-tile-value {
    font-size: 20px;
    font-weight: 700;
    color: #eef1f5;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.fl-contact-tile-value a { color: var(--accent); }
.fl-contact-tile p {
    font-size: 14px;
    line-height: 1.55;
    color: #b8c0cc;
    margin: 0;
}

/* Inline CTA button */
.fl-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent);
    color: #0a0d10;
    padding: 12px 22px;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.15s;
    font-weight: 400;
    text-decoration: none;
}
.fl-btn:hover { transform: translateY(-1px); }
.fl-btn-ghost {
    background: transparent;
    color: #eef1f5;
    border: 1px solid #262d38;
}
.fl-btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: none; }

@media (max-width: 720px) {
    .fl-page-hero { padding: 56px 20px 40px; }
    .fl-content { padding: 0 20px; }
    .fl-content-section { padding: 40px 0; }
    .fl-h2 { font-size: 32px; }
    .fl-steps li { grid-template-columns: 56px 1fr; gap: 16px; }
    .fl-step-num { font-size: 44px; }
    .fl-features { grid-template-columns: 1fr; }
    .fl-blog-grid { grid-template-columns: 1fr; }
    .fl-article { padding: 40px 20px 32px; }
    .fl-article-nav { grid-template-columns: 1fr; }
    .fl-article-nav-item:last-child { text-align: left; }
    .fl-contact-grid { grid-template-columns: 1fr; }
}

/* -------- Cart / checkout page (/cart) -------- */

.fl-mono {
    font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.fl-cart-loading, .fl-cart-empty {
    padding: 60px 24px;
    text-align: center;
    color: #7a8494;
}
.fl-cart-empty {
    background: #14181f;
    border: 1px dashed #262d38;
}
.fl-cart-empty h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 26px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0 0 8px;
    font-weight: 400;
}
.fl-cart-empty p { margin: 0; font-size: 14px; }

.fl-cart-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 32px;
    align-items: flex-start;
}
.fl-cart-grid.hidden { display: none; }
.fl-cart-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fl-cart-side { min-width: 0; }
.fl-cart-sticky { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }

.fl-cart-block {
    background: #14181f;
    border: 1px solid #262d38;
    padding: 24px;
}
.fl-cart-block h2, .fl-cart-block-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 20px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0 0 16px;
    font-weight: 400;
}
.fl-cart-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.fl-cart-block-head h2 { margin: 0; }
.fl-cart-block-head span {
    font-size: 12px;
    color: #7a8494;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fl-cart-items { display: flex; flex-direction: column; gap: 10px; }
.fl-cart-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    background: #0a0d10;
    border: 1px solid #262d38;
    padding: 16px 18px;
}
.fl-cart-item-info { min-width: 0; }
.fl-cart-item-title {
    font-size: 15px;
    font-weight: 700;
    color: #eef1f5;
    letter-spacing: -0.005em;
    margin-bottom: 3px;
}
.fl-cart-item-meta {
    font-size: 12px;
    color: #7a8494;
    margin-bottom: 3px;
}
.fl-cart-item-seat {
    font-size: 12px;
    color: #b8c0cc;
}
.fl-cart-item select.cart-qty {
    background: #14181f;
    border: 1px solid #262d38;
    color: #eef1f5;
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}
.fl-cart-item-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    text-align: right;
    min-width: 90px;
}
.fl-cart-item-remove {
    background: transparent;
    border: 0;
    color: #4b5361;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
}
.fl-cart-item-remove:hover { color: #ff4d3d; }

/* Form fields */
.fl-cart-form { display: flex; flex-direction: column; gap: 16px; }
.fl-cart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fl-cart-field { display: flex; flex-direction: column; gap: 6px; }
.fl-cart-field label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
}
.fl-cart-field input {
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.fl-cart-field input:focus { border-color: var(--accent); }
.fl-cart-field input::placeholder { color: #4b5361; }
.fl-cart-hint {
    font-size: 11px;
    color: #7a8494;
    margin: 0;
    line-height: 1.4;
}
.fl-cart-error {
    background: rgba(255, 77, 61, 0.1);
    border: 1px solid rgba(255, 77, 61, 0.3);
    color: #ff9285;
    padding: 10px 12px;
    font-size: 12px;
}

/* Phone */
.fl-phone { display: flex; }
.fl-phone-country {
    position: relative;
    display: flex;
    align-items: center;
}
.fl-phone-country .fi {
    position: absolute;
    left: 10px;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}
.fl-phone-country select {
    padding: 10px 24px 10px 38px;
    background: #0a0d10;
    border: 1px solid #262d38;
    border-right: 0;
    color: #eef1f5;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}
.fl-phone input {
    flex: 1;
    min-width: 0;
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.fl-phone input:focus { border-color: var(--accent); }

/* Toggle switches */
.fl-cart-toggles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #262d38;
}
.fl-cart-toggle {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 12px;
    color: #b8c0cc;
    line-height: 1.5;
    cursor: pointer;
}
.fl-cart-toggle a { color: var(--accent); }
.fl-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex: none;
    margin-top: 2px;
}
.fl-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.fl-switch > span {
    position: absolute;
    inset: 0;
    background: #262d38;
    border-radius: 999px;
    transition: background 0.15s;
}
.fl-switch > span::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #eef1f5;
    border-radius: 50%;
    transition: transform 0.15s;
}
.fl-switch input:checked + span { background: var(--accent); }
.fl-switch input:checked + span::before { transform: translateX(16px); background: #0a0d10; }

.fl-cart-submit { width: 100%; justify-content: center; margin-top: 8px; }
.fl-cart-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Order summary */
.fl-cart-summary { display: flex; flex-direction: column; gap: 8px; }
.fl-cart-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    color: #b8c0cc;
    line-height: 1.4;
    align-items: baseline;
}
.fl-cart-line small { color: #4b5361; font-size: 11px; display: block; margin-top: 2px; }
.fl-cart-line.hidden { display: none; }
.fl-cart-line-discount { color: var(--accent); }
.fl-cart-total {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid #262d38;
}
.fl-cart-total .fl-mono { color: var(--accent); font-family: Impact, sans-serif; letter-spacing: 0.02em; }

/* Voucher */
.fl-cart-voucher {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #262d38;
}
.fl-cart-voucher-toggle {
    background: transparent;
    border: 0;
    color: #eef1f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
}
.fl-cart-voucher-toggle:hover { color: var(--accent); }
.fl-cart-voucher-toggle svg { width: 14px; height: 14px; color: #7a8494; transition: transform 0.15s; }
.fl-cart-voucher-panel { margin-top: 12px; }
.fl-cart-voucher-panel.hidden { display: none; }
.fl-cart-voucher-panel form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fl-cart-voucher-panel input {
    flex: 1;
    min-width: 100px;
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    padding: 8px 10px;
    font: inherit;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    text-transform: uppercase;
    outline: none;
}
.fl-cart-voucher-panel input:focus { border-color: var(--accent); }
.fl-cart-voucher-panel button {
    background: var(--accent);
    border: 0;
    color: #0a0d10;
    padding: 8px 14px;
    font: inherit;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.fl-cart-voucher-panel button.ghost {
    background: transparent;
    border: 1px solid #262d38;
    color: #eef1f5;
}
.fl-cart-voucher-panel button.ghost.hidden,
.fl-cart-voucher-panel button.hidden { display: none; }
.fl-voucher-msg {
    margin-top: 8px;
    font-size: 12px;
}
.fl-voucher-msg.ok { color: var(--accent); }
.fl-voucher-msg.err { color: #ff9285; }
.fl-voucher-msg.warn { color: #f5b423; }
.fl-voucher-msg.hidden { display: none; }

/* Bundle offer */
.fl-cart-bundle {
    background: linear-gradient(135deg, rgba(217, 255, 63, 0.05), rgba(217, 255, 63, 0));
    border: 1px solid rgba(217, 255, 63, 0.3);
    padding: 20px 22px;
}
.fl-cart-bundle.hidden { display: none; }
.fl-cart-bundle-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.fl-cart-bundle h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 20px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0 0 8px;
    font-weight: 400;
}
.fl-cart-bundle p {
    font-size: 12px;
    color: #b8c0cc;
    margin: 0 0 12px;
    line-height: 1.5;
}
.fl-cart-bundle-note {
    font-size: 11px;
    color: #7a8494;
    font-style: italic;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}
.fl-cart-bundle .fl-btn { font-size: 13px; padding: 10px 16px; }
.fl-cart-bundle #bundle-offer-applied.hidden,
.fl-cart-bundle #bundle-offer-cta.hidden { display: none; }

/* FanSure trust block */
.fl-cart-fansure { }
.fl-cart-fansure-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
}
.fl-cart-fansure-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
    color: #b8c0cc;
    line-height: 1.5;
}
.fl-cart-fansure-body strong { color: #eef1f5; font-weight: 600; display: block; margin-bottom: 2px; }

.hidden { display: none; }

@media (max-width: 900px) {
    .fl-cart-grid { grid-template-columns: 1fr; }
    .fl-cart-sticky { position: static; }
    .fl-cart-item { grid-template-columns: 1fr auto; grid-template-areas: "info remove" "select price"; }
    .fl-cart-item-info { grid-area: info; }
    .fl-cart-item select.cart-qty { grid-area: select; justify-self: start; }
    .fl-cart-item-price { grid-area: price; justify-self: end; }
    .fl-cart-item-remove { grid-area: remove; justify-self: end; }
    .fl-cart-row { grid-template-columns: 1fr; }
}

/* -------- Payment page (/orders/{ref}/pay) -------- */

.fl-pay-frame {
    padding: 12px;
    min-height: 620px;
}
.fl-pay-frame #checkout {
    background: #ffffff;
    min-height: 600px;
}
.fl-pay-loading {
    padding: 80px 24px;
    text-align: center;
    color: #7a8494;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.fl-pay-error {
    padding: 60px 24px;
    text-align: center;
    color: #b8c0cc;
}
.fl-pay-error-mark {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 77, 61, 0.15);
    color: #ff4d3d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}
.fl-pay-error-title {
    font-family: Impact, sans-serif;
    color: #eef1f5;
    font-size: 22px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.fl-pay-error p { max-width: 380px; margin: 0 auto; font-size: 14px; }

.fl-pay-items { display: flex; flex-direction: column; gap: 14px; }
.fl-pay-item {
    padding-bottom: 14px;
    border-bottom: 1px solid #262d38;
}
.fl-pay-item:last-child { border-bottom: 0; padding-bottom: 0; }
.fl-pay-item-title {
    font-size: 14px;
    font-weight: 700;
    color: #eef1f5;
    letter-spacing: -0.005em;
}
.fl-pay-item-meta {
    font-size: 12px;
    color: #7a8494;
    margin-top: 2px;
}
.fl-pay-item-seat {
    font-size: 12px;
    color: #b8c0cc;
    margin-top: 3px;
}
.fl-pay-item-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #b8c0cc;
    margin-top: 6px;
}

/* Hero trust-icons row */
.fl-pay-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px 32px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #262d38;
}
.fl-pay-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.fl-pay-trust-item svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
    flex: none;
    margin-top: 2px;
}
.fl-pay-trust-item > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fl-pay-trust-item strong {
    color: #eef1f5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.fl-pay-trust-item span {
    color: #7a8494;
    font-size: 12px;
}

/* Order reference chip at top of summary */
.fl-pay-ref {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #262d38;
}
.fl-pay-ref-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
}
.fl-pay-ref-value {
    font-size: 13px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* -------- Team page fixture list (/team/{slug}) -------- */

.fl-fixture-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fl-fixture-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 16px 20px;
    background: #14181f;
    border: 1px solid #262d38;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.fl-fixture-row:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.fl-fixture-date {
    text-align: center;
    line-height: 1;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: #7a8494;
}
.fl-fixture-date .mo {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: 4px;
}
.fl-fixture-date .day {
    font-size: 32px;
    color: #eef1f5;
    letter-spacing: 0.005em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}
.fl-fixture-date .dow {
    font-size: 10px;
    letter-spacing: 0.16em;
    color: #4b5361;
}
.fl-fixture-info { min-width: 0; }
.fl-fixture-stage {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
    margin-bottom: 4px;
}
.fl-fixture-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #eef1f5;
    line-height: 1.25;
    margin-bottom: 4px;
}
.fl-fixture-title .vs { color: #7a8494; font-weight: 400; }
.fl-fixture-meta {
    font-size: 12px;
    color: #7a8494;
}
.fl-fixture-price {
    text-align: right;
    min-width: 110px;
}
.fl-fixture-price .from {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
    margin-bottom: 2px;
}
.fl-fixture-price .amount {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    line-height: 1;
    color: var(--accent);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}
.fl-fixture-price .count {
    font-size: 11px;
    color: #7a8494;
}
.fl-fixture-price .empty {
    font-size: 12px;
    color: #7a8494;
}
.fl-fixture-row:hover .fl-fixture-price .empty { color: var(--accent); }

@media (max-width: 640px) {
    .fl-fixture-row {
        grid-template-columns: 56px 1fr;
        gap: 14px;
    }
    .fl-fixture-price { grid-column: 1 / -1; text-align: left; margin-left: 70px; padding-top: 4px; }
    .fl-fixture-date .day { font-size: 26px; }
}

/* -------- Match detail page (/match/{id}/{slug}) -------- */

.fl-detail-hero {
    position: relative;
    padding: 40px 32px 32px;
    border-bottom: 1px solid #262d38;
    background:
        radial-gradient(700px 300px at 20% 30%, rgba(217, 255, 63, 0.05), transparent 60%),
        linear-gradient(180deg, #0a0d10 0%, #050709 100%);
    overflow: hidden;
}
.fl-detail-hero-photo {
    background-size: cover;
    background-position: center;
}
.fl-detail-hero-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 13, 16, 0.5) 0%, rgba(10, 13, 16, 0.85) 100%);
    pointer-events: none;
}
.fl-detail-hero-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 1;
}
.fl-detail-back {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    margin-bottom: 18px;
    transition: color 0.15s;
}
.fl-detail-back:hover { color: var(--accent); }
.fl-detail-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 16px;
}
.fl-detail-eyebrow .dot {
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
}
.fl-detail-title {
    font-family: Impact, 'Haettenschweiler', 'Franklin Gothic Medium', sans-serif;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 28px;
    color: #eef1f5;
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
}
/* Single-title layout for non-versus events (concerts, F1, etc.). Wraps
   long titles at a comfortable measure so lockups like "Formula 1 Spanish
   Grand Prix Madrid 2026 - 3-Day Pass" don't run off the container. */
.fl-detail-title-single {
    font-size: clamp(28px, 4.2vw, 56px);
    line-height: 1;
    max-width: 18ch;
}
.fl-detail-title-single .fl-detail-team {
    text-wrap: balance;
}
.fl-detail-team a { color: inherit; transition: color 0.15s; }
.fl-detail-team a:hover { color: var(--accent); }
.fl-detail-vs { color: var(--accent); font-size: 0.72em; transform: skew(-8deg); }

.fl-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px 40px;
    margin: 0 0 24px;
    padding-top: 20px;
    border-top: 1px solid #262d38;
}
.fl-detail-meta dt {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a8494;
    margin: 0 0 4px;
    font-weight: 700;
}
.fl-detail-meta dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #eef1f5;
    font-variant-numeric: tabular-nums;
}
.fl-detail-meta dd a { color: inherit; border-bottom: 1px solid #262d38; }
.fl-detail-meta dd a:hover { border-color: var(--accent); color: var(--accent); }
.fl-detail-meta dd.price {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: var(--accent);
    font-size: 22px;
    letter-spacing: 0.02em;
    font-weight: 400;
}
.fl-detail-fansure-link {
    display: inline-block;
    text-decoration: none;
}

/* Filter strip (Tickets needed / Max price) */
.fl-detail-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    background: #14181f;
    border: 1px solid #262d38;
    padding: 20px 24px;
    margin: 32px 0 24px;
}
/* =====================================================================
   SEAT-MAP INLINE — lives in the event detail sidebar, appears only if
   the TSG Access API returns a stored SVG for the venue. Pan (drag) +
   zoom (wheel/buttons). Sections that have live listings are opaque and
   clickable — sections without listings are dimmed. Hover on either a
   listing row or a map section triggers the acid highlight on both sides.
   ===================================================================== */
.fl-seatmap-inline {
    background: #0f1319;
    border: 1px solid #262d38;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fl-seatmap-inline[hidden] { display: none; }
.fl-seatmap-inline-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #262d38;
}
.fl-seatmap-inline-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #eef1f5;
    font-weight: 400;
    line-height: 1;
}
.fl-seatmap-inline-sub {
    font-size: 11px;
    color: #7a8494;
    margin-top: 4px;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.fl-seatmap-zoom {
    display: inline-flex;
    gap: 4px;
    flex: none;
}
.fl-seatmap-zoom button {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid #262d38;
    color: #eef1f5;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.fl-seatmap-zoom button:hover { border-color: var(--accent); color: var(--accent); }
.fl-seatmap-zoom button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-seatmap-inline-canvas {
    position: relative;
    background: #14181f;
    height: 380px;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.fl-seatmap-inline-canvas.is-panning { cursor: grabbing; }
.fl-seatmap-inline-canvas svg {
    max-width: 100%;
    max-height: 100%;
    display: block;
    transition: transform 60ms ease-out;
}
.fl-seatmap-inline-canvas.is-panning svg { transition: none; }
.fl-seatmap-inline-canvas [data-section] {
    transition: opacity 120ms ease;
}
.fl-seatmap-inline-canvas [data-section][data-hovered="true"] rect,
.fl-seatmap-inline-canvas [data-section][data-hovered="true"] path,
.fl-seatmap-inline-canvas [data-section][data-hovered="true"] polygon {
    fill: var(--accent) !important;
    stroke: var(--accent) !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
}
.fl-seatmap-loading, .fl-seatmap-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a8494;
    font-size: 13px;
}
.fl-seatmap-error { color: #ff4d3d; }
.fl-seatmap-inline-legend {
    padding: 12px 16px;
    border-top: 1px solid #262d38;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}
.fl-seatmap-inline-legend:empty { display: none; }
.fl-seatmap-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #eef1f5;
    font-family: Impact, 'Anton', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.fl-seatmap-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #262d38;
    flex: none;
}

@media (max-width: 720px) {
    .fl-seatmap-inline-canvas { height: 300px; }
}
.fl-df-field { display: flex; flex-direction: column; gap: 8px; }
.fl-df-field label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
}
.fl-df-field label span { color: var(--accent); font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Quantity control */
.fl-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fl-qty button {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s;
}
.fl-qty button:hover { border-color: var(--accent); color: var(--accent); }
.fl-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.fl-qty input {
    width: 50px; height: 32px;
    text-align: center;
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.fl-qty input::-webkit-outer-spin-button,
.fl-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fl-qty-max {
    font-size: 11px;
    color: #7a8494;
    margin-left: 4px;
    letter-spacing: 0.02em;
}

/* Range slider */
.fl-range {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 32px;
    width: 100%;
    cursor: pointer;
}
.fl-range:focus { outline: none; }
.fl-range::-webkit-slider-runnable-track {
    height: 4px; background: #262d38; border-radius: 2px;
}
.fl-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px;
    background: var(--accent); border: 0;
    border-radius: 50%;
    margin-top: -7px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.fl-range::-moz-range-track { height: 4px; background: #262d38; border-radius: 2px; }
.fl-range::-moz-range-thumb {
    width: 18px; height: 18px;
    background: var(--accent); border: 0;
    border-radius: 50%;
}

/* Grid layout */
.fl-detail-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 32px;
    padding-bottom: 48px;
}
.fl-detail-listings-col { min-width: 0; }
.fl-detail-sidebar { min-width: 0; }
.fl-detail-sticky { position: sticky; top: 20px; }

/* Listings alerts */
.fl-listings-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #14181f;
    border: 1px solid #262d38;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #b8c0cc;
}
.fl-listings-alert.hidden { display: none; }
.fl-listings-alert.info { border-color: rgba(217, 255, 63, 0.3); }
.fl-listings-alert b { color: var(--accent); font-weight: 400; }
.fl-listings-alert button {
    background: transparent;
    border: 0;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

.fl-listings-empty {
    background: #14181f;
    border: 1px dashed #262d38;
    padding: 56px 24px;
    text-align: center;
    max-width: 560px;
    margin: 60px auto 0;
}
.fl-listings-empty h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 24px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 8px;
    font-weight: 400;
    color: #eef1f5;
}
.fl-listings-empty p { color: #7a8494; margin: 0; font-size: 14px; }

/* ==================== NOTIFY-ME (waitlist) ==================== */
.fl-notify-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 20px auto 0;
    flex-wrap: wrap;
    justify-content: center;
}
.fl-notify-form input[type="email"] {
    flex: 1 1 240px;
    min-width: 220px;
    padding: 12px 14px;
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    font-family: inherit;
    font-size: 14px;
    outline: 0;
}
.fl-notify-form input[type="email"]:focus {
    border-color: var(--accent);
}
.fl-notify-form input[type="email"]::placeholder { color: #4b5361; }
.fl-notify-form button {
    flex: 0 0 auto;
    padding: 12px 20px;
}
.fl-notify-msg {
    margin-top: 14px;
    font-size: 13px;
    min-height: 1.2em;
}
.fl-notify-msg.is-ok  { color: var(--accent); }
.fl-notify-msg.is-err { color: #ff4d3d; }
.fl-notify-alt {
    margin-top: 20px;
    color: #7a8494;
    font-size: 13px;
}
.fl-notify-alt a { color: #eef1f5; text-decoration: underline; }
.fl-notify-alt a:hover { color: var(--accent); }

/* Card chip variant — shown on match cards when listing_count == 0 */
.fl-notify-chip {
    color: var(--accent) !important;
    font-weight: 600;
}

/* Listings list */
.fl-listings {
    background: #14181f;
    border: 1px solid #262d38;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #262d38 transparent;
}
.fl-listings::-webkit-scrollbar { width: 6px; }
.fl-listings::-webkit-scrollbar-thumb { background: #262d38; }
.fl-listing-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid #1c222b;
    cursor: pointer;
    transition: background 0.12s;
}
.fl-listing-row:last-child { border-bottom: 0; }
.fl-listing-row:hover { background: #1c222b; }
.fl-listing-row.selected {
    background: rgba(217, 255, 63, 0.08);
    border-left: 2px solid var(--accent);
    padding-left: 14px;
}
.fl-listing-info { flex: 1; min-width: 0; }
.fl-listing-cat {
    font-size: 14px;
    font-weight: 700;
    color: #eef1f5;
    letter-spacing: -0.005em;
    margin-bottom: 3px;
}
.fl-listing-detail {
    font-size: 12px;
    color: #7a8494;
}
.fl-listing-price {
    text-align: right;
    min-width: 82px;
}
.fl-listing-amount {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 20px;
    color: var(--accent);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 2px;
}
.fl-listing-each {
    font-size: 10px;
    color: #4b5361;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Venue map */
.fl-map-frame {
    background: #14181f;
    border: 1px solid #262d38;
    padding: 12px;
    position: relative;
}
.fl-map-inner {
    aspect-ratio: 979 / 859;
    width: 100%;
}
.fl-map-svg { width: 100%; height: 100%; }
.fl-map-skeleton {
    position: absolute;
    inset: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5361;
    font-size: 13px;
    font-weight: 500;
}
.fl-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #14181f;
    border: 1px solid #262d38;
    font-size: 11px;
    color: #b8c0cc;
    justify-content: center;
}
.fl-map-legend.hidden { display: none; }
.fl-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fl-map-legend .swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.fl-map-caption {
    font-size: 10px;
    color: #4b5361;
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 8px 0 0;
}

/* Selected-listing panel */
.fl-selected {
    background: #14181f;
    border: 1px solid #262d38;
}
.fl-selected.hidden { display: none; }
.fl-selected-head {
    padding: 14px 20px;
    border-bottom: 1px solid #262d38;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fl-selected-back {
    background: transparent;
    border: 0;
    color: #7a8494;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
}
.fl-selected-back:hover { color: var(--accent); }
.fl-selected-tag {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}
.fl-selected-body { padding: 24px; }
.fl-selected-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0 0 6px;
    line-height: 1;
}
.fl-selected-sub {
    font-size: 12px;
    color: #7a8494;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}
.fl-selected-seat {
    background: #0a0d10;
    border: 1px solid #262d38;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.fl-selected-cat {
    font-size: 15px;
    font-weight: 700;
    color: #eef1f5;
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}
.fl-selected-detail {
    font-size: 12px;
    color: #b8c0cc;
}
.fl-selected-buy {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.fl-selected-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
    margin-bottom: 6px;
}
.fl-selected-total { text-align: right; }
.fl-selected-amount {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 40px;
    line-height: 1;
    color: var(--accent);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    margin: 4px 0 2px;
}
.fl-selected-unit {
    font-size: 11px;
    color: #7a8494;
    letter-spacing: 0.02em;
}
.fl-selected-cta {
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
}
.fl-selected-trust {
    padding-top: 20px;
    border-top: 1px solid #262d38;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 12px;
    color: #b8c0cc;
    line-height: 1.5;
}
.fl-selected-trust > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.fl-selected-trust strong { color: #eef1f5; font-weight: 600; }
.fl-trust-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    margin-top: 4px;
    flex: none;
}

@media (max-width: 960px) {
    .fl-detail-grid { grid-template-columns: 1fr; gap: 24px; }
    .fl-detail-sticky { position: static; }
    .fl-listings { max-height: 480px; }
    .fl-detail-title { font-size: clamp(28px, 8vw, 44px); gap: 12px; }
    .fl-selected-buy { flex-direction: column; align-items: stretch; gap: 16px; }
    .fl-selected-total { text-align: left; }
}

/* -------- Matches list page -------- */

.fl-matches-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
    gap: 16px;
    align-items: end;
    background: #14181f;
    border: 1px solid #262d38;
    padding: 20px;
    margin-bottom: 32px;
}
.fl-mf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fl-mf-field label {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 400;
}
.fl-mf-field input,
.fl-mf-field select {
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}
.fl-mf-field input:focus,
.fl-mf-field select:focus {
    border-color: var(--accent);
    outline: none;
}
.fl-mf-field input::placeholder { color: #4b5361; }
.fl-mf-actions {
    display: flex;
    gap: 8px;
    align-items: end;
}
.fl-mf-actions .fl-btn,
.fl-mf-actions .fl-btn-ghost {
    padding: 12px 20px;
    font-size: 14px;
    white-space: nowrap;
}

.fl-matches-count {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}
.fl-matches-count .num {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 28px;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}
.fl-matches-count .label {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a8494;
}

.fl-match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.fl-match-card {
    background: #14181f;
    border: 1px solid #262d38;
    overflow: hidden;
    display: block;
    transition: border-color 0.15s, transform 0.15s;
}
.fl-match-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Banner (flag / badge visual) — overrides the legacy app.css version
   with Floodlit-appropriate framing. */
.fl-match-banner.flag-banner {
    position: relative;
    height: 80px;
    background: linear-gradient(180deg, #14181f 0%, #0a0d10 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #262d38;
}
.fl-match-banner .home-flag,
.fl-match-banner .away-flag {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    display: block;
    background-size: cover;
    background-position: center;
    opacity: 0.85;
}
.fl-match-banner .home-flag { left: 0; }
.fl-match-banner .away-flag { right: 0; }
.fl-match-banner .home-flag.placeholder,
.fl-match-banner .away-flag.placeholder {
    background: #1c222b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fl-match-banner .placeholder span {
    color: #4b5361;
    font-family: Impact, sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.fl-match-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, rgba(10,13,16,0.5) 100%),
        radial-gradient(300px 100px at 50% 100%, rgba(217, 255, 63, 0.1), transparent 60%);
    pointer-events: none;
}
.fl-match-banner.pl-banner {
    background: linear-gradient(135deg, #240a3d 0%, #37003c 60%, #14181f 100%);
}
.fl-match-banner.pl-banner .home-badge,
.fl-match-banner.pl-banner .away-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px;
    z-index: 1;
}
.fl-match-banner.pl-banner .home-badge { left: 20%; }
.fl-match-banner.pl-banner .away-badge { right: 20%; }
.fl-match-banner.pl-banner .home-badge img,
.fl-match-banner.pl-banner .away-badge img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.fl-match-tag {
    position: absolute;
    top: 10px; left: 10px;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #eef1f5;
    background: rgba(10, 13, 16, 0.85);
    padding: 4px 8px;
    z-index: 2;
    font-weight: 400;
}
.fl-match-num {
    position: absolute;
    top: 10px; right: 10px;
    font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #7a8494;
    background: rgba(10, 13, 16, 0.85);
    padding: 4px 8px;
    z-index: 2;
    font-variant-numeric: tabular-nums;
}

/* Venue photo variant of the match banner — replaces the flag banner when
   a photo is available for the venue. */
.fl-match-banner.fl-match-photo {
    position: relative;
    height: 140px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-bottom: 1px solid #262d38;
}
.fl-match-banner.fl-match-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 13, 16, 0.25) 0%, rgba(10, 13, 16, 0.75) 100%);
    pointer-events: none;
}
.fl-match-banner.fl-match-photo > * { position: relative; z-index: 1; }
.fl-match-venue-label {
    position: absolute;
    left: 12px; bottom: 10px;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(217, 255, 63, 0.85);
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* Hot Right Now card image — photo variant lifts the dark overlay so the
   card body reads clearly below. */
.fl-card-img-photo {
    position: relative;
}
.fl-card-img-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 13, 16, 0.25) 0%, rgba(10, 13, 16, 0.65) 100%);
    pointer-events: none;
}
.fl-card-img-photo .fl-card-tag { z-index: 1; position: absolute; }

.fl-match-body { padding: 20px; }
.fl-match-date {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    margin-bottom: 8px;
    font-weight: 400;
}
.fl-match-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    line-height: 1.25;
    color: #eef1f5;
}
.fl-match-title .vs {
    color: #7a8494;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.02em;
}
.fl-match-venue {
    font-size: 12px;
    color: #7a8494;
    margin: 0 0 16px;
    line-height: 1.4;
}
.fl-match-footer {
    padding-top: 14px;
    border-top: 1px solid #262d38;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.fl-match-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fl-match-price span {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
}
.fl-match-price strong {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    line-height: 1;
}
.fl-match-price-empty {
    font-size: 13px;
    color: #7a8494;
    letter-spacing: 0.02em;
}
.fl-match-listings {
    font-size: 12px;
    color: #7a8494;
    letter-spacing: 0.02em;
}
.fl-match-card:hover .fl-match-listings { color: var(--accent); }

.fl-match-empty {
    grid-column: 1 / -1;
    padding: 60px 32px;
    text-align: center;
    border: 1px dashed #262d38;
    background: #14181f;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.fl-match-empty p {
    color: #7a8494;
    font-size: 16px;
    margin: 0;
}

@media (max-width: 720px) {
    .fl-matches-filter {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .fl-mf-actions { flex-wrap: wrap; }
    .fl-match-grid { grid-template-columns: 1fr; }
    .fl-match-banner .home-flag,
    .fl-match-banner .away-flag { width: 50%; }
    .fl-match-banner.pl-banner .home-badge { left: 15%; }
    .fl-match-banner.pl-banner .away-badge { right: 15%; }
}

/* -------- Original Floodlit system starts below -------- */

*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: 0; padding: 0; color: inherit; cursor: pointer; }
input { font: inherit; }

:root {
    --bg: #0a0d10;
    --surface: #14181f;
    --surface-2: #1c222b;
    --border: #262d38;
    --text: #eef1f5;
    --text-muted: #7a8494;
    --text-dim: #4b5361;
    --accent: #d9ff3f;
    --hot: #ff4d3d;
    --live: #ff4d3d;
    --wa: #25d366;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Impact (and its condensed fallbacks) doesn't ship with real ligature or
   stylistic-set tables — but browsers still attempt to substitute character
   pairs at small sizes when text-rendering is optimizeLegibility, which
   produces the "nested / joined letters" artifact on chips and date labels.
   Turn all OpenType features off wherever Impact is applied. */
[class*="fl-card-tag"],
[class*="fl-card-date"],
[class*="fl-cat-event-date"],
[class*="fl-cat-num"],
[class*="fl-match-tag"],
[class*="fl-match-date"],
[class*="fl-match-venue-label"],
[class*="fl-mf-field"] label,
[class*="fl-matches-count"] .label,
[class*="fl-page-eyebrow"],
[class*="fl-blog-card-meta"],
[class*="fl-article-meta"],
[class*="fl-faq-group-title"],
[class*="fl-fansure"],
[class*="fl-fansure"] *,
.fs-fan,
.fs-sure,
[class*="fl-search-row-dow"],
[class*="fl-search-row-mon"],
[class*="fl-search-row-cat"],
[class*="fl-search-row-count"],
[class*="fl-search-row-cta"],
[class*="fl-search-row-price"],
[class*="fl-search-row-title"],
[class*="fl-search-count"],
[class*="fl-search-title"],
[class*="fl-search-empty"],
[class*="fl-search-suggests"] a {
    font-feature-settings: normal !important;
    font-variant-ligatures: none !important;
    font-variant-caps: normal !important;
    -webkit-font-feature-settings: normal !important;
}

.fl-display {
    font-family: Impact, 'Anton', 'Haettenschweiler', 'Franklin Gothic Medium', 'Arial Narrow Bold', sans-serif;
    letter-spacing: 0.005em;
    font-weight: 400;
    line-height: 0.9;
}
.fl-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ==================== NAV ==================== */
.fl-nav {
    border-bottom: 1px solid var(--border);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.fl-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #eef1f5;
    line-height: 1;
}
.fl-logo-img {
    display: block;
    height: 52px;
    width: auto;
}
.fl-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #0a0d10;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    width: 38px;
    height: 38px;
    font-size: 28px;
    letter-spacing: -0.06em;
    padding-top: 2px;
    line-height: 1;
    transform: rotate(-4deg);
    flex: none;
    font-feature-settings: 'ss01', 'cv11', 'liga', 'dlig', 'clig';
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    text-rendering: optimizeLegibility;
}
.fl-logo-wm {
    font-size: 28px;
    letter-spacing: -0.03em;
    line-height: 1;
}
.fl-ticket,
.fl-score {
    display: inline-block;
    font-feature-settings: 'ss01', 'cv11', 'liga', 'dlig', 'clig';
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    text-rendering: optimizeLegibility;
}
.fl-ticket { color: #eef1f5; }
.fl-score  { color: var(--accent); }
.fl-navlinks { display: flex; gap: 28px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.fl-navlinks a { padding: 4px 0; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; }
.fl-navlinks a:hover, .fl-navlinks a.on { color: var(--text); border-color: var(--accent); }
.fl-nav-right { display: flex; align-items: center; gap: 16px; }
.fl-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.15s;
}
.fl-wa-link:hover { color: var(--wa); }
.fl-wa-link svg { width: 14px; height: 14px; }
.fl-sign { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); transition: color 0.15s; }
.fl-sign:hover { color: var(--text); }
.fl-sell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #0a0d10;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: transform 0.15s;
}
.fl-sell:hover { transform: translateY(-1px); }

/* ==================== SEARCH BAR ==================== */
.fl-search {
    border-bottom: 1px solid var(--border);
    padding: 16px 32px;
    display: flex;
    gap: 20px;
    align-items: center;
}
.fl-search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
}
.fl-search-input .k { color: var(--text-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.fl-search-input .q {
    border: 0;
    background: 0;
    color: var(--text);
    outline: 0;
    width: 100%;
}
.fl-search-input .q::placeholder { color: var(--text-muted); }
.fl-search .divider { width: 1px; background: var(--border); align-self: stretch; }
.fl-search .meta { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.fl-search .meta strong { color: var(--text); font-weight: 500; }

/* ==================== SEARCH RESULTS PAGE ==================== */
.fl-search-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.fl-search-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: clamp(28px, 4.2vw, 56px);
    line-height: 0.95;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 400;
    color: #eef1f5;
}
.fl-search-title .accent { color: var(--accent); }
.fl-search-count {
    color: var(--text-muted);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: Impact, sans-serif;
}
.fl-search-count b { color: var(--text); font-weight: 400; font-family: Impact, sans-serif; }

.fl-search-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.fl-search-empty h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: var(--text);
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0 0 12px;
    font-weight: 400;
}
.fl-search-empty p { max-width: 42em; margin: 0 auto 20px; font-size: 15px; line-height: 1.55; }
.fl-search-suggests { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.fl-search-suggests a {
    display: inline-flex;
    padding: 10px 18px;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: Impact, sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.fl-search-suggests a:hover { border-color: var(--accent); color: var(--accent); }
.fl-search-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.fl-search-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fl-search-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 24px;
    padding: 18px 22px;
    align-items: center;
    background: var(--surface, #14181f);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.fl-search-row:hover {
    border-color: var(--accent);
    background: #181c24;
}
.fl-search-row-date {
    text-align: center;
    padding: 8px 4px;
    border-right: 1px solid var(--border);
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    line-height: 1;
}
.fl-search-row-dow { color: var(--accent); font-size: 11px; letter-spacing: 0.16em; margin-bottom: 4px; }
.fl-search-row-day { color: var(--text); font-size: 32px; }
.fl-search-row-mon { color: var(--text-muted); font-size: 11px; letter-spacing: 0.16em; margin-top: 4px; }
.fl-search-row-body {}
.fl-search-row-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 6px;
    color: var(--text);
    font-weight: 400;
}
.fl-search-row-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}
.fl-search-row-cat {
    color: var(--accent);
    font-family: Impact, sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-left: 6px;
}
.fl-search-row-right {
    text-align: right;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.fl-search-row-count {
    font-family: Impact, sans-serif;
    color: var(--text);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.fl-search-row-count-off { color: var(--text-muted); }
.fl-search-row-price {
    color: var(--accent);
    font-family: Impact, sans-serif;
    font-size: 18px;
    letter-spacing: 0.02em;
}
.fl-search-row-cta {
    color: var(--text-muted);
    font-family: Impact, sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 6px;
}
.fl-search-row:hover .fl-search-row-cta { color: var(--accent); }
.fl-search-more {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 20px;
}

@media (max-width: 720px) {
    .fl-search-row {
        grid-template-columns: 64px 1fr;
        gap: 16px;
        padding: 14px 16px;
    }
    .fl-search-row-right {
        grid-column: 2 / span 1;
        text-align: left;
        align-items: flex-start;
        margin-top: 6px;
    }
    .fl-search-row-day { font-size: 24px; }
}

/* ==================== HERO ==================== */
/* ================================================================
   HERO CAROUSEL — fade-through slides of upcoming events, each with
   its venue photo panning slowly (Ken Burns) behind a heavy dark
   scrim that keeps the wordmark and price readable.
   ================================================================ */
.fl-hero-carousel {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: #050709;
}
.fl-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 32px 72px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms ease, visibility 0s linear 900ms;
    pointer-events: none;
}
.fl-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 900ms ease, visibility 0s linear 0s;
    pointer-events: auto;
}
.fl-hero-slide-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.fl-hero-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
    transform: scale(1.06);
    transform-origin: 50% 50%;
    will-change: transform;
}
.fl-hero-slide.is-active .fl-hero-slide-bg img {
    animation: fl-ken-burns 22s ease-in-out both;
}
@keyframes fl-ken-burns {
    from { transform: scale(1.06) translate(0, 0); }
    to   { transform: scale(1.18) translate(-2%, -1.5%); }
}
.fl-hero-slide-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* left-side darkening so text on the left stays legible */
        linear-gradient(90deg, rgba(5, 7, 9, 0.92) 0%, rgba(5, 7, 9, 0.68) 40%, rgba(5, 7, 9, 0.35) 70%, rgba(5, 7, 9, 0.45) 100%),
        /* bottom darkening so the metadata row + CTA read cleanly */
        linear-gradient(180deg, rgba(5, 7, 9, 0.20) 0%, rgba(5, 7, 9, 0.15) 40%, rgba(5, 7, 9, 0.85) 100%),
        /* subtle acid tint in the top-left so the eyebrow still glows */
        radial-gradient(600px 260px at 10% 18%, rgba(217, 255, 63, 0.05), transparent 60%);
}
.fl-hero-slide-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 32px;
}
.fl-hero-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 3;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 0 32px;
}
.fl-hero-dot {
    all: unset;
    cursor: pointer;
    width: 32px;
    height: 3px;
    background: rgba(238, 241, 245, 0.25);
    transition: background 240ms ease, width 240ms ease;
    display: inline-block;
}
.fl-hero-dot:hover { background: rgba(238, 241, 245, 0.55); }
.fl-hero-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fl-hero-dot.is-active {
    background: var(--accent);
    width: 56px;
}

@media (prefers-reduced-motion: reduce) {
    .fl-hero-slide.is-active .fl-hero-slide-bg img { animation: none; }
    .fl-hero-slide { transition: none; }
}

/* Legacy .fl-hero (single-match hero) retained so any other page that
   uses it still renders — matches the old visual for those callers. */
.fl-hero {
    position: relative;
    min-height: 640px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 32px 48px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.fl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 500px at 15% 20%, rgba(217, 255, 63, 0.06), transparent 60%),
        radial-gradient(900px 500px at 85% 80%, rgba(255, 77, 61, 0.08), transparent 60%),
        linear-gradient(180deg, #0a0d10 0%, #050709 100%);
    z-index: 0;
}
.fl-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 240px;
    background: repeating-linear-gradient(
        90deg,
        rgba(217, 255, 63, 0.04) 0px,
        rgba(217, 255, 63, 0.04) 1px,
        transparent 1px,
        transparent 40px
    );
    z-index: 0;
    opacity: 0.8;
}
.fl-hero > * { position: relative; z-index: 1; }
.fl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}
.fl-eyebrow .dot { width: 8px; height: 8px; background: var(--live); border-radius: 50%; animation: fl-blink 2s infinite; }
@keyframes fl-blink { 50% { opacity: 0.3; } }
.fl-hero-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
    margin: 48px 0 32px;
}
.fl-team { display: flex; flex-direction: column; gap: 12px; }
.fl-team-right { align-items: flex-end; text-align: right; }
.fl-team-flag { font-size: 44px; line-height: 1; }
.fl-team-name {
    font-family: Impact, 'Anton', 'Haettenschweiler', 'Franklin Gothic Medium', 'Arial Narrow Bold', sans-serif;
    font-size: clamp(48px, 7vw, 96px);
    letter-spacing: -0.005em;
    line-height: 0.85;
    text-transform: uppercase;
}
/* Single-team hero slides (concerts, single-act events) frequently ship
   long titles like "Formula 1 Spanish Grand Prix Madrid 2026 – 3-Day Pass".
   Template passes --title-len so we can shrink proportionally without
   pushing the venue/price meta below the fold. Safety cap at 4 lines. */
.fl-team-single .fl-team-name {
    font-size: clamp(32px, calc(2000px / max(var(--title-len, 14), 14)), 96px);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 0.9;
    text-wrap: balance;
}
.fl-vs {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: var(--accent);
    font-size: 48px;
    letter-spacing: 0.02em;
    transform: skew(-8deg);
}
.fl-hero-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    border-top: 1px solid var(--border);
    padding-top: 24px;
}
.fl-hero-meta dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 8px 40px;
}
.fl-hero-meta dt {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}
.fl-hero-meta dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.fl-hero-meta dd.price { color: var(--accent); font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 22px; letter-spacing: 0.02em; font-weight: 400; }
.fl-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--accent);
    color: #0a0d10;
    padding: 16px 28px;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 0.15s;
}
.fl-cta:hover { transform: translateY(-1px); }
.fl-cta .arrow { font-family: 'Inter', system-ui; font-weight: 700; }

/* ==================== TRENDING STRIP ==================== */
.fl-trending {
    border-bottom: 1px solid var(--border);
    padding: 24px 32px;
    display: flex;
    gap: 16px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.fl-trending::-webkit-scrollbar { height: 4px; }
.fl-trending::-webkit-scrollbar-thumb { background: var(--border); }
.fl-trending-label {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.fl-trending-chip {
    flex: none;
    border: 1px solid var(--border);
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.15s;
    white-space: nowrap;
}
.fl-trending-chip:hover { border-color: var(--accent); }
.fl-trending-chip .hot { color: var(--hot); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; }

/* ==================== SECTIONS ==================== */
.fl-section { padding: 64px 0 24px; }
.fl-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
}
.fl-section-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 48px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    font-weight: 400;
}
.fl-section-title .accent { color: var(--accent); }
.fl-section-more { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); transition: color 0.15s; }
.fl-section-more:hover { color: var(--accent); }

/* ==================== HOT NOW GRID ==================== */
.fl-hot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fl-card {
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color 0.15s, transform 0.15s;
    overflow: hidden;
    display: block;
}
.fl-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.fl-card-img {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    position: relative;
}
.fl-card-tag {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--bg);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 8px;
}
.fl-card-tag.hot { color: var(--hot); }
.fl-card-body { padding: 20px; }
.fl-card-date {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.fl-card-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    line-height: 1.2;
}
.fl-card-venue { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }
.fl-card-footer { display: flex; align-items: flex-end; justify-content: space-between; }
.fl-card-price { display: flex; flex-direction: column; gap: 2px; }
.fl-card-price span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.fl-card-price strong { font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 24px; letter-spacing: 0.02em; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 400; }
.fl-card-listings { font-size: 12px; color: var(--text-muted); }

/* ==================== CATEGORY SLABS ==================== */
.fl-cats { padding: 24px 0 0; display: flex; flex-direction: column; gap: 4px; }
.fl-cat {
    display: grid;
    grid-template-columns: 320px 1fr;
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}
.fl-cat:hover { border-color: var(--accent); }
.fl-cat-label {
    background: var(--surface);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    border-right: 1px solid var(--border);
}
.fl-cat-num {
    font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}
.fl-cat-name {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 40px;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0.005em;
    margin: 0;
    font-weight: 400;
}
.fl-cat-stat { font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.fl-cat-stat b { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.fl-cat-events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 20px;
    gap: 20px;
}
.fl-cat-event { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.fl-cat-event-date { font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 400; }
.fl-cat-event-title { font-size: 14px; font-weight: 600; line-height: 1.25; margin: 0; }
.fl-cat-event-venue { font-size: 12px; color: var(--text-muted); margin: 0; }
.fl-cat-event-price { font-size: 12px; color: var(--text); font-family: ui-monospace, monospace; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fl-cat-events-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); font-size: 13px; padding: 24px; }
.fl-cat-events-empty a { color: var(--accent); }

/* ==================== TRUST BAR ==================== */
.fl-trust {
    border-top: 1px solid var(--border);
    margin-top: 64px;
    padding: 32px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.fl-trust-item { display: flex; flex-direction: column; gap: 4px; padding: 0 20px; border-left: 1px solid var(--border); }
.fl-trust-item:first-child { border-left: 0; }
.fl-trust-num { font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 32px; color: var(--accent); line-height: 1; letter-spacing: 0.005em; font-variant-numeric: tabular-nums; font-weight: 400; }
.fl-trust-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.fl-trust-note { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin-top: 4px; }

/* ==================== FOOTER ==================== */
.fl-footer {
    border-top: 1px solid var(--border);
    margin-top: 64px;
    padding: 40px 32px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.fl-footer-copy { font-size: 12px; color: var(--text-muted); }
.fl-footer-nav { display: flex; gap: 24px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.fl-footer-nav a { transition: color 0.15s; }
.fl-footer-nav a:hover { color: var(--accent); }
.fl-footer-socials { display: flex; gap: 12px; }
.fl-footer-socials a {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    transition: border-color 0.15s, color 0.15s;
}
.fl-footer-socials a:hover { border-color: var(--accent); color: var(--accent); }
.fl-footer-socials svg { width: 14px; height: 14px; }

/* ==================== WHATSAPP FLOAT ==================== */
.fl-wa-float {
    position: fixed;
    bottom: 20px; right: 20px;
    width: 56px; height: 56px;
    background: var(--wa);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);
    z-index: 100;
    transition: transform 0.15s;
}
.fl-wa-float:hover { transform: translateY(-2px); }
.fl-wa-float svg { width: 28px; height: 28px; }

/* ==================== SEARCH RESULTS ==================== */
.fl-results { padding: 32px 0 48px; }
.fl-results-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.fl-results-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 40px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 400;
}
.fl-results-title .accent { color: var(--accent); }
.fl-results-count { font-size: 12px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.fl-results-count b { color: var(--accent); font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 18px; font-weight: 400; font-variant-numeric: tabular-nums; }

.fl-results-list { display: flex; flex-direction: column; }
.fl-result {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 32px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
    transition: background 0.15s;
}
.fl-result:hover { background: var(--surface); }
.fl-result-date {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: var(--accent);
    text-align: center;
    line-height: 1;
}
.fl-result-date .day { font-size: 12px; letter-spacing: 0.14em; color: var(--text-muted); }
.fl-result-date .num { font-size: 40px; margin: 4px 0; }
.fl-result-date .mo { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.fl-result-body h4 { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.fl-result-body p { margin: 0; font-size: 13px; color: var(--text-muted); }
.fl-result-cta {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fl-result:hover .fl-result-cta { border-color: var(--accent); background: var(--accent); color: #0a0d10; }
.fl-results-empty {
    padding: 80px 32px;
    text-align: center;
    border: 1px dashed var(--border);
    margin: 0 32px;
}
.fl-results-empty h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 32px;
    margin: 0 0 8px;
    font-weight: 400;
}
.fl-results-empty p { color: var(--text-muted); font-size: 14px; margin: 0 0 24px; }
.fl-results-empty a { color: var(--accent); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 960px) {
    .fl-navlinks { display: none; }
    .fl-search { flex-wrap: wrap; }
    .fl-search .divider { display: none; }
    .fl-hero-title { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .fl-team-right { align-items: center; text-align: center; }
    .fl-vs { justify-self: center; }
    .fl-hero-meta { flex-direction: column; align-items: stretch; gap: 24px; }
    .fl-hero-meta dl { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
    .fl-hot-grid { grid-template-columns: 1fr; }
    .fl-cat { grid-template-columns: 1fr; }
    .fl-cat-label { border-right: 0; border-bottom: 1px solid var(--border); }
    .fl-cat-events { grid-template-columns: 1fr; }
    .fl-trust { grid-template-columns: 1fr 1fr; }
    .fl-section-title { font-size: 36px; }
    .fl-result { grid-template-columns: 80px 1fr; }
    .fl-result-cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
    .fl-container { padding: 0 20px; }
    .fl-nav { padding: 14px 20px; flex-wrap: wrap; }
    .fl-search { padding: 14px 20px; }
    .fl-hero { padding: 32px 20px 40px; min-height: auto; }
    .fl-trending { padding: 20px; }
    .fl-trust { grid-template-columns: 1fr; }
    .fl-footer { padding: 32px 20px; flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   SAMBILET LIGHT THEME
   ---------------------------------------------------------------------
   Overrides applied when body[data-brand="sambilet"] (or data-theme="light").
   Ticketscore is dark editorial; Sambilet is light editorial — same
   typography language + acid accent, inverted ground.

   Only overrides the highest-impact surfaces (body, nav, footer, cards,
   hero grounds). Deeper polish will come as the theme matures — anything
   not overridden falls through to the dark-brand rules above.
   ===================================================================== */
/* Sambilet — override the accent to a striking orange. Every rule that
   uses var(--accent) automatically switches. For hardcoded var(--accent) uses
   scattered across the older CSS we override the visible ones below. */
body[data-brand="sambilet"] {
    --accent: #ff6b18;
}

/* Text logo for Sambilet — "bouncy baseline" direction.
   "sam" letters hop up/down; "bilet" runs italic + orange, skewed; trailing
   orange dot as a ".pl" wink. Hovering the logo settles everything to the
   baseline — a small reward the user can find. */
.fl-logo-text {
    font-family: 'Anton', Impact, 'Haettenschweiler', sans-serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.005em;
    text-transform: lowercase;
    color: currentColor;
    padding: 6px 2px;
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}
.fl-logo-text .fl-l {
    display: inline-block;
    transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
.fl-logo-text .fl-l:nth-child(1) { transform: translateY(-3px); }
.fl-logo-text .fl-l:nth-child(2) { transform: translateY( 3px); }
.fl-logo-text .fl-l:nth-child(3) { transform: translateY(-2px); }
.fl-logo-text .fl-bilet {
    color: var(--accent);
    font-style: italic;
    display: inline-block;
    transform: skew(-6deg);
    margin-left: 2px;
    transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
.fl-logo-text .fl-l-dot {
    color: var(--accent);
    font-size: 1.35em;
    display: inline-block;
    transform: rotate(-10deg) translate(3px, 1px);
    margin-left: 2px;
    transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
.fl-logo:hover .fl-logo-text .fl-l,
.fl-logo:focus-visible .fl-logo-text .fl-l {
    transform: translateY(0);
}
.fl-logo:hover .fl-logo-text .fl-bilet,
.fl-logo:focus-visible .fl-logo-text .fl-bilet {
    transform: skew(0deg);
}
.fl-logo:hover .fl-logo-text .fl-l-dot,
.fl-logo:focus-visible .fl-logo-text .fl-l-dot {
    transform: rotate(0) translate(3px, 1px) scale(1.15);
}
.fl-logo-text-sm { font-size: 24px; padding: 3px 2px; }
.fl-logo-text-sm .fl-l:nth-child(1) { transform: translateY(-2px); }
.fl-logo-text-sm .fl-l:nth-child(2) { transform: translateY( 2px); }
.fl-logo-text-sm .fl-l:nth-child(3) { transform: translateY(-1px); }
.fl-logo-text-sm .fl-l-dot { font-size: 1.25em; margin-left: 1px; }
@media (prefers-reduced-motion: reduce) {
    .fl-logo-text .fl-l,
    .fl-logo-text .fl-bilet,
    .fl-logo-text .fl-l-dot { transition: none; }
}

/* Brand-aware accent helpers — replace hard-coded var(--accent) uses. */
.fl-accent-text { color: var(--accent); }
.fl-inline-link { color: var(--accent); text-decoration: none; }
.fl-inline-link:hover { text-decoration: underline; }
.fl-trust-link { color: var(--accent); text-decoration: none; }
.fl-trust-link:hover { text-decoration: underline; }

/* Sambilet-specific: override the hardcoded acid hexes that older selectors
   ship. Only the ones visible on the landing / nav / footer surfaces —
   deeper sweep happens over time as we polish. */
body[data-brand="sambilet"] .fl-currency select:hover,
body[data-brand="sambilet"] .fl-footer-full a:hover,
body[data-brand="sambilet"] .fl-fansure,
body[data-brand="sambilet"] .fl-fansure-sm,
body[data-brand="sambilet"] .fl-fansure-lg,
body[data-brand="sambilet"] .fl-fansure-lg .fs-sure,
body[data-brand="sambilet"] .fl-fansure-chip .fl-fansure-icon,
body[data-brand="sambilet"] .fl-fansure-chip .fs-sure,
body[data-brand="sambilet"] .fl-page-eyebrow,
body[data-brand="sambilet"] .fl-eyebrow,
body[data-brand="sambilet"] .fl-teams-chip-count,
body[data-brand="sambilet"] .fl-team-tile-count,
body[data-brand="sambilet"] .fl-hero-dot.is-active,
body[data-brand="sambilet"] .fs-sure {
    color: var(--accent);
}
body[data-brand="sambilet"] .fl-fansure-lg .fs-sure { color: var(--accent); }
body[data-brand="sambilet"] .fl-hero-dot.is-active { background: var(--accent); }
body[data-brand="sambilet"] .fl-cta,
body[data-brand="sambilet"] .fl-btn,
body[data-brand="sambilet"] .fl-search-form button {
    background: var(--accent);
    color: #ffffff;  /* white text on orange reads better than black */
}
body[data-brand="sambilet"] .fl-nav-cta { background: var(--accent); color: #ffffff; }
body[data-brand="sambilet"] .fl-teams-chip-count {
    background: rgba(255, 107, 24, 0.10);
}
body[data-brand="sambilet"] a { color: inherit; }
body[data-brand="sambilet"] .fl-notify-msg.is-ok { color: var(--accent); }

body[data-theme="light"] {
    background: #f5f4ef;
    color: #0a0d10;
}
body[data-theme="light"].fl-shell {
    background: #f5f4ef;
    color: #0a0d10;
}
body[data-theme="light"] .fl-nav {
    background: #ffffff;
    border-bottom-color: #d5d1c4;
}
body[data-theme="light"] .fl-navlinks a { color: #6b6a63; }
body[data-theme="light"] .fl-navlinks a:hover,
body[data-theme="light"] .fl-navlinks a.on { color: #0a0d10; border-color: var(--accent); }
body[data-theme="light"] .fl-logo { color: #0a0d10; }

body[data-theme="light"] .fl-search {
    background: #ffffff;
    border-bottom-color: #d5d1c4;
}
body[data-theme="light"] .fl-search-input .q { color: #0a0d10; }
body[data-theme="light"] .fl-search-input .q::placeholder { color: #a8a698; }
body[data-theme="light"] .fl-search .divider { background: #d5d1c4; }
body[data-theme="light"] .fl-search .meta { color: #6b6a63; }
body[data-theme="light"] .fl-search .meta strong { color: #0a0d10; }

body[data-theme="light"] .fl-page-hero {
    background: #ffffff;
    border-bottom: 1px solid #d5d1c4;
}
body[data-theme="light"] .fl-page-title { color: #0a0d10; }
body[data-theme="light"] .fl-page-lede { color: #33322b; }

body[data-theme="light"] .fl-card,
body[data-theme="light"] .fl-match-card,
body[data-theme="light"] .fl-team-tile {
    background: #ffffff;
    border-color: #d5d1c4;
    color: #0a0d10;
}
body[data-theme="light"] .fl-team-tile:hover { background: #fbf9f3; }
body[data-theme="light"] .fl-team-tile-name { color: #0a0d10; }

body[data-theme="light"] .fl-teams-group-head { border-bottom-color: #d5d1c4; }
body[data-theme="light"] .fl-teams-group-title { color: #0a0d10; }
body[data-theme="light"] .fl-teams-group-count { color: #6b6a63; }
body[data-theme="light"] .fl-teams-chips { border-bottom-color: #d5d1c4; }
body[data-theme="light"] .fl-teams-chip {
    background: #ffffff;
    border-color: #d5d1c4;
    color: #0a0d10;
}

body[data-theme="light"] .fl-footer {
    background: #ffffff;
    border-top: 1px solid #d5d1c4;
    color: #6b6a63;
}
body[data-theme="light"] .fl-footer-cols p { color: #6b6a63; }
body[data-theme="light"] .fl-footer-heading { color: #0a0d10; }

/* Buttons on light — ghost variant needs darker text on white */
body[data-theme="light"] .fl-btn-ghost {
    border-color: #d5d1c4;
    color: #0a0d10;
}
body[data-theme="light"] .fl-btn-ghost:hover {
    border-color: var(--accent);
}

/* Trending chips + tags */
body[data-theme="light"] .fl-trending-chip {
    background: #ffffff;
    border-color: #d5d1c4;
    color: #0a0d10;
}
body[data-theme="light"] .fl-trending-label { color: #6b6a63; }

/* Detail page bits */
body[data-theme="light"] .fl-detail-hero {
    background: #ffffff;
    color: #0a0d10;
}
body[data-theme="light"] .fl-detail-title { color: #0a0d10; }
body[data-theme="light"] .fl-detail-meta dt { color: #6b6a63; }
body[data-theme="light"] .fl-detail-meta dd { color: #0a0d10; }

/* Filters */
body[data-theme="light"] .fl-detail-filters {
    background: #ffffff;
    border-color: #d5d1c4;
}
body[data-theme="light"] .fl-df-field label { color: #6b6a63; }

/* Match list rows */
body[data-theme="light"] .fl-listings,
body[data-theme="light"] .fl-listing-row {
    background: #ffffff;
    border-color: #d5d1c4;
    color: #0a0d10;
}

/* /events filter bar — dark navy on default theme, needs paper on light.
   Container, inputs and selects all flip; labels stay muted. */
body[data-theme="light"] .fl-matches-filter {
    background: #ffffff;
    border-color: #d5d1c4;
}
body[data-theme="light"] .fl-mf-field label { color: #6b6a63; }
body[data-theme="light"] .fl-mf-field input,
body[data-theme="light"] .fl-mf-field select {
    background: #ffffff;
    border-color: #d5d1c4;
    color: #0a0d10;
}
body[data-theme="light"] .fl-mf-field input::placeholder { color: #a8a698; }
body[data-theme="light"] .fl-matches-count .label { color: #6b6a63; }

/* Match cards on /events — title stays hardcoded near-white on default,
   which disappears on light theme. Repaint the whole card body. */
body[data-theme="light"] .fl-match-title { color: #0a0d10; }
body[data-theme="light"] .fl-match-title .vs { color: #6b6a63; }
body[data-theme="light"] .fl-match-date { color: #6b6a63; }
body[data-theme="light"] .fl-match-venue { color: #6b6a63; }
body[data-theme="light"] .fl-match-footer { border-top-color: #d5d1c4; }
body[data-theme="light"] .fl-match-price strong { color: #0a0d10; }
body[data-theme="light"] .fl-match-price span { color: #6b6a63; }
body[data-theme="light"] .fl-match-listings { color: #6b6a63; }
body[data-theme="light"] .fl-match-card:hover .fl-match-title { color: var(--accent); }

/* Cards inside content areas */
body[data-theme="light"] .fl-content-section { border-bottom-color: #d5d1c4; }

/* Dark surfaces that keep their dark styling in the light theme — hero slides
   over venue photos, and the browse-by-sport slabs. Body color goes dark on
   light theme, so anything inside these without an explicit color inherits
   the dark and disappears against the dark card. Force these back to light. */
body[data-theme="light"] .fl-hero-slide,
body[data-theme="light"] .fl-hero-slide-content,
body[data-theme="light"] .fl-hero-title,
body[data-theme="light"] .fl-team-name,
body[data-theme="light"] .fl-hero-meta,
body[data-theme="light"] .fl-hero-meta dd {
    color: #f5f4ef;
}
body[data-theme="light"] .fl-hero-meta dt,
body[data-theme="light"] .fl-hero-slide-content .fl-eyebrow {
    color: #c8ccd3;
}
/* .fl-cat is a two-column card: dark navy .fl-cat-label on the left (needs
   light text), light/cream .fl-cat-events on the right (needs dark text).
   The previous override painted BOTH light, killing readability in the
   right column. Scope light text to the dark side only. */
body[data-theme="light"] .fl-cat-label,
body[data-theme="light"] .fl-cat-name {
    color: #f5f4ef;
}
body[data-theme="light"] .fl-cat-num,
body[data-theme="light"] .fl-cat-stat {
    color: #a8b0bd;
}
body[data-theme="light"] .fl-cat-events,
body[data-theme="light"] .fl-cat-event,
body[data-theme="light"] .fl-cat-event-title {
    color: #0a0d10;
}
body[data-theme="light"] .fl-cat-event-venue { color: #6b6a63; }
body[data-theme="light"] .fl-cat-event-price { color: #33322b; }
body[data-theme="light"] .fl-cat-event:hover .fl-cat-event-title { color: var(--accent); }

/* Hot-right-now cards (.fl-card) are also dark surfaces on both themes.
   Force their internal text back to light in the light theme. */
body[data-theme="light"] a.fl-card {
    background: var(--surface, #0a0d10);
    color: #f5f4ef;
    border-color: transparent;
}
body[data-theme="light"] a.fl-card .fl-card-title,
body[data-theme="light"] a.fl-card .fl-card-date,
body[data-theme="light"] a.fl-card .fl-card-venue,
body[data-theme="light"] a.fl-card .fl-card-price strong,
body[data-theme="light"] a.fl-card .fl-card-listings {
    color: #f5f4ef;
}
body[data-theme="light"] a.fl-card .fl-card-venue,
body[data-theme="light"] a.fl-card .fl-card-price span,
body[data-theme="light"] a.fl-card .fl-card-listings {
    color: #a8b0bd;
}

/* Event detail hero — the "photo" variant sits over a full-bleed venue
   photo, so text must stay light on the light theme too. Non-photo variant
   inherits body ink, that's fine. */
body[data-theme="light"] .fl-detail-hero-photo,
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-title,
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-team a,
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-eyebrow,
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-meta dd,
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-back {
    color: #f5f4ef;
}
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-meta dt {
    color: #c8ccd3;
}
/* Give the photo hero a proper scrim so text stays readable against
   busy backgrounds — the existing scrim was tuned for the dark theme. */
body[data-theme="light"] .fl-detail-hero-photo::before {
    background: linear-gradient(180deg, rgba(10,13,16,0.55) 0%, rgba(10,13,16,0.72) 100%);
}

/* Listing rows on light theme — dim category title needs bumping so it reads
   as a proper heading, not a placeholder. */
body[data-theme="light"] .fl-listing-row {
    background: #ffffff;
    border-color: var(--line, #d5d1c4);
}
body[data-theme="light"] .fl-listing-cat { color: #0a0d10; font-weight: 600; }
body[data-theme="light"] .fl-listing-detail { color: #6b6a63; }
body[data-theme="light"] .fl-listing-each { color: #6b6a63; }

/* The "showing N cheapest" notice sits inside a dark navy container on light
   theme — keep that band dark but ensure copy is white. */
body[data-theme="light"] .fl-listings-alert {
    background: #14181f;
    color: #f5f4ef;
    border-color: #14181f;
}
body[data-theme="light"] .fl-listings-alert.info { background: #14181f; }

/* Sambilet seat-map card lives on light bg — flip the whole card to paper
   so it matches the rest of the page. Canvas gets a soft cream so section
   fills (grey) still have contrast against the surround. */
body[data-theme="light"] .fl-seatmap-inline {
    background: #ffffff;
    border-color: var(--line, #d5d1c4);
    color: #0a0d10;
}
body[data-theme="light"] .fl-seatmap-inline-head {
    border-bottom-color: var(--line, #d5d1c4);
}
body[data-theme="light"] .fl-seatmap-inline-title { color: #0a0d10; }
body[data-theme="light"] .fl-seatmap-inline-sub { color: #6b6a63; }
body[data-theme="light"] .fl-seatmap-inline-canvas {
    background: #f5f4ef;
}
body[data-theme="light"] .fl-seatmap-loading { color: #6b6a63; }
body[data-theme="light"] .fl-seatmap-zoom button {
    background: #ffffff;
    border-color: var(--line, #d5d1c4);
    color: #0a0d10;
}
body[data-theme="light"] .fl-seatmap-inline-legend {
    border-top-color: var(--line, #d5d1c4);
}
body[data-theme="light"] .fl-seatmap-legend-chip { color: #0a0d10; }

/* Filter card was rendering plain white — give it a proper border and
   ensure the max-price value uses brand accent (post lime→accent sweep,
   it now inherits correctly, but the range thumb needs re-affirming). */
body[data-theme="light"] .fl-df-field label { color: #6b6a63; font-weight: 600; }
body[data-theme="light"] #filter-price-display { color: var(--accent); font-weight: 700; }
body[data-theme="light"] .fl-qty input {
    background: #0a0d10;
    color: #f5f4ef;
    border-color: #0a0d10;
}
body[data-theme="light"] .fl-qty button {
    background: #ffffff;
    color: #0a0d10;
    border-color: #d5d1c4;
}

/* ── Static / content pages on light theme ─────────────────────────
   FAQ + How-It-Works headings, summaries, and body copy were tuned
   for the dark theme (near-white text). On light they become invisible.
   Repaint to ink/mute — accent orange still handles hover/callout. */
body[data-theme="light"] .fl-h2         { color: #0a0d10; }
body[data-theme="light"] .fl-body       { color: #33322b; }
body[data-theme="light"] .fl-body strong{ color: #0a0d10; }
body[data-theme="light"] .fl-body code  {
    background: #f5f4ef;
    border-color: #d5d1c4;
    color: #0a0d10;
}
body[data-theme="light"] .fl-step-content h3 { color: #0a0d10; }
body[data-theme="light"] .fl-step-content p  { color: #33322b; }
body[data-theme="light"] .fl-feature { border-color: #d5d1c4; background: #ffffff; }
body[data-theme="light"] .fl-feature h3 { color: #0a0d10; }
body[data-theme="light"] .fl-feature p  { color: #33322b; }
body[data-theme="light"] .fl-faq summary { color: #0a0d10; }
body[data-theme="light"] .fl-faq summary:hover { color: var(--accent); }
body[data-theme="light"] .fl-faq details,
body[data-theme="light"] .fl-faq details:first-of-type { border-color: #d5d1c4; }
body[data-theme="light"] .fl-faq-body { color: #33322b; }
body[data-theme="light"] .fl-faq-group-title { color: #6b6a63; }

/* Article / blog body on light */
body[data-theme="light"] .fl-article-title { color: #0a0d10; }
body[data-theme="light"] .fl-article-byline { color: #33322b; }
body[data-theme="light"] .fl-article-body { color: #33322b; }
body[data-theme="light"] .fl-article-body h2,
body[data-theme="light"] .fl-article-body h3,
body[data-theme="light"] .fl-article-body strong { color: #0a0d10; }
body[data-theme="light"] .fl-article-meta { color: #6b6a63; }
body[data-theme="light"] .fl-article-back { color: #6b6a63; }
body[data-theme="light"] .fl-article-back:hover { color: var(--accent); }
body[data-theme="light"] .fl-article-nav-item .label { color: #6b6a63; }
body[data-theme="light"] .fl-article-nav-item a { color: #0a0d10; }
body[data-theme="light"] .fl-article-nav-item a:hover { color: var(--accent); }
body[data-theme="light"] .fl-blog-card { background: #ffffff; border-color: #d5d1c4; }
body[data-theme="light"] .fl-blog-card h3 { color: #0a0d10; }
body[data-theme="light"] .fl-blog-card p  { color: #33322b; }
body[data-theme="light"] .fl-blog-card-meta { color: #6b6a63; }