/* ═══════════════════════════════════════════════════════════════
   SMART ANAPAY — logo theme
   Deep navy, royal blue and an electric-cyan glow, taken from the
   app logo. Loaded after ezeepay.css and after the admin colour
   settings, so it only adds what the settings cannot express:
   blue-tinted neutrals, glows, the floating tab bar and motion.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --navy:#011460;
  --navy-2:#062585;
  --royal:#1546D8;
  --electric:#2F8BFF;
  --cyan:#22D3EE;
  --cyan-soft:#7DE6F7;

  /* neutrals biased toward the navy */
  --violet-mist:#E6EFFF;
  --violet-ink:#0B2A7A;
  --ink:#0A1435;
  --ink-2:#34426A;
  --muted:#6A789C;
  --faint:#9CA8C6;
  --hair:#DFE7F6;
  --hair-2:#EAF0FB;
  --surface-2:#F6F9FF;
  --ground:#EDF2FC;

  --shadow-tile:0 1px 2px rgba(1,20,96,.05), 0 6px 16px -6px rgba(1,20,96,.16);
  --shadow-card:0 1px 3px rgba(1,20,96,.06), 0 14px 32px -14px rgba(1,20,96,.28);
  --shadow-head:0 1px 0 rgba(255,255,255,.06), 0 12px 32px -14px rgba(1,20,96,.7);

  --hero:linear-gradient(150deg,#011460 0%,#062585 48%,#1546D8 100%);
  --glow:linear-gradient(100deg,#22D3EE 0%,#2F8BFF 48%,#1546D8 100%);
}
@media (min-width:1025px){ body{background:#E3EAF8} }

/* ── Scrolling: no pull-to-refresh, header and tab bar always in place ──
   Chrome (and the APK, which runs on Chrome) reads overscroll-behavior from the
   root element, so it is set on <html> as well as <body>. The page scroller then
   stops dead at the top and bottom instead of dragging the page into a reload. */
html,body{overscroll-behavior:none}
.appscroll,.authbody{overscroll-behavior:none; scroll-behavior:smooth}
.apphead,.pagehead{position:sticky; top:0}
@media (prefers-reduced-motion:reduce){ .appscroll,.authbody{scroll-behavior:auto} }

/* ── Aurora: slow cyan/blue light drifting behind every blue band ── */
@keyframes aurora{
  0%  {transform:translate3d(-6%,-4%,0) rotate(0deg) scale(1)}
  50% {transform:translate3d(5%,3%,0) rotate(8deg) scale(1.08)}
  100%{transform:translate3d(-3%,5%,0) rotate(-6deg) scale(1.02)}
}
.apphead,.pagehead,.balpanel,.authtop{background:var(--hero) !important; isolation:isolate; overflow:hidden}
.apphead::after,.pagehead::after,.balpanel::after,.authtop::after{
  content:""; position:absolute; inset:-60% -30%; z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side at 22% 30%, rgba(34,211,238,.42), transparent 70%),
    radial-gradient(closest-side at 78% 66%, rgba(47,139,255,.38), transparent 70%),
    radial-gradient(closest-side at 55% 10%, rgba(125,230,247,.18), transparent 70%);
  animation:aurora 14s ease-in-out infinite alternate;
}
.pagehead > *,.authtop > *{position:relative; z-index:1}
.apphead.has-image::after{display:none}
.balpanel{box-shadow:0 14px 28px -18px rgba(1,20,96,.85)}

/* ── Wallet card: glass with a cyan edge and a light sweep ── */
@keyframes sweep2{0%,62%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(220%) skewX(-18deg)}}
.balcard{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 1px rgba(125,230,247,.38), 0 10px 26px -14px rgba(0,0,0,.6);
}
.balcard::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:38%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:sweep2 5.5s ease-in-out 1.2s infinite;
}
.walicon{
  background:var(--glow);
  box-shadow:0 0 0 3px rgba(34,211,238,.18), 0 6px 16px -4px rgba(34,211,238,.75);
}
.walicon circle{fill:var(--royal)}
.w2w{color:var(--royal); box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
.balsplit div{box-shadow:inset 0 0 0 1px rgba(125,230,247,.28)}

/* ── Add Money: the electric gradient with a breathing glow ── */
@keyframes breathe{0%,100%{box-shadow:0 6px 16px -6px rgba(34,211,238,.75), 0 0 0 0 rgba(34,211,238,.45)}50%{box-shadow:0 8px 22px -6px rgba(47,139,255,.9), 0 0 0 6px rgba(34,211,238,0)}}
.addmoney{
  position:relative; overflow:hidden;
  background:var(--glow); letter-spacing:.01em;
  animation:breathe 2.8s ease-in-out infinite;
}
.addmoney::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:30%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:sweep2 4.2s ease-in-out 2s infinite;
}
.addmoney:active{transform:scale(.98)}

.logoplate .lr{color:var(--faint)}

/* ── Home: banner and service grid ── */
.track{box-shadow:0 0 0 1px rgba(47,139,255,.18), 0 14px 30px -16px rgba(1,20,96,.45)}
.dots button[data-on]{background:var(--cyan)}

.sec{background:linear-gradient(180deg,#F5F9FF,#EEF4FF); box-shadow:inset 0 0 0 1px var(--hair-2)}

@keyframes tileIn{from{opacity:0; transform:translateY(14px) scale(.9)}to{opacity:1; transform:none}}
.grid > .tile{animation:tileIn .45s cubic-bezier(.2,.85,.3,1.2) both}
.grid > .tile:nth-child(1){animation-delay:.04s}
.grid > .tile:nth-child(2){animation-delay:.08s}
.grid > .tile:nth-child(3){animation-delay:.12s}
.grid > .tile:nth-child(4){animation-delay:.16s}
.grid > .tile:nth-child(5){animation-delay:.20s}
.grid > .tile:nth-child(6){animation-delay:.24s}
.grid > .tile:nth-child(7){animation-delay:.28s}
.grid > .tile:nth-child(8){animation-delay:.32s}
.grid > .tile:nth-child(9){animation-delay:.36s}
.grid > .tile:nth-child(n+10){animation-delay:.4s}

.tile{
  isolation:isolate;
  box-shadow:inset 0 0 0 1px var(--hair), var(--shadow-tile);
}
/* a soft blue halo behind every icon */
.tile::before{
  content:""; position:absolute; z-index:-1; top:6px; left:50%; width:54px; height:54px; margin-left:-27px;
  border-radius:50%; background:radial-gradient(circle,rgba(47,139,255,.18),rgba(34,211,238,.06) 60%,transparent 72%);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.tile img,.tile > svg{transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.tile:active::before{transform:scale(1.25)}
.tile:active img,.tile:active > svg{transform:scale(1.08) rotate(-4deg)}
@media (hover:hover) and (pointer:fine){
  .tile:hover{box-shadow:inset 0 0 0 1px rgba(47,139,255,.35), 0 12px 24px -10px rgba(21,70,216,.45)}
  .tile:hover::before{transform:scale(1.2)}
  .tile:hover img,.tile:hover > svg{transform:translateY(-2px) scale(1.06)}
}
.tile b{color:var(--ink-2); font-weight:700}
.rb-hot{background:linear-gradient(100deg,#2F8BFF,#1546D8)}
.viewmore{color:var(--royal)}

/* Touch feedback: a cyan ripple from where the finger lands (added by anapay-theme.js).
   It lives in its own clipped layer, so badges that hang over a tile's edge stay visible. */
.tap-clip{position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:2}
.tap-ripple{
  position:absolute; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle,rgba(34,211,238,.38),rgba(47,139,255,.12) 60%,transparent 70%);
  transform:scale(0); animation:tapRipple .6s ease-out forwards;
}
@keyframes tapRipple{to{transform:scale(1); opacity:0}}

/* ── Buttons, chips and controls: navy → royal → electric ── */
.btn-primary,.slidepay,.authtab-ink{background:linear-gradient(100deg,#011460,#1546D8 55%,#2F8BFF)}
.btn-primary{box-shadow:0 8px 20px -8px rgba(21,70,216,.8), inset 0 1px 0 rgba(255,255,255,.2)}
.slidepay{box-shadow:0 10px 24px -10px rgba(21,70,216,.85), inset 0 1px 0 rgba(255,255,255,.18)}
.authtab-ink{box-shadow:0 4px 12px -5px rgba(21,70,216,.8)}
.editbtn,.act-1{background:linear-gradient(100deg,#1546D8,#2F8BFF); box-shadow:0 5px 14px -5px rgba(21,70,216,.7)}
.ptab[data-on]{background:linear-gradient(100deg,#1546D8,#2F8BFF); box-shadow:0 4px 12px -4px rgba(21,70,216,.7)}
.ctable th{background:linear-gradient(100deg,#011460,#1546D8)}
.btn-outline{color:var(--royal); border-color:var(--royal)}
.field:focus,.field:focus-within{border-color:var(--electric); box-shadow:0 0 0 3.5px rgba(47,139,255,.16)}
.pindots i[data-on]{background:var(--glow); box-shadow:0 0 0 2px rgba(34,211,238,.35), 0 0 12px rgba(34,211,238,.6)}
.key:active{background:#E3EEFF}
.cardpreview{--cf:#1546D8; --ct:#011460}

/* ── Add Money hero and the MPIN avatar in the same blues ── */
.amt-hero{background:var(--hero); position:relative; overflow:hidden; isolation:isolate}
.amt-hero::after{
  content:"; position:absolute; inset:-60% -30%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side at 25% 30%, rgba(34,211,238,.4), transparent 70%), radial-gradient(closest-side at 80% 70%, rgba(47,139,255,.35), transparent 70%);
  animation:aurora 14s ease-in-out infinite alternate;
}
.pinwho .avatar{
  display:grid; place-items:center; flex:none; color:#fff; font-family:var(--f-display); font-weight:800;
  background:var(--glow); box-shadow:0 8px 18px -8px rgba(21,70,216,.6);
}

/* ── Profile & Refer: the logo blues instead of purple/orange ── */
.pc-cover{background:var(--hero)}
.pc-center .avatar{background:var(--glow); box-shadow:0 10px 22px -8px rgba(21,70,216,.6), 0 0 0 4px var(--surface)}
.refercard{background:linear-gradient(135deg,#22D3EE 0%,#1546D8 52%,#011460 100%)}
.refercard .chip,.rc-share-btn{color:var(--royal)}
.rc-share-btn{box-shadow:0 12px 26px -10px rgba(1,20,96,.6), 0 2px 6px rgba(1,20,96,.2)}

/* ═══════════════════════════════════════════════════════════════
   TAB BAR — a floating navy capsule with a glowing active pill and
   a raised Add Money button, like a native wallet app.
   ═══════════════════════════════════════════════════════════════ */
.tabbar{
  background:transparent; box-shadow:none; isolation:isolate;
  padding-top:12px; padding-left:14px; padding-right:14px;
}
.tabbar::before{
  content:""; position:absolute; z-index:-1;
  left:10px; right:10px; top:6px;
  bottom:calc(max(max(env(safe-area-inset-bottom, 0px), var(--native-safe-bottom, 0px)), 22px) - 12px);
  border-radius:26px;
  background:linear-gradient(160deg,rgba(6,37,133,.97),rgba(1,20,96,.98));
  box-shadow:0 14px 30px -12px rgba(1,20,96,.65), inset 0 1px 0 rgba(125,230,247,.25), inset 0 0 0 1px rgba(125,230,247,.14);
}
.tab{
  position:relative; isolation:isolate; color:rgba(214,228,255,.62);
  padding:5px 0 4px; margin:0 5px; border-radius:16px;
  transition:color .2s, transform .2s cubic-bezier(.2,.9,.3,1.3);
}
.tab b{font-size:9.5px; font-weight:700}
.tab[aria-current="page"]{color:#fff}
.tab[aria-current="page"] b{font-weight:800}
.tab[aria-current="page"]::before{
  content:""; position:absolute; z-index:-1; inset:-2px 0;
  border-radius:16px; background:var(--glow);
  box-shadow:0 6px 16px -6px rgba(34,211,238,.85);
  animation:pillPop .45s cubic-bezier(.2,.9,.3,1.35) both;
}
@keyframes pillPop{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:none}}
.tab:active{transform:scale(.92)}

.scanfab{
  top:-26px; width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#7DE6F7 0%,#2F8BFF 42%,#1546D8 75%,#011460 100%);
  box-shadow:0 10px 22px -6px rgba(34,211,238,.8), inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 5px var(--ground);
  isolation:isolate;
}
/* a slowly turning light ring around the button */
.scanfab::before{
  content:""; position:absolute; inset:-5px; z-index:-1; border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 55%,rgba(34,211,238,.95) 70%,#fff 76%,rgba(47,139,255,.9) 84%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:spin 3.2s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.scanfab svg{transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.scanfab:active svg{transform:rotate(90deg)}
.scanwrap b{color:rgba(214,228,255,.75); font-weight:700; top:38px}

/* Toast and install banner in the same family */
.toast{background:linear-gradient(100deg,#011460,#1546D8)}
.install-banner-icon{background:var(--hero)}

@media (prefers-reduced-motion:reduce){
  .apphead::after,.pagehead::after,.balpanel::after,.authtop::after,
  .balcard::after,.addmoney::after,.scanfab::before,.amt-hero::after{animation:none}
  .addmoney{animation:none}
}