/* ============================================================
   DailySportPick - centrale stylesheet
   Fase 1: design-tokens + sticky header (2 standen, grow-on-scroll).
   Fase 2: component-harmonisatie (kaarten/boxen/tabellen op zelfde
           navy-schaduw + radii als header/bet-slip).
   Nav gescoped op #ast-desktop-header. Reversibel via dsp-styles.php.
   ============================================================ */

:root{
  --dsp-navy:#16213e;
  --dsp-navy-2:#1e2d50;
  --dsp-accent:#e94560;
  --dsp-bg:#f0f2f5;
  --dsp-ink:#16213e;
  --dsp-muted:#6b7280;
  --dsp-line:#e6e9ef;
  --dsp-radius:10px;
  --dsp-radius-lg:16px;
  --dsp-shadow-sm:0 1px 3px rgba(22,33,62,.07);
  --dsp-shadow-md:0 6px 20px rgba(22,33,62,.10);
  --dsp-shadow-card:0 6px 20px -8px rgba(22,33,62,.16);
  --dsp-header-h:60px;
}

html{ scroll-padding-top:72px; }

/* ---------- Sticky header ---------- */
#masthead.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:#fff !important;
  border-top:0 !important;
  border-bottom:1px solid var(--dsp-line) !important;
  box-shadow:0 4px 10px -6px rgba(22,33,62,.15);
}

#masthead .ast-main-header-wrap{ border-top:0 !important; }

#masthead .ast-primary-header-bar{
  background:#fff !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
  min-height:82px !important;
  border-top:0 !important;
  border-bottom:0 !important;
  transition:min-height .22s ease, padding .22s ease;
}
#masthead.dsp-scrolled .ast-primary-header-bar{
  padding-top:5px !important;
  padding-bottom:5px !important;
  min-height:var(--dsp-header-h) !important;
}

#masthead .custom-logo{
  max-height:78px !important;
  width:auto !important;
  transition:max-height .22s ease;
}
#masthead:not(.dsp-scrolled) .custom-logo{
  transform:translateY(-5px);
}
#masthead.dsp-scrolled .custom-logo{
  max-height:50px !important;
  transform:none;
}

/* ---------- Desktop nav links (alleen desktop) ---------- */
#ast-desktop-header .main-header-menu .menu-item > .menu-link{
  color:var(--dsp-ink) !important;
  font-weight:600 !important;
  font-size:.95rem;
  padding-left:13px !important;
  padding-right:13px !important;
  margin:0 3px;
  border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
#ast-desktop-header .main-header-menu .menu-item > .menu-link:hover,
#ast-desktop-header .main-header-menu .menu-item.current-menu-item > .menu-link{
  color:var(--dsp-accent) !important;
  background:rgba(233,69,96,.08);
}

/* desktop dropdown = lichte kaart */
#ast-desktop-header .main-header-menu .sub-menu{
  background:#fff !important;
  border:1px solid var(--dsp-line) !important;
  border-radius:var(--dsp-radius) !important;
  box-shadow:var(--dsp-shadow-md) !important;
  overflow:hidden;
  padding:6px !important;
}
#ast-desktop-header .main-header-menu .sub-menu .menu-item > .menu-link{
  color:var(--dsp-ink) !important;
  background:transparent !important;
  font-weight:500 !important;
  margin:0 !important;
  border-radius:6px !important;
}
#ast-desktop-header .main-header-menu .sub-menu .menu-item > .menu-link:hover{
  color:var(--dsp-accent) !important;
  background:rgba(233,69,96,.08) !important;
}

/* ============ Fase 2: component-harmonisatie ============ */
/* zelfde zachte navy-schaduw als header/bet-slip i.p.v. zwart-getint */
body .bt-tip-card{
  box-shadow:var(--dsp-shadow-card) !important;
}
body .bt-stat-box{
  border-radius:var(--dsp-radius) !important;
  box-shadow:0 6px 20px -8px rgba(22,33,62,.22) !important;
}
body .bt-archive-table{
  border-radius:var(--dsp-radius) !important;
  box-shadow:var(--dsp-shadow-card) !important;
}

/* ---- Fase 2b: kaart-detail ---- */
/* gouden bovenrand (pending) -> brand-accent, geen orphan-kleur meer */
body .bt-pending{ border-top-color:var(--dsp-accent) !important; }
/* navy league-balk afronden (was rechthoekige stijlbreuk) */
body .bt-tip-header{ border-radius:var(--dsp-radius) !important; }
/* kaart-buitenhoek op token-radius (was 12px) */
body .bt-tip-card{ border-radius:var(--dsp-radius) !important; }
/* heatmap in een zacht afgerond kader i.p.v. kale rechthoek */
body .bt-tip-card [style*="overflow-x:auto"]{
  background:#f8fafc !important;
  border-radius:var(--dsp-radius) !important;
  padding:8px !important;
}
/* heatmap als afgeronde tegels i.p.v. hoekige grid */
body .bt-tip-card [style*="overflow-x:auto"] table{
  border-collapse:separate !important;
  border-spacing:3px !important;
}
body .bt-tip-card [style*="overflow-x:auto"] table td{
  border-radius:4px !important;
}
/* heatmap: Astra tabel-randen/label-achtergrond weg, alleen de tegels tonen */
body .bt-tip-card [style*="overflow-x:auto"] table,
body .bt-tip-card [style*="overflow-x:auto"] table th,
body .bt-tip-card [style*="overflow-x:auto"] table td{
  border:0 !important;
}
body .bt-tip-card [style*="overflow-x:auto"] table th,
body .bt-tip-card [style*="overflow-x:auto"] table td:first-child{
  background:transparent !important;
}
/* pending-badge: geelbruin -> neutrale slate (op-palet) */
body .bt-pending-badge{
  background:#e2e8f0 !important;
  color:#334155 !important;
}

/* ---- Fase 2c: parlay/value/market-prob tabellen ---- */
/* rij-hover gelijk aan market-prob tabel (was geel #fef9c3) */
body .dsp-pickrow:hover{ background:#f1f5f9 !important; }
/* laatste rij geen onderrand -> schone afgeronde onderkant, geen leeg strookje */
body .dsp-pickrow:last-child td{ border-bottom:0 !important; }
/* zachte navy-schaduw zoals de kaarten op alle tabel-wrappers */
body div[style*="border:1px solid #e8edf1"],
body .mp-wrap,
body .bt-results-table-wrap{
  box-shadow:var(--dsp-shadow-card) !important;
}

/* navy footer-cap (spiegelt de navy header) -> afgeronde onderkant zichtbaar */
body div:has(> table .dsp-pickrow)::after,
body .mp-wrap::after{
  content:"";
  display:block;
  height:12px;
  background:var(--dsp-navy);
}
/* schaduw robuust op alle pick-tabellen (dekt ook value-tabel) */
body div:has(> table .dsp-pickrow){
  box-shadow:var(--dsp-shadow-card) !important;
}

/* grijze gap onder de laatste rij ook navy (wrapper-bg) */
body div:has(> table .dsp-pickrow),
body .mp-wrap{
  background:var(--dsp-navy) !important;
}

/* ---- Fase 2d: market-probability tabel ---- */
/* font gelijk aan pick-tabellen (.85em) */
body .mp-table{ font-size:.85em !important; }
/* grotere filter-knoppen (Expand visible / Reset) */
body .mp-filter .mp-filter-reset{ padding:10px 20px !important; font-size:.9em !important; }

/* market-prob: th-titels gelijk aan pick-tabellen (= tabel-basis) */
body .mp-table th{ font-size:1em !important; }
/* tijd-regel gelijk aan pick-tabellen (.78em) */
body .dsp-wcmp-time{ font-size:.78em !important; }
/* filter-knoppen even hoog als de invoervelden */
body .mp-filter .mp-filter-reset{ padding:6px 18px !important; font-size:.95em !important; }

/* === Fase 2e: market-prob filterknoppen als iconen (smaller op mobiel) === */
body .mp-filter .mp-filter-reset.mp-icon-btn{align-self:flex-end;display:inline-flex !important;align-items:center;justify-content:center;width:38px;height:38px;padding:0 !important;border-radius:6px !important;line-height:0}
body .mp-filter .mp-filter-reset.mp-icon-btn svg{display:block;width:18px;height:18px}
body .mp-filter .mp-toggle-expand.mp-icon-btn svg{transition:transform .2s ease}
body .mp-filter .mp-toggle-expand.mp-icon-btn.mp-expanded svg{transform:rotate(180deg)}

/* === Fase 2f: scroll-to-top knop ronde hoeken (gelijk aan Bet slip) === */
#ast-scroll-top{border-radius:var(--dsp-radius) !important}

/* === Fase 2g: meer ruimte onder e-mail/subscribe blok op homepage === */
body .dsp-email-wrap{margin-bottom:48px !important}

/* === Fase 2h: parlay calc-tabs (I want to bet/win) zonder rand; niet-actieve knop licht groen ipv wit === */
body .bt-calc-tabs .bt-tab{flex:1 !important;padding:8px 18px !important;font-size:14px !important;font-weight:600 !important;cursor:pointer;transition:all .2s;border:none !important;border-radius:10px !important;background:#e6f7ed !important;color:#15803d !important}
body .bt-calc-tabs .bt-tab.active{background:#2ecc71 !important;color:#fff !important}

/* === Fase 2i: stats-periode als kleine knop-link naar /statistics/ (kopje boven de cijfers) === */
body .bt-stats-period{display:inline-flex !important;align-items:center;gap:6px;margin:14px auto 0 !important;border:none !important;background:var(--dsp-navy,#16213e) !important;color:#fff !important;border-radius:8px !important;padding:7px 14px !important;font-weight:600 !important;font-size:.82em !important;text-decoration:none !important;box-shadow:var(--dsp-shadow-sm) !important}
body .bt-stats-period:hover{background:#1f2d52 !important;color:#fff !important}

/* === Fase 2j: stats H2-kop boven de cijfers === */
body .bt-stats-title{text-align:center;color:var(--dsp-navy,#16213e) !important;font-weight:700;font-size:1.6rem;margin:8px 0 6px;line-height:1.2}

/* === Fase 2l: stats-ondertitel onder de H2 === */
body .bt-stats-sub{text-align:center;color:var(--dsp-muted,#6b7280);font-size:.92em;margin:0 0 18px;line-height:1.4}