/* sb-skin.css — makes the live React /sportsbook look like /sb2 (the beton.ua
 * reference): two-line odds pills,every match as its own card, sb2 metrics.
 *
 * Pure presentation on top of the existing app — maaxibet-sb-skin.js only tags
 * elements (data-sk="…") and injects the selection labels; nothing here changes
 * behaviour, and removing the two files restores the stock look.
 * Colours come from the operator palette (Template Settings), same as before.
 */

:root {
  --sk-card:#1a1c26;
  --sk-cell:#38404f;
  --sk-line:rgba(255,255,255,.07);
  --sk-mut:#8b93a7;
  --sk-r:10px;
}

/* hover: the cell is painted inline through --sk-odd, so setting the variable
   here still wins — the reference lightens the cell on hover */
/* hover is painted from JS (see hoverPaint) so it can beat the theme's inline
   text colours — the cell goes solid primary, exactly like a selection */
[data-sk="odd"]{transition:background-color .12s}

/* ── odds cell → two-line pill (price above, selection below) ─────────── */
[data-sk="odd"]{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;gap:1px!important;line-height:1.05!important;
  border-radius:var(--sk-r)!important;overflow:hidden;padding:0 6px!important;
}
[data-sk="odd"] > .sk-lbl{
  display:block;max-width:100%;font-size:10px;font-weight:600;color:#aeb6c6;
  line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  pointer-events:none;
}
/* the price node the app already renders */
[data-sk="odd"] > *:not(.sk-lbl){font-size:13px!important;font-weight:800!important;line-height:1.05!important}
/* a picked odd is solid accent — text, price and label all go dark */
[data-sk="odd"][data-sk-sel="1"],[data-sk="bar"][data-sk-sel="1"]{
  background-color:var(--sb-accent,#e8ff00)!important;color:#0b0b0b!important;border-color:transparent!important;
}
[data-sk="odd"][data-sk-sel="1"] *,[data-sk="bar"][data-sk-sel="1"] *{color:#0b0b0b!important}
[data-sk="odd"][data-sk-sel="1"] > .sk-lbl{color:rgba(0,0,0,.62)!important}
[data-sk="odd"][data-sk-sel="1"]:hover,[data-sk="bar"][data-sk-sel="1"]:hover{--sk-odd:var(--sb-accent,#e8ff00)}

/* ── every match row becomes its own card, like the reference ─────────── */
[data-sk="row"]{
  background:var(--sk-card);border-radius:var(--sk-r);
  margin:0 0 6px 0;padding:10px 12px!important;
  transition:background .12s;
}
/* hover belongs to the odds cell alone — the row must not light up (asked for
   on both the listing and the event page) */
[data-sk="row"]:hover{background:var(--sb-card,#1a1c26)!important}
[data-sk="mrow"]:hover{background:var(--sb-card,#1a1c26)!important}
/* the wrappers that used to draw one big panel behind all rows — the reference
   separates cards with the page colour, so these must not paint */
[data-sk="rows"]{background:transparent!important;padding:0!important}
[data-sk="rows-panel"]{background:transparent!important;border-radius:0!important}
[data-sk="rowhead"]{padding-left:2px!important}

/* ── league header line above a block of rows ─────────────────────────── */
[data-sk="lghead"]{
  background:var(--sk-card);border-radius:var(--sk-r);
  min-height:43px;display:flex;align-items:center;margin-bottom:6px;padding:0 12px!important;
}

/* ── column titles read as the reference's group pills ────────────────── */
[data-sk="colhead"]{
  background:#12141b;border-radius:var(--sk-r);min-height:34px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px!important;font-weight:700!important;color:#dfe4ee!important;
}

/* ── sidebar league rows as buttons (43px, carded) ────────────────────── */
[data-sk="side-row"]{
  background:#242633!important;border-radius:var(--sk-r)!important;
  min-height:43px!important;margin-bottom:4px!important;
}
[data-sk="side-row"]:hover{background:#333848!important}   /* measured off the reference */

/* ── expanded sidebar group: submenu buttons inset and packed tighter ──── */
[data-sk="side-sub"]{padding:0 8px!important}
[data-sk="side-subitem"]{
  margin-bottom:4px!important;border-radius:var(--sk-r)!important;
  padding-left:10px!important;padding-right:10px!important;
}
[data-sk="side-subitem"] > *{padding-left:0!important;padding-right:0!important}
/* the app paints an inner block with the card colour, which hid the row colour */
[data-sk="side-row"] > *{background-color:transparent!important}

/* ── event page markets: copied pixel-for-pixel off the reference ─────────
   A column scan of the reference (Screenshot 2026-08-13 224344) reads:
       CARD:32  BAR:38  CARD:11  GAP:7
   i.e. a 32px title band, a 38px outcome bar, 11px of card below it, and a 7px
   gap to the next market. Collapsed markets measure CARD:36-43 + GAP:7
   (Screenshot_17). These rules reproduce exactly that rhythm. */
/* /sb2 is the reference for this page: every market a 43px row, 6px apart,
   opened on demand. The bottom padding only exists when a market is open. */
[data-sk="mrow"]{
  border-radius:var(--sk-r)!important;
  padding:0 12px!important;
  margin:0 0 6px!important;
  min-height:43px!important;
}
[data-sk="barrow"]:last-child{margin-bottom:11px!important}
/* every child of the markets column gets the same gap, including markets the
   card detection did not tag — that is what made some gaps disappear */
[data-sk="mkts"] > *{margin-bottom:6px!important}
[data-sk="mrow-hd"],[data-sk="mrow"] > *:first-child{
  min-height:43px!important;padding:0!important;margin:0!important;
}
/* one row of outcome bars: equal columns, 38px tall, 7px gutters, no wrapping */
[data-sk="barrow"]{
  display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;
  padding:0!important;margin:0 0 7px!important;gap:7px!important;min-height:38px!important;
}
[data-sk="barrow"]:last-child{margin-bottom:0!important}
/* the nested wrappers the app puts between the card and the bar row */
[data-sk="barwrap"]{padding:0!important;margin:0!important;min-height:0!important}
[data-sk="barrow"] > *{flex:1 1 0!important;min-width:0!important;margin:0!important}
[data-sk="bar"]{border-radius:var(--sk-r)!important;min-height:38px!important}


/* ── betslip ──────────────────────────────────────────────────────────── */
[data-sk="slip"]{border-radius:var(--sk-r)!important}
[data-sk="slip-sel"]{background:#12141b!important;border-radius:8px!important;margin-bottom:8px!important}

/* nothing below 900px: the app's mobile layout stays untouched */
@media (max-width:900px){
  [data-sk="row"]{margin-bottom:4px;padding:8px!important}
}

/* ── odds movement: sb2's corner triangle ─────────────────────────────────
   odds-live.js already detects the change and tags the cell .odds-chg-up /
   .odds-chg-dn (its own look is a tinted cell plus the struck-through old
   price). We keep its detection and swap the look for the reference's small
   corner triangle: green top-right when the price drifts out, red bottom-left
   when it shortens. */
[data-sk="odd"].odds-chg-up,
[data-sk="odd"].odds-chg-dn{
  background-color:var(--sk-cell)!important;
  box-shadow:none!important;
}
[data-sk="odd"].odds-chg-up::after,
[data-sk="odd"].odds-chg-dn::after{
  content:"";position:absolute;width:0;height:0;border-style:solid;pointer-events:none;
}
[data-sk="odd"].odds-chg-up::after{
  top:0;right:0;border-width:0 9px 9px 0;border-color:transparent #17d47b transparent transparent;
}
[data-sk="odd"].odds-chg-dn::after{
  bottom:0;left:0;border-width:9px 0 0 9px;border-color:transparent transparent transparent #ff4d4f;
}
/* the old price overlay is not part of the reference look */
[data-sk="odd"] .odds-old{display:none!important}

/* ── injected sb2 widgets ─────────────────────────────────────────────────
   sb2.css declares its palette on #sb2, so the injected block needs the same
   variables. They point at the operator's theme vars (published by
   /api/theme.css) with sb2's own values as the fallback, so the widgets follow
   whatever palette is selected instead of hard-coding one. */
#sk-widgets{
  --pg:var(--sb-bg,#070707);
  --card:var(--sb-card,#1a1c26);
  --card2:var(--sb-line,#12141b);
  --cell:var(--sb-odds,#38404f);
  --acc:var(--sb-accent,#e8ff00);
  --ink:#f2f5fa;
  --ink2:#cfd5e2;
  --mut:#8b93a7;
  --line:rgba(255,255,255,.07);
  --r:10px;--ph:38px;--gv:11px;--gh:7px;--pw:104px;--w1:111px;--w2:111px;--w3:111px;
  padding:0!important;max-width:none!important;margin:0 0 12px!important;
  font:600 13px/1.35 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
}
#sk-widgets *{box-sizing:border-box}
#sk-widgets button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#sk-widgets .sb2-hero{height:260px}
#sk-widgets .sb2-pill{height:var(--ph);border-radius:var(--r);background:var(--cell);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 6px;overflow:hidden}
#sk-widgets .sb2-pill.rev{flex-direction:column-reverse}
#sk-widgets .sb2-pill .v{font-size:13px;font-weight:800;line-height:1.05}
#sk-widgets .sb2-pill .l{font-size:10px;font-weight:600;color:#aeb6c6;line-height:1.05;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sk-widgets .sb2-sec h2{color:var(--ink)}

/* ── widget removed at the operator's request (2026-08-14) ────────────────
   .mui-style-ltr-9bsrgn — three blocks on /sportsbook share this class:
     • the bonus strip  ("Bonus de Premier Dépôt / Cashback Hebdomadaire …")
     • the match strip  (duplicates the injected "Top du jour" cards)
     • the sport tiles row
   All three are hidden. To keep one, narrow this rule with :nth-of-type or
   drop it entirely — nothing else depends on it. The class is generated by the
   React build, so re-check it if the bundle is ever rebuilt. */
.mui-style-ltr-9bsrgn{display:none!important}

/* ── line slider on multi-line markets (Total, Handicap …) ────────────────
   Reproduces the reference control: the chosen line sits in a bubble above a
   thin track, the filled part in the primary colour. */
.sk-slider{position:relative;margin:12px 2px 2px;padding-top:20px}
.sk-slider .val{
  position:absolute;top:0;transform:translateX(-50%);
  font-size:12px;font-weight:800;color:var(--ink,#f2f5fa);white-space:nowrap;pointer-events:none;
}
.sk-slider input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;outline:none;
  background:linear-gradient(to right,
    var(--sb-accent,#e8ff00) 0 var(--sk-fill,50%),
    var(--sb-odds,#38404f) var(--sk-fill,50%) 100%);
  cursor:pointer;margin:0;
}
.sk-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--sb-accent,#e8ff00);border:0;cursor:grab;
  box-shadow:0 0 0 3px rgba(0,0,0,.35);
}
.sk-slider input[type="range"]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--sb-accent,#e8ff00);border:0;cursor:grab;
}
.sk-slider input[type="range"]::-moz-range-track{background:transparent}