/* =========================================================
   Mobile Recharge App — UI styles
   Mobile-first, phone-framed on desktop.
   ========================================================= */
:root{
  --primary:#1a73e8;
  --primary-d:#1557b0;
  --grad:linear-gradient(135deg,#1e88ff 0%,#1666e0 55%,#1657cf 100%);
  --ink:#12203a;
  --muted:#6b7a90;
  --line:#e7ecf3;
  --bg:#eef2f8;
  --card:#ffffff;
  --ok:#12a150;--okbg:#e6f7ee;
  --warn:#c67c00;--warnbg:#fff4e0;
  --bad:#d92d20;--badbg:#fdecea;
  --radius:18px;
  --shadow:0 10px 30px rgba(20,50,120,.08);
  --shadow-sm:0 4px 14px rgba(20,50,120,.07);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Hind Siliguri","Noto Sans Bengali",Segoe UI,Roboto,system-ui,-apple-system,sans-serif;
  background:#dfe6f1;color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ---- phone frame ---- */
.app{
  max-width:460px;margin:0 auto;min-height:100vh;background:var(--bg);
  position:relative;overflow-x:hidden;padding-bottom:96px;
  box-shadow:0 0 40px rgba(0,0,0,.12);
}

/* ---- top app bar ---- */
.appbar{
  background:var(--grad);color:#fff;padding:16px 18px 62px;
  border-bottom-left-radius:26px;border-bottom-right-radius:26px;position:relative;
}
.appbar .bar-top{display:flex;align-items:center;gap:12px}
.appbar .brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.appbar .brand .logo{
  width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:20px;flex:none;
}
.appbar .brand h1{font-size:18px;margin:0;font-weight:700;line-height:1.1}
.appbar .brand p{font-size:11px;margin:0;opacity:.85}
.icon-btn{
  width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.15);
  color:#fff;display:grid;place-items:center;position:relative;
}
.icon-btn .dot{
  position:absolute;top:-4px;right:-4px;background:#ff5252;color:#fff;font-size:10px;
  min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid #1666e0;
}
.lang-toggle{
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:#fff;
  border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;
}

/* ---- balance card ---- */
.balance-card{
  background:linear-gradient(140deg,#2b8bff 0%,#1a6fe6 46%,#1452c2 100%);
  color:#fff;margin:-46px 16px 0;border-radius:22px;
  padding:16px 18px 15px;box-shadow:0 18px 36px rgba(20,80,210,.38);
  position:relative;overflow:hidden;isolation:isolate;
}
.balance-card .bc-orb{position:absolute;border-radius:50%;z-index:-1}
.balance-card .bc-orb-1{width:180px;height:180px;right:-50px;top:-64px;
  background:radial-gradient(circle,rgba(255,255,255,.30),transparent 70%)}
.balance-card .bc-orb-2{width:140px;height:140px;left:-44px;bottom:-66px;
  background:radial-gradient(circle,rgba(130,195,255,.55),transparent 70%)}
.balance-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%)}
.balance-card .lbl{display:flex;align-items:center;gap:8px;font-size:13px;opacity:.95}
.balance-card .bc-chip{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  border-radius:20px;padding:5px 11px;font-size:11.5px;font-weight:700}
.balance-card .amt{font-size:34px;font-weight:800;margin:5px 0 12px;letter-spacing:.3px;
  text-shadow:0 2px 12px rgba(0,0,0,.14)}
.balance-card .amt small{font-size:16px;font-weight:600;opacity:.9}
.bc-actions{display:flex;gap:10px}
.btn-add{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#fff;color:var(--primary);
  border:0;border-radius:22px;padding:11px 18px;font-weight:700;font-size:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.16);transition:transform .12s ease;
}
.btn-add:active{transform:scale(.96)}
.btn-add.ghost{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:none}

/* ---- stat strip ---- */
.stat-strip{
  background:var(--card);margin:9px 16px 0;border-radius:16px;box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:repeat(4,1fr);padding:10px 6px;
}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:2px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:20%;height:60%;width:1px;background:var(--line)}
.stat .si{color:var(--primary);background:#eef4ff;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:3px}
.stat .st{font-size:10.5px;color:var(--muted);line-height:1.15}
.stat .sv{font-size:13px;font-weight:700}

/* ---- sections ---- */
.section{padding:0 16px;margin-top:22px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-head h2{font-size:16px;margin:0;font-weight:700;padding-left:12px;position:relative}
.section-head h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:17px;border-radius:3px;background:var(--grad)}
.section-head a{color:var(--primary);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:3px}
/* Home dashboard only (identified by the .appbar header): tighter vertical
   rhythm so the app reads as compact/tidy. Inner pages use .page-head, so
   .appbar ~ … never matches there and their spacing is unchanged. */
.appbar ~ .section{margin-top:15px}
.appbar ~ .section .section-head{margin-bottom:9px}
.appbar ~ .section .tx-list{gap:8px}

/* ---- services grid ---- */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.service{
  background:var(--card);border-radius:16px;padding:11px 5px 9px;text-align:center;
  box-shadow:0 6px 16px rgba(20,50,120,.06);border:1px solid #eef2f8;
  transition:transform .12s ease,box-shadow .12s ease;
}
.service:active{transform:translateY(2px) scale(.97)}
@media (hover:hover){
  .service:hover{box-shadow:0 12px 24px rgba(20,50,120,.13);transform:translateY(-2px)}
}
.service .ico{
  width:48px;height:48px;border-radius:15px;margin:0 auto 6px;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.service span{font-size:11px;font-weight:600;color:#33445c;display:block;line-height:1.2}
/* icon color themes */
.c-blue{background:#e8f0fe;color:#1a73e8}
.c-green{background:#e6f7ee;color:#12a150}
.c-purple{background:#eee9fe;color:#6b46e5}
.c-orange{background:#fff0e0;color:#f57c00}
.c-pink{background:#ffe9f0;color:#e5397f}
.c-teal{background:#e0f7f6;color:#0aa4a0}
.c-yellow{background:#fff6db;color:#e0a800}
.c-red{background:#fdecea;color:#e5392f}
.c-gray{background:#eef1f6;color:#5b6b82}
.c-indigo{background:#e8ebfd;color:#4353d0}

/* ---- promo banners ---- */
.banners{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.banner{border-radius:18px;padding:16px;color:#fff;min-height:120px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.banner.dark{background:linear-gradient(135deg,#0b1f45,#123a7a)}
.banner.light{background:linear-gradient(135deg,#dbeafe,#eaf1ff);color:#12203a}
.banner h3{font-size:14px;margin:0 0 6px;font-weight:800;line-height:1.25}
.banner .pill{display:inline-block;background:#ffd233;color:#3a2c00;font-size:11px;font-weight:700;border-radius:16px;padding:5px 12px;margin-top:8px}
.banner.light .pill{background:var(--primary);color:#fff}
.banner .emoji{position:absolute;right:10px;bottom:8px;font-size:34px;opacity:.85}

/* ---- notice ticker (admin-managed) ---- */
/* Notice sits between the appbar and the balance card. Pull it up into the
   appbar's reserved bottom space (like the balance card does when there's no
   notice) so it reads as a floating banner and is never hidden behind the card. */
.notice-ticker{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#25b45f 0%,#16a34a 55%,#12a150 100%);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:14px;padding:9px 12px;margin:-46px 16px 0;overflow:hidden;position:relative;z-index:2;box-shadow:0 10px 24px rgba(16,120,60,.30)}
/* When a notice is present it takes the header overlap, so the balance card
   sits normally just below it instead of pulling up over it (the old bug). */
.notice-ticker + .balance-card{margin-top:14px}
.notice-ticker .nt-ico{flex:none;display:inline-flex;color:#fff}
.nt-viewport{overflow:hidden;flex:1;position:relative}
.nt-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:nt-marquee 28s linear infinite}
.nt-item{display:inline-block;padding:0 26px;font-size:13px;font-weight:600;position:relative}
.nt-item::after{content:"•";position:absolute;right:5px;opacity:.45}
.notice-ticker:hover .nt-track{animation-play-state:paused}
@keyframes nt-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.nt-track{animation:none;white-space:normal}.nt-item::after{content:""}}

/* ---- image banners (admin-managed) ---- */
.img-slider{position:relative}
.img-banners{display:flex;gap:12px;margin-top:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
.img-banners::-webkit-scrollbar{display:none}
.img-banner{flex:0 0 100%;scroll-snap-align:center;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);background:#eef2f7;display:block}
.img-banner img{width:100%;height:auto;display:block;aspect-ratio:1000/360;object-fit:cover}
.ib-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:10px}
.ib-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#c9d3e0;cursor:pointer;transition:width .25s ease,background .25s ease}
.ib-dot.active{width:20px;border-radius:4px;background:var(--primary,#1a73e8)}

/* ---- transactions list ---- */
.tx-list{display:flex;flex-direction:column;gap:10px}
.tx-item{
  background:var(--card);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);
}
.tx-item .tx-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex:none;background:#e6f7ee;color:#12a150}
.tx-item .tx-ico.debit{background:#e8f0fe;color:#1a73e8}
.tx-item .tx-meta{flex:1;min-width:0}
.tx-item .tx-meta b{font-size:14px;font-weight:700;display:block}
.tx-item .tx-meta small{color:var(--muted);font-size:12px}
.tx-item .tx-amt{text-align:right;font-weight:800;font-size:14px}
.tx-item .tx-amt.credit{color:var(--ok)}
.tx-item .tx-amt.debit{color:var(--bad)}
.tx-item .tx-amt small{display:block;color:var(--muted);font-weight:500;font-size:11px}

/* ---- bottom nav ---- */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:460px;
  background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;
  align-items:flex-end;padding:8px 6px 10px;z-index:50;box-shadow:0 -6px 20px rgba(20,50,120,.06);
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:#93a1b5;font-size:10.5px;font-weight:600;flex:1;padding-top:6px}
.bottom-nav a.active{color:var(--primary)}
.bottom-nav a.fab{position:relative}
.bottom-nav a.fab .fab-btn{
  width:54px;height:54px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;
  margin-top:-28px;box-shadow:0 8px 18px rgba(22,90,224,.45);border:4px solid #fff;
}

/* ---- generic page header (inner pages) ---- */
.page-head{background:var(--grad);color:#fff;padding:16px 18px 20px;display:flex;align-items:center;gap:12px;
  border-bottom-left-radius:22px;border-bottom-right-radius:22px}
.page-head .back{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff}
.page-head h1{font-size:17px;margin:0;font-weight:700;flex:1}

/* ---- cards / forms ---- */
.card{background:var(--card);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm);margin:16px}
.card.tight{padding:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#33445c}
.input,select.input,textarea.input{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;background:#fff;color:var(--ink);
}
.input:focus,textarea.input:focus,select.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,.12)}
.input-group{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.input-group .pfx{padding:0 12px;color:var(--muted);font-size:14px;border-right:1px solid var(--line);align-self:stretch;display:flex;align-items:center}
.input-group input{border:0;flex:1;padding:12px 14px;font-size:15px;outline:none}
.hint{font-size:12px;color:var(--muted);margin-top:5px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;
  padding:13px 18px;font-size:15px;font-weight:700;background:#eef1f6;color:var(--ink)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:active{background:var(--primary-d)}
.btn-block{width:100%}
.btn-ghost{background:#fff;border:1.5px solid var(--line)}
.btn-danger{background:var(--bad);color:#fff}
.btn-sm{padding:8px 12px;font-size:13px;border-radius:10px}

/* choices (operators / methods) */
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.choice{border:1.5px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;background:#fff;cursor:pointer;transition:.12s}
.choice.sel{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,.12)}
.choice .oc{width:40px;height:40px;border-radius:12px;margin:0 auto 6px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px}
.choice span{font-size:11.5px;font-weight:600;display:block}
/* operator logo badge — brand-colour tile with the uploaded logo composited
   on top. It reuses the caller's box (.oc / .ri-ico) so size & radius stay
   consistent; the image is contained with inner padding so the brand colour
   frames a white/transparent logo. No logo → the coloured abbreviation shows. */
.op-badge{overflow:hidden;padding:0}
.op-badge .op-logo{width:100%;height:100%;object-fit:contain;padding:16%;background:transparent}
.amount-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:8px 14px;font-weight:700;font-size:14px;color:#33445c}
.chip.sel{background:var(--primary);color:#fff;border-color:var(--primary)}

.seg{display:flex;background:#eef1f6;border-radius:12px;padding:4px;gap:4px}
.seg label{flex:1}
.seg input{display:none}
.seg span{display:block;text-align:center;padding:9px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted)}
.seg input:checked + span{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}

/* badges */
.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.badge-ok{background:var(--okbg);color:var(--ok)}
.badge-warn{background:var(--warnbg);color:var(--warn)}
.badge-bad{background:var(--badbg);color:var(--bad)}
.badge-muted{background:#eef1f6;color:var(--muted)}

/* flash */
.flash{margin:14px 16px 0;border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;display:flex;gap:8px;align-items:center}
.flash-success{background:var(--okbg);color:var(--ok)}
.flash-error{background:var(--badbg);color:var(--bad)}
.flash-info{background:#e8f0fe;color:var(--primary)}

/* auth pages */
.auth-wrap{max-width:460px;margin:0 auto;min-height:100vh;background:var(--grad);display:flex;flex-direction:column}
.auth-hero{color:#fff;text-align:center;padding:44px 20px 26px}
.auth-hero .logo{width:66px;height:66px;border-radius:20px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:30px;margin:0 auto 14px}
.auth-hero h1{margin:0;font-size:22px}
.auth-hero p{margin:6px 0 0;opacity:.9;font-size:13px}
.auth-card{background:#fff;border-radius:26px 26px 0 0;flex:1;padding:26px 20px;margin-top:10px}
.auth-card h2{margin:0 0 18px;font-size:19px}
.auth-alt{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}
.auth-alt a{color:var(--primary);font-weight:700}

/* misc */
.list{display:flex;flex-direction:column;gap:10px}
.row-item{background:#fff;border-radius:14px;padding:13px 14px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}
.row-item .ri-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#e8f0fe;color:var(--primary);flex:none}
.row-item .ri-body{flex:1;min-width:0}
.row-item .ri-body b{font-size:14px;display:block}
.row-item .ri-body small{color:var(--muted);font-size:12px}
.empty{text-align:center;color:var(--muted);padding:40px 20px;font-size:14px}
.empty .big{font-size:40px;display:block;margin-bottom:10px;opacity:.5}
.filters{display:flex;gap:8px;overflow-x:auto;padding:0 16px;margin-top:14px;-webkit-overflow-scrolling:touch}
.filters .chip{white-space:nowrap;flex:none}
.divider{height:1px;background:var(--line);margin:14px 0}
.info-row{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;border-bottom:1px dashed var(--line)}
.info-row:last-child{border-bottom:0}
.info-row .k{color:var(--muted)}
.info-row .v{font-weight:700}
.text-c{text-align:center}
.mt{margin-top:14px}

/* ---- subtle dashboard entrance ---- */
@media (prefers-reduced-motion:no-preference){
  @keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .balance-card{animation:riseIn .45s ease both}
  .stat-strip{animation:riseIn .45s .06s ease both}
  .services .service{animation:riseIn .4s ease both}
  .services .service:nth-child(1){animation-delay:.05s}
  .services .service:nth-child(2){animation-delay:.09s}
  .services .service:nth-child(3){animation-delay:.13s}
  .services .service:nth-child(4){animation-delay:.17s}
  .services .service:nth-child(5){animation-delay:.21s}
  .services .service:nth-child(6){animation-delay:.25s}
  .services .service:nth-child(7){animation-delay:.29s}
  .services .service:nth-child(8){animation-delay:.33s}
  .banners .banner{animation:riseIn .45s .1s ease both}
}