/**
 * Shared Car Rental landing hero search form layout.
 * Source of truth for visual parity with /cars.
 * Used by: /cars, Automatic/Manual hubs, airport SEO pages, Price Tracker.
 * Scoped to #rental-cars-hero on .page-rental-cars-landing.
 */

/* Full width of .container-wrapper (not .flight-search-form_simple cap). */
.page-rental-cars-landing #rental-cars-hero .flight-search-wrapper,
.page-rental-cars-landing #rental-cars-hero .flight-search-form {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Car hire proportions: align primary column growth with Hotels hero (destination flex ~2.5). */
@media (min-width: 1025px) {
    .page-rental-cars-landing #rental-cars-hero .flight-search-form__search-params:not(.car-hire-search-params--two-locs) .search-field--car-loc-from {
        flex: 2.5 1 220px;
        min-width: 180px;
    }

    .page-rental-cars-landing #rental-cars-hero .flight-search-form__search-params.car-hire-search-params--two-locs .search-field--car-loc-from,
    .page-rental-cars-landing #rental-cars-hero .flight-search-form__search-params.car-hire-search-params--two-locs .search-field--car-loc-to {
        flex: 1 1 160px;
        min-width: 120px;
    }

    .page-rental-cars-landing #rental-cars-hero .search-field--car-slot {
        flex: 0 1 132px;
        min-width: 108px;
        max-width: 160px;
    }
}

/*
 * Full date/time cell clicks: delegated in JS on #ch-search-params (no flex stretch —
 * stretching inputs broke row height vs pick-up location). Cursor hint only.
 */
.page-rental-cars-landing #rental-cars-hero .search-field--car-slot {
    cursor: pointer;
}

.page-rental-cars-landing #rental-cars-hero .search-field--car-slot input,
.page-rental-cars-landing #rental-cars-hero .search-field--car-slot select {
    cursor: pointer;
}

/* Native time selects: restore chevron (flight form uses Select2 on airports). */
.page-rental-cars-landing #rental-cars-hero .search-field--car-slot select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    padding-right: 22px;
}

.page-rental-cars-landing #rental-cars-hero .trip-options {
    margin-top: 12px;
}

.page-rental-cars-landing #rental-cars-hero .trip-options-booking {
    max-width: none;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
}

.page-rental-cars-landing #rental-cars-hero .trip-options-booking .car-hire-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
}

.page-rental-cars-landing #rental-cars-hero .trip-options-booking .car-hire-check .booking-label {
    cursor: pointer;
    margin-bottom: 0;
}

/* Mobile / touch: secondary to hero form — readable, compact rows (desktop ≥1025px unchanged). */
@media (max-width: 1024px) {
    .page-rental-cars-landing #rental-cars-hero .trip-options {
        margin-top: 8px;
    }

    .page-rental-cars-landing #rental-cars-hero .trip-options-booking {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .page-rental-cars-landing #rental-cars-hero .trip-options-booking .car-hire-check {
        min-height: 40px;
        padding: 3px 0;
        align-items: center;
        gap: 8px;
    }

    .page-rental-cars-landing #rental-cars-hero .trip-options-booking .car-hire-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        margin: 0;
        flex-shrink: 0;
        cursor: pointer;
    }

    .page-rental-cars-landing #rental-cars-hero .trip-options-booking .car-hire-check .booking-label {
        font-size: 14px;
        line-height: 1.35;
        font-weight: 400;
        padding: 3px 0 3px 2px;
        flex: 1 1 auto;
    }
}

/*
 * Tablet (576–1024): flight-search-form.scss forces nth-child(1)+(2) to 50% width.
 * Car hire: return row is hidden by default — only pick-up participates, so 50% leaves a blank half-row.
 * Single location → full row; two-loc mode → two equal columns (pick-up + drop-off).
 */
@media (min-width: 576px) and (max-width: 1024px) {
    .page-rental-cars-landing #rental-cars-hero .flight-search-form__search-params.car-hire-search-params:not(.car-hire-search-params--two-locs) .search-field--car-loc-from {
        width: 100%;
        flex: 1 1 100%;
        max-width: 100%;
        border-right: none;
    }

    .page-rental-cars-landing #rental-cars-hero .flight-search-form__search-params.car-hire-search-params--two-locs .search-field--car-loc-from,
    .page-rental-cars-landing #rental-cars-hero .flight-search-form__search-params.car-hire-search-params--two-locs .search-field--car-loc-to {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        box-sizing: border-box;
    }
}

/* Rental hero: AirTrack range calendar (flatpickr-calendar--airtrack-range); separate date fields in markup. */
.page-rental-cars-landing #rental-cars-hero .flight-search-form__search-params {
    overflow: visible;
}

.page-rental-cars-landing #rental-cars-hero .flight-search-wrapper,
.page-rental-cars-landing #rental-cars-hero .price-predictor .container-wrapper {
    overflow: visible;
}