/* Multi-product operator review template (page-templates/review-multi.php).
   One offer row per betting product, plus a side-by-side table of the
   qualifying rules. No score, star or ranking styling here by design. */
.review-header { padding: 24px 0 28px; background: linear-gradient(135deg, #1D3557 0%, #0d1b2a 100%); }
.review-header .review-header-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.review-header .review-header-logo { width: 120px; height: 60px; border-radius: 10px; background: #ffffff; padding: 8px 14px; object-fit: contain; flex-shrink: 0; }
.review-header .review-header-info { flex: 1; }
.review-header .review-header-name { font-size: 26px; font-weight: 800; color: #ffffff; line-height: 1.2; margin-bottom: 8px; }
.review-header .review-header-products { display: flex; flex-wrap: wrap; gap: 6px; }
.review-header .review-header-product { padding: 3px 10px; font-size: 12px; font-weight: 700; color: #A8DADC; background: rgba(69, 123, 157, 0.25); border-radius: 4px; }
.review-header .review-header-facts { display: grid; grid-template-columns: 1fr; gap: 8px; }
.review-header .review-header-fact { padding: 12px 14px; background: rgba(29, 53, 87, 0.6); border: 1px solid rgba(69, 123, 157, 0.3); border-radius: 8px; }
.review-header .review-header-fact-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #6b7f99; margin-bottom: 4px; }
.review-header .review-header-fact-value { font-size: 14px; font-weight: 700; color: #ffffff; line-height: 1.4; }
@media (min-width: 768px) {
  .review-header { padding: 32px 0 36px; }
  .review-header .review-header-name { font-size: 32px; }
  .review-header .review-header-facts { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .review-header .review-header-name { font-size: 36px; }
  .review-header .review-header-facts { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* NESTED CONTAINERS, added 2026-09-11.
   These sections used to be emitted by the template as siblings of
   <section class="content">, so each supplied its own .container. They now live
   in post_content and can be MOVED BY AN EDITOR — and dropping one inside
   .content puts its .container inside another .container, which doubles the
   32px gutter and pulls the block ~64px narrower than everything above it. It
   still looks styled, just visibly out of line with the page.
   base.css's .container is a bare class, so the inner one cannot win on its
   own; neutralise it only when it IS nested, which leaves the un-nested case
   untouched. */
.container .product-offers > .container,
.container .offer-compare > .container { max-width: none; padding-left: 0; padding-right: 0; }

/* Offer rows. One horizontal row per product, in the shape bbb uses on its
   operator reviews: product tag, headline offer, two key facts, CTA, and the
   offer terms in a strip underneath. Four cards side by side made every offer
   a column to be read top-to-bottom; four rows make them a set to be read
   against each other, which is the actual job of this block.

   The row is a SUMMARY. Everything it leaves out is in the compare table below
   it, which is why the template caps the bullets at two. The old four-column
   grid needed a min-height hack on the terms to keep the CTAs on one baseline;
   rows have no such problem, so that rule is gone. */
/* SPACING INTO THE OFFERS TABLE, tightened 2026-09-11 (Mark: too much padding
   between the trust icons and the H2). The gap was the hero's bottom padding
   plus this section's top padding: 76 / 68 / 60px at desktop / tablet / mobile.
   hero.css's padding is SHARED with the homepage and the sport guides, so it is
   overridden here scoped to .review-multi rather than changed globally -
   (0,2,0) beats hero.css's bare .hero at every breakpoint, so no media queries
   are needed. Net gap is now a flat 36px. */
.review-multi .hero { padding-bottom: 24px; }
.product-offers { padding: 12px 0 4px; }

/* Top-table heading + [bi_last_updated] stamp, both centred (Mark,
   2026-09-11: "make the top table h2 title centred, and add a last updated
   to it ... valid for the entire page"). The stamp is
   ig-includes/bi-last-updated.php, which reads post_modified, so it moves
   on ANY save of page 129 - which is the whole-page contract asked for.
   WHY THESE RULES ARE NEEDED AT ALL: operators.css DOES load on this
   template, but its stamp rules are scoped `.operators .operators-updated`
   and this stamp sits inside .product-offers, so none of them apply and the
   SVG would render unsized. Values mirror operators.css. #8999AE on the
   #0d1b2a page background is 5.99:1 - AA at 13px. */
.review-multi .product-offers .product-offers-title { text-align: center; }

.review-multi .product-offers-updated { text-align: center; margin: 0 0 14px; }

.review-multi .operators-updated { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; line-height: 1.4; color: #8999AE; }

.review-multi .operators-updated-icon { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

.review-multi .operators-updated-date { font-variant-numeric: tabular-nums; }
.product-offers .product-offers-title { font-size: 22px; font-weight: 700; color: #ffffff; margin-top: 0; margin-bottom: 6px; }
.product-offers .product-offers-note { font-size: 13px; color: #6b7f99; line-height: 1.6; margin-bottom: 20px; }
.product-offers .product-offers-rows { display: flex; flex-direction: column; gap: 12px; }
.product-offers .product-offer { background: rgba(29, 53, 87, 0.4); border: 1px solid rgba(69, 123, 157, 0.25); border-left: 3px solid #457B9D; border-radius: 8px; overflow: hidden; }
.product-offers .product-offer-main { display: grid; gap: 12px; padding: 16px; align-items: center; }
.product-offers .product-offer-product { justify-self: start; padding: 4px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #A8DADC; background: rgba(69, 123, 157, 0.25); border-radius: 4px; }
.product-offers .product-offer-value { font-size: 22px; font-weight: 800; color: #ffffff; line-height: 1.2; }
.product-offers .product-offer-detail { margin-top: 4px; font-size: 13px; color: #c0c8d4; line-height: 1.5; }
.product-offers .product-offer-key { padding: 4px 0 4px 22px; font-size: 13px; color: #c0c8d4; line-height: 1.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23A8DADC' d='M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm-1 15l-5-5 1.41-1.41L9 12.17l7.59-7.59L18 6l-9 9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 7px; background-size: 14px 14px; }
.product-offers .product-offer-cta { display: block; padding: 12px 18px; font-size: 14px; font-weight: 800; text-transform: uppercase; text-align: center; color: #ffffff; background: #E63946; border-radius: 6px; transition: background 0.2s; }
.product-offers .product-offer-cta:hover { background: #c5303c; color: #ffffff; }
.product-offers .product-offer-tcs { padding: 10px 16px; font-size: 11px; color: #6b7f99; line-height: 1.5; background: rgba(13, 27, 42, 0.35); border-top: 1px solid rgba(69, 123, 157, 0.18); }
.product-offers .product-offer-sport { border-left-color: #16c784; }
.product-offers .product-offer-sport .product-offer-product { color: #16c784; background: rgba(22, 199, 132, 0.15); }
.product-offers .product-offer-casino { border-left-color: #E63946; }
.product-offers .product-offer-casino .product-offer-product { color: #E63946; background: rgba(230, 57, 70, 0.15); }
.product-offers .product-offer-bingo { border-left-color: #F4A261; }
.product-offers .product-offer-bingo .product-offer-product { color: #F4A261; background: rgba(244, 162, 97, 0.15); }
.product-offers .product-offer-poker { border-left-color: #457B9D; }
.product-offers .product-offer-poker .product-offer-product { color: #A8DADC; background: rgba(69, 123, 157, 0.25); }
/* OPERATOR LOGO BESIDE THE PRODUCT LABEL, added 2026-09-24 (Mark: "similar to
   how bbb reviews do it"), first used on /all-british/. OPT-IN MARKUP: wrap the
   label and a logo in .product-offer-brand, which then takes the label's "tag"
   grid slot:
     <div class="product-offer-brand">
       <img class="product-offer-logo" src="/wp-content/themes/bettinginfo/img/logos/<slug>.png"
            alt="<Brand> logo" width="120" height="60" loading="lazy" decoding="async">
       <div class="product-offer-product">Casino</div>
     </div>
   A row without the wrapper keeps the bare label and renders as before.
   LABEL ABOVE THE OFFER, 2026-09-24 (Mark: the label under the logo "looks a
   little bit weird"): the wrapper can hold the logo ALONE, with the label moved
   to the first child of .product-offer-headline, where it shows as a chip
   sitting on the headline value. /ladbrokes/ uses that form; both work.
   The logo sits on the same white chip as the
   operator tables' .row-logo, so any logo that reads on the homepage reads
   here. Mobile: logo and label side by side, since the row is stacked there.
   768px up: logo above label, centred in the 116px column, the bbb layout. */
.product-offers .product-offer-brand { display: flex; align-items: center; gap: 10px; }
.product-offers .product-offer-logo { display: block; flex-shrink: 0; width: 100px; height: 50px; padding: 6px 10px; object-fit: contain; background: #ffffff; border-radius: 8px; }
.product-offers .product-offer-headline .product-offer-product { display: inline-block; margin-bottom: 8px; }
@media (min-width: 768px) {
  .product-offers .product-offer-main { grid-template-columns: 116px minmax(0, 1fr) 170px; grid-template-areas: "tag headline cta" "keys keys keys"; column-gap: 18px; }
  .product-offers .product-offer-product { grid-area: tag; }
  .product-offers .product-offer-brand { grid-area: tag; flex-direction: column; justify-content: center; gap: 8px; }
  .product-offers .product-offer-brand .product-offer-product { justify-self: auto; }
  .product-offers .product-offer-logo { width: 116px; height: 58px; padding: 8px 12px; }
  /* Logo frame base on the baseline of the offer's sub text (Mark, 2026-09-24:
     "the base of the logo should be in line with ... Bet £5 at odds of 1/2").
     Both items share the grid row, so 'last baseline' lines the logo's bottom
     edge up with the detail line's baseline - measured within 0.2px on all
     four /ladbrokes/ rows at 1280 and 820. Mobile stacks the logo above the
     offer, so there is nothing to align there. Scoped with :has() to rows
     whose label sits in the headline: where the label is still under the
     logo, the brand column's last baseline is the label's text, not the logo
     frame, and aligning it would shift that layout instead. */
  .product-offers .product-offer-main:has(> .product-offer-headline > .product-offer-product) > .product-offer-brand,
  .product-offers .product-offer-main:has(> .product-offer-headline > .product-offer-product) > .product-offer-headline { align-self: last baseline; }
  .product-offers .product-offer-headline { grid-area: headline; }
  .product-offers .product-offer-keys { grid-area: keys; }
  .product-offers .product-offer-cta { grid-area: cta; }
}
@media (min-width: 1024px) {
  .product-offers .product-offer-main { grid-template-columns: 116px minmax(150px, 1fr) minmax(0, 1.5fr) 176px; grid-template-areas: "tag headline keys cta"; }
}
.offer-compare { padding: 28px 0 8px; }
.offer-compare .offer-compare-title { font-size: 22px; font-weight: 700; color: #ffffff; margin-top: 0; margin-bottom: 6px; }
.offer-compare .offer-compare-note { font-size: 13px; color: #6b7f99; line-height: 1.6; margin-bottom: 16px; }
.offer-compare .offer-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
/* SPECIFICITY, NOT SOURCE ORDER, DECIDES THESE. The reset below matches bare
   `tr`/`th`/`td` at (0,2,1). Every override — including the ones inside the
   media query — must therefore also qualify the element, e.g.
   `tr.offer-compare-row`, or it loses at (0,2,0) and the desktop layout never
   applies at any width. Media queries contribute no specificity of their own.
   This shipped broken once; keep the element qualifiers. */
.offer-compare .offer-compare-table,
.offer-compare .offer-compare-table thead,
.offer-compare .offer-compare-table tbody,
.offer-compare .offer-compare-table tr,
.offer-compare .offer-compare-table th,
.offer-compare .offer-compare-table td { display: block; }
.offer-compare .offer-compare-table tr.offer-compare-head { display: none; }
.offer-compare .offer-compare-table tr.offer-compare-row { padding: 14px 16px; background: rgba(29, 53, 87, 0.4); border: 1px solid rgba(69, 123, 157, 0.25); border-radius: 8px; margin-bottom: 10px; }
.offer-compare .offer-compare-table th.offer-compare-cell,
.offer-compare .offer-compare-table td.offer-compare-cell { padding: 7px 0; font-size: 14px; font-weight: 400; color: #c0c8d4; line-height: 1.5; text-align: left; border-bottom: 1px solid rgba(69, 123, 157, 0.15); }
.offer-compare .offer-compare-table th.offer-compare-cell:last-child,
.offer-compare .offer-compare-table td.offer-compare-cell:last-child { border-bottom: none; }
.offer-compare .offer-compare-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #6b7f99; margin-bottom: 3px; }
.offer-compare .offer-compare-product { font-size: 16px; font-weight: 700; color: #ffffff; }
@media (min-width: 1024px) {
  .offer-compare .offer-compare-table tr.offer-compare-head { display: grid; grid-template-columns: 130px 130px 1fr 1fr 130px; gap: 14px; padding: 0 16px 10px; }
  .offer-compare .offer-compare-table th.offer-compare-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #6b7f99; text-align: left; }
  .offer-compare .offer-compare-table tr.offer-compare-row { display: grid; grid-template-columns: 130px 130px 1fr 1fr 130px; gap: 14px; align-items: start; }
  .offer-compare .offer-compare-table th.offer-compare-cell,
  .offer-compare .offer-compare-table td.offer-compare-cell { padding: 0; border-bottom: none; }
  .offer-compare .offer-compare-table .offer-compare-label { display: none; }
}
/* PAYMENTS TABLE, added 2026-09-11. Deliberately the SAME responsive shape as
   .offer-compare above: the table is reset to display:block and stacks with a
   per-cell label on mobile, then becomes a grid from 1024px.
   THE SAME SPECIFICITY RULE APPLIES - the reset matches bare tr/th/td at
   (0,2,1), so every override must qualify the element (tr.payments-row,
   td.payments-cell) or it silently never applies. */
/* WIDTH, tightened 2026-09-11 (Mark: "big gap between the 3rd and 4th
   columns, it's wasted space"). The 3rd column was 1fr, so it absorbed every
   spare pixel of the 1136px container and shoved "Valid for Welcome Offers"
   out to the far right. All four tracks are now fixed and the block is capped
   just above their total, so the table sits at its natural width instead of
   being stretched.
   NARROWED AGAIN 2026-09-11 when the text brand names came out of the method
   column (Mark: "we only need the logos"). Col 1 was 220px to fit a logo pair
   PLUS a name; the widest content is now the Visa+Mastercard pair at
   2x54 + 4 gap = 112px, with the 11px uppercase "PAYMENT METHOD" heading the
   real constraint at roughly 116px - hence 140px, not 120px. New total
   140+100+190+190 + 3x14 gap + 32 row padding = 694, so max-width is 700. */
.payments { margin: 24px auto 28px; max-width: 700px; background: rgba(29, 53, 87, 0.35); border: 1px solid rgba(69, 123, 157, 0.35); border-radius: 10px; overflow: hidden; }
.payments .payments-caption { display: block; padding: 11px 16px; background: rgba(69, 123, 157, 0.26); border-bottom: 1px solid rgba(69, 123, 157, 0.35); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; text-align: center; line-height: 1.35; }
.payments .payments-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.payments .payments-table,
.payments .payments-table thead,
.payments .payments-table tbody,
.payments .payments-table tr,
.payments .payments-table th,
.payments .payments-table td,
.payments .payments-table caption { display: block; }
.payments .payments-table tr.payments-head { display: none; }
.payments .payments-table tr.payments-row { padding: 12px 16px; border-bottom: 1px solid rgba(69, 123, 157, 0.28); }
.payments .payments-table tr.payments-row:last-child { border-bottom: none; }
.payments .payments-table th.payments-cell,
.payments .payments-table td.payments-cell { padding: 7px 0; font-size: 14px; font-weight: 400; color: #c0c8d4; line-height: 1.5; text-align: left; border-bottom: 1px solid rgba(69, 123, 157, 0.1); }
.payments .payments-table th.payments-cell:last-child,
.payments .payments-table td.payments-cell:last-child { border-bottom: none; }
.payments .payments-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #6b7f99; margin-bottom: 3px; }
/* The logos are LIGHT-BACKGROUND PNGs copied from bbs.co.uk - Skrill's mean
   luminance is 21 - so each sits on a white chip, exactly as operator logos do
   in css/operators.css. Without the chip they vanish into the navy. */
.payments .pay-brand { display: flex; align-items: center; gap: 10px; }
.payments .pay-logos { display: flex; gap: 4px; flex-shrink: 0; }
.payments .pay-logo { width: 54px; height: 26px; padding: 3px 5px; background: #ffffff; border-radius: 4px; object-fit: contain; flex-shrink: 0; }
.payments .pay-name { font-size: 15px; font-weight: 700; color: #ffffff; }
.payments .pay-yes { color: #16c784; font-size: 18px; font-weight: 700; line-height: 1; }
.payments .pay-no { color: #E63946; font-size: 18px; font-weight: 700; line-height: 1; }
.payments .pay-muted { color: #6b7f99; }
@media (min-width: 1024px) {
  .payments .payments-table tr.payments-head { display: grid; grid-template-columns: 140px 100px 190px 190px; gap: 14px; padding: 11px 18px; background: rgba(69, 123, 157, 0.12); border-bottom: 1px solid rgba(69, 123, 157, 0.3); }
  /* nowrap so "Valid for Welcome Offers" stays on one line; its 190px track
     is sized for it. */
  .payments .payments-table th.payments-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #6b7f99; text-align: left; white-space: nowrap; }
  .payments .payments-table tr.payments-row { display: grid; grid-template-columns: 140px 100px 190px 190px; gap: 14px; align-items: center; padding: 13px 18px; }
  .payments .payments-table th.payments-cell,
  .payments .payments-table td.payments-cell { padding: 0; border-bottom: none; }
  .payments .payments-table .payments-label { display: none; }
}
.licence-panel { padding: 18px 20px; background: rgba(29, 53, 87, 0.4); border: 1px solid rgba(69, 123, 157, 0.25); border-left: 3px solid #A8DADC; border-radius: 8px; margin: 20px 0; }
.licence-panel .licence-panel-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #A8DADC; margin-bottom: 12px; }
.licence-panel .licence-panel-row { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 7px 0; font-size: 14px; color: #c0c8d4; line-height: 1.5; border-bottom: 1px solid rgba(69, 123, 157, 0.15); }
.licence-panel .licence-panel-row:last-child { border-bottom: none; }
.licence-panel .licence-panel-term { font-weight: 700; color: #ffffff; }
.review-multi .faq .faq-question { position: relative; padding-right: 46px; }
.review-multi .faq .faq-question::after { content: ""; position: absolute; top: 50%; right: 20px; width: 16px; height: 16px; margin-top: -8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23457B9D' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px 16px; transition: transform 0.3s; }
.review-multi .faq .faq-item.active .faq-question::after { transform: rotate(180deg); }

/* SUPPORT CHANNELS TABLE, added 2026-09-23. A real three-column grid at
   EVERY width, which is where it parts company with .payments above.
   .payments stacks on mobile because its rows carry payment logos across
   four tracks; this one is three short text columns, and stacking made
   eight rows 1634px tall on a 390px screen against 445px as a grid.
   THE TRACKS ARE MEASURED. Rendered widths at 390px: AVAILABLE is 69 at
   11px and 59 at 10px, RESPONSE TIME 99 and 85, the 13px values top out
   at 99 ("Within 5 minutes"), the bold channel at 81 ("Contact form").
   A first attempt at 1fr/34/116 with 11px headings put AVAILABLE straight
   through the next column. At 1fr/62/100, gap 8, 10px headings, the row's
   inner width of 330 leaves the channel 150, and 260 at 320px leaves 82
   against that 81 - so it holds all the way down.
   THE SPECIFICITY RULE from .payments still applies: the display:block
   reset matches bare tr/th/td at (0,2,1), so every override qualifies the
   element (tr.support-row, td.support-cell). */
.support { margin: 24px auto 28px; max-width: 500px; background: rgba(29, 53, 87, 0.35); border: 1px solid rgba(69, 123, 157, 0.35); border-radius: 10px; overflow: hidden; }
.support .support-caption { display: block; padding: 11px 16px; background: rgba(69, 123, 157, 0.26); border-bottom: 1px solid rgba(69, 123, 157, 0.35); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; text-align: center; }
.support .support-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.support .support-table,
.support .support-table thead,
.support .support-table tbody,
.support .support-table tr,
.support .support-table th,
.support .support-table td,
.support .support-table caption { display: block; }
.support .support-table tr.support-head { display: grid; grid-template-columns: 1fr 62px 100px; gap: 8px; padding: 9px 14px; background: rgba(69, 123, 157, 0.12); border-bottom: 1px solid rgba(69, 123, 157, 0.3); }
.support .support-table th.support-heading { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7f99; text-align: left; line-height: 1.3; }
.support .support-table tr.support-row { display: grid; grid-template-columns: 1fr 62px 100px; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(69, 123, 157, 0.18); }
.support .support-table tr.support-row:last-child { border-bottom: none; }
/* The tick sits under its heading rather than hard left of a 62px track. */
.support .support-table tr.support-head th:nth-child(2),
.support .support-table tr.support-row td:nth-child(2) { text-align: center; }
.support .support-table th.support-cell,
.support .support-table td.support-cell { padding: 0; font-size: 13px; font-weight: 400; color: #c0c8d4; line-height: 1.45; text-align: left; border-bottom: none; }
/* The per-cell labels are kept in the markup for assistive tech and for any
   future stacked variant; nothing stacks here, so they never show. */
.support .support-label { display: none; }
.support .support-channel { font-weight: 700; color: #ffffff; }
.support .sup-yes { color: #16c784; font-size: 17px; font-weight: 700; line-height: 1; }
.support .sup-no { color: #E63946; font-size: 17px; font-weight: 700; line-height: 1; }
.support .sup-muted { color: #6b7f99; }
@media (min-width: 768px) {
  .support .support-table tr.support-head { grid-template-columns: 1fr 80px 120px; gap: 10px; padding: 10px 16px; }
  .support .support-table tr.support-row { grid-template-columns: 1fr 80px 120px; gap: 10px; padding: 11px 16px; }
  .support .support-table th.support-heading { font-size: 11px; letter-spacing: 1px; }
}
@media (min-width: 1024px) {
  .support .support-table tr.support-head { grid-template-columns: 150px 100px 190px; gap: 14px; padding: 11px 18px; }
  .support .support-table th.support-heading { white-space: nowrap; }
  .support .support-table tr.support-row { grid-template-columns: 150px 100px 190px; gap: 14px; padding: 13px 18px; }
  .support .support-table th.support-cell,
  .support .support-table td.support-cell { font-size: 14px; }
  .support .support-table .sup-yes,
  .support .support-table .sup-no { font-size: 18px; }
}

/* SUPPORT CHANNEL ICONS, added 2026-09-23. Backgrounds on an empty span,
   NOT inline svg in post_content: an svg element there survives a direct
   DB write but not a wp-admin save, where KSES strips the element and
   leaves the path data as visible text. Same approach as the FAQ chevron
   further up this file.
   Monochrome in the accent rather than brand colours - three brand palettes
   beside five neutral glyphs reads as a mess on the navy card, and every
   one of those brand guidelines allows a single-colour mark. X and Facebook
   are the real marks and so are filled; the rest are stroked at 2 to match
   their weight. */
.support .support-table th.support-cell { display: flex; align-items: center; gap: 7px; }
.support .sup-ico { flex: 0 0 auto; width: 17px; height: 17px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.support .sup-ico-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8DADC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2.5'/%3E%3Cline x1='10.8' y1='18.6' x2='13.2' y2='18.6'/%3E%3C/svg%3E"); }
.support .sup-ico-email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8DADC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 12v1.6a2.4 2.4 0 0 0 4.8 0V12a8.8 8.8 0 1 0-3.4 6.97'/%3E%3C/svg%3E"); }
.support .sup-ico-x { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A8DADC'%3E%3Cpath d='M18.9 2.2h3.4l-7.4 8.5L23.6 22h-6.8l-5.3-7-6.1 7H1.9l7.9-9L.8 2.2h7l4.8 6.4zm-1.2 17.7h1.9L7.2 4.2H5.2z'/%3E%3C/svg%3E"); }
.support .sup-ico-instagram { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8DADC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='2.8' width='18.4' height='18.4' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.15' fill='%23A8DADC' stroke='none'/%3E%3C/svg%3E"); }
.support .sup-ico-facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A8DADC'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.52 1.5-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.45 2.91h-2.33V22c4.78-.76 8.44-4.92 8.44-9.94z'/%3E%3C/svg%3E"); }
.support .sup-ico-chat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8DADC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5v-1.4a8 8 0 0 1 16 0v1.4'/%3E%3Crect x='2.2' y='13' width='4.2' height='6.2' rx='1.6'/%3E%3Crect x='17.6' y='13' width='4.2' height='6.2' rx='1.6'/%3E%3Cpath d='M19.7 19.2v.6a2.8 2.8 0 0 1-2.8 2.8H13.4'/%3E%3C/svg%3E"); }
.support .sup-ico-form { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8DADC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.2 2.8H6.2a2 2 0 0 0-2 2v14.4a2 2 0 0 0 2 2h7'/%3E%3Cline x1='7.8' y1='8' x2='13.4' y2='8'/%3E%3Cline x1='7.8' y1='12' x2='11.2' y2='12'/%3E%3Cpath d='M19.3 9.6 21.9 12.2l-6.1 6.1H13.2v-2.6z'/%3E%3C/svg%3E"); }
.support .sup-ico-faq { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8DADC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4.5'/%3E%3Cpath d='M9.5 9.4a2.7 2.7 0 1 1 3.1 3.1v1.5'/%3E%3Ccircle cx='12.2' cy='17.1' r='1.1' fill='%23A8DADC' stroke='none'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) {
  .support .sup-ico { width: 19px; height: 19px; }
}

/* REVIEW SCREENSHOTS, added 2026-09-23 - the first content images on this
   template (page 129 sport section). Operator screenshots, 1072px wide to
   match the measured content column, JPEG because the live sync drops
   .webp. Same navy panel as .payments and .support so screenshots and
   tables read as one set. width/height sit on the <img> in post_content;
   height:auto keeps that ratio at every column width with no layout shift. */
/* FRAMED 2026-09-23 (Mark: "so they do not just hang there"): the image
   sits inset on a navy mat with its own radius and hairline, the frame has
   a soft drop shadow, and the caption carries an accent bar instead of a
   rule. The mat also trims the desktop display width to 1102px, nearer
   the 1072px files, so less upscaling. */
.review-shot { margin: 26px 0 30px; padding: 10px 10px 0; background: linear-gradient(180deg, rgba(29, 53, 87, 0.62) 0%, rgba(17, 34, 56, 0.62) 100%); border: 1px solid rgba(69, 123, 157, 0.42); border-radius: 14px; box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(168, 218, 220, 0.1); }
.review-shot img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px rgba(168, 218, 220, 0.16), 0 6px 18px -6px rgba(0, 0, 0, 0.55); }
.review-shot figcaption { display: flex; align-items: flex-start; gap: 10px; padding: 11px 4px 12px; font-size: 13px; line-height: 1.45; color: #A8DADC; }
.review-shot figcaption::before { content: ""; flex: 0 0 auto; width: 3px; height: 1.1em; margin-top: 0.2em; border-radius: 2px; background: #A8DADC; opacity: 0.8; }
@media (min-width: 1024px) {
  .review-shot { padding: 16px 16px 0; }
  .review-shot figcaption { padding: 13px 4px 15px; font-size: 14px; }
}

/* NARROW SCREENSHOTS, added 2026-09-23 for the safer gambling shot on page
   129. Its source is an 860px-wide card, so stretching it to the 1136px
   column would blur the text. Shown at its own width or 720px, whichever
   is smaller, and centred; full width on mobile as normal. */
.review-shot.review-shot-narrow { max-width: 720px; margin-left: auto; margin-right: auto; }