/* Kiosk "Pay on your phone" (Q1): full screen over the shop, vendor theme surfaces, a large QR on white so any phone reads it. */
.kpay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg,var(--surface))}
.kpay-body{width:min(520px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:24px;border-radius:var(--radius,16px);background:var(--surface);border:var(--border-width,1px) solid var(--border);box-shadow:var(--shadow)}
.kpay-body h2{margin:0;font-size:1.8rem}
.kpay-qr{width:min(320px,70vw);height:auto;aspect-ratio:1;background:#fff;padding:max(12px,calc(min(320px,70vw)*.1));box-sizing:border-box;border-radius:12px}
.kpay-vendor{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;color:var(--main-text)}
.kpay-logo{height:36px;width:auto;max-width:120px;object-fit:contain;border-radius:6px}
.kpay-dot{display:inline-block;width:12px;height:12px;margin-right:10px;vertical-align:middle;border-radius:50%;background:var(--accent,var(--main-text));animation:kpay-pulse 1.4s ease-in-out infinite}
@keyframes kpay-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.kpay-dot{animation:none}}
.kpay-totals{width:100%;max-width:320px}
.kpay-totals .grand{font-size:2.25rem}
#kpay-total{color:var(--main-text)}
.kpay-left{margin:0;font-size:1rem;font-weight:600;color:var(--muted)}
.kpay-left.soon{color:var(--warning-text)}
.kpay .btn.full{max-width:320px;min-height:56px}
.kpay-done{margin:0;font-size:4.5rem;line-height:1;font-weight:800}
.kpay-done.ok{color:var(--success-text,var(--main-text))}
.kpay-done.bad{color:var(--warning-text)}