/* Tambahan untuk /beli (checkout.css ekstensi + kolom email yang diketik). */
.email-peringatan { margin: -4px 0 0; padding: 10px 12px; border-radius: 9px; color: #7a4f0e; background: #fff6e2; font-size: 11px; line-height: 1.55; }
.email-peringatan b { color: #5f3d08; }
.field small.email-saran { color: #7a4f0e; font-size: 10px; }
.email-saran button { margin-left: 4px; padding: 0; border: 0; color: var(--orange-ink); background: none; cursor: pointer; font: inherit; font-weight: 800; text-decoration: underline; }
.checkout-result p + p { margin-top: 10px; }
/* Saran salah ketik di bawah kolom pertama tidak boleh mendorong kolom sebelahnya turun. */
.field-grid > .field { align-content: start; }
[data-theme="dark"] .email-peringatan { color: #eecc8b; background: #2b2619; }
[data-theme="dark"] .email-peringatan b { color: #f5dcaa; }
[data-theme="dark"] .field small.email-saran { color: #eecc8b; }
/* "Lanjut dengan Google" (2026-10-10). .field memberi display:grid, yang
   mengalahkan [hidden] bawaan peramban, jadi hidden ditegakkan di sini. */
.masuk-google[hidden], .akun-google[hidden], .email-manual[hidden], .ganti-cara[hidden], .telepon-isi[hidden] { display: none !important; }
/* Nomor WA tersimpan (2026-10-19): kartunya meminjam gaya .akun-google. */
.telepon-isi { display: grid; gap: 8px; }
.masuk-google { display: grid; gap: 9px; }
.masuk-google p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.tombol-google { min-height: 44px; }
.masuk-google p b { color: var(--ink-2); }
/* Satu kolom akun, satu keadaan (gambarAkunGoogle): tombol Google, akun terpilih, atau kolom ketik. */
.akun-pemesan > div.email-manual { display: grid; gap: 8px; }
.ganti-cara { justify-self: start; padding: 0; border: 0; color: var(--orange-ink); background: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; text-decoration: underline; }
.akun-google { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #b4e9cd; border-radius: 10px; background: #eefbf4; }
.akun-google-tanda { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 12px; font-weight: 900; }
.akun-google div { display: grid; gap: 2px; min-width: 0; }
.akun-google small { color: var(--muted); font-size: 10px; }
.akun-google b { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.akun-google button { margin-left: auto; padding: 0; border: 0; color: var(--orange-ink); background: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; text-decoration: underline; }
[data-theme="dark"] .akun-google { border-color: #2c5a43; background: #17261e; }

/* Grup komunitas WhatsApp: hanya di layar lunas dan invoice lunas (2026-10-10).
   Situs tidak memajang grupnya ke umum; alamatnya dipasang wa.js. */
.lunas-komunitas { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid #cfe8da; border-radius: 12px; background: #f1faf5; }
.lunas-komunitas p { display: grid; gap: 3px; margin: 0; flex: 1 1 260px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.lunas-komunitas p b { color: var(--ink); font-size: 13.5px; }
.lunas-komunitas .wa-tanya { display: inline-flex; margin: 0; }
.invoice-aksi .wa-gabung { grid-column: 1 / -1; order: 3; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-color: #117a45; color: #117a45; text-decoration: none; }
.invoice-aksi .wa-gabung svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.invoice-aksi .wa-gabung:hover { border-color: #117a45; color: #fff; background: #117a45; }
[data-theme="dark"] .lunas-komunitas { border-color: #24533a; background: #11261a; }
[data-theme="dark"] .invoice-aksi .wa-gabung { border-color: #6ee0a6; color: #6ee0a6; background: transparent; }
[data-theme="dark"] .invoice-aksi .wa-gabung:hover { color: #0b2417; background: #6ee0a6; }

/* Invoice lunas dibuka di HP: petunjuk ke laptop menggantikan tombol Web Store. */
.invoice-aksi .invoice-catatan { grid-column: 1 / -1; }

/* Tombol bayar di HP (kolom tunggal): menempel di bawah layar selama digulir, sebab
   ringkasan pesanan ada di atas dan tombolnya jauh di bawah. Teksnya sudah menyebut
   total, dan ikut hilang bersama formulir begitu tagihan terbit. */
@media (max-width: 900px) {
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  #payment-form::after {
    content: ""; position: fixed; right: 0; bottom: 0; left: 0; z-index: 34;
    height: calc(68px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
    background: #fff; box-shadow: 0 -10px 28px rgba(25, 29, 36, .1);
  }
  #payment-form #pay-button {
    position: fixed; right: 15px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 15px; z-index: 35;
    width: auto; min-height: 48px; margin: 0; font-size: 14px;
  }
  .checkout-footer { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body .wa-apung { bottom: calc(83px + env(safe-area-inset-bottom)); }
  [data-theme="dark"] #payment-form::after { border-top-color: #393735; background: #1e1d1c; }
}