:root{--ink:#17121f;--muted:#6f6878;--purple:#7137e8;--purple-dark:#5420bd;--wash:#f5f1fa;--line:#e6dfec;--danger:#b42318;--success:#16794a}*{box-sizing:border-box}html{background:var(--wash)}body{color:var(--ink);background:radial-gradient(circle at 20% 0%, #eee3ff 0, transparent 35rem), var(--wash);margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.shell{flex-direction:column;max-width:1120px;min-height:100dvh;margin:auto;padding:28px 32px 20px;display:flex}header{justify-content:space-between;align-items:center;height:48px;display:flex}.brand{letter-spacing:-.7px;align-items:center;gap:9px;font-size:21px;font-weight:800;display:inline-flex}.brand-mark{background:var(--purple);border-radius:9px;justify-content:center;align-items:flex-end;gap:2px;width:27px;height:27px;padding:6px;display:flex;transform:rotate(-4deg)}.brand-mark i{background:#fff;border-radius:4px;width:3px;display:block}.brand-mark i:first-child{height:7px}.brand-mark i:nth-child(2){height:13px}.brand-mark i:nth-child(3){height:9px}.secure-label{color:var(--muted);white-space:nowrap;align-items:center;gap:6px;font-size:13px;font-weight:650;display:flex}.checkout-grid{flex:1;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);align-items:start;gap:20px;padding:44px 0;display:grid}.payment-panel,.summary{background:#fffffff0;border:1px solid #4a2d5b17;border-radius:24px;box-shadow:0 22px 70px #3e274d14}.payment-panel{min-height:610px;padding:40px}.eyebrow{color:var(--muted);font-size:14px;font-weight:650}h1{letter-spacing:-2.2px;margin:9px 0 8px;font-size:clamp(34px,5vw,48px);line-height:1.04}.description{color:var(--muted);margin:0;font-size:15px}.method-tabs{border-bottom:1px solid var(--line);gap:26px;margin:34px 0 26px;display:flex}.method-tabs button{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0 1px 14px;font-weight:720;position:relative}.method-tabs button.active{color:var(--ink)}.method-tabs button.active:after{content:"";background:var(--purple);border-radius:4px;height:2px;position:absolute;bottom:-1px;left:0;right:0}.payment-form{gap:18px;display:grid}label{gap:8px;font-size:13px;font-weight:720;display:grid}input{width:100%;height:52px;color:var(--ink);background:#fff;border:1px solid #d9d0e0;border-radius:12px;outline:none;padding:0 16px;transition:border-color .15s,box-shadow .15s}input::placeholder{color:#aaa2b2}input:focus{border-color:var(--purple);box-shadow:0 0 0 3px #7137e81f}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:12px;justify-content:center;align-items:center;gap:9px;width:100%;min-height:52px;font-weight:780;text-decoration:none;display:inline-flex}.primary-button{color:#fff;background:var(--purple);margin-top:6px;box-shadow:0 9px 20px #7137e833}.primary-button:hover{background:var(--purple-dark)}.primary-button:disabled{cursor:wait;opacity:.68}.primary-button.compact{width:auto;padding:0 28px}.secondary-button{color:var(--purple-dark);background:#f0e9fb;margin-top:8px}.form-note{color:var(--muted);text-align:center;justify-content:center;align-items:center;gap:6px;font-size:12px;line-height:1.45;display:flex}.error{color:var(--danger);background:#fff2f0;border:1px solid #ffd2cc;border-radius:11px;margin:-10px 0 18px;padding:12px 14px;font-size:13px;line-height:1.4}.summary{padding:30px;position:sticky;top:28px}.merchant-avatar{color:#fff;background:var(--ink);border-radius:14px;place-items:center;width:46px;height:46px;margin-bottom:15px;font-size:20px;font-weight:800;display:grid}.summary>div:nth-child(2){gap:4px;display:grid}.summary span{color:var(--muted);font-size:12px}.summary strong{font-size:16px}.summary hr{border:0;border-top:1px solid var(--line);margin:24px 0}.summary dl{gap:15px;margin:0;display:grid}.summary dl div{justify-content:space-between;gap:16px;font-size:14px;display:flex}.summary dt{color:var(--muted)}.summary dd{margin:0;font-weight:650}.summary dl .total{border-top:1px solid var(--line);padding-top:15px}.summary dl .total dt,.summary dl .total dd{color:var(--ink);font-size:16px;font-weight:800}.reference,.expiry{border-top:1px solid var(--line);color:var(--muted);margin:23px 0 0;padding-top:18px;font-size:12px;line-height:1.45}.reference strong{color:var(--ink);word-break:break-all;margin-top:3px;font-size:12px;display:block}.expiry{border:0;margin-top:11px;padding:0}.bank-intro{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:300px;display:flex}.bank-intro h2{margin:17px 0 7px;font-size:21px}.bank-intro p{max-width:390px;color:var(--muted);font-size:14px;line-height:1.5}.bank-intro .primary-button{max-width:390px}.bank-icon{width:52px;height:52px;color:var(--purple);background:#eee6fb;border-radius:16px;place-items:center;font-size:25px;display:grid}.waiting{align-items:center;gap:9px;font-size:15px;font-weight:750;display:flex}.pulse{background:#ed9d22;border-radius:50%;width:9px;height:9px;box-shadow:0 0 0 5px #fff3dc}.bank-details>p{color:var(--muted);font-size:13px;line-height:1.5}.detail{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:13px 0;display:flex}.detail>span{color:var(--muted);font-size:12px}.detail>div{align-items:center;gap:10px;display:flex}.detail strong{font-size:14px}.detail strong.amount{font-size:17px}.detail button{color:var(--purple);cursor:pointer;background:#f0e9fb;border:0;border-radius:7px;padding:6px 8px;font-size:11px;font-weight:750}footer{color:#817789;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-height:40px;font-size:12px;display:flex}footer a{color:inherit}footer strong{color:#52495b}.shell--centered{justify-content:center;align-items:center;padding:24px}.empty-card{text-align:center;background:#fff;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;width:min(100%,460px);min-height:430px;padding:36px;display:flex;box-shadow:0 24px 80px #3e274d1a}.empty-card .brand{position:absolute;top:38px}.empty-card h1{letter-spacing:-1.3px;margin:22px 0 9px;font-size:30px}.empty-card p{color:var(--muted);max-width:360px;font-size:14px;line-height:1.55}.empty-icon,.result-icon{width:58px;height:58px;color:var(--purple);background:#eee6fb;border-radius:18px;place-items:center;font-size:25px;font-weight:800;display:grid}.result-icon.success{color:var(--success);background:#e8f7ef}.error-icon{color:var(--danger);background:#fff0ee}.text-link{color:var(--purple);margin-top:12px;font-weight:750}.result-reference{background:var(--wash);border-radius:9px;padding:10px 14px;font-size:12px!important}.empty-card .primary-button{margin-top:13px}.spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:17px;height:17px;animation:.7s linear infinite spin}.spinner--large{width:40px;height:40px;color:var(--purple);border-width:3px;margin-top:30px}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:760px){.shell{padding:18px 14px 12px}.secure-label{font-size:11px}.checkout-grid{grid-template-columns:1fr;padding:22px 0}.summary{grid-row:1;padding:22px;position:static}.payment-panel{min-height:auto;padding:25px 20px}.payment-panel h1{font-size:38px}.summary hr,.summary dl,.summary .expiry{display:none}.merchant-avatar{float:left;border-radius:11px;width:38px;height:38px;margin:0 12px 0 0}.summary>div:nth-child(2){justify-content:center;min-height:38px}.method-tabs{gap:14px;margin-top:27px}.method-tabs button{white-space:nowrap;flex:1;font-size:13px}.empty-card .brand{top:28px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}