/* wincricket Pago screens (pago-pay.js; DESIGN docs/operations/wincricket-pago-2026-10-12 §8, SCREENS.md there). Shipped only in a
   build whose brand sets pagoPayments: true. Builds on account.css (panels, chips, fields, review) and the brand tokens
   (operators/wincricket/brand/brand.css: --brand gold, --wallet-card purple, Source Sans via --display). No inline styles (CSP). */

/* Status chips: tinted, so Processing / Paid / Failed read at a glance in every payment list and in the Details dialog. */
.account-money .account-status,#overlay .account-status{border-color:currentColor;background:color-mix(in srgb,currentColor 9%,transparent)}
#overlay .account-status.positive{color:var(--money-pos)}#overlay .account-status.negative{color:var(--money-neg)}

/* Deposit form */
.account-amounts.pago-chips{grid-template-columns:repeat(auto-fit,minmax(58px,1fr))}
.pago-cta{min-height:52px;font-size:14px;gap:8px}
.pago-cta[aria-busy="true"]{opacity:1!important;cursor:progress!important}
.pago-secure{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:11px;line-height:1.55;color:var(--faint)}
.pago-secure .icon{width:14px;height:14px;flex:none;margin-top:1px;color:var(--accent-ink)}
.pago-spinner{display:inline-block;width:16px;height:16px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:pago-spin .8s linear infinite;vertical-align:-3px}
@keyframes pago-spin{to{transform:rotate(360deg)}}
/* Mobile number (deposit form, withdraw bank details; DESIGN §13): +91 joined to the field, the hint right under it. brand.css loads
   after this file and gives `.account-field .field-input` a 12px radius and --border: the +91 box matches both, and the input
   rule needs the extra class to square its left corners. */
.account-field.pago-phone{margin-bottom:7px}
.account-field>.pago-phone-row{display:flex;align-items:stretch;margin:0;font-size:14px;font-weight:400}
.pago-phone-cc{display:grid;place-items:center;flex:none;min-width:54px;padding:0 10px;border:1px solid var(--border,var(--line));border-right:0;border-radius:12px 0 0 12px;background:var(--surface-3);color:var(--dim);font-weight:750;font-variant-numeric:tabular-nums}
.account-field .pago-phone-row>.field-input{flex:1;border-top-left-radius:0;border-bottom-left-radius:0;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.pago-phone-row:focus-within>.pago-phone-cc{border-color:var(--warm-border,#AD8949)}
.pago-phone.has-error .pago-phone-cc{border-color:var(--danger,#BB493A);color:var(--danger,#BB493A)}
.pago-phone.has-error+.account-field-error{margin-bottom:4px}
@keyframes pago-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 0%,transparent)}}

/* How it works (deposit aside) */
.pago-how{list-style:none;margin:14px 0 24px;padding:0;display:grid;gap:14px;counter-reset:pago}
.pago-how li{counter-increment:pago;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;row-gap:1px;padding:0;line-height:1.45}
.pago-how li::before{content:counter(pago);grid-row:span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);font:800 13px/1 var(--display)}
.pago-how b{font-size:13px;color:var(--text)}.pago-how span{font-size:12px;color:var(--faint)}

/* Return from the hosted page: one centred status card */
.pago-return{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 28px 28px}
.pago-return>.eyebrow{margin-top:16px}
.pago-return>h2{margin:6px 0 0;font-size:24px;line-height:1.2}
.pago-amount{display:block;margin:12px 0 2px;font:800 34px/1.1 var(--display);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pago-return>p{max-width:36ch;margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--dim)}
.pago-return>:is(.pago-progress,.pago-new-balance,.pago-cta,.pago-ref){width:100%;max-width:420px}
.pago-return>.pago-cta{margin-top:22px}
.pago-return>.pago-secondary{margin-top:14px;font-size:12px;font-weight:700}
.pago-return>.pago-ref{margin:22px 0 0;text-align:left;padding:11px 14px}
.pago-retry{min-height:1.6em;font-size:11px!important;color:var(--faint)!important}
.pago-badge{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex:none}
.pago-badge .icon{width:30px;height:30px;stroke-width:2.4}
.pago-badge.is-pending{background:var(--surface-3);border:1px solid var(--line)}
.pago-badge.is-pending .pago-spinner{width:30px;height:30px;border-width:3px;color:var(--brand)}
.pago-badge.is-success{background:var(--brand);color:var(--brand-ink);box-shadow:0 0 0 8px color-mix(in srgb,var(--brand) 18%,transparent)}
.pago-badge.is-failed{background:color-mix(in srgb,var(--money-neg) 14%,var(--surface));color:var(--money-neg)}
.pago-badge.is-timeout{background:var(--surface-3);color:var(--accent-ink);border:1px solid var(--line)}
.pago-badge.is-info{background:var(--surface-3);color:var(--dim);border:1px solid var(--line)}
.pago-new-balance{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 0;padding:14px 18px;border-radius:12px;background:var(--wallet-card);color:var(--wallet-card-ink);text-align:left}
.pago-new-balance span{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.pago-new-balance strong{font:800 22px/1.15 var(--display);color:var(--brand);font-variant-numeric:tabular-nums}

/* Three-step progress: the deposit's (Payment started → Bank confirmation → Wallet credited) and a withdrawal's
   (Requested → Processing → Paid | Failed). A dot per step, a rule between them; text under each dot. */
:is(.pago-progress,.pago-timeline){list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:22px 0 0;padding:0}
:is(.pago-progress,.pago-timeline)>li{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:0 4px;text-align:center;font-size:11px;line-height:1.35;color:var(--faint)}
:is(.pago-progress,.pago-timeline)>li::before{content:'';position:absolute;top:8px;right:50%;width:100%;height:2px;background:var(--line)}
:is(.pago-progress,.pago-timeline)>li:first-child::before{display:none}
:is(.pago-progress,.pago-timeline)>li:is(.is-done,.is-current,.is-failed)::before{background:var(--brand)}
:is(.pago-progress,.pago-timeline) b{font-weight:750}
:is(.pago-progress,.pago-timeline)>li:is(.is-done,.is-current,.is-failed) b{color:var(--text)}
:is(.pago-progress,.pago-timeline) time,:is(.pago-progress,.pago-timeline) small{font-size:10px;color:var(--faint);overflow-wrap:anywhere}
.pago-dot{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line)}
.pago-dot .icon{width:11px;height:11px;stroke-width:3}
.is-done>.pago-dot{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.is-current>.pago-dot{border-color:var(--brand);background:var(--surface);animation:pago-pulse 1.8s ease-in-out infinite}
.is-current>.pago-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand)}
.is-failed>.pago-dot{background:var(--money-neg);border-color:var(--money-neg);color:var(--surface)}
.pago-timeline>li.is-failed b,.pago-timeline>li.is-failed small{color:var(--money-neg)}
.pago-timeline{margin:14px 0 0}

/* Withdraw: Available vs Held, withdrawal cards (receipt + list) */
.pago-balances{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:2px 0 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--line)}
.pago-balances>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 16px;background:var(--surface-2)}
.pago-balances span{font-size:11px;color:var(--faint)}
.pago-balances strong{font:800 19px/1.2 var(--display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pago-balances>div:first-child strong{color:var(--accent-ink)}
.pago-new-account>h3{margin:4px 0 12px;font-size:13px}
.pago-new-account [data-ifsc-note]:empty{display:none}
.pago-accounts .account-method-choice label>span>span{font-variant-numeric:tabular-nums}
.pago-wd{margin:0 0 12px;padding:14px 16px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.pago-wd.is-receipt{margin:0 0 22px;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.pago-wd-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pago-wd-head>strong{font:800 18px/1.2 var(--display);font-variant-numeric:tabular-nums}
.pago-wd-to{display:block;margin:2px 0 0;font-size:11px;color:var(--faint);overflow-wrap:anywhere}
.pago-wd-note{margin:12px 0 0!important;font-size:11px!important;line-height:1.5!important;color:var(--dim)!important}
.pago-wd.is-failed .pago-wd-note{color:var(--text)!important}
.pago-wd-details{display:block;margin:8px 0 0 auto;font-size:11px;font-weight:700;padding:6px 0;min-height:32px}
.pago-empty{font-size:12px;color:var(--faint);margin:0 0 16px}
.pago-aside>h2{font-size:20px}
#overlay .pago-timeline{margin:18px 0 6px}

@media(max-width:760px){
 .pago-return{padding:26px 18px 22px}
 .pago-return>h2{font-size:22px}
 .pago-amount{font-size:30px}
 .pago-balances>div{padding:12px 13px}
 .pago-balances strong{font-size:17px}
 .pago-wd{padding:13px 13px 8px}
}
@media(prefers-reduced-motion:reduce){.pago-spinner{animation-duration:2.4s}.is-current>.pago-dot{animation:none}}
.reduce-motion .pago-spinner{animation-duration:2.4s}.reduce-motion .is-current>.pago-dot{animation:none}
/* E2E L3: the chosen amount chip. refinements.css's dark :is() rule (0,3,1) beats account.css's .account-money .amount-chip.active (0,3,0). */
:root .account-money .amount-chip.active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
/* E2E L2: a movement that did not happen: unsigned, muted. */
.tx-side>strong.pago-void-amount{color:var(--faint);font-weight:600}