/* rent-a-car.css */

/* Hero section for car rental */
#car-rental-hero {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 0; /* Less padding if filters are added directly below */
}

#car-rental-hero .section-title {
    margin-bottom: 20px; /* Space for filters if they come here */
}

/* Car Listing Section */
#car-listing .container {
    max-width: 1600px; /* Allow wider container for 4 cards */
}

.car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px; /* Spacing between cards */
    padding-top: 20px;
}

@media (min-width: 768px) {
    .car-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .car-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1300px) { /* Breakpoint for 4 cards */
    .car-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.car-card {
    background-color: #f9f9f9; /* Light background for the card */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.car-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.car-card img {
    width: 100%;
    height: 200px; /* Fixed height for car images */
    object-fit: cover; /* Ensures image covers the area, might crop */
}

.car-details {
    padding: 20px;
    flex-grow: 1; /* Allows this section to grow and push button to bottom */
    display: flex;
    flex-direction: column;
}

.car-details h3 {
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 5px;
    color: #333;
}

.car-details h3 .or-similar {
    font-size: 0.7em;
    color: #777;
    font-weight: normal;
}

.car-category {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 15px;
}

.car-features {
    display: flex;
    gap: 15px; /* Spacing between feature icons */
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #444;
}

.car-features span {
    display: flex;
    align-items: center;
}

.car-features i {
    margin-right: 5px;
    color: var(--primary-color); /* Use existing primary color */
}

.car-mileage {
    font-size: 0.9em;
    color: #4CAF50; /* Green color for included features */
    margin-bottom: 15px;
}

.car-mileage i {
    margin-right: 5px;
}

.car-price {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin-top: auto; /* Pushes price and button to the bottom */
    margin-bottom: 15px;
}

.car-price .price-eur {
    font-size: 1.3em;
    color: var(--primary-color);
}

.car-price .price-total-eur,
.car-price .price-ron {
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
    display: block; /* Show total on a new line */
}
.car-price .price-ron {
    font-style: italic;
}


.btn-book {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    text-align: center;
}

/* Booking Form Section specific styles (if any needed beyond general form styles) */
/* #booking-form .form-layout, */ /* If using similar layout to contact form */
/* #booking-form form { */
    /* Styles specific to booking form layout if different from main form */
/* } */

/* #booking-form .form-group label { */
    /* font-weight: 600; */ /* Example */
/* } */

#masinaSelectata {
    background-color: #e9ecef; /* Slightly different background for readonly field */
    cursor: default;
}

/* Responsive adjustments for car cards if needed beyond grid */
@media (max-width: 500px) {
    .car-details h3 {
        font-size: 1.2em;
    }
    .car-price .price-eur {
        font-size: 1.1em;
    }
    .car-features {
        gap: 10px;
        font-size: 0.85em;
    }
}

/* Ensure form messages are styled if not already globally */
.form-message.active {
    display: block;
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    text-align: center;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}