/* Custom Animations and Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
    font-family: 'Inter', sans-serif;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

.animate-pulse-custom {
    animation: pulse 2s infinite;
}

/* Vehicle Selection Buttons */
.vehicle-btn {
    @apply flex flex-col items-center justify-center p-4 border-2 border-gray-200 rounded-xl transition-all duration-300 hover:border-blue-400 hover:shadow-md;
}

.vehicle-btn.active {
    @apply border-blue-500 bg-blue-50 text-blue-600;
}

.vehicle-btn:hover {
    transform: translateY(-2px);
}

/* Input Focus Effects */
input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Suggestion Dropdown */
.suggestion-item {
    @apply px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 transition-colors duration-200;
}

.suggestion-item:hover {
    @apply bg-blue-50 text-blue-700;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #2563eb, #7c3aed);
}

/* Leaflet Map Styles */
.custom-div-icon {
    background: transparent;
    border: none;
}

.leaflet-popup-content-wrapper {
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.leaflet-popup-content {
    margin: 12px 16px;
    padding: 0;
    white-space: nowrap;
    overflow: visible;
}

.leaflet-popup-close-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    z-index: 1000;
}

.leaflet-routing-container {
    display: none;
}

/* Mobile Vehicle Buttons */
.vehicle-btn-mobile {
    @apply flex flex-col items-center justify-center p-3 bg-gray-100 rounded-xl transition-all duration-300;
}

.vehicle-btn-mobile.active {
    @apply bg-blue-500 text-white;
}

.vehicle-btn-mobile:hover {
    transform: translateY(-1px);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    h1 {
        font-size: 2.5rem !important;
    }
    
    .grid {
        grid-template-columns: 1fr;
    }
    
    #map-container-mobile {
        height: 100vh;
        width: 100vw;
    }
}

/* Loading Animation */
.loading-dots {
    display: inline-block;
}

.loading-dots::after {
    content: '';
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* Route Card Styles */
.route-card {
    @apply bg-white rounded-2xl shadow-lg p-6 mb-4 border-l-4 border-blue-500 hover:shadow-xl transition-all duration-300;
}

.route-card:hover {
    transform: translateY(-2px);
}

/* Weather Widget */
.weather-widget {
    @apply bg-gradient-to-r from-blue-400 to-purple-500 text-white rounded-xl p-4 text-center;
}

/* Fuel Station Card */
.fuel-station {
    @apply bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300 border-l-4;
}

.fuel-station.petrol {
    @apply border-green-500;
}

.fuel-station.cng {
    @apply border-blue-500;
}

.fuel-station.ev {
    @apply border-yellow-500;
}

/* Navigation Steps */
.nav-step {
    @apply flex items-center p-3 bg-white rounded-lg shadow-sm mb-2 hover:shadow-md transition-all duration-300;
}

.nav-step.current {
    @apply bg-blue-50 border-l-4 border-blue-500;
}

/* Progress Bar */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;
}

.progress-fill {
    @apply h-full bg-gradient-to-r from-blue-500 to-purple-600 transition-all duration-500 ease-out;
}

/* Floating Action Button */
.fab {
    @apply fixed bottom-6 right-6 w-14 h-14 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full shadow-lg flex items-center justify-center hover:shadow-xl transition-all duration-300 z-40;
}

.fab:hover {
    transform: scale(1.1);
}

/* Modal Styles */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-96 overflow-y-auto;
}

/* Toast Notifications */
.toast {
    @apply fixed top-20 right-4 bg-white rounded-lg shadow-lg p-4 border-l-4 z-50 transform translate-x-full transition-transform duration-300;
}

.toast.show {
    transform: translateX(0);
}

.toast.success {
    @apply border-green-500;
}

.toast.error {
    @apply border-red-500;
}

.toast.warning {
    @apply border-yellow-500;
}

/* Map Controls */
.map-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 40;
}

.map-control-btn {
    width: 40px;
    height: 40px;
    background: white;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s;
    cursor: pointer;
}

.map-control-btn:hover {
    background: #f9fafb;
    transform: translateY(-1px);
}

/* Speed Indicator */
.speed-indicator {
    @apply fixed bottom-20 left-4 bg-white rounded-full w-20 h-20 flex items-center justify-center shadow-lg z-40;
}

/* Route Summary */
.route-summary {
    @apply bg-white rounded-t-3xl shadow-2xl p-6 fixed bottom-0 left-0 right-0 transform translate-y-full transition-transform duration-300 z-30;
}

.route-summary.show {
    transform: translateY(0);
}

/* Bottom Navigation Fix */
.mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    background: white !important;
    height: 80px !important;
    width: 100vw !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Vehicle Popup Override */
#vehicle-popup {
    z-index: 999999 !important;
    pointer-events: auto !important;
}

#vehicle-popup-content {
    z-index: 999999 !important;
    pointer-events: auto !important;
    position: fixed !important;
    bottom: 80px !important;
}

#route-details-content {
    position: fixed !important;
    bottom: 80px !important;
}

/* Route Details Popup - Allow map interaction when collapsed */
#route-details-popup {
    pointer-events: none !important;
}

#route-details-popup #route-details-content {
    pointer-events: auto !important;
}

/* Collapsed state shows only header */
#route-details-content {
    overflow: hidden !important;
}

/* Allow scrolling through popup backdrop */
#vehicle-popup:not(.hidden) {
    pointer-events: none !important;
}

#vehicle-popup:not(.hidden) #vehicle-popup-content {
    pointer-events: auto !important;
}

.mobile-bottom-nav .flex {
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

.nav-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: scale(1) !important;
}

.nav-btn:hover {
    transform: scale(1.1) !important;
}

.nav-btn:active {
    transform: scale(0.95) !important;
}

.nav-btn.active {
    transform: scale(1.15) !important;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3)) !important;
}

/* Hide date and time picker dropdown arrows */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    color: transparent !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button {
    display: none !important;
    -webkit-appearance: none !important;
}

input[type="date"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
}

input[type="date"],
input[type="time"] {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
}

/* Disable pull-to-refresh */
body {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

html, body {
    overflow-x: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Red placeholder */
.placeholder-red-500::placeholder {
    color: #ef4444 !important;
    opacity: 1 !important;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        @apply bg-gray-900 text-white;
    }
    
    .dark-mode .bg-white {
        @apply bg-gray-800;
    }
    
    .dark-mode .text-gray-800 {
        @apply text-gray-200;
    }
    
    .dark-mode .border-gray-300 {
        @apply border-gray-600;
    }
}