/* =====================================================================
   INSTANTDATAPLUG — Dark + Blue theme (black background, blue buttons)
   Loaded AFTER style.css. Overrides the visual layer only; all functional
   behaviour (bundle chooser, payments, wallet, agent) and the network
   brand colours (MTN yellow / Telecel red / AirtelTigo red→blue) are kept.
   ===================================================================== */

:root{
  --bg1:#070a11; --bg2:#0b1019;
  --accent:#2f80ed; --accent2:#38bdf8;       /* blue */
  --accent-soft:rgba(56,189,248,0.14);
  --text:#dbe2ec; --card:#111623; --border:#212b3b; --muted:#8a97aa; --ash-dark:#c6cfdb;
  --danger:#f87171; --ok:#34d399; --warn:#fbbf24;
  --ink:#e9edf3; --ink-soft:#b9c2ce; --paper:#0b1019;
  --grad:linear-gradient(90deg,#2f80ed,#38bdf8,#7dd3fc);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Base ---------- */
*{font-family:var(--sans);}
body{background:linear-gradient(180deg,var(--bg1),var(--bg2)); color:var(--text);}
a{color:var(--accent2);}
code{background:#1a2230;}

h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); letter-spacing:-0.01em;}
.logo{font-family:var(--serif); font-weight:700;}
.logo-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.logo-text.plain{background:none; -webkit-text-fill-color:currentColor;}
nav a{color:var(--ash-dark);}
nav a:hover{color:var(--accent2);}

/* ---------- Header / top bar ---------- */
header{background:rgba(11,16,25,0.88); border-bottom:1px solid var(--border); backdrop-filter:blur(12px);}
.top-bar{background:#0d1220; border-bottom:1px solid var(--border); color:var(--muted);}
.top-bar a{color:var(--accent2);}

/* ---------- Buttons ---------- */
.btn{background:linear-gradient(90deg,#2f80ed,#38bdf8); color:#fff; box-shadow:0 8px 22px rgba(47,128,237,0.35);}
.btn:hover{box-shadow:0 12px 28px rgba(47,128,237,0.45); transform:translateY(-1px);}
.btn-secondary{background:#111623; color:var(--ash-dark); border:1px solid var(--border); box-shadow:0 4px 14px rgba(0,0,0,0.35);}
.btn-danger{background:linear-gradient(90deg,#ef4444,#f87171); box-shadow:0 8px 20px rgba(239,68,68,0.3);}
.btn-ghost{background:#1a2230; color:var(--ash-dark); border:1px solid var(--border); box-shadow:none;}

/* ---------- Sections (boxed cards) ---------- */
.section{background:var(--card); border:1px solid var(--border); border-radius:26px;
  box-shadow:0 26px 66px rgba(0,0,0,0.45); max-width:1160px; margin:24px auto; padding:48px 6%;}
.section h2{color:var(--ink); font-size:34px; font-weight:700; margin-bottom:10px;}
.section > p{color:var(--muted); margin-bottom:26px; font-size:16px;}
.section.explore-section{padding:44px 6%;}
.section.stats-section{max-width:100%; margin:26px 0; border:none; border-radius:0; box-shadow:none; padding:56px 8%;}
.section.product-section{max-width:1180px; padding:40px 5%;}
.section#receipt{padding:40px 6%;}
.modal-section{background:transparent; border:none; box-shadow:none; max-width:none; margin:0; padding:0; border-radius:0;}
.product-section .card,.info-card{background:var(--card); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 18px 50px rgba(0,0,0,0.35);}
.info-card h3{color:var(--ink);}

/* ---------- Provider & package selection ---------- */
.provider-btn{background:#0d1220; color:var(--ash-dark); border:1px solid var(--border);}
.provider-btn.active,.provider-btn:hover{border-color:var(--accent2); background:var(--accent-soft); color:#9ed9ff;}
.tag{background:var(--accent-soft); color:#9ed9ff;}

/* ---------- Forms ---------- */
input,select,textarea{background:#0d1220; border:1px solid var(--border); color:var(--text);}
input:focus,select:focus,textarea:focus{border-color:var(--accent2); box-shadow:0 0 0 3px var(--accent-soft);}
label{color:var(--ash-dark);}

/* ---------- Tables ---------- */
table{background:#0d1220; border:1px solid var(--border);}
th,td{border-bottom:1px solid #19202e;}
th{background:#111623; color:var(--accent2);}
tr:last-child td{border-bottom:none;}

/* ---------- Badges / status ---------- */
.badge{background:var(--accent-soft); color:#9ed9ff;}
.badge.ok{background:rgba(52,211,153,0.15); color:#34d399;}
.badge.warn{background:rgba(251,191,36,0.15); color:#fbbf24;}
.badge.bad{background:rgba(248,113,113,0.15); color:#f87171;}
.badge.gray{background:#1a2230; color:#9aa5b5;}
.banner.warn{background:rgba(251,191,36,0.12); border-color:rgba(251,191,36,0.32); color:#fcd34d;}
.banner.bad{background:rgba(248,113,113,0.12); border-color:rgba(248,113,113,0.32); color:#fca5a5;}
.banner.ok{background:rgba(52,211,153,0.12); border-color:rgba(52,211,153,0.32); color:#6ee7b7;}
.banner.info{background:rgba(56,189,248,0.12); border-color:rgba(56,189,248,0.32); color:#7dd3fc;}

/* ---------- Toast ---------- */
#click-toast{background:#1a2230; color:#e9edf3; box-shadow:0 10px 30px rgba(0,0,0,0.5);}

/* ---------- Wallet / receipt ---------- */
.wallet-box{background:var(--card); border:1px solid var(--border); box-shadow:0 18px 50px rgba(0,0,0,0.35);}
.receipt{background:var(--accent-soft); border:1px solid rgba(56,189,248,0.32); color:#dbe2ec;}

/* ---------- Cinematic hero → dark + blue ---------- */
.cinematic-hero{color:#eef2f6;
  background:
    radial-gradient(1100px 620px at 80% 6%, rgba(47,128,237,0.28) 0%, rgba(47,128,237,0) 55%),
    radial-gradient(900px 620px at 6% 92%, rgba(56,189,248,0.20) 0%, rgba(56,189,248,0) 58%),
    linear-gradient(160deg,#070a11 0%, #0b1019 52%, #070a11 100%);}
.cinematic-hero::after{background:radial-gradient(60% 50% at 50% 45%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.5) 100%);}
.cin-grid{opacity:0.09;
  background-image:linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 78%);
          mask-image:radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 78%);}
.orb{filter:blur(70px); opacity:0.42; mix-blend-mode:screen;}
.orb-1{background:#2563eb;}
.orb-2{background:#38bdf8;}
.orb-3{background:#7dd3fc; opacity:0.22;}
.cloud{background:rgba(255,255,255,0.06);}
.particle{background:#93c5fd; opacity:0.5;}

.cin-content{color:#e9edf3;}
.cin-eyebrow{color:#7dd3fc; background:rgba(47,128,237,0.16); border:1px solid rgba(47,128,237,0.4);}
.cin-left h1{color:#ffffff; font-size:46px; font-weight:800;}
.cin-left .grad{background:linear-gradient(90deg,#38bdf8,#7dd3fc,#a5b4fc);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.cin-left p{color:#b9c2ce;}
.cin-cta .btn-secondary{background:rgba(255,255,255,0.06); color:#eef2f6; border-color:rgba(255,255,255,0.2);
  box-shadow:none;}
.cin-cta .btn-secondary:hover{background:rgba(255,255,255,0.14);}
.cin-cta .share-btn svg{fill:#eef2f6;}
.trust-chip{color:#c8d1dc; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.13);}

/* Phone — sleek dark device */
.phone-glow{background:radial-gradient(circle, rgba(56,189,248,0.30) 0%, rgba(56,189,248,0) 62%); filter:blur(10px);}
.phone{background:linear-gradient(160deg,#1a2030,#0c1018); border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.05);}
.phone-notch{background:#0c1018;}
.phone-screen{background:linear-gradient(180deg,#0d1219 0%,#0a0e14 100%);}
.phone-shadow{background:radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0.6), transparent 70%);}
.ps-brand{color:#eef2f6;}
.ps-provider{color:#98a6b8; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);}
.ps-provider.active{background:linear-gradient(90deg,#f43f5e,#e11d48); color:#fff; border-color:transparent;}
.ps-paybtn{background:linear-gradient(90deg,#2f80ed,#38bdf8); box-shadow:0 8px 18px rgba(47,128,237,0.5);}

/* ---------- Trust strip ---------- */
.trust-strip{background:#0b1019; border-block:1px solid #1c2636;}
.tt-item{color:#c8d1dc;}
.tt-dot{box-shadow:0 0 12px currentColor;}
.dot-telecel{background:#f43f5e; color:#f43f5e;}
.dot-mtn{background:#e8b800; color:#e8b800;}
.dot-at{background:linear-gradient(135deg,#ef4444,#2563eb); color:#ef4444;}

/* ---------- Steps / features ---------- */
.step,.feature{background:var(--card); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 16px 44px rgba(0,0,0,0.35);}
.step-num{color:#3b4657;}
.step-icon,.f-ico{background:linear-gradient(135deg,rgba(47,128,237,0.26),rgba(56,189,248,0.18)); color:#7dd3fc;}
.step h3,.feature h3{font-size:18px; font-weight:700; color:var(--ink);}
.step p,.feature p{color:var(--muted);}

/* Themed "Why INSTANTDATAPLUG" boxes — each with its own colour theme (dark variants) */
.feature.bx{position:relative; overflow:hidden; border:1px solid #16202e; margin:0;
  background:linear-gradient(180deg,var(--bx-soft),#111623);}
.feature.bx::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--bx);}
.feature.bx .f-ico{background:var(--bx); color:#fff;}
.feature.bx h3{color:#e9edf3;}
.feature.bx p{color:var(--muted);}
.feature.bx-terra{--bx:#e07b5a; --bx-soft:rgba(224,123,90,0.14);}
.feature.bx-sky{--bx:#38bdf8; --bx-soft:rgba(56,189,248,0.14);}
.feature.bx-emerald{--bx:#34d399; --bx-soft:rgba(52,211,153,0.14);}
.feature.bx-amber{--bx:#fbbf24; --bx-soft:rgba(251,191,36,0.14);}
.feature.bx-violet{--bx:#a78bfa; --bx-soft:rgba(167,139,250,0.14);}
.feature.bx-rose{--bx:#fb7185; --bx-soft:rgba(251,113,133,0.14);}

/* ---------- Section theme switchers ---------- */
.product-section,.agent-apply{--sec-accent:#2f80ed; --sec-accent2:#38bdf8; --sec-soft:var(--accent-soft);
  --sec-grad:linear-gradient(90deg,#2f80ed,#38bdf8,#7dd3fc);}
.product-section.theme-sky,.agent-apply.theme-sky{--sec-accent:#2f80ed; --sec-accent2:#38bdf8; --sec-soft:var(--accent-soft);
  --sec-grad:linear-gradient(90deg,#2f80ed,#38bdf8,#7dd3fc);}
.product-section.theme-emerald,.agent-apply.theme-emerald{--sec-accent:#10b981; --sec-accent2:#34d399;
  --sec-grad:linear-gradient(90deg,#10b981,#34d399,#6ee7b7);}
.product-section.theme-amber,.agent-apply.theme-amber{--sec-accent:#d97706; --sec-accent2:#fbbf24;
  --sec-grad:linear-gradient(90deg,#d97706,#fbbf24,#fde68a);}
.product-section.theme-violet,.agent-apply.theme-violet{--sec-accent:#7c3aed; --sec-accent2:#a78bfa;
  --sec-grad:linear-gradient(90deg,#7c3aed,#a78bfa,#ddd6fe);}
.product-section.theme-rose,.agent-apply.theme-rose{--sec-accent:#e11d48; --sec-accent2:#fb7185;
  --sec-grad:linear-gradient(90deg,#e11d48,#fb7185,#fecdd3);}

.section-theme{display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.st-label{font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--muted);}
.sw{width:22px; height:22px; border-radius:50%; border:2px solid #0d1220; cursor:pointer;
  box-shadow:0 0 0 1px var(--border); transition:transform .15s; padding:0;}
.sw:hover{transform:scale(1.14);}
.sw.active{box-shadow:0 0 0 2px #0d1220, 0 0 0 4px var(--accent2);}
.sw-terra{background:linear-gradient(135deg,#e07b5a,#f0a58a);}
.sw-sky{background:linear-gradient(135deg,#2f80ed,#38bdf8);}
.sw-emerald{background:linear-gradient(135deg,#10b981,#34d399);}
.sw-amber{background:linear-gradient(135deg,#d97706,#fbbf24);}
.sw-violet{background:linear-gradient(135deg,#7c3aed,#a78bfa);}
.sw-rose{background:linear-gradient(135deg,#e11d48,#fb7185);}

/* Recolour the bundle section via the chosen theme */
.product-section .tag{background:var(--sec-soft); color:#9ed9ff;}
.product-section .provider-btn.active,.product-section .provider-btn:hover{border-color:var(--sec-accent2);
  background:var(--sec-soft); color:#9ed9ff;}
.product-section #selected-price{color:var(--sec-accent2) !important;}
.product-section .btn:not(.btn-secondary){background:var(--sec-grad); box-shadow:0 8px 20px rgba(47,128,237,0.3);}
.product-section .ipanel .ip-eyebrow{background:var(--sec-soft); color:#9ed9ff;}
.product-section .ipanel .brand-grad{background:var(--sec-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.product-section .sizes-list li::before{background:var(--sec-accent2);}
.product-section .how-list .hn{background:var(--sec-soft); color:#9ed9ff;}

/* ---------- Product side panel ("Why INSTANTDATAPLUG?") ---------- */
.ipanel{padding:30px 28px; background:var(--card);}
.ip-head{border-bottom:1px solid #1c2636; padding-bottom:20px; margin-bottom:22px;}
.ip-eyebrow{display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:#9ed9ff; background:var(--accent-soft); padding:5px 11px; border-radius:999px; margin-bottom:14px;}
.ip-head h3{font-size:26px; line-height:1.15; margin-bottom:8px;}
.brand-grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.ip-head p{font-size:14px; line-height:1.6; color:var(--muted);}
.ip-block{margin-bottom:22px;}
.ip-block h4{font-size:17px; margin-bottom:6px; color:var(--ink);}
.sizes-list{list-style:none; margin:0; padding:0;}
.sizes-list li{display:flex; align-items:baseline; gap:8px; padding:8px 2px; border-bottom:1px solid #19202e; font-size:14px;}
.sizes-list li:last-child{border-bottom:none;}
.sizes-list li::before{content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--accent2);
  transform:translateY(-2px);}
.sizes-list .sz{font-weight:700; color:var(--ink);}
.sizes-list .sep{color:#3b4657;}
.sizes-list .price{color:var(--muted); font-variant-numeric:tabular-nums;}
.how-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.how-list li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted);}
.how-list .hn{flex:0 0 24px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:#9ed9ff; font-size:12px; font-weight:700;}

/* ---------- Stats ---------- */
.stats-section{background:linear-gradient(160deg,#070a11,#0d1420);}
.stats-section h2,.stats-section > p{color:#e9edf3;}
.sb-num{background:linear-gradient(90deg,#2f80ed,#38bdf8,#7dd3fc);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.sb-lbl{color:var(--muted);}

/* ---------- Explore quick-launch boxed cards ---------- */
.explore-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1000px; margin:0 auto;}
.explore-card{background:#0f1522; border:1px solid var(--border); border-radius:20px; padding:26px 20px; cursor:pointer;
  text-align:center; transition:transform .18s, box-shadow .18s, border-color .18s;
  box-shadow:0 12px 30px rgba(0,0,0,0.35); font-family:var(--sans);}
.explore-card:hover{transform:translateY(-5px); box-shadow:0 22px 48px rgba(0,0,0,0.5); border-color:var(--accent2);}
.ex-ico{width:54px; height:54px; border-radius:15px; margin:0 auto 14px; display:flex; align-items:center;
  justify-content:center; font-size:25px; background:var(--accent-soft);}
.explore-card h3{font-size:18px; margin-bottom:6px; color:var(--ink);}
.explore-card p{font-size:13px; color:var(--muted); margin-bottom:14px;}
.ex-cta{font-size:13px; font-weight:700; color:var(--accent2);}

/* ---------- Testimonials ---------- */
.testi{background:var(--card); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 16px 44px rgba(0,0,0,0.35);}
.testi p{color:#c6cfdb;}
.t-ava{background:linear-gradient(135deg,#2f80ed,#38bdf8);}
.testi-who strong{color:var(--ink);}
.t-role{color:var(--muted);}

/* ---------- FAQ ---------- */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.32);}
.faq-q{color:var(--ink); font-family:var(--serif); font-size:17px;}
.faq-x{color:var(--accent2);}
.faq-a p{color:var(--muted);}

/* ---------- Become-an-agent boxed card ---------- */
.agent-apply .agent-theme{justify-content:center;}
.agent-apply h2,.agent-apply > p{text-align:center;}
.agent-apply .agent-box{position:relative; overflow:hidden; max-width:680px; margin:0 auto; border-radius:24px;
  border:1px solid var(--border); box-shadow:0 30px 80px rgba(0,0,0,0.5);}
.agent-apply .agent-box::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--sec-grad);}
.agent-apply .agent-box::after{content:""; position:absolute; top:8px; right:-60px; width:200px; height:200px;
  border-radius:50%; background:radial-gradient(circle, var(--sec-soft), transparent 70%); pointer-events:none;}
.agent-apply .btn{background:var(--sec-grad); box-shadow:0 8px 20px rgba(47,128,237,0.3);}
.agent-apply #agent-message .banner{border-radius:12px;}

/* ---------- Footer ---------- */
.site-footer{background:#070a11; color:#9aa5b5; border-top:1px solid #1c2636;}
.f-brand p{color:var(--muted);}
.footer-badges span{background:#0f1522; color:#c8d1dc; border:1px solid var(--border);}
.f-col h4{color:var(--ink);}
.f-col a{color:var(--muted);}
.f-col a:hover{color:var(--accent2);}
.footer-bottom{color:#6b7688;}

/* ---------- Popup modals ---------- */
.modal-overlay{position:fixed; inset:0; z-index:20000; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center; padding:36px 16px; overflow-y:auto;}
.modal-overlay.show{display:flex;}
.modal{background:#0d1220; border:1px solid var(--border); border-radius:28px;
  box-shadow:0 50px 140px rgba(0,0,0,0.6); width:100%; max-width:900px; padding:36px; position:relative;
  margin:auto; animation:modalIn .28s ease;}
@keyframes modalIn{from{opacity:0; transform:translateY(16px) scale(0.98);}to{opacity:1; transform:none;}}
.modal-close{position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:#0f1522;
  border:1px solid var(--border); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center; transition:.15s; padding:0;}
.modal-close:hover{background:var(--accent-soft); color:var(--accent2);}
.modal .modal-section .section-theme{justify-content:center; margin-top:4px;}

/* ---------- Share modal ---------- */
.share-modal,.share-opt{border:1px solid var(--border);}
.share-modal{background:var(--card);}
.share-opt{background:#0d1220; color:var(--ash-dark);}
.share-opt:hover{border-color:var(--accent2); background:var(--accent-soft); color:#9ed9ff;}
.share-copy input{background:#0d1220; color:var(--muted);}
.share-close:hover{color:var(--ink);}

/* ---------- Login ---------- */
.login-wrap{background:linear-gradient(180deg,var(--bg1),var(--bg2));}
.login-card{background:var(--card); border:1px solid var(--border); box-shadow:0 30px 80px rgba(0,0,0,0.5);}

/* ---------- Scrollbar (dark) ---------- */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:#0b1019;}
::-webkit-scrollbar-thumb{background:#2a3444; border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:#3b4657;}

@media(max-width:840px){
  .explore-grid{grid-template-columns:1fr 1fr;}
  .modal{padding:26px 20px;}
  .section{padding:34px 5%;}
}

/* ---------- Admin dashboard (dark + blue) ---------- */
.admin-shell{background:var(--bg2);}
.admin-side{background:#0b1019; border-right:1px solid #1c2636;}
.admin-side .brand{color:#e9edf3;}
.admin-side a{color:#b9c2ce;}
.admin-side a:hover{background:#131a27; color:#fff;}
.admin-side a.active{background:#131a27; color:#fff; border-left-color:var(--accent2);}
.admin-main{color:var(--text);}
.admin-main h1,.admin-main h2{color:var(--ink);}
.stat{background:var(--card); border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,0.32);}
.stat .num{color:var(--ink);}
.stat .lbl{color:var(--muted);}
.panel{background:var(--card); border:1px solid var(--border); box-shadow:0 12px 34px rgba(0,0,0,0.32);}
.panel h3{color:var(--ink);}
.admin-top{border-bottom:1px solid #1c2636; padding-bottom:14px;}
.filters,.row-actions{gap:8px;}
.login-card h1,.login-card h2,.login-card h3{color:var(--ink);}
.login-card p{color:var(--muted);}

/* ---------- Theme toggle button ---------- */
.h-left{display:flex; align-items:center; gap:12px;}
.theme-toggle{flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:#0d1220; border:1px solid var(--border);
  color:var(--ink); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.15s; box-shadow:0 4px 14px rgba(0,0,0,0.3); line-height:1; padding:0;}
.theme-toggle:hover{transform:scale(1.08); border-color:var(--accent2);}
.theme-toggle .tt-ico{line-height:1; font-size:18px;}
/* Admin brand row toggle is smaller */
.brand .theme-toggle{width:34px; height:34px; font-size:15px;}
.login-wrap .theme-toggle{position:absolute; top:18px; left:18px; z-index:5;}

/* =====================================================================
   LIGHT MODE  (applied when <html data-theme="light">)
   ===================================================================== */
[data-theme="light"]{
  --bg1:#f7f9fc; --bg2:#eef2f8;
  --accent:#2563eb; --accent2:#3b82f6; --accent-soft:rgba(37,99,235,0.10);
  --text:#1f2937; --card:#ffffff; --border:#e3e8ef; --muted:#5b6675; --ash-dark:#334155;
  --danger:#dc2626; --ok:#16a34a; --warn:#b45309;
  --ink:#0f172a; --ink-soft:#475569; --paper:#f7f9fc;
  --grad:linear-gradient(90deg,#2563eb,#3b82f6,#60a5fa);
}
[data-theme="light"] body{background:linear-gradient(180deg,var(--bg1),var(--bg2)); color:var(--text);}
[data-theme="light"] a{color:var(--accent);}
[data-theme="light"] code{background:#eef2f7;}
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,[data-theme="light"] h4{color:var(--ink);}
[data-theme="light"] nav a{color:var(--ash-dark);}
[data-theme="light"] nav a:hover{color:var(--accent);}

[data-theme="light"] header{background:rgba(255,255,255,0.9); border-bottom:1px solid var(--border);}
[data-theme="light"] .top-bar{background:#f2f5fa; border-bottom:1px solid var(--border); color:var(--muted);}
[data-theme="light"] .top-bar a{color:var(--accent);}

[data-theme="light"] .btn{background:linear-gradient(90deg,#2563eb,#3b82f6); color:#fff; box-shadow:0 8px 20px rgba(37,99,235,0.25);}
[data-theme="light"] .btn-secondary{background:#fff; color:var(--ash-dark); border:1px solid var(--border); box-shadow:0 4px 14px rgba(15,23,42,0.06);}
[data-theme="light"] .btn-danger{background:linear-gradient(90deg,#dc2626,#f87171);}
[data-theme="light"] .btn-ghost{background:#eef2f7; color:var(--ash-dark); border:1px solid var(--border);}

[data-theme="light"] .section{background:var(--card); border:1px solid var(--border); box-shadow:0 20px 55px rgba(15,23,42,0.07);}
[data-theme="light"] .section h2{color:var(--ink);}
[data-theme="light"] .section > p{color:var(--muted);}
[data-theme="light"] .product-section .card,[data-theme="light"] .info-card{background:var(--card); border:1px solid var(--border); box-shadow:0 16px 44px rgba(15,23,42,0.07);}

[data-theme="light"] .provider-btn{background:#f8fafc; color:var(--ash-dark); border:1px solid var(--border);}
[data-theme="light"] .provider-btn.active,[data-theme="light"] .provider-btn:hover{border-color:var(--accent); background:var(--accent-soft); color:var(--accent);}
[data-theme="light"] .tag{background:var(--accent-soft); color:var(--accent);}

[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:#f8fafc; border:1px solid var(--border); color:var(--text);}
[data-theme="light"] input:focus,[data-theme="light"] select:focus,[data-theme="light"] textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
[data-theme="light"] label{color:var(--ash-dark);}

[data-theme="light"] table{background:#fff; border:1px solid var(--border);}
[data-theme="light"] th,[data-theme="light"] td{border-bottom:1px solid #eef2f7;}
[data-theme="light"] th{background:#f8fafc; color:var(--accent);}

[data-theme="light"] .badge{background:var(--accent-soft); color:var(--accent);}
[data-theme="light"] .badge.ok{background:#dcfce7; color:#166534;}
[data-theme="light"] .badge.warn{background:#fef3c7; color:#92400e;}
[data-theme="light"] .badge.bad{background:#fee2e2; color:#991b1b;}
[data-theme="light"] .badge.gray{background:#eef2f7; color:#475569;}
[data-theme="light"] .banner.warn{background:#fffbeb; border-color:#fde68a; color:#92400e;}
[data-theme="light"] .banner.ok{background:#f0fdf4; border-color:#bbf7d0; color:#166534;}
[data-theme="light"] .banner.info{background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8;}
[data-theme="light"] .wallet-box{background:var(--card); border:1px solid var(--border); box-shadow:0 16px 44px rgba(15,23,42,0.07);}
[data-theme="light"] .receipt{background:var(--accent-soft); border:1px solid #bfdbfe;}
[data-theme="light"] #click-toast{background:#0f172a; color:#fff;}

/* Light hero */
[data-theme="light"] .cinematic-hero{color:var(--ink);
  background:radial-gradient(1100px 620px at 80% 6%, rgba(37,99,235,0.12) 0%, rgba(37,99,235,0) 55%),
    radial-gradient(900px 620px at 6% 92%, rgba(59,130,246,0.10) 0%, rgba(59,130,246,0) 58%),
    linear-gradient(160deg,#f7f9fc 0%, #eef2f8 52%, #e9eef6 100%);}
[data-theme="light"] .cinematic-hero::after{background:radial-gradient(60% 50% at 50% 45%, rgba(0,0,0,0) 62%, rgba(89,74,58,0.06) 100%);}
[data-theme="light"] .cin-grid{opacity:0.07;
  background-image:linear-gradient(#94a3b8 1px, transparent 1px), linear-gradient(90deg, #94a3b8 1px, transparent 1px);}
[data-theme="light"] .orb{filter:blur(70px); opacity:0.35; mix-blend-mode:normal;}
[data-theme="light"] .orb-1{background:#bcd8ff;}
[data-theme="light"] .orb-2{background:#cfe2ff;}
[data-theme="light"] .orb-3{background:#dbeafe; opacity:0.3;}
[data-theme="light"] .cloud{background:rgba(120,140,170,0.12);}
[data-theme="light"] .particle{background:#3b82f6; opacity:0.45;}
[data-theme="light"] .cin-eyebrow{color:#2563eb; background:rgba(37,99,235,0.10); border:1px solid rgba(37,99,235,0.25);}
[data-theme="light"] .cin-left h1{color:var(--ink);}
[data-theme="light"] .cin-left p{color:var(--ink-soft);}
[data-theme="light"] .cin-cta .btn-secondary{background:#fff; color:var(--ink); border-color:var(--border); box-shadow:0 8px 20px rgba(15,23,42,0.06);}
[data-theme="light"] .cin-cta .btn-secondary:hover{background:#f8fafc;}
[data-theme="light"] .cin-cta .share-btn svg{fill:var(--ink);}
[data-theme="light"] .trust-chip{color:var(--ash-dark); background:#fff; border:1px solid var(--border); box-shadow:0 4px 14px rgba(15,23,42,0.05);}
[data-theme="light"] .ps-brand{color:#eef2f6;}

[data-theme="light"] .trust-strip{background:#f2f5fa; border-block:1px solid var(--border);}
[data-theme="light"] .tt-item{color:var(--ash-dark);}

[data-theme="light"] .step,[data-theme="light"] .feature{background:var(--card); border:1px solid var(--border); box-shadow:0 14px 40px rgba(15,23,42,0.07);}
[data-theme="light"] .step-icon,[data-theme="light"] .f-ico{background:linear-gradient(135deg,rgba(37,99,235,0.16),rgba(59,130,246,0.12)); color:#2563eb;}
[data-theme="light"] .step h3,[data-theme="light"] .feature h3{color:var(--ink);}
[data-theme="light"] .step p,[data-theme="light"] .feature p{color:var(--muted);}
[data-theme="light"] .feature.bx{background:linear-gradient(180deg,var(--bx-soft),#fff); border:1px solid #eef2f7;}
[data-theme="light"] .feature.bx h3{color:var(--ink);}
[data-theme="light"] .feature.bx .f-ico{color:#fff;}
[data-theme="light"] .sw{border-color:#fff;}
[data-theme="light"] .sw.active{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent);}

[data-theme="light"] .ipanel{background:#fff;}
[data-theme="light"] .ip-head{border-bottom:1px solid #eef2f7;}
[data-theme="light"] .ip-eyebrow{background:var(--accent-soft); color:var(--accent);}
[data-theme="light"] .ip-head h3{color:var(--ink);}
[data-theme="light"] .sizes-list li{border-bottom:1px solid #f0f3f8;}
[data-theme="light"] .sizes-list .sep{color:#c2ccd8;}
[data-theme="light"] .sizes-list .sz{color:var(--ink);}
[data-theme="light"] .how-list .hn{background:var(--accent-soft); color:var(--accent);}

[data-theme="light"] .stats-section{background:linear-gradient(160deg,#f2f5fa,#e9eef6);}
[data-theme="light"] .stats-section h2,[data-theme="light"] .stats-section > p{color:var(--ink);}
[data-theme="light"] .sb-lbl{color:var(--muted);}
[data-theme="light"] .explore-card{background:#fff; border:1px solid var(--border); box-shadow:0 12px 30px rgba(15,23,42,0.06);}
[data-theme="light"] .explore-card h3{color:var(--ink);}
[data-theme="light"] .testi{background:var(--card); border:1px solid var(--border); box-shadow:0 14px 40px rgba(15,23,42,0.07);}
[data-theme="light"] .testi p{color:#3f4a58;}
[data-theme="light"] .testi-who strong{color:var(--ink);}
[data-theme="light"] .faq-item{background:var(--card); border:1px solid var(--border); box-shadow:0 10px 30px rgba(15,23,42,0.05);}
[data-theme="light"] .faq-q{color:var(--ink);}
[data-theme="light"] .faq-x{color:var(--accent);}

[data-theme="light"] .agent-apply .agent-box{border:1px solid var(--border); box-shadow:0 26px 70px rgba(15,23,42,0.14);}
[data-theme="light"] .site-footer{background:#f2f5fa; color:#5b6675; border-top:1px solid var(--border);}
[data-theme="light"] .footer-badges span{background:#fff; color:var(--ash-dark); border:1px solid var(--border);}
[data-theme="light"] .f-col h4{color:var(--ink);}
[data-theme="light"] .f-col a{color:#5b6675;}
[data-theme="light"] .f-col a:hover{color:var(--accent);}
[data-theme="light"] .footer-bottom{color:#8a94a3;}

[data-theme="light"] .modal-overlay{background:rgba(15,23,42,0.42);}
[data-theme="light"] .modal{background:#fff; border:1px solid var(--border); box-shadow:0 50px 140px rgba(15,23,42,0.28);}
[data-theme="light"] .modal-close{background:#fff; border:1px solid var(--border); color:var(--ink);}
[data-theme="light"] .modal-close:hover{background:var(--accent-soft); color:var(--accent);}
[data-theme="light"] .share-modal{background:#fff; border:1px solid var(--border);}
[data-theme="light"] .share-opt{background:#f8fafc; color:var(--ash-dark);}
[data-theme="light"] .share-opt:hover{border-color:var(--accent); background:var(--accent-soft); color:var(--accent);}
[data-theme="light"] .share-copy input{background:#eef2f7; color:var(--muted);}
[data-theme="light"] .login-card{background:#fff; border:1px solid var(--border); box-shadow:0 24px 70px rgba(15,23,42,0.12);}
[data-theme="light"] .login-card .logo-text{color:var(--ink);}

[data-theme="light"] .theme-toggle{background:#fff; color:var(--ink); border:1px solid var(--border); box-shadow:0 4px 14px rgba(15,23,42,0.08);}
[data-theme="light"] .theme-toggle:hover{border-color:var(--accent);}

[data-theme="light"] .admin-side{background:#ffffff; border-right:1px solid var(--border);}
[data-theme="light"] .admin-side .brand{color:var(--ink);}
[data-theme="light"] .admin-side a{color:#334155;}
[data-theme="light"] .admin-side a:hover{background:#eef2f7; color:var(--ink);}
[data-theme="light"] .admin-side a.active{background:#eef2f7; color:var(--ink); border-left-color:var(--accent);}
[data-theme="light"] .admin-main{color:var(--text);}
[data-theme="light"] .admin-main h1,[data-theme="light"] .admin-main h2{color:var(--ink);}
[data-theme="light"] .stat{background:#fff; border:1px solid var(--border); box-shadow:0 10px 30px rgba(15,23,42,0.06);}
[data-theme="light"] .stat .num{color:var(--ink);}
[data-theme="light"] .stat .lbl{color:var(--muted);}
[data-theme="light"] .panel{background:#fff; border:1px solid var(--border); box-shadow:0 12px 34px rgba(15,23,42,0.06);}
[data-theme="light"] .panel h3{color:var(--ink);}
[data-theme="light"] .admin-top{border-bottom:1px solid #eef2f7;}

[data-theme="light"] ::-webkit-scrollbar-track{background:#eef2f7;}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c2ccd8;}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#94a3b8;}

/* ---------- Agent perks strip ---------- */
.agent-perks{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:680px; margin:0 auto 18px;}
.agent-perks .perk{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:12px 14px; text-align:left;}
.agent-perks .pk-ico{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent2);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;}
.agent-perks .perk strong{display:block; font-size:14px; color:var(--ink);}
.agent-perks .perk span{font-size:11px; color:var(--muted);}
@media(max-width:840px){ .agent-perks{grid-template-columns:1fr;} }

/* ---------- Agent earnings stats ---------- */
.agent-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0;}
.agent-stats .astat{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px;
  text-align:center;}
.agent-stats .as-num{display:block; font-size:18px; font-weight:800; color:var(--accent2);}
.agent-stats .as-lbl{font-size:11px; color:var(--muted); margin-top:4px; display:block;}

/* =====================================================================
   ADD FUNDS  (wallet top-up card — user + admin)
   ===================================================================== */
.addfunds{--af-accent:#0d9f6e; --af-accent2:#12b37b; --af-soft:#e9faf3; --af-soft2:#d2f3e6;
  --af-ink:#12352a; --af-muted:#5f7a70; --af-border:#c7ecdc;
  max-width:460px; margin:14px 0; background:linear-gradient(180deg,#ffffff,var(--af-soft));
  border:1px solid var(--af-border); border-radius:24px; padding:28px 26px; text-align:center;
  box-shadow:0 18px 48px rgba(13,159,110,0.10);}
.af-head{display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:18px;}
.af-icon{width:64px; height:64px; border-radius:18px; background:linear-gradient(160deg,var(--af-accent),var(--af-accent2));
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
  box-shadow:0 10px 24px rgba(13,159,110,0.35);}
.af-icon svg{width:32px; height:32px; fill:#fff;}
.af-eyebrow{font-size:11px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--af-accent);}
.af-title{font-size:30px; font-family:var(--serif); font-weight:800; color:var(--af-ink); margin-top:2px;}
.af-sub{font-size:14px; color:var(--af-muted); margin-top:2px;}
.af-divider{height:1px; background:var(--af-border); margin:16px 0 20px;}
.af-field{text-align:left; margin-bottom:16px;}
.af-label{font-size:13px; font-weight:700; color:var(--af-ink); margin-bottom:8px; display:block;}
.af-input{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--af-border);
  border-radius:14px; padding:10px 14px;}
.af-input:focus-within{border-color:var(--af-accent); box-shadow:0 0 0 3px var(--af-soft2);}
.af-input .af-cur{font-size:20px; font-weight:800; color:var(--af-accent);}
.af-input input{flex:1; border:none; background:transparent; margin:0; padding:4px 0; font-size:28px; font-weight:800;
  color:var(--af-ink); outline:none; -moz-appearance:textfield; appearance:textfield;}
.af-input input::-webkit-outer-spin-button,.af-input input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.af-meta{font-size:12px; color:var(--af-muted); text-align:left; margin-top:8px;}
.af-meta b{color:var(--af-accent); font-weight:700;}
.af-quick{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 20px; text-align:center;}
.af-q{--qb:#16a34a; --qb-soft:#ecfdf5; --qb-edge:#b5e8c6; border:1px solid var(--qb-edge);
  background:var(--qb-soft); color:var(--qb); border-radius:999px; padding:12px 8px; font-weight:800; font-size:16px;
  cursor:pointer; transition:.15s; font-family:var(--sans);}
.af-q:hover{transform:translateY(-2px);}
.af-q.active{background:var(--qb); color:#fff; border-color:var(--qb); box-shadow:0 8px 20px rgba(0,0,0,0.18);}
.af-q.q-green{--qb:#16a34a; --qb-soft:#ecfdf5; --qb-edge:#b5e8c6;}
.af-q.q-blue{--qb:#2563eb; --qb-soft:#eff6ff; --qb-edge:#c7dbfe;}
.af-q.q-orange{--qb:#f59e0b; --qb-soft:#fff7e6; --qb-edge:#f9d79a;}
.af-q.q-purple{--qb:#7c3aed; --qb-soft:#f5f3ff; --qb-edge:#dcd4fb;}
.af-q.q-red{--qb:#ef4444; --qb-soft:#fef2f2; --qb-edge:#f9c5c5;}
.af-q.q-teal{--qb:#0d9488; --qb-soft:#effefb; --qb-edge:#a5eee0;}
.af-pay{background:linear-gradient(90deg,var(--af-accent),var(--af-accent2)); color:#fff; width:100%;
  font-size:16px; font-weight:800; padding:14px; border-radius:14px; border:none; cursor:pointer;
  box-shadow:0 12px 26px rgba(13,159,110,0.3); transition:.15s; font-family:var(--sans);}
.af-pay:hover{transform:translateY(-1px); box-shadow:0 16px 32px rgba(13,159,110,0.4);}
.af-pay:disabled{opacity:.6; cursor:not-allowed; transform:none;}
.af-note{font-size:12px; color:var(--af-muted); margin-top:12px; text-align:center;}
.af-balance{font-size:15px; color:var(--af-ink); margin-bottom:4px; font-weight:600; text-align:center;}
.af-balance b{color:var(--af-accent);}
/* Dark-theme variant keeps the green accent but darkens the surface */
[data-theme="dark"] .addfunds{--af-soft:#0e2a20; --af-soft2:#12402f; --af-ink:#e8f6f0; --af-muted:#9dbfb1;
  --af-border:#1c4a38; background:linear-gradient(180deg,#0f1c17,#0e2a20); box-shadow:0 18px 48px rgba(0,0,0,0.45);}
[data-theme="dark"] .addfunds .af-input{background:#0c1a15; border-color:#1c4a38; color:#e8f6f0;}
[data-theme="dark"] .addfunds .af-input input{color:#e8f6f0;}
[data-theme="dark"] .addfunds .af-q{background:#0c1a15; color:var(--qb); border-color:#1c4a38;}
[data-theme="dark"] .addfunds .af-q.active{background:var(--qb); color:#fff;}
@media(max-width:520px){ .af-quick{grid-template-columns:repeat(3,1fr);} .addfunds{padding:24px 18px;} }

/* Admin Add Funds: the account select sits in a dark card — style like the other inputs */
#view-addfunds #af-user{background:#0d1220; border:1px solid var(--border); color:var(--text); border-radius:12px;
  padding:12px 14px; font-size:16px; width:100%; margin:0;}
#view-addfunds #af-user:focus{border-color:var(--accent2); box-shadow:0 0 0 3px var(--accent-soft);}
#view-addfunds .af-select-wrap{width:100%;}
#view-addfunds .af-input input{color:var(--af-ink);}
[data-theme="light"] #view-addfunds #af-user{background:#f8fafc; border-color:var(--border); color:var(--text);}

/* ============================================================================
   GLOBAL INTERACTION LAYER
   Every clickable element: consistent hover lift, press/tap animation,
   a pointer cursor, and touch-action:manipulation so taps feel instant on
   mobile (no 300ms delay, no double-tap zoom on buttons).
   ========================================================================== */
.toggle-btn, button, a, .explore-card, .provider-btn, .bundle-card, .bc-share,
.af-q, .sw, .modal-close, .faq-q, .share-opt, .share-close, .theme-toggle,
.share-btn, .pkg-share-row-btn, .btn, .share-native, .af-pay, .af-title
{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

button, .btn, .af-pay, .af-q, .explore-card, .provider-btn, .bundle-card,
.bc-share, .sw, .modal-close, .share-opt, .share-close, .share-native, .theme-toggle,
.share-btn, .pkg-share-row-btn, .row-actions button
{ cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease, filter .15s ease; }

/* Hover lift (desktop) — only when the element isn't pressed/disabled */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled), .af-pay:hover:not(:disabled), .af-q:hover, .explore-card:hover,
  .provider-btn:hover, .bundle-card:hover, .bc-share:hover, .sw:hover,
  .modal-close:hover, .share-opt:hover, .share-close:hover, .theme-toggle:hover,
  .theme-toggle:hover, .share-native:hover, .pkg-share-row-btn:hover, .row-actions button:hover
  { transform: translateY(-2px); }
  nav a:hover, .f-col a:hover, .admin-side a:hover, .footer-grid a:hover
  { opacity: .8; }
}

/* Press / tap animation (mobile + desktop) — a quick, satisfying scale-down */
.btn:active:not(:disabled), .af-pay:active:not(:disabled), .af-q:active, .explore-card:active,
.provider-btn:active, .bundle-card:active, .bc-share:active, .sw:active,
.modal-close:active, .share-opt:active, .share-close:active, .theme-toggle:active,
.share-native:active, .pkg-share-row-btn:active, .row-actions button:active
{ transform: scale(.94); }

/* Disabled buttons clearly non-interactive */
.btn:disabled, .af-pay:disabled, .af-q:disabled, button:disabled
{ opacity: .55; cursor: not-allowed; transform: none !important; }

/* Make the small quick-select pills look pressable with a touch of depth */
.af-q{ user-select: none; }
.af-q:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.af-q.active{ box-shadow: 0 8px 20px rgba(0,0,0,.18); }