/* ==========================================================================
   Serv4FX — desktop USDT (BEP20) payment pages
   Used by /order/usdt.php and /order/usdt-invoice.php
   Palette and type scale follow the redesigned /faq.php
   ========================================================================== */
:root{
  --navy:#0f172a; --slate:#1e293b; --muted:#64748b; --line:#e2e8f0;
  --gold:#f0b90b; --gold-d:#b8860b; --teal:#0d9488; --bg:#f5f7fb; --card:#ffffff;
  --ok:#15803d; --ok-bg:#f0fdf4; --ok-line:#86efac;
  --err:#b91c1c; --err-bg:#fef2f2; --err-line:#fecaca;
  --warn:#b45309; --warn-bg:#fffbeb; --warn-line:#fcd34d;
  --shadow:0 10px 30px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:#1f2937;
  font-family:'Prompt','Segoe UI',Tahoma,Arial,sans-serif; font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1060px; margin:0 auto; padding:0 18px}
img{max-width:100%}

/* ---------- header ---------- */
.site-head{background:var(--navy); color:#fff; position:sticky; top:0; z-index:30; box-shadow:0 2px 14px rgba(15,23,42,.25)}
.head-in{display:flex; align-items:center; gap:16px; min-height:60px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px}
.brand{display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:16px; text-decoration:none}
.brand:hover{text-decoration:none}
.brand .logo{display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:linear-gradient(140deg,var(--gold),#facc15); color:#3b2500; font-weight:800; font-size:13px}
.brand small{display:block; font-size:10.5px; font-weight:400; color:#94a3b8; letter-spacing:.4px}
.site-nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
.site-nav a{color:#cbd5e1; font-size:13px; padding:6px 10px; border-radius:8px}
.site-nav a:hover{background:rgba(255,255,255,.1); color:#fff; text-decoration:none}
.site-nav a.is-here{background:rgba(240,185,11,.16); color:var(--gold)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(150deg,#111c33 0%,#1e2f4d 55%,#243b5c 100%); color:#fff;
  padding:34px 0 28px; margin-bottom:20px}
.pill{display:inline-flex; align-items:center; gap:7px; background:rgba(240,185,11,.16); color:var(--gold);
  font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:.3px}
.hero h1{margin:12px 0 6px; font-size:29px; line-height:1.32; font-weight:800; letter-spacing:-.3px}
.hero p{margin:0; color:#c7d2e2; font-size:14.5px; max-width:660px}
.hero-meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.hero-meta div{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  border-radius:10px; padding:7px 13px; font-size:13px; color:#e2e8f0}
.hero-meta b{display:block; font-size:10.5px; letter-spacing:.9px; text-transform:uppercase; color:#94a3b8; font-weight:700}

/* ---------- layout ---------- */
.pay-main{padding-bottom:40px}
.u-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.95fr); gap:20px; align-items:start}
.u-grid > *{min-width:0}
@media (max-width:900px){ .u-grid{grid-template-columns:1fr} }
.u-side{display:grid; gap:16px}
.u-sticky{position:sticky; top:78px}
@media (max-width:900px){ .u-sticky{position:static} }
@media (min-width:901px){ .u-side--sticky{position:sticky; top:78px} }

/* ---------- BSC mark ---------- */
.bsc-ico{flex:0 0 auto; width:16px; height:16px; vertical-align:-2px}
.bsc-ico-pill{width:15px; height:15px; vertical-align:-2px}
.bsc-ico-sm{width:13px; height:13px; vertical-align:-2px}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; overflow-wrap:break-word;
  box-shadow:0 2px 10px rgba(15,23,42,.04); margin-bottom:16px}
.card-t{margin:0 0 3px; font-size:16.5px; font-weight:800; color:var(--navy); letter-spacing:-.2px}
.card-s{margin:0; font-size:13px; color:var(--muted); line-height:1.65}
.card-h{margin-bottom:14px}
.card-h .card-t{display:flex; align-items:center; gap:8px}

/* ---------- alerts / notes ---------- */
.alert{border-radius:12px; padding:13px 16px; font-size:13.5px; line-height:1.7; margin:0 0 16px; border:1px solid transparent}
.alert strong{display:block; margin-bottom:2px}
.alert-warn{background:var(--warn-bg); border-color:var(--warn-line); color:#78350f}
.alert-err{background:var(--err-bg); border-color:var(--err-line); color:#7f1d1d}
.alert-ok{background:var(--ok-bg); border-color:var(--ok-line); color:#14532d}
.alert-info{background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a}
.note{background:#f8fafc; border:1px dashed var(--line); border-radius:12px; padding:13px 16px;
  font-size:13px; color:var(--muted)}
.note strong{color:var(--slate)}

/* ---------- tabs ---------- */
.tabbar{display:flex; gap:6px; background:#f1f5f9; border:1px solid var(--line); border-radius:12px; padding:5px; margin-bottom:18px; flex-wrap:wrap}
.tab{flex:1 1 auto; text-align:center; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:#475569}
.tab:hover{background:#e2e8f0; text-decoration:none; color:var(--navy)}
.tab.is-active{background:#fff; color:var(--navy); box-shadow:0 2px 8px rgba(15,23,42,.09)}

/* ---------- form ---------- */
.fstep{margin-bottom:22px}
.fstep-h{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.fstep-h .n{flex:0 0 26px; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:#eef2ff; color:#4338ca; font-size:12.5px; font-weight:800}
.fstep-h .t{font-size:14px; font-weight:800; color:var(--navy); letter-spacing:-.1px}
.fstep-h .ln{flex:1 1 auto; height:1px; background:var(--line)}
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){ .frow2{grid-template-columns:1fr} }
.field{margin-bottom:14px}
.label{display:block; font-size:13px; font-weight:700; color:var(--slate); margin-bottom:5px}
.req{color:#dc2626}
.input,select.input{width:100%; max-width:100%; min-width:0; padding:11px 14px; border:1px solid #cbd5e1; border-radius:10px;
  font-family:inherit; font-size:14px; color:#0f172a; background:#fff; outline:none; transition:border-color .15s, box-shadow .15s}
.input:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(13,148,136,.15)}
select.input{appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px}
.help{margin:5px 0 0; font-size:12px; color:var(--muted); line-height:1.6}
.pass-wrap{position:relative}
.pass-wrap .input{padding-right:46px}
.pass-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent;
  font-size:15px; cursor:pointer; padding:6px; line-height:1; border-radius:8px}
.pass-toggle:hover{background:#f1f5f9}

/* ---------- estimate ---------- */
.est{background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin-bottom:16px}
.est-row{display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:4px 0; color:#475569}
.est-row strong{color:var(--navy)}
.est-row.is-main{border-top:1px dashed var(--line); margin-top:6px; padding-top:9px; font-size:14px; color:var(--slate)}
.est-row.is-main strong{font-size:19px; color:var(--teal); letter-spacing:-.3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 18px; border-radius:10px;
  font-weight:700; font-size:13.5px; text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:inherit}
.btn:hover{text-decoration:none}
.btn-primary{background:linear-gradient(140deg,var(--gold),#facc15); color:#3b2500}
.btn-primary:disabled{opacity:.55; cursor:not-allowed}
.btn-teal{background:linear-gradient(140deg,#0f766e,#14b8a6); color:#fff}
.btn-teal:disabled{opacity:.55; cursor:not-allowed}
.btn-outline{background:#fff; border-color:var(--line); color:var(--slate)}
.btn-wide{width:100%}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- step chips ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chips span{background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:12.5px; color:#475569}
.chips b{color:var(--teal); margin-right:5px}

/* ---------- invoice: status strip ---------- */
.status-bar{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-left:6px solid #cbd5e1; border-radius:12px; padding:13px 16px; margin-bottom:18px; font-size:14px; font-weight:700}
.status-bar .dot{width:9px; height:9px; border-radius:50%; background:#94a3b8; flex:0 0 9px}
.status-bar .right{margin-left:auto; font-weight:600; font-size:13px; color:var(--muted)}
.status-bar.is-pending{border-left-color:#f59e0b; background:#fffbeb; color:#92400e}
.status-bar.is-pending .dot{background:#f59e0b}
.status-bar.is-review{border-left-color:#3b82f6; background:#eff6ff; color:#1e40af}
.status-bar.is-review .dot{background:#3b82f6}
.status-bar.is-paid{border-left-color:#16a34a; background:#f0fdf4; color:#14532d}
.status-bar.is-paid .dot{background:#16a34a}
.status-bar.is-expired,.status-bar.is-rejected{border-left-color:#ef4444; background:#fef2f2; color:#7f1d1d}
.status-bar.is-expired .dot,.status-bar.is-rejected .dot{background:#ef4444}

/* ---------- invoice: amount ---------- */
.amount-card{background:linear-gradient(150deg,#101f3a 0%,#17335c 60%,#1b4a6b 100%); color:#fff;
  border-radius:16px; padding:24px 26px; position:relative; overflow:hidden; margin-bottom:16px;
  box-shadow:0 14px 34px rgba(11,31,58,.22)}
.amount-card::after{content:""; position:absolute; top:-90px; right:-70px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(240,185,11,.28) 0%, rgba(240,185,11,0) 68%); pointer-events:none}
.amount-label{position:relative; font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:#9fb3cd; font-weight:700}
.amount{position:relative; font-size:44px; font-weight:800; line-height:1.15; letter-spacing:-1px; margin:4px 0 2px}
.amount span{font-size:18px; font-weight:700; color:#cbd5e1; margin-left:8px; letter-spacing:0}
.amount-thb{position:relative; font-size:13.5px; color:#c7d2e2}
.amount-exp{position:relative; font-size:12.5px; color:#94a3b8; margin-top:6px}
.amount-actions{position:relative; display:flex; gap:9px; flex-wrap:wrap; margin-top:16px}
.copy-btn{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); color:#fff;
  border-radius:9px; padding:8px 14px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit}
.copy-btn:hover{background:rgba(255,255,255,.18)}
.copy-btn.is-copied{background:rgba(34,197,94,.9); border-color:transparent; color:#fff}
.countdown{position:relative; display:inline-block; background:rgba(255,255,255,.12); border-radius:8px;
  padding:3px 10px; font-size:12.5px; font-weight:700; margin-top:10px}

/* ---------- invoice: address + QR ---------- */
.addr-box{background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.addr-net{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted);
  letter-spacing:.4px; text-transform:uppercase; margin-bottom:6px}
.addr{display:block; font-family:ui-monospace,Consolas,monospace; font-size:13.5px; font-weight:600;
  color:var(--navy); word-break:break-all; line-height:1.6}
.qr-wrap{display:flex; gap:18px; align-items:flex-start; margin-top:16px; flex-wrap:wrap}
.qr-box{flex:0 0 auto; width:196px; height:196px; display:grid; place-items:center; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:8px}
.qr-box img,.qr-box canvas{display:block; max-width:100%}
.qr-help{flex:1 1 240px; min-width:200px; font-size:13px; color:var(--muted)}
.qr-help strong{color:var(--slate)}

/* ---------- invoice: steps ---------- */
.csteps{counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:11px}
.csteps li{position:relative; padding-left:36px; font-size:13.5px; color:#374151}
.csteps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:1px; width:24px; height:24px;
  border-radius:50%; background:var(--teal); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center}
.csteps b{color:var(--navy)}

/* ---------- invoice: txid ---------- */
.txid-input{font-family:ui-monospace,Consolas,monospace; font-size:13px; letter-spacing:.2px}
.txid-box{background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin-top:12px}
.txid-box .k{font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted)}
.txid-box code{display:block; font-family:ui-monospace,Consolas,monospace; font-size:12.5px; color:var(--navy);
  word-break:break-all; margin:5px 0 7px}
.txid-box a{font-size:12.5px; font-weight:700}

/* ---------- key/value ---------- */
.kv{display:grid; grid-template-columns:1fr 1fr; gap:11px 16px; margin-top:4px}
@media (max-width:520px){ .kv{grid-template-columns:1fr} }
.kv > div{background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:9px 12px}
.kv span{display:block; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--muted)}
.kv strong{font-size:13.5px; color:var(--navy); font-weight:700; word-break:break-word}

/* ---------- footer ---------- */
.site-foot{background:var(--navy); color:#94a3b8; font-size:12.5px; padding:20px 0; margin-top:10px}
.foot-in{display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap; align-items:center}
.site-foot a{color:#cbd5e1; text-decoration:none}
.site-foot a:hover{color:#fff; text-decoration:underline}
.foot-links{display:flex; gap:14px; flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:520px){
  /* Turnstile ฟิกซ์ 300px — ย่อให้พอดีจอแคบ */
  .cf-turnstile{transform:scale(.82); transform-origin:left top; margin-bottom:-10px}
  .qr-wrap{gap:12px}
  .qr-box{width:100%; max-width:196px; height:auto; aspect-ratio:1/1}
  .qr-help{flex-basis:100%; min-width:0}
  .status-bar{flex-wrap:wrap}
  .status-bar .right{margin-left:0; width:100%}
  .btn-row .btn{flex:1 1 100%}
}
@media (max-width:340px){
  .cf-turnstile{transform:scale(.66); margin-bottom:-20px}
}
@media (max-width:400px){
  .amount{font-size:30px}
  .amount span{font-size:15px}
  .hero h1{font-size:20px}
}
@media (max-width:640px){
  .hero{padding:24px 0 20px}
  .hero h1{font-size:22px}
  .site-nav{display:none}
  .card{padding:16px}
  .amount{font-size:34px}
  .amount-card{padding:20px}
}