/* Most Maps by Rusenas — styles for the map container, tiles, markers, popups and controls */
.mk-map {
  position: relative;
  overflow: hidden;
  background: #e8e4dc;
  touch-action: none;           /* we handle pan/pinch ourselves */
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  cursor: grab;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mk-marker: #d7263d;
}
.mk-map.mk-dragging { cursor: grabbing; }
.mk-map:focus-visible { box-shadow: inset 0 0 0 2px #4a90e2; }

.mk-world, .mk-pane { position: absolute; inset: 0; }
.mk-world { transform-origin: 0 0; z-index: 1; }
.mk-tile-pane  { z-index: 1; }
.mk-vector-pane { z-index: 2; pointer-events: none; overflow: visible; }
.mk-vector-pane .mk-vector { pointer-events: visiblePainted; cursor: pointer; }
.mk-marker-pane { z-index: 3; pointer-events: none; transform-origin: 0 0; }
.mk-popup-pane  { z-index: 4; pointer-events: none; }

.mk-layer, .mk-level { position: absolute; left: 0; top: 0; }
.mk-level { transform-origin: 0 0; will-change: transform; }
.mk-world.mk-zoom-anim .mk-level { transition: transform .25s ease-out; }

.mk-tile {
  position: absolute;
  width: 256px; height: 256px;
  opacity: 0;
  transition: opacity .2s;
  image-rendering: auto;
}
.mk-tile.mk-loaded { opacity: 1; }

/* markers */
.mk-marker {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  line-height: 0;
}
.mk-marker .mk-pin { filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }

/* popups */
.mk-popup {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  transform-origin: 0 0;
  translate: -50% -100%;
  cursor: default;
}
.mk-popup-body {
  background: #fff;
  color: #222;
  border-radius: 8px;
  padding: 10px 24px 10px 14px;
  box-shadow: 0 3px 14px rgba(0,0,0,.3);
  min-width: 80px;
}
.mk-popup-tip {
  width: 14px; height: 14px;
  background: #fff;
  margin: -7px auto 0;
  transform: rotate(45deg);
  box-shadow: 3px 3px 4px rgba(0,0,0,.15);
}
.mk-popup-close {
  position: absolute; top: 2px; right: 6px;
  border: 0; background: none; color: #888;
  font-size: 18px; cursor: pointer;
}
.mk-popup-close:hover { color: #222; }

/* controls */
.mk-ctrl-corner { position: absolute; z-index: 10; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.mk-topleft { top: 10px; left: 10px; }
.mk-topright { top: 10px; right: 10px; }
.mk-bottomleft { bottom: 10px; left: 10px; align-items: flex-start; }
.mk-bottomright { bottom: 0; right: 0; align-items: flex-end; }
.mk-control { pointer-events: auto; cursor: auto; }

.mk-zoom { display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 5px rgba(0,0,0,.4); }
.mk-zoom button {
  width: 32px; height: 32px;
  border: 0; background: #fff; color: #222;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.mk-zoom button + button { border-top: 1px solid #ddd; }
.mk-zoom button:hover { background: #f2f2f2; }
.mk-zoom button:disabled { color: #bbb; cursor: default; }

.mk-attribution {
  background: rgba(255,255,255,.8);
  padding: 2px 6px;
  font-size: 11px;
  color: #333;
  border-top-left-radius: 4px;
}
.mk-attribution a { color: #0066cc; }

.mk-scale {
  border: 2px solid #333; border-top: 0;
  background: rgba(255,255,255,.6);
  padding: 1px 4px;
  font-size: 11px; white-space: nowrap;
  box-sizing: content-box;
}