/* The pickup map on a listing. Everything here is sized so the map reads as a
   neighbourhood and never as an address: one soft circle on a quiet tile
   surface, the place written above it in words, and no pin anywhere. */
.listing-pickup-map { grid-area: map; margin-top: 18px; display: grid; gap: 10px; }
.listing-pickup-map > h2 { margin: 0 0 2px; }
.listing-pickup-where { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.listing-pickup-where > .lucide { flex: none; color: var(--text-secondary); }
.listing-pickup-note { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; }
.listing-map-fallback { margin: 0; }

.listing-map-shell { position: relative; margin-top: 4px; border-radius: var(--radius-listing); background: var(--surface-sky); overflow: hidden; }
.listing-map-shell[hidden] { display: none; }
/* The radius is repeated on the canvas: Leaflet's panes are clipped by their
   own box, and a square tile grid inside a rounded shell shows its corners. */
.listing-map { height: 264px; border-radius: var(--radius-listing); overflow: hidden; outline-offset: -3px; }
.listing-map.leaflet-container { background: var(--surface-sky); font-family: var(--font-ui); }
.listing-map-attribution {
  position: absolute;
  z-index: 500;
  inset-inline-end: 6px;
  inset-block-end: 6px;
  margin: 0;
  padding: 3px 7px;
  border-radius: var(--radius-control);
  background: var(--surface-frost);
  color: var(--text-muted);
  font-size: 10px;
  text-align: end;
}
.listing-map-attribution a { color: inherit; }
.listing-map-attribution:empty { display: none; }

/* Leaflet writes stroke and fill as presentation attributes, which any
   stylesheet outranks — so the circle keeps its colour from the token set. */
.listing-map-area { fill: var(--action-primary); fill-opacity: .18; stroke: var(--action-primary); stroke-opacity: .7; stroke-width: 2; }

.listing-map .leaflet-bar { border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); }
.listing-map .leaflet-bar a,
.listing-map .leaflet-bar a:hover {
  width: 34px;
  height: 34px;
  border-color: var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-primary);
  line-height: 34px;
}
.listing-map .leaflet-control-zoom-in { border-radius: var(--radius-control) var(--radius-control) 0 0; }
.listing-map .leaflet-control-zoom-out { border-radius: 0 0 var(--radius-control) var(--radius-control); }

@media (prefers-reduced-motion: reduce) {
  .listing-map .leaflet-zoom-animated { transition: none !important; }
}

@media (min-width: 900px) {
  .listing-pickup-map { margin-top: 0; gap: 12px; }
  .listing-map-shell { border-radius: var(--radius-panel); }
  .listing-map { height: 340px; border-radius: var(--radius-panel); }
}