/* ==========================================================================
   Victoria Falls town map backdrop (Resources/Views/partials/vf-map.leaf)
   Shared by the landing hero (dark) and the booking wizard (light).
   The host sets `color` (pin/accent) and the two custom properties below.
   ========================================================================== */

.gtm-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--gtm-emerald, #34d399);
  --gtm-map-water: var(--gtm-emerald-deep, #059669);
  --gtm-map-road: #94a3b8;
}

/* Light host (booking wizard): slate linework on white, emerald only where lit. */
.gtm-map--light {
  color: var(--color-primary-500, #10b981);
  --gtm-map-water: var(--color-primary-300, #6ee7b7);
  --gtm-map-road: var(--color-slate-500, #64748b);
  opacity: 0.55;
}

.gtm-map__svg {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  will-change: transform;
}

.gtm-map__water {
  fill: none;
  stroke: var(--gtm-map-water);
  stroke-width: 34;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.32;
}

.gtm-map__water--islands {
  stroke-width: 8;
  opacity: 0.22;
}

.gtm-map__falls {
  fill: none;
  stroke: currentColor;
  stroke-width: 14;
  stroke-linecap: round;
  opacity: 0.7;
  filter: drop-shadow(0 0 12px currentColor);
}

.gtm-map__gorge {
  fill: none;
  stroke: var(--gtm-map-water);
  stroke-width: 12;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.3;
}

.gtm-map__road {
  fill: none;
  stroke: var(--gtm-map-road);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.22;
}

.gtm-map__road--main {
  stroke-width: 5;
  opacity: 0.3;
}

.gtm-map__road--minor {
  stroke-width: 2;
  opacity: 0.16;
}

.gtm-map__rail {
  fill: none;
  stroke: var(--gtm-map-road);
  stroke-width: 2;
  stroke-dasharray: 10 10;
  opacity: 0.18;
}

.gtm-map__pin-dot {
  fill: currentColor;
  opacity: 0.45;
  transition: opacity 240ms ease;
}

.gtm-map__pin-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.4);
}

.gtm-map__pin--lit .gtm-map__pin-dot {
  opacity: 1;
  filter: drop-shadow(0 0 10px currentColor);
}

.gtm-map__pin--lit .gtm-map__pin-ring {
  animation: gtm-pin-ping 1.4s cubic-bezier(0.22, 1, 0.36, 1) 2;
}

@keyframes gtm-pin-ping {
  0% { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.6); }
}