/* ==========================================================================
   BTTS (Both Teams To Score) pages  (/odds/{comp}/btts/...)

   Two page types share this sheet:
     - btts-match-page  : one fixture, a 3-column bookmaker table
                          (Bookmaker | BTTS Yes | Bet Now), LEFT-aligned.
     - btts-index-page  : the listing, reusing the match-odds fixture ROW
                          (.premteam1 / .vstag / .premteam2 / .premdate) with a
                          single best-BTTS value in the middle.
   Reuses odds.css's .odds-table / .bookmaker-row / .odds-value / .best-odd for
   colours + row striping; this sheet only adds the BTTS-specific layout.
   Loaded AFTER odds.css so same-specificity rules here win.
   ========================================================================== */

/* Every BTTS page carries `prempage`, so fixtures.css's
   body.oddsteampage.prempage #content{max-width:900px} does NOT apply (no
   oddsteampage). Give BTTS the same 900px column here. */
body.btts-page #content{max-width:900px;margin:0 auto;}

/* No red rule under the H1 (matches the scorer / match-odds pages). */
body.btts-page .entry-header{border-bottom:0 !important;padding-bottom:6px !important;}

.entry-content p.btts-intro{font-size:11pt;font-style:italic;color:#9d7b7b;line-height:1.6;
  margin:0 auto 18px;max-width:100%;text-align:center;}

/* Per-fixture heading (match page): "Arsenal vs Coventry" + a soft date line. */
h2.btts-match{font-size:14pt;font-weight:700;color:#1a1a1a;text-align:center;margin:6px 0 4px;border:0;background:none;padding:0;}
.btts-fixdate{display:block;font-size:9pt;font-weight:400;color:#8a7a6c;margin-top:4px;}
/* Date-only heading (teams live in the H1): a centered date/time badge.
   NB: keep the container flex-NOwrap - an inline-flex with flex-wrap:wrap
   collapses to min-content width in an inline context. The date text may wrap
   internally on very narrow screens instead. */
h2.btts-match.btts-dateonly{margin:2px 0 18px;line-height:1.3;}
.btts-datebadge{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;
  background:linear-gradient(#ffffff,#fdf6ef);border:1px solid #efe0d2;border-radius:14px;
  padding:9px 20px;box-shadow:0 1px 4px rgba(120,60,20,.07);}
.btts-badge-ico{color:#CC551E;flex:0 0 auto;display:block;}
.btts-badge-date{font-size:12pt;font-weight:600;color:#24160f;letter-spacing:.1px;min-width:0;}
.btts-badge-time{font-size:12pt;font-weight:700;color:#CC551E;flex:0 0 auto;}
.btts-badge-div{width:1px;height:17px;background:#eadbce;flex:0 0 auto;}
@media (max-width:420px){
  .btts-datebadge{gap:7px;padding:7px 14px;}
  .btts-badge-date,.btts-badge-time{font-size:10.5pt;}
  .btts-badge-ico{width:13px;height:13px;}
  .btts-badge-div{height:14px;}
}
.btts-card{background:#fff;border:1px solid #f0e8e0;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden;margin:0 auto 22px;max-width:640px;}

/* ---- the 3-column BTTS table: LEFT-aligned bookie | odds | Bet Now ---- */
.odds-table.btts-odds-table{width:100%;table-layout:fixed;}
.odds-table.btts-odds-table .odds-thead{background:#f9e5df !important;}
.odds-table.btts-odds-table .odds-thead > li > div{text-align:left !important;color:#9c3b1f !important;font-size:9pt !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:.4px;padding:10px 14px !important;}
.odds-table.btts-odds-table .bookmaker-col{width:46% !important;}
.odds-table.btts-odds-table .btts-yes-col{width:27% !important;}
.odds-table.btts-odds-table .btts-bet-col{width:27% !important;text-align:center !important;}
.odds-table.btts-odds-table li > div{text-align:left !important;vertical-align:middle !important;padding:11px 14px !important;}
.odds-table.btts-odds-table .bookmaker-name{font-weight:700;color:#1b1b1b;font-size:11pt;}
.odds-table.btts-odds-table .bookmaker-name a{color:#1b1b1b !important;text-decoration:none !important;}
.odds-table.btts-odds-table .bookmaker-name a:hover{color:#c12626 !important;}
.odds-table.btts-odds-table .odds-cell{text-align:left !important;}
.odds-table.btts-odds-table .odds-value{display:inline-block;min-width:52px;text-align:center;font-weight:700;font-size:11pt;padding:4px 8px;border:1px solid #e6ddd2;border-radius:6px;background:#fff;}
.odds-table.btts-odds-table .odds-value.best-odd{background:#CC551E !important;color:#fff !important;border-color:#CC551E !important;}
.odds-table.btts-odds-table li.best-odds-row{background:#fdf6ee !important;}
.odds-table.btts-odds-table li.best-odds-row .best-odds-label{color:#9c3b1f;}
.odds-table.btts-odds-table li.best-odds-row .best-bookmaker{display:block;font-size:8.5pt;font-weight:600;color:#8a7a6c;margin-top:3px;}
.odds-table.btts-odds-table .odds-tbody.all-bookmakers li.bookmaker-row:nth-child(even){background:#fbf7f1;}
/* Bet Now button, right of the row. */
.odds-table.btts-odds-table .btts-bet{text-align:center !important;}
.btts-bet-btn{display:inline-block;background:#c12626;color:#fff;font-size:9.5pt;font-weight:700;padding:7px 16px;border-radius:6px;text-decoration:none;white-space:nowrap;transition:background .15s;}
.btts-bet-btn:hover{background:#a01f1f;color:#fff;}
.btts-bet-btn.btts-bet-off{background:#d9d2c9;color:#fff;cursor:default;}
/* Abbreviated bookie name on narrow screens. */
.odds-table.btts-odds-table .bookie-abbr{display:none;}

/* ---- coming-soon (no BTTS odds yet) ---- */
.btts-coming{max-width:640px;margin:0 auto 22px;text-align:center;}
.btts-coming-note{font-size:10.5pt;line-height:1.6;color:#8a7a6c;margin:0 0 14px;}

/* ---- LISTING pages: the match-odds monthly fixture rows, ONE middle value ----
   The listing pages carry `premoddspage prempage` + link odds-fixtures.css, so the
   row layout, date-group h2 headers and month-nav scroller are inherited EXACTLY
   from the match-odds monthly pages. Only two BTTS tweaks are needed:
   1. The middle cell (.vsdrawodds.btts-mid) holds the best BTTS "Yes" price -
      restyle odds-fixtures.css's grey draw-odds pill as a branded best-odd pill.
   2. Hide the (empty) home/away odds cells so the row reads Name | BTTS | Name | date. */
body.btts-listing ul.nextfixtures li a span.vsdrawodds.btts-mid{
  background:#CC551E !important;color:#fff !important;border:0 !important;border-radius:4px !important;
  font-weight:700 !important;padding:3px 8px !important;min-width:44px;text-align:center;}
body.btts-listing ul.nextfixtures li:not(.oddspublished) a span.vsdrawodds.btts-mid{
  background:#ece5db !important;color:#8a7a6c !important;}
body.btts-listing ul.nextfixtures li a span.premteam1c:empty,
body.btts-listing ul.nextfixtures li a span.premteam2c:empty{display:none !important;}

@media (max-width:560px){
  .odds-table.btts-odds-table .bookmaker-col{width:40% !important;}
  .odds-table.btts-odds-table .btts-yes-col{width:26% !important;}
  .odds-table.btts-odds-table .btts-bet-col{width:34% !important;}
  .odds-table.btts-odds-table li > div{padding:10px 9px !important;}
  .btts-bet-btn{padding:6px 11px;font-size:9pt;}
}
@media (max-width:400px){
  .odds-table.btts-odds-table .bookie-full{display:none;}
  .odds-table.btts-odds-table .bookie-abbr{display:inline;}
}
/* Abbreviated bookie name a touch larger on the smallest screens (user request).
   btts.css is loaded only on the BTTS pages, so this stays scoped to them. */
@media only screen and (max-width: 350px) {
  .odds-table:not(.outright-odds-table) .bookie-abbr {
    font-size: 13px !important;
  }
}

/* ==========================================================================
   BTTS_CENTRE_V1 (2026-07-17) - centre the whole table + two fixes.
   ========================================================================== */
/* 1. CENTRE every column: header, bookie name, odds, Bet Now. The block above
   deliberately left-aligned them; the user wants the table centred throughout. */
.odds-table.btts-odds-table .odds-thead > li > div{text-align:center !important;}
.odds-table.btts-odds-table li > div{text-align:center !important;}
.odds-table.btts-odds-table .bookmaker-col{text-align:center !important;}
.odds-table.btts-odds-table .bookmaker-name{text-align:center !important;}
.odds-table.btts-odds-table .bookmaker-name a{text-align:center !important;}
.odds-table.btts-odds-table .odds-cell{text-align:center !important;}
.odds-table.btts-odds-table .btts-bet{text-align:center !important;}
.odds-table.btts-odds-table li.best-odds-row .best-odds-label,
.odds-table.btts-odds-table li.best-odds-row .best-odds-label strong,
.odds-table.btts-odds-table li.best-odds-row .best-bookmaker{text-align:center !important;}

/* 2. The DISABLED Bet Now is a <span>, the active one an <a>. odds.css hands the
   cell a 28px line box and only reset line-height on `a`, so the span inherited
   28px and rendered 42px tall next to the 30px links. Same line box = same size.
   (The greying itself is fixed at source: bookmaker-links.json now has entries for
   LiveScore Bet + Sportsbet, so every bookie renders as a real link.) */
.odds-table.btts-odds-table .btts-bet span.btts-bet-btn,
span.btts-bet-btn,
span.btts-bet-btn.btts-bet-off{line-height:1.25 !important;}

/* 3. The last bookmaker row's border-bottom sat directly on the card's own border,
   reading as a double rule. The card closes the list - the row doesn't need to. */
.odds-table.btts-odds-table .odds-tbody.all-bookmakers > li:last-child{border-bottom:0 !important;}
.odds-table.btts-odds-table .odds-tbody:last-child > li:last-child{border-bottom:0 !important;}

/* ---- Date/time heading: keep the style (centred, bold) but SMALLER, and drop the
   dotted rule. The dotted underline + 10px padding come from style.css's global
   `#main h2 {border-bottom:1px dotted #555;padding-bottom:10px}` - that is heading
   chrome, and this is a one-line timestamp, not a section heading.
   NB `#main h2` is an ID selector (1,0,1) and also sets 12pt under 800px, so a
   plain class rule loses to it - these carry id-level specificity to win at both
   sizes. Applies to EVERY BTTS match page (all comps share btts.css). */
h2.btts-match.btts-dateonly,
#main h2.btts-match.btts-dateonly{
  font-size:10pt;
  font-weight:700;
  margin:0 0 12px;
  padding-bottom:0;
  border-bottom:0;
  line-height:1.35;
}
@media only screen and (max-width:800px){
  #main h2.btts-match.btts-dateonly{font-size:9pt;}
}

/* ---- Date badge sizing (user, 2026-07-17) ----
   The visible date/time is the .btts-datebadge pill INSIDE h2.btts-dateonly, and
   these spans set their own font-size - so sizing the h2 does nothing to the text.
   Appended AFTER the component's own @media(max-width:420px){...10.5pt} block so
   these win at equal specificity. */
.btts-badge-date, .btts-badge-time {font-size:10pt;}
.btts-datebadge {margin-bottom:10px;}

@media (max-width: 420px) {
  .btts-badge-date, .btts-badge-time {font-size:8.5pt;}
}

/* ---- Date badge: stop it jamming edge-to-edge on small phones (2026-07-17).
   The pill is inline-flex/nowrap, so when the row runs out of room the DATE TEXT
   wraps inside it and the pill grows to 2 lines. Measured with a long date
   ("Wednesday 23 September 2026"): 320px -> 298 in a 300 container (2px slack);
   300px -> hits max-width and wraps to 47px tall. The earlier check missed it
   because the test page's date ("Saturday 15 August 2026") is 38px shorter.
   Keep the 8.5pt text size as specified - just buy the room back from the
   padding, gaps and icons so the longest date stays on ONE line. ---- */
@media (max-width: 360px) {
  .btts-datebadge{gap:4px;padding:6px 9px;}
  .btts-badge-ico{width:11px;height:11px;}
  .btts-badge-div{height:12px;}
}