/* ===================================================================
   V-Sport theme — override layer for 1King template.
   Loaded AFTER style.css so its rules win.
   Design system source: docs/V-SPORT-DESIGN-SYSTEM.md
   =================================================================== */

:root {
  /* ---------- Brand core ---------- */
  --brand-primary:         #8B5CF6;
  --brand-primary-hover:   #A78BFA;
  --brand-primary-active:  #6D3FD6;
  --brand-secondary:       #17112F;
  --brand-accent:          #C6F432;
  --brand-accent-hover:    #D6FA66;

  /* ---------- Backgrounds / surfaces ---------- */
  --bg-base:               #0E0A1F;
  --bg-secondary:          #17112F;
  --bg-tertiary:           #2A1F57;
  --bg-surface:            #1D1540;
  --bg-header:             #09061A;
  --bg-header-hover:       #1D1540;
  --bg-hover:              #1D1540;
  --bg-banner:             rgba(8, 17, 31, 0.5);
  --bg-modal:              rgba(4, 10, 20, 0.72);
  --bg-main:               var(--bg-base);

  --surface-1:             #1D1540;
  --surface-2:             #2A1F57;
  --surface-hover:         #2B2060;
  --surface-active:        #3C2E80;

  /* ---------- Controls (buttons / CTA) ---------- */
  --accent:                var(--brand-primary);
  --control-primary:       var(--brand-primary);
  --control-primary-hover: var(--brand-primary-hover);
  --control-secondary:     var(--surface-1);
  --control-secondary-hover: var(--surface-2);

  /* ---------- Text ---------- */
  --text-white:            #ffffff;
  --text-title:            #F5F9FF;
  --text-body:             #C7D3E6;
  --text-subtitle:         rgba(199, 211, 230, 0.9);
  --text-muted:            #8AA0BF;
  --text-disabled:         #5C7091;
  --text-on-accent:        #ffffff;                /* accent is now blue, white text */
  --text-on-primary:       #ffffff;
  --text-on-amber:         #0E0A1F;                /* amber accent → dark text */
  --text-link:             #B7A0FF;
  --text-link-hover:       #D4C6FF;

  /* ---------- Icons ---------- */
  --icon-main:             #8AA0BF;
  --icon-on-accent:        #ffffff;

  /* ---------- Borders ---------- */
  --border-default:        #3A2C75;
  --border-subtle:         rgba(255, 255, 255, 0.06);
  --border-hover:          #5642B0;
  --border-active:         var(--brand-primary);
  --divider:               rgba(255, 255, 255, 0.08);

  /* ---------- Semantic ---------- */
  --success:               #22C55E;
  --success-bg:            #0F3B21;
  --success-text:          #4BE38A;
  --warning:               #F59E0B;
  --warning-bg:            #3D2A05;
  --warning-text:          #FFC661;
  --error:                 #EF4444;
  --error-bg:              #3E1214;
  --error-text:            #FF7B7B;
  --info:                  #38BDF8;
  --info-bg:               #0A2F44;
  --info-text:             #7CD8FF;

  --live:                  #FF3B3B;

  /* ---------- Gradients ---------- */
  --gradient-brand:        linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
  --gradient-hero:         linear-gradient(180deg, #17112F 0%, #0E0A1F 100%);
  --gradient-promo:        linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  --gradient-jackpot:      linear-gradient(135deg, #C6F432 0%, #FF7A18 100%);

  /* ---------- Shadows / glow ---------- */
  --shadow-card:           0 8px 24px rgba(0, 0, 0, .40);
  --shadow-dropdown:       0 12px 32px rgba(0, 0, 0, .50);
  --shadow-modal:          0 20px 60px rgba(0, 0, 0, .60);
  --glow-primary:          0 0 24px rgba(139,92,246, .35);
  --glow-live:             0 0 12px rgba(255, 59, 59, .55);
  --glow-jackpot:          0 0 20px rgba(198,244,50, .40);
}

/* -------------------------------------------------------------------
   Overrides for hardcoded hex values that were baked into style.css
   (they don't come from the :root above).
   ------------------------------------------------------------------- */

/* 1King warm tint used in decorative highlights / bg-tertiary variants */
[style*="#37332d"], [style*="#37332D"] { background-color: var(--surface-2) !important; }

/* Global fallback: components with hardcoded gray/beige backgrounds */
.k3, .k3-cats, .k3-wins, .k3-pay, .k3-adv {
  --k3-surface: var(--bg-surface);
  --k3-nav-bg: var(--surface-2);
  --k3-nav-icon: var(--text-body);
  --k3-nav-shadow: var(--shadow-dropdown);
  --k3-hot: var(--error);
  --k3-cool: var(--brand-primary);
}

/* Deposit-button green / success accents originally #00d68f → keep them green,
   but slightly aligned with our success token so it reads within the palette. */
[class*="deposit"], .btn--success, .cta--success {
  background: var(--success) !important;
  color: var(--text-on-primary) !important;
}

/* -------------------------------------------------------------------
   Component fine-tuning
   ------------------------------------------------------------------- */

body { background: var(--bg-base); color: var(--text-body); }

/* Header (uses --bg-header from :root; nothing else needed) */
.header, .head-bar { background: var(--bg-header); }

/* Primary CTA — override the yellow-on-black look with V-Sport blue gradient */
.btn--primary, .cta, .promo-hero__cta, .games-rail__more,
.k3-cats__link .k3-cats__badge, .btn.btn-primary {
  color: var(--text-on-primary);
}
.promo-hero__cta,
.btn--primary {
  background: var(--gradient-brand);
  color: var(--text-on-primary);
  border: none;
  box-shadow: var(--glow-primary);
  transition: filter .15s ease, transform .15s ease;
}
.promo-hero__cta:hover,
.btn--primary:hover { filter: brightness(1.08); }
.promo-hero__cta:active,
.btn--primary:active { filter: brightness(0.94); transform: translateY(1px); }

/* Amber badges (jackpot / live-score / favorite active) */
.badge--jackpot, .k3-pay__badge--hot .k3-pay__mult { color: var(--brand-accent); }
.badge--live, .live-dot { background: var(--live); box-shadow: var(--glow-live); }

/* Category active state — subtle blue overlay + colored icon */
.k3-cats__link:hover,
.k3-cats__link:focus-visible,
.k3-cats__link.is-active {
  background: rgba(139,92,246, .12);
}
.k3-cats__link.is-active .k3-cats__label { color: var(--text-link); }

/* Sports odds cells */
.odds, .odds-cell, [class*="odds"] {
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  transition: background .12s ease, border-color .12s ease;
}
.odds:hover, .odds-cell:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.odds.is-selected, .odds-cell.is-selected {
  background: var(--brand-primary);
  color: var(--text-on-primary);
  border-color: var(--brand-primary-hover);
  box-shadow: var(--glow-primary);
}

/* Forms */
input, textarea, select {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:hover, textarea:hover, select:hover { border-color: var(--border-hover); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(139,92,246, .28);
}

/* Legal pages typography */
body.legal-page { background: var(--bg-base); }
.lgl { background: var(--bg-base); }
.lgl__aside { background: var(--bg-secondary); }
.lgl__title { color: var(--text-title); }
.lgl__text, .lgl__text--privacy { color: var(--text-body); }
.lgl__text h2, .lgl__text h3 { color: var(--text-title); }
.lgl__text h2 {
  font-size: 22px; line-height: 1.3; margin: 28px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--divider);
}
.lgl__text h3 { font-size: 18px; line-height: 1.3; margin: 20px 0 8px; }
.lgl__text p { margin: 0 0 12px; }
.lgl__text ul { margin: 0 0 16px; padding-left: 20px; }
.lgl__text ul li { list-style: disc; margin-bottom: 6px; color: var(--text-body); }
.lgl__text strong { color: var(--text-title); }
.lgl__text a { color: var(--text-link); }
.lgl__text a:hover { color: var(--text-link-hover); text-decoration: underline; }
.f07-seo .f07__seo-scroll a { color: var(--text-link); }
.f07-seo .f07__seo-scroll a:hover { color: var(--text-link-hover); text-decoration: underline; }
.lgl__text table {
  width: 100%; margin: 12px 0 20px;
  border-collapse: collapse;
  background: var(--surface-1);
  border-radius: 12px;
  overflow: hidden;
}
.lgl__text th, .lgl__text td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
}
.lgl__text th {
  background: var(--surface-2);
  color: var(--text-title);
  font-weight: 600;
}

/* V-Sport hero on legal pages */
.vs-hero {
  position: relative;
  padding: 28px 24px;
  background: var(--gradient-hero);
  border-radius: 16px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--border-default);
}
.vs-hero::after {
  content: "";
  position: absolute; inset: auto -80px -140px auto;
  width: 320px; height: 320px;
  background: radial-gradient(circle at center, rgba(29,94,219,.35), transparent 70%);
  pointer-events: none;
}
.vs-hero h1 {
  color: var(--text-title);
  font-size: 28px; line-height: 1.15;
  margin: 0 0 10px;
  font-weight: 700;
}
.vs-hero p { color: var(--text-body); max-width: 720px; margin: 0; }
.vs-hero .vs-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  margin-top: 18px;
  background: var(--gradient-brand);
  color: var(--text-on-primary);
  border-radius: 999px;
  box-shadow: var(--glow-primary);
  font-weight: 600;
  transition: filter .15s ease;
}
.vs-hero .vs-hero__cta:hover { filter: brightness(1.08); }

/* Content cards inside legal-page (for FAQ etc.) */
.vs-card {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 12px;
}
.vs-card__title {
  font-size: 16px;
  color: var(--text-title);
  margin: 0 0 6px;
}
.vs-card__body { color: var(--text-body); font-size: 14px; }

/* Tabbar / bottom navigation */
.footer-tabbar, .tabbar { background: var(--bg-header); border-top: 1px solid var(--divider); }
.tabbar__item.is-active, .footer-tabbar__item.is-active { color: var(--text-link); }
.tabbar__item.is-active svg, .footer-tabbar__item.is-active svg { color: var(--brand-primary); }

/* Focus visibility (a11y) */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Inline figures inside article body (15 legal pages) */
.vs-figure {
  margin: 20px 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
}
.vs-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.vs-figure figcaption {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-top: 1px solid var(--divider);
}

/* -------------------------------------------------------------------
   V-Sport specific components (added on top of 1King template).
   ------------------------------------------------------------------- */

/* V-Sport wordmark logo (replaces 1King image logo) */
.vs-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--font-display, 'Montserrat', sans-serif);
  text-decoration: none;
}
.vs-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--gradient-brand);
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  font-style: italic;
  letter-spacing: -0.5px;
  box-shadow: var(--glow-primary);
}
.vs-logo__wordmark {
  color: var(--text-title);
  font-weight: 800;
  font-size: 20px;
  font-style: italic;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.vs-logo:hover .vs-logo__wordmark { color: var(--text-link); }

/* Home hero section */
.vs-home-hero { padding: 20px 0 8px; }
.vs-home-hero .vs-hero { padding: 44px 32px; }
.vs-home-hero .vs-hero h1 { font-size: 36px; letter-spacing: -0.5px; }
@media (max-width: 640px) {
  .vs-home-hero .vs-hero { padding: 28px 20px; }
  .vs-home-hero .vs-hero h1 { font-size: 26px; }
}

/* Category cards on home */
.vs-cats { padding: 20px 0 8px; }
.vs-cats__title {
  font-size: 22px;
  margin: 0 0 16px;
  color: var(--text-title);
}
.vs-cats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.vs-cat {
  display: block;
  padding: 20px;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.vs-cat:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.vs-cat__icon { font-size: 34px; line-height: 1; margin-bottom: 12px; }
.vs-cat__label {
  font-size: 18px;
  color: var(--text-title);
  font-weight: 600;
  margin-bottom: 4px;
}
.vs-cat__meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* V-Sport article wrapper on home + hero on legal pages */
.vs-article { padding: 24px 0 40px; }
.vs-article .lgl__text {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 32px;
}
@media (max-width: 640px) {
  .vs-article .lgl__text { padding: 20px; border-radius: 12px; }
}

/* Restore visibility of legal aside on wide layout */
.lgl__grid {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: 24px;
  padding: 24px 20px;
}
@media (max-width: 900px) {
  .lgl__grid {
    grid-template-columns: 1fr;
  }
  .lgl__aside {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
  }
  .lgl__aside .lgl__art { display: none; }
  .lgl__aside .lgl__title { font-size: 22px; margin: 0; }
}
.lgl__aside {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: 80px;
  align-self: start;
}
.lgl__back {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  border-radius: 10px;
  color: var(--text-body);
  margin-bottom: 16px;
  transition: background .15s;
}
.lgl__back:hover { background: var(--surface-hover); color: var(--text-title); }
.lgl__title { font-size: 24px; line-height: 1.2; color: var(--text-title); margin: 16px 0 0; }
.lgl__content {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 32px;
}
@media (max-width: 640px) {
  .lgl__content { padding: 20px; border-radius: 12px; }
}
.lgl__art { border-radius: 12px; }

/* Header buttons */
.head-bar__btn {
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s, color .15s, transform .1s;
}
.head-bar__btn--secondary {
  background: var(--surface-1);
  color: var(--text-title);
  border: 1px solid var(--border-default);
}
.head-bar__btn--secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
}
.head-bar__btn--primary {
  background: var(--gradient-brand);
  color: var(--text-on-primary);
  box-shadow: var(--glow-primary);
}
.head-bar__btn--primary:hover { filter: brightness(1.08); }
.head-bar__btn--primary:active { transform: translateY(1px); }

/* Header nav item active blue underline */
.head-bar__item--active {
  color: var(--text-link);
}
.head-bar__item--active .head-bar__label { color: var(--text-link); }
.head-bar__item--active svg { color: var(--brand-primary); }

/* Footer restyle */
.f07 {
  background: var(--bg-header);
  color: var(--text-body);
  padding: 40px 0 28px;
  border-top: 1px solid var(--divider);
}
.f07__panel {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 32px;
}
@media (max-width: 900px) {
  .f07__panel { grid-template-columns: 1fr; }
}
.f07__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 640px) {
  .f07__columns { grid-template-columns: 1fr; gap: 24px; }
}
.f07__column-title {
  color: var(--text-title);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
}
.f07__column-list li { margin: 6px 0; }
.f07__link {
  color: var(--text-body);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s;
}
.f07__link:hover { color: var(--text-link); }
.f07__cell--brand .f07__cell-title {
  font-size: 22px;
  color: var(--text-title);
  margin: 0 0 8px;
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-style: italic;
  letter-spacing: 0.5px;
}
.f07__cell-text { color: var(--text-body); font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.f07__cell-text--muted { color: var(--text-muted); font-size: 12px; margin-top: 12px; }
.f07__divider {
  height: 1px;
  background: var(--divider);
  margin: 24px 0;
  grid-column: 1 / -1;
}

/* Mobile tab-bar full styling (in case the template's own is not brought in) */
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 100;
  display: none;
  justify-content: space-around;
  background: var(--bg-header);
  border-top: 1px solid var(--divider);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
@media (max-width: 900px) {
  .tab-bar { display: flex; }
  body { padding-bottom: 64px; }
}
.tab-bar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: 10px;
  text-decoration: none;
  background: transparent;
  border: none;
}
.tab-bar__item .tab-bar__icon svg { width: 22px; height: 22px; }
.tab-bar__item--active { color: var(--text-link); }
.tab-bar__item--active svg { color: var(--brand-primary); }

/* Container */
.container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 max(16px, calc(var(--page-x, 36px) / 2));
}

/* Body padding compensation for the fixed header */
.page > main { padding-top: 12px; }

/* Header layout */
/* Positioning, height and divider come from style.css (fixed, 56px). The page
   padding and the fixed side panels are offset by --header-height, so the
   header must stay fixed — a sticky header adds an empty band above it. */
.head-bar { background: var(--bg-header); }
.head-bar__row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}
.head-bar__side { display: flex; align-items: center; gap: 8px; }
.head-bar__nav {
  display: flex;
  gap: 6px;
  flex: 1;
  /* flex-start + auto margins: centred while the items fit, scrollable from the first
     item once they overflow (justify-content: center left the start unreachable) */
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.head-bar__nav > :first-child { margin-left: auto; }
.head-bar__nav > :last-child { margin-right: auto; }
.head-bar__nav::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  .head-bar__nav { display: none; }
}
.head-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: var(--text-body);
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.head-bar__item:hover { background: var(--bg-header-hover); color: var(--text-title); }
.head-bar__item--active { background: rgba(139,92,246, .12); color: var(--text-link); }
.head-bar__glyph { display: inline-flex; align-items: center; width: 20px; height: 20px; }
.head-bar__glyph svg { width: 20px; height: 20px; }
.head-bar__actions { display: flex; gap: 8px; align-items: center; }
.head-bar__back,
.head-bar__burger {
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-body);
  border-radius: 10px;
  cursor: pointer;
}
.head-bar__back:hover, .head-bar__burger:hover { background: var(--bg-header-hover); color: var(--text-title); }
/* .head-bar__back stays governed by style.css's default (hidden) and
   .head-bar--back (mobile back/title layout) — no page currently uses that
   modifier, so it must not be force-shown here or it leaks into every header. */
.head-bar__burger { display: none; }
@media (max-width: 900px) {
  .head-bar__burger { display: inline-flex; }
}

/* Menu drawer */
.head-bar__menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--bg-secondary);
  border-right: 1px solid var(--divider);
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: var(--z-drawer, 200);
  overflow-y: auto;
}
.head-bar__menu.is-open { transform: translateX(0); }
.head-bar__menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--divider);
}
.head-bar__menu-title { color: var(--text-title); font-weight: 600; }
.head-bar__menu-close {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-body);
  border-radius: 8px;
  cursor: pointer;
}
.head-bar__menu-close:hover { background: var(--surface-hover); }
.head-bar__menu-inner { padding: 12px; display: flex; flex-direction: column; gap: 20px; }
.head-bar__group { display: flex; flex-direction: column; gap: 2px; }
.head-bar__group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0 8px 6px;
}
.head-bar__cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--text-body);
  border-radius: 10px;
  text-decoration: none;
  transition: background .12s;
}
.head-bar__cell:hover { background: var(--surface-1); color: var(--text-title); }

/* -------------------------------------------------------------------
   Sport-specific widgets: active sport tab, race cards, results view
   ------------------------------------------------------------------- */

.sb-tabs__sport--active { border-bottom-color: var(--brand-primary); }
.sb-tabs__sport--active .sb-tabs__sport-label { color: var(--text-title); font-weight: 600; }

.sb-ev__note {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--size-8);
  box-sizing: border-box;
  border-radius: var(--radius-12);
  background: var(--sb-odd-bg);
  font-size: var(--fs-12);
  line-height: 16px;
  color: var(--text-body);
  text-align: center;
}

/* Horse race card (rail item, same footprint as .sb-ev) */
.sb-race {
  display: flex;
  flex-direction: column;
  width: 296px;
  height: 100%;
  padding-bottom: var(--size-8);
  box-sizing: border-box;
  border-radius: var(--radius-20);
  background: var(--sb-surface);
}
.sb-race__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--size-10) var(--size-12) var(--size-4);
}
.sb-race__track,
.sb-race__meta,
.sb-race__name,
.sb-race__jockey {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sb-race__track { font-weight: 600; font-size: var(--fs-14); line-height: 18px; color: var(--text-title); }
.sb-race__meta { font-size: var(--fs-12); line-height: 16px; color: var(--text-body); }
.sb-race__status {
  display: flex;
  align-items: baseline;
  gap: var(--size-6);
  padding: 0 var(--size-12) var(--size-8);
}
.sb-race__day {
  font-weight: 600;
  font-size: var(--fs-10);
  line-height: 14px;
  text-transform: uppercase;
  color: var(--text-body);
}
.sb-race__day--live { color: var(--sb-odd-down); }
.sb-race__time { font-weight: 600; font-size: var(--fs-16); line-height: 20px; color: var(--text-title); }
.sb-race__runners {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  margin: 0;
  padding: 0 var(--size-8);
  list-style: none;
}
.sb-race__runner {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 64px;
  align-items: center;
  gap: var(--size-8);
  min-height: 40px;
  padding: 0 var(--size-4);
}
.sb-race__no { width: 24px; height: 24px; }
.sb-race__horse { display: flex; flex-direction: column; min-width: 0; }
.sb-race__name { font-size: var(--fs-14); line-height: 18px; color: var(--text-title); }
.sb-race__jockey { font-size: var(--fs-12); line-height: 16px; color: var(--text-body); }
.sb-race__odd,
.sb-race__pos {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: var(--radius-12);
  background: var(--sb-odd-bg);
  font-weight: 500;
  font-size: var(--fs-16);
  color: var(--sb-odd-text);
}
.sb-race__odd { transition: background-color 0.2s ease; }
.sb-race__odd:hover { background: var(--control-secondary-hover); }
.sb-race__pos { background: transparent; font-weight: 600; color: var(--text-title); }
.sb-race__note {
  margin: var(--size-8) var(--size-8) 0;
  padding: var(--size-8);
  border-radius: var(--radius-12);
  background: var(--sb-odd-bg);
  font-size: var(--fs-12);
  line-height: 16px;
  color: var(--text-body);
  text-align: center;
}

/* Results list */
.sb-res {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius-20);
  overflow: hidden;
}
.sb-res__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 64px minmax(0, 1fr) minmax(0, 1.2fr) 44px;
  align-items: center;
  gap: var(--size-8);
  min-height: 48px;
  padding: var(--size-6) var(--size-12);
  background: var(--sb-surface);
  font-size: var(--fs-14);
  line-height: 18px;
  color: var(--text-body);
}
.sb-res__time { font-size: var(--fs-12); color: var(--text-muted); }
.sb-res__team,
.sb-res__detail-main,
.sb-res__detail-sub {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sb-res__team { color: var(--text-title); }
.sb-res__team--home { text-align: right; }
.sb-res__team--win { font-weight: 600; }
.sb-res__score {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: var(--radius-8);
  background: var(--sb-odd-bg);
  font-weight: 700;
  color: var(--text-title);
  font-variant-numeric: tabular-nums;
}
.sb-res__detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--fs-12);
  line-height: 16px;
  color: var(--text-body);
}
.sb-res__detail-sub { color: var(--text-muted); }
.sb-res__status {
  font-weight: 600;
  font-size: var(--fs-10);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
}
.sb-res__row--race { grid-template-columns: 44px minmax(0, 2.4fr) minmax(0, 1.2fr) 44px; }
.sb-res__podium {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--size-16);
  min-width: 0;
  color: var(--text-title);
}
.sb-res__place { display: inline-flex; align-items: center; gap: var(--size-6); white-space: nowrap; }
.sb-res__no { width: 18px; height: 18px; }

@media (max-width: 767px) {
  .sb-res__row {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    grid-template-areas:
      "time time status"
      "home score away"
      "detail detail detail";
    row-gap: var(--size-4);
  }
  .sb-res__time { grid-area: time; }
  .sb-res__status { grid-area: status; }
  .sb-res__team--home { grid-area: home; }
  .sb-res__score { grid-area: score; }
  .sb-res__team--away { grid-area: away; }
  .sb-res__detail { grid-area: detail; text-align: center; }
  .sb-res__row--race {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "time status"
      "podium podium"
      "detail detail";
  }
  .sb-res__podium { grid-area: podium; }
  .sb-res__row--race .sb-res__detail { text-align: left; }
}

/* League table */
.sb-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-20);
  background: var(--sb-surface);
}
.sb-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fs-14);
  line-height: 18px;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}
.sb-table__caption {
  padding: var(--size-10) var(--size-12) 0;
  font-size: var(--fs-12);
  color: var(--text-muted);
  text-align: left;
  caption-side: top;
}
.sb-table th,
.sb-table td {
  padding: var(--size-8) var(--size-10);
  border-bottom: 1px solid var(--divider);
  text-align: center;
}
.sb-table th {
  font-weight: 600;
  font-size: var(--fs-12);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sb-table tbody tr:last-child td { border-bottom: 0; }
.sb-table th:nth-child(2),
.sb-table td:nth-child(2) { text-align: left; }
.sb-table td:last-child { font-weight: 700; color: var(--text-title); }
.sb-table__team { display: inline-flex; align-items: center; gap: var(--size-8); color: var(--text-title); white-space: nowrap; }
.sb-table__logo { width: 20px; height: 20px; }
.sb-table__pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sb-odd-bg);
  font-weight: 600;
  color: var(--text-title);
}
.sb-table tbody tr:nth-child(-n+4) .sb-table__pos { background: var(--brand-primary); }

/* Results page side panel (reuses .sb-slip positioning) */
.sb-sum__list {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  margin: var(--size-12);
  padding: 0;
  list-style: none;
}
.sb-sum__row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--size-8);
  padding: var(--size-10) var(--size-12);
  border-radius: var(--radius-12);
  background: var(--sb-odd-bg);
}
.sb-sum__icon { width: 20px; height: 20px; object-fit: contain; }
.sb-sum__label { font-size: var(--fs-14); color: var(--text-title); }
.sb-sum__value { font-size: var(--fs-12); color: var(--text-body); white-space: nowrap; }
.sb-sum__note {
  margin: 0 var(--size-12);
  font-size: var(--fs-12);
  line-height: 16px;
  color: var(--text-muted);
}
.sb-sum__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: var(--size-12);
  border-radius: 999px;
  background: var(--gradient-brand);
  font-weight: 600;
  font-size: var(--fs-14);
  color: var(--text-on-primary);
}
.sb-sum__link:hover { filter: brightness(1.08); }


/* ===================== CTA bands / popup / casino showcase ===================== */
.vs-cta{margin:24px 0}
.vs-cta__box{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;border-radius:16px;border:1px solid var(--border-hover);background:linear-gradient(120deg,var(--bg-tertiary),var(--brand-primary-active))}
.vs-cta--results .vs-cta__box{background:linear-gradient(120deg,var(--bg-surface),var(--bg-tertiary))}
.vs-cta--bonus .vs-cta__box{background:linear-gradient(120deg,#2a3308,#2A1F57);border-color:var(--brand-accent)}
.vs-cta--compact .vs-cta__box{padding:16px 22px}
.vs-cta__title{margin:0 0 4px;font-size:22px;line-height:1.25;color:var(--text-white)}
.vs-cta__sub{margin:0;color:var(--text-body)}
.vs-cta__actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.vs-cta__btn,.vs-popup__btn,.vs-casinos__btn{display:inline-block;padding:12px 26px;border-radius:10px;background:var(--brand-accent);color:var(--text-on-amber);font-weight:700;text-decoration:none;text-align:center;transition:background .2s}
.vs-cta__btn:hover,.vs-popup__btn:hover,.vs-casinos__btn:hover{background:var(--brand-accent-hover)}
.vs-cta__link{color:var(--text-link);text-decoration:underline}
@media(max-width:700px){.vs-cta__box{flex-direction:column;align-items:stretch;text-align:center}.vs-cta__actions{flex-direction:column;gap:10px}.vs-cta__title{font-size:19px}}

.vs-popup[hidden]{display:none}
.vs-popup{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.vs-popup__backdrop{position:absolute;inset:0;background:var(--bg-modal)}
.vs-popup__card{position:relative;width:100%;max-width:420px;padding:32px 28px 22px;border-radius:18px;background:var(--bg-surface);border:1px solid var(--border-hover);box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center;animation:vsPop .25s ease-out}
.vs-popup__eyebrow{margin:0 0 6px;color:var(--brand-accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.vs-popup__title{margin:0 0 10px;font-size:24px;line-height:1.25;color:var(--text-white)}
.vs-popup__text{margin:0 0 20px;color:var(--text-body)}
.vs-popup__btn{display:block;width:100%;box-sizing:border-box}
.vs-popup__skip{margin-top:12px;background:none;border:0;color:var(--text-muted);cursor:pointer;text-decoration:underline}
.vs-popup__legal{margin:14px 0 0;font-size:12px;color:var(--text-muted)}
.vs-popup__close{position:absolute;top:8px;right:12px;background:none;border:0;color:var(--text-muted);font-size:28px;line-height:1;cursor:pointer}
html.vs-popup-open{overflow:hidden}
@keyframes vsPop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

.vs-casinos{margin:24px 0}
.vs-casinos__head{margin-bottom:16px}
.vs-casinos__title{margin:0 0 6px;color:var(--text-white);font-size:24px;line-height:1.25}
.vs-casinos__note{margin:0;color:var(--text-muted);font-size:12.5px}
.vs-casinos__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:none}
.vs-casinos__card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 14px 16px;border-radius:14px;background:linear-gradient(180deg,var(--bg-surface),var(--bg-secondary));border:1px solid var(--border-default);transition:border-color .2s,transform .2s}
.vs-casinos__card:hover{border-color:var(--brand-accent);transform:translateY(-3px)}
.vs-casinos__rank{position:absolute;top:10px;left:10px;width:22px;height:22px;border-radius:50%;background:var(--bg-tertiary);color:var(--text-body);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.vs-casinos__card:first-child .vs-casinos__rank{background:var(--brand-accent);color:var(--text-on-amber)}
.vs-casinos__logo{width:150px;max-width:100%;height:56px;padding:6px 10px;box-sizing:border-box;background:rgba(0,0,0,.35);border-radius:12px;object-fit:contain;margin-bottom:10px}
.vs-casinos__logo--mono{display:flex;align-items:center;justify-content:center;background:var(--c);color:#fff;font-size:28px;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.vs-casinos__name{margin:0 0 10px;font-size:17px;color:var(--text-title)}
.vs-casinos__bonus{flex:1;display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.vs-casinos__offer{font-size:22px;line-height:1.1;color:var(--brand-accent)}
.vs-casinos__offer span{display:block;font-size:13px;font-weight:600;color:var(--text-title);margin-top:3px}
.vs-casinos__fs{font-size:14px;color:var(--text-body)}
.vs-casinos__min{margin-bottom:14px;font-size:12.5px;color:var(--text-muted)}
.vs-casinos__min b{color:var(--text-body)}
.vs-casinos__btn{width:100%;box-sizing:border-box}
@media(max-width:1100px){.vs-casinos__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){
  .vs-casinos__grid{grid-template-columns:1fr;gap:10px}
  .vs-casinos__card{display:grid;grid-template-columns:80px 1fr auto;grid-template-areas:"logo name btn" "logo bonus btn" "logo min btn";column-gap:12px;row-gap:2px;align-items:center;text-align:left;padding:14px 12px 14px 14px}
  .vs-casinos__rank{display:none}
  .vs-casinos__logo{grid-area:logo;margin:0;width:80px;height:48px;padding:4px 6px}
  .vs-casinos__logo--mono{height:56px;width:56px}
  .vs-casinos__name{grid-area:name;margin:0;font-size:16px}
  .vs-casinos__bonus{grid-area:bonus;margin:0;flex:none;gap:0}
  .vs-casinos__offer{font-size:16px}
  .vs-casinos__offer span{display:inline;font-size:13px;margin:0 0 0 4px}
  .vs-casinos__fs{font-size:12.5px}
  .vs-casinos__min{grid-area:min;margin:0;font-size:11.5px}
  .vs-casinos__btn{grid-area:btn;width:auto;padding:10px 14px;font-size:13px;white-space:normal;max-width:104px}
}

/* ===== nav CTA / inline CTA / sticky bar / popup extras ===== */
.vs-bonus-btn{background:var(--brand-accent)!important;color:var(--text-on-amber)!important;font-weight:700;border-radius:10px;animation:vsPulse 2.2s infinite}
@keyframes vsPulse{0%,100%{box-shadow:0 0 0 0 rgba(198,244,50,.55)}60%{box-shadow:0 0 0 9px rgba(198,244,50,0)}}
.vs-inline-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0;padding:16px 20px;border-radius:12px;background:linear-gradient(120deg,var(--bg-tertiary),var(--bg-surface));border:1px solid var(--border-hover);border-left:4px solid var(--brand-accent)}
.vs-inline-cta strong{display:block;color:var(--text-white);font-size:17px;margin-bottom:2px}
.vs-inline-cta span{color:var(--text-body);font-size:14px}
.vs-inline-cta .vs-cta__btn{flex-shrink:0;padding:10px 20px}
@media(max-width:600px){.vs-inline-cta{flex-direction:column;align-items:stretch;text-align:center}}
.vs-popup__alt{display:block;margin-top:10px;color:var(--text-link);text-decoration:underline;font-size:14px}
@media(max-width:900px){.vs-bonus-btn{display:none}}
.vs-inline-cta .vs-cta__btn,.vs-inline-cta .vs-cta__btn:hover{color:var(--text-on-amber)!important;text-decoration:none!important}
.vs-inline-cta strong,.vs-inline-cta span{text-decoration:none}

.vs-navpromo{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;padding:16px;border-radius:14px;text-decoration:none;background:linear-gradient(135deg,#2a3308,var(--bg-tertiary) 70%);border:1px solid var(--brand-accent)}
.vs-navpromo__badge{color:var(--brand-accent);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.vs-navpromo__title{color:var(--text-white);font-size:17px;line-height:1.25}
.vs-navpromo__btn{align-self:flex-start;padding:9px 18px;border-radius:9px;background:var(--brand-accent);color:var(--text-on-amber);font-weight:700;font-size:14px}
.vs-navpromo:hover .vs-navpromo__btn{background:var(--brand-accent-hover)}

/* ===== vsport1.hu visual identity: violet + lime, sharp corners ===== */
.promo-hero__cta,.btn--primary,.vs-cta__btn,.vs-popup__btn,.vs-casinos__btn,.vs-navpromo__btn,.head-bar__btn,.vs-bonus-btn{border-radius:4px!important;text-transform:uppercase;letter-spacing:.03em}
.vs-logo__mark{border-radius:3px!important;transform:skewX(-8deg)}
.vs-casinos__card,.vs-cta__box,.vs-inline-cta,.vs-popup__card,.vs-navpromo{border-radius:6px}
.vs-casinos__rank{border-radius:2px}
.vs-casinos__logo{border-radius:4px}