/* ============================================================
   AMANAH OFFICIAL — Mode gelap (storefront)
   File : public/assets/css/dark.css   (dimuat paling akhir)
   Aktif bila <html data-tema-aktif="gelap"> — diset skrip kecil di
   <head> (layouts/app.php) dari pilihan pengguna (localStorage
   amanah_theme: terang | gelap | sistem) sebelum halaman digambar.
   Sebagian besar cukup lewat token; sisanya perbaikan per komponen.
   ============================================================ */

:root[data-tema-aktif="gelap"] {
  color-scheme: dark;

  /* Token v2 */
  --brand: #F0668C;
  --brand-dark: #E8547A;
  --brand-50: #2B1822;
  --brand-100: #4A2637;
  --brand-grad: linear-gradient(180deg, #3A1A2A 0%, #2A1420 100%);
  --ink: #EEE7F0;
  --ink-2: #C9BFCD;
  --muted: #958A9A;
  --line: #2F2833;
  --bg: #121014;
  --surface: #1C1920;
  --price: #FF7EA0;
  --star: #FFC23D;
  --success: #3CC4AD;
  --danger: #FF6B6B;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, .55);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .65);

  /* Token legacy amanah.css (halaman statis, FAQ, dll.) */
  --white: #1C1920;
  --linen: #121014;
  --rose-white: #18151B;
  --pale-pink: #241B26;
  --border-pink: #2F2833;
  --dark-plum: #EEE7F0;
  --mid-plum: #D9C7DE;
  --muted-rose: #A596A8;
  --soft-pink: #8E4A64;
  --grad-card: linear-gradient(145deg, #241B26, #2B1822);
}

:root[data-tema-aktif="gelap"] body { background: var(--bg); color: var(--ink); }
:root[data-tema-aktif="gelap"] img { color-scheme: light; }

/* ── Header & navigasi ── */
:root[data-tema-aktif="gelap"] .sh-search { background: #2A2430; box-shadow: none; }
:root[data-tema-aktif="gelap"] .sh-search input { color: var(--ink); }
:root[data-tema-aktif="gelap"] .sh-search-btn { background: var(--brand-dark); }
:root[data-tema-aktif="gelap"] .sh-cart .cart-badge { border-color: #2A1420; }
:root[data-tema-aktif="gelap"] .sh-account .avatar,
:root[data-tema-aktif="gelap"] .me-avatar { background: rgba(255, 255, 255, .12); }
:root[data-tema-aktif="gelap"] .bottom-nav { box-shadow: 0 -2px 10px rgba(0, 0, 0, .4); }
:root[data-tema-aktif="gelap"] .sh-suggest img { background: var(--brand-50); }

/* ── Kartu produk & beranda ── */
:root[data-tema-aktif="gelap"] .pcard-wish { background: rgba(28, 25, 32, .9); color: var(--ink-2); }
:root[data-tema-aktif="gelap"] .pcard-img,
:root[data-tema-aktif="gelap"] .pd-main { background: #241F28; }
:root[data-tema-aktif="gelap"] .pcard-disc { background: #5A4A10; color: #FFE58A; }
:root[data-tema-aktif="gelap"] .pcard-tag { color: #4FD1BC; border-color: #1F5C53; }
:root[data-tema-aktif="gelap"] .pcard-flashbar { background: #3A2430; }
:root[data-tema-aktif="gelap"] .hb-b3 { background: linear-gradient(120deg, #2A1A30 0%, #6A2048 100%); }
:root[data-tema-aktif="gelap"] .fs-timer b,
:root[data-tema-aktif="gelap"] .pd-flash-end strong { background: #000; }
:root[data-tema-aktif="gelap"] .lp-sort { background: #241F28; }
:root[data-tema-aktif="gelap"] .lp-sort-btn:not(.active) { background: var(--surface); color: var(--ink); }
:root[data-tema-aktif="gelap"] .chip:not(.active) { background: var(--surface); }

/* ── Detail produk ── */
:root[data-tema-aktif="gelap"] .pd-sec-title { background: #241F28; }
:root[data-tema-aktif="gelap"] .pd-opt:disabled { background: #18151B; color: #5D5462; }
:root[data-tema-aktif="gelap"] .pd-hint { background: #3A1E22; }
:root[data-tema-aktif="gelap"] .star-off { color: #3D3542; fill: #3D3542; }
:root[data-tema-aktif="gelap"] .pd-bar-ic,
:root[data-tema-aktif="gelap"] .pd-bar-cart { background: #17302C; color: #4FD1BC; }
:root[data-tema-aktif="gelap"] .pd-bar button:disabled { background: #3D3542; }
:root[data-tema-aktif="gelap"] .pd-qty input { background: var(--surface); color: var(--ink); }
:root[data-tema-aktif="gelap"] .pd-qty button { color: var(--ink); }

/* ── Form, checkbox, modal ── */
:root[data-tema-aktif="gelap"] .kr-check span { border-color: #5D5462; }
:root[data-tema-aktif="gelap"] .f2 input,
:root[data-tema-aktif="gelap"] .f2 select,
:root[data-tema-aktif="gelap"] .f2 textarea,
:root[data-tema-aktif="gelap"] .co-note input,
:root[data-tema-aktif="gelap"] .co-vc-kode input,
:root[data-tema-aktif="gelap"] .rv-text { background: #241F28; color: var(--ink); border-color: var(--line); }
:root[data-tema-aktif="gelap"] input::placeholder,
:root[data-tema-aktif="gelap"] textarea::placeholder { color: #7A6F7F; }
:root[data-tema-aktif="gelap"] .md2 { background: rgba(0, 0, 0, .65); }
:root[data-tema-aktif="gelap"] .flash-ok { background: #13302A; color: #7FE0CC; border-color: #1F5C53; }
:root[data-tema-aktif="gelap"] .flash-err { background: #3A1E22; color: #FFB3B3; border-color: #5C2A30; }

/* ── Keranjang, checkout, pesanan ── */
:root[data-tema-aktif="gelap"] .kr-badge-mati { background: #4A4150; }
:root[data-tema-aktif="gelap"] .co-ship-row { background: #1F1B24; }
:root[data-tema-aktif="gelap"] .co-ship-label { color: #4FD1BC; }
:root[data-tema-aktif="gelap"] .co-bar .co-submit:disabled { background: #3D3542; }
:root[data-tema-aktif="gelap"] .od-cari { background: #241F28; }
:root[data-tema-aktif="gelap"] .od-card-foot { background: #1F1B24; }
:root[data-tema-aktif="gelap"] .od-status { color: #4FD1BC; }
:root[data-tema-aktif="gelap"] .odd-steps li.on .odd-step-ic { border-color: #3CC4AD; color: #3CC4AD; }
:root[data-tema-aktif="gelap"] .rs-copy code { background: #2B1822; color: var(--ink); }
:root[data-tema-aktif="gelap"] .track-event.current .track-dot { box-shadow: 0 0 0 4px #17302C; }

/* ── Toast ala Shopee ── */
:root[data-tema-aktif="gelap"] .amanah-toast { background: rgba(240, 232, 242, .92) !important; color: #1C1920 !important; }

/* ── Halaman statis legacy (amanah.css) ── */
:root[data-tema-aktif="gelap"] .page-hero { background: var(--surface) !important; }
:root[data-tema-aktif="gelap"] .info-box { background: #241B26; color: var(--ink); border-color: #4A2637; }
:root[data-tema-aktif="gelap"] .faq-item,
:root[data-tema-aktif="gelap"] .faq-question,
:root[data-tema-aktif="gelap"] .step-card,
:root[data-tema-aktif="gelap"] .track-form { background: var(--surface); color: var(--ink); }
:root[data-tema-aktif="gelap"] .faq-answer { color: var(--ink-2); }

/* ── Pemilih mode tampilan (navbar) ── */
.sh-tema { position: relative; }
.sh-tema-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; color: #fff; font-size: 13px; padding: 4px 0; cursor: pointer;
}
.sh-tema-btn .tm-ic { display: none; }
.sh-tema-btn .ic { width: 15px; height: 15px; }
:root[data-tema="terang"] .tm-terang, :root:not([data-tema]) .tm-terang,
:root[data-tema="gelap"] .tm-gelap, :root[data-tema="sistem"] .tm-sistem { display: inline-flex; }
.sh-tema.open .sh-menu { opacity: 1; visibility: visible; transform: none; }
.sh-tema-menu { min-width: 170px; }
.sh-tema-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 16px; border: 0; background: none; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer;
}
.sh-tema-menu button .ic { width: 18px; height: 18px; color: var(--muted); }
.sh-tema-menu button:hover { background: var(--brand-50); color: var(--brand); }
.sh-tema-menu button[aria-pressed="true"] { color: var(--brand); font-weight: 600; }
.sh-tema-menu button[aria-pressed="true"] .ic { color: var(--brand); }
/* Versi HP: ikon di bar utama header */
@media (max-width: 767px) {
  .sh-tema.hide-desktop .sh-tema-btn { width: 36px; height: 44px; justify-content: center; padding: 0; }
  .sh-tema.hide-desktop .sh-tema-btn .ic { width: 22px; height: 22px; }
  .sh-tema-label { display: none; }
  .sh-tema.hide-desktop .sh-menu { top: calc(100% + 2px); }
}