/* ====== PALET & TEMA ====== */
:root{
  --gold:#d4af37; --gold-soft:#e5c766;
  --ink:#f8f5ec;  --muted:#bdbdbd;

  /* Default (Semua) */
  --df-bg1:#121212;  --df-bg2:#2a221b;

  /* Makanan */
  --mk-500:#eab308;  --mk-600:#ca8a04;  --mk-bg1:#1a1208; --mk-bg2:#2c1f0b;

  /* Minuman */
  --mn-500:#06b6d4;  --mn-600:#0891b2;  --mn-bg1:#0b1b22; --mn-bg2:#0f2730;

  /* Juice */
  --jc-500:#22c55e;  --jc-600:#16a34a;  --jc-bg1:#0f1d12; --jc-bg2:#0f2a17;

  /* Rokok */
  --rk-500:#ef4444;  --rk-600:#dc2626;  --rk-bg1:#141414; --rk-bg2:#1d1d1d;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:"Poppins",system-ui,Arial,sans-serif}

/* Background tema per kategori */
body{color:#fff; min-height:100vh}
body.theme-all      {background:linear-gradient(180deg,var(--df-bg1) 15%,var(--df-bg2) 100%)}
body.theme-makanan  {background:linear-gradient(180deg,var(--mk-bg1) 20%,var(--mk-bg2) 100%)}
body.theme-minuman  {background:linear-gradient(180deg,var(--mn-bg1) 20%,var(--mn-bg2) 100%)}
body.theme-juice    {background:linear-gradient(180deg,var(--jc-bg1) 20%,var(--jc-bg2) 100%)}
body.theme-rokok    {background:linear-gradient(180deg,var(--rk-bg1) 20%,var(--rk-bg2) 100%)}

/* Layout */
.container{max-width:980px;margin:0 auto;padding:14px 18px}

/* Header */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(0,0,0,.82);
  border-bottom:2px solid var(--gold);
  backdrop-filter: blur(4px);
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.brand{color:var(--gold);font-weight:700;font-size:1.1rem}

/* Search + actions */
.header-actions{display:flex; align-items:center; gap:10px}
.search-wrap{flex:1}
.search{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08); color:#fff; outline:none;
}
.search::placeholder{color:#d0d0d0}

/* Icon keranjang */
.cart-icon{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
}
.cart-badge{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px;
  padding:0 6px; border-radius:999px; background:linear-gradient(180deg,var(--gold),var(--gold-soft));
  color:#1b1208; font-weight:800; font-size:12px; display:none; align-items:center; justify-content:center;
}

/* Tabs */
.tabs{display:flex; gap:10px; overflow:auto; padding:10px 0 8px}
.tab{
  text-decoration:none; color:#d9d9d9; white-space:nowrap;
  padding:7px 12px; border:1px solid rgba(255,255,255,.15);
  border-radius:999px; background:rgba(255,255,255,.05);
  transition:.2s;
}
.tab:hover{border-color:var(--gold-soft); color:#fff}
.tab.active{color:#000; background:linear-gradient(180deg,var(--gold),var(--gold-soft)); border-color:transparent}

.tab-makanan.active{background:linear-gradient(180deg,var(--mk-500),var(--mk-600))}
.tab-minuman.active{background:linear-gradient(180deg,var(--mn-500),var(--mn-600))}
.tab-juice.active  {background:linear-gradient(180deg,var(--jc-500),var(--jc-600))}
.tab-rokok.active  {background:linear-gradient(180deg,var(--rk-500),var(--rk-600))}

/* Grid */
.grid{display:grid; gap:12px; padding-top:12px}
@media(min-width:640px){ .grid{grid-template-columns:1fr 1fr} }

/* Kartu menu */
.card{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:.2s;
}
.card:hover{transform:translateY(-2px)}
.card.bump{transform:scale(1.02)}
.title{font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:4px}

/* Badge & Price */
.badge{display:inline-block; font-size:.75rem; font-weight:600; padding:2px 8px; border-radius:6px}
.price{font-weight:800; letter-spacing:.3px}

/* Warna kartu per kategori */
.card.cat-makanan       {border-color:rgba(234,179,8,.25); background:rgba(234,179,8,.08)}
.card.cat-makanan:hover {border-color:var(--mk-600)}
.badge-makanan          {background:var(--mk-500); color:#1b1208}
.price-makanan          {color:var(--mk-500)}

.card.cat-minuman       {border-color:rgba(6,182,212,.25); background:rgba(6,182,212,.08)}
.card.cat-minuman:hover {border-color:var(--mn-600)}
.badge-minuman          {background:var(--mn-500); color:#001518}
.price-minuman          {color:var(--mn-500)}

.card.cat-juice         {border-color:rgba(34,197,94,.25); background:rgba(34,197,94,.08)}
.card.cat-juice:hover   {border-color:var(--jc-600)}
.badge-juice            {background:var(--jc-500); color:#0e1a0e}
.price-juice            {color:var(--jc-500)}

.card.cat-rokok         {border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.06)}
.card.cat-rokok:hover   {border-color:var(--rk-600)}
.badge-rokok            {background:var(--rk-500); color:#230b0b}
.price-rokok            {color:var(--rk-500)}

/* Footer & empty */
.footer{
  margin:18px 0; padding:14px;
  border-top:1px solid rgba(255,255,255,.15);
  color:#bdbdbd; text-align:center; font-size:.9rem;
}
.empty{color:#bdbdbd; text-align:center; padding:24px}

/* ====== Keranjang ====== */
.right{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.add-btn{
  border:none; cursor:pointer; padding:6px 10px; border-radius:8px;
  background:linear-gradient(180deg,var(--gold),var(--gold-soft));
  color:#1b1208; font-weight:700;
}

/* Sheet */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:140; opacity:0; pointer-events:none; transition:.2s;
}
.sheet-backdrop.show{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; left:0; right:0; bottom:-100%; z-index:150;
  background:rgba(25,25,25,.98); border-top:2px solid var(--gold); border-radius:16px 16px 0 0;
  max-height:85vh; transition:.28s; color:#fff;
}
.sheet.open{ bottom:0 }
.sheet-header{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; font-weight:700}
.sheet-close{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer}
.sheet-body{padding:0 16px 16px; overflow:auto; max-height:70vh}
.sheet-sep{height:1px;background:rgba(255,255,255,.12);margin:12px 0}

.cart-item{display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.12)}
.ci-title{font-weight:600}
.ci-sub{color:#cfcfcf; font-size:.85rem}
.ci-total{font-weight:700}
.qty{display:flex; align-items:center; gap:8px}
.qty button{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer}
.del{border:none;background:transparent;color:#aaa;cursor:pointer}

.form-row{display:flex; flex-direction:column; gap:6px; margin:8px 0}
.form-row input{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;outline:none}

.sheet-total{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin:12px 0}
.wa-btn{
  width:100%; border:none; cursor:pointer; padding:12px 14px; border-radius:10px;
  background:#25D366; color:#072b12; font-weight:800; font-size:1rem;
}
.hint{color:#9ad7b3; font-size:.85rem; margin-top:8px}
.muted{color:#cfcfcf}

/* Scrollbar tabs */
.tabs::-webkit-scrollbar{height:6px}
.tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}