/* ==========================================================================
 * FORZZA-STYLE SPORTSBOOK REDESIGN  - default on /widget/sportsbook  (?ux=classic restores the previous look)
 *
 * Active only when <html class="sbx-fz"> (set by sportsbook-v2-clean.blade.php) and never under the V2 overlay.
 * Loaded just before sportsbook-live-ui.css (LiveUiTest requires live-ui to stay last).
 *
 * Design tokens were measured on the reference page (computed styles, 1440px):
 *   page #000 + white overlays 10/15/20 %, accent teal #43beaa on ink #000205, odds text #b6862e,
 *   Rubik 11-13px, rows 54px / radius 4px, league header 36px, legend 52px, odds boxes 50x34, bet button 36px.
 *
 * GEOMETRY CONTRACT (virtual scroller): row 54px + 2px gap = 56px slot, date header 32px, at EVERY width.
 *   These equal the sbx-fz branch of SportsbookRenderer.renderFixtures (renderer.js). Change both or neither.
 *
 * The legacy cascade is id-prefixed + !important, so every rule carries html.sbx-fz + #bcSbApp.
 * Structural changes (left-column navigation, market legend) are done by forzza-ui.js, not here.
 * ========================================================================== */

html.sbx-fz:not([data-sbv2]) {
  /* ------------------------------------------------------------------------------------------------
   * GOLD NEON x BLACK LUXURY - the ONE token set. Everything below (and the legacy phone layer) reads these.
   * Gold is reserved for meaning: selected odds, primary actions, active navigation, focus, key counters/values.
   * Rows/panels are dark; separation comes from hairlines and contrast, not from glowing every component.
   * ------------------------------------------------------------------------------------------------ */
  --sn-bg: #070808;
  --sn-bg-elevated: #0b0c0c;
  --sn-surface: #101111;
  --sn-surface-raised: #151616;
  --sn-surface-hover: #1b1b19;

  --sn-gold: #f4c95d;
  --sn-gold-bright: #ffe7a0;
  --sn-gold-deep: #b8862b;
  --sn-gold-muted: #80652a;
  --sn-ink: #17120a;                          /* text on gold: 11.9:1 on --sn-gold */

  --sn-text: #f5f3ec;
  --sn-text-secondary: #b6b4ad;
  --sn-text-muted: #8c8d85;                   /* palette value #777871 measured 3.9:1 on rows; raised to >= 5:1 for small text */

  --sn-border: rgba(244, 201, 93, 0.15);
  --sn-border-strong: rgba(244, 201, 93, 0.35);
  --sn-hairline: rgba(244, 201, 93, 0.07);

  --sn-gold-glow-soft: 0 0 12px rgba(244, 201, 93, 0.12);
  --sn-gold-glow: 0 0 18px rgba(244, 201, 93, 0.20);
  --sn-gold-glow-strong: 0 0 24px rgba(244, 201, 93, 0.30);
  --sn-gold-gradient: linear-gradient(180deg, var(--sn-gold-bright) 0%, var(--sn-gold) 55%, #e2b44a 100%);

  /* status colours stay semantic (never decorative) */
  --sn-live: #ff5a4f;
  --sn-up: #6fd9a0;
  --sn-down: #ff7a70;
  --sn-warn: #e8923a;
  --sn-up-tint: rgba(111, 217, 160, 0.16);
  --sn-down-tint: rgba(255, 122, 112, 0.16);

  --sn-radius-sm: 5px;
  --sn-radius-md: 9px;
  --sn-radius-lg: 13px;

  --sn-motion-fast: 160ms;
  --sn-motion-normal: 220ms;
  --sn-motion-slow: 320ms;
  --sn-ease: cubic-bezier(.2, .7, .2, 1);

  /* rows / odds surfaces (solid, so no alpha stacking surprises) */
  --sn-row: #111211;
  --sn-row-hover: #171815;
  --sn-odd: #1b1c19;
  --sn-odd-hover: #25261f;

  /* ---- aliases: the rules in this file were written against --fz-*; they now resolve to the luxury tokens ---- */
  --fz-bg: var(--sn-bg);
  --fz-l1: var(--sn-row);
  --fz-l2: var(--sn-row-hover);
  --fz-l3: var(--sn-odd);
  --fz-l4: var(--sn-odd-hover);
  --fz-line: rgba(244, 201, 93, 0.12);
  --fz-text: var(--sn-text);
  --fz-text-2: var(--sn-text-secondary);
  --fz-text-3: var(--sn-text-muted);
  --fz-accent: var(--sn-gold);
  --fz-accent-2: var(--sn-gold-bright);
  --fz-ink: var(--sn-ink);
  --fz-odd: var(--sn-gold);
  --fz-live: var(--sn-live);
  --fz-up: var(--sn-up);
  --fz-down: var(--sn-down);
  --fz-warn: var(--sn-warn);
  --fz-font: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fz-r: var(--sn-radius-sm);
  --fz-row-h: 54px;
  --fz-slot: 56px;
  --fz-odd-w: 50px;
  --fz-odd-h: 34px;
  --fz-gap: 4px;
  --fz-more: 22px;
  --fz-head-h: 56px;

  /* the legacy phone layer (sportsbook-mobile-ux.css) is themed through these variables */
  --sbm-bg: var(--sn-bg); --sbm-card: var(--sn-row); --sbm-surface: var(--sn-surface); --sbm-surface-2: var(--sn-surface-raised); --sbm-sheet: var(--sn-bg-elevated); --sbm-odd: var(--sn-odd);
  --sbm-line: rgba(244, 201, 93, 0.10); --sbm-line-2: var(--sn-border);
  --sbm-text: var(--sn-text); --sbm-text-2: var(--sn-text-secondary); --sbm-text-3: var(--sn-text-muted);
  --sbm-accent: var(--sn-gold); --sbm-live: var(--sn-live);
}

html.sbx-fz:not([data-sbv2]) body { background: var(--sn-bg) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp { font-family: var(--fz-font) !important; background: var(--sn-bg) !important; color: var(--fz-text); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp button,
html.sbx-fz:not([data-sbv2]) body #bcSbApp input { font-family: var(--fz-font); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :focus-visible { outline: 2px solid var(--fz-accent) !important; outline-offset: 2px; }

/* ==========================================================================
 * HEADER  (all widths)
 * ========================================================================== */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header {
  background: var(--sn-bg) !important; border-bottom: 1px solid var(--fz-line) !important; box-shadow: none !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header__name { font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--sn-text) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header-btn {
  background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; color: var(--sn-text) !important;
  font-size: 12px !important; font-weight: 500 !important; box-shadow: none !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header-btn:hover { background: var(--fz-l3) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header__balance-value { color: var(--fz-accent) !important; font-weight: 600; }

/* ==========================================================================
 * PHONES (< 768px): same engine/structure, re-themed + reference controls
 * ========================================================================== */
@media (max-width: 767.98px) {
  /* Prematch / Live as a two-button segmented control with the teal active state */
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mode-bar { background: var(--sn-bg) !important; border-bottom: 1px solid var(--fz-line) !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mode-bar__wrapper { gap: 6px !important; padding: 6px var(--sbm-gutter) !important; align-items: stretch; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mode {
    flex: 1 1 0 !important; height: 32px !important; min-height: 32px !important; border-radius: var(--fz-r) !important; background: var(--fz-l1) !important;
    color: var(--fz-text-2) !important; border: 0 !important; box-shadow: none !important; justify-content: center;
  }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mode--active { background: var(--fz-accent) !important; color: var(--fz-ink) !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mode--active .bc-sb-mode__count { background: rgba(23,18,10,.22) !important; color: var(--fz-ink) !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mode--live.bc-sb-mode--active { background: var(--fz-accent) !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mode--live.bc-sb-mode--active .bc-sb-mode__count { background: rgba(23,18,10,.22) !important; color: var(--fz-ink) !important; }
  /* sport chips */
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-sports-nav { background: var(--sn-bg) !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-sport {
    background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; color: var(--fz-text) !important; box-shadow: none !important;
  }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-sport.bc-sb-sport--active { background: var(--fz-accent) !important; color: var(--fz-ink) !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-sport--active .bc-sb-sport__name,
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-sport--active .bc-sb-sport__count { color: var(--fz-ink) !important; }
  /* search */
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header__search-input,
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-league-search__input,
  html.sbx-fz:not([data-sbv2]) body #bcSbApp input[type="text"][placeholder*="Search"] {
    background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; color: var(--sn-text) !important; font-size: 13px !important;
  }
  /* bottom navigation + floating slip */
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-floating-betslip { background: var(--fz-accent) !important; color: var(--fz-ink) !important; border-radius: var(--fz-r) !important; }
}

/* ==========================================================================
 * SIDEBAR NAVIGATION  (>= 768px: left column holding search, Prematch/Live, sports, countries, leagues)
 * ========================================================================== */
@media (min-width: 768px) {
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header { height: var(--fz-head-h) !important; min-height: var(--fz-head-h) !important; padding: 0 12px !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header-btn { height: 36px !important; min-height: 36px !important; padding: 0 12px !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header__left svg { width: 26px !important; height: 26px !important; }

  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-layout {
    display: grid !important; grid-template-columns: 280px minmax(0, 1fr) !important; height: calc(100vh - var(--fz-head-h)) !important; height: calc(100dvh - var(--fz-head-h)) !important; min-height: 0 !important;
    background: var(--sn-bg) !important; overflow: hidden;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-layout > .bc-sb-sidebar {
    display: block !important; position: relative !important; left: 0 !important; top: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
    width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 8px !important; overflow-y: auto !important; overflow-x: hidden;
    background: var(--sn-bg) !important; border: 0 !important; border-right: 1px solid var(--fz-line) !important; z-index: auto !important; scrollbar-width: thin; scrollbar-color: var(--fz-l3) transparent;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-layout > .bc-sb-content { min-width: 0 !important; width: auto !important; margin: 0 !important; background: var(--sn-bg) !important; }

  /* --- block 1: search field --- */
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top { display: grid; gap: 8px; margin-bottom: 8px; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-header__center { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; flex: none !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-header__search { width: 100% !important; max-width: none !important; height: 40px !important; position: relative; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-header__search-input {
    width: 100% !important; height: 40px !important; padding: 0 38px 0 12px !important; background: var(--fz-l1) !important; border: 1px solid transparent !important; border-radius: var(--fz-r) !important;
    color: var(--sn-text) !important; font-size: 12px !important; box-shadow: none !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-header__search-input:focus { border-color: var(--fz-accent) !important; outline: none !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-header__search > svg { left: auto !important; right: 12px !important; color: var(--fz-text-2) !important; }

  /* --- block 2: Prematch | Live toggle --- */
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode-bar {
    position: static !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; background: transparent !important; border: 0 !important; top: auto !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode-bar__wrapper { display: flex !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; gap: 0 !important; max-width: none !important; border-radius: var(--fz-r); overflow: hidden; background: var(--fz-l1); }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode {
    flex: 1 1 0 !important; height: 36px !important; min-height: 36px !important; width: auto !important; padding: 0 8px !important; justify-content: center !important; gap: 6px !important;
    background: transparent !important; color: var(--fz-text-2) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode::after,
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode::before { display: none !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode--active,
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode--live.bc-sb-mode--active { background: var(--fz-accent) !important; color: var(--fz-ink) !important; border-radius: var(--fz-r) !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode__label { display: inline-block; text-transform: lowercase; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode__label::first-letter { text-transform: uppercase; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode__count {
    min-width: 0 !important; height: auto !important; padding: 0 !important; background: transparent !important; color: inherit !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode__count::before { content: "("; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode__count::after { content: ")"; }

  /* --- block 3: sports as a vertical list of 34px rows --- */
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sports-nav {
    position: static !important; top: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; background: transparent !important; border: 0 !important; overflow: visible !important; display: block !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sports-wrapper {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 2px !important; width: 100% !important; max-width: none !important; padding: 0 !important; overflow: visible !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport {
    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; flex: none !important;
    width: 100% !important; height: 34px !important; min-height: 34px !important; padding: 0 8px !important; margin: 0 !important; border: 0 !important; border-radius: var(--fz-r) !important; background: transparent !important; color: var(--sn-text) !important; box-shadow: none !important; text-align: left;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport:hover { background: var(--fz-l1) !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport.bc-sb-sport--active { background: var(--fz-l2) !important; box-shadow: inset 3px 0 0 var(--fz-accent) !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport__circle { display: contents !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport__icon { order: 0; width: 22px !important; height: 22px !important; font-size: 16px !important; line-height: 22px !important; text-align: center; flex: none; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport__name {
    order: 1; flex: 1 1 auto; min-width: 0; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; color: var(--sn-text) !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport__count {
    order: 2; position: static !important; transform: none !important; min-width: 0 !important; padding: 0 !important; margin-left: auto; background: transparent !important; color: var(--fz-text-3) !important; font-size: 12px !important; font-weight: 400 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport--active .bc-sb-sport__count { color: var(--fz-accent) !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport::after { display: none !important; }

  /* --- block 4: sections (Top leagues / Top countries / All countries) --- */
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-sidebar .bc-sb-nav-section { margin: 0 0 2px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-sidebar .bc-sb-nav-section__header {
    height: 34px !important; min-height: 34px !important; padding: 0 8px !important; gap: 10px !important; background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; margin-top: 6px !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-sidebar .bc-sb-nav-section__header svg { width: 16px !important; height: 16px !important; color: var(--fz-accent) !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-sidebar .bc-sb-nav-section__title {
    font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sn-text) !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-sidebar .bc-sb-league-search { padding: 6px 0 !important; background: transparent !important; position: static !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-sidebar .bc-sb-league-search__input {
    width: 100% !important; height: 34px !important; background: var(--fz-l1) !important; border: 1px solid transparent !important; border-radius: var(--fz-r) !important; color: var(--sn-text) !important; font-size: 12px !important; padding: 0 10px !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-sidebar .bc-sb-leagues-container { padding: 0 !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country { border: 0 !important; background: transparent !important; margin: 0 !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country__header {
    display: flex !important; align-items: center !important; gap: 10px !important; height: 34px !important; min-height: 34px !important; padding: 0 8px !important; border: 0 !important; border-radius: var(--fz-r) !important; background: transparent !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country__header:hover { background: var(--fz-l1) !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country--expanded > .bc-sb-country__header { background: var(--fz-l1) !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country__name { flex: 1; min-width: 0; font-size: 12px !important; font-weight: 500 !important; color: var(--sn-text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country__count { background: transparent !important; color: var(--fz-text-3) !important; font-size: 12px !important; padding: 0 !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country__chevron { color: var(--fz-text-3) !important; width: 14px !important; height: 14px !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country__leagues { padding: 2px 0 4px 6px !important; display: grid; gap: 2px; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country-league {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-height: 34px !important; padding: 0 10px !important; margin: 0 !important;
    background: var(--fz-l2) !important; border: 0 !important; border-radius: var(--fz-r) !important; color: var(--fz-text-2) !important;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country-league:hover { background: var(--fz-l3) !important; color: var(--sn-text) !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country-league__name { flex: 1; min-width: 0; font-size: 12px !important; font-weight: 400 !important; color: inherit !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country-league__count { background: transparent !important; color: var(--fz-text-3) !important; font-size: 12px !important; padding: 0 !important; }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country-league--selected,
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-country-league[aria-current="true"] { background: var(--fz-l4) !important; color: var(--sn-text) !important; box-shadow: inset 3px 0 0 var(--fz-accent) !important; }
}

/* ==========================================================================
 * CENTRE COLUMN: league header, market legend, date rows, match rows
 * ========================================================================== */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-sports-bar:empty { display: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-events__header {
  position: sticky; top: 0; z-index: 3; display: flex !important; align-items: center !important; justify-content: space-between !important;
  height: 36px !important; min-height: 36px !important; margin: 8px 8px 0 !important; padding: 0 10px !important; background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; box-shadow: none !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-events__title { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--sn-text) !important; gap: 8px; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-events__count { background: transparent !important; color: var(--fz-text-3) !important; font-size: 12px !important; padding: 0 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-back { color: var(--sn-text) !important; background: transparent !important; width: 28px !important; height: 28px !important; }

/* market legend (built by forzza-ui.js): WINNER over W1 X W2, aligned with the odds boxes */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-legend {
  display: none; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; height: 52px; margin: 2px 8px 0; padding: 0 calc(6px + var(--fz-more) + 6px) 0 10px;
  background: var(--fz-l2); border-radius: var(--fz-r); color: var(--sn-text); font-size: 11px; font-weight: 500; letter-spacing: .02em;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-legend[hidden] { display: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-legend__title { width: calc(3 * var(--fz-odd-w) + 2 * var(--fz-gap)); text-align: center; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-legend__cols { display: flex; gap: var(--fz-gap); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-legend__cols > span { width: var(--fz-odd-w); text-align: center; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-legend--two .fz-legend__x { display: none; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-legend--two .fz-legend__title { width: calc(2 * var(--fz-odd-w) + var(--fz-gap)); }
@media (min-width: 768px) {
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-legend:not([hidden]) { display: flex; }
}

/* date header rows */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList { max-width: none !important; margin: 0 !important; padding: 0 0 24px !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header {
  height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 8px !important; padding: 0 10px !important;
  display: flex !important; align-items: center !important; background: transparent !important; border: 0 !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header .bc-sb-date-header__content { display: flex; align-items: center; justify-content: space-between; width: 100%; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header .bc-sb-date-header__label { font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--sn-text) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header .bc-sb-date-header__badge {
  background: transparent !important; border: 1px solid var(--fz-accent) !important; color: var(--fz-accent) !important; border-radius: var(--fz-r) !important; font-size: 10px !important; font-weight: 500 !important; padding: 1px 6px !important; letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
 * MATCH ROWS  (geometry contract at the top of this file)
 *   >= 768:  [ home / away ............ ][ time / star ][ W1 ][ X ][ W2 ][ > ]
 *   <  768:  [ time / star ][ home / away ............ ][ 1 ][ X ][ 2 ]
 * The legacy strip/match wrappers become display:contents, so their children are grid items of the row:
 * no markup change and every JS hook (data-fi, .bc-sb-odd, favorites, odds patching) keeps working.
 * Live rows (.bc-sb-event--live) keep their own layout (sportsbook-live-ui.css).
 * -------------------------------------------------------------------------- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: center !important; align-content: center !important; column-gap: 6px !important; row-gap: 0 !important;
  box-sizing: border-box;
  width: auto !important; margin: 0 8px !important; padding: 0 6px 0 4px !important;
  height: var(--fz-row-h) !important; min-height: var(--fz-row-h) !important; max-height: var(--fz-row-h) !important;
  background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; box-shadow: none !important; overflow: hidden !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live):hover { background: var(--fz-l2) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live)::before,
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live)::after { content: none !important; display: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__strip,
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__match { display: contents !important; }

/* league name inside a row: only when it is informative (not inside a single-league view) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__league { display: none !important; }

/* time + star: phones left column, stacked */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__time-col {
  grid-column: 1 !important; grid-row: 1 / -1 !important; align-self: start !important; justify-self: stretch; display: flex !important; flex-direction: column; align-items: center; gap: 0 !important;
  width: auto !important; height: auto !important; margin: 7px 0 0 !important; padding: 0 !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__time {
  font-size: 11px !important; line-height: 14px !important; font-weight: 400 !important; color: var(--fz-text-3) !important; font-variant-numeric: tabular-nums; text-align: center;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__favorite {
  grid-column: 1 !important; grid-row: 1 / -1 !important; align-self: end !important; justify-self: center !important;
  width: 44px !important; height: 44px !important; min-width: 0 !important; margin: 0 0 -12px !important; padding: 0 !important; background: transparent !important; border: 0 !important;
  display: inline-grid !important; place-items: center !important; position: relative; z-index: 1; color: var(--fz-text-3) !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__favorite-icon { width: 15px !important; height: 15px !important; stroke: currentColor !important; color: inherit !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__favorite--active { color: var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__favorite--active .bc-sb-event__favorite-icon { fill: currentColor !important; }

/* teams */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__teams {
  grid-column: 2 !important; grid-row: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-content: center !important; justify-items: stretch !important;
  min-width: 0; margin: 0 !important; padding: 0 !important; gap: 4px !important; height: auto !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__teams::before,
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__teams::after { content: none !important; display: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__team {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px; width: 100% !important; max-width: none !important; min-width: 0; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; text-align: left;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__team-name {
  flex: 1 1 auto; min-width: 0; font-size: 12px !important; line-height: 15px !important; font-weight: 500 !important; color: var(--sn-text) !important; text-align: left !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}

/* odds columns */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__odds {
  grid-column: 3 !important; grid-row: 1 / -1 !important; display: flex !important; flex-direction: row !important; justify-content: flex-end !important; align-items: center !important; gap: var(--fz-gap) !important;
  width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd {
  position: relative; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important;
  flex: none !important; width: 46px !important; height: 42px !important; min-height: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
  background: var(--fz-l3) !important; border: 0 !important; border-radius: var(--fz-r) !important; box-shadow: none !important; color: var(--fz-odd) !important; transition: background-color .15s, color .15s;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd__label { font-size: 9px !important; line-height: 11px !important; font-weight: 400 !important; color: var(--fz-text-3) !important; letter-spacing: .03em; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd__value { font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; color: var(--fz-odd) !important; font-variant-numeric: tabular-nums; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd__movement { position: absolute; top: 2px; right: 3px; font-size: 8px; line-height: 1; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd:hover:not(:disabled):not(.bc-sb-odd--selected) { background: var(--fz-l4) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd:focus-visible { outline: 2px solid var(--fz-accent) !important; outline-offset: 1px; }
/* selected */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd.bc-sb-odd--selected { background: var(--fz-accent) !important; color: var(--fz-ink) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd--selected .bc-sb-odd__label,
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd--selected .bc-sb-odd__value { color: var(--fz-ink) !important; font-weight: 600 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd--selected::after {
  position: absolute !important; top: 2px !important; right: 3px !important; left: auto !important; bottom: auto !important; width: auto !important; height: auto !important;
  margin: 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1 !important; color: var(--fz-ink) !important; background: transparent !important; transform: none !important;
}
/* suspended / locked / unavailable: visibly not tappable, never a number */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd[data-state="LOCKED"],
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd[data-state="SUSPENDED"],
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd.bc-sb-odd--locked { background: var(--fz-l1) !important; color: var(--fz-text-3) !important; cursor: not-allowed; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd[data-state="VIEW_ONLY"] { background: transparent !important; box-shadow: inset 0 0 0 1px var(--fz-l3) !important; }
/* stale price: amber ring so an old price is never silent */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd.bc-sb-odd--stale:not(.bc-sb-odd--selected) { box-shadow: inset 0 0 0 1px var(--fz-warn) !important; }
/* updated price: existing odds-flash cue (data-move) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd[data-move^="up"]:not(.bc-sb-odd--selected) { background: var(--sn-up-tint) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd[data-move^="down"]:not(.bc-sb-odd--selected) { background: var(--sn-down-tint) !important; }

/* >= 768: reference column order (teams | time/star | odds | chevron), labels moved to the legend */
@media (min-width: 768px) {
  html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) {
    grid-template-columns: minmax(0, 1fr) 44px auto var(--fz-more) !important; padding: 0 6px 0 10px !important; column-gap: 6px !important;
  }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live)::after {
    content: "" !important; display: block !important; grid-column: 4; grid-row: 1 / -1; width: 7px; height: 7px; justify-self: center; border-top: 2px solid var(--fz-text-2); border-right: 2px solid var(--fz-text-2); transform: rotate(45deg); margin-left: -3px;
  }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__teams { grid-column: 1 !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__time-col { grid-column: 2 !important; align-self: start !important; margin: 8px 0 0 !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__favorite { grid-column: 2 !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__odds { grid-column: 3 !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd { width: var(--fz-odd-w) !important; height: var(--fz-odd-h) !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd__label { display: none !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-event__team-name { font-size: 12px !important; }
}

/* ==========================================================================
 * BET SLIP  (desktop right panel; the same classes are used by the phone sheet)
 * ========================================================================== */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-betslip { background: var(--sn-bg) !important; border-left: 1px solid var(--fz-line) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-betslip__header { background: var(--sn-bg) !important; border: 0 !important; padding: 8px 8px 0 !important; height: auto !important; min-height: 0 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-hub-tabs { display: flex !important; width: 100% !important; gap: 0 !important; height: 34px !important; background: var(--fz-l1); border-radius: var(--fz-r); overflow: hidden; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-hub-tab {
  flex: 1 1 0 !important; height: 34px !important; min-height: 34px !important; width: auto !important; padding: 0 6px !important; background: transparent !important; color: var(--fz-text-2) !important;
  border: 0 !important; border-radius: var(--fz-r) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-hub-tab--active { background: var(--fz-accent) !important; color: var(--fz-ink) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-hub-tab::after { display: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-betslip__content { background: var(--sn-bg) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-wallet-bar { background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; color: var(--fz-text-2) !important; font-size: 12px !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-betslip__toolbar { color: var(--fz-text-2); font-size: 12px; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-betslip__remove-all { color: var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection {
  background: var(--fz-l1) !important; border: 0 !important; border-left: 3px solid var(--fz-accent) !important; border-radius: var(--fz-r) !important; box-shadow: none !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__league { color: var(--fz-text-3) !important; font-size: 11px !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__team { color: var(--sn-text) !important; font-size: 12px !important; font-weight: 500 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__outcome { color: var(--fz-accent) !important; font-weight: 500 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__odds { color: var(--fz-odd) !important; font-weight: 500 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection--changed { border-left-color: var(--fz-warn) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection--suspended { border-left-color: var(--fz-down) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-betslip__footer { background: var(--sn-bg) !important; border-top: 1px solid var(--fz-line) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-stake__input { background: var(--fz-l1) !important; border: 1px solid transparent !important; border-radius: var(--fz-r) !important; color: var(--sn-text) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-stake__input:focus { border-color: var(--fz-accent) !important; outline: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-returns__value { color: var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-place-btn { background: var(--fz-accent) !important; color: var(--fz-ink) !important; border: 0 !important; border-radius: var(--fz-r) !important; font-weight: 600 !important; min-height: 44px; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-place-btn:disabled { background: var(--fz-l1) !important; color: var(--fz-text-3) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-booking-btn { background: var(--fz-l1) !important; color: var(--sn-text) !important; border: 0 !important; border-radius: var(--fz-r) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-state-banner { background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-state-banner__btn--primary { background: var(--fz-accent) !important; color: var(--fz-ink) !important; border: 0 !important; border-radius: var(--fz-r) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-state-banner__btn { border-radius: var(--fz-r) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-empty__title { color: var(--sn-text) !important; font-weight: 500 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-empty__text { color: var(--fz-text-3) !important; }

/* three columns - navigation | events | slip - from 1024px (the legacy engine shows the slip as a column from 1024) */
@media (min-width: 1024px) {
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-layout { grid-template-columns: 248px minmax(0, 1fr) 288px !important; }
}
@media (min-width: 1280px) {
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-layout { grid-template-columns: 300px minmax(0, 1fr) 320px !important; }
}
@media (min-width: 1400px) {
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .bc-sb-layout { grid-template-columns: 320px minmax(0, 1fr) 340px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-odd { transition: none !important; }
}

/* ---- fixes found in browser QA ---- */
@media (min-width: 768px) {
  /* sport names left-aligned (the legacy tile centred them) */
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport__name { text-align: left !important; justify-content: flex-start !important; }
  /* the in-content sport bar is replaced by the sidebar list */
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp #bcSbSportsPanelContent { display: none !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-booking-btn--load { background: var(--fz-l1) !important; }
}
@media (min-width: 768px) {
  /* the phone search field (bridged to the header search by mobile-ux.js) duplicates the sidebar search here */
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp #bcSbMobileSearch { display: none !important; }
}

/* ==========================================================================
 * >= 768 while the legacy engine hides the sidebar (Live mode): the toggle and search sit in their original places
 * (forzza-ui.js puts them back), so they get the same reference styling there.
 * ========================================================================== */
@media (min-width: 768px) {
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode-bar { background: var(--sn-bg) !important; border-bottom: 1px solid var(--fz-line) !important; }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode-bar__wrapper { max-width: 420px !important; margin: 0 auto 0 12px !important; gap: 0 !important; padding: 6px 0 !important; height: auto !important; }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode {
    height: 36px !important; min-height: 36px !important; flex: 1 1 0 !important; background: var(--fz-l1) !important; color: var(--fz-text-2) !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; justify-content: center; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode--active,
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode--live.bc-sb-mode--active { background: var(--fz-accent) !important; color: var(--fz-ink) !important; }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode--active .bc-sb-mode__count { background: rgba(23,18,10,.22) !important; color: var(--fz-ink) !important; }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-header__search-input {
    background: var(--fz-l1) !important; border: 1px solid transparent !important; border-radius: var(--fz-r) !important; color: var(--sn-text) !important; font-size: 12px !important;
  }
}

/* ==========================================================================
 * PARITY PASS  (forzza-features.js + collapsible dates + match page + live)
 * ========================================================================== */

/* ---- search: the legacy overlay (search.js) is replaced by the panel from forzza-features.js ---- */
html.sbx-fz:not([data-sbv2]) .bc-sb-search-overlay { display: none !important; }
html.sbx-fz:not([data-sbv2]) .fz-search {
  position: fixed; z-index: 1200; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 4px;
  background: var(--sn-bg-elevated); border: 1px solid var(--fz-line); border-radius: var(--fz-r); box-shadow: 0 12px 32px rgba(0,0,0,.7); font-family: var(--fz-font); color: var(--sn-text);
}
html.sbx-fz:not([data-sbv2]) .fz-search[hidden] { display: none !important; }
html.sbx-fz:not([data-sbv2]) .fz-search__group { padding: 8px 8px 4px; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fz-text-3); }
html.sbx-fz:not([data-sbv2]) .fz-search__item {
  display: block; width: 100%; min-height: 44px; padding: 6px 10px; margin: 0; background: transparent; border: 0; border-radius: var(--fz-r); color: var(--sn-text); text-align: left; cursor: pointer; font-family: inherit;
}
html.sbx-fz:not([data-sbv2]) .fz-search__item:hover, html.sbx-fz:not([data-sbv2]) .fz-search__item.is-active { background: var(--fz-l2); }
html.sbx-fz:not([data-sbv2]) .fz-search__item:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: -2px; }
html.sbx-fz:not([data-sbv2]) .fz-search__main { display: block; font-size: 13px; font-weight: 500; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.sbx-fz:not([data-sbv2]) .fz-search__sub { display: block; font-size: 11px; line-height: 15px; color: var(--fz-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.sbx-fz:not([data-sbv2]) .fz-search__live { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 3px; background: var(--fz-live); color: var(--sn-text); font-size: 9px; font-weight: 600; line-height: 14px; vertical-align: 1px; }
html.sbx-fz:not([data-sbv2]) .fz-search__state { padding: 18px 14px; text-align: center; }
html.sbx-fz:not([data-sbv2]) .fz-search__state-t { font-size: 13px; font-weight: 500; }
html.sbx-fz:not([data-sbv2]) .fz-search__state-s { margin-top: 4px; font-size: 12px; line-height: 17px; color: var(--fz-text-3); }
html.sbx-fz:not([data-sbv2]) .fz-search__retry { margin-top: 10px; height: 34px; padding: 0 16px; background: var(--fz-accent); color: var(--fz-ink); border: 0; border-radius: var(--fz-r); font: 500 12px var(--fz-font); cursor: pointer; }

/* ---- collapsible date groups (renderer.js sets role=button / data-date-key) ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header[data-date-key] { cursor: pointer; border-radius: var(--fz-r); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header[data-date-key]:hover { background: var(--fz-l1) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header .bc-sb-date-header__content { justify-content: flex-start !important; gap: 10px; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header .bc-sb-date-header__label { flex: 1 1 auto; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header[data-date-key] .bc-sb-date-header__content::after {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px 2px; border-right: 2px solid var(--fz-text-2); border-bottom: 2px solid var(--fz-text-2); transform: rotate(-135deg); transition: transform .15s;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header--collapsed .bc-sb-date-header__content::after { transform: rotate(45deg) translateY(-2px); }

/* ---- competition header: favorite + collapse ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-hdr-actions { display: flex; align-items: center; gap: 0; margin-left: auto; margin-right: 6px; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-hdr-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 0; border-radius: var(--fz-r); color: var(--fz-text-2); cursor: pointer; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-hdr-btn:hover { background: var(--fz-l2); color: var(--sn-text); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-hdr-btn[hidden] { display: none; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-hdr-star svg { fill: none; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-hdr-star.is-on { color: var(--fz-accent); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-hdr-star.is-on svg { fill: currentColor; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbEventsPanel.fz-collapsed .fz-hdr-fold svg { transform: rotate(180deg); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbEventsPanel.fz-collapsed #bcSbFixturesList,
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbEventsPanel.fz-collapsed .fz-legend,
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbEventsPanel.fz-collapsed .fz-rule { display: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-rule { margin: 4px 8px 0; padding: 0 10px; font-size: 11px; line-height: 15px; color: var(--fz-text-3); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-rule[hidden] { display: none; }

/* ---- Popular Matches entry (sidebar, >= 768) ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-popular { display: none; }
@media (min-width: 768px) {
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-popular {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; margin: 0 0 4px; padding: 0 8px; background: var(--fz-l1); color: var(--sn-text); border: 0; border-radius: var(--fz-r);
    font: 500 13px var(--fz-font); text-align: left; cursor: pointer;
  }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-popular:hover { background: var(--fz-l2); }
  html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-popular svg { color: var(--fz-accent); flex: none; }
}

/* ---- unavailable / empty / loading blocks inside the match list ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-state { padding: 36px 16px; text-align: center; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-state__t { font-size: 14px; font-weight: 500; color: var(--sn-text); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-state__s { max-width: 36ch; margin: 6px auto 0; font-size: 12px; line-height: 17px; color: var(--fz-text-3); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-state__btn { margin-top: 14px; height: 36px; padding: 0 20px; background: var(--fz-accent); color: var(--fz-ink); border: 0; border-radius: var(--fz-r); font: 500 13px var(--fz-font); cursor: pointer; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-empty-state, html.sbx-fz:not([data-sbv2]) body #bcSbApp .sb-empty-state { color: var(--fz-text-3) !important; }

/* ==========================================================================
 * MATCH PAGE  (legacy yellow -> reference tokens) + MULTI-COLUMN MARKETS
 * ========================================================================== */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbPrematchMatchPage { background: var(--sn-bg) !important; container-type: inline-size; container-name: fzmatch; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-backbar { background: var(--sn-bg) !important; border-bottom: 1px solid var(--fz-line) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-back { color: var(--sn-text) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-breadleague { color: var(--sn-text) !important; font-weight: 500 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-hero__league { color: var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-hero__time, html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-hero__countdown-val { color: var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-hero__teamname { font-weight: 500 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-status--upcoming { background: transparent !important; color: var(--fz-accent) !important; box-shadow: inset 0 0 0 1px var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-matchinfo { background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; margin: 6px 8px !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-tabs { background: var(--sn-bg) !important; border-bottom: 1px solid var(--fz-line) !important; align-items: center; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-tab { color: var(--fz-text-2) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-tab--active { color: var(--fz-accent) !important; box-shadow: inset 0 -2px 0 var(--fz-accent) !important; border-bottom-color: var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-section-header { color: var(--fz-text-3) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .06em; padding: 10px 10px 4px !important; background: transparent !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbPrematchMarkets { padding: 0 8px 24px !important; gap: 4px; background: var(--sn-bg) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-market { background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; box-shadow: none !important; overflow: hidden; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-market__head { min-height: 36px !important; padding: 0 10px !important; background: transparent !important; color: var(--sn-text) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-market__name { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sn-text) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-market__odds { padding: 0 6px 6px !important; gap: 4px !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-odd {
  min-height: 34px !important; background: var(--fz-l3) !important; border: 0 !important; border-radius: var(--fz-r) !important; box-shadow: none !important; color: var(--fz-odd) !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-odd__label { font-size: 11px !important; font-weight: 400 !important; color: var(--fz-text-2) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-odd__value { font-size: 12px !important; font-weight: 500 !important; color: var(--fz-odd) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-odd:hover:not(:disabled):not(.bc-sb-odd--selected) { background: var(--fz-l4) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-odd.bc-sb-odd--selected { background: var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-odd.bc-sb-odd--selected .bc-sb-mp-odd__label,
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-odd.bc-sb-odd--selected .bc-sb-mp-odd__value { color: var(--fz-ink) !important; font-weight: 600 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-odd[data-state="LOCKED"], html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-odd[data-state="SUSPENDED"] { background: var(--fz-l1) !important; color: var(--fz-text-3) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-odd[data-state="VIEW_ONLY"] { background: transparent !important; box-shadow: inset 0 0 0 1px var(--fz-l3) !important; }

/* multi-column switch (built by forzza-features.js) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-mc { display: none; align-items: center; gap: 8px; margin-left: auto; padding: 0 12px; font-size: 12px; color: var(--fz-text-2); cursor: pointer; white-space: nowrap; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-mc__sw { position: relative; width: 38px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: var(--fz-l4); cursor: pointer; transition: background-color .15s; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-mc__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sn-text); transition: transform .15s; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-mc__sw[aria-checked="true"] { background: var(--fz-accent); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-mc__sw[aria-checked="true"]::after { transform: translateX(16px); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-mc__sw:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; }
.fz-mc { display: none; }
@container fzmatch (min-width: 620px) {
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-mc { display: inline-flex; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-mc-on #bcSbPrematchMarkets { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 6px !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .fz-mc-on #bcSbPrematchMarkets > .bc-sb-mp-section-header { grid-column: 1 / -1; }
}

/* ==========================================================================
 * LIVE: same tokens as prematch (cards stay non-virtual; live-ui.css keeps ownership of states)
 * ========================================================================== */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event.bc-sb-event--live {
  background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; box-shadow: none !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event.bc-sb-event--live:hover { background: var(--fz-l2) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__team-name { font-size: 12px !important; font-weight: 500 !important; color: var(--sn-text) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__team-score { font-size: 13px !important; font-weight: 500 !important; color: var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__meta-name,
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__status-line { font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--fz-text-3) !important; text-transform: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__live-indicator { color: var(--fz-live) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__sport-tag { display: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__favorite { color: var(--fz-text-3) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__favorite--active { color: var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-odd { background: var(--fz-l3) !important; border: 0 !important; border-radius: var(--fz-r) !important; box-shadow: none !important; color: var(--fz-odd) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-odd__value { color: var(--fz-odd) !important; font-weight: 500 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-odd__label { color: var(--fz-text-3) !important; font-weight: 400 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-odd.bc-sb-odd--selected { background: var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-odd.bc-sb-odd--selected .bc-sb-odd__value,
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-odd.bc-sb-odd--selected .bc-sb-odd__label { color: var(--fz-ink) !important; font-weight: 600 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-odd[data-state="LOCKED"] { background: var(--fz-l1) !important; color: var(--fz-text-3) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-live__league-events { gap: 2px; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-hero__badge { color: var(--fz-accent) !important; border-color: var(--fz-accent) !important; }

/* ---- slip notices + result toast: reference tokens instead of legacy orange ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__accept { background: var(--fz-accent) !important; color: var(--fz-ink) !important; border: 0 !important; border-radius: var(--fz-r) !important; font-weight: 600 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__notice { background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; box-shadow: inset 3px 0 0 var(--fz-warn) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__notice--error { box-shadow: inset 3px 0 0 var(--fz-down) !important; }
html.sbx-fz:not([data-sbv2]) .bc-sb-pbtoast { background: var(--sn-bg-elevated) !important; border: 1px solid var(--fz-line) !important; border-radius: var(--fz-r) !important; font-family: var(--fz-font) !important; }
html.sbx-fz:not([data-sbv2]) .bc-sb-pbtoast--success { box-shadow: inset 3px 0 0 var(--fz-accent) !important; }
html.sbx-fz:not([data-sbv2]) .bc-sb-pbtoast--warning { box-shadow: inset 3px 0 0 var(--fz-warn) !important; }
html.sbx-fz:not([data-sbv2]) .bc-sb-pbtoast--error { box-shadow: inset 3px 0 0 var(--fz-down) !important; }

/* ---- live parity fixes found in browser QA ---- */
/* the badge keeps its dot + red text on NO fill (the legacy red fill made red-on-red text unreadable once the colour was themed) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__live-indicator { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--fz-live) !important; font-weight: 600 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__live-label { color: var(--fz-live) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event--live .bc-sb-event__live-dot { background: var(--fz-live) !important; }
/* Live hides the sidebar, but the legacy grid kept its 260px column: use the width (events | slip) */
@media (min-width: 1024px) {
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-layout { grid-template-columns: minmax(0, 1fr) 320px !important; }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-layout > .bc-sb-content { grid-column: 1 !important; }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-layout > .bc-sb-betslip { grid-column: 2 !important; }
}
/* same label treatment as the sidebar toggle: "Prematch (714)" / "Live (117)" */
@media (min-width: 768px) {
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode__label { display: inline-block; text-transform: lowercase; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 500 !important; }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode__label::first-letter { text-transform: uppercase; }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode__count { background: transparent !important; padding: 0 !important; min-width: 0 !important; font-weight: 400 !important; color: inherit !important; }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode__count::before { content: "("; }
  html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode__count::after { content: ")"; }
}

/* live sport filter chips (they reuse .bc-sb-sport; the active state is an ARIA attribute, not a class) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-live__sport-filter-track .bc-sb-sport {
  background: var(--fz-l1) !important; border: 0 !important; border-radius: var(--fz-r) !important; box-shadow: none !important; color: var(--sn-text) !important; outline-color: transparent;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-live__sport-filter-track .bc-sb-sport__name,
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-live__sport-filter-track .bc-sb-sport__count { color: inherit !important; text-transform: none !important; letter-spacing: 0 !important; background: transparent !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-live__sport-filter-track .bc-sb-sport[aria-pressed="true"],
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-live__sport-filter-track .bc-sb-sport[aria-selected="true"],
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-live__sport-filter-track .bc-sb-sport.active,
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-live__sport-filter-track .bc-sb-sport.bc-sb-sport--active,
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-live__sport-filter-track .bc-sb-sport[class*="selected"] { background: var(--fz-accent) !important; color: var(--fz-ink) !important; }
/* favorite stars follow their button colour everywhere (the icon carried a hard-coded yellow stroke) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event__favorite-icon { stroke: currentColor !important; color: inherit !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event__favorite--active .bc-sb-event__favorite-icon { fill: currentColor !important; }

/* count badges: teal (the legacy yellow was the last un-themed accent) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header-btn__badge { background: var(--fz-accent) !important; color: var(--fz-ink) !important; font-weight: 600 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-hub-tab__badge { background: var(--fz-ink) !important; color: var(--fz-accent) !important; font-weight: 600 !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-hub-tab:not(.bc-sb-hub-tab--active) .bc-sb-hub-tab__badge { background: var(--fz-accent) !important; color: var(--fz-ink) !important; }

/* ==========================================================================
 * GOLD NEON x BLACK LUXURY LAYER
 * One coherent pass over: surfaces, odds-state hierarchy, primary actions, inputs, slip, motion.
 * Rules of the layer:
 *   - gold marks meaning only (selected odds, primary actions, active nav, focus, key values); panels stay dark
 *   - glow is used on ONE element at a time (the hovered/selected odd, the primary button) - never on every row
 *   - motion = transform/opacity, 160-320ms; row-level shadows never animate; nothing animates on a timer except
 *     the loading placeholder (opacity only)
 *   - `!important` is only used where the legacy id-prefixed cascade forces it (documented once in the file header)
 * ========================================================================== */

/* ---- atmosphere + shell ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp { background: radial-gradient(900px 360px at 50% -140px, rgba(244, 201, 93, 0.05), transparent 70%), var(--sn-bg) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header { border-bottom: 1px solid var(--sn-border) !important; box-shadow: 0 12px 28px -20px rgba(244, 201, 93, 0.22) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header__name { color: var(--sn-gold-bright) !important; letter-spacing: .01em !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header-btn { box-shadow: inset 0 0 0 1px var(--sn-hairline) !important; transition: background-color var(--sn-motion-fast) var(--sn-ease), box-shadow var(--sn-motion-fast) var(--sn-ease) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-header-btn:hover { box-shadow: inset 0 0 0 1px var(--sn-border-strong) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :focus-visible { outline: 2px solid var(--sn-gold) !important; outline-offset: 2px; box-shadow: var(--sn-gold-glow-soft); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp ::selection { background: rgba(244, 201, 93, 0.28); color: var(--sn-text); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(#bcSbSidebar, #bcSbEventsPanel, .bc-sb-betslip__content, #bcSbPrematchMarkets) { scrollbar-width: thin; scrollbar-color: var(--sn-gold-muted) transparent; }

/* ---- active navigation: a refined gold indicator, not a filled slab ---- */
html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode--active,
html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-mode--live.bc-sb-mode--active,
html.sbx-fz:not(.sbx-fz--side-nav):not([data-sbv2]) body #bcSbApp .bc-sb-mode--active,
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-hub-tab--active,
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-live__sport-filter-track .bc-sb-sport[aria-pressed="true"] { background: var(--sn-gold-gradient) !important; color: var(--sn-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; }
html.sbx-fz.sbx-fz--side-nav:not([data-sbv2]) body #bcSbApp .fz-side-top .bc-sb-sport.bc-sb-sport--active { background: linear-gradient(90deg, rgba(244, 201, 93, 0.12), rgba(244, 201, 93, 0) 70%), var(--sn-row-hover) !important; box-shadow: inset 3px 0 0 var(--sn-gold) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-sports-nav .bc-sb-sport.bc-sb-sport--active { background: var(--sn-gold-gradient) !important; }

/* ---- rows + league/date headers: dark surfaces, hairline edges instead of boxes ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live),
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event.bc-sb-event--live { box-shadow: inset 0 0 0 1px var(--sn-hairline) !important; transition: background-color var(--sn-motion-fast) var(--sn-ease), box-shadow var(--sn-motion-fast) var(--sn-ease); }
@media (hover: hover) {
  html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live):hover,
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event.bc-sb-event--live:hover { box-shadow: inset 0 0 0 1px var(--sn-border) !important; }
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-events__header, .fz-legend, .bc-sb-nav-section__header, .bc-sb-mp-matchinfo) { box-shadow: inset 0 0 0 1px var(--sn-hairline); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-events__title { color: var(--sn-gold-bright) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbFixturesList > .bc-sb-date-header .bc-sb-date-header__label { color: var(--sn-text-secondary) !important; letter-spacing: .02em !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event__time { font-variant-numeric: tabular-nums; }

/* ---- ODDS BUTTONS: default / hover / focus / pressed / selected / suspended / stale / moved ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(#bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd, .bc-sb-event--live .bc-sb-odd, .bc-sb-mp-odd) {
  background: var(--sn-odd) !important; box-shadow: inset 0 0 0 1px var(--sn-hairline) !important; color: var(--sn-gold) !important;
  font-variant-numeric: tabular-nums; transition: transform var(--sn-motion-fast) var(--sn-ease), background-color var(--sn-motion-fast) var(--sn-ease), box-shadow var(--sn-motion-fast) var(--sn-ease), color var(--sn-motion-fast) var(--sn-ease);
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(#bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd, .bc-sb-event--live .bc-sb-odd, .bc-sb-mp-odd) :is(.bc-sb-odd__value, .bc-sb-mp-odd__value) { color: var(--sn-gold) !important; font-weight: 500 !important; letter-spacing: .01em; }
@media (hover: hover) {
  html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(#bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd, .bc-sb-event--live .bc-sb-odd, .bc-sb-mp-odd):hover:not(:disabled):not([aria-disabled="true"]):not(.bc-sb-odd--selected) {
    transform: translateY(-1px); background: var(--sn-odd-hover) !important; box-shadow: inset 0 0 0 1px var(--sn-border-strong), var(--sn-gold-glow-soft) !important;
  }
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(#bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd, .bc-sb-event--live .bc-sb-odd, .bc-sb-mp-odd):active:not(:disabled) { transform: translateY(0) scale(.97); transition-duration: 60ms; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(#bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd, .bc-sb-event--live .bc-sb-odd, .bc-sb-mp-odd):focus-visible { outline: 2px solid var(--sn-gold) !important; outline-offset: 2px; position: relative; z-index: 2; }
/* selected: gold outline + gradient + one soft glow, dark ink for contrast */
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(#bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd, .bc-sb-event--live .bc-sb-odd, .bc-sb-mp-odd).bc-sb-odd--selected {
  background: var(--sn-gold-gradient) !important; color: var(--sn-ink) !important; box-shadow: inset 0 0 0 1px var(--sn-gold-bright), var(--sn-gold-glow) !important; transform: none;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(#bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd, .bc-sb-event--live .bc-sb-odd, .bc-sb-mp-odd).bc-sb-odd--selected :is(.bc-sb-odd__value, .bc-sb-mp-odd__value, .bc-sb-odd__label, .bc-sb-mp-odd__label) { color: var(--sn-ink) !important; font-weight: 600 !important; }
/* suspended / locked / unavailable: hatched and muted - clearly "not a price" */
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(#bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd, .bc-sb-event--live .bc-sb-odd, .bc-sb-mp-odd):is([data-state="LOCKED"], [data-state="SUSPENDED"], .bc-sb-odd--locked, .bc-sb-odd--unavailable, :disabled) {
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(244, 201, 93, 0.045) 5px 6px), var(--sn-bg-elevated) !important; box-shadow: inset 0 0 0 1px rgba(244, 201, 93, 0.06) !important; color: var(--sn-text-muted) !important; cursor: not-allowed; transform: none !important;
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(#bcSbFixturesList > .bc-sb-event:not(.bc-sb-event--live) .bc-sb-odd, .bc-sb-event--live .bc-sb-odd, .bc-sb-mp-odd):is([data-state="LOCKED"], [data-state="SUSPENDED"], .bc-sb-odd--locked, .bc-sb-odd--unavailable, :disabled) :is(.bc-sb-odd__value, .bc-sb-mp-odd__value) { color: var(--sn-text-muted) !important; }
/* view-only / stale */
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-odd, .bc-sb-mp-odd)[data-state="VIEW_ONLY"]:not(.bc-sb-odd--selected) { background: transparent !important; box-shadow: inset 0 0 0 1px var(--sn-border) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-odd, .bc-sb-mp-odd).bc-sb-odd--stale:not(.bc-sb-odd--selected) { box-shadow: inset 0 0 0 1px var(--sn-warn) !important; }
/* real price movement (odds-flash.js sets data-move only when an accepted price actually changed) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-odd, .bc-sb-mp-odd)[data-move^="up"]:not(.bc-sb-odd--selected) { background: var(--sn-up-tint) !important; animation: sn-move-up var(--sn-motion-slow) var(--sn-ease) 1; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-odd, .bc-sb-mp-odd)[data-move^="down"]:not(.bc-sb-odd--selected) { background: var(--sn-down-tint) !important; animation: sn-move-down var(--sn-motion-slow) var(--sn-ease) 1; }
/* loading placeholder (opacity only, real loading state) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-event .bc-sb-odd.bc-sb-odd--loading { animation: sn-breathe 1.4s ease-in-out infinite; }

/* ---- PRIMARY ACTIONS ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-place-btn, .bc-sb-state-banner__btn--primary, .bc-sb-selection__accept, .fz-state__btn, .fz-search__retry) {
  background: var(--sn-gold-gradient) !important; color: var(--sn-ink) !important; border: 0 !important; border-radius: var(--sn-radius-sm) !important; font-weight: 600 !important; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px -10px rgba(244, 201, 93, 0.55) !important;
  transition: transform var(--sn-motion-fast) var(--sn-ease), box-shadow var(--sn-motion-fast) var(--sn-ease), filter var(--sn-motion-fast) var(--sn-ease);
}
@media (hover: hover) {
  html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-place-btn, .bc-sb-state-banner__btn--primary, .bc-sb-selection__accept, .fz-state__btn, .fz-search__retry):hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--sn-gold-glow-strong) !important; }
}
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-place-btn, .bc-sb-state-banner__btn--primary, .bc-sb-selection__accept, .fz-state__btn, .fz-search__retry):active:not(:disabled) { transform: translateY(1px); filter: brightness(.96); transition-duration: 60ms; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-place-btn, .bc-sb-state-banner__btn--primary):disabled { background: var(--sn-surface-raised) !important; color: var(--sn-text-muted) !important; box-shadow: inset 0 0 0 1px var(--sn-hairline) !important; filter: none; cursor: not-allowed; }
/* in-flight submission (aria-busy is set by betslip.js only while the request is really running) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-place-btn[aria-busy="true"]::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -2px; border: 2px solid rgba(244, 201, 93, 0.3); border-top-color: var(--sn-gold); border-radius: 50%; animation: sn-spin .7s linear infinite; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-booking-btn, .bc-sb-state-banner__btn:not(.bc-sb-state-banner__btn--primary), .fz-popular) { box-shadow: inset 0 0 0 1px var(--sn-border) !important; transition: box-shadow var(--sn-motion-fast) var(--sn-ease), background-color var(--sn-motion-fast) var(--sn-ease); }
@media (hover: hover) { html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-booking-btn, .bc-sb-state-banner__btn:not(.bc-sb-state-banner__btn--primary), .fz-popular):hover { box-shadow: inset 0 0 0 1px var(--sn-border-strong) !important; } }

/* ---- INPUTS ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-header__search-input, .bc-sb-league-search__input, .bc-sb-stake__input, #bcSbMobileSearchInput) { caret-color: var(--sn-gold); transition: border-color var(--sn-motion-fast) var(--sn-ease), box-shadow var(--sn-motion-fast) var(--sn-ease); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-header__search-input, .bc-sb-league-search__input, .bc-sb-stake__input, #bcSbMobileSearchInput):focus { border-color: var(--sn-gold) !important; box-shadow: 0 0 0 3px rgba(244, 201, 93, 0.14) !important; outline: none !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(input)::placeholder { color: var(--sn-text-muted); opacity: 1; }
html.sbx-fz:not([data-sbv2]) .fz-search { border-color: var(--sn-border-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(244, 201, 93, 0.06); background: var(--sn-bg-elevated); animation: sn-fade-in var(--sn-motion-fast) var(--sn-ease); }
html.sbx-fz:not([data-sbv2]) .fz-search__item:is(:hover, .is-active) { background: var(--sn-surface-hover); box-shadow: inset 2px 0 0 var(--sn-gold); }

/* ---- BET SLIP: hierarchy and dividers ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-betslip { border-left: 1px solid var(--sn-border) !important; background: var(--sn-bg-elevated) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-betslip__content, .bc-sb-betslip__header, .bc-sb-betslip__footer) { background: var(--sn-bg-elevated) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-betslip__footer { border-top: 1px solid var(--sn-border-strong) !important; background: linear-gradient(180deg, rgba(244, 201, 93, 0.04), transparent 40%), var(--sn-bg-elevated) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-betslip__toolbar { padding-bottom: 8px; border-bottom: 1px solid var(--sn-hairline); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection { background: var(--sn-surface-raised) !important; border-left: 3px solid var(--sn-gold) !important; box-shadow: inset 0 0 0 1px var(--sn-hairline) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__odds { color: var(--sn-gold-bright) !important; font-size: 17px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__outcome { color: var(--sn-gold) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__market-name { color: var(--sn-text-muted) !important; letter-spacing: .06em; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-summary__label, html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-returns__label { color: var(--sn-text-secondary) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-summary__value { color: var(--sn-text) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-returns__value { color: var(--sn-gold-bright) !important; font-size: 19px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(244, 201, 93, 0.28); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__remove { color: var(--sn-text-muted) !important; transition: color var(--sn-motion-fast) var(--sn-ease), background-color var(--sn-motion-fast) var(--sn-ease); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection__remove:hover { color: var(--sn-down) !important; background: var(--sn-down-tint) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-stake__error { color: var(--sn-down) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-stake__input[aria-invalid="true"] { border-color: var(--sn-down) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-state-banner { box-shadow: inset 3px 0 0 var(--sn-gold-deep) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-state-banner--warning { box-shadow: inset 3px 0 0 var(--sn-warn) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-state-banner--error, .bc-sb-state-banner--danger) { box-shadow: inset 3px 0 0 var(--sn-down) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-header-btn__badge, .bc-sb-hub-tab__badge) { transition: transform var(--sn-motion-fast) var(--sn-ease); }

/* ---- competition tree: reveal, favorites ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-country--expanded > .bc-sb-country__leagues { animation: sn-reveal var(--sn-motion-normal) var(--sn-ease) 1; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-country__chevron { transition: transform var(--sn-motion-normal) var(--sn-ease), color var(--sn-motion-fast) var(--sn-ease); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-event__favorite, .fz-hdr-btn) { transition: color var(--sn-motion-fast) var(--sn-ease), background-color var(--sn-motion-fast) var(--sn-ease), transform var(--sn-motion-fast) var(--sn-ease); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-event__favorite, .fz-hdr-star):hover { color: var(--sn-gold) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-country-league[aria-current="true"] { background: linear-gradient(90deg, rgba(244, 201, 93, 0.14), rgba(244, 201, 93, 0) 75%), var(--sn-surface-hover) !important; box-shadow: inset 3px 0 0 var(--sn-gold) !important; color: var(--sn-text) !important; }

/* ---- match details ---- */
html.sbx-fz:not([data-sbv2]) body #bcSbApp #bcSbPrematchMatchPage { animation: sn-fade-in var(--sn-motion-normal) var(--sn-ease) 1; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-market { box-shadow: inset 0 0 0 1px var(--sn-hairline) !important; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-market:not(.bc-sb-mp-market--collapsed) .bc-sb-mp-market__odds { animation: sn-reveal var(--sn-motion-normal) var(--sn-ease) 1; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-tab { transition: color var(--sn-motion-fast) var(--sn-ease); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mp-hero { box-shadow: inset 0 -1px 0 var(--sn-border); }

/* ---- notifications: the toast keeps its own enter/leave transition (.is-in / .is-out in betslip-ux.css); only surfaces and status accents are themed ---- */
html.sbx-fz:not([data-sbv2]) .bc-sb-pbtoast { --pb-accent: var(--sn-gold-deep); background: var(--sn-bg-elevated) !important; border-color: var(--sn-border) !important; font-family: var(--fz-font) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important; }
html.sbx-fz:not([data-sbv2]) .bc-sb-pbtoast--warning { --pb-accent: var(--sn-warn); }
html.sbx-fz:not([data-sbv2]) .bc-sb-pbtoast--error { --pb-accent: var(--sn-down); }
html.sbx-fz:not([data-sbv2]) .bc-sb-pbtoast__action { background: var(--sn-gold-gradient) !important; color: var(--sn-ink) !important; border: 0 !important; border-radius: var(--sn-radius-sm) !important; font-weight: 600 !important; }
/* tablet/desktop: centred under the header, so it never covers the slip tabs, the odds or the place-bet button */
@media (min-width: 768px) {
  html.sbx-fz:not([data-sbv2]) .bc-sb-pbtoasts { top: calc(var(--fz-head-h) + 12px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%); }
}

/* ==========================================================================
 * MOTION (state-driven classes are added by forzza-features.js on REAL store changes)
 * ========================================================================== */
@keyframes sn-pulse {
  0%   { transform: scale(1);    box-shadow: inset 0 0 0 1px var(--sn-gold-bright), 0 0 0 0 rgba(244, 201, 93, 0.55); }
  55%  { transform: scale(1.07); box-shadow: inset 0 0 0 1px var(--sn-gold-bright), 0 0 0 8px rgba(244, 201, 93, 0); }
  100% { transform: scale(1);    box-shadow: inset 0 0 0 1px var(--sn-gold-bright), var(--sn-gold-glow); }
}
@keyframes sn-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes sn-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sn-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sn-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sn-move-up { from { box-shadow: inset 0 0 0 1px var(--sn-up), 0 0 14px rgba(111, 217, 160, 0.35); } to { box-shadow: inset 0 0 0 1px rgba(111, 217, 160, 0), 0 0 0 rgba(111, 217, 160, 0); } }
@keyframes sn-move-down { from { box-shadow: inset 0 0 0 1px var(--sn-down), 0 0 14px rgba(255, 122, 112, 0.35); } to { box-shadow: inset 0 0 0 1px rgba(255, 122, 112, 0), 0 0 0 rgba(255, 122, 112, 0); } }
@keyframes sn-breathe { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@keyframes sn-spin { to { transform: rotate(360deg); } }

html.sbx-fz:not([data-sbv2]) body #bcSbApp .sn-pulse { animation: sn-pulse 480ms var(--sn-ease) 1; position: relative; z-index: 2; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .sn-bump { animation: sn-bump var(--sn-motion-normal) var(--sn-ease) 1; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection.sn-enter { animation: sn-enter var(--sn-motion-normal) var(--sn-ease) 1; }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection { transition: opacity var(--sn-motion-fast) var(--sn-ease), transform var(--sn-motion-fast) var(--sn-ease); }
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-selection.sn-leave { opacity: 0; transform: translateX(16px); pointer-events: none; }

/* live indicators: visible but restrained - a steady dot with a soft ring (the legacy infinite pulse is switched off) */
html.sbx-fz:not([data-sbv2]) body #bcSbApp :is(.bc-sb-live-dot, .bc-sb-event__live-dot, [class*="live-dot"]) { animation: none !important; background: var(--sn-live) !important; box-shadow: 0 0 0 3px rgba(255, 90, 79, 0.18); }

/* reduced motion: every transition/animation collapses to ~0. State feedback is NOT lost - selected / suspended / moved prices
   keep their static styles (gold fill, hatching, tint); only the movement goes away. */
@media (prefers-reduced-motion: reduce) {
  html.sbx-fz *, html.sbx-fz *::before, html.sbx-fz *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* phone sport strip: first chip no longer flush against the screen edge (scroll-snap otherwise pins the active chip to x=0) */
@media (max-width: 767.98px) {
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-sports-nav { scroll-padding-inline: var(--sbm-gutter, 12px) !important; }
  html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-sports-nav .bc-sb-sports-wrapper, html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-sports-nav #bcSbSportsPanel { padding-left: var(--sbm-gutter, 12px) !important; padding-right: var(--sbm-gutter, 12px) !important; }
}
/* the toggle's count is plain "(117)" text in every state - no disc behind it */
html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mode--active .bc-sb-mode__count, html.sbx-fz:not([data-sbv2]) body #bcSbApp .bc-sb-mode--live.bc-sb-mode--active .bc-sb-mode__count { background: transparent !important; }