/* ─────────────────────────────────────────────────────────────────────────
   Maps — the engine's own chrome (js/map.js), the /map screen, and the
   checkout location picker.

   The engine only ever sets inline left/top/transform; everything visual
   lives here so a map looks like the rest of the site rather than like a
   third-party widget dropped into it.
   ───────────────────────────────────────────────────────────────────────── */

.pmap {
  position: relative; overflow: hidden; background: var(--bg-2);
  touch-action: none; /* the engine owns pan and pinch */
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.pmap.dragging { cursor: grabbing; }
.pmap:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, #fff); outline-offset: -3px; }

.pmap-pane, .pmap-marks {
  position: absolute; inset: 0; transform-origin: 0 0; will-change: transform;
}
.pmap-marks { pointer-events: none; }

.pmap-tile {
  position: absolute; width: 256px; height: 256px; max-width: none;
  pointer-events: none; -webkit-user-drag: none;
}
/* A missing tile should read as empty land, not a broken image. */
.pmap-tile.gone { display: none; }

.pmap-attr {
  position: absolute; right: 0; bottom: 0; z-index: 5;
  padding: 2px 7px; border-radius: 6px 0 0 0;
  background: rgba(255,255,255,.82); color: var(--muted);
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  pointer-events: none;
}

/* ── Markers ──────────────────────────────────────────────────────────── */
.pmap-mark {
  position: absolute; pointer-events: auto; padding: 0;
  width: var(--dot-size, 18px); height: var(--dot-size, 18px);
  margin-left: calc(var(--dot-size, 18px) / -2);
  margin-top: calc(var(--dot-size, 18px) / -2);
  border-radius: 50%; background: var(--dot, var(--orange));
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(21,17,13,.35);
  transition: transform .12s;
}
.pmap-mark:hover, .pmap-mark:focus-visible { transform: scale(1.25); z-index: 3; }
.pmap-mark.pin-dot {
  --dot-size: 20px; --dot: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 2px 6px rgba(21,17,13,.35);
}

/* ── Floating controls ────────────────────────────────────────────────── */
.pmap-ui {
  position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 6px;
}
.pmap-btn {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--hairline); color: var(--ink);
  box-shadow: var(--shadow-md); transition: background .12s, color .12s;
}
.pmap-btn:hover:not(:disabled) { background: var(--bg-2); }
.pmap-btn:disabled { opacity: .55; cursor: not-allowed; }
.pmap-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pmap-btn svg { width: 17px; height: 17px; }

/* ── /map screen ──────────────────────────────────────────────────────── */
.mapwrap {
  position: relative; max-width: 1140px; margin: 0 auto; padding: 0 24px;
}
.mapcanvas {
  height: min(68vh, 640px); border-radius: var(--r-lg);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
}
.map-ui-right { top: 14px; right: 38px; }

.map-status {
  position: absolute; left: 38px; top: 14px; z-index: 6; max-width: min(60%, 420px);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(255,255,255,.94); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md); font-size: 12.5px; font-weight: 700; color: var(--body);
}
.map-status:empty { display: none; }
.map-status svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.map-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.map-card {
  position: absolute; left: 38px; bottom: 22px; z-index: 7; width: min(320px, calc(100% - 76px));
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 15px 16px 14px;
  animation: map-card-in .18s cubic-bezier(.2,.9,.3,1);
}
@keyframes map-card-in { from { opacity: 0; transform: translateY(10px); } }
.map-card[hidden] { display: none; }
.map-card-x {
  position: absolute; top: 9px; right: 9px; width: 26px; height: 26px;
  border-radius: 8px; display: grid; place-items: center; color: var(--muted);
}
.map-card-x:hover { background: var(--bg-2); color: var(--ink); }
.map-card-x svg { width: 15px; height: 15px; }
.map-card-kind {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em; color: var(--body); padding-right: 26px;
}
.map-card-kind::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dot, var(--orange)); flex-shrink: 0;
}
.map-card-title {
  font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.32; margin: 6px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.map-card-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px;
  font-size: 11.5px; color: var(--muted); font-weight: 600;
}
.map-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.map-card-meta svg { width: 12px; height: 12px; }

/* ── Location picker (modal) ──────────────────────────────────────────── */
.pick-hint { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.pick-map { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline); }
.pick-canvas { height: min(52vh, 380px); }
.pick-ui { top: 10px; right: 10px; }
.pick-ui .pmap-btn { width: 34px; height: 34px; border-radius: 10px; }
.pick-ui .pmap-btn svg { width: 15px; height: 15px; }

/* The pin sits over the centre of the viewport and the map moves under it, so
   it is deliberately outside the panning layer. The tip, not the middle, marks
   the spot — hence the offset. */
.pick-crosshair {
  position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none;
  transform: translate(-50%, -100%); color: var(--accent);
  filter: drop-shadow(0 3px 5px rgba(21,17,13,.4));
}
.pick-crosshair svg { width: 34px; height: 34px; }
.pick-crosshair::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 7px; height: 7px; margin-left: -3.5px; margin-top: -2px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(255,255,255,.85);
}
.pick-read {
  margin-top: 11px; text-align: center; font-size: 12.5px; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ── Checkout pin ─────────────────────────────────────────────────────── */
.pin-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pin-preview { position: relative; margin-top: 12px; }
.pin-map {
  height: 190px; border-radius: var(--r-md); border: 1px solid var(--hairline);
}
.pin-adjust { position: absolute; right: 10px; bottom: 10px; z-index: 6; box-shadow: var(--shadow-md); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mapwrap { padding: 0; }
  .mapcanvas { height: min(72vh, 560px); border-radius: 0; border-left: none; border-right: none; }
  .map-ui-right { top: 10px; right: 10px; }
  .map-status { left: 10px; top: 10px; max-width: calc(100% - 68px); }
  .map-card { left: 10px; right: 10px; bottom: 12px; width: auto; }
  .pick-canvas { height: 46vh; }
}