.marker {
    width: 20px;
    height: 20px;
    background-color: #007AFF;
    border: 3px solid white;
    border-radius: 50%;
    cursor: pointer;
}

.marker::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #007AFF;
    border-radius: 50%;
    z-index: -1;
    animation: pulse 2s infinite;
}

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

.marker-container {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
    cursor: pointer;
    width: 36px;
    height: 36px;
}

/* User device location marker (distinct from fleet vehicle car icons) */
.user-device-marker {
    width: 18px;
    height: 18px;
    background: #2563eb;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35), 0 2px 8px rgba(15, 23, 42, 0.25);
    cursor: pointer;
}

/* Pulsing ring so the user's position is easy to spot on the map */
.user-device-marker::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.18);
    animation: user-location-pulse 2s ease-out infinite;
}

@keyframes user-location-pulse {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

.car-icon {
    font-size: 24px;
    color: #3498db;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    filter: drop-shadow(2px 4px 6px black);
}

.status-moving .car-icon { color: #2ecc71; }
.status-parked .car-icon { color: #e74c3c; }