/*
Theme Name: Best Bookmakers Rank
Theme URI: https://dropingodds.com/
Author: TACTIC SOFTEC
Description: African bookmakers hub — tips, VIP groups, multi-language, PWA, SEO-ready.
Version: 6.0.0
Text Domain: best-bookmakers-rank
*/
:root{
  --bg:#0a0f0c;--card:#121a14;--text:#f2f7f3;--muted:#9bb0a3;
  --border:#1e2e24;--green:#22c55e;--lime:#a3e635;--gold:#fbbf24;
  --blue:#3b82f6;--pink:#ff2d95;--wa:#25d366;--tg:#2aabee;
  --nav:rgba(10,15,12,.97);
}
body.light{
  --bg:#f4f7f5;--card:#ffffff;--text:#122018;--muted:#5c6f64;
  --border:#d7e0da;--nav:rgba(255,255,255,.96);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;padding-bottom:90px;transition:background .3s,color .3s}
a{color:var(--lime);text-decoration:none}a:hover{opacity:.9}
.wrap{width:min(1100px,94%);margin:0 auto}
@keyframes liveDot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.35)}50%{box-shadow:0 0 16px 2px rgba(34,197,94,.35)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:6px;animation:liveDot 1s infinite}
.glow-btn{animation:glow 2.4s ease-in-out infinite}
.float-card{animation:floaty 4s ease-in-out infinite}
.line-pulse{height:2px;border:0;background:linear-gradient(90deg,transparent,var(--green),var(--gold),var(--pink),transparent);background-size:200% 100%;animation:shimmer 3s linear infinite;margin:18px 0}
.clockbar{background:#0d1510;border-bottom:1px solid var(--border);padding:8px 0;font-size:.82rem}
body.light .clockbar{background:#eef5f0}
.clockbar-in{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.clock-main{font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;font-size:1.05rem}
.clock-meta{color:var(--muted)}
.nav{position:sticky;top:0;z-index:60;background:var(--nav);border-bottom:1px solid var(--border);backdrop-filter:blur(10px)}
.nav-in{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 0}
.logo{font-weight:900;font-size:1.05rem;background:linear-gradient(90deg,var(--green),var(--gold),var(--pink));-webkit-background-clip:text;color:transparent;background-size:200% auto;animation:shimmer 4s linear infinite}
.menu{display:flex;flex-wrap:wrap;gap:5px 9px;list-style:none;margin:0;padding:0;align-items:center}
.menu a,.menu button{color:var(--muted);font-weight:700;font-size:.74rem;background:none;border:0;cursor:pointer;padding:0}
.menu a:hover,.menu button:hover{color:var(--lime)}
.loc-pill,.tool-pill{background:#15241a;border:1px solid #2a4a35;border-radius:999px;padding:4px 9px;font-size:.7rem;font-weight:700;color:var(--gold)}
body.light .loc-pill,body.light .tool-pill{background:#e8f5ec;border-color:#b7dcc3;color:#166534}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;font-weight:800;border:0;cursor:pointer;text-align:center;font-size:.88rem;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-g{background:var(--green);color:#04140a}
.btn-y{background:var(--gold);color:#1a1200}
.btn-b{background:var(--blue);color:#fff}
.btn-wa{background:var(--wa);color:#04140a}
.btn-tg{background:var(--tg);color:#fff}
.btn-outline{border:1px solid var(--border);background:transparent;color:var(--text)}
.btn-sm{padding:7px 11px;font-size:.78rem}
.hero{padding:40px 0 26px;background:radial-gradient(ellipse at 15% 0%,#143222 0%,transparent 50%),radial-gradient(ellipse at 90% 40%,#2a2208 0%,transparent 40%)}
body.light .hero{background:radial-gradient(ellipse at 15% 0%,#d9f5e3 0%,transparent 50%),#f4f7f5}
.hero h1{font-size:clamp(1.5rem,4vw,2.35rem);line-height:1.15;margin:10px 0}
.hero h1 em{font-style:normal;color:var(--green)}
.hero p{color:var(--muted);max-width:680px}
.badge{display:inline-flex;align-items:center;background:#15241a;border:1px solid #2a4a35;border-radius:999px;padding:5px 10px;font-size:.74rem;font-weight:700;color:var(--gold)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
section{padding:36px 0;border-top:1px solid var(--border)}
section h2{margin:0 0 6px;font-size:1.3rem}
.sub{color:var(--muted);margin:0 0 14px;max-width:760px;font-size:.9rem}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid-2{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--green);transform:translateY(-3px)}
.card h3{margin:0 0 8px;color:var(--lime);font-size:.98rem}
.card p{margin:0;color:var(--muted);font-size:.88rem}
.book-grid{display:flex;flex-wrap:wrap;gap:12px}
.bcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;display:flex;flex-direction:column;flex:1 1 240px}
.logo-box{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;min-height:72px;border-radius:12px;margin-bottom:8px;border:1px solid var(--border)}
.logo-img.favicon-logo{width:48px;height:48px;border-radius:10px;object-fit:contain}
.brand-beside{font-weight:900;font-size:1.05rem;color:#0a0f0c}
.grade{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}
.pill{border-radius:8px;padding:4px 8px;font-weight:800;font-size:.68rem}
.pill-a{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.35)}
.pill-hot{background:rgba(251,191,36,.12);color:var(--gold);border:1px solid rgba(251,191,36,.35)}
.bcard .btn{margin-top:8px;width:100%}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tab,.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:#0d1510;color:var(--muted);font-weight:800;font-size:.8rem;cursor:pointer}
body.light .tab,body.light .chip{background:#fff}
.tab.active,.chip.active{background:var(--green);color:#04140a;border-color:var(--green)}
.widget-frame{width:100%;height:420px;border:1px solid var(--border);border-radius:12px;background:#0d1510;overflow:hidden;position:relative;transition:height .35s ease}
.widget-frame:hover,.widget-frame.is-open{height:780px;z-index:5}
.widget-frame iframe{width:100%;height:100%;border:0;background:#fff}
.widget-expand-hint{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(10,15,12,.88);color:var(--gold);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:.72rem;font-weight:800;pointer-events:none}
.tip-card{border-left:3px solid var(--green);padding-left:10px}
.motd{background:linear-gradient(135deg,#15241a,#1a2a10);border:1px solid #2a4a35;border-radius:16px;padding:16px;animation:glow 3s ease-in-out infinite}
body.light .motd{background:linear-gradient(135deg,#e8f8ee,#f7fff9)}
.table{width:100%;border-collapse:collapse;font-size:.84rem}
.table th,.table td{border-bottom:1px solid var(--border);padding:9px 6px;text-align:left}
.table th{color:var(--muted);font-size:.75rem}
.won{color:#4ade80;font-weight:800}.lost{color:#f87171;font-weight:800}
.bar{height:10px;background:#0d1510;border-radius:99px;overflow:hidden;margin:8px 0}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--lime))}
.calc input,.calc select{width:100%;padding:9px;border-radius:8px;border:1px solid var(--border);background:#0d1510;color:var(--text);margin:3px 0 8px}
body.light .calc input,body.light .calc select{background:#fff}
.calc label{font-size:.8rem;color:var(--muted);font-weight:700}
.calc-out{font-size:1.2rem;font-weight:900;color:var(--gold);margin-top:6px}
.acca-item{display:flex;gap:8px;align-items:center;margin:5px 0;font-size:.88rem}
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:70;background:color-mix(in srgb, var(--bg) 92%, transparent);border-top:1px solid var(--border);padding:9px;backdrop-filter:blur(8px)}
.sticky-in{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;max-width:1100px;margin:0 auto}
.sticky-logo{width:18px;height:18px;border-radius:4px;vertical-align:middle;margin-right:4px;background:#fff;object-fit:contain}
.footer{padding:24px;text-align:center;color:var(--muted);font-size:.82rem;border-top:1px solid var(--border)}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin:7px 0}
.faq summary{font-weight:800;cursor:pointer;color:var(--text);font-size:.92rem}
.faq p{color:var(--muted);margin:7px 0 0;font-size:.86rem}
.auto-note{font-size:.75rem;color:var(--muted);margin-top:8px}
.ticker-wrap{overflow:hidden;border:1px solid var(--border);border-radius:10px;background:#0d1510;margin-top:12px}
body.light .ticker-wrap{background:#fff}
.ticker{display:inline-flex;gap:28px;white-space:nowrap;padding:10px 0;animation:ticker 28s linear infinite;font-weight:700;font-size:.85rem;color:var(--muted)}
.ticker b{color:var(--lime)}
.float-social{position:fixed;right:12px;bottom:88px;z-index:80;display:flex;flex-direction:column;gap:8px}
.float-social a{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.float-social .wa{background:var(--wa);color:#04140a}
.float-social .tg{background:var(--tg)}
.rg{font-size:.78rem;color:var(--muted);text-align:center;padding:10px}
.steps{margin:0;padding-left:18px;color:var(--muted);font-size:.88rem}
.steps li{margin:6px 0}
.vip{border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
[data-league].hide{display:none!important}
.pwa-banner{display:none;position:fixed;left:12px;right:12px;bottom:78px;z-index:85;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pwa-banner.show{display:block}