/* =========================================================================
   Jastip Sinjai — Design System (mobile-first)
   Palet: header gradient turquoise/cyan, background light gray, promo
   gradient pink/magenta/orange. Layout dikunci ke lebar HP (bukan desktop).
   ========================================================================= */

:root {
  --cyan-1: #14D9C8;
  --cyan-2: #17B6E8;
  --grad-cyan: linear-gradient(120deg, #14D9C8 0%, #17B6E8 55%, #2D93EE 100%);
  --grad-promo: linear-gradient(120deg, #FF2E8B, #FF5C7A 45%, #FF9A3C);
  --grad-soft: linear-gradient(135deg, #17C9DE, #2D93EE);

  --bg: #F4F6FA;
  --card: #FFFFFF;
  --line: #EBEFF5;
  --ink: #101828;
  --ink-2: #344054;
  --muted: #7B8AA0;

  --green: #16A34A;
  --green-dk: #12813C;
  --green-soft: #E9FBEF;
  --amber: #F59E0B;
  --violet: #7C4DFF;

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --sh-1: 0 4px 14px -8px rgba(16, 24, 40, .18);
  --sh-2: 0 14px 34px -18px rgba(16, 24, 40, .28);
  --sh-3: 0 18px 40px -20px rgba(23, 182, 232, .55);

  --pad: 18px;
  --tab-h: 74px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #E8ECF3;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea, select { -webkit-appearance: none; appearance: none; }
::selection { background: rgba(23, 182, 232, .22); }

/* ------------------------------------------------------------------ shell */

.app {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  overflow-x: hidden;
  padding-bottom: calc(var(--tab-h) + 34px + env(safe-area-inset-bottom));
}

@media (min-width: 520px) {
  body { background: #DDE3EC; }
  .app { box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), 0 30px 70px -40px rgba(16, 24, 40, .5); }
}

.app-plain { padding-bottom: 26px; }

/* ----------------------------------------------------------------- header */

.hdr {
  position: relative;
  background: var(--grad-cyan);
  color: #fff;
  padding: calc(18px + env(safe-area-inset-top)) var(--pad) 30px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
  isolation: isolate;
}

.hdr::before,
.hdr::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}

.hdr::before {
  width: 220px; height: 220px;
  top: -110px; right: -60px;
  background: rgba(255, 255, 255, .16);
}

.hdr::after {
  width: 150px; height: 150px;
  bottom: -90px; left: -40px;
  background: rgba(255, 255, 255, .12);
}

.hdr-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hdr-loc {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}

.hdr-loc .loc-ic {
  width: 38px; height: 38px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .3);
  display: grid; place-items: center;
  flex: 0 0 auto;
}

.hdr-loc .lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .88;
  font-weight: 600;
}

.hdr-loc .val {
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdr-actions { display: flex; gap: 9px; }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  display: grid; place-items: center;
  position: relative;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.icon-btn:active { transform: scale(.94); background: rgba(255, 255, 255, .3); }

.icon-btn .dot {
  position: absolute; top: 9px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF3D71;
  border: 2px solid #17C1DC;
}

.hdr-hello {
  margin: 18px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  opacity: .92;
  /* nama pemilik akun (lihat .hdr-nama) tidak boleh membuat header meluber */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------------
   Nama pemilik akun di beranda, duduk di baris sapaan "Selamat datang, …"
   (permintaan pemilik aplikasi). Ditulis seputih tulisan nama brand di header
   (seluruh header memakai teks putih), hanya dibedakan oleh pil kaca tipis.
   ------------------------------------------------------------------------ */
.hdr-hello .hdr-nama {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  padding: 2px 11px;
  margin-left: 2px;
}

.hdr-title {
  margin: 3px 0 0;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

/* Nama brand sebagai TULISAN BESAR (pengganti logo gambar).
   Dipakai di header beranda (index.php) dan header akun pembeli (profil.php) —
   tulisannya datang dari brand_wordmark() di includes/helpers.php supaya sama
   di semua halaman. */
.hdr-wordmark {
  margin: 10px 0 0;
  font-size: clamp(26px, 8.2vw, 35px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #fff;
  text-shadow: 0 8px 20px rgba(4, 22, 61, .3);
  overflow-wrap: break-word;
}
/* "SINJAI" sebagai pill emas supaya nama kotanya ikut menonjol */
.hdr-wordmark .wm-city {
  display: inline-block;
  margin-left: .08em;
  padding: 0 11px 3px;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFE88A, #F5A800);
  color: #0B2A63;
  font-size: .84em;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: 0 8px 18px rgba(4, 22, 61, .22);
}

/* Kalau admin mengunggah GAMBAR logo (halaman Logo Brand), header beranda
   menampilkan gambar itu menggantikan tulisan brand di atas. */
.hdr-logo { margin: 10px 0 0; font-size: 0; line-height: 0; display: flex; }
.hdr-logo-img {
  width: auto;
  height: 64px;
  display: block;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(4, 22, 61, .28);
}
/* Kotak pratinjau di halaman Logo Brand */
.logo-prev {
  display: grid; place-items: center;
  padding: 16px;
  min-height: 104px;
  border-radius: 20px;
  border: 1px dashed var(--line);
  background: #F7FAFF;
}
.logo-prev .hdr-logo-img { max-height: 96px; }
.logo-prev .brand-mark { font-size: 22px; }
.logo-slot { background: #F7FAFF; color: #93A7C0; }
.logo-slot .avatar-img { object-fit: contain; padding: 4px; }

/* Tulisan brand versi kartu (kartu bawah halaman akun pembeli) */
.brand-mark {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0B2A63;
  overflow-wrap: break-word;
}
.brand-mark .wm-city {
  display: inline-block;
  margin-left: .1em;
  padding: 0 9px 2px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFE88A, #F5A800);
  color: #0B2A63;
  font-size: .86em;
  letter-spacing: 0;
}

.hdr-tag {
  display: flex; align-items: center; gap: 6px;
  margin: 11px 0 0;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  opacity: .95;
}

/* header versi halaman dalam (lebih ringkas, tetap satu bahasa desain) */
.hdr-sm {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) var(--pad) 26px;
}

.hdr-sm .hdr-title { font-size: 20px; margin: 0; }
.hdr-sm .hdr-sub { font-size: 12.5px; opacity: .9; margin: 2px 0 0; font-weight: 600; }
.hdr-sm .hdr-mid { flex: 1; min-width: 0; }

.round-btn {
  width: 40px; height: 40px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 auto;
  transition: transform .18s ease;
}
.round-btn:active { transform: scale(.94); }

/* ---------------------------------------------------------------- search */

.search {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: var(--r-md);
  padding: 13px 15px;
  box-shadow: 0 14px 26px -18px rgba(4, 44, 66, .7);
  color: var(--muted);
}

.search input {
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
}

.search input::placeholder { color: #9AA8BC; font-weight: 500; }
.search .sep { width: 1px; height: 20px; background: var(--line); }
.search .go {
  border: 0; background: var(--grad-soft); color: #fff;
  width: 34px; height: 34px; border-radius: 12px;
  display: grid; place-items: center; cursor: pointer;
}

/* --------------------------------------------------------------- section */

.sec { margin-top: 30px; }

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--pad);
  margin-bottom: 14px;
}

.sec-title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-ic { color: #17B6E8; }

.sec-link {
  font-size: 12.5px;
  font-weight: 800;
  color: #17B6E8;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.pad { padding-left: var(--pad); padding-right: var(--pad); }

/* --------------------------------------------------------------- generic */

.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
}

.card-pad { padding: 18px; }

.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.semi { font-weight: 700; }
.bold { font-weight: 800; }
.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack { display: flex; flex-direction: column; }
.gap-6 { gap: 6px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; } .gap-18 { gap: 18px; }
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px var(--pad) 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }

.pill-open,
.pill-closed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.pill-open {
  background: var(--green);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(22, 163, 74, .9);
}

.pill-open i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #D7FFE4;
}

.pill-closed {
  background: #EEF1F6;
  color: #8795A9;
}

.pill-soft {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800;
  padding: 5px 11px; border-radius: 999px;
  background: #EAF7FE; color: #0E9FC4;
}

.stars { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #B7791F; }
.stars .ic { color: #F5A623; fill: #F5A623; }

/* ------------------------------------------------------------ categories */

.cat {
  flex: 0 0 auto;
  width: 76px;
  text-align: center;
  scroll-snap-align: start;
}

.cat-ic {
  width: 62px; height: 62px;
  margin: 0 auto 8px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  display: grid; place-items: center;
  font-size: 26px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.cat:active .cat-ic { transform: scale(.94); }
.cat.is-on .cat-ic {
  background: var(--grad-soft);
  border-color: transparent;
  box-shadow: var(--sh-3);
}
.cat-lb {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1.25;
}
.cat.is-on .cat-lb { color: #0E9FC4; font-weight: 800; }

/* ---------------------------------------------------------------- promo */

.promo {
  flex: 0 0 80%;
  max-width: 320px;
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 20px;
  color: #fff;
  background: var(--grad-promo);
  box-shadow: 0 20px 34px -20px rgba(255, 46, 139, .8);
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.promo::after {
  content: "";
  position: absolute;
  width: 170px; height: 170px;
  border-radius: 50%;
  right: -60px; top: -70px;
  background: rgba(255, 255, 255, .18);
}

.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: rgba(255, 255, 255, .24);
  border: 1px solid rgba(255, 255, 255, .45);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.promo h3 {
  margin: 13px 0 5px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.18;
  max-width: 85%;
}

.promo p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  opacity: .95;
  max-width: 78%;
}

.promo-emoji {
  position: absolute;
  right: 12px; bottom: 4px;
  font-size: 62px;
  line-height: 1;
  opacity: .95;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18));
}

.dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.dots i {
  width: 6px; height: 6px; border-radius: 999px;
  background: #CBD5E1; transition: width .25s ease, background .25s ease;
}
.dots i.on { width: 18px; background: #17B6E8; }

/* ------------------------------------------------------------- umkm card */

.umkm-card {
  flex: 0 0 74%;
  max-width: 270px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.umkm-card:active { transform: scale(.98); box-shadow: var(--sh-2); }

.umkm-cover {
  position: relative;
  height: 96px;
  display: grid;
  place-items: center;
  font-size: 40px;
}

.umkm-cover .badge-floating {
  position: absolute;
  top: 10px; right: 10px;
}

.umkm-cover .badge-cat {
  position: absolute;
  left: 10px; bottom: -12px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: var(--sh-1);
}

.umkm-body { padding: 20px 14px 15px; }

.umkm-name {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.umkm-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}

.umkm-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 7px;
  min-width: 0;
}
.umkm-line span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umkm-line .ic { flex: 0 0 auto; color: #A9B7C9; }

/* Label jarak asli dari titik peta pembeli ("1,2 km dari lokasimu").
   Dipakai kartu "UMKM Terdekat" (beranda) + baris daftar UMKM (umkm.php). */
.umkm-jarak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(23, 182, 232, .12);
  border: 1px solid rgba(23, 182, 232, .3);
  color: #0E7FA6;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;          /* di baris sempit teks dipangkas, tidak melimpah keluar */
  text-overflow: ellipsis;
}
.umkm-jarak .ic { flex: 0 0 auto; }
.umkm-row .umkm-jarak { margin-top: 0; }

/* Catatan di bawah daftar: tautan kecil ke pengelolaan lokasi antar. */
.ongkir-note a { color: #0E7FA6; font-weight: 800; text-decoration: underline; }
a.ongkir-note { color: #0E7FA6; text-decoration: none; }
a.ongkir-note b { text-decoration: underline; }

/* baris UMKM (halaman daftar UMKM) */
.umkm-row {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 13px;
  box-shadow: var(--sh-1);
  transition: transform .18s ease;
}
.umkm-row:active { transform: scale(.985); }

.umkm-thumb {
  width: 72px; height: 72px;
  flex: 0 0 auto;
  border-radius: 20px;
  display: grid; place-items: center;
  font-size: 32px;
  position: relative;   /* kotak acuan foto (.thumb-img absolut) */
  overflow: hidden;     /* foto tidak pernah meluber keluar kotaknya */
}

.umkm-row .info { flex: 1; min-width: 0; }
.umkm-row .nm {
  font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ----------------------------------------------------------- produk grid */

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 var(--pad);
}

.prod-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.prod-card:active { transform: scale(.98); }

.prod-thumb {
  height: 112px;
  display: grid;
  place-items: center;
  font-size: 42px;
  position: relative;
}

.prod-thumb .tag-promo {
  position: absolute;
  top: 9px; left: 9px;
  background: rgba(255, 255, 255, .95);
  color: #E5377C;
  font-size: 10.5px;
  font-weight: 900;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}

.prod-info {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.prod-name {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prod-umkm {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.prod-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
}

.price { font-size: 15px; font-weight: 900; letter-spacing: -0.03em; }
.price small { font-size: 11px; font-weight: 600; color: var(--muted); }

.add-btn {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 13px;
  background: var(--grad-soft);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 18px -10px rgba(23, 182, 232, .95);
  cursor: pointer;
  transition: transform .16s ease;
}
.add-btn:active { transform: scale(.9); }
.add-btn[disabled] { background: #E4E9F0; color: #9AA8BC; box-shadow: none; }

/* produk baris (halaman detail UMKM) */
.prod-row {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: var(--sh-1);
}

.prod-row .pthumb {
  width: 84px; height: 84px;
  flex: 0 0 auto;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 36px;
  position: relative;
  overflow: hidden;
}

.prod-row .pinfo { flex: 1; min-width: 0; }
.prod-row .pn { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 3px; }
.prod-row .pd {
  font-size: 11.5px; color: var(--muted); font-weight: 600;
  margin: 0 0 7px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* --------------------------------------------------------- stepper/btn */

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #F4F7FB;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px;
}

.stepper button {
  width: 38px; height: 38px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #17B6E8;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform .16s ease;
}
.stepper button:active { transform: scale(.9); }
.stepper button.qty-minus { color: #94A3B8; }
.stepper .qty-val {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

/* ------------------------------------------------------------------------
   Kolom jumlah yang BISA DIKETIK (halaman keranjang saja)
   Permintaan pemilik aplikasi: "menu yang sudah diklik di keranjang bisa
   diketik jumlah barangnya". Markup-nya dibuat cart_stepper_ketik()
   (includes/cart-ui.php); angkanya dikirim saat nilainya berubah/Enter
   (assets/keranjang.js → kirimKolom()).
   Tingginya dibuat sama dengan tombol − / + (38px) supaya barisnya tidak
   berubah tinggi dan tap target-nya tetap enak (uji tap target ≥38px).
   ------------------------------------------------------------------------ */
.stepper-ketik .qty-input {
  width: 44px;
  min-width: 44px;
  height: 38px;
  padding: 0 2px;
  border: 1.5px solid rgba(23, 182, 232, .38);
  border-radius: 10px;
  background: #F7FBFE;
  box-shadow: var(--sh-1);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}
/* panah naik/turun bawaan browser dihilangkan: kolomnya cukup 44px lebar */
.stepper-ketik .qty-input::-webkit-outer-spin-button,
.stepper-ketik .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-ketik .qty-input:focus {
  outline: 2px solid var(--cyan-2);
  outline-offset: 1px;
  background: #fff;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  border-radius: 18px;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.015em;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary {
  background: var(--grad-soft);
  color: #fff;
  box-shadow: 0 18px 30px -16px rgba(23, 182, 232, .95);
}
.btn-block { width: 100%; }
.btn-sm { padding: 12px 18px; font-size: 13.5px; border-radius: 14px; }
.btn-ghost {
  background: #fff;
  color: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.btn-green {
  background: linear-gradient(135deg, #22C55E, #12813C);
  color: #fff;
  box-shadow: 0 18px 30px -16px rgba(22, 163, 74, .9);
}
.btn[disabled] { opacity: .55; box-shadow: none; cursor: not-allowed; }

.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #E5377C; font-size: 12.5px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 5px;
}

/* ------------------------------------------------------------ tabbar */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.tabbar-in {
  pointer-events: auto;
  width: 100%;
  max-width: 480px;
  display: flex;
  gap: 2px;
  padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -22px rgba(16, 24, 40, .55);
}

@media (min-width: 520px) {
  .tabbar-in {
    border-radius: 22px 22px 0 0;
    border: 1px solid var(--line);
    border-bottom: 0;
    padding-bottom: 10px;
  }
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px 0;
  color: #9AA8BC;
  font-size: 10.5px;
  font-weight: 700;
  transition: color .18s ease;
}

.tab-ic {
  position: relative;
  width: 40px; height: 32px;
  border-radius: 13px;
  display: grid; place-items: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.tab.is-active { color: #0E9FC4; font-weight: 800; }
.tab.is-active .tab-ic {
  background: var(--grad-soft);
  color: #fff;
  box-shadow: 0 10px 18px -10px rgba(23, 182, 232, .95);
}
.tab:active .tab-ic { transform: scale(.92); }

.tab-badge {
  position: absolute;
  top: -3px; right: 1px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #FF3D71;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
  display: grid; place-items: center;
  border: 2px solid #fff;
  box-sizing: content-box;
}

/* -------------------------------------------------------- sticky action */

.actionbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tab-h) + 4px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  padding: 26px var(--pad) 12px;
  background: linear-gradient(180deg, rgba(244, 246, 250, 0), rgba(244, 246, 250, .96) 46%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 12px;
}

.actionbar .info { flex: 1; min-width: 0; }
.actionbar .info .lbl { font-size: 11px; color: var(--muted); font-weight: 700; }
.actionbar .info .val { font-size: 17px; font-weight: 900; letter-spacing: -0.03em; }
.actionbar .btn { flex: 0 0 auto; padding-left: 26px; padding-right: 26px; }

/* ---------------------------------------------------------------- list */

.list { display: flex; flex-direction: column; gap: 16px; padding: 0 var(--pad); }

.item-line {
  display: flex;
  gap: 13px;
  align-items: center;
}

.item-thumb {
  width: 62px; height: 62px;
  flex: 0 0 auto;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 28px;
  position: relative;
  overflow: hidden;
}

.item-body { flex: 1; min-width: 0; }
.item-name { font-size: 13.5px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 3px; }

.divider { height: 1px; background: var(--line); margin: 15px 0; }

.sum-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
}
.sum-row + .sum-row { margin-top: 11px; }
.sum-row.total { font-size: 16px; font-weight: 900; color: var(--ink); letter-spacing: -0.02em; }
.sum-row .v { font-weight: 800; }
.sum-row.total .v { font-size: 18px; }

.note {
  display: flex; gap: 10px; align-items: flex-start;
  background: #EAF7FE;
  border: 1px solid #D3EEFA;
  border-radius: var(--r-md);
  padding: 13px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #0B6E8C;
}
.note .ic { flex: 0 0 auto; margin-top: 1px; }

/* -------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: 7px; }
.field label, .field .field-label { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.field .hint { font-size: 11.5px; color: var(--muted); font-weight: 600; }

.input, .textarea, .select {
  width: 100%;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: var(--r-md);
  padding: 14px 15px;
  font-size: 14px;
  font-weight: 600;
  outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus {
  border-color: #17B6E8;
  box-shadow: 0 0 0 4px rgba(23, 182, 232, .14);
}
.input::placeholder, .textarea::placeholder { color: #9AA8BC; font-weight: 500; }

.pays { display: grid; gap: 12px; }

.pay-in {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: var(--r-md);
  padding: 14px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pay input { position: absolute; opacity: 0; pointer-events: none; }
.pay-ic {
  width: 42px; height: 42px; border-radius: 14px;
  background: #F1F6FB; color: #17B6E8;
  display: grid; place-items: center;
  flex: 0 0 auto;
  transition: background .18s ease, color .18s ease;
}
.pay-in b { display: block; font-size: 13.5px; font-weight: 800; }
.pay-in small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.pay input:checked + .pay-in {
  border-color: #17B6E8;
  background: #F2FBFE;
  box-shadow: 0 10px 22px -16px rgba(23, 182, 232, .9);
}
.pay input:checked + .pay-in .pay-ic { background: var(--grad-soft); color: #fff; }

/* -------------------------------------------------------- status/tabs */

.chips { display: flex; gap: 10px; overflow-x: auto; padding: 2px var(--pad) 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-2);
  box-shadow: var(--sh-1);
  transition: transform .16s ease;
}
.chip:active { transform: scale(.96); }
.chip.is-on {
  background: var(--grad-soft);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--sh-3);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 900;
  padding: 6px 11px;
  border-radius: 999px;
  letter-spacing: .01em;
  white-space: nowrap;
}

.order-card { display: block; }
.order-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 14px;
}
.order-code { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .02em; }

/* ------------------------------------------------------------- tracking */

.timeline { display: flex; flex-direction: column; }

.tl {
  display: flex;
  gap: 14px;
  position: relative;
  padding-bottom: 22px;
}
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: "";
  position: absolute;
  left: 17px; top: 36px; bottom: 0;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}
.tl:last-child::before { display: none; }
.tl.is-done::before { background: #B9EBD3; }

.tl-dot {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: grid; place-items: center;
  background: #F1F4F9;
  color: #A9B7C9;
  position: relative;
  z-index: 1;
}
.tl.is-done .tl-dot { background: var(--grad-soft); color: #fff; box-shadow: 0 10px 18px -12px rgba(23, 182, 232, .95); }
.tl.is-now .tl-dot {
  background: var(--grad-soft); color: #fff;
  animation: pulse 2.2s ease-in-out infinite;
}

.tl-body { flex: 1; min-width: 0; padding-top: 2px; }
.tl-title { font-size: 13.5px; font-weight: 800; letter-spacing: -0.02em; }
.tl-time { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.tl:not(.is-done) .tl-title { color: #9AA8BC; }

.courier {
  display: flex; align-items: center; gap: 13px;
}
.courier .av {
  width: 50px; height: 50px; border-radius: 18px;
  background: var(--grad-soft); color: #fff;
  display: grid; place-items: center; font-size: 22px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.courier .nm { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }

.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #F4F8FC;
  border: 1px dashed #C9DDF0;
  border-radius: var(--r-md);
  padding: 14px 15px;
}
.code-box .k { font-size: 11px; font-weight: 700; color: var(--muted); }
.code-box .v { font-size: 16px; font-weight: 900; letter-spacing: .04em; color: #0E9FC4; }

/* -------------------------------------------------------------- profil */

.profil-head { display: flex; align-items: center; gap: 15px; margin-top: 18px; }
.avatar {
  width: 66px; height: 66px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .24);
  border: 1px solid rgba(255, 255, 255, .42);
  display: grid; place-items: center;
  font-size: 30px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.profil-head .nm { font-size: 18px; font-weight: 900; letter-spacing: -0.03em; }
.profil-head .sub { font-size: 12.5px; font-weight: 600; opacity: .92; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: -26px var(--pad) 0;
  position: relative;
  z-index: 2;
}
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 15px 10px;
  text-align: center;
  box-shadow: var(--sh-1);
}
.stat .v { font-size: 17px; font-weight: 900; letter-spacing: -0.03em; }
.stat .k { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 2px; }

.menu { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::marker { content: ""; }
.menu .chev { transition: transform .22s ease; }
details.menu[open] > summary .chev { transform: rotate(90deg); }
.menu-body {
  padding: 0 16px 17px 69px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.65;
}
.menu-body b { color: var(--ink-2); }
.menu-item {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  transition: background .18s ease;
}
.menu-item + .menu-item { border-top: 1px solid var(--line); }
.menu-item:active { background: #F7FAFD; }
.menu-ic {
  width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  background: #EFF7FD; color: #17B6E8;
}
.menu-item .tx { flex: 1; min-width: 0; }
.menu-item .tx b { display: block; font-size: 13.5px; font-weight: 800; }
.menu-item .tx small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.menu-item .chev { color: #C4CFDD; flex: 0 0 auto; }
.menu-item.danger .menu-ic { background: #FEF0F0; color: #E5484D; }
.menu-item.danger .tx b { color: #E5484D; }

/* -------------------------------------------------------- toast/empty */

.toast {
  position: fixed;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top));
  transform: translateX(-50%) translateY(-120%);
  z-index: 90;
  width: calc(100% - 36px);
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 800;
  background: #101828;
  color: #fff;
  box-shadow: 0 20px 34px -20px rgba(16, 24, 40, .9);
  animation: toastIn .32s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
.toast[hidden] { display: none; }
.toast-ok .toast-ic { color: #4ADE80; }
.toast-err { background: #B42318; }
.toast-err .toast-ic { color: #FEE4E2; }

.empty { text-align: center; padding: 46px 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-emoji { font-size: 54px; margin-bottom: 6px; }
.empty h3 { margin: 0; font-size: 16.5px; font-weight: 900; letter-spacing: -0.03em; }
.empty p { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; max-width: 280px; line-height: 1.55; }
.empty .btn { margin-top: 14px; }

/* ------------------------------------------------------- animations */

.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1);
}

.js .rise { opacity: 0; animation: rise .55s cubic-bezier(.2, .85, .3, 1) forwards; }
.js .rise-2 { animation-delay: .06s; }
.js .rise-3 { animation-delay: .12s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-120%); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 182, 232, .5); }
  50% { box-shadow: 0 0 0 8px rgba(23, 182, 232, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

.no-scroll { overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   Panel peran (mitra / driver / admin) + halaman akun
   Ditambahkan di atas design system yang sama — gradient header, card
   rounded, pill, dan jarak lega tetap dipakai supaya terasa satu aplikasi.
   ========================================================================= */

.hdr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.pill-glass {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .34);
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .01em;
  white-space: nowrap;
}

.note-err { background: #FEF1F1; border-color: #F8D4D4; color: #B42318; }
.note-warn { background: #FFF7E8; border-color: #F6E0B4; color: #8A5A05; }

/* ------------------------------------------- driver: foto & kendaraan */

/* foto profil menggantikan inisial di dalam .avatar / .av / .loc-ic.
   Absolut + inset:0 supaya foto SELALU pas di kotaknya: kalau dibiarkan
   width/height:100% di dalam grid place-items:center, tinggi 100% tidak
   punya acuan (baris grid auto) sehingga foto persegi tampil sebesar
   lebarnya dan meluber menutupi teks di bawahnya. */
.avatar-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; display: block;
}

.avatar-xs {
  width: 26px; height: 26px;
  border-radius: 9px;
  font-size: 13px;
  background: #EEF3FA;
  border: 1px solid var(--line);
  color: #5A6C82;
  position: relative;
  overflow: hidden;
}
.avatar-lg {
  width: 76px; height: 76px;
  border-radius: 24px;
  font-size: 30px;
  background: #EEF3FA;
  border: 1px solid var(--line);
  color: #64748B;
  overflow: hidden;
  position: relative;
}

.plate {
  display: inline-block;
  background: #111827;
  color: #fff;
  border-radius: 9px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.plate-sm { font-size: 10.5px; padding: 3px 8px; border-radius: 7px; }

.driver-mini {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.driver-mini-nm { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }

.kdr-line { display: flex; align-items: flex-start; gap: 10px; }
.kdr-ic { flex: 0 0 auto; margin-top: 1px; color: var(--cyan-2); }
.kdr-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kdr-val { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13.5px; font-weight: 800; letter-spacing: -0.02em; }

.alert-warn, .alert-ok {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--r-md);
  padding: 13px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.alert-warn { background: #FFF7E8; border: 1px solid #F6E0B4; color: #8A5A05; }
.alert-ok { background: #E9FBEF; border: 1px solid #CDEBD8; color: #12813C; }
.alert-ic { flex: 0 0 auto; margin-top: 1px; }

.alert-warn-card { border: 1px solid #F6E0B4; background: #FFFBF3; }
.alert-ic-lg {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 14px;
  background: #FEF0D6; color: #B4740A;
  display: grid; place-items: center;
}
.alert-title { margin: 0; font-size: 15px; font-weight: 900; letter-spacing: -0.03em; }

.foto-row { display: flex; align-items: center; gap: 15px; }
.foto-input { display: none; }
.foto-btn { cursor: pointer; margin-bottom: 7px; }

/* Foto asli menggantikan ikon emoji di dalam kotak thumb/cover mana pun
   (.umkm-thumb, .item-thumb, .pthumb, .prod-thumb, .umkm-cover).
   Absolut + inset:0 supaya foto SELALU pas (di-crop) di dalam kotak itu —
   dengan width/height:100% biasa, tinggi 100% tidak punya acuan di dalam
   grid `place-items:center` (barisnya auto), jadi foto persegi tampil
   sebesar lebarnya dan meluber ke bawah menutupi nama/rating/alamat toko.
   Semua kotak di atas wajib `position: relative` sebagai kotak acuan.
   .umkm-cover TIDAK boleh `overflow: hidden` (badge kategori menjuntai
   di bawah kotaknya), makanya foto dibatasi lewat inset, bukan clip. */
.thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; display: block;
}

/* Kotak pilih/ganti foto asli di form mitra & admin */
.foto-thumb {
  width: 84px; height: 84px;
  flex: 0 0 auto;
  border-radius: 22px;
  display: grid; place-items: center;
  font-size: 34px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
}
.check-mini {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: #B42318;
  margin-top: 9px; cursor: pointer;
}
.check-mini input { width: 16px; height: 16px; accent-color: #E5484D; flex: 0 0 auto; }

.input-plate { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.emoji-pick {
  height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  font-size: 19px;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease;
}
.emoji-pick:active { transform: scale(.9); border-color: #17B6E8; }

/* ringkasan peran di panel admin */
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.role-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.role-num { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; }

.roles-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 var(--pad);
}
.role-mini {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: 12px 8px;
  text-align: center;
}
.role-mini .role-badge { font-size: 10px; padding: 4px 8px; }

/* akordeon kecil untuk aksi administratif */
.mini-details { display: inline-block; }
.mini-details > summary { list-style: none; }
.mini-details > summary::-webkit-details-marker { display: none; }
.mini-panel {
  margin-top: 14px;
  padding: 14px;
  background: #F7FAFD;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.mini-details[open] > summary { border-color: #17B6E8; color: #0E9FC4; }

/* halaman masuk / daftar */
.auth-hdr { padding-bottom: 34px; text-align: center; }
.auth-hdr .round-btn { position: absolute; left: var(--pad); top: calc(18px + env(safe-area-inset-top)); }
.auth-art {
  width: 88px; height: 88px;
  margin: 26px auto 0;
  border-radius: 30px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .4);
  display: grid;
  place-items: center;
  font-size: 42px;
  animation: floaty 4.5s ease-in-out infinite;
}
.auth-sub {
  margin: 10px auto 0;
  max-width: 300px;
  font-size: 13px;
  font-weight: 600;
  opacity: .93;
  line-height: 1.55;
}
.auth-wrap { margin-top: -26px; position: relative; z-index: 2; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ------------------------------------------------------- peta & jarak */
.field .req { color: #E5484D; }

.peta-box {
  position: relative;
  z-index: 0;            /* kurung kontrol Leaflet + label di dalam kartu */
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: #E7EEF5;
}
.peta-box-sm { border-radius: var(--r-sm); }
.peta {
  position: relative;      /* stacking context: kontrol Leaflet tidak menembus tabbar */
  z-index: 0;
  width: 100%;
  height: 220px;
  background: #E7EEF5;
}
.peta-box-sm .peta { height: 168px; }
.peta .leaflet-container,
.peta.leaflet-container {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  background: #E7EEF5;
}
.peta .leaflet-control-attribution { font-size: 10.5px; background: rgba(255, 255, 255, .82); }
.peta .leaflet-bar a { color: #0B6E8C; }

.peta-pin-note {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 500;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .95);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 10.5px; font-weight: 800; color: #0B6E8C;
  box-shadow: var(--sh-1);
  pointer-events: none;
}
.peta-acts { display: flex; gap: 10px; }
.peta-acts .btn { flex: 1; }

.peta-mark, .peta-mark-toko { background: none; border: 0; }
.peta-mark-in { font-size: 26px; line-height: 1; text-shadow: 0 4px 10px rgba(16, 24, 40, .35); }
.peta-mark-toko .peta-mark-in {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  font-size: 15px;
  background: #fff;
  border: 2px solid #17B6E8;
  border-radius: 50%;
  box-shadow: var(--sh-1);
}
.peta-gagal { display: grid; place-items: center; }
.peta-fallback {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-align: center; padding: 0 18px;
}

.pill-dist {
  display: inline-flex; align-items: center; gap: 5px;
  background: #EEF4FF; color: #2D6FE0;
  font-size: 11px; font-weight: 800;
  padding: 5px 10px; border-radius: 999px;
  white-space: nowrap;
}
.pill-dist-umkm { background: #F1F5F9; color: #475569; }

.ongkir-note { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 8px; }
.ongkir-note b { color: var(--ink-2); }
.ongkir-loading { font-size: 11px; font-weight: 700; color: #0B6E8C; }

/* ------------------------------------------------------------ kode promo */

/* Baris input kode + tombol "Pakai" di halaman checkout */
.promo-row { display: flex; gap: 10px; align-items: stretch; }
.promo-row .input {
  flex: 1; min-width: 0;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 800;
}
.promo-row .btn { flex: 0 0 auto; white-space: nowrap; }
.promo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#sumDiskon { color: #12813C; }

/* --------------------------------------------------- lokasi antar (Antar ke) */

/* Header beranda: nama lokasi aktif + alamatnya, bisa diketuk untuk ganti */
.hdr-loc-link { color: #fff; border-radius: 16px; }
.hdr-loc-link:active { transform: scale(.985); }
.hdr-loc .loc-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.22;
}
.hdr-loc .loc-tx .lbl { display: block; }
.hdr-loc .loc-tx .val { display: block; font-size: 15px; max-width: 100%; }
.hdr-loc .loc-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.hdr-loc .loc-chev {
  flex: 0 0 auto;
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .26);
  display: grid; place-items: center;
}
.js .hdr-loc .loc-tx.is-new { animation: locPulse .85s ease; }
@keyframes locPulse {
  0% { opacity: .3; transform: translateY(-3px); }
  100% { opacity: 1; transform: none; }
}

/* Daftar lokasi tersimpan */
.loc-item { padding: 16px; }
.loc-item.is-on {
  border: 1px solid rgba(23, 182, 232, .45);
  box-shadow: 0 16px 34px -22px rgba(23, 182, 232, .95), var(--sh-1);
}
.loc-item-top { display: flex; align-items: center; gap: 13px; }
.loc-item-ic {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 15px;
  background: #F1F6FB;
  display: grid; place-items: center;
  font-size: 20px;
}
.loc-item-tx { flex: 1; min-width: 0; }
.loc-item-tx b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; }
.loc-item-tx small {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 600;
  margin-top: 3px;
}
.loc-item-acts { display: flex; gap: 10px; margin-top: 14px; align-items: stretch; }
.loc-item-acts > form { flex: 1; display: flex; }
.loc-item-acts > form > .btn { width: 100%; }
.loc-item-acts > .btn { flex: 1; padding-left: 10px; padding-right: 10px; }
.btn-danger-ghost { background: #FEF0F0; color: #D92D20; border: 1px solid #FADBD8; }
.loc-aktif .peta-box { margin-top: 14px; }

/* Chip nama lokasi cepat (Rumah / Kantor / …) */
.loc-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.loc-chip {
  border: 1px solid var(--line);
  background: #F7FAFD;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.loc-chip:active { transform: scale(.96); }
.loc-chip.is-on {
  background: var(--grad-soft);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 22px -14px rgba(23, 182, 232, .95);
}

/* Ajakan menentukan lokasi di beranda (sebelum lokasi ada) */
.loc-cta { border: 1px solid #D9E9F6; background: linear-gradient(180deg, #FFFFFF, #F5FAFF); }

/* =========================================================================
   Revisi besar: footer "Ikuti Kami", sidebar admin, notifikasi, voucher,
   pembayaran, dan papan statistik. Semua mengikuti design system di atas
   (radius besar, shadow lembut, warna turquoise/cyan).
   ========================================================================= */

/* ------------------------------------------------------------- footer */

.foot {
  margin-top: 36px;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.foot-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.foot-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.foot-btn {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  display: grid;
  place-items: center;
  color: #0E9FC4;
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease;
}

.foot-btn:active { transform: scale(.94); }
.foot-btn:hover { color: #7C4DFF; box-shadow: var(--sh-2); }

.foot-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.foot-link .ic { color: #17B6E8; flex: 0 0 auto; }

.foot-wa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  box-shadow: 0 16px 30px -18px rgba(18, 140, 126, .95);
}

.foot-wa b { display: block; font-size: 13.5px; font-weight: 800; }
.foot-wa small { display: block; font-size: 11.5px; opacity: .95; font-weight: 600; margin-top: 2px; }
.foot-wa .ic { flex: 0 0 auto; }
.foot-wa .chev { margin-left: auto; opacity: .9; }

.foot-brand {
  text-align: center;
  padding: 18px 0 4px;
  border-top: 1px solid var(--line);
}

.foot-brand .brand-mark { font-size: 17px; }

/* --------------------------------------------------- notifikasi (badge & toast) */

.notif-bell { position: relative; }

.notif-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #FF3D71;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  box-sizing: content-box;
}

.notif-toasts {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(430px, calc(100vw - 24px));
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.notif-toast {
  pointer-events: auto;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -22px rgba(16, 24, 40, .55);
  transition: opacity .35s ease, transform .35s ease;
}

.notif-toast.is-out { opacity: 0; transform: translateY(-14px); }
.notif-toast-ic { font-size: 20px; line-height: 1.2; }
.notif-toast-tx { flex: 1; min-width: 0; }
.notif-toast-tx b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -0.02em; }
.notif-toast-tx small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 3px; }

.notif-item {
  display: flex;
  gap: 13px;
  padding: 15px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}

.notif-item.is-baru { border-color: #BFE6F5; background: linear-gradient(180deg, #FFFFFF, #F5FBFF); }
.notif-ic {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #F1F6FB;
  display: grid; place-items: center;
  font-size: 19px;
}
.notif-body { flex: 1; min-width: 0; }
.notif-body b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }
.notif-body p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.5; }
.notif-waktu { font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 7px; display: block; }
.notif-dot-baru { width: 9px; height: 9px; border-radius: 50%; background: #FF3D71; flex: 0 0 auto; margin-top: 6px; }

/* --------------------------------------------------------- sidebar admin */

.app-admin { padding-bottom: calc(var(--tab-h) + 34px + env(safe-area-inset-bottom)); }

.admin-side { display: none; }

@media (min-width: 1000px) {
  .app-admin {
    max-width: 1180px;
    padding-bottom: 30px;
    background: var(--bg);
  }
  .admin-shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 20px 0 0;
  }
  .admin-main { min-width: 0; }
  .admin-side {
    display: block;
    position: sticky;
    top: 20px;
    margin-left: 20px;
    padding: 18px 14px;
    border-radius: var(--r-lg);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
  }
  .app-admin .tabbar { display: none; }
  .app-admin .hdr, .app-admin .hdr-sm { border-radius: var(--r-xl); margin: 0 20px; }
  .app-admin .foot { padding: 0 20px; }
}

.admin-side-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--line);
}

.admin-side-brand b { display: block; font-size: 13.5px; font-weight: 900; letter-spacing: -0.02em; }
.admin-side-brand small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }

.admin-side-logo {
  width: 38px; height: 38px;
  border-radius: 13px;
  background: var(--grad-soft);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 auto;
}

.admin-side-nav { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; }

.admin-side-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  transition: background .16s ease, color .16s ease;
}

.admin-side-item .ic { color: #7B8AA0; flex: 0 0 auto; }
.admin-side-item:hover { background: #F3F8FC; }
.admin-side-item.is-on { background: var(--grad-soft); color: #fff; box-shadow: 0 12px 22px -14px rgba(23, 182, 232, .95); }
.admin-side-item.is-on .ic { color: #fff; }
.admin-side-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #FF3D71;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  font-style: normal;
  text-align: center;
}
.admin-side-item.is-on .admin-side-badge { background: rgba(255, 255, 255, .28); }
.admin-side-foot { border-top: 1px solid var(--line); padding-top: 10px; }

/* ---------------------------------------------------- papan statistik admin */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

.kpi {
  padding: 16px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}

.kpi-ic {
  width: 38px; height: 38px;
  border-radius: 13px;
  display: grid; place-items: center;
  color: #fff;
  margin-bottom: 11px;
}

.kpi b { display: block; font-size: 19px; font-weight: 900; letter-spacing: -0.03em; }
.kpi small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; margin-top: 2px; }

/* --------------------------------------------------------------- grid menu */

.grid-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 700px) {
  .grid-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

.gm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  min-height: 116px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform .16s ease, box-shadow .16s ease;
}

.gm:active { transform: scale(.985); }
.gm:hover { box-shadow: var(--sh-2); }
.gm-ic {
  width: 42px; height: 42px;
  border-radius: 14px;
  background: var(--grad-soft);
  color: #fff;
  display: grid; place-items: center;
}
.gm b { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }
.gm small { font-size: 11.5px; color: var(--muted); font-weight: 600; line-height: 1.45; }
.gm-isi { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }

/* -------------------------------------------------------------- bank & QRIS */

.wa-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 15px;
  background: #F1FBF3;
  border: 1px dashed #A8E3BE;
}

.wa-num {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #12813C;
}

.btn-xs { padding: 8px 13px; font-size: 12px; border-radius: 12px; min-height: 38px; }

.wa-pesan {
  padding: 12px 14px;
  border-radius: 15px;
  background: #F7FAFD;
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.5;
}

.rek-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}

/* Kotak logo bank. WAJIB `position: relative`: logo bank dirender lewat
   thumb_isi() → <img class="thumb-img"> yang `position: absolute; inset: 0`.
   Tanpa kotak acuan di sini, gambar itu mencari induk berposisi lain dan
   melebar mengikuti halaman (pernah kejadian: logo BANK BRI tampil 390×2932 px
   sehingga menutupi nama bank, nomor rekening, dan isi halaman lain). */
.rek-logo {
  width: 52px; height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: #F1F6FB;
  border: 1px solid var(--line);
  position: relative;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: #0E6E96;
  overflow: hidden;
}

/* object-fit contain (bukan cover seperti foto lainnya) supaya logo bank yang
   lebar/persegi tidak terpotong; padding kecil sebagai napas di kotaknya. */
.rek-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.rek-body { flex: 1; min-width: 0; }
.rek-body b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }
.rek-no {
  display: block;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #0E6E96;
  margin-top: 3px;
}
.rek-body small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

.qris-box {
  padding: 16px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  text-align: center;
}

.qris-img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #fff;
}

/* --------------------------------------------------------------- voucher */

.voucher-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, #7C4DFF, #C86DD7 60%, #FF6B9E);
  color: #fff;
  box-shadow: 0 18px 34px -20px rgba(124, 77, 255, .95);
}

.voucher-card h3 { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: -0.03em; }
.voucher-card p { margin: 6px 0 0; font-size: 12px; font-weight: 600; opacity: .95; }
.voucher-card .vc-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.voucher-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, #FFF4D6, #FFE6C7);
  border: 1px solid #FFDDA8;
}

.voucher-hero .vh-ic { font-size: 24px; }
.voucher-hero b { display: block; font-size: 14px; font-weight: 900; letter-spacing: -0.02em; }
.voucher-hero small { display: block; font-size: 11.5px; color: #8A5A12; font-weight: 700; margin-top: 2px; }

.voucher-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px dashed #D8C7FF;
  box-shadow: var(--sh-1);
}

.voucher-nilai {
  width: 74px;
  flex: 0 0 auto;
  text-align: center;
  padding: 10px 6px;
  border-radius: 15px;
  background: linear-gradient(135deg, #7C4DFF, #C86DD7);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.voucher-nilai b { display: block; font-size: 14px; font-weight: 900; }
.voucher-body { flex: 1; min-width: 0; }
.voucher-body b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -0.02em; }
.voucher-body small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 3px; line-height: 1.45; }
.voucher-kode {
  display: inline-block;
  margin-top: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F2ECFF;
  color: #5B32C9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.chip-voucher {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #FFD8A8;
  background: linear-gradient(180deg, #FFFDF6, #FFF6E6);
  cursor: pointer;
  transition: transform .16s ease;
}

.chip-voucher:active { transform: scale(.99); }
.chip-voucher b { display: block; font-size: 13px; font-weight: 800; }
.chip-voucher small { display: block; font-size: 11px; color: #8A5A12; font-weight: 700; margin-top: 2px; }
.chip-voucher .cv-go {
  margin-left: auto;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* -------------------------------------------------------- driver publik */

.driver-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}

.driver-av { position: relative; flex: 0 0 auto; }
.driver-online {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #16A34A;
  border: 2.5px solid #fff;
}
.driver-online.is-off { background: #94A3B8; }

.driver-body { flex: 1; min-width: 0; }
.driver-body b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; }
.driver-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.driver-meta span { display: inline-flex; align-items: center; gap: 5px; }
.driver-id {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #EAF6FB;
  color: #0E6E96;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

.pill-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #E9FBEF;
  color: #12813C;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
}
.pill-online.is-off { background: #F1F5F9; color: #64748B; }
.pill-online i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ----------------------------------------------------------- papan status */

.stp-rail {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
}
.stp-rail::-webkit-scrollbar { display: none; }

.stp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 74px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}

.stp-ic {
  width: 34px; height: 34px;
  border-radius: 12px;
  background: #EEF3F8;
  display: grid; place-items: center;
  font-size: 15px;
}

.stp.is-done { color: var(--ink-2); }
.stp.is-done .stp-ic { background: #E9FBEF; }
.stp.is-now { color: #0E6FC4; font-weight: 800; }
.stp.is-now .stp-ic { background: var(--grad-soft); color: #fff; box-shadow: 0 10px 18px -10px rgba(23, 182, 232, .95); }
.stp.is-batal .stp-ic { background: #FEF0F0; }

/* --------------------------------------------------------------- misc baru */

.kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.kv-row:last-child { border-bottom: 0; }
.kv-row b { font-weight: 800; }
.kv-row .ic { color: #7B8AA0; }

.tag-mini {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: #F1F6FB;
  color: #51617A;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
}
.tag-mini.is-ok { background: #E9FBEF; color: #12813C; }
.tag-mini.is-warn { background: #FEF4E4; color: #9A6212; }
.tag-mini.is-err { background: #FEF0F0; color: #C03030; }
.tag-mini.is-info { background: #EAF6FB; color: #0E6E96; }

.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 16px;
  border-radius: var(--r-lg);
  border: 1.5px dashed #CFE1EF;
  background: #F8FCFF;
  text-align: center;
}
.upload-box .up-ic {
  width: 46px; height: 46px;
  border-radius: 16px;
  background: var(--grad-soft);
  color: #fff;
  display: grid; place-items: center;
}
.upload-box b { font-size: 13.5px; font-weight: 800; }
.upload-box small { font-size: 11.5px; color: var(--muted); font-weight: 600; }

.bukti-img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #F8FAFD;
  border: 1px solid var(--line);
}
.switch-row .sw-tx { flex: 1; min-width: 0; }
.switch-row b { display: block; font-size: 13px; font-weight: 800; }
.switch-row small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.switch-row input[type="checkbox"] {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1.5px solid #C6D4E2;
  background: #fff;
  display: grid; place-items: center;
}
.switch-row input[type="checkbox"]:checked {
  background: var(--grad-soft);
  border-color: transparent;
}
.switch-row input[type="checkbox"]:checked::after {
  content: "";
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.side-note {
  padding: 13px 15px;
  border-radius: 16px;
  background: #F3F8FC;
  border: 1px solid #DDEAF4;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.55;
}

.stat-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 700px) { .stat-mini-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat-mini {
  padding: 13px;
  border-radius: 16px;
  background: #F8FAFD;
  border: 1px solid var(--line);
}
.stat-mini b { display: block; font-size: 16px; font-weight: 900; letter-spacing: -0.02em; }
.stat-mini small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 2px; }

/* =========================================================================
   REVISI BESAR: PWA (splash + tombol install), banner Promo Hari Ini,
   jam operasional otomatis, pendaftaran mitra, dan jam buka di footer.
   ========================================================================= */

/* ---------------------------------------------------- splash (PWA saja) */
/* Hanya tampil kalau aplikasi dibuka dari layar utama (mode standalone);
   di browser biasa .splash tidak pernah muncul supaya tidak menutupi konten. */
.splash { display: none; }
html.is-standalone .splash {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: var(--grad-cyan);
  color: #fff;
  opacity: 1;
  transition: opacity .42s ease;
}
html.is-standalone .splash.is-gone { opacity: 0; }
.splash-in { text-align: center; padding: 0 32px; }
/* Logo brand G&G Jastip (kartu putih) — dibuat tools/buat-aset-pwa.py,
   sama dengan gambar splash iOS/Android supaya tampilannya seragam. */
.splash-logo {
  display: block;
  width: 132px; height: 132px;
  margin: 0 auto 20px;
  border-radius: 30px;
  filter: drop-shadow(0 18px 30px rgba(3, 30, 70, .32));
}
.splash-nama {
  display: block;
  font-size: 21px; font-weight: 900; letter-spacing: 0.4px;
  text-transform: uppercase;
}
/* Semboyan di dalam pil kuning — seperti pita di poster brand. */
.splash-rib {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 15px;
  border-radius: 999px;
  background: #FFC61A;
  color: #06255C;
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgba(3, 30, 70, .55);
}
/* Titik "memuat" — display flex (bukan inline-flex) supaya selalu turun ke baris
   sendiri di bawah pil semboyan, bukan menempel di sampingnya. */
.splash-load { display: flex; justify-content: center; gap: 7px; margin-top: 26px; }
.splash-load i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  animation: splashPulse 1s ease-in-out infinite;
}
.splash-load i:nth-child(2) { animation-delay: .15s; }
.splash-load i:nth-child(3) { animation-delay: .3s; }
@keyframes splashPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* ------------------------------------------------ kartu "Install Aplikasi" */
.install-card { display: flex; flex-direction: column; gap: 14px; }
.install-row { display: flex; gap: 14px; align-items: flex-start; }
.install-ic {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: var(--grad-soft);
  color: #fff;
  box-shadow: var(--sh-3);
}
.install-row b { display: block; font-size: 14.5px; font-weight: 800; }
.install-row small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.5; }
.install-steps { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.install-steps li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--r-sm);
  background: #F5F9FD; border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.5;
}
.install-steps .n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad-soft); color: #fff;
  font-size: 11.5px; font-weight: 900;
}
.btn-install {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px;
  border: 0; border-radius: 999px;
  background: var(--grad-cyan); color: #fff;
  font-size: 15.5px; font-weight: 800;
  box-shadow: var(--sh-3);
  cursor: pointer;
}
.btn-install:active { transform: scale(.98); }
.pill-terpasang {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-dk);
  font-size: 12.5px; font-weight: 800;
}

/* ------------------------- popup "Install aplikasi ke HP" (saat app dibuka) */
/* Muncul otomatis SETIAP aplikasi dibuka di browser biasa (beranda saja) —
   lihat initPopup() di assets/pwa.js. Ditutup lewat tombol ✕, tombol
   "Nanti saja", atau ketuk latar gelap, dan tidak muncul lagi setelah aplikasi
   benar-benar dipasang (mode standalone / event appinstalled).
   Lebar dikunci selebar kolom app (seperti .actionbar) supaya di desktop hanya
   menutupi area aplikasi; z-index di atas tabbar (60) & toast (90). */
.pwa-popup {
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 120;
  display: flex;
  /* layar HP pendek: kartu digulir (margin:auto pada kartu), bukan terpotong
     keluar layar — inilah pola aman untuk flex + overflow */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px var(--pad) calc(24px + env(safe-area-inset-bottom));
}
html.is-standalone .pwa-popup,
.pwa-popup[hidden] { display: none !important; }
.pwa-popup-bd {
  position: absolute; inset: 0;
  background: rgba(8, 24, 48, .55);
  backdrop-filter: blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  animation: popFade .28s ease both;
}
.pwa-popup-card {
  position: relative;
  width: 100%;
  max-width: 396px;
  margin: auto;
  padding: 26px 20px 16px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .92);
  box-shadow: 0 30px 70px -28px rgba(3, 30, 70, .8);
  animation: popNaik .36s cubic-bezier(.2, .9, .3, 1.15) both;
}
.pwa-popup-x {
  position: absolute; top: 10px; right: 10px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #F1F5FA; color: var(--ink-2);
  cursor: pointer;
}
.pwa-popup-x:active { transform: scale(.94); }
.pwa-popup-nanti {
  width: 100%; min-height: 44px;
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 800;
}
@keyframes popFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popNaik {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ banner promo */
.banner {
  position: relative;
  display: block;
  flex: 0 0 86%;
  max-width: 420px;
  height: var(--banner-h, 168px);
  min-height: 112px;
  overflow: hidden;
  border-radius: var(--r-xl);
  scroll-snap-align: center;
  background: var(--grad-cyan);
  box-shadow: var(--sh-2);
  color: #fff;
}
.banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-tx {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 20px 16px;
  background: linear-gradient(to top, rgba(4, 32, 44, .82), rgba(4, 32, 44, .28) 55%, transparent);
  display: block;
}
.banner-tx b { display: block; font-size: 17px; font-weight: 900; letter-spacing: -0.02em; }
.banner-tx small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.banner-tanpa-gambar .banner-tx {
  position: static;
  padding: 22px 20px;
  background: none;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.banner-tanpa-gambar .banner-tx b { font-size: 19px; }
.banner-go {
  position: absolute;
  right: 14px; top: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--cyan-2);
}
.banner-diam { cursor: default; }
.banner-diam .banner-go { display: none; }
.banner.is-active, .banner:active { transform: scale(.985); }

/* kartu banner di panel admin */
.banner-admin {
  display: flex; gap: 13px; align-items: stretch;
}
.banner-mini {
  position: relative;
  flex: 0 0 104px; height: 64px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--grad-soft);
  display: grid; place-items: center;
}
.banner-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-mini span { font-size: 20px; }

/* ----------------------------------------- status buka/tutup & jam buka */
.pill-jam { font-size: 11px; padding: 6px 11px; flex: 0 0 auto; }
.tutup-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 16px;
  border-radius: var(--r-lg);
  background: #FFF1F1;
  border: 1px solid #FFD9DA;
  color: #A3262B;
  box-shadow: var(--sh-1);
}
.tutup-card b { display: block; font-size: 13.5px; font-weight: 900; letter-spacing: -0.02em; }
.tutup-card small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; line-height: 1.5; color: #B44146; }
.tutup-ic {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 14px; background: #FFE0E1; color: #C0323A;
}
.buka-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 16px; border-radius: var(--r-lg);
  background: var(--green-soft); border: 1px solid #CDF3D9; color: var(--green-dk);
}
.buka-card b { display: block; font-size: 13.5px; font-weight: 900; }
.buka-card small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #2C7A4B; }
.prod-row.is-tutup { opacity: .62; }
.btn-tutup {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 16px;
  border: 1px dashed #F0C2C5; border-radius: 999px;
  background: #FFF6F6; color: #B44146;
  font-size: 12.5px; font-weight: 800;
  cursor: not-allowed;
}
.btn-order {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--grad-cyan); color: #fff;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 12px 24px -14px rgba(23, 182, 232, .9);
}
.btn-order:active { transform: scale(.97); }
.umkm-order { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }

/* footer: jam buka selalu di bagian paling bawah */
.foot-jam {
  display: flex; align-items: center; gap: 12px;
  margin: 6px auto 0;
  padding: 15px 16px;
  max-width: 480px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}
.foot-jam b { display: block; font-size: 13.5px; font-weight: 900; letter-spacing: -0.01em; }
.foot-jam small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.foot-jam { justify-content: flex-start; }
.foot-jam > span { flex: 1; min-width: 0; }

/* ------------------------------------------------- pendaftaran mitra */
.form-note {
  padding: 14px 15px; border-radius: var(--r-md);
  background: #F1F8FE; border: 1px solid #D8ECFA;
  font-size: 12.5px; font-weight: 600; color: #20536B; line-height: 1.55;
}
.kendala-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 16px; border-radius: var(--r-lg);
  background: #FFF8EC; border: 1px solid #F7E3C0;
}
.kendala-card b { display: block; font-size: 13.5px; font-weight: 900; color: #8A5A0B; }
.kendala-card small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #9C6A15; }
.stepper-jam { display: flex; align-items: center; gap: 12px; }
.stepper-jam .input { text-align: center; font-weight: 800; }

/* slot pratinjau banner di panel admin (lebih lebar dari foto biasa) */
.foto-thumb.banner-slot { width: 132px; height: 72px; border-radius: 16px; font-size: 24px; }
.foto-thumb.banner-slot .thumb-img { border-radius: 16px; }

/* ------------------------------------------------------------------------
   Nama brand di header beranda & profil: SELURUHNYA PUTIH
   (permintaan pemilik aplikasi: "semua tulisan warna putih, jangan pakai warna
   lain untuk tulisan nama tersebut"). Pill "SINJAI" tetap ada bentuknya, tapi
   kini putih transparan — bukan gradien emas lagi.
   ------------------------------------------------------------------------ */
.hdr .hdr-wordmark,
.hdr .hdr-wordmark .wm-city,
.hdr .hdr-wordmark .wm-city b {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.hdr .hdr-wordmark .wm-city {
  background: rgba(255, 255, 255, .16);
  background-image: none;
  border: 1px solid rgba(255, 255, 255, .42);
  text-shadow: none;
  box-shadow: none;
}
/* kartu brand di bawah halaman: teks gelap di atas kartu putih, tetap satu warna */
.brand-mark .wm-city {
  background: #EEF3F9;
  background-image: none;
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Kartu UMKM di beranda + tombol ORDER SEKARANG (mati saat toko tutup).
   Pembungkus .umkm-rail-item mengambil alih ukuran flex dari .umkm-card supaya
   tombol bisa diletakkan di bawah kartu (tombol tidak boleh di dalam <a>). */
.umkm-rail-item {
  flex: 0 0 74%;
  max-width: 270px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.umkm-rail-item .umkm-card { flex: 1 1 auto; max-width: none; width: 100%; }
.umkm-rail-item .umkm-order { margin-top: 0; }
.umkm-rail-item .btn-order,
.umkm-rail-item .btn-tutup { width: 100%; }
.umkm-tutup-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: #B44146;
}
.hdr-jam {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 11.5px; font-weight: 700;
}
.hdr-jam span { flex: 1; min-width: 0; }
.btn-tutup-mini { min-height: 38px; padding: 0 12px; font-size: 11.5px; }

/* ------------------------------------------------------------------------
   Keranjang "soft" (permintaan pemilik aplikasi: klik tambah belanja tidak
   boleh menggeser halaman / memindahkan tombol).

   - `.cart-ctl` = slot tombol tambah ⇄ stepper pada baris produk. Tingginya
     DIKUNCI 48px (stepper 38 + padding 4×2 + border 1×2) supaya state "tambah"
     (40px) dan state "stepper" menempati kotak yang sama persis — harga dan
     tombol di baris itu tidak pernah bergeser saat di klik.
   - Tombol selalu rata kanan dalam slotnya, jadi "+" tetap di titik yang sama.
   - `.is-pop` = animasi halus saat isi slot diganti assets/keranjang.js.
   ------------------------------------------------------------------------ */
.cart-ctl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  /* Lebar & tinggi DIKUNCI sebesar stepper (38+30+38 + padding 4×2 + border 1×2).
     Jadi harga dan tombol di baris itu menempati kotak yang sama persis, baik saat
     masih berupa tombol "+" maupun sudah menjadi stepper. */
  width: 122px;
  min-height: 48px;
}
/* Form pembungkus tombol dibuat flex supaya tombolnya TIDAK duduk di garis dasar
   teks (dulu selisih 2px antara tombol "+" tunggal dan tombol "+" di stepper). */
.cart-ctl form { display: flex; align-items: center; justify-content: flex-end; }
/* Tombol "+" (keranjang kosong) diletakkan DI TITIK YANG SAMA dengan tombol "+"
   di dalam stepper: 38×38 dengan sela 5px dari tepi kanan slot. */
.cart-ctl .add-btn { width: 38px; height: 38px; margin-right: 5px; border-radius: 12px; }
/* Kartu produk di beranda: tombolnya tidak berubah bentuk (tidak ada stepper),
   jadi tidak perlu dikunci — cukup jaga tap target 40px. */
.cart-ctl-kartu { width: auto; min-width: 40px; min-height: 40px; }
.cart-ctl-kartu .add-btn { width: 40px; height: 40px; margin-right: 0; border-radius: 13px; }
.cart-ctl .stepper { margin: 0; }
.cart-ctl.is-pop { animation: cartPop .24s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes cartPop {
  0%   { transform: scale(.86); opacity: .55; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-ctl.is-pop { animation: none; }
}

/* Atribut `hidden` harus benar-benar menghilangkan elemen ini walau CSS-nya
   memakai display: grid/flex (badge keranjang & ikon toast diperbarui lewat JS). */
.tab-badge[hidden],
.cart-ctl[hidden],
.toast-ic[hidden],
[data-cart-bar-wrap][hidden],
[data-cart-ringkasan][hidden] { display: none !important; }

/* ------------------------------------------------------------------------
   POIN BELANJA PEMBELI (fitur poin — lihat includes/poin.php)

   Dipakai di dua tempat:
   - `.poin-pill`  : badge poin di header BERANDA (index.php, poin_badge_html())
   - `.poin-card`  : kartu poin di halaman AKUN SAYA (profil.php, poin_kartu_pembeli())
   Warna kartu sengaja hangat (kuning–jingga) supaya beda dari kartu UMKM/toko,
   tapi tetap memakai bentuk & shadow yang sama dengan kartu lain.
   ------------------------------------------------------------------------ */
.poin-pill {
  width: auto;
  min-width: 40px;
  padding: 0 11px;
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 900; letter-spacing: -0.02em;
}
.poin-pill .poin-pill-ic { font-size: 13px; line-height: 1; }

.poin-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.poin-head {
  display: flex; align-items: center; gap: 13px;
  padding: 16px;
  background: linear-gradient(135deg, #FFB020, #FF7A45);
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.poin-head::-webkit-details-marker { display: none; }
.poin-head::marker { content: ""; }
.poin-ic {
  width: 42px; height: 42px; border-radius: 14px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .38);
  display: grid; place-items: center;
  font-size: 20px;
  flex: 0 0 auto;
}
.poin-tx { flex: 1; min-width: 0; }
.poin-lbl {
  display: block;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  opacity: .94;
}
.poin-val { display: block; font-size: 20px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.25; }
.poin-sub { display: block; font-size: 11.5px; font-weight: 600; opacity: .96; margin-top: 2px; }
.poin-chev { flex: 0 0 auto; opacity: .95; transition: transform .22s ease; }
details.poin-card[open] > .poin-head .poin-chev { transform: rotate(180deg); }

.poin-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.poin-progress { background: #FFF8EC; border: 1px solid #F7E3C0; border-radius: 16px; padding: 13px; }
.poin-progress-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; font-weight: 700; color: #8A5A0B;
}
.poin-progress-top .is-siap { color: #0E7A4F; font-weight: 900; }
.poin-bar {
  height: 9px; border-radius: 999px;
  background: rgba(255, 176, 32, .26);
  margin: 9px 0 7px;
  overflow: hidden;
}
.poin-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FFB020, #FF7A45); }
.poin-progress-sub { font-size: 11px; font-weight: 700; color: #9C6A15; }

.poin-note {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.6;
}
.poin-note svg { flex: 0 0 auto; margin-top: 1px; color: #E8A317; }

.poin-hangus {
  display: flex; align-items: flex-start; gap: 9px;
  background: #FEF1F1; border: 1px solid #F8D4D4; color: #B42318;
  border-radius: 14px; padding: 11px 13px;
  font-size: 11.5px; font-weight: 700; line-height: 1.55;
}
.poin-hangus svg { flex: 0 0 auto; margin-top: 1px; }

.poin-sub-judul {
  font-size: 12px; font-weight: 900; color: var(--ink-2);
  letter-spacing: -0.01em;
  margin-bottom: -6px;
}

.poin-hadiah { display: flex; flex-direction: column; gap: 12px; }
.poin-hadiah-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px;
  border: 1px solid var(--line); border-radius: 16px;
  background: #FBFDFF;
}
.poin-hadiah-row.is-bisa { border-color: #BBE7D3; background: #F4FCF8; }
.poin-hadiah-ic {
  width: 38px; height: 38px; border-radius: 13px;
  background: #FFF3E0; color: #B4690E;
  display: grid; place-items: center; font-size: 18px;
  flex: 0 0 auto;
}
.poin-hadiah-tx { flex: 1; min-width: 0; }
.poin-hadiah-tx b { display: block; font-size: 13px; font-weight: 800; }
.poin-hadiah-tx small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.poin-hadiah-aksi {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.poin-hadiah-aksi form { display: flex; }
.poin-hadiah-poin { font-size: 12px; font-weight: 900; color: #B4690E; }
.poin-kurang { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.poin-kosong { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.6; }

.poin-riwayat { display: flex; flex-direction: column; }
.poin-riw-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.poin-riw-row:first-child { border-top: 0; }
.poin-riw-ic {
  width: 32px; height: 32px; border-radius: 11px;
  background: #FFF3E0; display: grid; place-items: center;
  font-size: 15px; flex: 0 0 auto;
}
.poin-riw-ic.is-keluar { background: #EEF2FF; }
.poin-riw-tx { flex: 1; min-width: 0; }
.poin-riw-tx b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.poin-riw-tx small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.poin-riw-tx .poin-hangus-teks { color: #B42318; }
.poin-riw-poin { flex: 0 0 auto; font-size: 13px; font-weight: 900; color: #0E7A4F; }
.poin-riw-poin.is-keluar { color: #B42318; }

/* Daftar hadiah di admin-poin.php: hadiah nonaktif tetap terlihat, hanya diredupkan */
.card.is-nonaktif { opacity: .7; }