/* Lapak Desa Desa Pejambon — gaya tampilan */
:root{
  --hijau:#1f7a4d; --hijau-terang:#2f9d63; --hijau-lembut:#e7f4ec;
  --tinta:#16241c; --redup:#5f6f66; --garis:#dbe6df; --kertas:#ffffff;
  --kuliner:#ea580c; --jasa:#2563eb; --kerajinan:#b45309;
  --pertanian:#4d7c0f; --peternakan:#7c3aed; --belanja:#be185d;
  --bayang:0 8px 28px rgba(18,40,28,.14);
  --r:14px;
}
*{box-sizing:border-box}
/* atribut hidden harus menang atas display milik kelas (mis. .kerangka{display:grid}) */
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  font:15px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--tinta);background:#eef3ef;overflow:hidden;
}
#peta{position:absolute;inset:0;z-index:0;background:#e8eee9}

/* ---------- panel dasar ---------- */
.panel{
  position:fixed;z-index:500;background:var(--kertas);border-radius:var(--r);
  box-shadow:var(--bayang);border:1px solid var(--garis);
}
.header-panel{
  padding:13px 14px 12px;flex:0 0 auto;
}
.daftar-panel{
  left:16px;width:min(360px,calc(100vw - 32px));
  bottom:16px;display:flex;flex-direction:column;overflow:hidden;
}
.kolom-kiri{
  position:fixed;top:16px;left:16px;bottom:16px;width:min(360px,calc(100vw - 32px));
  z-index:500;display:flex;flex-direction:column;gap:10px;pointer-events:none;
}
.kolom-kiri>*{pointer-events:auto}
.daftar-panel{position:relative;top:0;left:0;flex:1;min-height:0}
.header-panel{position:relative;top:0;left:0;width:auto}

/* ---------- merek ---------- */
.merek{display:flex;gap:10px;align-items:center;margin-bottom:11px}
.merek-ikon{
  width:38px;height:38px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--hijau),var(--hijau-terang));
  color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:800;letter-spacing:.03em;
}
.merek-teks{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.merek-teks strong{font-size:15.5px;letter-spacing:-.01em}
.merek-teks span{font-size:11.5px;color:var(--redup)}
.merek-toko{
  margin-left:auto;flex:0 0 auto;text-decoration:none;font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:999px;background:var(--hijau-lembut);
  border:1px solid var(--hijau);color:#14532d;
}
.merek-toko:hover{background:#d9eddf}

/* ---------- pencarian ---------- */
.cari{position:relative;margin-bottom:9px}
.cari input{
  width:100%;padding:9px 32px 9px 12px;border:1px solid var(--garis);border-radius:9px;
  font:inherit;font-size:13.5px;background:#f7faf8;color:var(--tinta);
}
.cari input:focus{outline:2px solid var(--hijau-terang);outline-offset:-1px;background:#fff}
.cari-hapus{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:none;font-size:19px;line-height:1;color:var(--redup);
  cursor:pointer;padding:2px 6px;border-radius:6px;
}
.cari-hapus:hover{background:#eef3ef}

/* ---------- filter cepat ---------- */
.filter-cepat{display:flex;gap:7px;margin-bottom:10px}
.pil{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 10px;border:1px solid var(--garis);border-radius:999px;background:#fff;
  font:inherit;font-size:12.5px;color:var(--redup);cursor:pointer;white-space:nowrap;
}
.pil:hover{background:#f3f8f5}
.pil[aria-pressed="true"]{
  background:var(--hijau-lembut);border-color:var(--hijau);color:#14532d;font-weight:600;
}
.dot-live{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:0 0 auto}
.pil[aria-pressed="false"] .dot-live{background:#cbd5e1}

/* ---------- tab kategori ---------- */
.tab-kategori{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;-ms-overflow-style:none;flex-wrap:wrap;row-gap:6px;
}
.tab-kategori::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;padding:5px 10px;border:1px solid var(--garis);border-radius:999px;
  background:#fff;font:inherit;font-size:12px;color:var(--redup);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.tab:hover{background:#f3f8f5}
.tab[aria-selected="true"]{color:#fff;border-color:transparent;font-weight:600}
.tab[data-kat="all"][aria-selected="true"]{background:var(--hijau)}
.tab[data-kat="Kuliner"][aria-selected="true"]{background:var(--kuliner)}
.tab[data-kat="Jasa"][aria-selected="true"]{background:var(--jasa)}
.tab[data-kat="Kerajinan"][aria-selected="true"]{background:var(--kerajinan)}
.tab[data-kat="Pertanian"][aria-selected="true"]{background:var(--pertanian)}
.tab[data-kat="Peternakan"][aria-selected="true"]{background:var(--peternakan)}
.tab[data-kat="Belanja"][aria-selected="true"]{background:var(--belanja)}
.tab .jml{opacity:.72;font-size:11px}

/* ---------- daftar ---------- */
.gagang{display:none}
.daftar-kepala{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 8px;border-bottom:1px solid var(--garis);
}
.daftar-judul{margin:0;font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.daftar-judul span{color:var(--hijau);font-variant-numeric:tabular-nums}
.kepala-aksi{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.tombol-kecil{white-space:nowrap}
.tombol-kecil{
  border:1px solid var(--garis);background:#fff;border-radius:6px;
  font:inherit;font-size:10.5px;color:var(--redup);padding:3px 6px;cursor:pointer;
  line-height:1.35;
}
.tombol-kecil:hover{background:#f3f8f5}
.tombol-kecil.aktif{background:#fff4e5;border-color:#e8a33d;color:#8a5a00;font-weight:600}
.lipat{
  border:0;background:none;font-size:17px;line-height:1;color:var(--redup);
  cursor:pointer;padding:0 4px;
}
body.mode-atur #peta{cursor:crosshair}
.daftar-isi{flex:1;overflow-y:auto;min-height:0;padding:8px}
.daftar-usaha{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}

.usaha{
  display:flex;gap:9px;padding:9px 10px;border-radius:9px;cursor:pointer;
  border:1px solid transparent;align-items:flex-start;
}
.usaha:hover{background:#f4f8f5}
.usaha.aktif{background:var(--hijau-lembut);border-color:#b7dcc7}
.usaha-ikon{
  width:26px;height:26px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
  color:#fff;
}
.usaha-ikon svg,.pin svg{display:block;color:#fff}
.usaha-isi{min-width:0;flex:1}
.usaha-nama{font-size:13.5px;font-weight:600;line-height:1.35;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usaha-ket{font-size:11.5px;color:var(--redup);line-height:1.4;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usaha-kanan{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.lencana{
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;
  color:#fff;letter-spacing:.01em;
}
.tandai{
  border:0;background:none;cursor:pointer;font-size:13px;line-height:1;
  color:#cbd5e1;padding:1px;
}
.tandai[aria-pressed="true"]{color:#e11d48}

.kartu-kerangka{
  height:46px;border-radius:9px;margin-bottom:6px;
  background:linear-gradient(90deg,#eef3ef 25%,#f7faf8 37%,#eef3ef 63%);
  background-size:400% 100%;animation:kilau 1.4s ease infinite;
}
@keyframes kilau{0%{background-position:100% 50%}100%{background-position:0 50%}}
.kosong{padding:22px 14px;text-align:center;color:var(--redup);font-size:13px}
.kosong p{margin:0 0 4px}
.kosong strong{color:var(--tinta)}

/* ---------- statistik ---------- */
.statistik{
  position:fixed;right:16px;top:16px;z-index:500;display:flex;gap:2px;
  background:var(--kertas);border:1px solid var(--garis);border-radius:11px;
  box-shadow:var(--bayang);overflow:hidden;
}
.statistik>div{padding:7px 13px;text-align:center;border-right:1px solid var(--garis)}
.statistik>div:last-child{border-right:0}
.statistik strong{display:block;font-size:15px;line-height:1.2;color:var(--hijau);font-variant-numeric:tabular-nums}
.statistik span{font-size:10px;color:var(--redup);letter-spacing:.02em}

/* ---------- marker peta ---------- */
.pin{
  width:26px;height:26px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);
  border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);
  display:grid;place-items:center;
}
.pin>span{transform:rotate(45deg);color:#fff;display:grid;place-items:center}
.leaflet-popup-content{margin:11px 14px;font-size:13px;line-height:1.5;min-width:190px}
.pop-foto-w{position:relative;margin-bottom:8px}
.pop-foto{
  width:100%;max-height:120px;object-fit:cover;border-radius:8px;
  display:block;background:#e8eee9;cursor:zoom-in;
}
.pop-jml{
  position:absolute;right:6px;bottom:6px;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:999px;background:rgba(15,35,25,.74);color:#fff;
  pointer-events:none;
}
.pop-nama{font-weight:700;font-size:14px;display:block;margin-bottom:2px}
.pop-kat{font-size:10.5px;font-weight:700;color:#fff;padding:1px 7px;border-radius:999px;
  display:inline-block;margin-bottom:6px}
.pop-ket{margin:0 0 8px;color:#374151}
.pop-aksi{display:flex;flex-wrap:wrap;gap:6px}
.pop-aksi a{
  font-size:11.5px;text-decoration:none;padding:5px 9px;border-radius:7px;
  border:1px solid var(--garis);color:#0f4c2e;background:#f7faf8;font-weight:600;
}
.pop-aksi a.wa{background:#25d366;border-color:#1eb955;color:#06341c}
.pop-aksi a:hover{filter:brightness(.96)}
.pop-meta{font-size:11px;color:var(--redup);margin:6px 0 0}

.modal{
  position:fixed;inset:0;z-index:3000;background:rgba(12,30,20,.55);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.modal-kotak{
  background:#fff;border-radius:14px;padding:18px;width:min(520px,100%);
  max-height:86vh;overflow-y:auto;box-shadow:0 18px 50px rgba(10,30,20,.32);
}
.modal-kotak h2{margin:0 0 8px;font-size:16px}
.modal-ket{margin:0 0 10px;font-size:12.5px;color:var(--redup);line-height:1.55}
.modal-ket code{background:#eef3ef;padding:1px 5px;border-radius:4px;font-size:11.5px}
#teks-impor{
  width:100%;padding:9px 11px;border:1px solid var(--garis);border-radius:9px;
  font:12.5px/1.6 ui-monospace,Consolas,monospace;resize:vertical;background:#f9fbfa;
}
#teks-impor:focus{outline:2px solid var(--hijau-terang);outline-offset:-1px;background:#fff}
.modal-hasil{font-size:12.5px;margin:9px 0 0;color:var(--redup);min-height:18px}
.modal-hasil.ok{color:#15803d;font-weight:600}
.modal-hasil.err{color:#b42318;font-weight:600}
.modal-aksi{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.tombol-utama{
  border:0;background:var(--hijau);color:#fff;border-radius:8px;
  font:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;cursor:pointer;
}
.tombol-utama:hover{background:#186a42}

/* ---------- notif ---------- */
.notif{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,80px);z-index:2000;margin-left:-60px;
  background:#132a1d;color:#fff;padding:9px 16px;border-radius:9px;font-size:13px;
  opacity:0;transition:.22s;pointer-events:none;max-width:90vw;
}
.notif.tampil{opacity:1;transform:translate(-50%,0)}

/* ---------- ponsel ---------- */
@media (max-width:820px){
  .kolom-kiri{
    top:auto;left:8px;right:8px;bottom:8px;width:auto;gap:8px;
    flex-direction:column;justify-content:flex-end;pointer-events:none;
  }
  .header-panel{padding:10px 12px 9px;width:auto;flex:0 0 auto}
  .daftar-panel{
    height:38vh;width:auto;flex:0 0 auto;
    border-radius:var(--r) var(--r) 12px 12px;
  }
  .merek{margin-bottom:8px}
  .merek-ikon{width:32px;height:32px;font-size:9.5px}
  .merek-teks strong{font-size:14px}
  .tab-kategori{flex-wrap:nowrap;overflow-x:auto}
  .cari input{padding:8px 30px 8px 11px}
  .pil{padding:6px 8px;font-size:12px}
  .daftar-panel.terlipat{height:auto}
  .daftar-panel.terlipat .daftar-isi{display:none}
  .gagang{
    display:block;width:100%;height:16px;border:0;background:none;cursor:pointer;
    position:relative;padding:0;
  }
  .gagang::before{
    content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
    width:38px;height:4px;border-radius:2px;background:#cbd5e1;
  }
  .statistik{right:8px;top:8px;left:8px;justify-content:space-between}
  .statistik>div{flex:1;padding:6px 4px}
  .statistik span{font-size:9.5px}
  .daftar-isi{padding:6px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}