/* ============================================================================
   SPORTSBOOK PREMIUM POLISH  ·  STRICTLY ADDITIVE  ·  load AFTER premium-italian.css
   ----------------------------------------------------------------------------
   Elevates the existing sportsbook (index.php / realtime.js markup) to a
   high-tech, tier-1 feel. No markup is changed — every selector hooks the real
   classes (.bs-app .bs-row .bs-odd .o-1x2 .o-tot .odd-lbl .odd-val .bs-live-pill
   .flash-up/.flash-down) and the Theme Engine tokens so it tracks Light/Dark.
   ========================================================================== */

:root {
  /* semantic aliases (match the names referenced elsewhere; fall back to --bs-*) */
  --bg-surface:   var(--bs-surface);
  --surface-card: var(--bs-surface);
  --text-main:    var(--bs-text);
  --text-dim:     var(--bs-text-muted);
  --accent-brand: var(--it-accent);
  --sb-up:        var(--it-green, #22e07a);
  --sb-down:      #ef4444;
}

/* ----------------------------------------------------------------------------
   1. ODDS BUTTONS — tactile, clickable, premium
   -------------------------------------------------------------------------- */
.bs-app .bs-odd.odd-btn {
  position: relative;
  overflow: hidden;
  /* subtle top sheen over the token surface = a raised, tactile chip */
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent), var(--bs-surface-3);
  border: 1px solid var(--bs-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .22);
  transition: border-color .15s ease, transform .1s ease, box-shadow .18s ease,
              background .15s ease, filter .15s ease;
}

/* hover = brightness up + accent border + slight lift (per spec) */
.bs-app .bs-odd.odd-btn:hover {
  border-color: var(--accent-brand, var(--it-accent)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent), var(--bs-surface-3) !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .32),
              inset 0 0 0 1px color-mix(in srgb, var(--accent-brand, var(--it-accent)) 40%, transparent);
}
.bs-app .bs-odd.odd-btn:active { transform: translateY(0) scale(.97); }

/* moving-light sheen sweep on hover (skip locked) */
.bs-app .bs-odd.odd-btn:not(.locked)::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-18deg);
  opacity: 0; pointer-events: none;
}
.bs-app .bs-odd.odd-btn:hover::after { animation: sbSheen .6s ease; }
@keyframes sbSheen {
  0%   { left: -60%; opacity: 0; }
  30%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* label + value typography */
.bs-app .odd-lbl {
  font-size: 9px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim, var(--bs-text-muted));
  margin-bottom: 1px; line-height: 1;
}
.bs-app .bs-odd .odd-val { font-size: 13px; font-weight: 800; color: var(--text-main, var(--bs-text)); }

/* selected / in-betslip state — brand accent + a confirming "pop" */
.bs-app .bs-odd.odd-active { animation: sbOddPop .25s ease; }
.bs-app .bs-odd.odd-active .odd-lbl { color: color-mix(in srgb, var(--accent-brand, var(--it-accent)) 70%, var(--bs-text-invert)); }
@keyframes sbOddPop {
  0%   { transform: scale(.92); }
  55%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ----------------------------------------------------------------------------
   2. ODDS MOVEMENT — quick green/red flash that fades + directional caret
   -------------------------------------------------------------------------- */
.bs-app .bs-odd.flash-up   { animation: sbFlashUp 1.1s ease; }
.bs-app .bs-odd.flash-down { animation: sbFlashDown 1.1s ease; }
@keyframes sbFlashUp {
  0%   { background: color-mix(in srgb, var(--sb-up) 34%, var(--bs-surface-3));
         box-shadow: inset 0 0 0 1px var(--sb-up), 0 0 14px color-mix(in srgb, var(--sb-up) 45%, transparent); }
  100% {}
}
@keyframes sbFlashDown {
  0%   { background: color-mix(in srgb, var(--sb-down) 34%, var(--bs-surface-3));
         box-shadow: inset 0 0 0 1px var(--sb-down), 0 0 14px color-mix(in srgb, var(--sb-down) 45%, transparent); }
  100% {}
}
.bs-app .bs-odd.flash-up .odd-val::after   { content: '\25B2'; font-size: 7px; color: var(--sb-up);   margin-left: 4px; vertical-align: middle; }
.bs-app .bs-odd.flash-down .odd-val::after { content: '\25BC'; font-size: 7px; color: var(--sb-down); margin-left: 4px; vertical-align: middle; }

/* ----------------------------------------------------------------------------
   3. MATCH ROWS — spacing, zebra tint, hover tracking, legible team names
   -------------------------------------------------------------------------- */
/* alternating tint (theme-aware via color-mix; rgba fallback first) */
.bs-app .bs-rowwrap:nth-of-type(even) > .row-line > .bs-row {
  background: rgba(127, 127, 127, .04);
  background: color-mix(in srgb, var(--text-main, var(--bs-text)) 3.5%, transparent);
}
/* hover the whole row + a brand accent edge so the eye tracks across */
.bs-app .bs-rowwrap:hover > .row-line > .bs-row {
  background: color-mix(in srgb, var(--accent-brand, var(--it-accent)) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--accent-brand, var(--it-accent));
}

/* team names: legible in BOTH themes (override Tailwind text-gray-100) */
.bs-app .ev a span { color: var(--text-main, var(--bs-text)) !important; font-weight: 700; }
.bs-app .ev a:hover span { color: var(--accent-brand, var(--it-accent)) !important; }
.bs-app .ev .font-mono { color: var(--text-dim, var(--bs-text-muted)) !important; }

/* league/group header → clean, sticky, premium band */
.bs-app #matchList > div > header {
  background: linear-gradient(180deg, var(--bs-surface-2), var(--bs-surface)) !important;
  border-bottom: 1px solid var(--bs-border) !important;
  position: sticky; top: 0; z-index: 3;
  letter-spacing: .04em;
}
.bs-app #matchList > div > header .text-fuchsia-300,
.bs-app #matchList > div > header .text-fuchsia-300\/80 { color: var(--accent-brand, var(--it-accent)) !important; }
.bs-app #matchList > div > header .text-gray-300 { color: var(--text-dim, var(--bs-text-muted)) !important; }

/* ----------------------------------------------------------------------------
   4. LIVE INDICATOR — premium expanding ring pulse
   -------------------------------------------------------------------------- */
.bs-app .bs-live-pill::before { animation: sbLiveRing 1.4s ease-out infinite; }
@keyframes sbLiveRing {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .65); }
  70%  { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ----------------------------------------------------------------------------
   5. DESKTOP — spacious rows, neatly aligned market columns
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .bs-app .bs-row { min-height: 60px; }
  .bs-app .bs-row .ev { padding: 8px 12px; }
  /* crisp vertical separators between Teams | 1X2 | Total */
  .bs-app .bs-row .o-1x2,
  .bs-app .bs-row .o-tot { border-left: 1px solid var(--bs-divider); }
}

/* ----------------------------------------------------------------------------
   6. NATIVE HORIZONTAL SCROLLERS — soft edge-fade + hidden scrollbars
   -------------------------------------------------------------------------- */
.bs-app .bs-sportstrip,
.bs-app .mkt-tabs,
.sb-edgefade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.bs-app .bs-sportstrip { scrollbar-width: none; -ms-overflow-style: none; }
.bs-app .bs-sportstrip::-webkit-scrollbar { display: none; }

/* ----------------------------------------------------------------------------
   7. MOBILE — compact rows, large odds touch targets already ≥44px
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .bs-app .bs-odd { min-height: 46px; }
  .bs-app .bs-row .o-1x2,
  .bs-app .bs-row .o-tot { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-app .bs-odd.odd-active,
  .bs-app .bs-odd.flash-up,
  .bs-app .bs-odd.flash-down,
  .bs-app .bs-odd.odd-btn:hover::after,
  .bs-app .bs-live-pill::before { animation: none !important; }
}