/* Order payment layout approved on 2026-10-06. Scoped to this dialog.
   Retains the base light/dark surfaces while assigning explicit colours to
   method selection, VIP reminders and the receive-money confirmation. */
dialog.payment-workflow{box-sizing:border-box;width:min(390px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:auto;padding:18px 20px 12px;border:1px solid var(--payment-border);border-radius:22px;background:var(--payment-surface);color:var(--payment-ink);box-shadow:0 9px 22px var(--payment-shadow);font:400 16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
dialog.payment-workflow{position:fixed;--payment-safe-top:max(16px,env(safe-area-inset-top,0px));--payment-safe-bottom:max(16px,env(safe-area-inset-bottom,0px));inset:var(--payment-safe-top) 0 var(--payment-safe-bottom);max-height:calc(100vh - var(--payment-safe-top) - var(--payment-safe-bottom));max-height:calc(100dvh - var(--payment-safe-top) - var(--payment-safe-bottom));color-scheme:light;--payment-surface:#ffffff;--payment-ink:#163e2e;--payment-soft:#f0f4eb;--payment-border:#dbe5d6;--payment-muted:#5d7060;--payment-field:#ffffff;--payment-find:#173f30;--payment-find-ink:#ffffff;--payment-shadow:#193d3012}
dialog.payment-workflow::backdrop{background:#193e3066}
.payment-workflow *{box-sizing:border-box}
.payment-workflow .payment-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:36px}
.payment-workflow .payment-heading h2{margin:0;font-size:14px;line-height:20px;font-weight:600;letter-spacing:0;color:var(--payment-ink);overflow-wrap:anywhere}
.payment-workflow .payment-order-code{display:inline-block;white-space:nowrap;font-size:12px;font-weight:500}
.payment-workflow button.payment-close{flex:0 0 44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:12px;background:transparent;color:var(--payment-muted);font:400 25px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.payment-workflow .payment-total{margin:8px 0 18px;color:var(--payment-ink);font-size:40px;line-height:44px;font-weight:750;letter-spacing:-.035em;text-align:right;font-variant-numeric:tabular-nums}
.payment-workflow .payment-state{margin:0 0 14px;font-size:14px;font-weight:650}
.payment-workflow .payment-qr{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;min-width:0;margin:16px 0 18px;text-align:center}
.payment-workflow .payment-qr-code{width:219px;height:auto;aspect-ratio:1;max-width:100%;padding:12px;background:#fff;color:#000;line-height:0}
.payment-workflow .payment-qr-code img,.payment-workflow .payment-qr-code canvas,.payment-workflow .payment-qr-code svg{display:block;width:100%;height:auto;aspect-ratio:1;max-width:100%;margin:0}
.payment-workflow .payment-bank-account{margin:0;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.01em;overflow-wrap:anywhere;text-align:center}
.payment-workflow .payment-member{min-width:0;margin:0;padding:12px;border:1px solid #e0cf8d;border-radius:14px;background:#f4e5af;color:#000}
.payment-workflow .payment-member-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 8px}
.payment-workflow .payment-member-label .payment-member-title{display:block;margin:0;font-size:14px;line-height:20px;letter-spacing:.01em;font-weight:750;color:#000}
.payment-workflow .payment-member-label>span:last-child{font-size:12px;line-height:16px;color:#34372f}
.payment-workflow .payment-member-search{display:flex;align-items:stretch;gap:8px}
.payment-workflow .payment-member-search input{box-shadow:none;-webkit-text-fill-color:currentColor;flex:1 1 0;min-width:0;width:100%;min-height:44px;margin:0;padding:10px 11px;border:1px solid #405b49;border-radius:9px;background:#10241c;color:#e2eee5;font:400 16px/22px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.payment-workflow .payment-member-search input::placeholder{color:#b1c2b2;opacity:1}
.payment-workflow button.payment-member-find{flex:0 0 56px;min-height:44px;margin:0;padding:10px;border:0;border-radius:9px;background:#10291f;color:#fff;font:650 14px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.payment-workflow .payment-member-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.payment-workflow .payment-member-actions button{min-height:44px;margin:0;padding:10px 12px;border:0;border-radius:9px;background:var(--payment-field);color:var(--payment-ink);font:650 14px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.payment-workflow .payment-member-actions button.primary{background:var(--payment-find);color:var(--payment-find-ink)}
.payment-workflow .payment-member-name{margin:0 0 6px;font-size:14px;line-height:20px;font-weight:750;overflow-wrap:anywhere}
.payment-workflow .payment-member-help{margin:8px 0 0;font-size:12px;line-height:18px;color:var(--payment-muted)}
.payment-workflow .payment-member .payment-member-help{color:#34372f}
.payment-workflow .payment-member-status{margin:9px 0 0;font-size:12px;line-height:18px;color:#34372f}
.payment-workflow .payment-member-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.payment-workflow button.payment-member-tool{flex:1 1 auto;min-height:44px;margin:0;padding:8px 6px;border:1px solid #c9bd8c;border-radius:8px;background:transparent;color:#000;font:600 11px/16px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:normal}
.payment-workflow .payment-methods{margin:0 0 14px}
.payment-workflow .payment-methods-label{margin:0 0 8px;font-size:13px;line-height:18px;font-weight:650;color:var(--payment-ink)}
.payment-workflow .payment-method-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.payment-workflow button.payment-method{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;width:100%;min-height:76px;margin:0;padding:12px;border:2px solid #dbe5d6;border-radius:12px;background:#f6f7f3;color:#173f30;text-align:left}
.payment-workflow button.payment-method-bank_qr{color:#0066b3}
.payment-workflow button.payment-method-cash.is-selected{background:#173f30;border-color:#173f30;color:#fff}
.payment-workflow button.payment-method-bank_qr.is-selected{background:#0066b3;border-color:#0066b3;color:#fff}
.payment-workflow .payment-method-name{font-size:15px;line-height:20px;font-weight:750}
.payment-workflow .payment-method-status{font-size:11px;line-height:16px;font-weight:500}
.payment-workflow .payment-reminder{margin:14px 0 10px;font-size:12px;line-height:18px;color:var(--payment-muted)}
.payment-workflow button.payment-confirm{display:block;width:100%;min-height:52px;margin:0;padding:13px 10px;border:0;border-radius:12px;background:#ffb52e;color:#000;font:750 15px/22px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;text-align:center}
.payment-workflow .payment-confirm-help{margin:7px 0 0;font-size:11px;line-height:16px;color:var(--payment-muted);text-align:center}
.payment-workflow button.payment-edit{display:block;width:100%;min-height:44px;margin:12px 0 0;padding:10px 6px;border:1px solid var(--payment-border);border-radius:10px;background:transparent;color:var(--payment-ink);font:600 13px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:center}
.payment-workflow .payment-edit-help{margin:7px 0 0;font-size:11px;line-height:16px;color:var(--payment-muted)}
.payment-workflow .payment-history{margin-top:12px;font-size:12px;line-height:18px;color:var(--payment-muted)}
.payment-workflow [data-message]{padding:0;background:transparent;border-radius:0;margin:8px 0 0;font-size:12px;line-height:18px;color:var(--payment-muted)}
.payment-workflow [data-message]:empty{display:none}
.payment-workflow button:disabled,.payment-workflow input:disabled{opacity:.55;cursor:not-allowed}
.payment-workflow button.payment-method.is-selected:disabled{opacity:.85}
.payment-workflow .payment-member input:focus-visible,.payment-workflow button:focus-visible{outline:3px solid var(--payment-find);outline-offset:2px}
/* Follow the device theme with the review's original light-dark() pairs. */
@supports(color:light-dark(#ffffff,#000000)){
 dialog.payment-workflow{color-scheme:light dark;--payment-surface:light-dark(#ffffff,#142c23);--payment-ink:light-dark(#163e2e,#e2eee5);--payment-soft:light-dark(#f0f4eb,#233e30);--payment-border:light-dark(#dbe5d6,#405b49);--payment-muted:light-dark(#5d7060,#b1c2b2);--payment-field:light-dark(#ffffff,#10241c);--payment-find:light-dark(#173f30,#dcebdc);--payment-find-ink:light-dark(#ffffff,#163e2e);--payment-shadow:light-dark(#193d3012,#00000024)}
}
@media(max-width:380px){dialog.payment-workflow{padding-left:16px;padding-right:16px}.payment-workflow .payment-heading h2{font-size:13px}.payment-workflow .payment-total{font-size:36px}.payment-workflow button.payment-confirm{font-size:14px}}