/* .saved-ticket เดิมเป็น <article> ธรรมดา เปลี่ยนเป็น <button> จริงเพื่อกดเปิดป๊อปอัพขยายบัตร+QR ได้
   (ดู renderAccount() ใน app.js) ต้อง reset สไตล์ default ของปุ่มก่อน (font/padding/text-align ฯลฯ)
   ไม่งั้นเบราว์เซอร์จะใส่ของเดิมมาทับ หน้าตาจะเพี้ยนไปจากตอนเป็น article */
.saved-ticket{display:block;width:100%;text-align:left;font:inherit;padding:0;background:linear-gradient(135deg,#851a28,#231015);border:1px solid #a13b42;box-shadow:6px 6px 0 #3a1218;margin-bottom:25px;cursor:pointer;transition:transform .12s ease}
.saved-ticket:active{transform:scale(.98)}
.saved-ticket:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.saved-ticket-top{padding:20px;border-bottom:1px dashed #d47d7d}
.saved-ticket-top span,.saved-ticket-top small{display:block;font-size:10px;color:#f2c9b4}
.saved-ticket-top b{display:block;color:var(--yellow);font:600 25px var(--font-display);margin:18px 0 4px}
.saved-ticket-bottom{display:flex;justify-content:space-between;align-items:center;padding:17px 20px}
.saved-ticket-bottom span{display:block;color:#e5aea0;font-size:9px;letter-spacing:1px;margin-bottom:3px}
.saved-ticket-bottom b{display:block;font:500 12px var(--font-display);margin-bottom:12px}
.saved-ticket-bottom strong{font:500 17px var(--font-display);color:var(--yellow)}
/* บัตรที่ใช้สิทธิ์เข้างานครบแล้ว (checkedIn >= quantity) — หรี่สี + ปิดปุ่มจริง (ไม่ใช่แค่ css)
   กันเจ้าหน้าที่หน้างานสแกนซ้ำโดยไม่ตั้งใจ และลูกค้าเปิดป๊อปอัพดู QR ที่ใช้ไปแล้วอีกไม่ได้ */
.saved-ticket:disabled{cursor:default;filter:grayscale(.9) brightness(.55);box-shadow:none}
.saved-ticket:disabled:active{transform:none}
/* ป้าย "เช็คอินแล้ว" ไม่พึ่งแค่สีที่หรี่ลงอย่างเดียว (คนตาบอดสีมองไม่ออกว่าต่างจากปกติยังไง) มีตัวหนังสือ+เครื่องหมายถูกชัดๆ ด้วย */
.ticket-used-badge{display:inline-flex;align-items:center;gap:5px;margin-top:12px;padding:4px 10px;background:#000000a0;border:1px solid #ffffff33;border-radius:20px;font-size:10px;letter-spacing:.5px;color:var(--cream)}
.ticket-used-badge svg{width:11px;height:11px;flex-shrink:0}
.saved-qr{width:58px;height:58px;background:#fff;color:#111;text-align:center;font-size:54px;line-height:55px}
.saved-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
/* คำใบ้ "แตะดูขยาย" ใต้ QR เล็กๆ ในลิสต์ — บอกลูกค้าว่าทั้งการ์ดกดได้ ไม่ใช่แค่การ์ดข้อมูลนิ่งๆ (ดู renderAccount() ใน app.js) */
.saved-qr-tap{display:flex;align-items:center;gap:3px;font-size:9px;letter-spacing:.3px;color:#e5aea0;white-space:nowrap}
.saved-qr-tap svg{width:11px;height:11px;flex-shrink:0}
/* ป๊อปอัพขยายบัตร: กดการ์ดบัตร (ที่ยังไม่เช็คอินครบ) แล้วเปิดขึ้นมา โชว์ QR ใหญ่ขึ้นมากให้เจ้าหน้าที่สแกนง่ายตอนเข้างาน
   ใช้ .lightbox container เดียวกับป๊อปอัพขยายโปสเตอร์ (กึ่งกลางจอ/พื้นหลังมืด/ปิดด้วย Esc หรือคลิกพื้นหลังได้เหมือนกัน) */
.ticket-lightbox-card{background:linear-gradient(135deg,#851a28,#231015);border:1px solid #a13b42;box-shadow:8px 8px 0 #3a1218;max-width:340px;width:100%;padding:28px 22px;text-align:center}
.ticket-lightbox-top span{display:block;font-size:11px;color:#f2c9b4;letter-spacing:1px}
.ticket-lightbox-top h3{color:var(--yellow);font:600 26px var(--font-display);margin:14px 0 4px}
.ticket-lightbox-top small{display:block;font-size:12px;color:#f2c9b4;margin-bottom:22px}
.ticket-lightbox-qr{width:min(240px,68vw);height:min(240px,68vw);margin:0 auto;background:#fff;padding:12px}
.ticket-lightbox-qr svg{display:block;width:100%;height:100%}
.ticket-lightbox-hint{font-size:11px;color:#e5aea0;margin:16px 0 0}
.ticket-lightbox-bottom{display:flex;justify-content:center;gap:32px;margin-top:20px;padding-top:18px;border-top:1px dashed #d47d7d}
.ticket-lightbox-bottom span{display:block;font-size:9px;letter-spacing:1px;color:#e5aea0;margin-bottom:4px}
.ticket-lightbox-bottom b{font:500 13px var(--font-display)}
.ticket-lightbox-bottom strong{font:500 18px var(--font-display);color:var(--yellow)}
.purchase-history{background:#141414;border:1px solid #302e2e;padding:18px;margin-top:30px}.purchase-history h3{font-size:19px;margin-bottom:14px}.purchase-history>div{display:flex;justify-content:space-between;border-top:1px solid #292525;padding:11px 0;font-size:11px}.purchase-history span{color:var(--muted)}.purchase-history b{font-weight:500}