/* VZONE web fallback — sengaja sederhana & fungsional.
   Web ini cadangan saat katalog WA down, bukan pengganti. Tidak ada
   fitur yang tak dimiliki WA, tidak ada dorongan untuk memakainya
   sehari-hari. */

:root{
  --biru:#0b6bcb; --biru-tua:#08529b; --teks:#1b1f24; --abu:#6b7280;
  --garis:#e3e6ea; --bg:#f5f7f9; --hijau:#128a4c; --merah:#c62828;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--teks);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
.muted{color:var(--abu); font-size:14px}
h1{font-size:20px; margin:0 0 14px}
h2{font-size:15px; margin:0 0 10px; color:var(--abu); font-weight:600}

/* ---------- header ---------- */
.hdr{background:#fff; border-bottom:1px solid var(--garis); position:sticky; top:0; z-index:20}
.hdr-in{
  max-width:560px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:flex-start; gap:12px;
}
.hdr-kiri{flex:1; min-width:0}

/* Tombol bahasa — mengikuti bahasa yang didukung bot WA (id/en/cn) */
.lang{display:flex; gap:4px; flex:0 0 auto; padding-top:2px}
.lang-btn{
  padding:5px 9px; font-size:12px; font-weight:600; line-height:1;
  background:#fff; color:var(--abu); border:1px solid var(--garis);
  border-radius:6px; cursor:pointer;
}
.lang-btn:hover{border-color:var(--biru); color:var(--biru)}
.lang-btn.aktif{background:var(--biru); border-color:var(--biru); color:#fff}
.brand{font-weight:700; letter-spacing:.3px}

/* Baris pencarian di dalam header supaya ikut sticky — tetap terjangkau
   saat daftar barang di-scroll. */
.cari-wrap{max-width:560px; margin:0 auto; padding:0 16px 10px}
.cari-wrap .inp{padding:10px 13px}
.wa-nudge{
  display:block; margin-top:2px; font-size:13px;
  color:var(--biru); text-decoration:none;
}
.wa-nudge:hover{text-decoration:underline}

/* ---------- layout ---------- */
#app{max-width:560px; margin:0 auto; padding:16px 16px 96px}
.step{animation:masuk .18s ease-out}
@keyframes masuk{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.back{
  background:none; border:0; color:var(--biru); font-size:14px;
  padding:0 0 10px; cursor:pointer;
}

/* ---------- form ---------- */
.lbl{display:block; font-size:14px; font-weight:600; margin:14px 0 5px}
.inp{
  width:100%; padding:12px 13px; font-size:16px;   /* 16px: cegah zoom iOS */
  border:1px solid var(--garis); border-radius:8px; background:#fff; color:var(--teks);
}
.inp:focus{outline:2px solid var(--biru); outline-offset:-1px; border-color:var(--biru)}
.hint{font-size:13px; color:var(--abu); margin-top:5px}
.err{
  background:#fdecec; color:var(--merah); border:1px solid #f5c2c2;
  padding:10px 12px; border-radius:8px; font-size:14px; margin-top:12px;
}

/* ---------- tombol ---------- */
.btn{
  width:100%; padding:13px 16px; margin-top:16px; font-size:16px; font-weight:600;
  background:var(--biru); color:#fff; border:0; border-radius:8px; cursor:pointer;
}
.btn:hover{background:var(--biru-tua)}
.btn:disabled{background:#9db8d6; cursor:not-allowed}
.btn-lg{padding:15px}
.btn-ghost{background:none; color:var(--abu); border:1px solid var(--garis)}
.btn-ghost:hover{background:#eef1f4; color:var(--teks)}

.pilihan{
  display:block; width:100%; text-align:left; padding:16px;
  margin-bottom:12px; background:#fff; border:1px solid var(--garis);
  border-radius:10px; cursor:pointer; font-size:16px; color:var(--teks);
}
.pilihan:hover{border-color:var(--biru); background:#f7fbff}
.pilihan strong{display:block; font-size:16px}
.pilihan small{display:block; color:var(--abu); font-size:13px; margin-top:3px}

/* ---------- katalog ---------- */
.produk-list{margin-top:14px}
.produk{
  display:flex; align-items:center; gap:12px; padding:11px;
  background:#fff; border:1px solid var(--garis); border-radius:10px; margin-bottom:9px;
}
.produk img,.produk .noimg{
  width:52px; height:52px; border-radius:7px; object-fit:cover; flex:0 0 52px; background:#eef1f4;
}
.produk .noimg{display:flex; align-items:center; justify-content:center; font-size:22px}
.produk-info{flex:1; min-width:0}
.produk-nama{font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.produk-harga{font-size:14px; color:var(--abu)}
.qty{display:flex; align-items:center; gap:9px; flex:0 0 auto}
.qty button{
  width:32px; height:32px; font-size:19px; line-height:1;
  border:1px solid var(--garis); background:#fff; border-radius:7px; cursor:pointer; color:var(--teks);
}
.qty button:hover{border-color:var(--biru); color:var(--biru)}
.qty span{min-width:20px; text-align:center; font-weight:600}

.cart-bar{
  position:fixed; left:0; right:0; bottom:0; background:#fff;
  border-top:1px solid var(--garis); padding:11px 16px; z-index:30;
}
/* Pembungkus dalam: menyamakan lebar & posisi dengan kolom konten (#app),
   supaya di layar lebar tombol tidak menggantung sendirian di tengah
   sementara teks totalnya menempel di tepi kiri. */
.cart-in{
  max-width:560px; margin:0 auto;
  display:flex; align-items:center; gap:14px;
}
.cart-in > div:first-child{flex:1; min-width:0}
.cart-bar .btn{margin:0; width:auto; padding:12px 26px; flex:0 0 auto}
.cart-qty{font-size:13px; color:var(--abu)}
.cart-total{font-size:17px; font-weight:700}

/* ---------- ringkasan & QR ---------- */
.kartu{background:#fff; border:1px solid var(--garis); border-radius:10px; padding:14px; margin-top:16px}
.ringkas{background:#fff; border:1px solid var(--garis); border-radius:10px; padding:12px; margin-top:16px; font-size:14px}
.baris{display:flex; justify-content:space-between; gap:12px; padding:4px 0}
.baris.total{border-top:1px solid var(--garis); margin-top:7px; padding-top:9px; font-weight:700; font-size:16px}
.baris span:last-child{text-align:right; white-space:nowrap}

.qr-box{
  background:#fff; border:1px solid var(--garis); border-radius:10px;
  padding:18px; margin:14px 0; text-align:center; min-height:220px;
  display:flex; align-items:center; justify-content:center;
}
.qr-box img,.qr-box canvas,.qr-box table{max-width:250px; width:100%; height:auto}
.qr-box table{border-collapse:collapse; margin:0 auto}
.qr-box table td{width:5px; height:5px; padding:0}

.countdown{text-align:center; font-size:15px; color:var(--abu); margin-bottom:10px}
.countdown strong{color:var(--teks); font-variant-numeric:tabular-nums}
.status{padding:11px; border-radius:8px; text-align:center; font-size:14px; font-weight:600}
.status-wait{background:#fff7e6; color:#8a6100}
.status-ok{background:#e6f6ec; color:var(--hijau)}
.status-bad{background:#fdecec; color:var(--merah)}

.sukses,.gagal{
  width:62px; height:62px; border-radius:50%; margin:22px auto 14px;
  display:flex; align-items:center; justify-content:center; font-size:32px; color:#fff;
}
.sukses{background:var(--hijau)}
.gagal{background:var(--merah)}
#step-selesai,#step-expired{text-align:center}