/* =========================================
   ESSENTIAL MAP SIZING (Fixes Blank Screen)
========================================= */
.ride-map-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Makes it take up the full screen height */
    min-height: 500px; /* Safety fallback */
}

.full-map {
    width: 100%;
    height: 100%;
    min-height: 500px;
    z-index: 1; /* Keeps the map behind your pop-up modals */
}

/* Hide Leaflet Routing Machine text directions panel (if any remnants exist) */
.leaflet-routing-container { 
    display: none !important; 
}

/* Base Wrapper for all custom markers */
.custom-marker-driver, 
.custom-marker-p-pending, 
.custom-marker-p-accepted, 
.custom-marker-end { 
    background: transparent; 
    border: none; 
}

/* =========================================
   DRIVER MARKER (Green)
========================================= */
.marker-pin-driver { 
    width: 44px; 
    height: 44px; 
    background: #10B981; 
    border: 3px solid #ffffff; 
    border-radius: 50% 50% 50% 0; 
    transform: rotate(-45deg); 
    box-shadow: -4px 4px 10px rgba(16, 185, 129, 0.4); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin-top: -22px; 
    margin-left: -22px;
}
.marker-pin-driver i { 
    transform: rotate(45deg); 
    color: white; 
    font-size: 18px; 
}

/* =========================================
   PENDING PASSENGER MARKER (Orange Pulsing)
========================================= */
.marker-pin-p-pending { 
    width: 44px; 
    height: 44px; 
    background: #F59E0B; 
    border: 3px solid #ffffff; 
    border-radius: 50% 50% 50% 0; 
    transform: rotate(-45deg); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-top: -22px; 
    margin-left: -22px;
    animation: pulse-orange 1.5s infinite; 
}
.marker-pin-p-pending i { 
    transform: rotate(45deg); 
    color: white; 
    font-size: 18px; 
}

/* =========================================
   ACCEPTED PASSENGER MARKER (Blue)
========================================= */
.marker-pin-p-accepted { 
    width: 44px; 
    height: 44px; 
    background: #3B82F6; 
    border: 3px solid #ffffff; 
    border-radius: 50% 50% 50% 0; 
    transform: rotate(-45deg); 
    box-shadow: -4px 4px 10px rgba(59, 130, 246, 0.4);
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-top: -22px; 
    margin-left: -22px;
}
.marker-pin-p-accepted i { 
    transform: rotate(45deg); 
    color: white; 
    font-size: 18px; 
}

/* =========================================
   DESTINATION / END MARKER (Red Circle)
========================================= */
.marker-pin-end { 
    width: 36px; 
    height: 36px; 
    background: #EF4444; 
    border: 3px solid #ffffff; 
    border-radius: 50%; 
    box-shadow: 0 6px 12px rgba(239, 68, 68, 0.4); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-top: -18px; 
    margin-left: -18px;
}
.marker-pin-end i { 
    color: white; 
    font-size: 16px; 
}

/* =========================================
   ANIMATIONS
========================================= */
@keyframes pulse-orange {
    0% { 
        transform: rotate(-45deg) scale(0.95); 
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); 
    }
    70% { 
        transform: rotate(-45deg) scale(1); 
        box-shadow: -10px 10px 0 0 rgba(245, 158, 11, 0); 
    }
    100% { 
        transform: rotate(-45deg) scale(0.95); 
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); 
    }
}