/* Unified goods checkout surface. */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--xui-page-bg, #f5f7f6); color: var(--xui-ink, #17231c); }
button, input { font: inherit; }
.checkout-page { width: min(100%, 520px); min-height: 100dvh; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)); }
.checkout-shell { display: grid; gap: 12px; }
.checkout-head { display: grid; gap: 3px; }
.checkout-head small { color: var(--xui-accent, #078b45); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.checkout-head h1, .checkout-card h2 { margin: 0; }
.checkout-head h1 { font-size: 22px; line-height: 1.25; }
.checkout-head p, .checkout-card p { margin: 0; color: var(--xui-ink-muted, #667085); font-size: 13px; line-height: 1.55; }
.checkout-card { display: grid; gap: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.checkout-summary { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; padding: 4px 0 10px; border-bottom: 1px solid var(--xui-line-soft, #d9e0dc); }
.checkout-product-media { width: 76px; aspect-ratio: 1; padding: 0; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 9px; background: var(--xui-bg-quiet, #eef3f0); cursor: zoom-in; container-type: size; }
.checkout-product-media:disabled { cursor: default; }
.checkout-product-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.checkout-product-image.is-default { width: clamp(48px, 60cqmin, 256px); height: clamp(48px, 60cqmin, 256px); object-fit: contain; opacity: .2; }
.checkout-product-copy { min-width: 0; display: grid; align-content: start; gap: 5px; }
.checkout-product-copy h2 { margin: 0; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.checkout-owner { margin: 0; color: var(--xui-ink-muted, #667085); font-size: 12px; }
.checkout-price-row { min-width: 0; display: flex; align-items: center; gap: 8px; }
.checkout-price { font-size: 21px; line-height: 1.25; font-weight: 850; white-space: nowrap; }
.checkout-discount-trigger { min-height: 28px; padding: 0 10px; border: 1px solid #07a956; border-radius: 999px; background: transparent; color: #078b45; font-size: 12px; font-weight: 750; cursor: pointer; }
.checkout-discount-trigger:disabled { opacity: .5; cursor: default; }
.checkout-applied-code { min-width: 0; display: flex; align-items: center; gap: 4px; color: #078b45; font-size: 12px; line-height: 1.4; }
.checkout-applied-code span { min-width: 0; overflow-wrap: anywhere; }
.checkout-applied-code button { width: 22px; height: 22px; flex: 0 0 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: currentColor; font-size: 18px; line-height: 1; cursor: pointer; }
.checkout-beneficiary-section { display: grid; gap: 9px; padding: 1px 0; }
.checkout-beneficiary { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--xui-ink-muted, #667085); font-size: 12px; }
.checkout-beneficiary > span:first-child { white-space: nowrap; }
.checkout-beneficiary strong { min-width: 0; color: var(--xui-ink, #17231c); font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-beneficiary small { margin-left: auto; font-size: 11px; white-space: nowrap; }
.checkout-avatar { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--xui-bg-quiet, #eef3f0); color: var(--xui-ink, #17231c); font-size: 11px; font-weight: 800; }
.checkout-avatar img { width: 100%; height: 100%; object-fit: cover; }
.checkout-details { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.checkout-details summary { min-height: 44px; padding: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.checkout-details summary::-webkit-details-marker { display: none; }
.checkout-details summary span { font-size: 14px; font-weight: 750; }
.checkout-details summary small { color: var(--xui-ink-muted, #667085); font-size: 11px; text-align: right; }
.checkout-details summary i { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, 2px); transition: transform .18s ease; }
.checkout-details[open] summary i { transform: rotate(225deg) translate(-2px, 2px); }
.checkout-detail-list { display: grid; gap: 0; padding: 0 0 8px; }
.checkout-detail-list > div { padding: 9px 0; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--xui-line-soft, #d9e0dc); }
.checkout-detail-list small { color: var(--xui-ink-muted, #667085); font-size: 12px; }
.checkout-detail-list p { margin: 0; color: var(--xui-ink, #17231c); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.checkout-btn { min-height: 44px; padding: 0 14px; border: 1px solid var(--xui-line, #bcc8c0); border-radius: 8px; background: transparent; color: inherit; font-weight: 750; font-size: 14px; cursor: pointer; }
.checkout-btn.primary { border-color: #07c160; background: #07c160; color: #fff; }
.checkout-btn:disabled { opacity: .55; cursor: wait; }
.checkout-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.checkout-pay { width: 100%; }
.checkout-pay-spacer { height: max(128px, calc(112px + env(safe-area-inset-bottom))); }
.checkout-pay-bar { position: fixed; z-index: 80; left: 50%; bottom: 0; width: min(100%, 520px); padding: 18px 14px max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: transparent; }
.checkout-note { color: var(--xui-ink-muted, #667085); font-size: 12px; line-height: 1.5; text-align: center; }
.checkout-note.error, .checkout-route-error { color: #c43d35; }
.checkout-route-error { margin: 0; font-size: 12px; line-height: 1.5; }
.checkout-state { min-height: 65dvh; display: grid; place-items: center; text-align: center; }
.checkout-state.compact { min-height: 160px; }
.checkout-result-mark { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: #07c160; color: #fff; font-size: 32px; font-weight: 900; }
.checkout-result-mark.pending { background: #d49b22; }
.checkout-result-mark.failed { background: #cf4a43; }
.checkout-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(11, 18, 14, .5); }
.checkout-dialog { width: min(100%, 390px); display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: var(--xui-surface, #fff); box-shadow: 0 18px 50px rgba(0, 0, 0, .22); }
.checkout-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkout-dialog h2 { margin: 0; font-size: 17px; }
.checkout-dialog label { font-size: 12px; font-weight: 700; }
.checkout-dialog input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--xui-line, #bcc8c0); border-radius: 8px; background: var(--xui-surface, #fff); color: inherit; }
.checkout-icon-btn { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 23px; line-height: 1; cursor: pointer; }
.checkout-qr-overlay { position: fixed; inset: 0; z-index: 125; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(11, 18, 14, .5); }
.checkout-qr-dialog { width: min(100%, 420px); max-height: 100%; overflow-y: auto; border: 1px solid var(--xui-line-soft, #d9e0dc); border-radius: 16px; background: var(--xui-surface, #fff); box-shadow: 0 18px 44px rgba(15, 23, 42, .22); }
.checkout-qr-dialog > header { min-height: 58px; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--xui-line-soft, #d9e0dc); }
.checkout-qr-dialog > header strong { font-size: 17px; }
.checkout-qr-body { display: grid; gap: 13px; padding: 18px; }
.checkout-qr-message { display: flex; align-items: center; justify-content: center; gap: 9px; }
.checkout-qr-message i { color: #07c160; font-size: 27px; }
.checkout-qr-message p { margin: 0; color: var(--xui-ink-muted, #667085); font-size: 13px; line-height: 1.55; }
.checkout-qr-code { width: min(280px, 100%); margin: 0 auto; background: #fff; }
.checkout-qr-code img { width: 100%; aspect-ratio: 1; display: block; }
.checkout-qr-beneficiary { min-width: 0; padding-top: 13px; display: flex; align-items: center; justify-content: center; gap: 9px; border-top: 1px solid var(--xui-line-soft, #d9e0dc); }
.checkout-qr-avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--xui-bg-quiet, #eef3f0); font-size: 13px; font-weight: 750; }
.checkout-qr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.checkout-qr-beneficiary > span:last-child { min-width: 0; display: grid; gap: 1px; }
.checkout-qr-beneficiary small { color: var(--xui-ink-muted, #667085); font-size: 11px; }
.checkout-qr-beneficiary strong { font-size: 13px; overflow-wrap: anywhere; }
.checkout-image-viewer { position: fixed; inset: 0; z-index: 130; display: grid; grid-template-rows: 1fr; background: rgba(0, 0, 0, .94); }
.checkout-image-scroll { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: stretch; }
.checkout-image-scroll::before, .checkout-image-scroll::after { content: ""; flex: 1 0 0; }
.checkout-image-scroll img { width: 100%; height: auto; flex: 0 0 auto; display: block; object-fit: contain; }
.checkout-image-close { position: fixed; z-index: 131; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.checkout-reuse-blocker { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: var(--xui-page-bg, #f5f7f6); }
.checkout-reuse-blocker section { width: min(100%, 360px); display: grid; gap: 16px; text-align: center; }
.checkout-reuse-blocker h1 { margin: 0; font-size: 19px; line-height: 1.35; }
.checkout-reuse-blocker p { margin: 0; color: var(--xui-ink-muted, #667085); font-size: 14px; line-height: 1.65; }
@media (max-width: 480px) { .checkout-page { padding-inline: 12px; } .checkout-head h1 { font-size: 20px; } .checkout-actions { grid-template-columns: 1fr; } }