/* หน้าสั่งซื้อ / ชำระเงิน — ต่อยอดจาก style.css */

body.shop{background:var(--bg)}
.shop-main{padding:36px 20px 80px}
.page-title{font-size:26px;margin-bottom:20px}
.spacer{flex:1}

.panel{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;margin-bottom:16px;
}
.panel h2{font-size:17px;margin-bottom:14px}

.order-summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(46,230,168,.09),rgba(61,155,255,.06));
  border:1px solid rgba(46,230,168,.3);border-radius:var(--radius);
  padding:22px 26px;margin-bottom:16px;
}
.order-summary h2{margin:2px 0 4px;font-size:22px}
.order-amount{font-size:34px;font-weight:800;
  background:linear-gradient(100deg,var(--mint),var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.order-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:18px}
.order-code{font-size:24px;margin:0;letter-spacing:.04em}

.state{padding:6px 16px;border-radius:999px;font-size:13px;font-weight:600}
.state.wait{background:rgba(255,198,92,.15);color:var(--amber)}
.state.ok{background:rgba(46,230,168,.15);color:var(--mint)}
.state.bad{background:rgba(255,107,127,.15);color:var(--rose)}

.alert{padding:13px 18px;border-radius:12px;margin-bottom:16px;font-size:14.5px}
.alert.ok{background:rgba(46,230,168,.1);border:1px solid rgba(46,230,168,.35);color:var(--mint)}
.alert.bad{background:rgba(255,107,127,.1);border:1px solid rgba(255,107,127,.35);color:var(--rose)}

.kv{width:100%;border-collapse:collapse}
.kv td{padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.kv td:first-child{color:var(--muted);width:42%}
.kv tr:last-child td{border-bottom:0}
.amount-cell{font-size:20px;font-weight:800;color:var(--mint)}

/* ฟอร์ม */
.panel label{display:block;color:var(--muted);font-size:13px;margin-bottom:14px}
.panel label input{
  display:block;width:100%;margin-top:5px;padding:11px 13px;
  background:var(--bg2);color:var(--text);border:1px solid var(--line);
  border-radius:10px;font:inherit;outline:none;
}
.panel label input:focus{border-color:var(--mint)}
.panel input[type=file]{
  width:100%;padding:11px 13px;background:var(--bg2);color:var(--text);
  border:1px dashed var(--line);border-radius:10px;font:inherit;
}
.err{color:var(--rose);font-size:14px;margin-bottom:12px}

/* QR */
.pay-panel{text-align:center}
.qr-box{display:flex;justify-content:center;margin:6px 0 18px}
.qr-box img{width:260px;height:260px;object-fit:contain;background:#fff;
  border-radius:14px;padding:10px}
.qr-missing{width:260px;height:260px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  border:1px dashed var(--line);border-radius:14px;color:var(--amber);font-size:14px;padding:16px}
.pay-amount{font-size:19px;margin-bottom:6px}
.pay-amount b{color:var(--mint);font-size:24px}

/* คีย์ */
.key-panel{text-align:center;border-color:rgba(46,230,168,.45);
  background:linear-gradient(180deg,rgba(46,230,168,.07),transparent)}
.license-key{
  font-family:ui-monospace,Consolas,monospace;font-size:clamp(16px,3.4vw,24px);
  font-weight:700;letter-spacing:.08em;color:var(--mint);
  background:#070b12;border:1px solid var(--line);border-radius:12px;
  padding:16px 12px;margin:10px 0 16px;word-break:break-all;
}
.big-ico{font-size:40px;margin-bottom:8px}

code{background:#070b12;padding:2px 7px;border-radius:6px;font-size:13px}

/* ── หน้าสมัคร / เข้าสู่ระบบ ── */
.auth-main{display:flex;align-items:center;justify-content:center;min-height:72vh}
.auth-card{width:100%;max-width:420px}
.auth-card h1{font-size:22px;margin-bottom:4px}
.back-home{display:block;text-align:center;margin-top:10px;padding:8px;
  color:var(--muted);text-decoration:none;font-size:13px;border-radius:8px}
.back-home:hover{color:var(--text);background:rgba(255,255,255,.04)}

/* ── บัญชีของฉัน ── */
.lic-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lic-row:last-child{border-bottom:0}
.lic-row form{margin:0}
.license-key.sm{font-size:14px;padding:8px 10px;margin:0 0 5px;letter-spacing:.05em}

/* ── หน้าดาวน์โหลด ── */
.dl-card{text-align:center;border-color:rgba(46,230,168,.35);
  background:linear-gradient(180deg,rgba(46,230,168,.06),transparent)}
.dl-icon{font-size:40px;margin-bottom:4px}
.dl-meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  color:var(--muted);font-size:13px;margin:6px 0 18px}
.btn.disabled{opacity:.5;pointer-events:none}

.install{margin:0;padding-left:22px;counter-reset:none}
.install li{margin-bottom:14px;line-height:1.7}
.install li b{color:var(--text)}
.install li::marker{color:var(--mint);font-weight:700}

.need-list{margin:0 0 12px;padding-left:0}
.need-list li{padding-left:24px;position:relative;margin-bottom:9px;font-size:14.5px}
.need-list li::before{content:"→";position:absolute;left:0;color:var(--mint);font-weight:700}
.need-list a{color:var(--sky)}

.ver-item{border-left:2px solid var(--mint);padding-left:14px}
.ver-head{display:flex;gap:10px;align-items:baseline;margin-bottom:4px}

@media (max-width:600px){
  .order-summary{flex-direction:column;align-items:flex-start}
  .qr-box img,.qr-missing{width:100%;max-width:280px;height:auto;aspect-ratio:1}
}

/* ── หน้าเอกสารกฎหมาย ── */
.legal .panel h2{font-size:16px;margin-bottom:10px}
.legal .panel p{font-size:14.5px;color:#c3cddc}
.legal .panel p:last-child{margin-bottom:0}
.legal-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:12px}
.legal-table th,.legal-table td{text-align:left;padding:9px 10px;
  border-bottom:1px solid var(--line);vertical-align:top}
.legal-table th{color:var(--muted);font-size:12px;font-weight:600}
.legal-table tr:last-child td{border-bottom:0}
.contact-box{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;line-height:1.9}
.contact-box a{color:var(--sky)}
@media (max-width:600px){
  .legal-table,.legal-table tbody,.legal-table tr,.legal-table td,.legal-table th{display:block}
  .legal-table th{display:none}
  .legal-table td{border-bottom:0;padding:3px 0}
  .legal-table tr{border-bottom:1px solid var(--line);padding:10px 0}
}

/* ── กล่องติดต่อไลน์ ── */
.line-panel{text-align:center;border-color:rgba(6,199,85,.4);
  background:linear-gradient(180deg,rgba(6,199,85,.07),transparent)}
.line-panel .btn.primary{background:linear-gradient(100deg,#06c755,#2ee6a8);color:#04160c}

/* ── กล่องแจ้งอีเมลซ้ำตอนสมัคร ── */
.alert.warn{background:rgba(255,198,92,.10);border:1px solid rgba(255,198,92,.4);color:var(--amber)}
.dup-box p{margin:6px 0 12px;color:#c3cddc}
.dup-actions{display:flex;gap:8px;flex-wrap:wrap}
.dup-actions .btn{flex:1;min-width:130px;justify-content:center}

/* ── ปุ่มแสดง/ซ่อนรหัสผ่าน (js/pwtoggle.js) ── */
.pw-wrap{position:relative;display:block}
.panel label .pw-wrap{margin-top:5px}
.panel label .pw-wrap input{margin-top:0;padding-right:46px}
.pw-eye{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:7px 9px;
  font-size:16px;line-height:1;opacity:.6;border-radius:8px;
  transition:opacity .15s,background .15s;
}
.pw-eye:hover{opacity:1;background:rgba(255,255,255,.06)}
.pw-eye:active{transform:translateY(-50%) scale(.92)}

/* ── ปุ่มคัดลอก (js/copy.js) ── */
.key-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.key-line .license-key{flex:1;min-width:180px}
.copy-btn{
  background:var(--bg2);color:var(--text);border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;font:inherit;font-size:13px;cursor:pointer;
  white-space:nowrap;transition:.15s;
}
.copy-btn:hover{border-color:var(--mint);color:var(--mint)}
.copy-btn.copied{border-color:var(--mint);color:var(--mint);background:rgba(46,230,168,.12)}
.copy-btn.copy-fail{border-color:var(--rose);color:var(--rose)}

.copyable{cursor:pointer;transition:.15s}
.copyable:hover{border-color:var(--mint)}
.copyable.copied{border-color:var(--mint);background:rgba(46,230,168,.14)}
.copyable.copy-fail{border-color:var(--rose)}