/* ═══════════════════════════════════════════════════════════
   99Exch — stylesheet
   Palette lifted from the live site: navy chrome, gold logo,
   Betfair-style blue (back) / pink (lay) odds cells.
   ═══════════════════════════════════════════════════════════ */

:root{
  --navy:        #12358a;
  --navy-dk:     #0d2a6e;
  --navy-bar:    #1b3f9b;
  --navy-deep:   #071c50;
  --gold:        #ffc21a;
  --gold-dk:     #f0a500;
  --back:        #72bbef;   /* blue  — back odds */
  --back-h:      #57aae8;
  --lay:         #faa9ba;   /* pink  — lay odds  */
  --lay-h:       #f78ea3;
  --page:        #d9dadd;
  --card:        #ffffff;
  --line:        #d5d9e2;
  --ink:         #16181d;
  --ink-soft:    #5b6472;
  --live:        #24c168;
  --time:        #d8362a;
  --radius:      4px;
  --hdr-h:       54px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Visible to search engines and screen readers, not on screen.
   Used for the homepage <h1>: the exchange layout has nowhere to
   put a headline without breaking it, but the page still needs one. */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:14px/1.45 "Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
svg{ width:100%; height:100%; fill:currentColor; }

/* shared page container */
.hdr-in,.strip-in,.mainnav-in,.sportrail-in,.page,.ftr-in,.match-strip{
  max-width:1400px; margin-inline:auto; width:100%;
}

/* ═══════════ HEADER ═══════════ */
.hdr{
  background:#fff;
  border-bottom:3px solid var(--navy);
  position:sticky; top:0; z-index:60;
  box-shadow:0 1px 6px rgba(0,0,0,.18);
}
.hdr-in{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px; min-height:var(--hdr-h);
}
.ico-btn{
  width:34px; height:34px; padding:6px; flex:none;
  background:none; border:0; color:var(--navy);
}
.logo{ flex:none; }
.logo img{ height:38px; width:auto; }

.hdr-right{
  margin-left:auto; display:flex; align-items:center; gap:10px; position:relative;
}
.wallet{
  display:flex; align-items:center; gap:6px;
  font-weight:700; color:var(--navy-deep);
}
.wallet-ico{ width:20px; height:20px; flex:none; }
.bal{ font-variant-numeric:tabular-nums; }

.user-chip{
  display:flex; align-items:center; gap:6px;
  background:none; border:0; padding:2px 0;
  font-size:13px; color:var(--navy);
}
.user-chip .exp{ color:var(--ink-soft); }
.user-chip .uname{ text-decoration:underline; font-weight:600; }
.caret{ width:16px; height:16px; }

.auth-btns{ display:flex; gap:8px; }
.btn{
  border:0; border-radius:var(--radius);
  padding:8px 16px; font-weight:700; font-size:13px; white-space:nowrap;
}
.btn-ghost{ background:#eef1f7; color:var(--navy); border:1px solid var(--line); }
.btn-gold{
  background:linear-gradient(180deg,var(--gold),var(--gold-dk));
  color:#3a2600; box-shadow:0 1px 3px rgba(0,0,0,.25);
}

.user-menu{
  position:absolute; top:calc(100% + 12px); right:0; z-index:70;
  background:#fff; border:1px solid var(--line); border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  min-width:200px; padding:6px 0;
}
.user-menu a{ display:block; padding:9px 16px; font-size:13px; }
.user-menu a:hover{ background:#f1f4fa; }
.user-menu .danger{ color:#c62828; border-top:1px solid var(--line); margin-top:4px; }

/* ═══════════ SEARCH + MARQUEE ═══════════ */
.strip-search{ background:#fff; border-bottom:1px solid var(--line); }
.strip-in{ display:flex; align-items:center; gap:10px; padding:6px 12px; }

.search-btn{
  width:36px; height:36px; flex:none; padding:8px;
  border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--navy);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}

/* min-width:0 is load-bearing — without it the nowrap track
   forces the whole page wider than the viewport on mobile */
.marquee{ flex:1; min-width:0; overflow:hidden; }
.marquee-track{
  display:inline-flex; gap:48px; white-space:nowrap;
  font-weight:700; font-size:13px; color:var(--navy-deep);
  animation:slide 26s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* search overlay */
.search-panel{
  position:fixed; inset:0; z-index:90;
  background:rgba(6,16,42,.55); backdrop-filter:blur(2px);
  padding:70px 14px;
}
.search-panel-in{
  max-width:620px; margin-inline:auto; position:relative;
  background:#fff; border-radius:8px; padding:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.search-panel input{
  width:100%; padding:12px 40px 12px 14px; font-size:15px;
  border:2px solid var(--navy); border-radius:6px; outline:none;
}
.search-close{
  position:absolute; top:22px; right:24px;
  background:none; border:0; font-size:26px; line-height:1; color:var(--ink-soft);
}
.search-results{ max-height:52vh; overflow-y:auto; margin-top:10px; }
.sr-item{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:5px; }
.sr-item:hover{ background:#f1f4fa; }
.sr-item img{ width:64px; height:38px; object-fit:cover; border-radius:3px; flex:none; }
.sr-item b{ font-size:13px; }
.sr-item span{ font-size:11px; color:var(--ink-soft); display:block; }
.sr-empty{ padding:16px; text-align:center; color:var(--ink-soft); font-size:13px; }

/* ═══════════ LIVE MATCH STRIP ═══════════ */
.match-strip{
  display:flex; gap:8px; padding:8px 12px;
  overflow-x:auto; scrollbar-width:none;
  background:#e8eaee;
}
.match-strip::-webkit-scrollbar{ display:none; }
.ms-card{
  flex:0 0 auto; min-width:236px;
  background:linear-gradient(180deg,#2b4fa8,#1a3684);
  color:#fff; border-radius:var(--radius); padding:7px 10px;
  border:1px solid rgba(255,255,255,.15);
}
.ms-top{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.ms-top img{ width:15px; height:15px; opacity:.9; flex:none; }
.ms-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-time{
  margin-top:5px; display:inline-block;
  background:var(--live); color:#04351b;
  font-size:11px; font-weight:800; padding:2px 8px; border-radius:3px;
}

/* ═══════════ MAIN NAV ═══════════ */
.mainnav{ background:var(--navy); }
.mainnav-in{ display:flex; }
.mn-item{
  flex:1; background:none; border:0;
  padding:13px 6px; color:#fff;
  font-size:13px; font-weight:700; letter-spacing:.4px; white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.22);
  position:relative;
}
.mn-item:last-child{ border-right:0; }
.mn-item.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--gold);
}

/* ═══════════ SPORT RAIL ═══════════ */
.sportrail{ background:var(--navy-dk); }
.sportrail-in{
  display:flex; overflow-x:auto; scrollbar-width:none;
}
.sportrail-in::-webkit-scrollbar{ display:none; }
.sp{
  flex:0 0 auto; background:none; border:0;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:9px 16px; color:#fff; position:relative;
  font-size:10.5px; font-weight:700; letter-spacing:.3px;
}
.sp-ico{ width:26px; height:26px; display:grid; place-items:center; }
.sp-ico img{ width:26px; height:26px; object-fit:contain; }
.sp-ico .emoji{ font-size:22px; line-height:1; }
/* the sport icons are white-on-transparent PNGs, so on a light
   active/hot chip they must be inverted to stay visible */
.sp.is-active{ background:#fff; color:var(--navy-deep); }
.sp.is-hot{ background:var(--gold); color:#3a2600; }
.sp.is-active .sp-ico img,
.sp.is-hot .sp-ico img{ filter:invert(1); }
.sp-new{
  position:absolute; top:2px; right:6px;
  background:#e53935; color:#fff; font-size:8px; font-weight:800;
  padding:1px 4px; border-radius:2px; letter-spacing:.5px;
}

/* ═══════════ PAGE ═══════════ */
.page{ padding:0 0 78px; background:var(--card); }

/* homepage H1 */
.page-h1{
  margin:0; padding:12px 14px;
  background:#fff; border-bottom:1px solid var(--line);
  font-size:17px; font-weight:800; color:var(--navy-deep); letter-spacing:.2px;
}
@media (max-width:640px){
  .page-h1{ font-size:14px; padding:10px; }
}

/* filters */
.filterbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; background:#fff; border-bottom:1px solid var(--line);
}
.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  background:#fff; border:1px solid var(--navy); color:var(--navy);
  border-radius:999px; padding:5px 15px; font-size:12px; font-weight:700;
}
.pill.is-on{ background:var(--navy); color:#fff; }
/* odds feed indicator */
.feed{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.5px; color:var(--ink-soft);
}
.feed-dot{
  width:8px; height:8px; border-radius:50%; background:#9aa3b2; flex:none;
}
.feed.is-live .feed-dot{ background:var(--live); box-shadow:0 0 0 3px rgba(36,193,104,.22); animation:pulse 1.6s infinite; }
.feed.is-live{ color:#12833f; }
.feed.is-err .feed-dot{ background:#d8362a; }
.feed.is-err{ color:#c62828; }
@keyframes pulse{ 50%{ opacity:.45; } }

.viewby{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; }
.viewby select{
  border:1px solid var(--navy); background:var(--navy); color:#fff;
  border-radius:var(--radius); padding:5px 9px; font-size:12px; font-weight:700;
}

/* ═══════════ ODDS BOARD ═══════════ */
.board{ background:#fff; }
.board-head{
  display:flex; align-items:center;
  background:#eef1f7; border-bottom:1px solid var(--line);
  font-size:11px; font-weight:800; color:var(--ink-soft);
}
.bh-event{ flex:1; padding:7px 12px; }
/* gap + padding here must mirror .ev-odds so 1/X/2 sit over their cells */
.bh-cols{ display:flex; flex:none; gap:2px; padding-right:6px; }
.bh-cols span{ width:112px; text-align:center; padding:7px 0; }

.ev{ border-bottom:1px solid var(--line); }
.ev-in{ display:flex; align-items:center; padding:8px 0 8px 12px; gap:10px; }
.ev-main{ flex:1; min-width:0; }
.ev-name{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-meta{ display:flex; align-items:center; gap:7px; margin-top:3px; }
.ev-date{ font-size:11.5px; color:var(--time); font-weight:600; }

.ev-tags{ display:flex; align-items:center; gap:6px; flex:none; padding-right:8px; }
.dot-live{ width:9px; height:9px; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px rgba(36,193,104,.22); }
.tag-img{ height:13px; width:auto; }
.tag-tv{ width:15px; height:15px; color:var(--navy); }
.tag-p{ height:15px; width:15px; }
.pin{ width:14px; height:14px; color:#9aa3b2; background:none; border:0; padding:0; }
.pin.is-on{ color:var(--gold-dk); }

/* odds cells */
.ev-odds{ display:flex; flex:none; gap:2px; padding-right:6px; }
.oc{ display:flex; gap:2px; width:112px; }
.oc b{
  flex:1; text-align:center; padding:9px 0;
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  border-radius:2px; transition:background .15s;
}
.oc .back{ background:var(--back); }
.oc .lay{  background:var(--lay); }
.oc .back:hover{ background:var(--back-h); }
.oc .lay:hover{  background:var(--lay-h); }
/* directional price moves — green drifting up, red drifting down */
.oc .up{ animation:up .45s ease; }
.oc .down{ animation:down .45s ease; }
@keyframes up{   0%{ background:#8ef0b0; } 100%{} }
@keyframes down{ 0%{ background:#ffa8a0; } 100%{} }

/* ═══════════ ANIMATED CATEGORY RAIL ═══════════ */
.catrail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:2px; padding:2px; background:#fff;
}
.cat{ position:relative; overflow:hidden; }
.cat img{ width:100%; aspect-ratio:364/280; object-fit:cover; }
.cat:hover img{ transform:scale(1.04); transition:transform .3s; }

/* ═══════════ SECTIONS + TILE GRIDS ═══════════ */
.sec{ margin-top:2px; }
.sec-bar{
  background:var(--navy-bar);
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px;
}
.sec-bar h2{
  margin:0; font-size:13.5px; font-weight:800; letter-spacing:.7px;
  color:#fff; text-transform:uppercase;
}
.sec-more{ font-size:11.5px; font-weight:700; color:var(--gold); }

.tilegrid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; padding:2px; background:#fff;
}
.tile{ position:relative; overflow:hidden; background:#000; display:block; }
.tile img{ width:100%; aspect-ratio:500/299; object-fit:cover; transition:transform .3s; }
.tilegrid.wide .tile img{ aspect-ratio:658/423; }
.tile:hover img{ transform:scale(1.05); }
.tile-cap{
  display:block; background:var(--navy-bar); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.4px;
  text-align:center; padding:6px 4px; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tile:hover .tile-cap{ background:var(--gold); color:#3a2600; }
/* star stays out of the way until you reach for it */
.tile-fav{
  position:absolute; top:6px; right:6px; z-index:2;
  width:26px; height:26px; padding:5px; border:0; border-radius:50%;
  background:rgba(3,12,36,.55); color:#fff;
  opacity:0; transition:opacity .18s;
}
.tile:hover .tile-fav,
.tile-fav:focus-visible,
.tile-fav.is-on{ opacity:1; }
.tile-fav.is-on{ color:var(--gold); }

/* touch devices have no hover, so keep it faintly visible */
@media (hover:none){
  .tile-fav{ opacity:.55; }
}

/* ═══════════════════════════════════════════════════════════
   CONTENT PAGES (About, Terms, Privacy, KYC, …)
   ═══════════════════════════════════════════════════════════ */
.doc-hero{ background:var(--navy); color:#fff; padding:22px 16px 20px; }
.doc-hero-in{ max-width:960px; margin-inline:auto; }
.doc-hero h1{ margin:0; font-size:26px; font-weight:800; letter-spacing:.3px; }
.crumb{ font-size:12px; opacity:.8; margin-bottom:7px; }
.crumb a:hover{ color:var(--gold); }

.doc{
  max-width:960px; margin:0 auto 40px; background:#fff;
  padding:30px 26px 40px; font-size:14.5px; line-height:1.75; color:#25292f;
}
.doc-updated{
  font-size:12px; color:var(--ink-soft); border-bottom:1px solid var(--line);
  padding-bottom:14px; margin-bottom:24px;
}
.doc h2{
  font-size:18px; font-weight:800; color:var(--navy-deep);
  margin:32px 0 10px; padding-left:11px; border-left:4px solid var(--gold);
}
.doc h2:first-of-type{ margin-top:0; }
.doc h3{ font-size:15px; font-weight:700; margin:20px 0 6px; color:var(--navy-deep); }
.doc p{ margin:0 0 13px; }
.doc ul,.doc ol{ margin:0 0 15px; padding-left:22px; }
.doc li{ margin-bottom:8px; }
.doc a{ color:#1552c9; text-decoration:underline; }
.doc strong{ color:var(--navy-deep); }

/* highlighted callout */
.doc-note{
  background:#f2f6ff; border-left:4px solid var(--navy);
  padding:14px 16px; margin:0 0 20px; border-radius:0 4px 4px 0; font-size:13.5px;
}
.doc-note.warn{ background:#fff6e8; border-left-color:var(--gold-dk); }

/* anything the operator must fill in before going live */
.fill{
  background:#ffe9a8; color:#5c4300; font-weight:700;
  padding:1px 6px; border-radius:3px; font-size:.92em; white-space:nowrap;
}

.doc-cta{
  display:inline-flex; align-items:center; gap:9px;
  background:#25d366; color:#04351b; font-weight:800;
  padding:11px 20px; border-radius:6px; margin-top:6px; text-decoration:none;
}
.doc-cta img{ width:22px; height:22px; }

.doc-toc{ background:#f6f8fc; border:1px solid var(--line); border-radius:5px; padding:14px 18px; margin-bottom:26px; }
.doc-toc h2{ margin:0 0 8px; font-size:13px; border:0; padding:0; }
.doc-toc ol{ margin:0; padding-left:20px; }
.doc-toc li{ margin-bottom:4px; font-size:13.5px; }

@media (max-width:640px){
  .doc-hero{ padding:16px 12px 14px; }
  .doc-hero h1{ font-size:20px; }
  .doc{ padding:22px 14px 32px; font-size:14px; }
  .doc h2{ font-size:16px; }
}

/* ═══════════ FOOTER ═══════════ */
.ftr{ background:var(--navy-deep); color:#c9d3e8; padding:26px 0 22px; }
.ftr-in{ padding:0 16px; text-align:center; }
.ftr-links{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px 22px; font-size:12.5px; margin-bottom:20px;
}
.ftr-links a:hover{ color:var(--gold); }
.ftr-badges{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:20px; padding:18px 0; border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
/* these badges are dark artwork — they need a light chip to read on navy */
.ftr-badges img{
  height:34px; width:auto;
  background:#fff; border-radius:5px; padding:4px 7px;
}
.ftr-note{ font-size:11.5px; line-height:1.7; max-width:720px; margin:16px auto 8px; opacity:.75; }
.ftr-copy{ font-size:11.5px; opacity:.6; margin:0; }

/* ═══════════ BOTTOM NAV (mobile only) ═══════════ */
.botnav{ display:none; }

/* ═══════════ FLOATING WHATSAPP ═══════════ */
.wa-float{
  position:fixed; right:14px; bottom:16px; z-index:80;
  width:64px; height:64px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform:translateY(-6px); } }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── tablet ── */
@media (max-width:900px){
  .tilegrid{ grid-template-columns:repeat(3,1fr); }
  .catrail{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); grid-auto-columns:auto; }
  .bh-cols span,.oc{ width:96px; }
}

/* ── mobile ── */
@media (max-width:640px){
  :root{ --hdr-h:48px; }

  .hdr-in{ padding:5px 8px; gap:7px; }
  .logo img{ height:30px; }
  .auth-btns{ display:none; }
  .hdr-right{ flex-direction:column; align-items:flex-end; gap:1px; }
  .wallet{ font-size:15px; }
  .user-chip{ font-size:11.5px; gap:4px; }

  .strip-in{ padding:5px 8px; }
  .marquee-track{ font-size:11.5px; gap:34px; }
  .search-btn{ width:32px; height:32px; padding:7px; }

  .match-strip{ padding:6px 8px; gap:6px; }
  .ms-card{ min-width:186px; padding:6px 8px; }
  .ms-top{ font-size:11.5px; }
  .ms-time{ font-size:10px; }

  .mn-item{ padding:11px 4px; font-size:11px; letter-spacing:0; }
  .sp{ padding:8px 13px; font-size:9.5px; }

  .filterbar{ padding:8px; gap:7px; }
  .pill{ padding:4px 12px; font-size:11px; }
  .viewby{ font-size:11px; }

  /* odds board reflows: name on its own line, 1/X/2 beneath */
  .board-head{ display:none; }
  .ev-in{ flex-direction:column; align-items:stretch; gap:6px; padding:8px; }
  .ev-tags{ padding-right:0; }
  .ev-odds{ width:100%; gap:4px; padding-right:0; }
  .oc{ flex:1; width:auto; }
  .oc b{ padding:8px 0; font-size:12.5px; }

  .tilegrid{ grid-template-columns:repeat(2,1fr); }
  .catrail{ grid-template-columns:repeat(4,1fr); }
  .sec-bar{ padding:8px 10px; }
  .sec-bar h2{ font-size:12px; }
  .tile-cap{ font-size:9.5px; padding:5px 3px; }

  .page{ padding-bottom:132px; }

  /* bottom nav appears */
  .botnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:75;
    background:var(--navy); border-top:1px solid rgba(255,255,255,.15);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:7px 2px 6px; color:#c3cee8; font-size:9.5px; font-weight:700;
  }
  .bn svg{ width:21px; height:21px; }
  .bn.is-active{ color:var(--gold); }
  .bn-mid img{ width:34px; height:34px; margin-top:-14px; border-radius:50%; }

  .wa-float{ width:52px; height:52px; bottom:70px; right:10px; }

  .ftr{ padding:20px 0; }
  .ftr-links{ gap:7px 15px; font-size:11.5px; }
  .ftr-badges{ gap:14px; }
  .ftr-badges img{ height:26px; }
}

@media (max-width:380px){
  .tilegrid{ grid-template-columns:repeat(2,1fr); }
  .catrail{ grid-template-columns:repeat(3,1fr); }
  .mn-item{ font-size:10px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}