/* ═══════════════════════════════════════════════════════════════════════════
   BETEB — SITE-WIDE MOBILE LAYER
   Loaded on EVERY page, last in the cascade. Everything is inside
   @media (max-width:767px), so the desktop build is untouched.

   Built from a measured audit at 390×844, not from guesswork:
     · 33 tap targets under 32px on the homepage, 21 on football intel —
       nav links 14px tall, footer links 17px, "See all offers" 15px,
       the privacy link 11px, the age checkbox 17px
     · the intel tab bar scrolls but gives NO hint: Profiles, FPL and Tracker
       sat off-screen with nothing to suggest more tabs existed
     · stat tables scroll inside their box (good) but the team/player name
       scrolls away with everything else, so a row loses its identity

   Principle: grow the HIT AREA, never the type. Font sizes were already
   readable; what failed was reach and discoverability.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. TAP TARGETS ──────────────────────────────────────────────────────
     Apple and Google both put the comfortable minimum at ~44px. These links
     stay visually identical — the padding does the work, so nothing reflows. */
  nav li > a,
  nav .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 4px;
  }

  footer .ft-links a,
  footer .ft-legal a,
  .privacy-link,
  a[href*="privacy"],
  .sec-lk,
  .social-link,
  .affbox-more,
  .oc-more a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* pills and chips: 30px → 38px of reachable height without changing the look */
  /* deliberately NOT included: .fbp-link / .wim-plink and other in-table text links. They sit
     inside dense stat rows, and a 44px minimum there would tear the table apart. The row itself
     is the comfortable target; the link is a precision action within it. */
  .fpill,
  .of-pill,
  .bb-filters button,
  .fbm-btn,
  .fbg-btn,
  .tp-chip,
  .wim-dt-tab {
    min-height: 38px;
    padding-block: 8px;
  }

  /* a 17px checkbox is a miss waiting to happen — and its label should work too */
  /* any consent checkbox, not just the one inside .sub-age — the homepage's sits elsewhere */
  input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
  .sub-age label,
  .sub-age {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* ── 2. HORIZONTAL SCROLLERS: make it obvious there is more ───────────────
     The tab bar hid Profiles, FPL and Tracker entirely. A right-edge fade is
     the standard cue — it says "keep going" without stealing space. The fade
     is a pseudo-element pinned to the SCROLL CONTAINER's parent, so it does
     not travel with the content. */
  .i4-tabs,
  .sport-tab-bar,
  #rc-coursefilter,
  .fbp-modes,
  .tp-modes {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;      /* a swipe at the end must not pull the page */
    scroll-snap-type: x proximity;
  }
  .i4-tabs > *,
  .sport-tab-bar > * {
    scroll-snap-align: start;
  }

  .i4-tabwrap,
  .i4-tabs-outer {
    position: relative;
  }
  /* the fade itself — applied to the bar's own container where one exists */
  .i4-tabs::after {
    content: "";
    position: sticky;
    right: 0;
    flex: 0 0 28px;
    align-self: stretch;
    margin-left: -28px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(8, 10, 14, .92));
  }

  /* ── 3. STAT TABLES: keep the name, scroll the numbers ────────────────────
     A 13-column table in a 328px window is fine to scroll, but the row loses
     its identity the moment the first column leaves. Pinning it means you can
     always see WHOSE numbers you are reading. */
  .fbp-wrap,
  .wim-pt-wrap,
  .tr-wrap,
  [data-hscroll] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* 🚨 `intel-mobile.css` line 150 does `.i4-stage table { display:block; overflow-x:auto }` —
     a blanket rule that makes EVERY table its own horizontal scroller. Sensible in general, but
     it means a cell has nothing to stick to: the scrollport IS the table, so `left:0` sticky can
     never engage. These two tables already sit inside a wrapper that scrolls, so hand the scroll
     back to the wrapper and let the table be a table again. */
  .i4-stage .fbp-wrap > table.fbp-tbl {
    display: table !important;
    overflow: visible !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  /* 🚨 `position:sticky` is IGNORED on cells of a `border-collapse: collapse` table — the
     property applies (computed style reads "sticky") but the cell scrolls away regardless,
     which is exactly what it did: the team name slid from x=31 to x=-201. Switching to
     `separate` with zero spacing keeps the identical look and makes sticky actually stick. */
  /* 🚨 !important is load-bearing here. These table styles are injected by JS as a <style>
     element APPENDED TO <head> at runtime, so they land after this stylesheet and win on
     source order at equal specificity. Measured: border-collapse still computed as "collapse"
     and the pinned column slid from x=31 to x=-201. */
  .fbp-tbl {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .fbp-tbl th:first-child,
  .fbp-tbl td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 3;
    /* opaque, or the scrolling numbers show through the pinned column */
    background: #131c29 !important;
  }

  /* the header corner sits above both */
  .fbp-tbl thead th:first-child {
    z-index: 4;
  }
  /* a hairline so the pinned column reads as pinned rather than overlapping */
  .fbp-tbl th:first-child::after,
  .fbp-tbl td:first-child::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 1px;
    background: rgba(255, 255, 255, .10);
  }

  /* ── 4. THE OFFERS BELT ──────────────────────────────────────────────────
     It is drag-scrolled by pointer events, so the browser must keep vertical
     panning for the page while we take the horizontal axis. Without this a
     drag that starts on a card can trap the page. */
  .ocb-belt {
    touch-action: pan-y;
  }
  .offer-carousel {
    overscroll-behavior-x: contain;
  }

  /* ── 5. THE SEARCH DROPDOWN ──────────────────────────────────────────────
     It is positioned to the input in JS and capped to the space below, which
     works — this just stops a long list feeling stuck, and keeps rows at a
     comfortable height. */
  .fbp-ac,
  .tp-ac,
  .pdg-ac {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .fbp-row,
  .tp-row,
  .pdg-ac > * {
    min-height: 48px;
  }

  /* ── 6. READABILITY ──────────────────────────────────────────────────────
     Long terms text in offer cards and notes was running to very long measures
     on a narrow screen. */
  .fbp-warn,
  .fbp-note,
  .tr-warn {
    line-height: 1.55;
  }

  /* the compliance badges are the last small targets on the page; they are links, so they
     should still be comfortably tappable even though they are deliberately understated */
  /* The last three, each for its own reason:
       · the consent checkbox computes display:block with min-height:auto from a more specific rule
       · the "Privacy Policy" link is href="#" (JS-driven), so a URL selector never matched it
       · the feedback CTA sits in .hm-fbcta and matched none of the groups above */
  .sub-age input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
  }
  .sub-consent a,
  .hm-fbcta a {
    display: inline-flex !important;
    align-items: center;
    min-height: 40px !important;
  }

  /* safer-gambling links and the helpline number especially need to be easy to hit —
     someone reaching for these should not have to aim */
  .badge-gamstop,
  a[href*="begambleaware"],
  a[href*="gamstop"],
  a[href*="gamcare"],
  a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  /* never let a stray wide element scroll the whole page sideways */
  html, body {
    overflow-x: hidden;
  }
}