/* billing.css — หน้าอัปเกรด · ชำระเงิน · ประวัติ
   ยึด design system: เส้น 1px แทนเงา · card 8px / ปุ่ม 5px · แดง #E31837 เท่านั้น */

/* ── layout สำหรับ iframe modal ────────────────── */
.embed-page{background:var(--bg)}
.embed-wrap{padding:24px 20px 32px;max-width:900px;margin:0 auto}

/* ── การ์ดแพ็กเกจ ──────────────────────────────── */
.plans{
  display:grid;
  /* ⚠️ auto-fit ไม่ hardcode จำนวนคอลัมน์ — จอไหนก็ยุบเองได้ */
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin-bottom:24px;
}

.plan{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:20px 18px;
  border:1px solid var(--line);
  border-radius:var(--rad);
  background:var(--panel);
}
.plan.is-featured{border-color:var(--red)}
.plan.is-current{background:var(--panel-2)}

.plan-tag{
  position:absolute;
  top:-9px;
  left:18px;
  padding:2px 9px;
  border-radius:var(--rad-s);
  background:var(--red);
  color:#fff;
  font-size:10.5px;
  font-weight:600;
}

.plan-name{margin:6px 0 0;font-size:18px;font-weight:700;color:var(--ink)}

.plan-price{display:flex;align-items:baseline;gap:6px;margin:10px 0 16px}
.plan-price .num{font-size:26px;font-weight:800;color:var(--ink)}
.plan-per{font-size:12.5px;color:var(--ink-3)}

.plan-feat{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.plan-feat li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-2);
}
.plan-feat li i{color:var(--green);font-size:14px;flex:none;margin-top:1px}
/* สิ่งที่แพ็กเกจนี้ไม่มี — จางลงและใช้กากบาท */
.plan-feat li.off{color:var(--ink-3)}
.plan-feat li.off i{color:var(--ink-3)}

.billing-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--rad-s);
  background:var(--panel-2);
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-2);
}
.billing-note i{color:var(--green);margin-top:2px}

/* ── หน้าชำระเงิน ──────────────────────────────── */
.pay-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  max-width:760px;
}

.pay-qr,.pay-slip{
  padding:20px 18px;
  border:1px solid var(--line);
  border-radius:var(--rad);
  background:var(--panel);
}

.pay-qr{text-align:center}
.pay-amount{margin-bottom:16px}
.pay-amount .num{font-size:30px;font-weight:800;color:var(--red);margin-top:4px}

.pay-qrbox{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:240px;
  padding:12px;
  /* ⚠️ พื้นขาวเสมอ — QR บนพื้นเข้มสแกนไม่ติด แม้อยู่ในธีมมืด */
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad-s);
}
.pay-qrbox svg{width:220px;height:220px;display:block}

.pay-hint{margin:12px 0 0;font-size:12.5px;color:var(--ink-2)}
.pay-warn{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin:10px 0 0;
  font-size:12px;
  line-height:1.55;
  color:var(--amber);
  text-align:left;
}

.pay-h{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.pay-sub{margin:4px 0 16px;font-size:12.5px;color:var(--ink-3)}

.pay-drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:150px;
  padding:20px;
  margin-bottom:14px;
  border:1px dashed var(--line-2);
  border-radius:var(--rad-s);
  background:var(--panel-2);
  cursor:pointer;
  text-align:center;
}
/* ⚠️ display:flex ด้านบนเป็น author rule → ชนะ UA `[hidden]{display:none}`
   ถ้าไม่มีบรรทัดนี้ checkout.php สั่ง drop.hidden=true แล้วกล่องยังโชว์ ทับกับรูปพรีวิวสลิป
   (มีกฎกลาง [hidden] ที่ base.css แล้ว บรรทัดนี้กันพลาดซ้ำอีกชั้น) */
.pay-drop[hidden]{display:none}
.pay-drop:hover{border-color:var(--red);background:var(--red-soft)}
.pay-drop:focus-visible{
  /* ❌ ไม่ใช้ outline — ธีมใช้ ring */
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft);
}
.pay-drop > i{font-size:30px;color:var(--ink-3)}
.pay-drop span{font-size:13px;color:var(--ink-2)}
.pay-drop .hint{font-size:11.5px;color:var(--ink-3)}

.pay-prev{
  width:100%;
  max-height:220px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:var(--rad-s);
  background:var(--panel-2);
  margin-bottom:14px;
}

.pay-result{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:14px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:var(--rad-s);
  font-size:13px;
  line-height:1.55;
}
.pay-result.is-verified{border-color:var(--green);color:var(--green);background:var(--green-soft)}
.pay-result.is-pending{border-color:var(--amber);color:var(--amber)}
.pay-result.is-rejected{border-color:var(--red);color:var(--red);background:var(--red-soft)}

.pay-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  font-size:12.5px;
  color:var(--ink-3);
}
.pay-back:hover{color:var(--red)}

/* ── ประวัติ ───────────────────────────────────── */
.pay-hist{border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.pay-row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.pay-row + .pay-row{border-top:1px solid var(--line)}
.pay-row .amt{font-weight:600;color:var(--ink);min-width:90px}
.pay-row .meta{flex:1;min-width:0;font-size:12.5px;color:var(--ink-3)}

/* ── มือถือ ────────────────────────────────────── */
@media (max-width:720px){
  .pay-wrap{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .embed-wrap{padding:16px 14px 24px}
}