/* ==========================================================================
   Team Over/Under Goals pages  (/odds/{comp}/over-under/{team}.html)

   Deliberately reuses the /odds/division-1/ listing look rather than inventing
   one: rounded white card (#fff, 1px #f0e8e0, radius 10, subtle shadow,
   overflow hidden), alternating row stripes (#fff / #fbf7f1, divider #f4ede4)
   and the small white date tab (h2 > span.header-date, radius 9px 9px 0 0).
   The table itself is odds.css's .odds-table / .bookmaker-row / .odds-value /
   .best-odd - this sheet only adds the multi-line VARIANT + tabs.
   Loaded AFTER odds.css so same-specificity rules here win.
   ========================================================================== */

/* NOTE: do NOT re-declare #content width here. Every odds page in every
   competition carries `prempage` (plus its own championshippage /
   division1page / division2page), so fixtures.css's
   `body.oddsteampage.prempage #content{max-width:900px}` already gives all four
   competitions the identical 900px column. If a page ever renders wide, the
   body class is wrong - fix the class, not this sheet. */

/* Header: no red rule, and tighten it up. Scoped to .over-under-goals-page so
   it only touches these pages and not the rest of .oddsteampage.prempage.
   !important because fixtures.css's body.oddsteampage.prempage rule is more
   specific (0,3,1 vs 0,2,1). */
body.over-under-goals-page .entry-header{
  border-bottom:0 !important;
  padding-top:0 !important;
  margin-bottom:0 !important;
}

/* One knob for the best-odds highlight colour. */
:root{--ou-best-bg:#CC551E;--ou-best-fg:#fff;}

/* Needs the p.+.entry-content specificity: style.css's `.entry-content p{font-size:13pt}`
   out-weighs a bare `.ou-intro` rule, so 11pt silently loses without it. */
.entry-content p.ou-intro{font-size:11pt;font-style:italic;color:#9d7b7b;line-height:1.6;
  margin:0 auto 18px;max-width:100%;text-align:center;}

/* ---- Over/Under: a SEGMENTED control (two joined halves) - deliberately a
   different shape to the per-fixture pills below, so the two controls read as
   different things instead of two competing pill rows. Also the Over<->Under
   cross-link, so neither page is an island. ---- */
.ou-seg{display:inline-flex;border:1px solid #e6ddd2;background:#fff;border-radius:22px;overflow:hidden;
  padding:3px;gap:3px;}
.ou-seg-wrap{text-align:center;margin:0 0 20px;}
.ou-seg-btn{display:inline-block;min-width:104px;text-align:center;font-size:10pt;font-weight:600;
  color:#5a4f47;padding:8px 20px;border-radius:20px;text-decoration:none !important;line-height:1.2;
  transition:background .15s ease,color .15s ease;}
.ou-seg-btn:hover{color:#CC551E;background:#faf5f2;}
.ou-seg-btn.is-active{background:#CC551E;color:#fff;}
.ou-seg-btn.is-active:hover{background:#CC551E;color:#fff;}

/* ---- tabs (only rendered when 2+ fixtures are priced) ---- */
.ou-tabs{max-width:880px;margin:0 auto;}
.ou-tabbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 20px;}
.ou-tab{appearance:none;border:1px solid #e6ddd2;background:#fff;color:#5a4f47;font-size:10pt;font-weight:600;
  padding:8px 16px;border-radius:20px;cursor:pointer;line-height:1.2;font-family:inherit;
  transition:background .15s ease,color .15s ease,border-color .15s ease;}
.ou-tab:hover{border-color:#9a9a9a;color:#9a9a9a;}
.ou-tab.is-active{background:#9a9a9a;border-color:#9a9a9a;color:#fff;}
.ou-panel{display:none;}
.ou-panel.is-active{display:block;}

/* ---- fixture + kick-off: ONE heading block above the card. The global h2 rule
   paints a dotted underline, hence border:0 !important (plain border:0 loses the
   specificity fight and the dotted line comes back). ---- */
.ou-match{font-size:13pt;font-weight:700;color:#1b1b1b;letter-spacing:-.2px;text-align:center;
  margin:0 0 9px !important;padding:0 !important;border:0 !important;background:none !important;}
.ou-fixdate{display:block;font-size:9pt;font-weight:400;color:#8a7a6c;margin-top:4px;letter-spacing:0;}

/* ---- the fixture card: opens straight onto the table header (overflow:hidden
   + radius clips the pale red thead into the rounded top corners) ---- */
.ou-card{background:#fff;border:1px solid #f0e8e0;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);
  overflow:hidden;margin:0 0 22px;}

/* ---- awaiting-odds state: the next ties previewed with an Odds Countdown (same
   tab/heading language as the populated pages). No explanatory note - the
   countdown card already says when odds are expected. .ou-empty below is only
   for a team with NO upcoming fixtures at all. ---- */
.ou-empty{max-width:880px;margin:0 auto 22px;background:#fff;border:1px solid #f0e8e0;border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);padding:20px 22px;text-align:center;}
.ou-empty p{margin:0;font-size:10.5pt;line-height:1.6;color:#5a4f47;}

/* "Odds for this match are not available" - shown when the match (1X2) odds are
   out but no Over/Under market appeared. Same white card as .ou-empty; the title
   in the warm brand red, the note quieter beneath. */
.ou-unavailable{max-width:880px;margin:0 auto 22px;background:#fff;border:1px solid #f0e8e0;border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);padding:22px 22px;text-align:center;}
.ou-unavailable-title{margin:0 0 6px;font-size:12pt;font-weight:700;color:#c0392b;}
.ou-unavailable-note{margin:0;font-size:10pt;line-height:1.6;color:#8a7a6c;max-width:560px;margin-left:auto;margin-right:auto;}

/* The countdown card sits where the odds table would be, so give it the same
   breathing room as .ou-card. (.oddsandcountdown.foc3 + .foc3-single come from
   fixtures.css - card, gradient timer and single-card centring are all reused.) */
.ou-panel .oddsandcountdown.foc3{margin:0 auto 22px;}
/* The card's own <h2>Odds Countdown</h2> is unclassed, so the global dotted-h2
   underline lands on it; fixtures.css's border:0 loses that fight. */
body.over-under-goals-page .oddsandcountdown .oddscountdown h2{border:0 !important;}

/* ==========================================================================
   Multi-line comparison table: Bookmaker + Over/Under per goal line.
   Columns are data-driven; widths come from <colgroup> + table-layout:fixed so
   every odds column is EXACTLY equal. Scrolls inside .odds-table-wrapper on
   narrow screens rather than crushing.
   ========================================================================== */
.over-under-odds-table{min-width:520px;table-layout:fixed;width:100%;border-collapse:collapse;}
/* Bookmaker column fixed; table-layout:fixed then splits the remaining width
   EQUALLY across every odds column (no per-column widths needed). Needs the
   .odds-table prefix + !important to out-weigh odds.css's .bookmaker-col
   width rules (150px base, 100px <=480, 52px !important <=350). */
.odds-table.over-under-odds-table .bookmaker-col{width:150px !important;}
.odds-table.over-under-odds-table .team-col{width:calc((100% - 150px)/3) !important;}

/* PALE RED header (odds.css paints .odds-thead ~#403b3b dark, so this must override
   the background AND flip the text back to dark for contrast). */
.odds-table.over-under-odds-table .odds-thead{background:#f9e5df !important;}
.odds-table.over-under-odds-table .odds-thead li{background:transparent !important;}
.over-under-odds-table .bookmaker-col{text-align:left;padding-left:14px;color:#9c3b1f;font-size:8.5pt;
  font-weight:700;letter-spacing:.3px;}
.over-under-odds-table .team-col{font-size:8.5pt;font-weight:700;color:#9c3b1f;text-align:center;
  padding:9px 4px;white-space:nowrap;line-height:1.2;}
.over-under-odds-table .team-col .ou-th-side{display:block;font-size:7.5pt;color:#bb7a63;
  letter-spacing:.4px;text-transform:uppercase;font-weight:700;}

/* ---- Best-odds summary row (same idea as the match-odds pages): pale strip,
   "Best Odds >" label, then the top price per line with its bookmaker beneath. */
.over-under-odds-table li.best-odds-row{background:#fdf6ee !important;border-bottom:1px solid #f0e2d2;}
.over-under-odds-table li.best-odds-row li > div{padding:11px 4px !important;vertical-align:middle;}
.over-under-odds-table li.best-odds-row .best-odds-label{padding-left:14px !important;}
.over-under-odds-table li.best-odds-row .best-odds-label strong{color:#CC551E;font-weight:700;
  font-size:8.5pt;letter-spacing:.3px;display:block;text-align:left;}
.over-under-odds-table li.best-odds-row .best-bookmaker{display:block;font-size:7.5pt;color:#8a7a6c;
  margin-top:5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;text-align:center;}
.over-under-odds-table li.best-odds-row .best-bookmaker a{color:inherit;text-decoration:none;}
.over-under-odds-table li.best-odds-row .best-bookmaker a:hover{text-decoration:underline;}

/* Best-price highlight - single source of truth via the --ou-best-* vars. */
.over-under-odds-table .odds-value.best-odd{background:var(--ou-best-bg) !important;
  color:var(--ou-best-fg) !important;border-color:var(--ou-best-bg) !important;}

/* ---- "Browse More Odds" tag links. Same chip language as the match-odds pages
   (background #f8f5f2 + 3px #c12626 left edge), replicated here because those
   rules are scoped to body.oddspages.matchpage - a class these pages don't (and
   shouldn't) carry, since it would also pull in the match-odds home/draw/away
   best-odd colours and table rules. border:0 on the h2 kills the global dotted
   underline. ---- */
/* border:0 needs !important - the global h2 rule paints a dotted underline and
   out-specifies a plain declaration (same trap as .ou-match). */
body.over-under-goals-page h2.browsemoreoddsheader{font-size:10pt;font-weight:600;color:#666;
  text-transform:uppercase;letter-spacing:.5px;margin:28px 0 12px !important;padding:0 !important;
  border:0 !important;background:none !important;text-align:center;}
body.over-under-goals-page .viewmoreodds-wrap{max-width:880px;margin:0 auto 8px;}
body.over-under-goals-page p.viewmoreodds{display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;margin:0;padding:0;}
body.over-under-goals-page p.viewmoreodds > a{flex:0 0 auto;display:inline-block;padding:9px 16px;
  background:#f8f5f2;border-left:3px solid #c12626;border-radius:0 4px 4px 0;color:#222 !important;
  font-size:10pt;font-weight:600;text-decoration:none !important;white-space:nowrap;line-height:1.2;
  transition:background .15s ease;}
body.over-under-goals-page p.viewmoreodds > a:hover{background:#f1e7df;}
@media only screen and (max-width:500px){
  body.over-under-goals-page p.viewmoreodds > a{font-size:9pt;padding:8px 12px;}
}

/* Row fade-in is NOT defined here on purpose: fixtures.css already ships it -
   `.odds-table .odds-tbody.all-bookmakers li{opacity:0;transform:translateY(-8px)}`
   plus `.is-open tr{opacity:1;transform:translateY(0)}` and per-row
   transition-delays (80ms steps, nth-child 2..10, capped at 800ms). We render
   the .odds-tbody WITHOUT `is-open` and over-under.js adds it when the table scrolls
   into view, which plays that existing staggered fade-from-above. */

/* Alternating row stripes + dividers, matching the division-1 listing rows. */
.over-under-odds-table .odds-tbody.all-bookmakers li.bookmaker-row{background:#fff;border-bottom:1px solid #f4ede4;}
.over-under-odds-table .odds-tbody.all-bookmakers li.bookmaker-row:nth-child(even){background:#fbf7f1;}
.over-under-odds-table .odds-tbody.all-bookmakers li.bookmaker-row:last-child{border-bottom:0;}

.over-under-odds-table .bookmaker-name{white-space:nowrap;padding:9px 4px 9px 14px;
  font-weight:600;color:#1b1b1b;text-align:left;}
/* The bookmaker name carries the deep-link (no separate Bet Now column here),
   so kill the default blue/underline. Unlinked bookies (e.g. William Hill,
   affiliate suppressed) simply render as plain text. */
.over-under-odds-table .bookmaker-name a{color:inherit;text-decoration:none;}
.over-under-odds-table .bookmaker-name a:hover{text-decoration:underline;}

.over-under-odds-table .odds-cell{text-align:center;padding:9px 4px;}
.over-under-odds-table .odds-cell .odds-value{display:inline-block;min-width:42px;}
.over-under-odds-table .ou-na{color:#c4b8ab;font-weight:400;}

@media(max-width:560px){
  /* Since Over/Under split the table to 4 columns it FITS a phone - drop the
     min-width so it lays out in full instead of side-scrolling. The wrapper
     keeps overflow-x:auto as a safety if more goal lines are ever added.
     odds.css has `@media(max-width:450px){.odds-table:not(.outright-odds-table)
     {table-layout:auto;width:auto}}` which out-specifies a bare
     .over-under-odds-table and collapses the table to content width with
     UNEQUAL columns - hence the !important re-assertion here. */
  .odds-table.over-under-odds-table{min-width:0;table-layout:fixed !important;width:100% !important;}
  .odds-table.over-under-odds-table .bookmaker-col{width:96px !important;}
  .odds-table.over-under-odds-table .team-col{width:calc((100% - 96px)/3) !important;}
  .over-under-odds-table .team-col,
  .over-under-odds-table .odds-cell{font-size:8pt;padding:8px 2px;}
  .over-under-odds-table .odds-cell .odds-value{min-width:0;padding-left:5px;padding-right:5px;}
  .over-under-odds-table .bookmaker-name{padding-left:9px;font-size:8.5pt;}
  .over-under-odds-table .bookmaker-col{padding-left:9px;}
  .over-under-odds-table li.best-odds-row li > div{padding:9px 2px !important;}
  .over-under-odds-table li.best-odds-row .best-odds-label{padding-left:9px !important;}
  .over-under-odds-table li.best-odds-row .best-odds-label strong{font-size:7.5pt;}
  .over-under-odds-table li.best-odds-row .best-bookmaker{font-size:6.5pt;margin-top:3px;letter-spacing:.2px;}
  .ou-match{font-size:11.5pt;}
  .ou-fixdate{font-size:8.5pt;}
  .ou-tab{font-size:9pt;padding:7px 12px;}
  /* Segmented control goes full-width (halves split evenly) so it stays tappable. */
  .ou-seg{display:flex;width:100%;max-width:300px;margin:0 auto;}
  .ou-seg-btn{flex:1 1 0;min-width:0;padding:9px 10px;font-size:9.5pt;}
}

/* Tighter page head + smaller body copy on small phones. Every selector here is
   prefixed with body.over-under-goals-page: on their own these are generic
   (.entry-header/.entry-title/#main h1/.oddspages #main p) and would restyle the
   rest of the site's odds pages. NOTE: `.oddspages #main p` carries an ID, so it
   out-specifies p.ou-intro and deliberately takes the intro to 8pt in this band
   too. */
@media only screen and (max-width:500px){
  /* gap + title-secondary need !important: fixtures.css already sets the pill's
     font-size with !important, and the entry-title gap comes from a
     higher-specificity body-scoped rule - without this both silently no-op. */
  body.over-under-goals-page .entry-header .entry-title{gap:0 !important;}
  body.over-under-goals-page #main h1 .title-primary{font-size:13pt;margin-bottom:0;}
  body.over-under-goals-page .entry-header .entry-title .title-secondary{font-size:6.5pt !important;}
  body.over-under-goals-page.oddspages #main p{font-size:8pt;}
}

/* Wider segmented control on small phones. max-width:none is required because
   the <=560px block above caps .ou-seg at 300px, which would clamp this 94% and
   make it a no-op at these widths. */
@media (max-width:400px){
  .ou-seg{width:94%;max-width:none;}
}

/* Abbreviated bookmaker names on the narrowest phones. Deliberately scoped to
   body.over-under-goals-page: the bare .odds-table:not(.outright-odds-table)
   selector is shared with the match/odds tables site-wide, and this sizing is
   only wanted on the Over/Under goal pages. (This sheet is only linked from
   those pages anyway - the body class is belt-and-braces.) */
@media only screen and (max-width:350px){
  body.over-under-goals-page .odds-table:not(.outright-odds-table) .bookie-abbr{
    font-size:10px !important;
    letter-spacing:-.2px;
  }
}

/* ==========================================================================
   OU_LABEL_PARITY_V1 (2026-07-17)
   Column 1 held two things that should read identically but did not:
   - the bookie names inherited the page font at 17.6px on desktop - far bigger
     than every other odds table (BTTS 14.7px, match odds 12.7px), and
   - the "Best Odds >" label rendered at 8.5pt (11.3px) with a different padding
     (odds.css's `li.best-odds-row > div{padding:10px 8px}` beat the 14px
     padding-left here), so the label sat 6px left of the names below it.
   Match them: same size, same padding. Desktop only - the <=560 block already
   tunes mobile and reads correctly there.
   ========================================================================== */
@media only screen and (min-width:561px){
  .odds-table.over-under-odds-table .bookmaker-name{font-size:10.5pt !important;}
  /* out-specify odds.css's (0,4,1) best-odds-row padding shorthand */
  .odds-table.over-under-odds-table .odds-tbody > li.best-odds-row > .best-odds-label{
    padding:9px 4px 9px 14px !important;
  }
  .odds-table.over-under-odds-table li.best-odds-row .best-odds-label strong{
    font-size:10.5pt !important;
  }
}