/* 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;
}