/* ──────────────────────────────────────────────────────────────────────────
   pay-choice.css — กล่องเลือกวิธีชำระกลาง (includes/Payments/ui.php · pay_choice_html())
   ใช้ได้ทุกธีม: อ่าน token ของหน้า (--ink --accent --border …) ถ้าไม่มีใช้ค่าสำรองตาม Design System
   .pc (การ์ด) › .pc-head (ชื่อ + ราคา) › .pc-opts (2 ทางเลือก) › .pc-panel[data-pc-panel=wallet|slip] › .pc-res (ผลลัพธ์)
   ────────────────────────────────────────────────────────────────────────── */
.pc{--pc-ink:var(--ink,#0A0A0B);--pc-bg:var(--bg,#FFFFFF);--pc-soft:var(--bg-soft,#FAFAFB);--pc-mute:var(--bg-mute,#F4F5F7);
  --pc-line:var(--border,#E8E9EC);--pc-line2:var(--border-strong,#D5D8DD);--pc-t2:var(--text-2,#52576A);--pc-t3:var(--text-3,#8B92A0);
  --pc-acc:var(--accent,#D4FF3E);--pc-acc-soft:var(--accent-soft,#F4FFD0);--pc-good:#10B981;--pc-warn:#F59E0B;--pc-bad:#EF4444;
  position:relative;min-width:0;max-width:640px;padding:22px;border-radius:18px;background:var(--pc-bg);border:1px solid var(--pc-line);
  box-shadow:0 1px 2px rgba(10,10,11,.04),0 12px 32px -18px rgba(10,10,11,.18);font-family:'Prompt',sans-serif;color:var(--pc-ink);line-height:1.55}
.pc *,.pc *::before,.pc *::after{box-sizing:border-box}
.pc [hidden]{display:none!important}

/* หัว: ชื่อรายการ + ยอด */
.pc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--pc-line)}
.pc-eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pc-t3)}
.pc-title{margin:2px 0 0;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.pc-note{margin:4px 0 0;font-size:13px;color:var(--pc-t2)}
.pc-price{text-align:right}
.pc-price small{display:block;font-size:12px;color:var(--pc-t3)}
.pc-price b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 2 ทางเลือก */
.pc-opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:16px}
.pc-opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:64px;padding:12px 14px;
  border-radius:14px;border:1.5px solid var(--pc-line);background:var(--pc-soft);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
.pc-opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pc-opt:hover{border-color:var(--pc-line2);transform:translateY(-1px)}
.pc-opt:has(input:checked){border-color:var(--pc-ink);background:var(--pc-bg);box-shadow:0 8px 22px -14px rgba(10,10,11,.35)}
.pc-opt:has(input:focus-visible){outline:2px solid var(--pc-ink);outline-offset:2px}
.pc-opt.is-off{opacity:.55;cursor:not-allowed;transform:none}
.pc-opt-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--pc-mute);color:var(--pc-ink)}
.pc-opt:has(input:checked) .pc-opt-ic{background:var(--pc-ink);color:var(--pc-acc)}
.pc-opt-tx b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.pc-opt-tx small{display:block;font-size:12.5px;color:var(--pc-t2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pc-opt-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--pc-line2);transition:border-color .2s,box-shadow .2s}
.pc-opt:has(input:checked) .pc-opt-dot{border-color:var(--pc-ink);box-shadow:inset 0 0 0 4px var(--pc-bg),inset 0 0 0 9px var(--pc-ink)}

/* ฝั่ง Wallet */
.pc-sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0 0 14px}
.pc-sum div{padding:12px 14px;border-radius:12px;background:var(--pc-soft);border:1px solid var(--pc-line)}
.pc-sum dt{font-size:12px;color:var(--pc-t3)}
.pc-sum dd{margin:2px 0 0;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}

/* ปุ่มหลัก (pill ดำ) */
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:0 22px;border:0;border-radius:100px;
  background:var(--pc-ink);color:#fff;font:600 15px/1 'Prompt',sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s,opacity .2s}
.pc-btn i{font-size:19px;color:var(--pc-acc)}
.pc-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(10,10,11,.55)}
.pc-btn:focus-visible{outline:2px solid var(--pc-acc);outline-offset:3px}
.pc-btn:disabled{opacity:.45;cursor:not-allowed}
.pc-btn.is-busy{pointer-events:none;opacity:.8}
.pc-btn.is-busy i{animation:pc-spin 1s linear infinite}

/* ฝั่งสลิป: ขั้นตอน 1-2 */
.pc-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pc-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.pc-step>.pc-hint{grid-column:2}
.pc-no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--pc-acc);color:var(--pc-ink);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.pc-bank{min-width:0;padding:16px;border-radius:16px;color:#fff;
  background:radial-gradient(90% 80% at 100% 0%,rgba(212,255,62,.14),transparent 60%),var(--pc-ink)}
.pc-bank-h{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.pc-bank-ic{width:38px;height:38px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;font-size:20px;background:rgba(212,255,62,.12);color:var(--pc-acc)}
.pc-bank-h small{display:block;font-size:12px;color:rgba(255,255,255,.58)}
.pc-bank-h b{display:block;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.pc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k c" "v c";align-items:center;gap:0 10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.pc-row:last-child{border-bottom:0;padding-bottom:0}
.pc-k{grid-area:k;font-size:12px;color:rgba(255,255,255,.55)}
.pc-v{grid-area:v;min-width:0;font-size:15px;font-weight:600;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.pc-acc{font-size:clamp(19px,4.6vw,23px);font-weight:800;letter-spacing:.01em}
.pc-amt{font-size:clamp(19px,4.6vw,23px);font-weight:800;color:var(--pc-acc)}
.pc-copy{grid-area:c;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 13px;border:0;border-radius:100px;background:var(--pc-acc);color:var(--pc-ink);
  font:600 12.5px/1 'Prompt',sans-serif;cursor:pointer;transition:background .2s,transform .2s}
.pc-copy i{font-size:16px}
.pc-copy:hover{transform:translateY(-1px)}
.pc-copy:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pc-copy.is-done{background:var(--pc-good);color:#fff}
.pc-hint{display:flex;gap:6px;align-items:flex-start;margin:0;font-size:12.5px;color:var(--pc-t2)}
.pc-hint i{font-size:16px;margin-top:2px;color:var(--pc-t3)}

/* dropzone + พรีวิว */
.pc-drop-wrap{display:grid;gap:10px;min-width:0}
.pc-drop{position:relative;display:block;min-height:132px;border-radius:16px;border:1.5px dashed var(--pc-line2);background:var(--pc-soft);cursor:pointer;
  transition:border-color .2s,background .2s;overflow:hidden}
.pc-drop:hover,.pc-drop.is-over{border-color:var(--pc-ink);background:var(--pc-acc-soft)}
.pc-drop:focus-within{outline:2px solid var(--pc-ink);outline-offset:2px}
.pc-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.pc-drop-empty{display:grid;justify-items:center;gap:2px;padding:22px 14px;text-align:center;pointer-events:none}
.pc-drop-empty i{font-size:30px;color:var(--pc-ink)}
.pc-drop-empty b{font-size:14.5px;font-weight:700}
.pc-drop-empty small{font-size:12px;color:var(--pc-t3)}
.pc-drop-prev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px;pointer-events:none}
.pc-drop-prev img{width:72px;height:96px;object-fit:cover;border-radius:10px;background:var(--pc-mute);border:1px solid var(--pc-line)}
.pc-drop-prev small{font-size:13px;color:var(--pc-t2);overflow-wrap:anywhere}

/* ผลลัพธ์ */
.pc-res{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;margin-top:16px;padding:14px 16px;border-radius:14px;border:1px solid var(--pc-line);background:var(--pc-soft)}
.pc-res>i{font-size:24px;line-height:1}
.pc-res b{display:block;font-size:15px;font-weight:700}
.pc-res p{margin:2px 0 0;font-size:13.5px;color:var(--pc-t2);overflow-wrap:anywhere}
.pc-res ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--pc-t2)}
.pc-res .pc-res-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pc-res .pc-res-act a,.pc-res .pc-res-act button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 16px;border-radius:100px;border:1px solid var(--pc-line2);
  background:var(--pc-bg);color:var(--pc-ink);font:600 13px/1 'Prompt',sans-serif;text-decoration:none;cursor:pointer}
.pc-res .pc-res-act .is-main{background:var(--pc-ink);color:#fff;border-color:var(--pc-ink)}
.pc-res.t-good{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.07)}
.pc-res.t-good>i{color:var(--pc-good)}
.pc-res.t-warn{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.08)}
.pc-res.t-warn>i{color:var(--pc-warn)}
.pc-res.t-bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.06)}
.pc-res.t-bad>i{color:var(--pc-bad)}
.pc.is-done .pc-opts,.pc.is-done .pc-panel{display:none}

@keyframes pc-spin{to{transform:rotate(360deg)}}
@media (max-width:560px){
  .pc{padding:16px;border-radius:16px}
  .pc-head{grid-template-columns:minmax(0,1fr)}
  .pc-price{text-align:left}
  .pc-opts{grid-template-columns:minmax(0,1fr)}
  .pc-step{grid-template-columns:minmax(0,1fr)}
  .pc-step>.pc-no{display:none}
  .pc-step>.pc-hint{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .pc *,.pc *::before,.pc *::after{transition:none!important;animation:none!important}
}
html[data-theme="dark"] .pc{--pc-bg:#141416;--pc-soft:#1B1B1F;--pc-mute:#232328;--pc-line:#2C2C33;--pc-line2:#3A3A42;--pc-t2:#B5BAC4;--pc-t3:#8B92A0;--pc-ink:#F4F5F7}
html[data-theme="dark"] .pc .pc-btn{background:var(--pc-acc);color:#0A0A0B}
html[data-theme="dark"] .pc .pc-btn i{color:#0A0A0B}
html[data-theme="dark"] .pc .pc-bank{background:#0A0A0B;border:1px solid #2C2C33}
html[data-theme="dark"] .pc .pc-opt:has(input:checked) .pc-opt-ic{background:var(--pc-acc);color:#0A0A0B}