/* Atlas PWA: the credits slide-in and the campaign card. Uses the tokens of app.css.
   Wide screens: the panel slides in from the right. Phones: it rises from the bottom.
   The spring is a small overshoot, hidden by extra panel size behind the screen edge. */
.pw-lock{overflow:hidden}
.pw-wrap{position:fixed;inset:0;z-index:60;background:rgba(46,39,82,0);transition:background-color .3s ease;overflow:hidden;overflow:clip}
.pw-wrap.in{background:rgba(46,39,82,.4)}
.pw-panel{position:absolute;top:0;bottom:0;right:-72px;width:calc(min(460px,100vw) + 72px);padding:calc(18px + var(--safe-top)) calc(18px + 72px) calc(18px + var(--safe-bottom)) 18px;
 background:var(--bg);border-radius:28px 0 0 28px;box-shadow:-10px 0 40px rgba(110,84,190,.25);overflow-y:auto;overscroll-behavior:contain;outline:none;
 transform:translateX(110%);transition:transform .55s cubic-bezier(.2,1.15,.35,1)}
@supports (transition-timing-function:linear(0,1)){
 .pw-panel{transition-timing-function:linear(0,.1 3%,.4 7%,.75 12%,.97 17%,1.04 21%,1.05 25%,1.02 31%,.99 38%,1 46%,1.005 56%,1 100%)}
}
.pw-wrap.in .pw-panel{transform:none}
.pw-wrap:not(.in) .pw-panel{transition-duration:.3s;transition-timing-function:ease-in}
@media (max-width:640px){
 .pw-panel{top:auto;left:0;right:0;bottom:-72px;width:auto;max-height:calc(92dvh + 72px);padding:18px 16px calc(18px + 72px + var(--safe-bottom));border-radius:28px 28px 0 0;
  box-shadow:0 -10px 40px rgba(110,84,190,.25);transform:translateY(110%)}
 .pw-panel::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--outline);margin:-6px auto 10px}
}
.pw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pw-head h2{margin:0}
.pw-body{display:grid;gap:14px}
.pw-k{display:block;font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pw-tapped{padding:12px 16px;border-radius:20px;background:#fff4d6;color:var(--on-warn)}
.pw-tapped b{font:600 17px var(--d)}
.pw-balance{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:24px;background:#fff;box-shadow:var(--clay)}
.pw-num{font:700 30px var(--d)}
.pw-short{padding:6px 12px;border-radius:14px;font:700 14px var(--d)}
.pw-short.bad{background:#ffe1e1;color:#7a1f1f}.pw-short.ok{background:#dcf6e7;color:var(--on-green)}
.pw-offer{display:grid;gap:6px;padding:14px 16px;border-radius:24px;background:linear-gradient(135deg,#fff0c2,#ffd8e6);box-shadow:var(--clay);border:3px solid transparent}
.pw-offer.on{border-color:var(--yellow-edge)}
.pw-offer p{margin:0}
.pw-badge{padding:3px 10px;border-radius:12px;background:var(--primary);color:#fff;font:700 13px var(--d);box-shadow:0 3px 0 var(--primary-edge)}
.pw-count{padding:3px 10px;border-radius:12px;background:#fff;color:var(--ink);font:700 14px var(--d);font-variant-numeric:tabular-nums;box-shadow:0 2px 0 var(--lilac-edge)}
.pw-packs{display:grid;gap:10px}
.pw-pack{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:22px;border:3px solid transparent;background:#fff;box-shadow:var(--clay);color:inherit;font:inherit;text-align:left;cursor:pointer}
.pw-pack.on{border-color:var(--primary)}
.pw-pack:active{transform:scale(.98)}
.pw-pack-main{flex:1;min-width:0}
.pw-pack-main b{font:700 20px var(--d)}
.pw-bonus{white-space:nowrap;margin-left:8px;padding:2px 8px;border-radius:10px;background:var(--green);color:var(--on-green);font:700 12.5px var(--t)}
.pw-tag{white-space:nowrap;margin-left:8px;padding:2px 8px;border-radius:10px;background:var(--yellow);color:var(--on-yellow);font:700 12.5px var(--t)}
.pw-price{display:grid;justify-items:end;font:700 18px var(--d);color:var(--primary)}
.pw-price s{font:600 14px var(--t)}
/* the buy wizard (wizard.js) inside the panel */
.pw-panel .wiz{width:100%;max-height:none;border:0;animation:none;box-shadow:var(--clay)}
.pw-panel .wiz-x{display:none}
.pw-panel .wiz-body{overflow:visible;max-height:none}
.pw-wizard .progress{margin:10px 0}
.pw-info details{padding:12px 16px;border-radius:20px;background:#fff;box-shadow:var(--clay)}
.pw-info details+details{margin-top:10px}
.pw-info summary,.pw-card summary{cursor:pointer;font:600 16px var(--d)}
.pw-items{list-style:none;margin:8px 0;padding:0;display:grid;gap:10px}
.pw-items li{display:block}
.pw-from{margin-left:8px;padding:1px 8px;border-radius:9px;background:var(--primary-soft);color:var(--on-primary-soft);font:700 12px var(--t)}

/* the campaign card (Home, Credits, and the confirm sheet) */
.pw-card{display:grid;gap:8px;padding:16px 18px;border-radius:26px;background:linear-gradient(135deg,#e4f8ec,#dfe8ff);box-shadow:var(--clay);margin:14px 0}
.pw-card h3,.pw-card p{margin:0}
.pw-card details{padding:8px 0}
.pw-card.compact{padding:12px 14px;border-radius:20px;margin:10px 0 0}
.pw-chips{display:flex;flex-wrap:wrap;gap:6px}
.pw-chip{padding:3px 10px;border-radius:12px;background:#fff;color:var(--on-primary-soft);font:700 12.5px var(--t)}
@media (prefers-reduced-motion:reduce){
 .pw-panel{transition:none!important}.pw-wrap{transition:none!important}.pw-done{animation:none!important}
}
.pw-pack-main b{white-space:nowrap}

/* wizard steps: number, network, processing, done, failed */
.pw-phone{display:flex;align-items:stretch;gap:8px}
.pw-cc{display:grid;place-items:center;min-width:64px;padding:0 12px;border-radius:18px;background:var(--primary-soft);color:var(--on-primary-soft);font:700 17px var(--d)}
.pw-phone input{flex:1;min-width:0;font-size:18px;letter-spacing:.5px}
.pw-nets{display:grid;gap:10px}
.pw-net{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:20px;border:3px solid transparent;background:var(--surface,#fff);box-shadow:var(--clay);color:inherit;font:inherit;text-align:left;cursor:pointer}
.pw-net.on{border-color:var(--primary)}
.pw-net b{font:700 18px var(--d)}
.pw-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;font:800 13px var(--d);letter-spacing:.2px;box-shadow:inset -3px -4px 7px rgba(0,0,0,.14),inset 3px 3px 7px rgba(255,255,255,.4)}
.pw-mark.mtn{background:#FFCB05;color:#1a1a1a}
.pw-mark.airtel{background:#E40000;color:#fff;font-size:12px}
.pw-mark.zamtel{background:#0A8F3C;color:#fff;font-size:20px}
.pw-auto{margin-left:auto;padding:2px 9px;border-radius:10px;background:var(--green);color:var(--on-green);font:700 12px var(--t)}
.pw-pay{scroll-margin:12px 0 96px}
.pw-proc,.pw-success,.pw-fail{display:grid;gap:10px;justify-items:center;text-align:center;padding:6px 4px}
.pw-proc h4,.pw-success h4,.pw-fail h4{margin:0;font:600 19px var(--d)}
.pw-proc p,.pw-success p,.pw-fail p{margin:0}
.pw-pulse{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--primary-soft);color:var(--on-primary-soft)}
.pw-pulse svg{width:38px;height:38px;position:relative;z-index:1}
.pw-pulse i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--primary);opacity:0;animation:pw-ring 1.8s ease-out infinite}
.pw-pulse i+i{animation-delay:.9s}
@keyframes pw-ring{from{transform:scale(.7);opacity:.7}to{transform:scale(1.7);opacity:0}}
.pw-stages{list-style:none;margin:4px 0;padding:0;display:grid;gap:8px;justify-items:start;width:min(280px,100%)}
.pw-stages li{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--muted)}
.pw-stages li.done{color:var(--green-text,#1F7A4F)}
.pw-stages li.now{color:var(--ink)}
.pw-dot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--outline);flex:none}
.pw-stages .done .pw-dot{background:var(--green);border-color:var(--green-edge);color:var(--on-green)}
.pw-stages .now .pw-dot{border-color:var(--primary);border-top-color:transparent;animation:spin .9s linear infinite}
.pw-dot svg{width:15px;height:15px;stroke-width:3}
.pw-proc .progress{width:100%}
.pw-elapsed{font-variant-numeric:tabular-nums}
.pw-hint{padding:10px 12px;border-radius:16px;background:var(--warn);color:var(--on-warn);font-size:14px;text-align:left}
.pw-burst{position:relative;display:grid;place-items:center;width:96px;height:96px}
.pw-check{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--green);color:var(--on-green);box-shadow:0 5px 0 var(--green-edge);animation:pw-pop .55s cubic-bezier(.2,1.5,.4,1)}
.pw-check svg{width:40px;height:40px;stroke-width:3.2}
.pw-burst i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--yellow);opacity:0;animation:pw-fly .9s ease-out .15s forwards}
.pw-burst i:nth-child(3n){background:var(--pink)}.pw-burst i:nth-child(3n+1){background:var(--primary)}.pw-burst i:nth-child(4n){width:6px;height:6px;border-radius:2px}
.pw-burst i.p0{--x:0px;--y:-56px}.pw-burst i.p1{--x:22px;--y:-52px}.pw-burst i.p2{--x:42px;--y:-38px}.pw-burst i.p3{--x:54px;--y:-18px}
.pw-burst i.p4{--x:56px;--y:6px}.pw-burst i.p5{--x:46px;--y:30px}.pw-burst i.p6{--x:24px;--y:50px}.pw-burst i.p7{--x:-2px;--y:56px}
.pw-burst i.p8{--x:-26px;--y:50px}.pw-burst i.p9{--x:-46px;--y:30px}.pw-burst i.p10{--x:-56px;--y:4px}.pw-burst i.p11{--x:-52px;--y:-22px}
.pw-burst i.p12{--x:-38px;--y:-42px}.pw-burst i.p13{--x:-16px;--y:-54px}
@keyframes pw-fly{0%{opacity:1;transform:translate(0,0) scale(.6)}80%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.1) rotate(160deg)}}
.pw-fail{padding:14px;border-radius:22px;background:#ffe1e1;color:#7a1f1f}
.pw-x{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#d64545;color:#fff;box-shadow:0 4px 0 #a93030;animation:pw-pop .45s cubic-bezier(.2,1.5,.4,1)}
.pw-x svg{width:28px;height:28px;stroke-width:3.2}
.pw-nomoney{font-weight:800}
.pw-wizard .wiz-foot{position:sticky;bottom:0;z-index:2;background:var(--wz-card)}
@media (prefers-reduced-motion:reduce){.pw-pulse i,.pw-burst i,.pw-check,.pw-x,.pw-stages .now .pw-dot{animation:none!important}.pw-burst i{display:none}}

.pw-status:empty{display:none}
@keyframes pw-pop{from{transform:scale(.85);opacity:0}}