/* Rental Cars results page — car-specific layer only.
   The shared results design system is reused verbatim from the Hotels redesign:
   this page also loads shared/resultsLayout.css and hotelSearch/results.css and
   the compiled `frontend` bundle (filters-modal / filters-section / filters-checkbox /
   comparison-modal / comparison-button / range-slider / fcard). Only the car hero,
   the car search form and a few car-only card lines live here. Everything else
   (quickbar, toolbar, cards, skeletons, loading status, states, compare tray/table,
   offers modal) reuses the `hsr-*` atoms so /cars matches /hotels pixel-for-pixel. */

.page-rental-cars-results {
    background: var(--bg-color-primary);
}

/* Match the Hotels scroll-lock: when html uses scrollbar-gutter:stable, Bootstrap's
   modal-open padding-right is pure over-compensation (empty strip + content shift). */
@supports (scrollbar-gutter: stable) {
    body.page-rental-cars-results.modal-open {
        padding-right: 0 !important;
    }
}

/* Results section shell: padding/gap/sidebar come from `.results-layout`
   (shared/resultsLayout.css). Keep the section padding-free. */
.page-rental-cars-results .rcr-results {
    padding: 0;
}

@media (max-width: 767px) {
    .page-rental-cars-results .rcr-results .results-layout {
        padding-top: 18px;
        gap: 0;
    }
}

/* ---------- Results-header search (navy band + white segmented panel) ----------
   The dark navy band + the white segmented panel are produced by the compiled
   `.price-predictor.result-page` + `.flight-search-form` styles (same components
   as the /hotels results header + the Cars homepage hero). Only car-specific glue
   lives here. The search form itself is the shared car_hire/_search_form.html.twig
   component driven by carHire/searchForm.js + carHire/landingSearch.js. */

/* Accessible page heading — visual hierarchy comes from the search panel + results. */
.rcr-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Match the Hotels hero overlap: the 110px navy band crosses the segmented panel
   (shared result-page padding is 40px; Hotels ships 68px). */
.page-rental-cars-results .price-predictor.result-page.rcr-hero {
    padding-top: 68px;
}

/* The segmented panel wrapper fills the results column. */
.page-rental-cars-results .rcr-search-wrapper {
    width: 100%;
}

/* Cars form fills the panel width (same as the homepage hero). */
.page-rental-cars-results .rcr-hero .flight-search-form {
    width: 100%;
    max-width: none;
    margin: 0;
}
.page-rental-cars-results .rcr-hero .flight-search-form__search-params {
    overflow: visible;
}

/* Location validation states (set by carHire/locationAutocomplete.js). */
.page-rental-cars-results .rcr-hero .search-field--car-loc-from input.is-invalid,
.page-rental-cars-results .rcr-hero .search-field--car-loc-to input.is-invalid,
.car-mobile-search-modal .search-field--car-loc-from input.is-invalid,
.car-mobile-search-modal .search-field--car-loc-to input.is-invalid {
    color: #dc2626;
}
.page-rental-cars-results .rcr-hero input.is-unresolved,
.car-mobile-search-modal input.is-unresolved {
    color: #b45309;
}

/* Desktop field proportions mirror the Cars homepage hero. */
@media (min-width: 1025px) {
    .page-rental-cars-results .rcr-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-results .rcr-hero .flight-search-form__search-params.car-hire-search-params--two-locs .search-field--car-loc-from,
    .page-rental-cars-results .rcr-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-results .rcr-hero .search-field--car-slot {
        flex: 0 1 132px;
        min-width: 108px;
        max-width: 160px;
    }
    /* Cancel is a mobile-only affordance inside the Edit Search sheet. */
    .page-rental-cars-results .rcr-hero .car-hire-search-form__cancel {
        display: none !important;
    }
}

/* Date/time slots: whole-cell click is delegated in carHire/searchForm.js. */
.page-rental-cars-results .rcr-hero .search-field--car-slot,
.page-rental-cars-results .rcr-hero .search-field--car-slot input,
.page-rental-cars-results .rcr-hero .search-field--car-slot select,
.car-mobile-search-modal .search-field--car-slot,
.car-mobile-search-modal .search-field--car-slot input,
.car-mobile-search-modal .search-field--car-slot select {
    cursor: pointer;
}

/* Native time selects: restore the chevron (flight form uses Select2 on airports). */
.page-rental-cars-results .rcr-hero .search-field--car-slot select,
.car-mobile-search-modal .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;
}

/* Different drop-off row (mirror homepage hero). */
.page-rental-cars-results .rcr-hero .trip-options,
.car-mobile-search-modal .trip-options {
    margin-top: 12px;
}
.page-rental-cars-results .rcr-hero .trip-options-booking,
.car-mobile-search-modal .trip-options-booking {
    max-width: none;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
}
.page-rental-cars-results .rcr-hero .trip-options-booking .car-hire-check,
.car-mobile-search-modal .trip-options-booking .car-hire-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.page-rental-cars-results .rcr-hero .trip-options-booking .car-hire-check .booking-label,
.car-mobile-search-modal .trip-options-booking .car-hire-check .booking-label {
    cursor: pointer;
    margin-bottom: 0;
    /* Results hero + Edit Search sheet sit on a light surface, so the different
       drop-off label is dark (the shared form defaults to white for the navy
       homepage hero). */
    color: var(--text-color-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}
.page-rental-cars-results .rcr-hero .trip-options-booking .car-hire-check input[type="checkbox"],
.car-mobile-search-modal .trip-options-booking .car-hire-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--color-skyBlue);
    cursor: pointer;
}

/* ---------- Mobile compact summary + Edit Search sheet ---------- */
/* The compact summary itself is the shared `.flight-search-compact` (compiled):
   hidden on desktop, shown <= 1024px. Only car-specific tweaks here. */
@media (max-width: 1024px) {
    .car-search-compact .flight-search-compact__body {
        border-radius: 10px;
    }
    .car-search-compact .flight-search-compact__summary,
    .car-search-compact .flight-search-compact__details {
        min-width: 0;
    }
    .car-search-compact .flight-search-compact__details {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .car-search-compact .flight-search-compact__route {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Inside the Edit Search sheet the Cars form is full width and stacks. */
    .car-mobile-search-modal .flight-search-form {
        width: 100%;
    }
    .car-mobile-search-modal .flight-search-form__search-params {
        overflow: visible;
        /* Cars has no tab strip above the fields (unlike the flight form). */
        border-radius: 10px;
    }
    .car-mobile-search-modal .car-hire-search-form__cancel {
        display: flex !important;
    }
    /* Cancel + Search share the last row, full width, easy to tap. */
    .car-mobile-search-modal .car-hire-search-params > .search-field:last-child {
        display: flex;
        flex-direction: row;
        gap: 12px;
        width: 100%;
    }
    .car-mobile-search-modal .car-hire-search-params > .search-field:last-child .msm-btn,
    .car-mobile-search-modal .car-hire-search-params > .search-field:last-child .search-button {
        flex: 1;
        width: auto;
        max-width: none;
        margin: 0;
    }
}

/* Tablet (576–1024): single location → full row; two-loc → two equal columns. */
@media (min-width: 576px) and (max-width: 1024px) {
    .car-mobile-search-modal .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;
    }
    .car-mobile-search-modal .flight-search-form__search-params.car-hire-search-params--two-locs .search-field--car-loc-from,
    .car-mobile-search-modal .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;
    }
}

/* Results Edit Search uses Hotels-style .location-modal / .mobile-date-modal.
   Keep the legacy Bootstrap Cars location shell out of this page's stack. */
.page-rental-cars-results #chLocationModal,
.page-rental-cars-results #chLocationModal.show {
    display: none !important;
}

/* Validation notice (set by carHire/landingSearch.js). */
.page-rental-cars-results .rcr-hero .ch-search-notice,
.car-mobile-search-modal .ch-search-notice {
    margin: 12px 0 0;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #dc2626;
    text-align: center;
}

/* ---------- Car image presentation ----------
   Vehicle photos are studio cut-outs (not edge-to-edge like hotel photos), so
   `cover` crops them. Show the whole car with `contain` + internal padding,
   centered, on the same clean media background. Card size/layout unchanged.
   Scoped to /cars so /hotels photos keep `cover`. Applies to desktop + mobile. */
.page-rental-cars-results .hsr-card__media img {
    object-fit: contain;
    object-position: center;
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
/* Neutral generic vehicle illustration — fill the media slot without distortion. */
.page-rental-cars-results .hsr-card__media img.rcr-card__vehicle-img--placeholder {
    object-fit: contain;
    object-position: center;
    padding: 12px;
    background: #f8fafc;
}

/* ---------- Car-specific card lines (reuse hsr-card shell + gray line language) ---------- */
.hsr-card__specs,
.rcr-card__specs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px 0;
    margin: 0;
    color: var(--text-color-secondary);
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rcr-card__spec-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 0 1 auto;
}
.rcr-card__spec-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: #6b7280;
}
.rcr-card__spec-label {
    min-width: 0;
}
.rcr-card__spec-sep {
    display: inline-block;
    margin: 0 7px;
    color: #9ca3af;
    flex: 0 0 auto;
}
.rcr-card__similar {
    margin: 2px 0 0;
    color: var(--color-gray-500);
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}
.rcr-card__pickup {
    margin: 2px 0 0;
    color: var(--color-gray-500);
    font-size: 13px;
    font-family: "Open Sans", sans-serif;
    line-height: 1.4;
}
.rcr-card__more-deals {
    margin: 0;
    color: var(--color-skyBlue);
    font-size: 12px;
    font-weight: 600;
}

/* Desktop: split central body into info | benefits so whitespace is used.
   Pricing stays in .hsr-card__cta. Stack on narrower viewports. */
.page-rental-cars-results .rcr-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}
.page-rental-cars-results .rcr-card__body.has-benefits {
    grid-template-columns: minmax(0, 1.15fr) minmax(150px, 0.85fr);
    column-gap: 20px;
    row-gap: 8px;
}
.page-rental-cars-results .rcr-card__main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.page-rental-cars-results .rcr-card__benefits-col {
    min-width: 0;
    padding-top: 2px;
}
.page-rental-cars-results .rcr-card__benefits-col .hsr-card__benefits {
    margin: 0;
}

@media (max-width: 980px) {
    .page-rental-cars-results .rcr-card__body.has-benefits {
        grid-template-columns: minmax(0, 1fr);
    }
}

.page-rental-cars-results .rcr-card__via {
    display: block;
    margin: 0 0 2px;
    color: #4b5563;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
.page-rental-cars-results .rcr-card__actions {
    align-items: flex-start;
}
.page-rental-cars-results .rcr-card__cta-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.page-rental-cars-results .rcr-card__compare-deals {
    padding: 0;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .page-rental-cars-results .rcr-card__actions {
        align-items: center;
    }
    .page-rental-cars-results .rcr-card__cta-stack {
        align-items: flex-end;
    }
}

/* Car deposit / taxes note reuses the hotel taxes line treatment. */
.rcr-card__deposit {
    font-size: 11px;
    color: var(--color-gray-500);
}

/* Rental supplier mark: readable next to the name (not favicon-sized). */
.page-rental-cars-results .hsr-card__provider {
    align-items: center;
    gap: 6px;
}
.page-rental-cars-results .hsr-card__provider-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 26px;
    max-width: 120px;
}
.page-rental-cars-results .hsr-card__provider-logo {
    display: block;
    height: 26px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    object-position: left center;
}

/* ---------- Deals modal: booking-provider focused rows ---------- */
#rcrDealsModal .rcr-deal-row {
    align-items: flex-start;
    padding: 14px 0;
}
#rcrDealsModal .hsr-offers-modal__prov {
    align-items: center;
    gap: 12px;
}
#rcrDealsModal .hsr-offers-modal__logo {
    height: 32px;
    max-width: 120px;
}
#rcrDealsModal .rcr-deal__prov-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
#rcrDealsModal .hsr-offers-modal__prov-text {
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    white-space: normal;
}
#rcrDealsModal .rcr-deal__rating-badge {
    flex-shrink: 0;
}
#rcrDealsModal .rcr-deal__benefits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 100%;
}
#rcrDealsModal .rcr-deal__benefit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #6b7280;
}
#rcrDealsModal .rcr-deal__benefit-check {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: #15803d;
}
#rcrDealsModal .hsr-offers-modal__info {
    gap: 4px;
}

/* ---------- Compare cars modal: compact, fully visible vehicle images ---------- */
#rcrCompareModal .hsr-cmp__media {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 132px;
    padding: 12px 14px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
}

#rcrCompareModal .hsr-cmp__media img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

#rcrCompareModal .hsr-cmpm__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 80px;
    height: 56px;
    padding: 6px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
}

#rcrCompareModal .hsr-cmpm__thumb img {
    position: static;
    inset: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Cars compare: do not pin the compact name row — it overlaps specs while scrolling. */
#rcrCompareModal .hsr-cmp__c--ctx-label,
#rcrCompareModal .hsr-cmp__c--ctx-name {
    position: static;
    top: auto;
    z-index: auto;
    box-shadow: none;
}

/* Tracker entry banner */
.page-rental-cars-results .rcr-tracker-banner {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #cfe0ea;
    background: #eef6fa;
}
.page-rental-cars-results .rcr-tracker-banner__text {
    margin: 0;
    font-family: \"Open Sans\", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #3d4f5a;
}
.page-rental-cars-results .rcr-tracker-banner__text a {
    color: #10374c;
    font-weight: 600;
}
.price-alert-modal__context-note {
    margin: 0 0 10px;
    font-family: \"Open Sans\", sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7f8a;
}