/* Sportsbook v2 layout - see docs/superpowers/plans/2026-05-29-sportsbook-layout-redesign-p0-p1.md
   Structural shell + rail + event-row + slip styling. Colours inherit each
   affiliate's palette via CSS vars (--panel-bg / --brand-accent) with dark
   fallbacks; per-site palette tuning happens in the browser pass.
   Base rules first, then @media (odd max-width breakpoints) per CLAUDE.md. */

/* ===== In-play live odds flash + suspension (WS-B 6.2) ===== */
/* Display-only: the flashed price is advisory; the strike price stays the
   submit-time refresh. Inert unless the in-play view renders the markup. */
.sb2-odd--up { animation: sb2OddFlashUp 1.2s ease-out; }
.sb2-odd--down { animation: sb2OddFlashDown 1.2s ease-out; }
@keyframes sb2OddFlashUp {
  from { background-color: rgba(46, 204, 113, .35); }
  to { background-color: transparent; }
}
@keyframes sb2OddFlashDown {
  from { background-color: rgba(231, 76, 60, .35); }
  to { background-color: transparent; }
}
/* Suspended (dark) live price: un-clickable, and the stale figure is replaced by
   a padlock so a dark market never sits on its last-seen number (Bet365 parity).
   ONE rule set covers BOTH the server-rendered lobby cell and a price the live WS
   feed suspends in place; both carry .sb2-odd--suspended wrapping .sb2-odd__price. */
.sb2-odd--suspended { pointer-events: none; position: relative; border-color: rgba(255, 255, 255, .05); }
.sb2-odd--suspended .sb2-odd__label { opacity: .45; }
.sb2-odd.sb2-odd--suspended .sb2-odd__price { font-size: 0; }
.sb2-odd.sb2-odd--suspended .sb2-odd__price::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 14px;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='%238b98a5'%3E%3Cpath%20d='M8%201a2%202%200%200%201%202%202v4H6V3a2%202%200%200%201%202-2zm3%206V3a3%203%200%200%200-6%200v4a2%202%200%200%200-2%202v5a2%202%200%200%200%202%202h6a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===== Live (in-play) section ===== */
.sb2-section-head--live { display: flex; align-items: center; gap: 8px; color: #ff4d4f; }
/* "See all live" link in the live section head (right-aligned via the flex head);
   the text-transform/letter-spacing reset keeps it reading as a link, not an
   uppercase section label. .sb2-live__empty is the all-live page empty state. */
.sb2-live__all { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--sb2-accent, #d4af37); white-space: nowrap; text-decoration: none; text-transform: none; letter-spacing: 0; }
.sb2-live__all:hover { text-decoration: underline; }
.sb2-live__empty { color: #8b98a5; font-size: 14px; padding: 16px 2px; }
.sb2-live__dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #ff4d4f; animation: sb2LivePulse 1.4s ease-in-out infinite;
}
@keyframes sb2LivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 77, 79, .5); }
  50% { opacity: .55; box-shadow: 0 0 0 5px rgba(255, 77, 79, 0); }
}
.sb2-booknav__tab--live { color: #ff4d4f; display: inline-flex; align-items: center; gap: 6px; }

/* Live board sport grouping: sport sub-headers inside #sb2-live so live
   matches read as sectioned sports (popularity order), not a jumble. */
.sb2-live__group { margin: 0 0 14px; }
.sb2-live__group:last-child { margin-bottom: 0; }
.sb2-live__sport {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; padding: 6px 2px 4px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #8b98a5; border-bottom: 1px solid rgba(139, 152, 165, .18);
}
.sb2-live__sport-count {
  font-size: 11px; font-weight: 600; color: #ff4d4f;
  background: rgba(255, 77, 79, .12); border-radius: 9px; padding: 1px 7px;
}

/* ===== Match market search ===== */
.sb2-match__search { margin: 8px 0 12px; }
.sb2-match__search-input {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--sb2-line, rgba(255, 255, 255, .08));
  border-radius: 8px; background: var(--sb2-panel, #161b22); color: inherit; font-size: 14px;
}
.sb2-match__search-input:focus { outline: none; border-color: var(--brand-accent, #6f42c1); }

/* ===== Landing toolbar (search + day filter) ===== */
.sb2-booktools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 2px 12px; }
.sb2-booksearch { flex: 1 1 220px; min-width: 0; }
.sb2-booksearch__input {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--sb2-line, rgba(255, 255, 255, .08));
  border-radius: 8px; background: var(--sb2-panel, #161b22); color: inherit; font-size: 14px;
}
.sb2-booksearch__input:focus { outline: none; border-color: var(--brand-accent, #6f42c1); }
.sb2-bookfilter { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.sb2-bookfilter__pill {
  padding: 8px 14px; border-radius: 999px; cursor: pointer; line-height: 1; font-size: 13px;
  border: 1px solid var(--sb2-line, rgba(255, 255, 255, .08));
  background: var(--sb2-panel, #161b22); color: inherit;
}
.sb2-bookfilter__pill.is-active { border-color: var(--sb2-accent, #d4af37); color: var(--sb2-accent, #d4af37); }
.sb2-booksearch__empty { margin: 0 2px 12px; color: #8b98a5; font-size: 14px; }
.sb2-tznote { margin: 2px 2px 14px; color: #8b98a5; font-size: 13px; }
/* Filters hide rows via the [hidden] attribute; .sb2-row carries an author
   display:grid that would otherwise beat the UA [hidden] rule, so make it explicit. */
.sb2-row[hidden] { display: none; }

/* ===== My Bets status badge ===== */
.sb-bet-status {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: 12px; font-weight: 600; text-transform: capitalize; line-height: 1.5;
}
.sb-bet-status--won { background: rgba(46, 204, 113, .18); color: #2ecc71; }
.sb-bet-status--lost { background: rgba(231, 76, 60, .18); color: #e74c3c; }
.sb-bet-status--waiting { background: rgba(241, 196, 15, .18); color: #f1c40f; }
.sb-bet-status--cashed { background: rgba(52, 152, 219, .18); color: #3498db; }
.sb-bet-status--cancel { background: rgba(149, 165, 166, .18); color: #95a5a6; }

/* My Bets collapsible parlay legs (Stake-style; display only, expanded by default) */
.sb-parlay-legs__toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: none; color: inherit; cursor: pointer;
  padding: 6px 0; font-size: 13px; font-weight: 600;
}
.sb-parlay-legs__count { color: var(--sb2-accent, #d4af37); }
.sb-parlay-legs__chev {
  width: 8px; height: 8px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.sb-parlay-legs.is-collapsed .sb-parlay-legs__chev { transform: rotate(-45deg); }
.sb-parlay-legs.is-collapsed .sb-parlay-legs__body { display: none; }

/* ===== Three-pane shell ===== */
.sb2 {
  --sb2-gap: 12px;
  --sb2-rail-w: 240px;
  --sb2-slip-w: 320px;
  --sb2-sticky-top: 80px; /* sticky header height - rail/slip/strip align to it */
  --sb2-panel: var(--panel-bg, #161b22);
  --sb2-line: rgba(255, 255, 255, .08);
  --sb2-accent: var(--brand-accent, #d4af37);
  display: grid;
  /* Desktop (>=1200px): the standard site sidebar is the sports nav (the in-shell
     rail is hidden, see below), so the grid is just content - the bet slip becomes a
     2nd column once a selection is added (.sb2--has-slip, Stake-style). Below 1200px
     the @media block restores the rail column (the rail is the mobile/tablet nav). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sb2-gap);
  align-items: start;
  color: #e8eef5;
}
.sb2.sb2--has-slip { grid-template-columns: minmax(0, 1fr) var(--sb2-slip-w); }
.sb2__rail,
.sb2__slip {
  position: sticky;
  top: var(--sb2-sticky-top);
  max-height: calc(100vh - var(--sb2-sticky-top) - 12px);
  overflow-y: auto;
  background: var(--sb2-panel);
  border: 1px solid var(--sb2-line);
  border-radius: 10px;
}
/* The in-shell rail is the mobile/tablet sports menu (<1200px). On desktop the
   standard site sidebar replaces it, so it is hidden >=1200px. The slip is hidden
   until it has a selection (then .sb2--has-slip reveals the column on desktop);
   below 1200px it becomes a bottom-sheet (see the @media block). */
.sb2__rail { display: block; }
@media (min-width: 1200px) { .sb2__rail { display: none; } }
.sb2__slip { display: none; }

/* Below 1200px (rail is the nav, standard sidebar is a drawer) the v2 shell main
   reclaims the gutter to a tight 16px padding. At >=1200px this is NOT applied, so
   the base .main-content-wrp { padding: 50px 38px 50px 272px } (style.css) provides
   the 272px gutter that clears the restored fixed 240px standard sidebar. Scoping to
   <1200px also avoids overriding the affiliates' responsive header padding. */
@media (max-width: 1199px) { .main-content-wrp.sb-v2-page { padding: 72px 16px 48px; /* top clears this site's 64px position:fixed header (it overlays content); wickedbet's header is sticky/in-flow, so its rule stays 16px */ } }
.sb2.sb2--has-slip .sb2__slip { display: block; }
.sb2__content { min-width: 0; }
.sb2__content-head { padding: 4px 2px; }
.sb2__h1 { font-size: 24px; margin: 4px 0 12px; }

/* ===== Odds-format switcher (decimal / American / fractional) - sits under the
   sports list in the left sidebar (desktop) and the in-shell rail (tablet/mobile) ===== */
.sb2-oddsfmt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-top: 4px; border-top: 1px solid var(--sb2-line, #232a35); }
.sb2-oddsfmt__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8b98a5; }
.sb2-oddsfmt__sel { background: var(--sb2-panel, #161b22); color: #cdd6e0; border: 1px solid var(--sb2-line, #232a35); border-radius: 8px; padding: 5px 8px; font-size: 12px; cursor: pointer; }
.sb2-oddsfmt__sel:focus { outline: none; border-color: var(--sb2-accent); }
.sb2__events { display: flex; flex-direction: column; gap: 8px; }
.sb2__tabbar { display: none; }
/* Under v2 the slide-up slip pane is the bet slip; the legacy in-menu bet slip is
   gated off server-side (sports/_betting_slip). Hide its empty leftover too - the
   card wrapper (evo/btr) and the "Betting Slip" tab button (bas/lol). */
body.sb-v2 .sidebar_betslip_mobile,
body.sb-v2 .betting_slip_tab { display: none; }

/* ===== Left rail ===== */
.sb2-rail__search {
  width: calc(100% - 16px);
  margin: 8px;
  padding: 8px 10px;
  background: #0d1117;
  border: 1px solid var(--sb2-line);
  border-radius: 8px;
  color: #e8eef5;
}
.sb2-rail__list { list-style: none; margin: 0; padding: 4px; }
.sb2-rail__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #cdd6e0;
  text-decoration: none;
}
.sb2-rail__link:hover { background: rgba(255, 255, 255, .05); }
.sb2-rail__icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* ===== Odds-first event row ===== */
.sb2-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: var(--sb2-panel);
  border: 1px solid var(--sb2-line);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sb2-row:hover { border-color: rgba(255, 255, 255, .18); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.sb2-row__teams { display: grid; gap: 5px; min-width: 0; color: #e8eef5; text-decoration: none; align-content: start; }
.sb2-row__time { font-size: 13px; color: #8b98a5; margin-bottom: 1px; }
.sb2-row__live { display: flex; align-items: center; gap: 5px; margin-bottom: 1px; }
.sb2-row__clock { font-size: 12px; font-weight: 700; color: #ff4d4f; font-variant-numeric: tabular-nums; }
.sb2-row__clock:empty { display: none; }
.sb2-row__phase { font-size: 11px; font-weight: 600; color: #ff4d4f; text-transform: uppercase; letter-spacing: .03em; }
.sb2-row__phase:empty { display: none; }
/* Live row with no feed clock: the kickoff-time fallback shows; hide it the moment
   the clock span has a value (server-rendered or filled live by the controller). */
.sb2-row__clock:not(:empty) ~ .sb2-row__time--livefallback { display: none; }
.sb2-row--live .sb2-row__team { display: flex; align-items: center; }
.sb2-row__score { margin-left: auto; padding-left: 8px; font-weight: 800; color: #ffffff; font-variant-numeric: tabular-nums; }
.sb2-row__markets { display: flex; gap: 6px; align-items: center; }
.sb2-odd {
  display: grid;
  gap: 2px;
  min-width: 64px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 60%), #0d1117;
  border: 1px solid var(--sb2-line);
  border-radius: 8px;
  color: #e8eef5;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.sb2-odd:hover:not(:disabled) { border-color: var(--sb2-accent); }
.sb2-odd:active:not(:disabled) { transform: scale(.96); }
.sb2-odd.is-selected { border-color: var(--sb2-accent); background: rgba(212, 175, 55, .12); }
.sb2-odd__label { font-size: 12px; color: #8b98a5; }
.sb2-odd__price { font-weight: 700; font-size: 15px; color: var(--sb2-accent); }
.sb2-odd.is-selected .sb2-odd__price { color: #ffffff; }
.sb2-row__more { align-self: center; white-space: nowrap; color: var(--sb2-accent); text-decoration: none; font-size: 14px; }
.sb2-row__suspended { align-self: center; white-space: nowrap; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .5; }

/* ===== Bet slip ===== */
.sb2-slip { padding: 10px; }
.sb2-slip__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

/* Quick-stake chips (half / double / max), injected under each stake input. */
.sb2-quickstake { display: flex; gap: 6px; margin: 6px 0 2px; }
.sb2-quickstake__chip {
  flex: 1 1 0; padding: 6px 0; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1;
  border: 1px solid var(--sb2-line, rgba(255, 255, 255, .12));
  background: var(--sb2-panel, #161b22); color: inherit;
}
.sb2-quickstake__chip:hover { border-color: var(--sb2-accent, #d4af37); color: var(--sb2-accent, #d4af37); }

/* ===== Reused bet-slip engine, restyled (markup loaded into #betTicketSlip) ===== */
.sb2__slip .progress-status { display: none; }
.sb2__slip .workrowopen { padding: 0; }
.sb2__slip .workrowopen > h2 { display: none; }
/* The legacy slip container (.betting-slipside) carries v1 overflow:hidden +
   20px radius that clip the last button's (View My Bets) bottom corners; the v2
   .sb2__slip already provides the outer rounded box, so neutralise the inner clip. */
.sb2__slip #betTicketSlip { padding: 0; overflow: visible; border-radius: 0; }
.sb2__slip .sports-ticket-wrpper { margin-bottom: 8px; }
.sb2__slip .match-box { background: #0d1117; border: 1px solid var(--sb2-line); border-radius: 8px; padding: 10px 12px; }
/* Neutralise the legacy blue banner header (style.css paints .match-head as a
   filled gradient bar that crowded the kickoff time underneath it). */
.sb2__slip .match-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.sb2__slip .match-box .match-head { background: none; }
/* Fill the available width inside the flex .match-head (flex:1 + min-width:0) and
   lay the name out as normal inline text, so a long single-side name (e.g. an
   outright "The Open Championship - Winner") wraps fill-line instead of being
   squeezed to min-content and breaking one word per line. */
.sb2__slip .ticket-header { display: block; flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; margin: 0; color: #e8eef5; line-height: 1.35; }
/* Crest-beside-its-own-name label (sb_match_crest_name): the crest is an inline
   middle-aligned image that sits next to its own team name; the "vs" stays muted
   and unbroken. Used in the slip header and My Bets cards. */
.sb2-cn__side { display: inline; }
.sb2-cn__vs { color: #6b7681; font-weight: 600; white-space: nowrap; }
/* The legacy .match-head h3 span (style.css) paints EVERY span in the slip header as a fixed
   26px brand-colour badge (red / teal), which OUTSPECIFICS .sb2-cn__side (0,1,2 vs 0,1,0) and
   turns the team names + "vs" into coloured boxes with the text overflowing beneath. Reset the
   crest-name spans inline at higher specificity (0,3,0) so the header reads as intended:
   [crest] Team  vs  [crest] Team. Scoped to the slip; the global .sb2-cn rules above cover
   non-slip uses. */
.sb2__slip .ticket-header .sb2-cn__side,
.sb2__slip .ticket-header .sb2-cn__vs {
  display: inline;
  width: auto;
  min-width: 0;
  height: auto;
  line-height: 1.35;
  background: none;
  border-radius: 0;
  text-align: left;
  vertical-align: baseline;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #e8eef5;
}
.sb2__slip .ticket-header .sb2-cn__vs { color: #6b7681; margin: 0 3px; }
.sb2__slip .btn-del { color: #8b98a5; }
/* Kickoff sits tight under the event name - small and muted, not a banner row. */
.sb2__slip .match-head-datetime { font-size: 12px; color: #6b7681; margin: 1px 0 6px; }
.sb2__slip .match-srbx label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8b98a5; margin: 0; }
/* Selection line: "Away  +1.5 ............ 2.02" - space the side/handicap and push
   the odds to the right edge (they used to butt right up against each other). */
.sb2__slip .match-srbx h6 { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #e8eef5; margin: 2px 0 0; }
.sb2__slip .match-srbx .prop-handicap { color: #8b98a5; font-weight: 600; font-size: 13px; line-height: 1; }
.sb2__slip .match-srbx .formatted-odds { margin-left: auto; color: var(--sb2-accent); font-weight: 700; font-size: 15px; }
/* Stake input on its own labelled row, full width, the currency icon inside it on
   the right. The per-selection Est. Payout (.jackbox) is hidden - it duplicates the
   clean "Est. Payout" line in the .totalbox below, and side-by-side it was cramped
   and misaligned. */
.sb2__slip .mtrw { margin-top: 8px; }
.sb2__slip .mtrw .form-group { position: relative; }
.sb2__slip .mtrw .jackbox { display: none; }
.sb2__slip .sb2-stake-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8b98a5; margin: 0 0 4px; }
.sb2__slip input.form-control { min-width: 0; color: #e8eef5; }
/* Override the legacy .mtrw stake input (style.css .mtrw .form-group .form-control:
   12px 80px padding, blue bg, 12px radius) - needs >=(0,3,0) specificity to win. The
   currency icon keeps the legacy absolute position (relative to the form-group);
   with the label above, pin it to the input row, not the group centre. */
.sb2__slip .mtrw .form-group .form-control { width: 100%; padding: 10px 34px 10px 12px; background: #161b22; border: 1px solid var(--sb2-line); border-radius: 8px; font-size: 15px; font-weight: 600; }
/* Currency icon inside the input row. The STAKE label sits above the input, so
   a fixed top/bottom offset (or centring on the whole form-group) put the glyph
   off-centre. Instead make the icon box span just the input band - from below
   the ~20px label down to the input's bottom (bottom:0) - and flex-centre the
   glyph in it, so it lands dead-centre on the field. Verified on jjdev. */
.sb2__slip .mtrw .form-group small { position: absolute; right: 10px; left: auto; top: 20px; bottom: 0; display: flex; align-items: center; line-height: 1; }
.sb2__slip .mtrw .form-group small img { width: 16px; height: 16px; }
/* Totals: compact label/value rows (the boxes used to take a full row each with
   tiny numbers swimming in dead space). */
.sb2__slip .totalbox { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--sb2-line); }
/* font-size / icon-size carry !important to beat the legacy lotto totalbox rules
   in style.css (`.totalbox h4 { font-size:10px !important }` under a max-1800
   media query, and `.crypto-currency-icon img { height:15px !important }`) which
   otherwise force the v2 slip label tiny and the currency icon oversized. */
.sb2__slip .totalbox h4 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px !important; color: #8b98a5; margin: 0; padding: 5px 6px; white-space: nowrap; background: none; }
.sb2__slip .totalbox h4 > span { display: inline-flex; align-items: center; gap: 6px; }
.sb2__slip .totalbox input { width: 110px; text-align: right; background: transparent; border: 0; font-size: 16px !important; font-weight: 700; color: #e8eef5; padding: 0; }
.sb2__slip .totalbox .crypto-currency-icon img { width: 12px !important; height: 12px !important; display: block; vertical-align: middle; }
/* Sweep EVERY other currency icon on the sportsbook (the combo stake field below,
   the Latest Sports Bets stake/result cells, the live scoreboard) to the same tidy
   12px, vertically centred with its number - beating the legacy
   `.crypto-currency-icon img { height:15px !important }` base in style.css. The
   total box above keeps its own rule (higher specificity, same 12px); this also
   overrides the in-addbx 16px rule further down. */
.sb2 .crypto-currency-icon img,
.sb2-livebets .crypto-currency-icon img { width: 12px !important; height: 12px !important; vertical-align: middle; }
.sb2__slip .standard-multiple-block,
.sb2__slip .played-block { margin-top: 8px; background: none; padding: 0; }
/* The nested Accumulator/Parlay block inherits a legacy grey fill from
   style.css (.workrowopen .standard-multiple-block .played-block { background-color:#626368 },
   specificity 0,3,0) that out-ranks the line above (0,2,0) and reads as a
   stray grey card in the dark slip. Clear it at 0,4,0. */
.sb2__slip .workrowopen .standard-multiple-block .played-block { background-color: transparent; }
/* Flatten the legacy brown banner headers (Accumulator / Parlay, Multiple Bet
   Options) into the slip's dark panel language. */
.sb2__slip .played-block .btn-played { background: #0d1117; border: 1px solid var(--sb2-line); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #e8eef5; }
.sb2__slip .in-addbx { background: #0d1117; border: 1px solid var(--sb2-line); border-radius: 8px; padding: 10px 12px; margin: 8px 0 6px; }
/* Combo header (e.g. "Double · Odds 21.71") - was a white banner with blue odds. */
.sb2__slip .in-addbx > h6 { display: flex; align-items: center; gap: 6px; background: none; color: #e8eef5; font-size: 13px; font-weight: 600; margin: 0 0 6px; padding: 0; }
.sb2__slip .in-addbx > h6 .odds { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: #8b98a5; font-size: 12px; }
.sb2__slip .in-addbx > h6 .odds_total { color: var(--sb2-accent); font-weight: 700; font-size: 14px; }
/* Combo stake input has no label - keep the icon centred on the input itself. */
.sb2__slip .in-addbx .mtrw .form-group small { top: 50%; transform: translateY(-50%); }
.sb2__slip .in-addbx .mtrw .form-group .crypto-currency-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.sb2__slip .in-addbx .mtrw .form-group .crypto-currency-icon img { width: 16px; height: 16px; display: block; }
.sb2__slip #place_bet_button { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sb2__slip #place_bet_button .btn-main,
.sb2__slip #click_to_place_bet { display: block; width: 100%; padding: 11px; border: 0; border-radius: 9px; background: var(--sb2-accent); color: #1a1a1a; font-weight: 700; text-align: center; text-decoration: none; }
.sb2__slip #place_bet_button .btn-danger,
.sb2__slip .delete_all_tickets { display: block; width: 100%; padding: 9px; border-radius: 9px; background: transparent; border: 1px solid var(--sb2-line); color: #8b98a5; text-align: center; text-decoration: none; }
.sb2__slip #my_bets_betslip_button { margin-top: 8px; }
.sb2__slip #my_bets_betslip_button .btn-main { display: block; text-align: center; padding: 9px; border-radius: 9px; background: transparent; border: 1px solid var(--sb2-accent); color: var(--sb2-accent); text-decoration: none; }

/* ===== My Bets (v2 restyle - reuses bets#index / #settled, gated .sb-mybets-v2) ===== */
.sb-mybets-v2 { --sb2-accent: var(--brand-accent, #d4af37); }
.sb-mybets-v2 .bets-history-pills-btn.active { background: var(--sb2-accent); border-color: var(--sb2-accent); color: #1a1a1a; }
.sb-mybets-v2 .bet-history-header { background: rgba(255, 255, 255, .04); border-left: 3px solid var(--sb2-accent); }

/* ===== Match detail (v2, Stake-style grouped markets) ===== */
.sb2-match__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #8b98a5; margin: 2px 0 12px; }
.sb2-match__crumb-link { color: #8b98a5; text-decoration: none; }
.sb2-match__crumb-link:hover { color: var(--sb2-accent); }
.sb2-match__crumb-sep { color: #4a5562; }
.sb2-match__head { background: var(--sb2-panel); border: 1px solid var(--sb2-line); border-radius: 10px; padding: 18px; margin-bottom: 12px; }
.sb2-match__teams { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sb2-match__team { font-size: 21px; font-weight: 700; color: #e8eef5; }
.sb2-match__teams--outright .sb2-match__team { gap: 10px; }
.sb2-match__sep { font-size: 13px; color: #8b98a5; text-transform: uppercase; letter-spacing: .04em; }
.sb2-match__meta { margin-top: 10px; font-size: 13px; color: #8b98a5; }
/* In-play live score + period widget (gated; updated by sportsbook--sports-live) */
.sb2-match__live { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sb2-match__live-score { font-size: 20px; font-weight: 800; color: #e8eef5; letter-spacing: .02em; }
.sb2-match__live-sep { margin: 0 4px; color: #8b98a5; }
.sb2-match__live-period { font-size: 12px; font-weight: 600; color: #ff4d4f; text-transform: uppercase; letter-spacing: .04em; }
.sb2-match__live-period:empty { display: none; }

/* In-play panel: hero score head + per-period scoreboard + score timeline (phase 1) */
.sb2-match__head--live { background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015) 55%, transparent); border: 1px solid var(--sb2-line); border-radius: 12px; padding: 18px 16px 12px; text-align: center; }
.sb2-match__head--live .sb2-match__meta { margin-top: 8px; }
.sb2-match__hero { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.sb2-match__hero .sb2-match__team { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #e8eef5; min-width: 0; }
.sb2-match__hero-score { display: grid; grid-template-columns: auto auto auto; align-items: baseline; column-gap: 10px; justify-items: center; }
.sb2-match__hero-num { font-size: 38px; font-weight: 800; line-height: 1; color: #ffffff; font-variant-numeric: tabular-nums; }
.sb2-match__hero-sep { font-size: 26px; color: #8b98a5; font-weight: 700; }
.sb2-match__hero-sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.sb2-match__hero-live { color: #ff4d4f; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sb2-match__hero-sub .sb2-match__live-period { background: rgba(255, 77, 79, .14); border: 1px solid rgba(255, 77, 79, .35); padding: 2px 8px; border-radius: 999px; }
.sb2-match__live-clock { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sb2-match__live-clock:empty { display: none; }
.sb2-match__live-phase { font-size: 12px; font-weight: 600; color: #8b98a5; text-transform: uppercase; letter-spacing: .04em; }
.sb2-match__live-phase:empty { display: none; }
.sb2-match__hero-sub .sb2-match__live-clock, .sb2-match__hero-sub .sb2-match__live-phase { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); padding: 2px 8px; border-radius: 999px; }
.sb2-match__livepanel { margin: 14px 0 18px; display: grid; gap: 12px; align-items: start; }
.sb2-liveboard { border: 1px solid var(--sb2-line); border-radius: 12px; background: var(--sb2-panel); overflow: hidden; }
.sb2-liveboard__title, .sb2-timeline__title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8b98a5; padding: 10px 12px 2px; }
.sb2-liveboard__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sb2-liveboard__table th, .sb2-liveboard__table td { padding: 8px 10px; text-align: center; }
.sb2-liveboard__table thead tr { border-bottom: 1px solid var(--sb2-line); }
.sb2-liveboard__team-col { width: 40%; }
.sb2-liveboard__team { text-align: left; font-weight: 600; color: #e8eef5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.sb2-liveboard__col, .sb2-liveboard__total-col { color: #8b98a5; font-weight: 600; font-size: 11px; text-transform: uppercase; }
.sb2-liveboard__col.is-current { color: var(--sb2-accent); }
.sb2-liveboard__cell { color: #cdd6e0; }
.sb2-liveboard__cell.is-current { background: rgba(255, 255, 255, .06); color: #ffffff; font-weight: 700; }
.sb2-liveboard__total { color: var(--sb2-accent); font-weight: 700; }
.sb2-timeline-wrap { border: 1px solid var(--sb2-line); border-radius: 12px; background: var(--sb2-panel); }
.sb2-timeline { list-style: none; margin: 0; padding: 6px 0; max-height: 200px; overflow-y: auto; scrollbar-width: thin; }
.sb2-timeline__row { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 32px; font-size: 12px; }
.sb2-timeline__row::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #8b98a5; }
.sb2-timeline__row::after { content: ""; position: absolute; left: 17px; top: calc(50% + 6px); height: 100%; width: 1px; background: var(--sb2-line); }
.sb2-timeline__row:last-child::after { display: none; }
.sb2-timeline__row:first-child { background: rgba(255, 255, 255, .04); }
.sb2-timeline__row--home::before { background: var(--sb2-accent); }
.sb2-timeline__row--away::before { background: #4f8cff; }
.sb2-timeline__time { color: #8b98a5; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.sb2-timeline__period { color: #ff4d4f; font-weight: 600; text-transform: uppercase; font-size: 11px; flex: 0 0 auto; min-width: 28px; }
.sb2-timeline__text { color: #cdd6e0; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb2-timeline__score { color: #e8eef5; font-weight: 700; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .sb2-match__livepanel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 479px) { .sb2-match__hero-num { font-size: 30px; } .sb2-match__hero .sb2-match__team { font-size: 13px; } }
.sb2-match__empty { color: #8b98a5; padding: 24px 8px; }
.sb2-match__tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--sb2-line); margin-bottom: 12px; scrollbar-width: thin; }
.sb2-match__tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 15px; border: 0; background: transparent; color: #8b98a5; font-size: 14px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.sb2-match__tab:hover { color: #e8eef5; }
.sb2-match__tab.is-active { color: var(--sb2-accent); border-bottom-color: var(--sb2-accent); }
.sb2-match__tab-count { font-size: 11px; color: #6b7681; background: rgba(255, 255, 255, .06); border-radius: 9px; padding: 0 6px; }
.sb2-match__tab.is-active .sb2-match__tab-count { color: #1a1a1a; background: var(--sb2-accent); }
.sb2-match__pane { display: none; flex-direction: column; gap: 8px; }
.sb2-match__pane.is-active { display: flex; }
.sb2-mkt { background: var(--sb2-panel); border: 1px solid var(--sb2-line); border-radius: 10px; overflow: hidden; }
.sb2-mkt__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 15px; border: 0; background: transparent; color: #e8eef5; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.sb2-mkt__chev { width: 8px; height: 8px; border-right: 2px solid #8b98a5; border-bottom: 2px solid #8b98a5; transform: rotate(45deg); transition: transform .15s ease; flex: 0 0 auto; }
.sb2-mkt.is-collapsed .sb2-mkt__chev { transform: rotate(-45deg); }
/* Favourite-market pin (star) - a pinned market gets order:-1 to float to the top
   of its flex-column category pane (display-only). */
.sb2-mkt__headleft { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sb2-mkt__pin { flex: 0 0 auto; cursor: pointer; opacity: .3; font-size: 13px; line-height: 1; color: inherit; }
.sb2-mkt__pin::before { content: "\2606"; }
.sb2-mkt__pin:hover { opacity: .6; }
.sb2-mkt.is-pinned .sb2-mkt__pin { opacity: 1; color: var(--sb2-accent, #d4af37); }
.sb2-mkt.is-pinned .sb2-mkt__pin::before { content: "\2605"; }
.sb2-mkt.is-pinned { order: -1; }
.sb2-mkt.is-collapsed .sb2-mkt__body { display: none; }
.sb2-mkt__body { display: grid; gap: 6px; padding: 0 12px 12px; }
.sb2-mkt__cols-1 { grid-template-columns: 1fr; }
.sb2-mkt__cols-2 { grid-template-columns: repeat(2, 1fr); }
.sb2-mkt__cols-3 { grid-template-columns: repeat(3, 1fr); }
.sb2-mkt__odd { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #0d1117; border: 1px solid var(--sb2-line); border-radius: 8px; cursor: pointer; min-width: 0; transition: border-color .12s ease; }
.sb2-mkt__odd:hover { border-color: var(--sb2-accent); }
.sb2-mkt__odd .sb2-odd__label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #8b98a5; text-align: left; min-width: 0; }
.sb2-mkt__odd .sb2-odd__line { font-size: 12px; color: #6b7681; }
.sb2-mkt__odd .sb2-odd__price { font-size: 15px; font-weight: 700; color: var(--sb2-accent); flex: 0 0 auto; }
.sb2-mkt__odd.is-selected { border-color: var(--sb2-accent); background: rgba(212, 175, 55, .12); }

/* ===== Sport / league landing (v2) ===== */
.sb2-league { margin-bottom: 16px; }
.sb2-league__head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #e8eef5; margin: 4px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sb2-line); position: relative; }
.sb2-league__head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; border-radius: 1px; background: var(--sb2-accent); }
.sb2-league__events { display: flex; flex-direction: column; gap: 8px; }

/* Sport accordion (upcoming board, A4): collapsible group wrapping the leagues,
   expanded by default. Native <details>; the chevron is the open/closed cue. */
.sb2-sport { margin-bottom: 18px; }
.sb2-sport > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 2px solid var(--sb2-line); }
.sb2-sport > summary::-webkit-details-marker { display: none; }
.sb2-sport > summary:hover .sb2-sport__name { color: #fff; }
.sb2-sport__name { font-size: 15px; font-weight: 700; color: #e8eef5; text-transform: uppercase; letter-spacing: .05em; }
.sb2-sport__count { font-size: 11px; font-weight: 600; color: #8aa0b3; background: rgba(255, 255, 255, .06); border-radius: 10px; padding: 1px 7px; }
.sb2-sport__chev { margin-left: auto; width: 7px; height: 7px; border-right: 2px solid #8aa0b3; border-bottom: 2px solid #8aa0b3; transform: rotate(45deg); transition: transform .2s ease; }
.sb2-sport[open] > summary .sb2-sport__chev { transform: rotate(-135deg); }
.sb2-sport__body { padding-top: 12px; }

/* C5: "Accept odds changes" slip preference toggle. Hidden while the slip is empty. */
.sb2-slip__oddspref-row { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--sb2-line); }
#betTicketSlip:empty + .sb2-slip__oddspref-row { display: none; }
.sb2-slip__oddspref { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; color: #8aa0b3; cursor: pointer; }
.sb2-slip__oddspref-cb { width: 16px; height: 16px; accent-color: var(--sb2-accent); cursor: pointer; flex: 0 0 auto; }
.sb2-slip__oddspref-text { user-select: none; }
/* Help affordance for "Accept odds changes" - custom HTML tooltip (the v2 slip
   strips Bootstrap tooltips), shown on hover/focus of the info glyph. */
.sb2-slip__oddspref-info { position: relative; margin-left: auto; margin-right: 12px; display: inline-flex; color: #6b7681; cursor: help; }
.sb2-slip__oddspref-info:hover, .sb2-slip__oddspref-info:focus { color: var(--sb2-accent); outline: none; }
.sb2-slip__oddspref-tip { position: absolute; right: 0; bottom: calc(100% + 8px); width: 230px; padding: 9px 11px; background: #1b2330; color: #e8eef5; border: 1px solid var(--sb2-line); border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 1.45; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; pointer-events: none; z-index: 60; }
.sb2-slip__oddspref-info:hover .sb2-slip__oddspref-tip, .sb2-slip__oddspref-info:focus .sb2-slip__oddspref-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* ===== Book nav (Stake-style index tabs) ===== */
.sb2-booknav { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--sb2-line); margin-bottom: 12px; scrollbar-width: thin; }
.sb2-booknav__tab { flex: 0 0 auto; padding: 10px 16px; color: #8b98a5; font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.sb2-booknav__tab:hover { color: #e8eef5; }
.sb2-booknav__tab.is-active { color: var(--sb2-accent); border-bottom-color: var(--sb2-accent); }

/* ===== Home sections: featured competition + Top Matches ===== */
.sb2-section-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #e8eef5; margin: 6px 0 10px; text-transform: uppercase; letter-spacing: .07em; }
.sb2-section-head::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--sb2-accent); }
.sb2-section-head--featured { color: var(--sb2-accent); }
.sb2-section-head--live::before { background: #ff4d4f; }
.sb2-featured { margin-bottom: 18px; padding: 10px 14px 4px; border: 1px solid rgba(212, 175, 55, .22); border-radius: 10px; background: linear-gradient(180deg, rgba(212, 175, 55, .05), rgba(212, 175, 55, 0)); }
.sb2-top { margin-bottom: 18px; position: relative; }
/* ===== Outrights tab (all tournament-winner markets) ===== */
.sb2-outrights__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sb2-outright-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; text-decoration: none;
  background: var(--sb2-panel); border: 1px solid var(--sb2-line); border-radius: 10px;
  position: relative; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
}
.sb2-outright-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--sb2-accent), transparent 70%); }
.sb2-outright-card:hover { border-color: rgba(255, 255, 255, .18); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); text-decoration: none; }
.sb2-outright-card__head { display: flex; align-items: center; gap: 6px; }
.sb2-outright-card__title { font-size: 15px; font-weight: 700; color: #e8eef5; }
.sb2-outright-card__meta { font-size: 12px; color: #8b98a5; }
.sb2-outright-card__favs { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.sb2-outright-card__fav { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #cdd6e0; background: rgba(255, 255, 255, .04); border-radius: 7px; padding: 5px 9px; }
.sb2-outright-card__fav b { color: var(--sb2-accent, #d4af37); }
.sb2-outright-card__more { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--sb2-accent, #d4af37); }

/* World Cup spotlight section (Stake-style: outright banner + fixture rows). */
.sb2-wc__trophy { color: var(--sb2-accent, #d4af37); font-size: 14px; margin-right: 2px; }
.sb2-wc__outright {
  margin: 0 0 12px; padding: 12px 14px;
  background: linear-gradient(90deg, rgba(212, 175, 55, .1), rgba(212, 175, 55, .02));
  border: 1px solid rgba(212, 175, 55, .3); border-radius: 10px;
}
.sb2-wc__outright-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sb2-wc__outright-title { font-size: 15px; font-weight: 700; color: #e8eef5; }
.sb2-wc__outright-more { font-size: 13px; font-weight: 600; color: var(--sb2-accent, #d4af37); white-space: nowrap; text-decoration: none; }
.sb2-wc__outright-more:hover { text-decoration: underline; }
/* Favourite picks as a wrapping grid - ~6 per row on desktop, so 12 makes two
   tidy rows; collapses to fewer columns as the viewport narrows. */
.sb2-wc__outright-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sb2-wc__outright-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 9px 12px; }
.sb2-wc__outright-pick .sb2-odd__label { font-size: 13px; color: #e8eef5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb2-wc__outright-pick .sb2-odd__price { flex: 0 0 auto; }
.sb2-top__strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.sb2-top__card { flex: 0 0 280px; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--sb2-panel); border: 1px solid var(--sb2-line); border-radius: 10px; position: relative; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.sb2-top__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--sb2-accent), transparent 70%); }
.sb2-top__card:hover { border-color: rgba(255, 255, 255, .18); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
/* Trending carousel: once Slick (the repurposed hot-games slider) takes over the
   DOM, drop the overflow-strip layout and let Slick size the slides; style our
   own arrows since slick-theme.css is not loaded on this page. The list/track
   heights are pinned to auto: slick's own height bookkeeping has produced a
   tall empty band under the cards in some engines (Safari on prod) - the strip
   must never be taller than its cards. */
.sb2-top__strip.slick-initialized { display: block; overflow: visible; }
.sb2-top__strip.slick-initialized .sb2-top__card { flex: none; width: auto; margin: 0 5px; height: 100%; }
.sb2-top__strip .slick-list { height: auto !important; }
.sb2-top__strip .slick-track { display: flex; height: auto !important; }
.sb2-top__strip .slick-slide { height: auto; float: none; }
.sb2-top__strip .slick-slide > div { height: 100%; }
/* slick.css hardcodes `.slick-slide img { height: 149px }` for the casino game
   tiles; in the repurposed trending carousel that stretches every card img
   (league flags) into a 149px bar. Neutralise it INSIDE the trending strip only. */
.sb2-top__strip .slick-slide img { height: auto; }
.sb2-top__nav { position: absolute; top: -2px; z-index: 2; width: 28px; height: 28px; padding: 0; border: 1px solid var(--sb2-line); border-radius: 8px; background: var(--sb2-panel); color: #cdd6e0; font-size: 18px; line-height: 1; cursor: pointer; }
.sb2-top__nav:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sb2-top__nav--prev { right: 36px; }
.sb2-top__nav--next { right: 4px; }
.sb2-top__nav.slick-disabled { opacity: .35; cursor: default; }

/* Casino "Hot Games" cross-sell carousel at the foot of the page (reuses the
   site's casino-games-slider; only spacing + width-fit are set here). */
.sb2-casino { margin-top: 24px; min-width: 0; }
.sb2-casino .casino-games-slider { min-width: 0; }
/* "Hot Games" carousel arrows. slick generates <button>Previous/Next</button>;
   only wickedbet.com themes them (under .casino-games-slider in style.css), so
   the sportsbook foot carousel showed raw HTML buttons on the other four
   affiliates. Theme them HERE - sportsbook.css loads on every sportsbook page,
   scoped to .sb2-casino so all five sites match and the casino homepage is
   untouched. Arrows sit INSIDE the slider bounds (left/right: 4px) so they can
   never spill past the content column and push the footer. */
.sb2-casino .casino-games-slider { position: relative; }
.sb2-casino .casino-games-slider .slick-prev,
.sb2-casino .casino-games-slider .slick-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; margin: 0; border: 0; border-radius: 8px;
  background: rgba(13, 17, 23, .82); color: #e8eef5; font-size: 0; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; transition: background .15s ease, color .15s ease;
}
.sb2-casino .casino-games-slider .slick-prev { left: 4px; right: auto; }
.sb2-casino .casino-games-slider .slick-next { right: 4px; left: auto; }
.sb2-casino .casino-games-slider .slick-prev:hover,
.sb2-casino .casino-games-slider .slick-next:hover { background: rgba(13, 17, 23, .95); color: #fff; }
.sb2-casino .casino-games-slider .slick-prev::before,
.sb2-casino .casino-games-slider .slick-next::before {
  content: ""; display: block; width: 8px; height: 8px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}
.sb2-casino .casino-games-slider .slick-prev::before { transform: translateX(2px) rotate(-135deg); }
.sb2-casino .casino-games-slider .slick-next::before { transform: translateX(-2px) rotate(45deg); }
.sb2-casino .casino-games-slider .slick-disabled { opacity: 0; pointer-events: none; }

/* ===== Latest Sports Bets live box (Stake-style public feed) ===== */
.sb2-livebets { margin-top: 24px; }
.sb2-livebets__wrap { background: var(--sb2-panel, #161b22); border: 1px solid var(--sb2-line, rgba(255, 255, 255, .08)); border-radius: 10px; overflow-x: auto; }
.sb2-livebets__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sb2-livebets__table th { padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8b98a5; border-bottom: 1px solid var(--sb2-line, rgba(255, 255, 255, .08)); white-space: nowrap; }
.sb2-livebets__table td { padding: 10px 14px; color: #cdd6e0; white-space: nowrap; }
.sb2-livebets__row:nth-child(even) { background: rgba(255, 255, 255, .025); }
.sb2-livebets__player { font-weight: 600; color: #e8eef5; }
.sb2-livebets__event { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.sb2-livebets__odds { color: var(--sb2-accent, #d4af37); font-weight: 700; font-variant-numeric: tabular-nums; }
.sb2-livebets__time { color: #8b98a5; font-size: 13px; }
.sb2-livebets__stake { font-variant-numeric: tabular-nums; }
.sb2-livebets__stake img, .sb2-livebets__result img { width: 15px; height: 15px; vertical-align: text-bottom; }
.sb2-top__link { display: grid; gap: 6px; text-decoration: none; }
.sb2-top__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #8b98a5; min-width: 0; }
.sb2-top__league { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb2-top__time { flex: 0 0 auto; color: #6b7681; }
.sb2-top__team { font-size: 15px; font-weight: 600; color: #e8eef5; }
.sb2-top__odds { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.sb2-top__odd { flex: 1; min-width: 0; }
.sb2-top__odd .sb2-odd__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ===== Left-sidebar sports tree (v2, Stake-style) ===== */
.sb2-side { --sb2-accent: var(--brand-accent, #d4af37); color: #cdd6e0; }
.sb2-side__head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8b98a5; padding: 6px 10px 2px; }
.sb2-side__sports { list-style: none; margin: 0; padding: 0; }
.sb2-side__row { display: flex; align-items: center; border-radius: 8px; margin: 0 4px; transition: background .12s ease; }
.sb2-side__row:hover { background: rgba(255, 255, 255, .045); }
.sb2-side .sb2-side__sport-link { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; color: #cdd6e0; text-decoration: none; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Sport names are NEVER shortened - wrap to a second line instead of
   ellipsing ("American Foo..." reads as broken, owner 2026-06-12). */
.sb2-side .sb2-side__sport-link span:not(.sb2-side__count) { flex: 1 1 auto; min-width: 0; text-align: left; white-space: normal; overflow-wrap: break-word; line-height: 1.25; }
.sb2-side .sb2-side__sport-link:hover { color: #fff; }
.sb2-side .sb2-side__icon { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; margin: 0; }
.sb2-side__row:hover .sb2-side__icon { opacity: 1; }
/* Event count: plain muted text (the pill background read as a button and sat on
   top of the chevron in the prod sidebar - sb1 review, 2026-06-12). */
.sb2-side .sb2-side__count { margin-left: auto; margin-right: 2px; flex: 0 0 auto; font-size: 11px; color: #93a0ad; background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.sb2-side__top { padding: 2px 0 6px; border-bottom: 1px solid var(--sb2-line, rgba(255, 255, 255, .08)); margin-bottom: 4px; }
.sb2-side__top-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8b98a5; padding: 6px 10px 4px; }
.sb2-side__top-list { list-style: none; margin: 0; padding: 0; }
/* text-transform: none - the host sidebar uppercases link text, which turned
   flagless league names (International Soccer) into what looked like stray
   section headers between the flagged rows. */
.sb2-side .sb2-side__top-link { display: flex; align-items: center; gap: 8px; margin: 0 4px; padding: 4px 8px; border-radius: 8px; color: #cdd6e0; text-decoration: none; font-size: 12px; font-weight: 500; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb2-side .sb2-side__top-link span { text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sb2-side .sb2-side__top-link:hover { color: #fff; background: rgba(255, 255, 255, .045); }
.sb2-side__toggle { flex: 0 0 auto; width: 18px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 8px 0; cursor: pointer; line-height: 1; }
.sb2-side__chev { display: inline-block; width: 7px; height: 7px; border-right: 2px solid #8b98a5; border-bottom: 2px solid #8b98a5; transform: rotate(45deg); transition: transform .15s ease; }
.sb2-side__sport.is-open .sb2-side__chev { transform: rotate(-135deg); }
.sb2-side__leagues { list-style: none; margin: 2px 4px 6px 20px; padding: 0 0 0 8px; border-left: 1px solid rgba(255, 255, 255, .08); }
.sb2-side .sb2-side__league { display: block; padding: 5px 10px; color: #8b98a5; text-decoration: none; font-size: 12px; font-weight: 400; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; }
.sb2-side .sb2-side__league:hover { color: var(--sb2-accent); background: rgba(255, 255, 255, .03); }
/* Search + favourites ported into the desktop sports tree (parity with the mobile rail). */
.sb2-side__search { width: calc(100% - 20px); margin: 6px 10px; padding: 7px 10px; background: #0d1117; border: 1px solid var(--sb2-line, #232a35); border-radius: 8px; color: #e8eef5; font-size: 13px; }
.sb2-side__search:focus { outline: none; border-color: var(--sb2-accent); }
/* Desktop sidebar primary nav (owner 2026-06-15) - replaces the rail search. */
.sb2-side__nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sb2-side__navlink { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: #c9d3de; font-size: 12px; font-weight: 500; text-decoration: none; transition: background .12s, color .12s; }
.sb2-side__navlink:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.sb2-side__navlink.is-active { background: rgba(212, 175, 55, .12); color: #fff; }
.sb2-side__navicon { width: 15px; text-align: center; color: #8b98a5; font-size: 12px; }
.sb2-side__navlink:hover .sb2-side__navicon, .sb2-side__navlink.is-active .sb2-side__navicon { color: var(--sb2-accent, #d4af37); }
.sb2-side__navlink--live .sb2-live__dot { width: 8px; height: 8px; margin: 0 4px; }
.sb2-side__favs { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sb2-side__favs-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .65; padding: 6px 10px 2px; }
.sb2-side__favs-list { list-style: none; margin: 0; padding: 0 4px; }
.sb2-side__fav { display: flex; align-items: center; }
.sb2-side .sb2-side__fav-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: #cdd6e0; text-decoration: none; border-radius: 8px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.sb2-side .sb2-side__fav-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.sb2-side__fav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb2-side__favstar { color: #e0b24a; font-size: 11px; flex: 0 0 auto; }
.sb2-side .sb2-side__star, .sb2-side .sb2-side__favremove { flex: 0 0 auto; width: auto; padding: 0 4px; margin: 0; font-size: 12px; color: #cdd6e0; opacity: .35; cursor: pointer; text-decoration: none; transition: opacity .15s ease; }
/* The host sidebar's `.sidebar-menus ul li a i.fas` rule gives every icon
   18px width + 14px side margins; three classes outrank its two so the
   star/remove/fav icons stay icon-sized and never squeeze the sport text. */
.sb2-side .sb2-side__star i.fas, .sb2-side .sb2-side__favremove i.fa, .sb2-side .sb2-side__fav-link i.fas { width: auto; height: auto; margin: 0; }
.sb2-side__star:hover, .sb2-side__favremove:hover { opacity: .85; }
.sb2-side__row .sb2-side__star { opacity: 0; }
.sb2-side__row:hover .sb2-side__star { opacity: .45; }
.sb2-side__row:hover .sb2-side__star:hover { opacity: .85; }
.sb2-side__row .sb2-side__star.is-active { opacity: 1; }
.sb2-side__star.is-active { color: #e0b24a; opacity: 1; }

/* ===== Team monogram badges (SGO ships team colours, not logos - render the
   team initials on the team's primary colour; per-team colours come inline) ===== */
.sb2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .3px;
  text-transform: uppercase;
  flex: 0 0 auto;
  overflow: hidden;
}
.sb2-row__team,
.sb2-top__team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sb2-row__team { font-size: 15px; font-weight: 600; }
.sb2-row__team .sb2-badge { width: 24px; height: 24px; font-size: 10px; }
.sb2-row__team .sb2-flag--team { width: 18px; }
.sb2-top__team .sb2-badge { width: 26px; height: 26px; font-size: 10px; }
.sb2-match__team { display: inline-flex; align-items: center; gap: 8px; }
.sb2-match__team .sb2-badge { width: 28px; height: 28px; font-size: 11px; }
.sb2-crest { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 6px; flex: 0 0 auto; }
.sb2-row__team .sb2-crest { width: 24px; height: 24px; }
.sb2-top__team .sb2-crest { width: 26px; height: 26px; }
.sb2-match__team .sb2-crest { width: 28px; height: 28px; }
.sb2-match__hero .sb2-match__team .sb2-crest { width: 44px; height: 44px; margin-right: 0; }
.sb2-crest--inline { width: 16px; height: 16px; margin-right: 12px; vertical-align: middle; display: inline-block; }

/* ===== In-shell My Bets pane (sports#index?tab=mybets) ===== */
.sb2-mybets__pills { display: flex; gap: 8px; margin: 2px 0 14px; }
.sb2-mybets__pill {
  padding: 9px 18px; border-radius: 999px; cursor: pointer; line-height: 1;
  font-size: 14px; font-weight: 600;
  border: 1px solid var(--sb2-line, rgba(255, 255, 255, .08));
  background: var(--sb2-panel, #161b22); color: #8b98a5;
}
.sb2-mybets__pill.is-active { background: var(--sb2-accent, #d4af37); border-color: var(--sb2-accent, #d4af37); color: #1a1a1a; }
.sb2-mybets__count { opacity: .85; font-variant-numeric: tabular-nums; }
.sb2-mybets__pane { display: flex; flex-direction: column; gap: 10px; }
.sb2-mybets__pane[hidden] { display: none; }
.sb2-mybets .match-box { background: var(--sb2-panel, #161b22); border: 1px solid var(--sb2-line, rgba(255, 255, 255, .08)); border-radius: 10px; padding: 12px 14px; }
.sb2-mybets__all { margin: 12px 0 4px; text-align: center; }
.sb2-mybets__all-link { color: var(--sb2-accent, #d4af37); text-decoration: none; font-size: 14px; font-weight: 600; }
.sb2-mybets__all-link:hover { text-decoration: underline; }

/* ===== Pre-match cash-out (My Bets) ===== */
.sb2-cashout { margin-top: 8px; }
.sb2-cashout[hidden] { display: none; }
.sb2-cashout__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #1a1208;
  background: linear-gradient(180deg, #f7d774, #e0b24a);
  transition: filter .15s ease, opacity .15s ease;
}
.sb2-cashout__btn:hover { filter: brightness(1.06); }
.sb2-cashout__btn:disabled { opacity: .55; cursor: default; }
.sb2-cashout__amount { font-weight: 800; }
.sb2-cashout__msg { margin-top: 5px; font-size: 12px; color: #cdd3e0; min-height: 14px; }

/* ===== My Sportsbook (rail favourites) ===== */
.sb2-rail__favs { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sb2-rail__favs-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .65; padding: 6px 10px 2px; }
.sb2-rail__item { display: flex; flex-direction: column; }
.sb2-rail__row { display: flex; align-items: center; }
.sb2-rail__row > .sb2-rail__link { flex: 1 1 auto; min-width: 0; }
.sb2-rail__row > .sb2-rail__link span { white-space: normal; overflow-wrap: break-word; line-height: 1.25; } /* full sport names, never ellipsed */
/* Upcoming-event count in the rail (mirrors the desktop tree's sb2-side__count). */
.sb2-rail__row > .sb2-rail__link .sb2-rail__count { margin-left: auto; margin-right: 2px; flex: 0 0 auto; font-size: 11px; line-height: 1.4; color: #93a0ad; background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb2-rail__favstar { color: #e0b24a; font-size: 11px; flex: 0 0 auto; }
/* Inline leagues dropdown (expand a sport to its leagues, in place). */
.sb2-rail__toggle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 6px 8px; color: #8b98a5; line-height: 1; }
.sb2-rail__toggle:hover { color: #e8eef5; }
.sb2-rail__chev { display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.sb2-rail__item.is-open .sb2-rail__chev { transform: rotate(-135deg); }
.sb2-rail__leagues { list-style: none; margin: 0 0 4px; padding: 0 4px 2px 32px; }
.sb2-rail__league { display: block; padding: 5px 8px; border-radius: 6px; color: #b8c2cd; text-decoration: none; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb2-rail__league:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.sb2-rail__star, .sb2-rail__favremove {
  flex: 0 0 auto; padding: 0 8px; font-size: 12px; color: #cdd6e0;
  opacity: .35; cursor: pointer; text-decoration: none; transition: opacity .15s ease;
}
.sb2-rail__star:hover, .sb2-rail__favremove:hover { opacity: .85; }
.sb2-rail__star.is-active { color: #e0b24a; opacity: 1; }

/* ===== Tablet ===== */
/* ===== Sticky sports strip (Gamdom-style) ===== */
.sb2-strip {
  position: sticky;
  top: var(--sb2-sticky-top);
  z-index: 30;
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 12px;
  padding: 6px;
  background: var(--sb2-panel);
  border: 1px solid var(--sb2-line);
  border-radius: 10px;
}
.sb2-strip__track {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.sb2-strip__track::-webkit-scrollbar { display: none; }
.sb2-strip__item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* Fixed width so every sport tab is the same size regardless of name length
     (a long name like "American Football" used to balloon its tab). The name
     itself is abbreviated in the view and ellipsis-clamped below as a backstop. */
  width: 88px;
  padding: 8px 6px;
  border-radius: 8px;
  color: #cdd6e0;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  transition: background .15s ease;
}
.sb2-strip__item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
/* The gold line icons all read as identical coins at 22px - each sport gets a
   muted per-sport tinted disc behind its (still brand-gold) icon. */
.sb2-strip__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  transition: background .15s ease;
}
.sb2-strip__icon { width: 22px; height: 22px; }
/* Force the line-icon to the brand gold regardless of the source SVG's own
   stroke colour - some per-sport SVGs (futsal, padel) ship to production from
   the gitignored /public/images tree and can lag as black. brightness(0) first
   flattens any colour to black, then the chain colourises black -> #d4af37, so
   every strip icon renders the same gold and can't regress to black. */
.sb2-strip__icon {
  filter: brightness(0) saturate(100%) invert(72%) sepia(35%) saturate(680%) hue-rotate(358deg) brightness(92%) contrast(86%);
}
.sb2-strip__name { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb2-strip__item--soccer .sb2-strip__disc { background: rgba(46, 160, 67, .18); }
.sb2-strip__item--basketball .sb2-strip__disc { background: rgba(230, 126, 34, .18); }
.sb2-strip__item--tennis .sb2-strip__disc { background: rgba(181, 206, 47, .16); }
.sb2-strip__item--baseball .sb2-strip__disc { background: rgba(231, 76, 60, .16); }
.sb2-strip__item--hockey .sb2-strip__disc { background: rgba(80, 170, 230, .18); }
.sb2-strip__item--football .sb2-strip__disc, .sb2-strip__item--american-football .sb2-strip__disc { background: rgba(160, 110, 60, .2); }
.sb2-strip__item--handball .sb2-strip__disc { background: rgba(26, 188, 156, .16); }
.sb2-strip__item--mma .sb2-strip__disc { background: rgba(192, 57, 43, .2); }
.sb2-strip__item--golf .sb2-strip__disc { background: rgba(39, 174, 96, .15); }
.sb2-strip__item--horse-racing .sb2-strip__disc { background: rgba(155, 89, 182, .17); }
.sb2-strip__item--non-sports .sb2-strip__disc { background: rgba(149, 165, 166, .14); }
.sb2-strip__badge {
  position: absolute;
  top: 2px;
  right: 8px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--sb2-accent);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.sb2-strip__nav {
  flex: 0 0 auto;
  width: 28px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  color: #cdd6e0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sb2-strip__nav:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ===== Country flags (league heads + national-team rows) ===== */
/* Explicit height: `auto` lets host-page img rules stretch the gif to its
   container (a 149px-tall flag bar in the Trending meta row). */
.sb2-flag { width: 18px; height: 13px; border-radius: 2px; vertical-align: middle; margin-right: 6px; flex: 0 0 auto; }
.sb2-flag--team { width: 16px; height: 11px; margin: 0 4px 0 2px; }
/* International competitions (no country) get a globe in the flag slot so the
   row aligns with its flagged siblings instead of reading as a header. */
.sb2-flag--globe { width: auto; height: auto; font-size: 14px; color: #8b98a5; }
.sb2-league__head, .sb2-section-head { display: flex; align-items: center; gap: 4px; }

/* ===== Event-row balance: cap the team column so the three market groups
   (Moneyline / Spread / Total) expand to fill the rest of the row - no dead
   space, scaling from laptop to ultrawide. ===== */
.sb2-row { grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); align-items: start; }
.sb2-row__markets { align-items: flex-start; gap: 8px; }
/* Row market groups use sb2-row__mkt* (NOT sb2-mkt*, which is the match-detail
   accordion - see matches/_sb_market_list) so the two never collide. */
.sb2-row__mkt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sb2-row__mkt-head { font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; color: #6b7681; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb2-row__mkt-cells { display: flex; flex-direction: column; gap: 4px; }
.sb2-row__mkt .sb2-odd { display: flex; align-items: baseline; justify-content: center; gap: 6px; width: 100%; min-width: 0; }
.sb2-row__mkt .sb2-odd__label { color: #8b98a5; }
.sb2-row__mkt .sb2-odd__price { color: var(--sb2-accent); }
.sb2-row__more { flex: 0 0 auto; align-self: center; }

/* --- Live overhaul (2026-06-14): rail nav, live league heads, prominent
   "See all live", suspended (live odds<1.10) market. Base rules; the
   responsive @media section follows. --- */
.sb2-rail__nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.sb2-rail__navlink { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #c9d3de; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .12s, color .12s; }
.sb2-rail__navlink:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.sb2-rail__navlink.is-active { background: rgba(212, 175, 55, .12); color: #fff; }
.sb2-rail__navicon { width: 18px; text-align: center; color: #8b98a5; font-size: 14px; }
.sb2-rail__navlink:hover .sb2-rail__navicon, .sb2-rail__navlink.is-active .sb2-rail__navicon { color: var(--sb2-accent, #d4af37); }
.sb2-rail__navlink--live .sb2-live__dot { width: 8px; height: 8px; margin: 0 5px; }

.sb2-live__league { margin: 0 0 10px; }
.sb2-live__league-head { font-size: 14px; margin-top: 10px; }
.sb2-live__league-name { color: #e8eef5; }
.sb2-live__league-country { color: #8b98a5; font-size: 12px; font-weight: 500; margin-left: 4px; }

.sb2-live__all--btn { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 6px 14px; border-radius: 999px; background: rgba(255, 77, 79, .14); border: 1px solid rgba(255, 77, 79, .5); color: #ff6b6d; font-weight: 700; }
.sb2-live__all--btn:hover { background: rgba(255, 77, 79, .24); color: #ff8385; text-decoration: none; }
.sb2-live__all-arrow { font-size: 15px; line-height: 1; }

.sb2-row__mkt--suspended .sb2-row__mkt-head { opacity: .5; }
.sb2-row__mkt--suspended .sb2-odd { cursor: not-allowed; }

/* ===== Bet-slip notice - styled, non-blocking replacement for the native
   alert() on slip stake validation. Pure UI; placement is still blocked by the
   caller's return false. Base-only (no responsive variant needed). ===== */
.sb-slip-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(14px);
  z-index: 100000;
  max-width: 340px;
  padding: 13px 20px;
  background: #1b2330;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid var(--brand-accent, #f5b50a);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.sb-slip-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sb-slip-toast--success {
  border-left-color: #2ecc71;
}

/* ===== Sportsbook soft-launch notice (dismissible; display-only, base-only) ===== */
.sb-softlaunch-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 16px;
  background: #1b2330;
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid var(--brand-accent, #f5b50a);
  border-radius: 10px;
  color: #e8edf4;
  font-size: 13px;
  line-height: 1.4;
}
.sb-softlaunch-banner--hidden { display: none; }
.sb-softlaunch-banner__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.sb-softlaunch-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-accent, #f5b50a);
  flex: 0 0 auto;
  animation: sbSoftlaunchPulse 2s ease-in-out infinite;
}
.sb-softlaunch-banner__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-accent, #f5b50a);
  font-size: 12px;
  white-space: nowrap;
}
.sb-softlaunch-banner__text { color: #cfd7e3; }
.sb-softlaunch-banner__dismiss {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: #8c98a8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.sb-softlaunch-banner__dismiss:hover { color: #fff; }
@keyframes sbSoftlaunchPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* Backdrop behind the mobile rail / slip drawers. Sits under the drawers (which
   are z-index 70) and the bottom tab-bar (80, kept tappable) but over the page,
   so a tap off the drawer closes it. Only ever shown (.is-open) on mobile/tablet
   where the drawers exist. */
.sb2__scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 64;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.sb2__scrim.is-open { opacity: 1; visibility: visible; }

/* ============================================================================
   SPORTSBOOK DENSITY PASS (2026-07-17): make the board read as a real
   sportsbook (dense, flat, tabular) rather than a roomy card dashboard. Pure
   restyle of existing classes, no markup changed. Base rules, kept above the
   responsive @media section per house convention. To revert: delete this block.
   ========================================================================== */

/* Odds cells: tighter, flatter, corners down, prices in tabular figures so a
   column of numbers lines up the way a real book's board does. */
.sb2-odd {
  min-width: 52px;
  padding: 7px 9px;
  background: #0d1117;
  border-radius: 4px;
}
.sb2-odd__label { font-size: 11px; }
.sb2-odd__price { font-size: 14px; font-variant-numeric: tabular-nums; }

/* Event rows: less padding, flatter corners, no lift-on-hover (a dense list
   does not bounce), tighter gap so the rows read as one board. */
.sb2-row { padding: 9px 11px; border-radius: 5px; }
.sb2-row:hover { box-shadow: none; }
.sb2__events, .sb2-league__events { gap: 5px; }
.sb2-league { margin-bottom: 12px; }

/* Sport strip: drop the 88px stacked icon-tiles for compact inline pills
   (icon + name on one line), the way established books lay out their sport bar
   instead of a row of decorative circular badges. */
.sb2-strip { padding: 4px; border-radius: 6px; }
.sb2-strip__item {
  flex-direction: row;
  width: auto;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.sb2-strip__disc { width: 24px; height: 24px; }
.sb2-strip__icon { width: 15px; height: 15px; }
.sb2-strip__badge { top: 3px; right: 5px; }

/* Outright grid: denser columns, tighter picks, flatter corners. */
.sb2-wc__outright-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.sb2-wc__outright-pick { padding: 6px 10px; border-radius: 4px; }
.sb2-featured { border-radius: 6px; }

/* No real book prints a literal "Sportsbook" title; keep it in the DOM for
   screen readers and SEO, hide it visually. */
.sb2__h1 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Board flatten (pass two, 2026-07-17): the competition is the panel and its
   matches are hairline-separated rows, not a stack of individual cards. Scoped to
   the grouped upcoming board; the featured spotlight stays a card. To revert:
   delete this block. --- */
.sb2-sport__body .sb2-league {
  margin-bottom: 10px;
  background: var(--sb2-panel);
  border: 1px solid var(--sb2-line);
  border-radius: 8px;
  overflow: hidden;
}
.sb2-sport__body .sb2-league__head {
  margin: 0;
  padding: 9px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--sb2-line);
}
.sb2-sport__body .sb2-league__head::after { display: none; }
.sb2-sport__body .sb2-league__events { gap: 0; }
.sb2-sport__body .sb2-league__events > .sb2-row {
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--sb2-line);
  background: transparent;
}
.sb2-sport__body .sb2-league__events > .sb2-row:first-child { border-top: 0; }
.sb2-sport__body .sb2-league__events > .sb2-row:hover { background: rgba(255, 255, 255, .03); }

@media (max-width: 1199px) {
  /* The slip is a bottom sheet here regardless of the desktop slip-on-add state. */
  .sb2, .sb2.sb2--has-slip { grid-template-columns: var(--sb2-rail-w) 1fr; }
  .sb2__rail { display: block; }   /* shell rail returns below 1200px (desktop sidebar is an off-canvas drawer here) */
  .sb2-side { display: none; }     /* the standard-sidebar sports tree is desktop-only */
  /* ...but when the v2 sports tree is rendered inside the site's off-canvas
     slide-out menu (mobile Sports section), show it. The hide above targets the
     sportsbook page's own shell rail, not the menu drawer. */
  .sidebar .sb2-side { display: block; }
  .sidebar .sb2-side__sports { max-height: none; }
  .sb2__slip {
    display: block;
    position: fixed;
    right: 0;
    bottom: var(--sb2-bottomfix-h, 0px);
    top: auto;
    width: min(380px, 100%);
    max-height: 70vh;
    /* Clear the fixed 56px bottom tab-bar so the slip footer (Accept-odds
       checkbox + Place Bet) is reachable above it, not hidden behind it; the
       base overflow-y:auto then scrolls the slip down to it. */
    padding-bottom: 64px;
    transform: translateY(100%);
    transition: transform .25s ease;
    z-index: 70;
    border-radius: 12px 12px 0 0;
  }
  .sb2__slip.is-open { transform: translateY(0); }
  /* The slip is an off-screen sheet from 1199px down, so the bottom tab-bar
     (its only toggle) must be available across this whole range, not just on
     phones - otherwise tablet users can add selections but never open the slip. */
  .sb2 { padding-bottom: calc(64px + var(--sb2-bottomfix-h, 0px)); }
  .sb2__tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    /* Lift the bar - and so the Slip tab, the ONLY way to open the slip on mobile -
       to sit just ABOVE the affiliate site bottom-nav (.bottom-fix, shown under
       768px). The offset is set live by sportsbook--shell from the .bottom-fix
       height; it defaults to 0 where there is no such nav (wickedbet) or it is
       hidden (768-1199px), leaving the bar at bottom:0. */
    bottom: var(--sb2-bottomfix-h, 0px);
    height: 56px;
    background: var(--sb2-panel);
    border-top: 1px solid var(--sb2-line);
    /* Above the drawers (z-index 70) AND above .bottom-fix (z-index 121) so the bar
       stays visible and tappable over both. */
    z-index: 122;
  }
  /* All four items render identically whether <button> or <a> (My Bets is a link):
     flex-centred, no underline, same colour. */
  .sb2__tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; background: none; border: 0; color: #cdd6e0; font-size: 12px; line-height: 1; text-align: center; text-decoration: none; cursor: pointer; }
  .sb2__tab:hover, .sb2__tab:focus { color: #fff; text-decoration: none; }
  .sb2__tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--sb2-accent); color: #1a1a1a; }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  /* Phones: the affiliate bottom-fix nav (with Bet slip + My Bets) replaces our
     tab-bar, so hide it here. Tablet (768-1199px) keeps the tab-bar - the bottom-fix
     is hidden there and the rail is a visible column. wickedbet keeps its tab-bar at
     every width (it renders no .bottom-fix). */
  .sb2__tabbar { display: none; }
  /* Tab-bar gone -> the board only needs to clear the bottom-fix, not the 56px
     tab-bar that used to stack on top of it. */
  .sb2 { padding-bottom: var(--sb2-bottomfix-h, 0px); }
  /* Slip-count badge on the bottom-fix "Bet slip" button (selection-sync keeps the
     number live; .is-hidden hides it at zero). */
  .bottom-fix .bottom-fix-bet-slip { position: relative; }
  .bottom-fix .bottom-fix-bet-slip .sb2__tab-badge {
    position: absolute;
    top: -4px;
    right: 4px;
    font-size: 10px;
    line-height: 16px;
    pointer-events: none;
  }
  .sb2__tab-badge.is-hidden { display: none; }
  /* My Bets uses a FontAwesome receipt glyph (same as the v2 rail) rather than an
     image asset; colour + filter match the sibling bottom-fix icons exactly. */
  .bottom-fix .bottom-fix-mybets-ic {
    color: #FF4C00;
    filter: brightness(2) invert(0.9);
    font-size: 22px;
    line-height: 1;
    display: block;
    text-align: center;
    margin: 0 auto 4px;
  }
  .sb2, .sb2.sb2--has-slip { grid-template-columns: 1fr; }
  .sb2__rail {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 82%;
    max-width: 320px;
    max-height: none;
    /* Clear the fixed 56px bottom tab-bar so the bottom sports are reachable
       (scroll past it), not hidden behind it. */
    padding-bottom: 64px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 70;
    border-radius: 0;
  }
  .sb2__rail.is-open { transform: translateX(0); }
  .sb2-row { grid-template-columns: 1fr; position: relative; }
  /* Pin "+N more" to the top-right corner, beside the teams, instead of letting
     it wrap onto a full line of its own beneath the markets. */
  .sb2-row__more { position: absolute; top: 12px; right: 12px; align-self: auto; }
  .sb2-row__markets { flex-wrap: wrap; }
  /* Phones: moneyline only (spread/total live on the match page), buttons in a
     row under the teams so the card stays compact. */
  .sb2-row__mkt--spread, .sb2-row__mkt--total { display: none; }
  .sb2-row__mkt-cells { flex-direction: row; }
  .sb2-row__mkt { flex: 1 1 100%; }

  /* Match-page market cards on phones: trim the oversized header, and STACK each
     odds button (label over price, centred) instead of the desktop label-left /
     price-right row. The 3-across moneyline grid is too tight at <=360px, so the
     row layout collided the team name with its price (e.g. "Draw" / "7.50"). */
  .sb2-mkt__head { font-size: 13px; padding: 11px 12px; }
  .sb2-mkt__odd { flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px; text-align: center; }
  .sb2-mkt__odd .sb2-odd__label { flex-direction: column; align-items: center; text-align: center; width: 100%; }
  .sb2-mkt__odd .sb2-odd__price { flex: 0 0 auto; }
}

/* My Bets (bets#index / #settled) renders with the site's STANDARD left sidebar (the
   sports section), no in-shell rail. Its legacy content opens with a .col-lg-9/.col-md-8
   column that assumed a companion col; .sb-mybets-v2 (set in the bets views under v2)
   makes it fill the width beside the fixed sidebar. Bootstrap 5 cols set `width` (not
   just flex-basis) and the col isn't inside a flex `.row` here, so width:100% is what
   actually does the override. >=768px only so phones keep the single-column stack. */
@media (min-width: 768px) {
  .sb-mybets-v2 .col-lg-9, .sb-mybets-v2 .col-md-8 { flex: 0 0 100%; max-width: 100%; width: 100%; }
}

/* Affiliate bottom-fix nav: the bet-slip count badge. The base .sb2__tab-badge is
   tuned for the v2 in-shell tab-bar, where it sat as a low-contrast inline pill in
   the bottom-fix - the owner found it indistinct even recoloured white. Render it
   as a high-contrast RED corner notification badge anchored to the slip icon so the
   live selection count is unmistakable on the dark bar. is-hidden hides it at zero. */
.bottom-fix .bottom-fix-bet-slip { position: relative; }
.bottom-fix .bottom-fix-bet-slip .sb2__tab-badge {
  position: absolute; top: 0; right: 50%; transform: translateX(22px);
  min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: #ff3b30; color: #fff;
  border: 2px solid #0b0e13; border-radius: 9px;
}
.bottom-fix .bottom-fix-bet-slip .sb2__tab-badge.is-hidden { display: none; }

/* Phones: keep the bottom-sheet bet slip and its (legacy, AJAX-loaded) ticket
   content inside the viewport - a stray fixed-width child must not push the sheet
   off the right edge the way the toast did. */
@media (max-width: 767px) {
  .sb2__slip { width: 100%; max-width: 100%; overflow-x: hidden; }
  .sb2__slip .betting-slipside { max-width: 100%; overflow-x: hidden; }
}