/* WBR skin: palet krim-madu sama dengan halaman hotspot warung.
   Override berkas terkompilasi (source WBR tidak ada). Mode gelap bawaan tidak disentuh. */
:root{--krim:#fbf4e2;--krim2:#f3e6c4;--kartu:#fffdf6;--tinta:#2e2412;--redup:#65542f;--garis:#e2d0a2;--madu:#f0b429;--madu2:#e0a01a;--aksen:#c98f0b;--panas:#9a3412;--panasbg:#fde4d2;--dingin:#155e75;--dinginbg:#d8eef3}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* ---- terang ---- */
html:not(.wbr-dk) .bg-slate-50{background-color:var(--krim)!important}
html:not(.wbr-dk) .bg-white{background-color:var(--kartu)!important}
html:not(.wbr-dk) .bg-slate-100{background-color:var(--krim2)!important}
html:not(.wbr-dk) .hover\:bg-slate-200:hover{background-color:#ebdcb0!important}
html:not(.wbr-dk) .hover\:bg-slate-50:hover{background-color:var(--krim2)!important}
html:not(.wbr-dk) .border-slate-200,html:not(.wbr-dk) .border-slate-300{border-color:var(--garis)!important}
html:not(.wbr-dk) .text-slate-900{color:var(--tinta)!important}
html:not(.wbr-dk) .text-slate-700{color:var(--tinta)!important}
html:not(.wbr-dk) .text-slate-600,html:not(.wbr-dk) .text-slate-500{color:var(--redup)!important}
html:not(.wbr-dk) .focus\:ring-slate-400:focus{--tw-ring-color:var(--madu)!important}
html:not(.wbr-dk) input:focus-visible,html:not(.wbr-dk) button:focus-visible,html:not(.wbr-dk) a:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
html:not(.wbr-dk) #root .border-b.px-4{background:var(--kartu)!important;border-bottom:1px solid var(--garis)!important}
html:not(.wbr-dk) #root .border-b h1{font-weight:800;letter-spacing:-.01em}
html:not(.wbr-dk) input::placeholder{color:#6b5d3a!important}
html:not(.wbr-dk) #root input,html:not(.wbr-dk) #root button[aria-label="Buka filter produk"]{border-color:#b8a47a!important}
#root button[aria-label="Ganti tema"],#root button[aria-label="Login"]{min-width:44px;min-height:44px}
/* judul halaman: tidak lagi mengulang header */
#root .max-w-4xl>h1.text-4xl{font-size:1.5rem;line-height:1.2;font-weight:800;margin-bottom:2px}
#root .max-w-4xl>h1.text-4xl+p{margin-bottom:16px!important;font-size:.95rem}

/* kartu pencarian */
#root .max-w-4xl>.mb-8.rounded-lg{border-radius:14px;box-shadow:0 1px 0 var(--garis)}

/* kategori */
#root h2.text-xl{text-transform:capitalize;font-size:1.05rem;font-weight:800;border-bottom:2px solid var(--madu)!important;display:flex;align-items:center;gap:8px}

/* kartu produk */
#root .grid>.p-4.rounded-lg.border{border-radius:12px;padding:14px 16px;transition:border-color .15s,transform .15s}
#root .grid>.p-4.rounded-lg.border:hover{border-color:var(--madu2);box-shadow:none;transform:translateY(-1px)}
#root .grid>.p-4 h3{font-size:.98rem;line-height:1.35}
#root .grid>.p-4 .mt-2 .text-sm{font-size:1.1rem;font-weight:800}
html:not(.wbr-dk) #root .grid>.p-4 .mt-2 .text-sm{color:var(--tinta)!important}
#root .grid>.p-4 .mt-2 .text-xs{border-radius:999px;padding:3px 10px;font-weight:700;font-size:.75rem;border:1px solid transparent}
html:not(.wbr-dk) #root .grid>.p-4 .mt-2 .text-xs{background:var(--krim2)!important;color:var(--redup)!important;border-color:var(--garis)}
html:not(.wbr-dk) #root .grid>.p-4 .mt-2 .text-xs[data-jenis=panas]{background:var(--panasbg)!important;color:var(--panas)!important;border-color:#f3c3a0}
html:not(.wbr-dk) #root .grid>.p-4 .mt-2 .text-xs[data-jenis=dingin]{background:var(--dinginbg)!important;color:var(--dingin)!important;border-color:#a9d3dc}

/* tombol filter/login */
#root button[aria-label="Login"]{background:var(--madu)!important;color:var(--tinta)!important;border:2px solid var(--aksen);font-weight:700}
#root button[aria-label="Login"]:hover{background:var(--madu2)!important}

/* tombol hotspot warung (hanya di WiFi warung), kartu inline di atas pencarian */
#wbr-hs{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;margin:0 0 16px;padding:14px 18px;border-radius:14px;background:var(--madu);color:var(--tinta)!important;border:2px solid var(--aksen);text-decoration:none}
#wbr-hs:hover{background:var(--madu2)}
#wbr-hs strong{display:block;font-size:1.15rem;font-weight:800;line-height:1.2}
#wbr-hs small{display:block;margin-top:2px;font-size:.85rem;font-weight:600;color:var(--tinta)}
#wbr-hs b{font-size:1.4rem;line-height:1}

/* ---- mode gelap: nada coklat hangat ---- */
html.wbr-dk .bg-slate-900:not(button){background-color:#1c170d!important}
html.wbr-dk .bg-slate-800{background-color:#2a2314!important}
html.wbr-dk .bg-slate-700{background-color:#3a301c!important}
html.wbr-dk .border-slate-700,html.wbr-dk .border-slate-600,html.wbr-dk .border-slate-200{border-color:#5a4c2c!important}
html.wbr-dk .text-slate-300,html.wbr-dk .text-slate-400{color:#d8c9a3!important}
html.wbr-dk input::placeholder{color:#b9a98a!important}
html.wbr-dk .text-yellow-400{color:var(--madu)!important}
html.wbr-dk #root .grid>.p-4 .mt-2 .text-sm{color:var(--madu)!important}
html.wbr-dk #root .grid>.p-4 .mt-2 .text-xs[data-jenis=panas]{background:rgba(251,146,60,.18)!important;color:#fdba74!important;border-color:rgba(251,146,60,.4)}
html.wbr-dk #root .grid>.p-4 .mt-2 .text-xs[data-jenis=dingin]{background:rgba(56,189,248,.16)!important;color:#7dd3fc!important;border-color:rgba(56,189,248,.4)}
html.wbr-dk #root h2.text-xl{color:#fff}

/* ---- rapikan: header sejajar isi, judul ganda, kartu, ikon tema ---- */
@media (min-width:768px){
  html #root .border-b.px-4.flex{padding-left:max(2rem,calc((100% - 1200px)/2));padding-right:max(2rem,calc((100% - 1200px)/2))}
}
@media (min-width:1440px){
  html #root .border-b.px-4.flex{padding-left:max(2rem,calc((100% - 1320px)/2));padding-right:max(2rem,calc((100% - 1320px)/2))}
}
@media (min-width:1800px){
  html #root .border-b.px-4.flex{padding-left:max(2rem,calc((100% - 1440px)/2));padding-right:max(2rem,calc((100% - 1440px)/2))}
}
/* h1 dipertahankan untuk pembaca layar, tidak lagi mengulang nama di header */
#root .max-w-4xl>h1.text-4xl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#root .max-w-4xl>h1.text-4xl+p{font-size:1.15rem;font-weight:700;margin-bottom:14px!important;color:var(--tinta)!important}
html.wbr-dk #root .max-w-4xl>h1.text-4xl+p{color:#fff!important}
/* harga dan badge selalu rata bawah kartu */
#root .grid>.p-4.rounded-lg.border{display:flex;flex-direction:column}
#root .grid>.p-4 .mt-2.flex{margin-top:auto;padding-top:10px}
/* tombol tema: ikon bulan/matahari tegak dan di tengah */
#root button[aria-label="Ganti tema"]{display:inline-flex;align-items:center;justify-content:center;width:44px;padding:0}
#root button[aria-label="Ganti tema"] svg{display:block;transform:none!important}