/* assets/css/style.css */

/* 1. Import Google Font (Inter - similar to Uber's custom font) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* 2. Global Variables */
:root {
    --uber-black: #000000;
    --uber-white: #FFFFFF;
    --uber-gray-bg: #F6F6F6;
    --uber-gray-text: #5E5E5E;
}

/* 3. Base Resets */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--uber-white);
    color: var(--uber-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* 4. Google Maps Customization */
/* Hides default Google UI clutter for a cleaner "App" look */
.gmnoprint a, .gmnoprint span, .gm-style-cc {
    display: none;
}
.gmnoprint div {
    background: none !important;
}
/* Removes the default focus outline on map controls */
button:focus {
    outline: none !important;
}

/* 5. Custom Scrollbar (Sidebar / Car List) */
/* Matches the subtle gray scrollbar seen on modern web apps */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #E5E7EB transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #E5E7EB; /* Matches Tailwind gray-200 */
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #D1D5DB; /* Matches Tailwind gray-300 */
}

/* 6. Input Autofill Fix */
/* Prevents Chrome from turning inputs yellow/blue when autofilling */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #F3F4F6 inset !important; /* Matches bg-gray-100 */
    -webkit-text-fill-color: black !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 7. Car Selection Logic */
.car-item {
    transition: all 0.2s ease-in-out;
}
.car-item:hover {
    background-color: #F3F4F6; /* gray-50 */
}
/* The "Selected" state (Thick black border) */
.car-item.selected {
    border-color: black;
    background-color: #F3F4F6;
    box-shadow: 0 0 0 2px black; 
}

/* 8. Animations */
/* Pulse effect for "Searching..." loader */
@keyframes softPulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-soft-pulse {
    animation: softPulse 2s infinite ease-in-out;
}

/* Fade In Down (for Profile Dropdown) */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.animate-fade-in-down {
    animation: fadeInDown 0.2s ease-out forwards;
}

/* 9. Mobile Tweaks */
@media (max-width: 768px) {
    /* Ensure map container handles height properly on mobile */
    #map {
        min-height: 50vh; 
    }
}