/*
 * Aperina map — the pin widget drawn by assets/map.js (checkout, the address form, the admin order screen).
 * Uses the Aperina theme's role tokens, with fallbacks so it also works on the admin screens.
 */
.aperina-map {
  position: relative; height: 240px; overflow: hidden;
  border: 1px solid var(--border-strong, #8A7E73); border-radius: var(--radius-field, 8px); background: var(--bg-sunken, #EDE4DA);
}
.aperina-map__canvas { position: absolute; inset: 0; }
.aperina-map__canvas:focus-visible { outline: 2px solid var(--focus-ring, #72383D); outline-offset: -3px; }

/* The pin stays in the middle and the map moves under it; its tip is the point. */
.aperina-map__pin {
  position: absolute; inset-block-start: 50%; left: 50%; z-index: 600; width: 30px; height: 41px;
  color: var(--primary, #72383D); transform: translate(-50%, -100%); transform-origin: 50% 100%;
  transition: transform var(--dur-fast, 160ms) var(--ease-out, ease); pointer-events: none;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.3));
}
.aperina-map__pin svg { display: block; width: 100%; height: 100%; }
.aperina-map.is-moving .aperina-map__pin { transform: translate(-50%, -100%) translateY(-7px); }
.aperina-map__pin::after {
  content: ""; position: absolute; inset-block-end: -4px; left: 50%; width: 10px; height: 4px; margin-inline-start: -5px;
  border-radius: var(--radius-pill, 999px); background: rgb(0 0 0 / 0.28);
}

.aperina-map__zoom { position: absolute; inset-block-start: var(--space-2, 8px); inset-inline-end: var(--space-2, 8px); z-index: 1000; display: grid; gap: 4px; }
.aperina-map__button, .aperina-map__locate {
  min-height: 36px; border: 1px solid var(--border-strong, #8A7E73); border-radius: var(--radius-sm, 4px);
  background: var(--bg, #FCF8F3); color: var(--text, #322D29); font: inherit; line-height: 1; cursor: pointer;
}
.aperina-map__button { width: 36px; font-size: 1.125rem; }
.aperina-map__button:hover, .aperina-map__locate:hover { background: var(--bg-raised, #F7F3EE); }
.aperina-map__locate {
  position: absolute; inset-block-end: var(--space-2, 8px); inset-inline-start: var(--space-2, 8px); z-index: 1000;
  min-height: 40px; padding-inline: var(--space-4, 16px); border-radius: var(--radius-pill, 999px);
  font-size: var(--text-label, 0.875rem); font-weight: 500;
}
.aperina-map__locate[disabled] { opacity: 0.6; cursor: default; }
.aperina-map :is(.aperina-map__button, .aperina-map__locate):focus-visible { outline: 2px solid var(--focus-ring, #72383D); outline-offset: 2px; }
.aperina-map__hint {
  position: absolute; inset-block-start: var(--space-2, 8px); inset-inline-start: var(--space-2, 8px); z-index: 1000;
  display: none; max-width: 22ch; padding: 6px var(--space-3, 12px); border-radius: var(--radius-sm, 4px);
  background: var(--bg-inverse, #322D29); color: var(--text-inverse, #FCF8F3); font-size: var(--text-caption, 0.8125rem); line-height: 1.7;
}
.aperina-map__hint.is-shown { display: block; }
.aperina-map .leaflet-control-attribution { background: rgb(255 255 255 / 0.72); color: #4a443e; font-size: 10px; }
.aperina-map .leaflet-control-attribution a { color: #4a443e; }
.aperina-map.is-broken { display: grid; place-items: center; height: 96px; border-style: dashed; }
.aperina-map.is-broken :is(.aperina-map__pin, .aperina-map__zoom, .aperina-map__locate) { display: none; }
.aperina-map.is-broken .aperina-map__hint { position: static; background: none; color: var(--text-muted, #6B6159); }