@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');
        body, html { margin: 0; padding: 0; overscroll-behavior-y: auto; font-family: 'Plus Jakarta Sans', sans-serif; background-color: #F5F6F8; color: #10192E; -webkit-font-smoothing: antialiased; }

        /* Hide all scrollbars universally while preserving full scrollability */
        * {
            -ms-overflow-style: none !important;
            scrollbar-width: none !important;
        }
        *::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }
        html, body {
            -ms-overflow-style: none !important;
            scrollbar-width: none !important;
        }
        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }
        .animate-in { animation-duration: 400ms; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
        .duration-200 { animation-duration: 200ms; }
        .duration-300 { animation-duration: 300ms; }
        .duration-500 { animation-duration: 500ms; }
        .ease-out { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideInTop4 { from { transform: translateY(-1rem); } to { transform: translateY(0); } }
        @keyframes slideInBottom4 { from { transform: translateY(1rem); } to { transform: translateY(0); } }
        @keyframes slideInBottomFull { from { transform: translateY(100%); } to { transform: translateY(0); } }
        @keyframes slideInRight8 { from { transform: translateX(2rem); } to { transform: translateX(0); } }
        @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
        @keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
        @keyframes zoomIn95 { from { transform: scale(0.95); } to { transform: scale(1); } }
        @keyframes bounceIn { 0% { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
        
        .fade-in { animation-name: fadeIn; }
        .fade-out { animation-name: fadeOut; }
        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
        .zoom-in-95 { animation-name: zoomIn95; }
        .bounce-in { animation: bounceIn 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
        .animate-out { animation-duration: 300ms; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
        .slide-out-to-left { animation-name: slideOutLeft; }
        .slide-in-from-top-4 { animation-name: slideInTop4; }
        .slide-in-from-bottom-4 { animation-name: slideInBottom4; }
        .slide-in-from-bottom-full { animation-name: slideInBottomFull; }
        .slide-in-from-bottom { animation-name: slideInBottomFull; }
        .slide-in-from-right-8 { animation-name: slideInRight8; }
        .slide-in-from-left { animation-name: slideInLeft; }
        .fade-in.zoom-in-95 { animation-name: fadeIn, zoomIn95; }
        .fade-in.slide-in-from-top-4 { animation-name: fadeIn, slideInTop4; }
        .fade-in.slide-in-from-bottom-4 { animation-name: fadeIn, slideInBottom4; }
        .fade-in.slide-in-from-bottom-full { animation-name: fadeIn, slideInBottomFull; }
        .fade-in.slide-in-from-bottom { animation-name: fadeIn, slideInBottomFull; }
        .fade-in.slide-in-from-right-8 { animation-name: fadeIn, slideInRight8; }
        .fade-in.slide-in-from-left { animation-name: fadeIn, slideInLeft; }
        
        /* Hide Leaflet Controls to maintain minimalist UI */
        .leaflet-control-zoom { display: none !important; }
        .leaflet-control-attribution { opacity: 0.3; font-size: 10px; }
        /* Minimalist Fast Map: Clean Grey & White Design */
        .leaflet-container { background: #F8F9FA !important; }
        .leaflet-tile-pane {
            filter: contrast(1.04) saturate(1.05);
            -webkit-filter: contrast(1.04) saturate(1.05);
        }

        /* Soft, elegant Navy Blue Shadows matching brand secondary (#0A192F) */
        .shadow-accent-glow,
        .shadow-navy-glow {
            box-shadow: 0 12px 34px -4px rgb(var(--color-secondary-rgb) / 0.16), 0 4px 14px -2px rgb(var(--color-secondary-rgb) / 0.08) !important;
        }
        .shadow-accent-glow-lg,
        .shadow-navy-glow-lg {
            box-shadow: 0 18px 45px -4px rgb(var(--color-secondary-rgb) / 0.20), 0 6px 18px -2px rgb(var(--color-secondary-rgb) / 0.10) !important;
        }

        /* Centered Search Placeholder */
        .center-placeholder::placeholder {
            text-align: center !important;
        }
        .center-placeholder:placeholder-shown {
            text-align: center !important;
        }
        
        @keyframes userLocationPulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(2.5); opacity: 0; }
        }

        @keyframes fleetDotPulse {
            0% { transform: scale(0.9); opacity: 0.75; }
            50% { opacity: 0.35; }
            100% { transform: scale(2.8); opacity: 0; }
        }

        /* Lock App in Vertical (Portrait) Position */
        .portrait-locked {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            width: 100vh !important;
            width: 100dvh !important;
            height: 100vw !important;
            height: 100dvw !important;
            transform: translate(-50%, -50%) rotate(-90deg) !important;
            transform-origin: center center !important;
            overflow: hidden !important;
        }

        .portrait-locked-reverse {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            width: 100vh !important;
            width: 100dvh !important;
            height: 100vw !important;
            height: 100dvw !important;
            transform: translate(-50%, -50%) rotate(90deg) !important;
            transform-origin: center center !important;
            overflow: hidden !important;
        }

        /* Active Ride Horizontal (Landscape) View when held in portrait */
        .active-ride-horizontal {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            width: 100vh !important;
            width: 100dvh !important;
            height: 100vw !important;
            height: 100dvw !important;
            transform: translate(-50%, -50%) rotate(90deg) !important;
            transform-origin: center center !important;
            overflow: hidden !important;
        }

        /* Animated Phone Tilt Loader for Active Ride */
        @keyframes phoneRotateAnim {
            0%, 15% {
                transform: rotate(0deg) scale(1);
            }
            45%, 75% {
                transform: rotate(90deg) scale(1.08);
            }
            90%, 100% {
                transform: rotate(0deg) scale(1);
            }
        }

        .animate-phone-tilt {
            animation: phoneRotateAnim 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        @keyframes pulseGlow {
            0%, 100% {
                opacity: 0.25;
                transform: scale(0.95);
            }
            50% {
                opacity: 0.65;
                transform: scale(1.1);
            }
        }

        .animate-pulse-glow {
            animation: pulseGlow 2.6s ease-in-out infinite;
        }