/* Shared PinkoQR checkout: responsive QR and touch-friendly bank choices. */
body { padding:24px 16px; padding-bottom:max(24px,env(safe-area-inset-bottom)); }
.pay-brand { font-weight:800; letter-spacing:-.035em; }
.pay-brand span { display:block; margin-top:5px; font-size:12px; font-weight:500; letter-spacing:0; }
.qr-box { max-width:100%; margin-inline:auto; }
.qr-box img,.qr-box canvas { max-width:100%; height:auto!important; }
.bank-btn { min-height:64px; border-radius:12px; text-align:center; overflow-wrap:anywhere; }
.form-input { font-size:16px; min-height:48px; }
.submit-btn,.retry-btn,.close-btn { min-height:48px; border-radius:12px; }
.pay-note,.error-msg,.amount-desc { overflow-wrap:anywhere; line-height:1.6; }
:where(a,button,input):focus-visible { outline:3px solid #818cf8; outline-offset:3px; }
@media(max-width:480px) {
 body { align-items:flex-start; padding:12px; padding-bottom:max(20px,env(safe-area-inset-bottom)); }
 .banks-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .pay-hdr { padding:24px 18px 18px; }
 .qr-section,.banks-section { padding:18px; }
 .presets { display:flex; flex-wrap:wrap; gap:6px; }
 .preset-btn { min-height:40px; flex:1 0 28%; }
 .pay-amount,.amount-value { font-size:30px; overflow-wrap:anywhere; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }