/* QR-Us V1 — dual light themes + payment UX */
html,body,.site-header,.card,.hero,.btn,.tab,.mode,.table-tile,.notice,.field input,.field select,.field textarea{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}

/* Thai: warm orange + cream + green */
html[lang="th"]{--navy:#6B3F22;--navy2:#8D5227;--green:#39A84A;--green2:#EEF9F0;--orange:#F47A20;--yellow:#FFC447;--red:#C84646;--bg:#FFF8EC;--card:#FFFDF8;--line:#EAD9C7;--text:#3B2A21;--muted:#78685C;--shadow:0 10px 30px rgba(116,72,35,.10)}
html[lang="th"] body{background:linear-gradient(180deg,#FFF9F1 0%,#FFF2DF 100%);color:var(--text)}
html[lang="th"] .site-header{background:rgba(255,253,248,.97);border-bottom-color:#ECD8C4;box-shadow:0 6px 18px rgba(91,56,34,.08)}
html[lang="th"] .hero{background:linear-gradient(135deg,#FFF0DA 0%,#FFD59A 55%,#FFB766 100%);color:#4A3022;border-color:#F3C48A}
html[lang="th"] .hero p{color:#5D4636}

/* English: fresh mint + aqua + soft coral */
html[lang="en"]{--navy:#285769;--navy2:#2F7286;--green:#34A56A;--green2:#EBF9F2;--orange:#FF9A63;--yellow:#FFE1A8;--red:#C95C5C;--bg:#F3FBFC;--card:#FFFFFF;--line:#D6EAED;--text:#24414D;--muted:#6C8590;--shadow:0 10px 30px rgba(40,87,105,.10)}
html[lang="en"] body{background:linear-gradient(180deg,#F8FEFF 0%,#EEF8FA 100%);color:var(--text)}
html[lang="en"] .site-header{background:rgba(255,255,255,.97);border-bottom-color:#D6EAED;box-shadow:0 6px 18px rgba(40,87,105,.08)}
html[lang="en"] .hero{background:linear-gradient(135deg,#E9FAFB 0%,#CFF2EE 52%,#FFE2C8 100%);color:#1F4656;border-color:#C7E8E8}
html[lang="en"] .hero p{color:#4A6973}
html[lang="en"] .main-nav button{color:#2A5566}
html[lang="en"] .main-nav button:after{background:var(--green)}
html[lang="en"] .cat-btn.active,html[lang="en"] .cat-btn:hover{background:#EDF9FA;color:#2F7286}
html[lang="en"] .mode.active{border-color:#7DC9B4;background:#F1FBF7}
html[lang="en"] .notice{background:#EFFAFC;border-color:#CFE6EC;color:#2E5E6F}

/* Payment selection */
.pay-options{display:flex;flex-direction:column;gap:10px}
.pay-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:2px solid var(--line);background:var(--card);color:var(--text);border-radius:14px;padding:14px}
.pay-option.active{border-color:var(--green);background:var(--green2);box-shadow:0 0 0 3px rgba(57,168,74,.08)}
.pay-radio{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:900;color:var(--green);flex:0 0 auto}
.pay-option.active .pay-radio{border-color:var(--green);background:#fff}
.merchant-pay-panel{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.payment-qr-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.payment-qr-img{width:150px;max-height:150px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
.payment-qr-img.large{width:220px;max-height:220px}
.slip-preview{display:block;width:100%;max-width:300px;max-height:360px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;margin:10px 0}
.slip-preview.small{width:82px;height:82px;object-fit:cover;margin:0}
.payment-proof{display:flex;align-items:center;gap:10px;margin:10px 0}
@media(max-width:680px){.payment-qr-img.large{width:180px;max-height:180px}.pay-option{padding:12px}}