/* =========================================================
   pay.css: หน้าต่างเติมเครดิต (ดำ-ทอง Premium Legal Tech)
   - ใช้ทุกจอ แต่ตำแหน่งหน้าต่างเด้งบนมือถืออยู่ที่ mobile.css หัวข้อ 22-24
   - สีทั้งหมดอยู่ในตัวแปร --p-* ด้านล่าง และมีผลเฉพาะใน #paymentCard
     (ไม่แตะ themes.css จึงไม่กระทบสีส่วนอื่นของเว็บ)
   - ไม่มีอนิเมชันวนซ้ำ

   ซ่อมด่วน
   | อาการ                          | ไปที่หัวข้อ              |
   |--------------------------------|-------------------------|
   | สี/ขอบของหน้าต่างเติมเครดิต      | "1. ตัวแปรสี"            |
   | หัวหน้าต่างและปุ่มปิด            | "2. หัวหน้าต่าง"         |
   | การ์ดแพ็กเกจ ป้ายแนะนำ          | "3. การ์ดแพ็กเกจ"        |
   | สรุปยอด ปุ่มสร้าง QR             | "4. สรุปยอดและปุ่ม"      |
   | QR และสถานะรอ/ตรวจสอบ           | "5. QR และสถานะ"         |
   | หน้าสำเร็จ/ไม่สำเร็จ/หมดเวลา      | "6. ผลลัพธ์"             |
   | หน้าต่างสูงเกินจอ iPhone         | "7. มือถือ"              |
   ========================================================= */

/* ---------- 1. ตัวแปรสี ---------- */
#paymentCard{
  --p-bg:#0B0C0F;
  --p-card:#15171C;
  --p-card-2:#1B1D23;
  --p-gold:#a8abb0;
  --p-gold-deep:#7d8289;
  --p-line:#2B2E35;
  --p-text:#F5F3ED;
  --p-mute:#9A9DA6;
  --p-ok:#7ee2a8;
  --p-bad:#f7a6ab;
  background:var(--p-bg);
  border:1px solid var(--p-line);
  border-radius:22px;
  color:var(--p-text);
  padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));
}

/* ---------- 2. หัวหน้าต่าง ---------- */
#paymentCard .pay-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 44px 16px 0;
  border-bottom:1px solid var(--p-line);
}
#paymentCard .pay-head-ic{
  flex:none;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:var(--p-gold);
  background:linear-gradient(145deg,#1c1e20,#101011);
  border:1px solid rgba(168,171,176,.28);
}
#paymentCard .pay-head-tx{min-width:0}
#paymentCard .pay-head h2{
  margin:0;
  font-size:1.35rem;
  line-height:1.3;
  color:var(--p-text);
}
#paymentCard .pay-head h2::before{display:none}
#paymentCard .pay-head p{
  margin:2px 0 0;
  font-size:.88rem;
  line-height:1.5;
  color:var(--p-mute);
}
#paymentCard .pay-label{
  margin:18px 0 10px;
  font-size:1rem;
  font-weight:700;
  color:var(--p-gold);
}

/* ---------- 3. การ์ดแพ็กเกจ ---------- */
#paymentCard #packageButtons{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:0;
}
#paymentCard #packageButtons .pkg{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:68px;
  padding:12px 14px;
  text-align:left;
  color:var(--p-text);
  background:var(--p-card);
  border:1px solid var(--p-line);
  border-radius:16px;
  box-shadow:none;
}
#paymentCard #packageButtons .pkg:hover{background:var(--p-card-2)}
#paymentCard #packageButtons .pkg:active{transform:scale(.985)}
#paymentCard #packageButtons .pkg.is-selected{
  background:linear-gradient(145deg,#18191b,#15171C);
  border-color:var(--p-gold);
  box-shadow:0 0 0 1px rgba(168,171,176,.35),0 10px 26px rgba(168,171,176,.1);
}
#paymentCard #packageButtons .pkg:disabled{opacity:.55}
#paymentCard .pkg-ic{flex:none;display:grid;place-items:center;width:30px;color:var(--p-gold)}
#paymentCard .pkg-tx{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
#paymentCard .pkg-tx b{flex:1 1 100%;font-size:1.05rem;font-weight:700;line-height:1.35}
#paymentCard .pkg-tx small{font-size:.86rem;font-weight:400;color:var(--p-mute)}
#paymentCard .pkg-tag{
  font-style:normal;
  font-size:.74rem;
  font-weight:600;
  line-height:1;
  padding:5px 9px;
  border-radius:999px;
  color:var(--p-text);
  background:var(--p-card-2);
  border:1px solid var(--p-line);
}
#paymentCard .pkg-pr{
  flex:none;
  font-size:1.35rem;
  font-weight:700;
  color:var(--p-gold);
  white-space:nowrap;
}
#paymentCard .pkg.is-selected .pkg-tag{border-color:rgba(168,171,176,.5);color:var(--p-gold)}

/* ---------- 4. สรุปยอดและปุ่ม ---------- */
#paymentCard #paymentResult{margin-top:14px}
#paymentCard .pay-hint{
  margin:0;
  padding:12px 14px;
  font-size:.9rem;
  line-height:1.6;
  color:var(--p-mute);
  background:var(--p-card);
  border:1px dashed var(--p-line);
  border-radius:14px;
}
#paymentCard .pay-sum{
  margin:0 0 12px;
  padding:4px 14px;
  background:var(--p-card);
  border:1px solid var(--p-line);
  border-radius:14px;
}
#paymentCard .pay-sum div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--p-line);
  font-size:.95rem;
}
#paymentCard .pay-sum div:last-child{border-bottom:0}
#paymentCard .pay-sum dt{color:var(--p-mute)}
#paymentCard .pay-sum dd{margin:0;font-weight:600;text-align:right}
#paymentCard .pay-sum-total dd{color:var(--p-gold);font-size:1.2rem}
#paymentCard .pay-go,
#paymentCard .pay-alt{
  display:block;
  width:100%;
  min-height:50px;
  margin-top:10px;
  font-size:1rem;
  border-radius:14px;
}
#paymentCard .pay-go{
  color:#0B0C0F;
  background:linear-gradient(180deg,#b7b9bd,#93989e);
  box-shadow:0 8px 22px rgba(168,171,176,.16);
}
#paymentCard .pay-go:hover{background:linear-gradient(180deg,#c3c6c9,#a0a4a9)}
#paymentCard .pay-go:disabled{opacity:.6}
#paymentCard .pay-alt{color:var(--p-text);background:transparent;border:1px solid var(--p-line)}
#paymentCard .pay-alt:hover{border-color:var(--p-gold-deep);color:var(--p-gold)}

/* ---------- 5. QR และสถานะ ---------- */
#paymentCard .pay-status{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:12px;
  padding:12px 14px;
  font-size:.88rem;
  line-height:1.55;
  color:var(--p-mute);
  background:var(--p-card);
  border:1px solid var(--p-line);
  border-radius:14px;
}
#paymentCard .pay-status b{font-size:1rem;color:var(--p-text)}
#paymentCard .pay-status.is-checking{border-color:rgba(168,171,176,.5)}
#paymentCard .pay-status.is-checking b{color:var(--p-gold)}
#paymentCard .pay-qr{
  width:min(100%,260px);
  margin:0 auto 12px;
  padding:12px;
  background:#fff;
  border-radius:16px;
}
#paymentCard .pay-qr img{display:block;width:100%;height:auto}
#paymentCard .pay-count{margin:0 0 6px;text-align:center;font-size:.9rem;color:var(--p-gold)}
#paymentCard .pay-count:empty{display:none}
#paymentCard .pay-note-line{margin:0 0 6px;text-align:center;font-size:.86rem;color:var(--p-mute)}
#paymentCard .disclaimer{margin:12px 0 0;text-align:center;font-size:.82rem;color:var(--p-mute)}
#paymentCard .notfound{margin:0 0 12px;color:var(--p-bad)}

/* ---------- 6. ผลลัพธ์ ---------- */
#paymentCard .pay-done{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:22px 14px;
  text-align:center;
  font-size:.92rem;
  line-height:1.6;
  color:var(--p-mute);
  background:var(--p-card);
  border:1px solid var(--p-line);
  border-radius:16px;
}
#paymentCard .pay-done b{font-size:1.15rem;color:var(--p-text)}
#paymentCard .pay-done.is-ok .pay-done-ic{color:var(--p-ok)}
#paymentCard .pay-done.is-bad .pay-done-ic{color:var(--p-bad)}

/* ---------- 6b. ส่วนท้าย: ความโปร่งใส ---------- */
#paymentCard .pay-trust{
  margin-top:16px;
  padding:14px;
  background:var(--p-card);
  border-radius:14px;
}
#paymentCard .pay-trust b{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.98rem;
  color:var(--p-gold);
}
#paymentCard .pay-trust p{
  margin:6px 0 0;
  font-size:.86rem;
  line-height:1.6;
  color:var(--p-mute);
}
/* ระหว่างรอ/ตรวจสอบ/ผลลัพธ์ ซ่อนรายการแพ็กเกจ ให้เห็นเฉพาะสิ่งที่ต้องทำ */
#paymentCard[data-stage="creating"] #packageButtons,
#paymentCard[data-stage="waiting"] #packageButtons,
#paymentCard[data-stage="checking"] #packageButtons,
#paymentCard[data-stage="success"] #packageButtons,
#paymentCard[data-stage="failed"] #packageButtons,
#paymentCard[data-stage="expired"] #packageButtons,
#paymentCard[data-stage="creating"] .pay-label,
#paymentCard[data-stage="waiting"] .pay-label,
#paymentCard[data-stage="checking"] .pay-label,
#paymentCard[data-stage="success"] .pay-label,
#paymentCard[data-stage="failed"] .pay-label,
#paymentCard[data-stage="expired"] .pay-label{display:none}

/* ---------- 7. มือถือ: หน้าต่างไม่สูงเกินจอ และเลื่อนในตัวเอง ---------- */
@media (max-width:767px){
  body.pay-open #paymentCard:not([hidden]){
    background:var(--p-bg);
    width:min(94vw,440px);
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 0 1px rgba(168,171,176,.22);
  }
  #paymentCard .pay-head h2{font-size:1.3rem}
  #paymentCard #packageButtons .pkg{min-height:72px}
}
@media (prefers-reduced-motion:reduce){
  #paymentCard #packageButtons .pkg,
  #paymentCard .pay-go{transition:none}
}