.payment-page,.wallet-page{padding:48px 0 80px;background:#f6f8f7;min-height:70vh}.payment-container,.wallet-container{max-width:1120px}.payment-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.payment-head h1{margin:7px 0;font-size:30px}.payment-head p{margin:0;color:#667085}.eyebrow{color:var(--primary);font-weight:800}.payment-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}.payment-card,.payment-summary,.wallet-panel{background:#fff;border:1px solid #e6ebe8;border-radius:22px;padding:26px;box-shadow:0 12px 35px rgba(17,52,34,.05)}.payment-card h2{margin:0 0 20px}.payment-method{display:grid;grid-template-columns:auto 52px 1fr;align-items:center;gap:14px;border:1px solid #dfe7e2;border-radius:16px;padding:16px;margin-bottom:12px;cursor:pointer;transition:.2s}.payment-method:has(input:checked){border-color:var(--primary);background:#f1fbf5;box-shadow:0 0 0 3px rgba(15,157,88,.08)}.payment-method input{width:19px;height:19px;accent-color:var(--primary)}.method-icon{width:48px;height:48px;border-radius:14px;background:#edf8f1;color:var(--primary);display:grid;place-items:center;font-size:25px}.payment-method strong,.payment-method small{display:block}.payment-method small{color:#7a857e;margin-top:4px}.payment-note{font-size:13px;color:#7b827e;line-height:1.8;margin:18px 0 0}.payment-summary h3{margin-top:0}.payment-summary>div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px dashed #e0e7e3}.payment-summary .summary-total{font-size:17px;border-bottom:0;padding-top:20px}.payment-expiry{display:block!important;text-align:center;color:#b54708;background:#fff7ed;border-radius:12px;border:0!important;margin-top:10px}.btn-lg{min-height:52px;font-size:16px}.sandbox-page{min-height:75vh;display:grid;place-items:center;padding:45px 18px;background:linear-gradient(145deg,#eaf8ef,#f9faf9)}.sandbox-card{width:min(520px,100%);background:#fff;border-radius:26px;padding:34px;box-shadow:0 25px 70px rgba(10,55,31,.12);text-align:center}.sandbox-bank{display:inline-flex;background:#e9f8ef;color:var(--primary);padding:8px 14px;border-radius:999px;font-weight:800}.sandbox-card h1{margin:18px 0 8px}.sandbox-card>p{color:#667085}.sandbox-amount{margin:25px 0 12px;background:#f7f9f8;border-radius:18px;padding:20px}.sandbox-amount span,.sandbox-amount strong{display:block}.sandbox-amount strong{font-size:26px;margin-top:7px;color:#173c28}.sandbox-meta{display:flex;justify-content:space-between;padding:12px 4px}.sandbox-actions{display:grid;gap:10px;margin:20px 0}.sandbox-card>small{color:#849087;line-height:1.8}.wallet-hero{background:linear-gradient(135deg,#0f9d58,#08723e);color:white;border-radius:28px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;box-shadow:0 18px 40px rgba(15,157,88,.2)}.wallet-hero span,.wallet-hero strong,.wallet-hero small{display:block}.wallet-hero strong{font-size:34px;margin:9px 0}.wallet-hero small{opacity:.8}.btn-light{background:#fff;color:#12683d}.wallet-sections{display:grid;grid-template-columns:1fr 1fr;gap:22px}.wallet-panel h2{margin-top:0}.transaction-list{display:grid}.transaction-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #eef1ef}.transaction-row:last-child{border-bottom:0}.transaction-row strong,.transaction-row small{display:block}.transaction-row small{color:#8a938e;margin-top:4px}.transaction-type,.payment-status{font-size:12px;font-weight:800;border-radius:999px;padding:7px 9px}.transaction-type.credit,.status-paid{background:#e9f8ef;color:#087642}.transaction-type.debit,.status-failed{background:#fff0f0;color:#b42318}.status-pending{background:#fff7e8;color:#a15c00}.status-refunded{background:#eef4ff;color:#3157a5}.empty-state{text-align:center;color:#8a938e;padding:35px 10px}.sandbox-topup{background:#fff;border:1px dashed #b8c8bf;border-radius:16px;padding:14px 18px;margin-bottom:22px;display:flex;align-items:center;gap:14px}.sandbox-topup small{color:#7d8681}.payment-success-box{background:#eaf9f0;border:1px solid #bce5ca;border-radius:16px;padding:18px;margin:20px 0;color:#086839}.payment-success-box strong,.payment-success-box span{display:block}.payment-success-box span{margin-top:5px}.alert-error{background:#fff0f0;color:#9b1c1c;border:1px solid #f3c6c6}
@media(max-width:850px){.payment-grid,.wallet-sections{grid-template-columns:1fr}.payment-head{align-items:flex-start}.payment-summary{order:-1}.wallet-hero{padding:24px}.wallet-hero strong{font-size:27px}}
@media(max-width:560px){.payment-page,.wallet-page{padding-top:24px}.payment-head{display:block}.payment-head .btn{margin-top:12px}.payment-card,.payment-summary,.wallet-panel{padding:18px;border-radius:18px}.payment-method{grid-template-columns:auto 42px 1fr;padding:13px}.method-icon{width:40px;height:40px}.wallet-hero{display:block}.wallet-hero .btn{margin-top:20px}.transaction-row{grid-template-columns:auto 1fr}.transaction-row>b{grid-column:2}.sandbox-topup{display:block}.sandbox-topup small{display:block;margin-top:8px}}