/*!
 * Today Predictions — modern theme layer
 * ---------------------------------------------------------------
 * This file is loaded AFTER style.css / responsive.css / custom.css on
 * every page. It does not remove or rewrite any existing CSS — it layers
 * refined, consistent styling on top of the class names those templates
 * already use, plus a small number of new components (confidence bar,
 * prediction pills, related-match cards) that new markup opts into.
 *
 * Brand colors (navy + red) are kept as-is; this is a refinement pass,
 * not a rebrand. Safe to remove this single <link> to revert the visual
 * changes — nothing else depends on it.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* --- Brand (existing) --- */
  --tp-ink:        #001e28;   /* primary dark navy — unchanged */
  --tp-ink-soft:   #0d2c38;   /* lighter navy, for surfaces on dark sections */
  --tp-brand:      #ff0046;   /* primary accent — unchanged */
  --tp-brand-2:    #c40c49;   /* secondary accent — unchanged */

  /* --- New, functional additions --- */
  --tp-gold:       #e2a63c;   /* VIP / premium / high-confidence */
  --tp-win:        #1f9d55;   /* positive / "form: win" / high probability */
  --tp-draw:       #c8901f;   /* neutral / draw */
  --tp-loss:       #d2374c;   /* negative / "form: loss" / low probability */
  --tp-mist:       #f6f8f9;   /* refined light neutral background */
  --tp-line:       #e6ebed;   /* hairline borders */
  --tp-ink-70:      rgba(0,30,40,.7);
  --tp-ink-45:      rgba(0,30,40,.45);

  /* --- Scale --- */
  --tp-radius:     10px;
  --tp-radius-sm:  6px;
  --tp-shadow:     0 6px 24px rgba(0,20,28,.08);
  --tp-shadow-lg:  0 14px 40px rgba(0,20,28,.14);
  --tp-font-display: 'Space Grotesk', Karla, sans-serif;
}

/* ================= Accessibility & base polish ================= */
*:focus-visible {
  outline: 2px solid var(--tp-brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
::selection { background: var(--tp-brand); color: #fff; }

/* ================= Typography ================= */
.section-title h2,
h1.title, h2.title,
.breadcrumb-content h1, .breadcrumb-content h2,
.upcoming-match .single-match .part-head .match-title {
  font-family: var(--tp-font-display);
  letter-spacing: -0.01em;
}
.section-title span.subtitle {
  font-family: var(--tp-font-display);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--tp-brand);
}

/* Score & stat numerals get a steadier, tabular treatment wherever they appear */
.st_res, .lscrsp, .goal ul li, .mres strong,
.upcoming-match .single-match .part-team .goal ul li,
.standing .standing-team-list .table tbody tr td,
.progress-bar.progress-striped {
  font-family: var(--tp-font-display);
  font-variant-numeric: tabular-nums;
}

/* ================= Cards ================= */
.single-match,
.single-sport-box,
.blog-sidebar .single-sidebar,
.upcoming-match-list .single-upcoming-match,
.faq .faq-list li {
  border-radius: var(--tp-radius) !important;
  box-shadow: var(--tp-shadow) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.single-sport-box:hover,
.upcoming-match-list .single-upcoming-match:hover {
  box-shadow: var(--tp-shadow-lg) !important;
  transform: translateY(-2px);
}

/* ================= Confidence bar (signature component) =================
   A single horizontal, three-segment bar showing Home / Draw / Away
   probability — replaces reading three separate vertical meters with one
   at-a-glance read of who the model favors. Usage:

   <div class="tp-confidence-bar" role="img" aria-label="...">
     <span style="width:55%" class="tp-seg tp-seg--home">55%</span>
     <span style="width:23%" class="tp-seg tp-seg--draw">23%</span>
     <span style="width:22%" class="tp-seg tp-seg--away">22%</span>
   </div>
   <div class="tp-confidence-labels"><span>Home</span><span>Draw</span><span>Away</span></div>
*/
.tp-confidence-bar {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tp-mist);
  box-shadow: inset 0 0 0 1px var(--tp-line);
}
.tp-confidence-bar .tp-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--tp-font-display);
  font-weight: 600;
  font-size: 13px;
  min-width: 34px;
  white-space: nowrap;
  transition: width .4s ease;
}
.tp-confidence-bar .tp-seg--home { background: linear-gradient(135deg, var(--tp-brand), var(--tp-brand-2)); }
.tp-confidence-bar .tp-seg--draw { background: #9aa4a8; }
.tp-confidence-bar .tp-seg--away { background: linear-gradient(135deg, var(--tp-ink-soft), var(--tp-ink)); }
.tp-confidence-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tp-ink-70);
}

/* ================= Prediction pills ================= */
.tp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--tp-mist);
  color: var(--tp-ink);
  box-shadow: inset 0 0 0 1px var(--tp-line);
}
.tp-pill--high { background: rgba(31,157,85,.12); color: var(--tp-win); box-shadow: inset 0 0 0 1px rgba(31,157,85,.35); }
.tp-pill--mid  { background: rgba(200,144,31,.12); color: var(--tp-draw); box-shadow: inset 0 0 0 1px rgba(200,144,31,.35); }
.tp-pill--low  { background: rgba(210,55,76,.1); color: var(--tp-loss); box-shadow: inset 0 0 0 1px rgba(210,55,76,.3); }
.tp-pill--vip  { background: rgba(226,166,60,.14); color: #8a6415; box-shadow: inset 0 0 0 1px rgba(226,166,60,.4); }

/* ================= Related-matches / internal-linking cards ================= */
.tp-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 6px 0 10px;
}
.tp-related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--tp-radius-sm);
  background: #fff;
  box-shadow: var(--tp-shadow);
  color: var(--tp-ink);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.tp-related-card:hover { box-shadow: var(--tp-shadow-lg); transform: translateY(-2px); color: var(--tp-brand); }
.tp-related-card .tp-related-teams { font-size: 13px; font-weight: 600; line-height: 1.35; }
.tp-related-card .tp-related-meta { font-size: 11px; color: var(--tp-ink-45); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* ================= Buttons ================= */
.bet-btn, .btn-for-bet {
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(255,0,70,.25);
}

/* ================= Header / nav polish ================= */
.wc2026-topbar { background: linear-gradient(100deg, var(--tp-ink) 0%, var(--tp-ink-soft) 100%); }
.header .header-bottom .navbar .navbar-nav .nav-item .nav-link { letter-spacing: .02em; }
.header .header-bottom .navbar .navbar-nav .nav-item.dropdown .dropdown-menu {
  border-radius: var(--tp-radius-sm);
  overflow: hidden;
  box-shadow: var(--tp-shadow-lg);
}

/* ================= FAQ accordion polish ================= */
.faq .faq-list a { font-family: var(--tp-font-display); }
.faq .faq-list li { border: 1px solid var(--tp-line); }

/* ================= Ad slot framing ================= */
ins.adsbygoogle { border-radius: var(--tp-radius-sm); overflow: hidden; }

/* ================= Standings / stat tables ================= */
.standing .standing-team-list .table thead tr,
.result .result-sheet .table thead tr {
  background: var(--tp-ink) !important;
}
.standing .standing-team-list .table tbody tr:hover,
.result .result-sheet .table tbody tr:hover {
  box-shadow: 0 2px 10px rgba(0,20,28,.14) !important;
}

/* ================= Responsive tightening ================= */
@media (max-width: 576px) {
  .tp-confidence-bar { height: 30px; }
  .tp-related-grid { grid-template-columns: 1fr; }
}