/* Code-native glass ornaments; QR images remain unaltered and unobstructed. */
.checkout-page{isolation:isolate;--checkout-surface:rgba(25,22,34,.94);--checkout-ink:#f5f2fa;--checkout-muted:#b7b1c4;color:var(--checkout-ink);font-family:Inter,system-ui,sans-serif}
html[data-theme=light] .checkout-page{--checkout-surface:rgba(255,255,255,.94);--checkout-ink:#262130;--checkout-muted:#696172}
.checkout-page::before,.checkout-page::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:440px;height:440px;border-radius:36%;border:1px solid rgba(170,150,204,.13);background:linear-gradient(145deg,rgba(175,155,213,.09),transparent 60%);box-shadow:inset 0 1px 0 rgba(230,220,250,.08);transform:rotate(-26deg)}
.checkout-page::before{top:90px;left:calc(50% - 640px)}
.checkout-page::after{width:360px;height:360px;bottom:-120px;right:calc(50% - 590px);transform:rotate(28deg);border-radius:50%;background:radial-gradient(ellipse at 30% 25%,rgba(117,161,190,.08),transparent 65%)}
html[data-theme] .checkout-page .box,html[data-theme] .checkout-page .section,html[data-theme] .checkout-page .glass-nav{background:var(--checkout-surface);border:1px solid var(--topup-edge,rgba(145,125,170,.15));box-shadow:0 8px 32px rgba(8,3,18,.035);backdrop-filter:none;-webkit-backdrop-filter:none}
.checkout-page .payment-switch{padding:5px;border-radius:22px;background:var(--topup-tile);border:1px solid var(--topup-edge);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
html[data-theme] .checkout-page .payment-switch .method{padding:12px;background:transparent;box-shadow:none;border-color:transparent;font-size:14px}
html[data-theme] .checkout-page .payment-switch .method.selected{background:var(--checkout-surface);border-color:var(--topup-accent);box-shadow:0 2px 8px var(--topup-shadow)}
.payment-qr{display:block;width:260px;max-width:100%;height:auto;object-fit:contain;background:white}
.payment-switch .method.selected b::after{content:" ✓";color:#b69bdc}
html[data-theme=light] .payment-switch .method.selected b::after{color:#705090}
.payment-number{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-radius:16px;background:var(--topup-tile);text-align:left}
.payment-number small{display:block;font-size:11px;color:var(--checkout-muted);margin-bottom:4px}
.payment-number strong{font-size:17px;letter-spacing:.025em;font-variant-numeric:tabular-nums}
.payment-number button{min-width:64px;min-height:44px;border:1px solid var(--topup-edge);border-radius:12px;font-size:13px;font-weight:600}
.receipt-preview{width:auto;max-width:100%;max-height:none;object-fit:contain}
.acknowledge{min-height:44px;padding:8px 0;cursor:pointer}.acknowledge input{width:20px;height:20px;flex-shrink:0;accent-color:#9476bb}
.checkout-page .quantity button{min-width:44px;min-height:44px}
.checkout-page #copyStatus:empty{display:none}
.checkout-page #statusMessage{color:var(--checkout-muted)!important;font-size:14px;line-height:1.8}
.checkout-page .status-notice{padding:24px 20px;border-radius:24px;background:var(--checkout-surface);border:1px solid var(--topup-accent);margin-bottom:24px}
.checkout-page .status-notice #statusMessage{margin-bottom:0}
.status-progress{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 24px;text-align:center}
.status-progress li{flex:1;font-size:11px;color:var(--checkout-muted);padding-top:12px;border-top:3px solid var(--topup-edge)}
.status-progress li[data-done=true]{border-color:#9c83c3;color:var(--checkout-ink)}
.status-progress li[aria-current=step]{font-weight:700}
[data-status=delivered] .status-notice{border-color:rgba(72,174,133,.45)}
[data-status=rejected] .status-notice{border-color:rgba(208,114,135,.45)}
.status-toast{position:fixed;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:100;width:min(440px,calc(100% - 32px));padding:16px 20px;border-radius:20px;background:var(--checkout-surface);color:var(--checkout-ink);border:1px solid var(--topup-accent);box-shadow:0 12px 40px rgba(0,0,0,.18);font-size:14px;font-weight:600;text-align:center;pointer-events:none}
html[data-theme=light] .checkout-page .btn-primary{color:#fff!important}
@media(max-width:480px){.checkout-page::before{left:-310px;top:120px}.checkout-page::after{right:-260px}.checkout-page .receipt-line{font-size:12px;gap:8px}}
@media(prefers-reduced-transparency:reduce){.checkout-page::before,.checkout-page::after{display:none}.checkout-page .payment-switch{backdrop-filter:none;background:var(--checkout-surface)}}