/* OverEdge — Sportsbook Pro theme
   - Dark, glossy header
   - Clean, sportsbook-style cards
   - Bold team names / compact spacing
   - Works with existing HTML (Free Picks, Pro, Pricing, FAQ, Account)
*/

/* --- Font (optional, safe fallback) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* ---------- CSS Variables ---------- */
:root{
  /* Base */
  --bg: #ffffff;
  --text: #0f172a;        /* slate-900 */
  --muted: #5b6b82;       /* sporty slate */
  --border: #e6e8ee;
  --card: #ffffff;

  /* Brand */
  --brand: #2563eb;       /* blue-600 */
  --brand-600: #1d4ed8;   /* blue-700 */
  --accent: #16a34a;      /* green-600 */
  --warn: #b45309;        /* amber-700 */

  /* Header (dark) */
  --header-bg: linear-gradient(180deg, #0b1223 0%, #101b33 100%);
  --header-text: #e7eefc;
  --header-muted: #b9c4d9;
  --header-chip: rgba(255,255,255,.08);
  --header-hover: rgba(255,255,255,.06);

  /* Elevation */
  --shadow: 0 1px 2px rgba(12,18,32,.06), 0 12px 38px rgba(12,18,32,.10);
}

/* ---------- Reset / Base ---------- */
*{ box-sizing: border-box; }
html,body{ height: 100%; }
main{ display:block; }

body{
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width: 100%; display: block; }
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }
p{ margin: .5rem 0 1rem; }
h1,h2,h3{ margin: 0 0 .5rem; line-height: 1.2; letter-spacing: .1px; }
h1{ font-weight: 800; font-size: clamp(1.85rem, 2.2vw, 2.5rem); }
h2{ font-weight: 800; font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
h3{ font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: saturate(160%) blur(8px);
}
.nav{
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  color: var(--header-text);
}

/* Brand logo (image + wordmark) */
.logo.brand{
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--header-text);
}
.logo.brand .brand-img{
  height: 28px; width: auto; display: block;
}
@media (min-width: 700px){
  .logo.brand .brand-img{ height: 32px; }
}
.logo.brand:hover{ text-decoration: none; opacity: .95; }

/* Nav links */
.links{ display: flex; gap: .9rem; align-items: center; }
.links a{
  color: var(--header-text);
  opacity: .85;
  padding: .35rem .55rem;
  border-radius: .5rem;
  text-decoration: none;
}
.links a:hover{
  background: var(--header-hover);
  opacity: 1;
}
.links a[aria-current="page"]{
  position: relative;
  color: #dff8e7;
  background: transparent;
  border: 0;
}
.links a[aria-current="page"]::after{
  content:"";
  position:absolute; left:.45rem; right:.45rem; bottom:-.4rem;
  height:3px; border-radius:3px;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

/* Auth chip inside header */
.badge.pill,
#nav-plan.badge{
  background: var(--header-chip);
  color: var(--header-text);
  border: 1px solid rgba(255,255,255,.08);
}

/* ---------- Layout ---------- */
.section{
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}
.hero{
  max-width: 1100px; margin: 0 auto;
  padding: 2.1rem 1rem 1.1rem;
  text-align: center;
}
.hero p{ max-width: 800px; margin: .5rem auto 0; }

/* ---------- Cards ---------- */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .62rem 1rem;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  color: #fff; border: 0; border-radius: 12px;
  font-weight: 700; letter-spacing:.2px;
  transition: transform .08s ease, box-shadow .2s ease, filter .15s ease;
  box-shadow: 0 10px 22px rgba(29,78,216,.22);
}
.btn:hover{ text-decoration: none; transform: translateY(-1px); filter: brightness(1.03); }
.btn:active{ transform: translateY(0); }
.btn.secondary{
  background: #0f172a; color: #e6edf7;
  border: 1px solid #1e293b; box-shadow: none;
}
.btn.small{ padding: .45rem .7rem; border-radius: 10px; font-size: .9rem; }

/* ---------- Utilities ---------- */
.muted{ color: var(--muted); }

/* (added) Small muted helper used in multiple pages */
.muted-sm{
  color: var(--muted);
  opacity: .85;
  font-size: .95rem;
}

.badge{
  display: inline-block; padding: .22rem .55rem;
  border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: #f1f5f9; color: var(--text);
}
hr{ border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

/* ---------- Pricing grid ---------- */
.plans{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 1rem;
}
.plan .price{
  font-size: 1.7rem; font-weight: 800; margin: .25rem 0 .5rem;
}
.plan ul{ padding-left: 1.1rem; margin: .25rem 0 .5rem; }
.plan li{ margin: .25rem 0; }

/* ---------- Details / FAQ ---------- */
details{ background: #fff; }
details > summary{
  list-style: none; cursor: pointer;
  outline: none; user-select: none;
}
details > summary::-webkit-details-marker{ display:none; }
details[open]{ box-shadow: var(--shadow); }

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  color: var(--muted);
  font-size: .95rem;
  padding: 1.25rem 1rem;
  text-align: center;
}
.site-footer .contact{
  margin-top: .5rem;
  font-size: .9rem;
  opacity: .85;
}
.site-footer .contact a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,0,0,.2);
}
.site-footer .contact a:hover{
  border-bottom-color: currentColor;
  opacity: 1;
}

/* ---------- Responsive tweaks ---------- */
@media (min-width: 700px){
  .hero{ padding: 3rem 1rem 1.5rem; }
}

/* ---------- Odds / Confidence pills ---------- */
.badge.odds{
  background:#eef2ff;
  color:#1e3a8a;
  border:1px solid #dbeafe;
  font-weight:800;
  padding:.18rem .55rem;
  border-radius:999px;
}
.pill.conf{
  background:#e8f8ee;
  color:#166534;
  border:1px solid #cbead8;
  font-weight:800;
}

/* (Optional) simple bar if you add <div class="conf-bar" style="--pct:67"></div> */
.conf-bar{
  --pct: 70;
  height: 6px; border-radius: 999px; overflow: hidden;
  background:#eef2f7; margin-top:.45rem;
  position: relative;
}
.conf-bar::after{
  content:"";
  position:absolute; inset:0; width: calc(var(--pct) * 1%); border-radius:999px;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 50%, #0ea5e9 100%);
}

/* ---------- Free Picks specific ---------- */
.reasoning{ white-space: pre-wrap; }
.league-line{ font-weight:800; }

/* ---------- Generic team emphasis (used in Pro grouped rows) ---------- */
.teams{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.teams img.logo{ width:18px; height:18px; object-fit:contain; }
.teams .team{
  font-weight:900;
  letter-spacing:.02em;
  font-size:1.02rem;
  color:var(--text);
  line-height:1.25;
}
.teams .sep{ opacity:.55; padding:0 .15rem; }

/* Accessible hidden text used beside the logo */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ===== Pro Board (grouped) — collapsible leagues + checkbox slip ===== */

/* Collapsible leagues (default collapsed) */
details.comp-acc {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  margin: 10px 0;
  border: 1px solid var(--border);
}
details.comp-acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.comp-acc > summary::-webkit-details-marker { display: none; }
details.comp-acc > summary::after {
  content: "▸";
  margin-left: auto;
  opacity: .6;
}
details.comp-acc[open] > summary::after { content: "▾"; }
.comp-count { opacity: .65; font-weight: 600; }

/* Teams row (inline) — ensure strong inline rendering inside pro board */
.pro-board .teams { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.pro-board .teams img.logo { width:18px; height:18px; object-fit:contain; }
.pro-board .teams .team { font-weight:900; letter-spacing:.02em; font-size:1.03rem; color:#0f172a; line-height:1.25; }
.pro-board .teams .sep { opacity:.55; padding:0 .15rem; }

/* Fixture row — 3 columns: [teams] [meta] [checkbox] */
.pro-board .fixture-row{
  display: grid;
  grid-template-columns: 1fr auto 26px;
  align-items: center;
  gap: .75rem;
  padding: .7rem .9rem;
  margin: .35rem 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.pro-board .fixture-row:hover{ box-shadow: 0 6px 22px rgba(10,15,30,.08); }

.pro-board .fixture-meta{
  text-align: right;
  min-width: 280px;
}
.pro-board .fixture-pick{ display:flex; justify-content:flex-end; }

/* Checkboxes for bet slip */
.pick-checkbox{
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Badges / chips */
.badge-pick{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.22rem .6rem; border-radius:999px;
  font-weight:800; letter-spacing:.02em;
  background:#eff6ff; border:1px solid #cfe4ff; color:#1d4ed8;
}
.badge-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.18rem .5rem; border-radius:999px;
  font-weight:800; border:1px solid transparent;
}
.badge-model{ background:#eef6ff; border-color:#cfe2ff; color:#0b57d0; }
.badge-conf{ background:#e8f8ee; border-color:#cbead8; color:#166534; }

/* Tooltip used inside chips */
.tooltip{ position:relative; cursor:help; text-decoration:dotted underline; text-underline-offset:2px; }
.tooltip[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% + 8px);
  background:#0a0a0a; color:#fff;
  padding:.5rem .6rem; border-radius:8px;
  font-size:.86rem; line-height:1.2;
  opacity:0; pointer-events:none; white-space:normal; width:min(92vw,320px);
  box-shadow:0 8px 30px rgba(0,0,0,.18);
  transition:opacity .15s ease;
}
.tooltip:hover::after, .tooltip:focus::after{ opacity:1; }

/* Reason / trend line under teams */
.pro-board .reason{
  grid-column: 1 / -1;
  margin-top: .35rem;
  font-size: .92rem;
  color: var(--muted);
  white-space: pre-wrap;
}

/* Align digits nicely across UI */
.reasoning,
.pick-card,
.marketbox,
.badge,
.teams,
body {
  font-variant-numeric: tabular-nums;
}

/* ---------- Select / Segmented control polish ---------- */
select.market{
  appearance: none;
  padding:.45rem .9rem;
  border:1px solid #d6dbe6;
  border-radius:10px;
  background:#fff url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2357607a' d='M5.25 7.5L10 12.25 14.75 7.5z'/%3E%3C/svg%3E") no-repeat right .6rem center/16px;
  font-weight:700; color:#0f172a;
}
select.market:focus{ outline:none; border-color:#b9c4d9; box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* ---------- Center helper ---------- */
.center, .text-center { text-align: center; }

/* ===========================
   Free Picks card + helpers
   =========================== */

/* Generic pill (e.g., Confidence) – keeps visual parity with header chip */
.pill{
  display:inline-block;
  padding:.22rem .55rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  background:#f8fafc;
  color:var(--text);
  border:1px solid var(--border);
}

/* Free Picks card container */
.pick-card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem;
  margin: .6rem 0;
  transition: box-shadow .2s ease, transform .12s ease;
}
.pick-card:hover{
  box-shadow: 0 1px 2px rgba(12,18,32,.06), 0 16px 30px rgba(12,18,32,.12);
  transform: translateY(-1px);
}

/* Colored left edge based on market */
.pick-card.over::before,
.pick-card.under::before{
  content:"";
  position:absolute;
  left:-1px; top:-1px; bottom:-1px;
  width:4px; border-radius:12px 0 0 12px;
}
.pick-card.over::before  { background:#16a34a; } /* Over = green */
.pick-card.under::before { background:#dc2626; } /* Under = red */

/* --- Footer trust badges + Cookie settings link (single source of truth) --- */
.site-footer .trust{
  display:flex;
  gap:.5rem;
  justify-content:center;
  flex-wrap:wrap;
  margin:.5rem 0 0;
}
.site-footer .trust .tb{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .6rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  font-weight:700;
  font-size:.85rem;
}
.site-footer .trust .tb .icon{
  font-style:normal;
  line-height:1;
  opacity:.9;
}
.site-footer .cookie-link{
  display:inline-block;
  margin-top:.4rem;
  color:inherit;
  text-decoration:none;
  border-bottom:1px dashed rgba(0,0,0,.2);
}
.site-footer .cookie-link:hover{
  border-bottom-color: currentColor;
}

/* --- BIG social buttons in footer --- */
.footer-social{
  display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap;
  margin:.25rem 0 .4rem;
}
.btn-social{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .85rem; border-radius:12px; font-weight:800; text-decoration:none;
  border:1px solid transparent; box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.btn-social svg{ width:18px; height:18px }
.btn-social.fb{ background:#1877F2; color:#fff; }
.btn-social.fb:hover{ filter:brightness(1.05); }
.btn-social.ig{ background:#fff; color:#0f172a; border-color:#e5e7eb; }
.btn-social.ig:hover{ box-shadow:0 6px 18px rgba(0,0,0,.12); }