/* Instagram Frame Aesthetic (Dark/Native Theme) */
.map-wrapper-instagram {
  width: 100%;
  max-width: 600px; /* Matching the fluid column width in routes grid */
  height: 450px; /* Strictly matching the target container's total height */
  background: rgba(
    255,
    255,
    255,
    0.03
  ); /* Glassmorphism background matching site */
  border-radius: var(--radius-2xl, 24px); /* Matching target border radius */
  padding: var(--spacing-xs, 4px); /* Matching target padding */
  overflow: hidden;
  position: relative;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle glass border */
}

.map-main-ig {
  width: 100%;
  flex: 1; /* Automatically fill all available space above the footer */
  background: #000;
  position: relative;
  border-radius: calc(
    var(--radius-2xl, 24px) - var(--spacing-xs, 4px)
  ); /* Clean inner radius */
  overflow: hidden;
}

map-geo {
  display: block;
  width: 100%;
  height: 100%;
}

#leaflet-map,
#leaflet-map-ig {
  width: 100%;
  height: 100%;
  background: #000;
}

.map-footer-ig {
  padding: 24px;
  background: #000; /* Force black for consistency */
  color: #ffffff;
}

.ig-caption-header {
  margin-bottom: 16px;
}

.ig-route-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.ig-metrics-grid {
  display: flex;
  gap: 24px;
}

/* Animations and Map Elements */
/* Premium "Midnight Luxury" Tile Filter for Google Maps */
.leaflet-tile {
  /* Transforms bright standard tiles into a deep, rich navy/black */
  filter: invert(100%) hue-rotate(180deg) brightness(85%) contrast(110%)
    saturate(80%) hue-rotate(190deg) !important;
}

/* Inner Vignette Overlay to blend map into the frame */
.map-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9);
  pointer-events: none; /* Let clicks pass through to Leaflet */
  z-index: 500; /* Above tiles (200) and paths (400) */
}

.route-path {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  /* Neon glow effect */
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.8));
  animation: drawLine 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.landmark-point {
  fill: #f59e0b;
  stroke: white;
  stroke-width: 2;
  transform-origin: center;
  /* We handle the pulse via JS or complex SVG, but for the basic dot, keep it solid 
       and we'll add a separate pulsing ring via D3 in the JS engine. */
}

/* Pulsing radar ring class added dynamically by D3 */
.pulse-ring {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 2;
  transform-origin: center;
  transform-box: fill-box;
  animation: radarPulse 2s infinite ease-out;
}

@keyframes radarPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
    stroke-width: 3px;
  }
  100% {
    transform: scale(4);
    opacity: 0;
    stroke-width: 1px;
  }
}

.landmark-label {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  fill: #e5e7eb; /* Light text for dark map */
  paint-order: stroke;
  stroke: #0a0e1a; /* Dark border for labels against dark map */
  stroke-width: 3px;
  pointer-events: none;
}