/* PicUppy — kaartweergave */

.pmap {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--map-land);
  isolation: isolate;
}
.pmap-svg { display: block; width: 100%; }

.pmap-attr {
  position: absolute; right: 0; bottom: 0;
  padding: 3px 8px;
  background: rgba(255,255,255,.78);
  border-radius: var(--r-sm) 0 0 0;
  font-size: 10px; color: var(--ink-3); letter-spacing: .01em;
}

.pmap-ctrl {
  position: absolute; right: var(--s-3); bottom: var(--s-5);
  display: grid; gap: var(--s-2);
}
.pmap-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--sand-300); border-radius: var(--r-pill);
  box-shadow: var(--sh-2); cursor: pointer;
}
.pmap-btn:hover { background: var(--sand-50); }
.pmap-btn:active { transform: scale(.94); }

.pmap-pin { transition: transform var(--dur-2) var(--ease); transform-box: fill-box; }
.pmap-pin:hover, .pmap-pin:focus-visible { transform: translateY(-2px); }
.pmap-pin:focus-visible { outline: none; }
.pmap-pin:focus-visible path { stroke: var(--pine-700); stroke-width: 3.5; }

/* Kaart als achtergrond van een hele sectie, zoals het verkenscherm. */
.map-stage { position: relative; min-height: 60vh; }
.map-stage .pmap { border-radius: 0; }
.map-overlay {
  position: absolute; inset: 0;
  display: grid; align-items: start;
  padding: var(--s-5);
  pointer-events: none;
}
.map-overlay > * { pointer-events: auto; }