/* Voa Entregador — Área do mapa (Google Maps + markers)
   Carregado da estrutura de componentes */

/* ---------- Área do mapa ---------- */
.map-area {
  position: relative;
  background: var(--map-bg);
  overflow: hidden;
  height: 100%;
}

/* Container do Google Maps — preenche a map-area. */
.map-canvas,
#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Marcadores (AdvancedMarkerElement usa um <div> content que nós injetamos).
   A classe .marker é aplicada ao elemento content para reaproveitar o estilo. */
.marker {
  pointer-events: auto;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
  transition: transform 0.15s;
}
.marker svg {
  display: block;
  overflow: visible;
  width: 100%; height: 100%;
  /* Renderização nítida em alta densidade */
  shape-rendering: geometricPrecision;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.marker.pin-marker           { width: 28px; height: 36px; }
.marker.cluster-marker       { width: 44px; height: 52px; }
.marker.rider-marker         { width: 40px; height: 40px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.marker.other-courier-marker { width: 26px; height: 30px; opacity: 0.85; pointer-events: none; }

.marker:hover { transform: scale(1.08); }

/* Estado selecionado — halo pulsante atrás do SVG.
   A cor do pulse é passada inline via --pulse-color em renderMarkers(). */
.marker.selected { z-index: 15; position: relative; }
.marker.selected::before {
  content: '';
  position: absolute;
  left: 50%; top: 62%;  /* alinha na "cabeça" do pin (em gota) */
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pulse-color, rgba(11,18,32,0.55));
  transform: translate(-50%, -50%);
  animation: markerPulse 1.4s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
.marker.cluster-marker.selected::before {
  top: 46%;
  width: 40px; height: 40px;
}
@keyframes markerPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.65; }
  70%  { transform: translate(-50%, -50%) scale(2.4); opacity: 0;    }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0;    }
}