/* หน้าชำระเงิน PromptPay และส่วนที่เพิ่มเข้ามาในหน้าลูกค้า */

.hero-prices{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.hero-price{display:flex;flex-direction:column;background:#ffffff10;border:1px solid #ffffff20;padding:6px 10px;min-width:64px}
.hero-price i{font-style:normal;font-size:9px;letter-spacing:1px;color:#e9c6a8}
.hero-price b{font:600 15px var(--font-display);color:var(--yellow)}

.form-error{background:#2a1416;border:1px solid #7d2a30;color:#ffb4b4;font-size:12px;line-height:1.6;padding:11px 13px;margin:0 0 14px}
.primary-button.is-disabled,.primary-button:disabled{background:#3a2b2c;color:#8d7d7d;box-shadow:none;cursor:not-allowed;transform:none}

.pay-card{background:var(--panel);border:1px solid #302e2e;padding:22px 20px;text-align:center;box-shadow:6px 6px 0 #241014}
.pay-amount span{display:block;font-size:11px;color:var(--muted);letter-spacing:1px}
.pay-amount strong{display:block;font:600 38px var(--font-display);color:var(--yellow);margin:4px 0 20px}
.pay-qr{background:#fff;padding:12px;width:min(268px,78vw);margin:0 auto;border-radius:3px}
.pay-qr svg{display:block;width:100%;height:auto}
/* กด "บันทึก QR" แล้วเปิด share sheet ของเครื่อง (ถ้ารองรับ) ไม่งั้น fallback เป็นโหลดไฟล์ตรง ๆ
   ให้ลูกค้าเก็บรูปไว้เปิดสแกนในแอปธนาคารทีหลังได้ โดยไม่ต้องพึ่ง deep link เฉพาะธนาคาร (แต่ละเจ้าไม่เหมือนกันและเปลี่ยนได้โดยไม่แจ้ง) */
.save-qr-button{display:flex;align-items:center;justify-content:center;gap:8px;width:min(268px,78vw);margin:14px auto 0;padding:12px;background:transparent;border:1px solid var(--yellow);color:var(--yellow);font:600 12px var(--font-body);letter-spacing:.3px;cursor:pointer;min-height:44px}
.save-qr-button:active{background:#ffc94733}
.save-qr-button:disabled{opacity:.55;cursor:wait}
.save-qr-note{min-height:15px;margin:8px 0 0;font-size:11px;color:var(--muted)}
.save-qr-note.is-success{color:#8fd6a8}
.save-qr-note.is-error{color:#ffb4b4}
.pay-countdown{margin:18px 0 6px;font-size:13px;color:#c9beb4}
.pay-countdown b{font:600 20px var(--font-display);color:var(--red-bright);font-variant-numeric:tabular-nums}
.pay-meta{display:flex;justify-content:center;gap:8px;align-items:baseline;font-size:11px;color:var(--muted)}
.pay-meta b{font:500 12px var(--font-display);color:var(--cream)}
.pay-hint{font-size:11px;line-height:1.8;color:var(--muted);margin:16px 0 0}
.pay-status{margin-top:16px;padding:11px;border:1px dashed #4a6b52;background:#132018;color:#8fd6a8;font-size:12px}
.pay-status.is-expired{border-color:#7d2a30;background:#2a1416;color:#ffb4b4}
.text-button.wide{display:block;width:100%;margin-top:16px;padding:13px}

.ticket-qr{position:absolute;right:20px;top:46px;width:66px;height:66px;background:#fff;padding:4px}
.ticket-qr svg{display:block;width:100%;height:auto}
.saved-qr{width:66px;height:66px;background:#fff;padding:4px;line-height:0}
.saved-qr svg{display:block;width:100%;height:auto}
.dev-pay{display:block;width:100%;margin-top:14px;background:#2b2418;border:1px dashed #8a6d2a;color:#e0b45c;padding:11px;font:12px var(--font-body);cursor:pointer}
.dev-pay:disabled{opacity:.5;cursor:default}

/* Camping / Contact / info pages เพิ่มเข้ามาใน Week 1.5 */
.info-card{background:linear-gradient(135deg,#1c2620,#101010);padding:30px 24px;min-height:220px;border:1px solid #2c4536;position:relative;overflow:hidden}
.info-card>span{color:var(--yellow);font-size:28px}
.info-card h3{font-size:30px;line-height:1.15;margin:20px 0 12px}
.info-card p{color:#b9c9bd;font-size:12px;line-height:1.8;max-width:260px;margin:0 0 20px}

.contact-list{display:grid;gap:10px;margin:18px 0 28px}
.contact-item{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid #292727;padding:15px;text-decoration:none;color:var(--cream)}
.contact-item>span:first-child{width:34px;height:34px;flex-shrink:0}
.contact-item>span:first-child svg{width:34px;height:34px;display:block}
.contact-item>span:last-child{flex:1;min-width:0}
.contact-item b{display:block;font:500 14px var(--font-display)}
.contact-item small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.contact-item.disabled{opacity:.4;pointer-events:none}

.wristband-note{display:flex;gap:12px;align-items:flex-start;background:#171f24;border:1px solid #2c3f47;padding:13px;margin-top:16px;font-size:11px;line-height:1.7;color:#a8c0c9}
.wristband-note span{font-size:18px}

/* แนบสลิปโอนเงินระหว่างรอที่หน้าจ่ายเงิน — บังคับฝั่งลูกค้า (ต้องแนบก่อนถึงจะถือว่าขั้นตอนจ่ายเงินเสร็จ ดู app.js)
   ฟีเจอร์นี้อยู่ที่ #payment เท่านั้น เพราะต้องรู้ order.id ที่กำลังรอจ่ายอยู่ตอนนี้ */
.slip-upload{margin-top:16px;padding-top:16px;border-top:1px dashed #3a3030;text-align:left}
.slip-upload>label{display:block;font-size:12px;color:var(--cream)}
.slip-required{color:var(--red-bright);font-size:10px;font-weight:700;margin-left:2px}
.slip-upload>label small{display:block;color:var(--muted);font-size:10px;font-weight:400;margin-top:2px}
.slip-upload-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.slip-upload-row .ghost-button{width:auto;max-width:none;min-height:auto;padding:10px 16px;font-size:12px}
#slip-preview{width:52px;height:52px;object-fit:cover;border-radius:4px;border:1px solid #3a3030}
.slip-upload .primary-button{width:100%;justify-content:center;margin-top:10px}
.slip-status{margin-top:8px;font-size:11px;color:var(--muted);min-height:14px}
.slip-status.success{color:#8fd6a8}
.slip-status.error{color:#ff9494}
/* สถานะ "ยังไม่ได้แนบสลิป" เด่นกว่าปกติ (ส้ม/เหลือง) ต่างจาก .pay-status ปกติ (เขียว รอผล) และ .is-expired (แดง หมดเวลา) */
.pay-status.is-pending-slip{border-color:#8d6a1f;background:#2a2114;color:#ffd27a}