/**
 * Rental search form — styled ONLY through the --fas-* design tokens (tokens.css).
 * Mirrors the sales plugin's fas-search.css. Depends on rental-cards.css.
 */

.fas-rentals-search__form {
    background: var(--fas-surface);
    border: 1px solid var(--fas-border-subtle);
    border-radius: 12px;
    padding: 1rem 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.fas-rentals-search__title {
    margin: 0 0 0.75rem;
    color: var(--fas-text);
    font-size: 1.2rem;
}

/* Search Form v2 — compact, facet-driven sections (no numbered "Step N" chips). */
.fas-rentals-search__group {
    padding: 0.7rem 0 0;
    margin: 0 0 0.6rem;
    border: 0;
    border-top: 1px solid var(--fas-border-subtle);
}

.fas-rentals-search__group:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* CRITICAL: make the JS `.hidden = true` on the baseline date rows actually hide
   them. The rows are `display: grid`, and an author `display` OVERRIDES the UA
   `[hidden] { display: none }`, so without this the hidden baseline stayed visible ALONGSIDE
   the JS-enhanced control (duplicate date controls). Scoped to the widget + only
   affects elements JS explicitly marks hidden, so the no-JS baseline is unaffected. */
.fas-rentals-search [hidden] {
    display: none !important;
}

/* The dates group is the featured gate — set apart with a tinted panel. */
.fas-rentals-search__group--featured {
    background: var(--fas-primary-tint);
    border: 1px solid var(--fas-border-subtle);
    border-radius: var(--fas-radius-md);
    /* SYMMETRIC top/bottom padding → the top gap (panel edge → "Select your dates" heading)
       equals the bottom gap (last date control → panel edge). The heading carries no top
       margin (below) and every inner element's bottom margin is zeroed (below), so ONLY this
       padding governs the top + bottom interior gaps. */
    padding: 1.1rem 1rem;
    margin-bottom: 0.8rem;
}

/* The panel's bottom padding is the SOLE bottom gap in EVERY rate-type state — zero the
   bottom margin on the last date control, whichever it is: the native arrive/depart row
   ([data-fas-date-fields], for Daily/free) OR the JS-injected enhanced control container
   ([data-fas-enhanced], for Weekly/Monthly/Year) AND the .fas-rentals-search__field labels
   the JS appends into it (which the old __row-only rule did NOT cover — the real cause of the
   extra bottom space). The heading's top margin is zeroed too, so top === bottom. */
.fas-rentals-search__group--featured > *:last-child,
.fas-rentals-search__group--featured [data-fas-date-fields],
.fas-rentals-search__group--featured [data-fas-enhanced],
.fas-rentals-search__group--featured [data-fas-enhanced] .fas-rentals-search__field {
    margin-bottom: 0;
}

.fas-rentals-search__group--featured > .fas-rentals-search__label:first-child {
    margin-top: 0;
}

/* Tight section label (replaces the step heading + chip). */
.fas-rentals-search__label {
    display: block;
    margin: 0 0 0.45rem;
    padding: 0;
    color: var(--fas-text);
    font-size: 0.95rem;
    font-weight: 600;
}

.fas-rentals-search__step-hint {
    margin: 0 0 0.6rem;
    color: var(--fas-text-muted);
    font-size: 0.85rem;
}

/* The required-date asterisk. */
.fas-rentals-search__req {
    color: var(--fas-status-sold);
    font-weight: 700;
}

/* The rate-type selector — its own row above the date fields. */
.fas-rentals-search__rate-type {
    margin-bottom: 0.6rem;
}

/* The JS-injected weekly/monthly date controls reuse the __row/__field grid. */
.fas-rentals-search__enhanced {
    margin-bottom: 0;
}

/* Data-driven checkbox grids (towns + amenities): compact multi-column. Tight vertical
   row-gap so the checkboxes read as one compact block (column gap stays comfortable);
   applies to BOTH the featured grid and the secondary grid inside <details>. */
.fas-rentals-search__checkgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.15rem 0.85rem;
}

.fas-rentals-search__check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--fas-text-strong);
}

.fas-rentals-search__facet-count {
    color: var(--fas-text-muted);
    font-size: 0.8rem;
}

/* Amenities overflow — the native <details> "Show more" expander. */
.fas-rentals-search__more {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.fas-rentals-search__more > summary {
    cursor: pointer;
    color: var(--fas-primary);
    font-weight: 600;
}

/* Toggle the summary label: "Show more" when closed → "Show less" when open (CSS-only). */
.fas-rentals-search__more > summary .fas-rentals-search__more-less {
    display: none;
}

.fas-rentals-search__more[open] > summary .fas-rentals-search__more-more {
    display: none;
}

.fas-rentals-search__more[open] > summary .fas-rentals-search__more-less {
    display: inline;
}

.fas-rentals-search__more > .fas-rentals-search__checkgrid {
    margin-top: 0.5rem;
}

.fas-rentals-search__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

/* Accommodation: sleeps / bedrooms / baths — three compact dropdowns on ONE line at every
   width. Tighter gap than the default row (0.75rem) so the section reads compact, and no
   bottom margin (it's the last field section). */
.fas-rentals-search__row--triple {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0;
}

/* Let each column shrink so the label span wraps instead of overflowing at narrow widths. */
.fas-rentals-search__row--triple .fas-rentals-search__field {
    min-width: 0;
}

/* Compact heading→dropdowns gap for the accommodation section (scoped via :has; degrades
   gracefully where unsupported). */
.fas-rentals-search__group:has(.fas-rentals-search__row--triple) > .fas-rentals-search__label {
    margin-bottom: 0.3rem;
}

/* Stay 3-across on small screens too (dropdowns are narrow) — just tighten the column gap so
   they fit ~320px without overflow, instead of collapsing to one column. */
@media (max-width: 480px) {
    .fas-rentals-search__row--triple {
        gap: 0.4rem;
    }
}

.fas-rentals-search__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--fas-text-muted);
}

.fas-rentals-search__field input,
.fas-rentals-search__field select {
    border: 1px solid var(--fas-border);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    font-size: 0.9rem;
    color: var(--fas-text);
    background: var(--fas-surface);
}

.fas-rentals-search__field input:focus,
.fas-rentals-search__field select:focus {
    outline: 2px solid var(--fas-primary-ring);
    outline-offset: 1px;
}

/* Both action buttons share ONE box model so they render the same height + baseline
   (identical box-sizing / border / padding / line-height); only the colours differ. */
.fas-rentals-search__submit,
.fas-rentals-search__catalog {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.55rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.fas-rentals-search__submit {
    background: var(--fas-primary);
    color: var(--fas-surface);
}

.fas-rentals-search__submit:hover {
    background: var(--fas-primary-hover);
}

.fas-rentals-search__catalog {
    background: transparent;
    color: var(--fas-primary);
    border-color: var(--fas-border);
}

.fas-rentals-search__catalog:hover {
    background: var(--fas-bg-subtle);
}

/* Bottom actions: primary "Find Property" + secondary "See full catalog" + Reset — all
   vertically centered on a shared baseline. */
.fas-rentals-search__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.6rem;
}

/* Reset = a tertiary "clear all filters" link (goes to the clean form URL). */
.fas-rentals-search__reset {
    display: inline-flex;
    align-items: center;
    color: var(--fas-text-muted);
    font-size: 0.85rem;
    text-decoration: underline;
    padding: 0.55rem 0.4rem;
    line-height: 1.3;
}

.fas-rentals-search__reset:hover {
    color: var(--fas-text-strong);
}

/* Results area: the sort bar (count + sort control) above the grid + the return link. */
.fas-rentals-search__resultsbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.fas-rentals-search__sort {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.fas-rentals-search__sort-go {
    border: 1px solid var(--fas-border);
    border-radius: 8px;
    background: var(--fas-surface);
    color: var(--fas-text-strong);
    padding: 0.45rem 0.8rem;
    cursor: pointer;
}

.fas-rentals-search__return {
    display: inline-block;
    margin-bottom: 0.6rem;
    color: var(--fas-primary);
    font-size: 0.85rem;
    text-decoration: none;
}

.fas-rentals-search__return:hover {
    text-decoration: underline;
}

.fas-rentals-search__count {
    color: var(--fas-text-muted);
    font-size: 0.9rem;
}

.fas-rentals-search__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 1.25rem;
}

.fas-rentals-search__page {
    border: 1px solid var(--fas-border);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    color: var(--fas-text-strong);
    text-decoration: none;
}

.fas-rentals-search__page.is-current {
    background: var(--fas-primary);
    color: var(--fas-surface);
    border-color: var(--fas-primary);
}

.fas-rentals-search__empty,
.fas-rentals-search__error {
    color: var(--fas-text-muted);
    padding: 1rem 0;
}

/* Active-filter chips (removable pills) above the results. */
.fas-rentals-search__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.fas-rentals-search__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--fas-primary-tint);
    color: var(--fas-text-strong);
    border: 1px solid var(--fas-border-subtle);
    border-radius: var(--fas-radius-full);
    padding: 0.25rem 0.6rem;
    font-size: 0.82rem;
    text-decoration: none;
}

.fas-rentals-search__chip:hover {
    border-color: var(--fas-border);
}

.fas-rentals-search__chip-x {
    color: var(--fas-text-muted);
    font-weight: 700;
    line-height: 1;
}

.fas-rentals-search__chips-clear {
    color: var(--fas-text-muted);
    font-size: 0.82rem;
    text-decoration: underline;
    margin-left: 0.25rem;
}

/* Loading skeleton shown in the results while an AJAX search is in flight. */
.fas-rentals-search__skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
}

.fas-rentals-search__skeleton > span {
    display: block;
    height: 220px;
    border-radius: var(--fas-radius-lg);
    background: linear-gradient(90deg, var(--fas-bg-subtle) 25%, var(--fas-border-subtle) 37%, var(--fas-bg-subtle) 63%);
    background-size: 400% 100%;
    animation: fas-rentals-shimmer 1.3s ease-in-out infinite;
}

@keyframes fas-rentals-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fas-rentals-search__skeleton > span { animation: none; }
}

/* With JS/AJAX active, the no-JS "Sort" submit button is redundant. */
.fas-rentals-search.is-ajax [data-fas-sort-go] {
    display: none;
}

/* The availability-first prompt shown until a valid date window is chosen. */
.fas-rentals-search__prompt {
    color: var(--fas-text-strong);
    background: var(--fas-bg-subtle);
    border: 1px dashed var(--fas-border);
    border-radius: var(--fas-radius-md);
    padding: 1.1rem 1.25rem;
    text-align: center;
    font-size: 0.95rem;
}