/* Custom styles for Gas Tank Calculator */

/* Smooth transitions */
.transition-colors {
    transition: all 0.3s ease;
}

/* Input focus styles */
input:focus, select:focus {
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
}

/* Fuel Gauge Styles */
.fuel-gauge-container {
    height: 60px;
    margin-bottom: 10px;
}

.fuel-gauge-bg {
    position: absolute;
    width: 100%;
    height: 24px;
    background: linear-gradient(to right, #ef4444, #f59e0b, #4ade80);
    border-radius: 12px;
    overflow: hidden;
}

/* Fuel gauge markers */
.fuel-gauge-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, transparent 24.5%, white 24.5%, white 25.5%, transparent 25.5%),
        linear-gradient(to right, transparent 49.5%, white 49.5%, white 50.5%, transparent 50.5%),
        linear-gradient(to right, transparent 74.5%, white 74.5%, white 75.5%, transparent 75.5%);
    pointer-events: none;
}

.fuel-gauge-slider {
    position: relative;
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    z-index: 10;
}

.fuel-gauge-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 24px;
    background: white;
    border: 2px solid #4b5563;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.fuel-gauge-slider::-moz-range-thumb {
    width: 16px;
    height: 24px;
    background: white;
    border: 2px solid #4b5563;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Custom scrollbar for car list */
#carsList::-webkit-scrollbar {
    width: 6px;
}

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

#carsList::-webkit-scrollbar-thumb {
    background: #4ade80;
    border-radius: 10px;
}

#carsList::-webkit-scrollbar-thumb:hover {
    background: #22c55e;
}

/* Car list responsive height adjustments */
#carsList {
    max-height: 240px; /* Default height (equivalent to max-h-60) */
    overflow-y: auto;
}

/* Car list item styles */
.car-item {
    border-left: 3px solid #4ade80;
    transition: all 0.2s ease;
}

.car-item:hover {
    background-color: #f0fdf4;
}

/* Animation for results section */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#resultsSection {
    animation: fadeIn 0.4s ease-out;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Adjust car list for small screens */
    #carsList {
        max-height: 35vh; /* Use viewport height for better responsiveness */
    }
    
    /* Make car items more compact on small screens */
    .car-item {
        padding: 8px;
        margin-bottom: 8px;
    }
    
    /* Improve spacing in the configuration modal for small screens */
    #configModal .bg-white {
        padding: 16px;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Even smaller screens (phone) */
@media (max-width: 380px) {
    #carsList {
        max-height: 30vh;
    }
    
    /* Further compact car items */
    .car-item {
        padding: 6px;
    }
    
    /* Make action buttons more accessible on very small screens */
    .car-item .flex.space-x-2 {
        margin-left: 8px;
    }
}