/*
 * Peta wisata Bali (/peta-bali). Semua selector berawalan .bali-map agar tidak bocor ke halaman lain.
 * Warna dan font mengikuti situs: primary #1c64f2, teks #1c1c1c, font Poppins (didefinisikan di app.css).
 * Situs belum punya dark mode, jadi di sini juga tidak ada.
 */
.bali-map {
  --bm-sea: #d3e9f2; --bm-sea-shallow: #e4f1f7;
  --bm-ink: #1c1c1c; --bm-ink-2: #6b7280; --bm-paper: #ffffff; --bm-paper-2: #f3f4f6; --bm-line: #e5e7eb;
  --bm-btn: #1c64f2; --bm-btn-fg: #ffffff; --bm-focus: #1e429f;
  --bm-land-a: #f3e6c4; --bm-land-b: #d7e6c6; --bm-land-c: #f1d6bd; --bm-land-d: #e4e2b9;
  --bm-land-stroke: #ffffff; --bm-label-halo: rgba(255, 255, 255, .85);
  --bm-c-pantai: #0891b2; --bm-c-alam: #16a34a; --bm-c-pura_budaya: #d97706;
  --bm-c-kuliner: #dc2626; --bm-c-hiburan: #9333ea; --bm-c-other: #4b5563;
  --bm-pin-glyph: #ffffff;
  --bm-shadow: 0 6px 24px rgba(28, 28, 28, .14), 0 1px 3px rgba(28, 28, 28, .1);
  --bm-top-h: 76px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: var(--bm-h, calc(100vh - 140px));
  min-height: 520px;
  background: var(--bm-sea);
  color: var(--bm-ink);
  font: 14px/1.45 'Poppins-Regular', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bali-map *, .bali-map *::before, .bali-map *::after { box-sizing: border-box; }
.bali-map button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.bali-map a { color: inherit; }
.bali-map :focus-visible { outline: 2px solid var(--bm-focus); outline-offset: 2px; }
.bali-map [hidden] { display: none !important; }
.bali-map h1, .bali-map h2, .bali-map h3, .bali-map p, .bali-map ul { margin: 0; }

/* ---------- peta ---------- */
.bali-map .bm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--bm-sea); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.bali-map .bm-svg.dragging { cursor: grabbing; }
.bali-map .halo { fill: var(--bm-sea-shallow); stroke: var(--bm-sea-shallow); stroke-width: 26; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bali-map .region { stroke: var(--bm-land-stroke); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .25s, filter .2s; }
.bali-map .region.t-a { fill: var(--bm-land-a); } .bali-map .region.t-b { fill: var(--bm-land-b); }
.bali-map .region.t-c { fill: var(--bm-land-c); } .bali-map .region.t-d { fill: var(--bm-land-d); }
.bali-map .region:hover { filter: brightness(1.05); }
.bali-map .region:focus, .bali-map .region:focus-visible { outline: none; stroke: var(--bm-focus); stroke-width: 3; }
.bali-map .has-sel .region:not(.sel) { opacity: .55; }
.bali-map .region.sel { stroke: var(--bm-ink); stroke-width: 2.4; }
.bali-map .rlabel { font-family: 'Poppins-Bold', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; text-anchor: middle; fill: var(--bm-ink); opacity: .6; pointer-events: none; paint-order: stroke; stroke: var(--bm-label-halo); stroke-linejoin: round; }
.bali-map .rlabel.sel { opacity: 1; }

.bali-map .pin { cursor: pointer; }
.bali-map .pin:focus, .bali-map .pin:focus-visible { outline: none; }
.bali-map .pin .pb { transition: transform .18s ease; transform-origin: 0 0; }
.bali-map .pin:hover .pb, .bali-map .pin:focus-visible .pb { transform: scale(1.18); }
.bali-map .pin.sel .pb { transform: scale(1.32); }
.bali-map .pin .pc { stroke: var(--bm-paper); stroke-width: 2.5; fill: var(--bm-c-other); }
.bali-map .pin.cat-pantai .pc { fill: var(--bm-c-pantai); } .bali-map .pin.cat-alam .pc { fill: var(--bm-c-alam); }
.bali-map .pin.cat-pura_budaya .pc { fill: var(--bm-c-pura_budaya); } .bali-map .pin.cat-kuliner .pc { fill: var(--bm-c-kuliner); }
.bali-map .pin.cat-hiburan .pc { fill: var(--bm-c-hiburan); }
.bali-map .pin .gl { fill: var(--bm-pin-glyph); stroke: none; }
.bali-map .pin .gw { fill: none; stroke: var(--bm-pin-glyph); stroke-width: 1.8; stroke-linecap: round; }
.bali-map .pin .ring { fill: none; stroke: var(--bm-ink); stroke-width: 2; opacity: 0; transition: opacity .15s; }
.bali-map .pin.sel .ring, .bali-map .pin:focus-visible .ring { opacity: 1; }
.bali-map .pin:focus-visible .ring { stroke: var(--bm-focus); }
.bali-map .pin .tripdot { fill: var(--bm-ink); stroke: var(--bm-paper); stroke-width: 2; display: none; }
.bali-map .pin.intrip .tripdot { display: block; }
.bali-map .pin .tripchk { fill: none; stroke: var(--bm-paper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: none; }
.bali-map .pin.intrip .tripchk { display: block; }
.bali-map .pin .pl { font: 12px 'Poppins-SemiBold', system-ui, sans-serif; fill: var(--bm-ink); paint-order: stroke; stroke: var(--bm-paper); stroke-width: 4px; stroke-linejoin: round; opacity: 0; pointer-events: none; transition: opacity .15s; }
.bali-map .pin:hover .pl, .bali-map .pin:focus-visible .pl, .bali-map .pin.sel .pl { opacity: 1; }
.bali-map .pin.dim { opacity: .4; }
.bali-map .pin.dim:hover, .bali-map .pin.dim:focus-visible { opacity: 1; }

/* garis itinerary: tebal tetap saat zoom, tidak menangkap klik */
.bali-map .g-route { pointer-events: none; }
.bali-map .route { fill: none; stroke: var(--bm-btn); stroke-width: 3; stroke-dasharray: 9 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .85; pointer-events: none; }

/* ---------- UI melayang ---------- */
.bali-map .pill { background: var(--bm-paper); border-radius: 999px; box-shadow: var(--bm-shadow); }
.bali-map .bm-top { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; pointer-events: none; z-index: 3; }
.bali-map .bm-top > * { pointer-events: auto; }
.bali-map .bm-brand { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; min-width: 0; }
.bali-map .bm-mark { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bm-btn); color: var(--bm-btn-fg); display: grid; place-items: center; }
.bali-map .bm-brand h1 { font: 15px/1.15 'Poppins-Bold', system-ui, sans-serif; white-space: nowrap; }
.bali-map .bm-brand p { margin-top: 1px; font-size: 11.5px; color: var(--bm-ink-2); white-space: nowrap; }
.bali-map .bm-cats { display: flex; gap: 2px; padding: 4px; order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
.bali-map .bm-cats::-webkit-scrollbar { display: none; }
.bali-map .cat-btn { flex: none; display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-family: 'Poppins-Medium', system-ui, sans-serif; white-space: nowrap; color: var(--bm-ink-2); transition: background .15s, color .15s; }
.bali-map .cat-btn:hover { background: var(--bm-paper-2); color: var(--bm-ink); }
.bali-map .cat-btn[aria-pressed="true"] { background: var(--bm-btn); color: var(--bm-btn-fg); }
.bali-map .cat-btn svg { width: 12px; height: 12px; flex: none; }
.bali-map .cat-btn.cat-pantai svg { color: var(--bm-c-pantai); } .bali-map .cat-btn.cat-alam svg { color: var(--bm-c-alam); }
.bali-map .cat-btn.cat-pura_budaya svg { color: var(--bm-c-pura_budaya); } .bali-map .cat-btn.cat-kuliner svg { color: var(--bm-c-kuliner); }
.bali-map .cat-btn.cat-hiburan svg { color: var(--bm-c-hiburan); } .bali-map .cat-btn.cat-other svg { color: var(--bm-c-other); }
.bali-map .cat-btn[aria-pressed="true"] svg { color: inherit; }
.bali-map .bm-tripbtn { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; font-family: 'Poppins-SemiBold', system-ui, sans-serif; white-space: nowrap; }
.bali-map .bm-tripbtn[aria-pressed="true"] { background: var(--bm-btn); color: var(--bm-btn-fg); }
.bali-map .bm-tripbtn .n { min-width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--bm-paper-2); color: var(--bm-ink); font-size: 13px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.bali-map .bm-tripbtn[aria-pressed="true"] .n { background: var(--bm-btn-fg); color: var(--bm-btn); }
@media (max-width: 599px) { .bali-map .bm-brand p { display: none; } }
@media (min-width: 900px) {
  .bali-map .bm-top { left: 16px; right: 16px; top: 16px; flex-wrap: nowrap; }
  .bali-map .bm-cats { order: 0; flex: 0 1 auto; max-width: calc(100% - 520px); }
}

.bali-map .bm-chips { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 6px; z-index: 3; }
.bali-map .chiprow { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.bali-map .chiprow::-webkit-scrollbar { display: none; }
.bali-map .chip { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--bm-line); font-family: 'Poppins-Medium', system-ui, sans-serif; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.bali-map .chip:hover { background: var(--bm-paper-2); }
.bali-map .chip[aria-pressed="true"] { background: var(--bm-btn); color: var(--bm-btn-fg); border-color: var(--bm-btn); }
.bali-map .chip .cn { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.bali-map .chip.zero:not([aria-pressed="true"]) { opacity: .6; }
.bali-map .bm-next { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bm-line); display: grid; place-items: center; }
.bali-map .bm-next:hover { background: var(--bm-paper-2); }

.bali-map .bm-tools { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; flex-direction: column; background: var(--bm-paper); border-radius: 26px; box-shadow: var(--bm-shadow); overflow: hidden; }
.bali-map .bm-tools button { width: 46px; height: 44px; display: grid; place-items: center; }
.bali-map .bm-tools button + button { border-top: 1px solid var(--bm-line); }
.bali-map .bm-tools button:hover { background: var(--bm-paper-2); }
.bali-map .bm-scale { position: absolute; right: 16px; bottom: 176px; z-index: 3; display: none; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; text-align: right; max-width: 200px; pointer-events: none; }
.bali-map .bm-scale .bar { height: 6px; border: 2px solid var(--bm-ink); border-top: 0; opacity: .8; }
.bali-map .bm-scale .sl { font-variant-numeric: tabular-nums; font-family: 'Poppins-SemiBold', system-ui, sans-serif; text-shadow: 0 0 4px var(--bm-label-halo), 0 0 4px var(--bm-label-halo); }
@media (min-width: 900px) {
  .bali-map .bm-chips { left: 16px; right: 80px; bottom: 16px; }
  .bali-map .bm-tools { right: 16px; bottom: 16px; }
  .bali-map .bm-scale { display: flex; }
}
@media (max-width: 899px) {
  .bali-map .bm-tools { bottom: 76px; }
  .bali-map.has-panel .bm-tools { display: none; }
}

/* status memuat / gagal / kosong */
.bali-map .bm-status { position: absolute; z-index: 5; left: 50%; top: calc(var(--bm-top-h) + 12px); transform: translateX(-50%); max-width: calc(100% - 24px); display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 18px; font-size: 13px; }
.bali-map .bm-status .spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bm-line); border-top-color: var(--bm-btn); animation: bm-spin .8s linear infinite; }
.bali-map .bm-status.err { padding-right: 9px; }
.bali-map .bm-status .msg { overflow-wrap: anywhere; }
@keyframes bm-spin { to { transform: rotate(360deg); } }
.bali-map .bm-hint { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(28, 28, 28, .82); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 13px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.bali-map .bm-hint.show { opacity: 1; }

/* ---------- panel ---------- */
.bali-map .bm-panel { position: absolute; z-index: 4; left: 16px; top: calc(var(--bm-top-h) + 8px); width: 344px; max-height: calc(100% - var(--bm-top-h) - 8px - 84px); display: flex; flex-direction: column; background: var(--bm-paper); border-radius: 22px; box-shadow: var(--bm-shadow); overflow: hidden; }
@media (max-width: 899px) {
  .bali-map .bm-panel { left: 12px; right: 12px; width: auto; top: auto; bottom: 72px; max-height: min(52%, 460px); }
}
.bali-map .ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 12px 10px 18px; }
.bali-map .ph .eb { margin: 0 0 2px; font-size: 11px; font-family: 'Poppins-SemiBold', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--bm-ink-2); }
.bali-map .ph h2 { font: 21px/1.2 'Poppins-Bold', system-ui, sans-serif; overflow-wrap: anywhere; }
.bali-map .ph .sub { margin-top: 4px; color: var(--bm-ink-2); }
.bali-map .ib { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--bm-ink-2); }
.bali-map .ib:hover { background: var(--bm-paper-2); color: var(--bm-ink); }
.bali-map .pbody { overflow: auto; padding: 0 18px 18px; min-height: 0; }
.bali-map .plist { list-style: none; padding: 0 8px 12px; overflow: auto; min-height: 0; }
.bali-map .plist li + li { margin-top: 2px; }
.bali-map .row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 14px; text-align: left; }
.bali-map .row:hover, .bali-map .row.on { background: var(--bm-paper-2); }
.bali-map .row .dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--bm-pin-glyph); background: var(--bm-c-other); }
.bali-map .row .dot svg { width: 14px; height: 14px; }
.bali-map .dot.cat-pantai { background: var(--bm-c-pantai); } .bali-map .dot.cat-alam { background: var(--bm-c-alam); }
.bali-map .dot.cat-pura_budaya { background: var(--bm-c-pura_budaya); } .bali-map .dot.cat-kuliner { background: var(--bm-c-kuliner); }
.bali-map .dot.cat-hiburan { background: var(--bm-c-hiburan); }
.bali-map .row .tx { flex: 1; min-width: 0; }
.bali-map .row .nm { display: block; font-family: 'Poppins-SemiBold', system-ui, sans-serif; overflow-wrap: anywhere; }
.bali-map .row .ct { display: block; font-size: 12px; color: var(--bm-ink-2); }
.bali-map .row .go { flex: none; color: var(--bm-ink-2); }
.bali-map .badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.bali-map .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-family: 'Poppins-SemiBold', system-ui, sans-serif; border: 1px solid var(--bm-line); }
.bali-map .badge i { width: 8px; height: 8px; border-radius: 50%; display: block; background: var(--bm-c-other); }
.bali-map .badge.cat-pantai i { background: var(--bm-c-pantai); } .bali-map .badge.cat-alam i { background: var(--bm-c-alam); }
.bali-map .badge.cat-pura_budaya i { background: var(--bm-c-pura_budaya); } .bali-map .badge.cat-kuliner i { background: var(--bm-c-kuliner); }
.bali-map .badge.cat-hiburan i { background: var(--bm-c-hiburan); }
.bali-map .pbody p { margin: 0 0 12px; max-width: 62ch; overflow-wrap: anywhere; }
.bali-map .tip { padding: 11px 14px; border-radius: 14px; background: var(--bm-paper-2); overflow-wrap: anywhere; }
.bali-map .tip b { display: block; font-size: 11px; font-family: 'Poppins-SemiBold', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--bm-ink-2); margin-bottom: 2px; font-weight: normal; }
.bali-map .acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.bali-map .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-family: 'Poppins-SemiBold', system-ui, sans-serif; text-decoration: none; border: 1px solid var(--bm-line); background: var(--bm-paper); }
.bali-map .btn:hover { background: var(--bm-paper-2); }
.bali-map .btn.pri { background: var(--bm-btn); color: var(--bm-btn-fg); border-color: var(--bm-btn); }
.bali-map .btn.pri:hover { background: var(--bm-focus); border-color: var(--bm-focus); }
.bali-map .note { font-size: 12px; color: var(--bm-ink-2); }
.bali-map .grp { margin: 0 0 14px; }
.bali-map .grp h3 { margin: 0 0 4px; font: 12px 'Poppins-Bold', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--bm-ink-2); }
.bali-map .grp .plist { padding: 0; margin: 0 -8px; }
.bali-map .grp li { display: flex; align-items: center; gap: 2px; }
.bali-map .grp li .row { padding: 7px 10px; }
.bali-map .empty { padding: 4px 0; color: var(--bm-ink-2); }
.bali-map textarea.copybox { width: 100%; height: 120px; margin-top: 8px; border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-paper-2); color: var(--bm-ink); padding: 10px; font: 12px/1.5 'Poppins-Regular', system-ui, sans-serif; resize: none; }
/* itinerary berurutan */
.bali-map .trip-order { padding: 0; margin: 0 -8px 8px; }
.bali-map .trip-order li + li { margin-top: 0; }
.bali-map .tripitem { display: flex; align-items: center; gap: 2px; }
.bali-map .tripitem .row { padding: 7px 8px; }
.bali-map .tripitem .ord { flex: none; width: 22px; height: 22px; margin-left: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--bm-btn); color: var(--bm-btn-fg); font-size: 11px; font-family: 'Poppins-SemiBold', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.bali-map .tripitem .ib { width: 32px; height: 32px; }
.bali-map .tripitem .go { display: none; }
.bali-map .ib[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.bali-map .leg { margin: 0 0 0 17px; padding: 3px 0 3px 18px; border-left: 2px dashed var(--bm-line); font-size: 12px; color: var(--bm-ink-2); font-variant-numeric: tabular-nums; }
.bali-map .tripsum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; margin: 0 0 6px; border-radius: 14px; background: var(--bm-paper-2); }
.bali-map .tripsum b { font-family: 'Poppins-Bold', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.bali-map .note.warn { margin-top: 8px; color: #b45309; }
/* ---------- popup preview destinasi ---------- */
.bali-map .bm-pop { --pp-c: var(--bm-c-other); position: absolute; z-index: 6; left: 0; top: 0; width: 320px; transform: translate(var(--pp-x, 0px), var(--pp-y, 0px)); filter: drop-shadow(0 6px 16px rgba(28, 28, 28, .2)) drop-shadow(0 1px 2px rgba(28, 28, 28, .14)); outline: none; }
.bali-map .bm-pop.cat-pantai { --pp-c: var(--bm-c-pantai); } .bali-map .bm-pop.cat-alam { --pp-c: var(--bm-c-alam); }
.bali-map .bm-pop.cat-pura_budaya { --pp-c: var(--bm-c-pura_budaya); } .bali-map .bm-pop.cat-kuliner { --pp-c: var(--bm-c-kuliner); }
.bali-map .bm-pop.cat-hiburan { --pp-c: var(--bm-c-hiburan); }
.bali-map .pp-in { position: relative; display: flex; flex-direction: column; max-height: var(--pp-max, none); background: var(--bm-paper); border-radius: 18px; overflow: hidden; }
/* kotak foto berasio tetap: tidak ada layout shift. Placeholder berwarna kategori selalu ada di bawah gambar. */
.bali-map .pp-ph { position: relative; flex: none; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 62%), var(--pp-c); }
.bali-map .pp-fb svg { display: block; width: 44px; height: 44px; color: #fff; opacity: .92; }
.bali-map .pp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
.bali-map .pp-ph img.ok { opacity: 1; }
.bali-map .pp-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; background: rgba(255, 255, 255, .94); color: var(--bm-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .28); }
.bali-map .pp-x:hover { background: #fff; }
.bali-map .pp-b { flex: 0 1 auto; min-height: 0; overflow: auto; padding: 12px 14px 4px; }
.bali-map .pp-f { flex: none; padding: 4px 14px 13px; }
.bali-map .pp-b .badges { gap: 6px; margin: 0 0 7px; }
.bali-map .pp-b .badge { padding: 2px 9px; font-size: 11.5px; }
.bali-map .pp-t { font: 16px/1.3 'Poppins-Bold', system-ui, sans-serif; margin: 0 0 4px; overflow-wrap: anywhere; }
.bali-map .pp-d { margin: 0 0 6px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.bali-map .pp-tip { margin: 0 0 6px; font-size: 12px; color: var(--bm-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bali-map .pp-tip b { font-weight: normal; font-family: 'Poppins-SemiBold', system-ui, sans-serif; }
.bali-map .bm-pop.no-tip .pp-tip { display: none; }
.bali-map .pp-a { display: flex; flex-wrap: wrap; gap: 8px; }
.bali-map .pp-a .btn { padding: 8px 12px; gap: 6px; font-size: 13px; white-space: nowrap; }
.bali-map .pp-a .btn.pri { flex: 1 1 auto; }
.bali-map .pp-m { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12px; color: var(--bm-btn); text-decoration: underline; text-underline-offset: 2px; }
.bali-map .pp-arrow { display: none; position: absolute; left: var(--pp-ax, 50%); width: 20px; height: 9px; margin-left: -10px; background: var(--bm-paper); }
.bali-map .bm-pop[data-side="above"] .pp-arrow { display: block; bottom: -9px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bali-map .bm-pop[data-side="below"] .pp-arrow { display: block; top: -9px; clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.bali-map .bm-pop.far .pp-arrow { display: none; }
/* laporan masalah: form inline menggantikan isi pratinjau; foto disembunyikan supaya popup tetap ringkas */
.bali-map .pp-rp { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; color: var(--bm-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.bali-map .pp-rp:hover { color: var(--bm-ink); }
.bali-map .pp-f { display: flex; flex-direction: column; align-items: flex-start; }
.bali-map .pp-a { align-self: stretch; }
.bali-map .bm-pop.reporting .pp-ph, .bali-map .bm-pop.reporting .pp-b, .bali-map .bm-pop.reporting .pp-f { display: none; }
.bali-map .pp-r { position: relative; flex: 0 1 auto; min-height: 0; overflow: auto; padding: 14px 14px 14px; }
.bali-map .pp-rt { margin: 0; padding-right: 36px; font: 15px/1.3 'Poppins-Bold', system-ui, sans-serif; }
.bali-map .pp-rs { margin: 2px 0 10px; padding-right: 36px; font-size: 12px; color: var(--bm-ink-2); overflow-wrap: anywhere; }
.bali-map .pp-form label { display: block; margin: 10px 0 4px; font-size: 12px; font-family: 'Poppins-SemiBold', system-ui, sans-serif; }
.bali-map .pp-form select, .bali-map .pp-form textarea { display: block; width: 100%; border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-paper); color: var(--bm-ink); padding: 9px 11px; font: 13px/1.4 'Poppins-Regular', system-ui, sans-serif; }
.bali-map .pp-form textarea { resize: none; }
.bali-map .pp-cnt { display: block; margin-top: 2px; text-align: right; font-size: 11px; color: var(--bm-ink-2); font-variant-numeric: tabular-nums; }
.bali-map .pp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bali-map .pp-err { margin-top: 8px; padding: 8px 11px; border-radius: 12px; background: #fef2f2; color: #b91c1c; font-size: 12.5px; overflow-wrap: anywhere; }
.bali-map .pp-ra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bali-map .pp-ra .btn { padding: 8px 14px; font-size: 13px; }
.bali-map .pp-ra .btn[disabled] { opacity: .65; cursor: default; }
.bali-map .pp-ok { padding: 18px 0 4px; outline: none; }
.bali-map .pp-ok p { margin: 0 0 12px; padding-right: 30px; font-size: 13.5px; }
@media (max-width: 899px) {
  /* bottom sheet di atas chip wilayah; panel kiri dan tombol zoom disembunyikan selama popup terbuka */
  .bali-map .bm-pop { left: 12px; right: 12px; top: auto; bottom: 78px; width: auto; transform: none; }
  .bali-map .pp-in { max-height: min(60vh, calc(var(--bm-h, 100vh) - var(--bm-top-h) - 100px)); }
  .bali-map .pp-ph { aspect-ratio: 5 / 2; }
  .bali-map .bm-pop .pp-arrow { display: none !important; }
  .bali-map.has-pop .bm-panel, .bali-map.has-pop .bm-tools { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bali-map * { transition: none !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* fallback tanpa JavaScript: daftar server-side di bawah peta */
.bali-map-nojs { max-width: 1280px; margin: 0 auto; padding: 24px 16px; font-family: 'Poppins-Regular', system-ui, sans-serif; }
.bali-map-nojs h2 { font: 20px 'Poppins-Bold', system-ui, sans-serif; margin: 0 0 12px; }
.bali-map-nojs h3 { font: 15px 'Poppins-SemiBold', system-ui, sans-serif; margin: 16px 0 4px; }
.bali-map-nojs ul { margin: 0; padding-left: 20px; }
.bali-map-nojs a { color: #1c64f2; }