/* Premium Map Markers Animations */

/* Base container styles */
.dest-marker,
.dest-marker-driver {
    background: transparent !important;
    border: none !important;
}

/* 1. Wrapper for the Pin (Client Selection) */
.marker-pin-animated {
    font-size: 3rem;
    /* Large size */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    /* Nice shadow */
    animation: pinBounce 2s infinite ease-in-out;
    transform-origin: bottom center;
    cursor: grab;
}

@keyframes pinBounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    }

    50% {
        transform: translateY(-10px) scale(1.1);
        /* Jumps up and grows slightly */
        filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.2));
        /* Shadow moves away */
    }
}

/* 2. Wrapper for the Flag (Driver Destination) */
.marker-flag-animated {
    font-size: 3rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    animation: flagWave 1.5s infinite ease-in-out alternate;
    transform-origin: bottom left;
}

@keyframes flagWave {
    0% {
        transform: rotate(0deg) skewX(0deg);
    }

    100% {
        transform: rotate(5deg) skewX(-5deg);
        /* Subtle waving motion */
    }
}

/* Enhancing the Route Line (if possible via Leaflet CSS, but usually SVG) */
/* Ensuring the route line looks "glowing" or premium is hard via CSS only since it's SVG paths, 
   but we can try targetting the leaflet-interactive path if we had a specific class. 
   For now, we improved the markers significantly. */