/* Betslip: one clear white slip, docked in the same place on every page.
   Desktop (≥1051px): fixed panel on the right under the header, always visible.
   Smaller screens: the same white slip opens as a sheet from a bottom bar that sits in the same place on every page. */
:root{--slip-w:344px;--slip-gap:16px;--slip-top:78px;--slip-ink:#0b0d10;--slip-sub:#5b636c;--slip-line:#e4e7eb;--slip-soft:#f4f5f7;--slip-red:#e0001b}

/* ---------- The white slip (all sizes) ---------- */
body .slip-rail .slip-inner{position:relative;background:#fff!important;color:var(--slip-ink)!important;border:0!important;border-radius:14px!important;padding:20px 18px 16px!important;box-shadow:0 22px 60px #000c,0 0 0 1px #ffffff1f!important;font-family:Manrope,'Segoe UI',sans-serif;overflow:hidden}
body .slip-rail .slip-inner:before{content:'';position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#ff1a35,#c3001a)}
body .slip-rail .slip-inner :is(p,span,small,label,strong,b,h2,h3,li,div){color:inherit}
body .slip-rail .slip-title{display:flex;align-items:center;justify-content:space-between;background:transparent!important;color:var(--slip-ink)!important;font:800 22px/1.1 Manrope,'Segoe UI',sans-serif!important;padding:0 0 12px!important;margin:0 0 10px!important;border-bottom:1px solid var(--slip-line)!important;position:static!important}
body .slip-rail .slip-title .bubble{background:var(--slip-red)!important;color:#fff!important;border-radius:999px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;margin-left:8px;padding:0 7px;box-shadow:none!important}
body .slip-rail .slip-close{color:var(--slip-ink)!important;background:var(--slip-soft)!important;border:0!important;border-radius:50%;width:36px;height:36px}
body .slip-rail .slip-navigation{color:var(--slip-sub)!important;font-size:12px!important;margin:0 0 10px!important}
body .slip-rail .slip-navigation a,body .slip-rail .legal-note a,body .slip-rail .slip-help a{color:var(--slip-ink)!important;font-weight:700;text-decoration-color:var(--slip-red)}
body .slip-rail .slip-kind{display:flex;justify-content:space-between;color:var(--slip-sub)!important;font:800 11px Manrope,sans-serif!important;letter-spacing:.08em;margin:6px 0 10px!important}
body .slip-rail .slip-kind span:first-child{color:var(--slip-red)!important}

/* Entries */
body .slip-rail .selection{background:var(--slip-soft)!important;border:1px solid var(--slip-line)!important;color:var(--slip-ink)!important;border-radius:10px!important;box-shadow:none!important;margin:0 0 10px!important}
body .slip-rail .selection.team-selection{border-left:4px solid var(--team-primary,#c9ced4)!important}
body .slip-rail .sl-entry-id strong,body .slip-rail .sl-entry-market>b{color:var(--slip-ink)!important}
body .slip-rail .sl-entry-matchup,body .slip-rail .sl-entry-market>span:first-child{color:var(--slip-sub)!important}
body .slip-rail .sl-entry-market{border-top-color:var(--slip-line)!important}
body .slip-rail .sl-entry .accepted-price{background:var(--slip-ink)!important;color:#fff!important}
body .slip-rail .sl-entry.is-moved .accepted-price{background:#ffcf5a!important;color:var(--slip-ink)!important}
body .slip-rail .sl-entry.is-closed .accepted-price{background:#d5d9de!important;color:#4d555d!important}
body .slip-rail .selection .remove{color:#6b737c!important;background:transparent!important;border:0!important}
body .slip-rail .selection .remove:hover{color:var(--slip-ink)!important;background:#e7e9ec!important}
body .slip-rail .slip-note{background:#fff4e2!important;border:1px solid #ffd28c!important;color:#6b3d00!important;border-radius:8px;padding:8px 10px;font-size:12px}

/* Stake, totals, actions */
body .slip-rail .stake-wrap{color:#3b434b!important;font-weight:700}
body .slip-rail .stake-wrap span{color:#6b737c!important}
body .slip-rail .stake-wrap input,body .slip-rail input{background:#fff!important;border:1.5px solid #c4c9cf!important;color:var(--slip-ink)!important;box-shadow:none!important;border-radius:8px!important;font-weight:800}
body .slip-rail input:focus{border-color:var(--slip-red)!important;outline:3px solid #ff1a3526!important}
body .slip-rail input::placeholder{color:#9aa1a9}
body .slip-rail .quick-stakes button{background:#fff!important;border:1px solid #d3d8dd!important;color:var(--slip-ink)!important;border-radius:8px!important;font-weight:800;box-shadow:none!important}
body .slip-rail .quick-stakes button:hover{border-color:var(--slip-ink)!important}
body .slip-rail .summary{color:var(--slip-sub)!important;border-color:var(--slip-line)!important}
body .slip-rail .summary>div{border-color:var(--slip-line)!important}
body .slip-rail .summary b{color:var(--slip-ink)!important}
body .slip-rail .summary .total,body .slip-rail .summary .total span{color:var(--slip-ink)!important;font-weight:800}
body .slip-rail .summary .total b{font-size:20px!important}
body .slip-rail .primary:disabled{opacity:.45;filter:grayscale(.2)}
body .slip-rail .secondary{background:#fff!important;border:1px solid #c4c9cf!important;color:var(--slip-ink)!important}
body .slip-rail .legal-note{color:#6b737c!important}
body .slip-rail .slip-empty{color:var(--slip-sub)!important;text-align:center;padding:18px 6px}
body .slip-rail .slip-empty .icon{color:#b9bfc6!important;stroke:#b9bfc6}
body .slip-rail .slip-empty h3{color:var(--slip-ink)!important}
body .slip-rail .slip-help{border-color:var(--slip-line)!important;color:var(--slip-sub)!important}
body .slip-rail .slip-help h3{color:var(--slip-ink)!important}
body .slip-rail .panel{background:var(--slip-soft)!important;border:1px solid var(--slip-line)!important;color:var(--slip-ink)!important}
body .slip-rail .text-link{color:var(--slip-ink)!important}

/* ---------- Desktop: docked in the same spot on every page ---------- */
@media (min-width:1051px){
  #app>.demo-strip,#app>.category-bar,#app>.layout{margin-right:calc(var(--slip-w) + var(--slip-gap)*2)!important}
  #app>.layout>.main{max-width:min(1150px,100%)} /* the main column never grows past its grid track under the docked betslip (it was sized by the 820px game page: audit F1-A-01) */
  body.classic-home .layout,body.props-room .layout{grid-template-columns:172px minmax(0,1fr)!important}
  body .slip-rail,body .slip-rail.open,body .slip-rail:not(.open){display:block!important;position:fixed!important;inset:var(--slip-top) var(--slip-gap) var(--slip-gap) auto!important;width:var(--slip-w)!important;max-width:none!important;height:auto!important;max-height:none!important;z-index:35!important;overflow:auto!important;overscroll-behavior:contain;padding:0!important;background:transparent!important;border:0!important;border-radius:14px!important;box-shadow:none!important;scrollbar-width:thin}
  body .slip-rail .slip-inner{position:relative!important;top:auto!important}
  body .slip-rail .supplied-ticket-promo{display:none!important}
  body .slip-rail .slip-close,body .slip-rail .keep-browsing{display:none!important}
  .slip-backdrop,.games-slip-dock,.mobile-slip-bar{display:none!important}
  body .games-experience .main,body.games-experience .main{padding-right:24px!important}
  .model-games-mascot{display:none!important}
}
/* The docked rail leaves the main column under ~800px up to 1365px: the EVEN+ page stacks its art above the line there
   instead of squeezing its price buttons out under the rail (its own 820px breakpoint assumes no rail). */
@media (min-width:1051px) and (max-width:1365px){body .ep-page{grid-template-columns:minmax(0,1fr)}body .ep-art{max-width:360px;width:100%}}

/* ---------- Smaller screens: same white slip, opened from one bottom bar on every page ---------- */
@media (max-width:1050px){
  .games-slip-dock{display:none!important}
  body .mobile-slip-bar{display:flex!important;position:fixed!important;left:16px!important;right:16px!important;bottom:calc(76px + env(safe-area-inset-bottom))!important;z-index:45!important;align-items:center;justify-content:space-between;padding:14px 18px!important;border-radius:12px!important;background:#fff!important;color:var(--slip-ink)!important;border:0!important;box-shadow:0 10px 30px #000b,0 0 0 1px #ffffff22!important;font:800 15px Manrope,'Segoe UI',sans-serif!important}
  body .mobile-slip-bar span:first-child{color:var(--slip-ink)!important}
  body .mobile-slip-bar span:last-child{color:var(--slip-red)!important;display:inline-flex;gap:6px;align-items:center}
  body .mobile-slip-bar .icon{stroke:var(--slip-red)}
  body .slip-rail.open{background:#fff!important;padding:12px!important}
  body .slip-rail.open .slip-inner{box-shadow:none!important;border-radius:0!important;padding:16px 8px 24px!important}
}
@media (min-width:701px) and (max-width:1050px){body .mobile-slip-bar{left:auto!important;width:340px;bottom:20px!important}}

/* Live picks (live-slip.js): one quiet line under the pick — live chip, confirmation time, max stake, top price */
body .slip-rail .sl-live-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 12px 10px;color:var(--slip-sub)!important;font:700 11.5px/1.3 Manrope,'Segoe UI',sans-serif}
body .slip-rail .sl-live-note>span{white-space:nowrap}
body .slip-rail .sl-live-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:#ffe8ea;color:#a3001a!important;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px}
body .slip-rail .sl-live-chip i{width:6px;height:6px;border-radius:50%;background:var(--slip-red);animation:sl-live-pulse 1.4s ease-in-out infinite}
body .slip-rail .sl-top-chip{padding:2px 8px;border-radius:999px;background:#e3f6ea;color:#0b6b3a!important;font-weight:800;font-size:10.5px;letter-spacing:.03em}
body .slip-rail .sl-synced{color:#1d5fbf!important}
body .slip-rail .sl-live-note.is-paused{display:block;background:#fff4e2!important;border:1px solid #ffd28c!important;color:#6b3d00!important;border-radius:8px;padding:8px 10px;font-size:12px}
body .slip-rail .live-progress{display:block;width:100%;height:6px;margin:10px 0 4px;border:0;border-radius:999px;overflow:hidden;background:var(--slip-line);color:var(--slip-red);appearance:none;-webkit-appearance:none}
body .slip-rail .live-progress::-webkit-progress-bar{background:var(--slip-line);border-radius:999px}
body .slip-rail .live-progress::-webkit-progress-value{background:linear-gradient(90deg,#ff1a35,#c3001a);border-radius:999px;transition:width .9s linear}
body .slip-rail .live-progress::-moz-progress-bar{background:linear-gradient(90deg,#ff1a35,#c3001a);border-radius:999px}
@keyframes sl-live-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){body .slip-rail .sl-live-chip i{animation:none}body .slip-rail .live-progress::-webkit-progress-value{transition:none}}
body .slip-rail .sl-pref{display:inline;margin-left:4px;padding:0;min-height:0;font:inherit;font-weight:800;color:#6b3d00!important;text-decoration:underline;text-underline-offset:2px;background:none!important;border:0!important}

/* Accept odds changes (live picks only) */
body .slip-rail .slip-pt.pt-pending{background:var(--slip-soft);color:var(--slip-sub)} /* SGP still pricing: no playthrough tier promised yet (P-31) */
body .slip-rail .sl-entry-game{align-items:center;justify-content:center;border-radius:8px;background:var(--slip-soft);color:var(--slip-sub)} /* a pick on the whole game (total, draw): neutral game mark (P-33) */
body .slip-rail .sl-entry-game svg{width:18px;height:18px}
body .slip-rail .sl-live-wait{display:flex;align-items:center;gap:6px;margin:10px 0 0;color:var(--slip-sub)!important;font:700 12px/1.3 Manrope,'Segoe UI',sans-serif} /* the ticket's live wait (P-25) */
body .slip-rail .sl-any{display:flex;gap:10px;align-items:flex-start;margin:10px 0 4px;padding:10px 12px;border:1px solid var(--slip-line,rgba(127,127,127,.25));border-radius:10px;cursor:pointer;font:600 12.5px/1.35 Manrope,'Segoe UI',sans-serif}
body .slip-rail .sl-any input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:#e01e2b}
body .slip-rail .sl-any b{display:block;font-weight:800}
body .slip-rail .sl-any small{display:block;margin-top:2px;color:var(--slip-sub);font-weight:600;font-size:11.5px}
/* same game parlay price row */
.sgp-odds{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 2px;padding:10px 12px;border-radius:10px;background:#fff4f5;border:1px solid #f5c6cc;font:700 13px Manrope,sans-serif;color:#7a1220}
.sgp-odds b{font:900 18px Manrope,sans-serif;color:#c8102e}
.sgp-odds.is-off{background:#f4f5f7;border-color:#e2e5ea;color:#4b535e;font-weight:600}
/* Cross-review F1: SB1's location explainer (public/geo-check.js, connected mode). On phones it is a compact chip over the
   bottom of the page (the lead line and two buttons) instead of a 139px bar above the top bar, so the first prices stay in
   the first screen; the rest of the sentence stays for screen readers. It sits above the betslip bar when that shows.
   Desktop keeps the full bar; geo-check.js moves the docked rail down with the top bar while the bar is above it. */
@media (max-width:700px){
  body .ver-banner.geo-ask{position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:46;flex-wrap:nowrap;justify-content:flex-start;gap:8px;padding:7px 7px 7px 14px;border-radius:12px;box-shadow:0 10px 30px #000b;font-size:13px;line-height:1.25}
  body .ver-banner.geo-ask>span{flex:1 1 auto;min-width:0}
  body .ver-banner.geo-ask .geo-why{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  body .ver-banner.geo-ask button{flex:0 0 auto;min-height:32px;padding:6px 11px;font-size:13px;white-space:nowrap}
  body:not(.betslip-empty) .ver-banner.geo-ask{bottom:calc(140px + env(safe-area-inset-bottom))}
  /* room under the chip, so the last control and a focused one can scroll clear of it (as ux-scope.css does for the slip bar) */
  html:has(.ver-banner.geo-ask){scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  html:has(body:not(.betslip-empty) .ver-banner.geo-ask){scroll-padding-bottom:calc(200px + env(safe-area-inset-bottom))}
  body:has(.ver-banner.geo-ask) #app{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  body:not(.betslip-empty):has(.ver-banner.geo-ask) #app{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
}