/* Animated Route Map Styles */

.animated-route-marker {
    background: transparent;
    border: none;
}

.animated-route-marker-inner {
    width: 20px;
    height: 20px;
    background: #007bff;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Optional: Route line animation glow */
.leaflet-interactive.animated-route-line {
    filter: drop-shadow(0 0 3px rgba(0, 123, 255, 0.5));
    transition: filter 0.3s ease;
}

.animated-route-label {
    background: transparent;
    border: none;
}

.animated-route-label__text {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(13, 27, 42, 0.92);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -42px);
    animation: routeLabelFadeIn 0.35s ease;
}

@keyframes routeLabelFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -32px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -42px);
    }
}