/* =====================================================================
   TELUR KITA — Halaman pesan pelanggan (memakai token warna app.css)
   ===================================================================== */
.toko-body { min-height: 100%; background:
  radial-gradient(120% 60% at 50% -10%, var(--cream-50) 0%, transparent 60%), var(--bg); }
.toko { max-width: 560px; margin: 0 auto; padding-block: 20px 120px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 14px; }
.toko-loading { padding: 60px 0; text-align: center; color: var(--muted); }
.toko-loading .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--yolk); animation: tk-pulse 1s infinite alternate; }
@keyframes tk-pulse { to { transform: scale(1.6); opacity: .4; } }

.toko-head { display: flex; align-items: center; gap: 12px; padding: 4px 2px 6px; }
.toko-head .logo-mark { width: 46px; height: 46px; flex: none; }
.toko-head h1 { font-size: 22px; font-weight: 800; color: var(--dark); letter-spacing: -.01em; }
:root[data-theme="dark"] .toko-head h1 { color: var(--green); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toko-head h1 { color: var(--green); } }
.toko-head p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }

.t-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 18px; min-width: 0; }
.t-card h2 { font-size: 15px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.t-card h2 .no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-50); color: var(--green-600); font-size: 12px; }

/* status stok */
.stok { display: flex; align-items: center; gap: 14px; }
.stok .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 15px; white-space: nowrap; }
.stok .pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.stok.Tersedia .pill { background: var(--green-50); color: var(--green-600); }
.stok.Terbatas .pill { background: var(--yolk-50); color: #A87400; }
.stok.Habis .pill { background: var(--red-50); color: var(--danger); }
:root[data-theme="dark"] .stok.Terbatas .pill { color: var(--yolk); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stok.Terbatas .pill { color: var(--yolk); } }
.stok .ket { color: var(--muted); font-size: 13.5px; }
.harga { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.harga b { font-size: 24px; font-weight: 800; }
.harga small { color: var(--muted); }

/* form */
.t-field { display: grid; gap: 6px; margin-bottom: 12px; }
.t-field label { font-weight: 700; font-size: 13.5px; }
.t-field label i { font-style: normal; font-weight: 500; color: var(--faint); }
.t-field input, .t-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 16px; }
.t-field input:focus, .t-field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-50); }
.t-field textarea { min-height: 70px; resize: vertical; }
.t-field .help { color: var(--faint); font-size: 12.5px; }
.qty { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; }
.qty button { border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; font-size: 22px; font-weight: 700; cursor: pointer; }
.qty input { text-align: center; font-weight: 800; font-size: 18px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.chips button:hover { border-color: var(--green); color: var(--green-600); }

/* pembayaran */
.pay { display: grid; gap: 8px; }
.pay-opt { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: grid; gap: 4px; background: var(--surface); }
.pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay-opt .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay-opt .bank { font-weight: 800; display: flex; align-items: center; gap: 10px; }
.pay-opt .bank::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--faint); flex: none; }
.pay-opt.on { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-50); }
.pay-opt.on .bank::before { border-color: var(--green); background: radial-gradient(circle, var(--green) 45%, transparent 50%); }
.pay-opt .detail { display: none; padding-left: 28px; color: var(--muted); font-size: 13.5px; }
.pay-opt.on .detail { display: block; }
.pay-opt .nomor { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.copy { border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.copy svg { width: 14px; height: 14px; }
.qris-img { display: block; width: 100%; max-width: 300px; margin: 10px auto 4px; border-radius: 12px; border: 1px solid var(--border); background: #fff; }
.bayar-nanti { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--blue-50); color: var(--text); font-size: 13px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px dashed var(--border); cursor: pointer; font-size: 13.5px; }
.check input { width: 20px; height: 20px; accent-color: var(--green); margin: 0; flex: none; }
.check.disabled { opacity: .5; cursor: not-allowed; }

/* bar bawah */
.t-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border);
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.t-bar .in { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.t-bar .tot { flex: 1; min-width: 0; }
.t-bar .tot small { display: block; color: var(--muted); font-size: 12px; }
.t-bar .tot b { font-size: 20px; font-weight: 800; }
.btn-wa { background: #1FAF54; padding: 13px 18px; border-radius: 14px; font-size: 15px; }
.btn-wa:hover { background: #17964A; }
.btn-wa[disabled] { opacity: .55; cursor: not-allowed; }
.t-err { background: var(--red-50); color: var(--danger); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; }

/* sukses */
.sukses { text-align: center; padding: 28px 20px; }
.sukses .big { font-size: 46px; line-height: 1; }
.sukses h2 { justify-content: center; font-size: 20px; margin: 12px 0 6px; }
.sukses p { color: var(--muted); margin: 0 0 16px; }
.sukses .btn { width: 100%; }

.toko-foot { text-align: center; color: var(--faint); font-size: 12.5px; padding-top: 6px; }
.toko-foot a { color: var(--muted); }
.demo-note { background: var(--yolk-50); border-radius: 12px; padding: 10px 12px; font-size: 13px; }