/*
 * The listing's search bar.
 *
 * Figma: bar 1:3308, panels 1:3179 / 1:3437 / 1:3566 / 1:3695, mobile sheets
 * 1:4978 / 1:5126 / 1:5194 / 1:5267.
 *
 * Desktop is a 1307-wide white card sitting over the bottom of the hero with
 * its panels dropping out of it. Mobile is the same markup with the fields
 * stacked and each panel promoted to a full-screen sheet - so one DOM, and the
 * chrome each width does not use (the sheet's Back and Apply, the desktop
 * dropdown shadow) is hidden rather than duplicated.
 */

.stay-search {
    position: relative;
    z-index: 20;
    max-width: 1307px;
    margin: 0 auto;
    font-family: var(--font-secondary);
}

/*
 * An open panel has to clear the sticky header, which sits at 1001. Raising the
 * panel alone does nothing: it is inside two positioned ancestors, and a child
 * cannot escape the stacking context its parent's z-index opens. So the whole
 * bar - and the wrapper around it - is lifted for as long as a panel is open,
 * and drops back to 20 the moment it closes, where the header belongs on top.
 */
.filter-wrapper:has(.stay-search.is-panel-open),
.stay-search.is-panel-open {
    z-index: 1002;
}

/*
 * style.css sets `font-family` on div, span, p, label, input and a, which beats
 * inheritance from the form. So every text element here names its own face -
 * the same thing big-menu.css does, and the reason `inherit` is not enough.
 */
.stay-search :where(span, p, div, label, input, button) {
    font-family: var(--font-secondary);
}

.stay-search-bar {
    display: grid;
    gap: 16px;
    padding: 24px;
    background: var(--color-offwhite);
    /* The frame's card is a soft rectangle, not a sharp one. */
    border-radius: 12px;
    box-shadow: 0 12px 40px rgb(0 0 0 / 8%);
}

.stay-search-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Body md - Geologica Light 18/1.5 - in Black 200. */
.stay-search-label {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-shark);
}

/*
 * A button rather than an input: every panel writes to a hidden field or to
 * its own controls, so this only ever reports. Underlined to read as the field
 * it stands in for.
 */
.stay-search-value {
    padding: 0 0 8px;
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-shark);
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--Light-Grey);
    cursor: pointer;
}

.stay-search-value.is-empty {
    color: var(--Medium-Grey);
}

/* Button CTA - Geologica Regular 16/24 - on Shark, 119 x 60 in the frame. */
.stay-search-submit {
    padding: 18px 32px;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-offwhite);
    background: var(--color-shark);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

.stay-search-submit:hover {
    opacity: 0.9;
}

/* Panels */

.stay-search-panel {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
}

.stay-search-panel[hidden] {
    display: none;
}

.stay-search-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--Light-Grey);
}

.stay-search-back {
    display: inline-flex;
    padding: 4px;
    background: none;
    border: 0;
    cursor: pointer;
}

.stay-search-back svg {
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
}

.stay-search-panel-title {
    flex: 1;
    margin: 0;
    font-family: var(--font-primary) !important;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
}

.stay-search-group-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    color: var(--Medium-Grey);
    text-transform: uppercase;
}

.stay-search-locations ul,
.stay-search-types {
    padding: 0;
    margin: 0;
    list-style: none;
}

.stay-search-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-black);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

.stay-search-option:hover,
.stay-search-option.is-selected {
    background: var(--color-white-100);
}

/* Steppers */

.stay-stepper {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}

.stay-stepper-text {
    display: flex;
    flex-direction: column;
}

.stay-stepper-label {
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-black);
}

.stay-stepper-hint {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--Medium-Grey);
}

.stay-stepper-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--Light-Grey);
    border-radius: 2px;
}

.stay-stepper-step {
    width: 40px;
    height: 40px;
    font-size: 18px;
    line-height: 1;
    color: var(--color-black);
    background: none;
    border: 0;
    cursor: pointer;
}

.stay-stepper-control input {
    width: 44px;
    padding: 0;
    font-family: var(--font-secondary);
    font-size: 18px;
    text-align: center;
    background: none;
    border: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.stay-stepper-control input::-webkit-outer-spin-button,
.stay-stepper-control input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Facility checkboxes */

.stay-search-facilities {
    padding: 0 16px 8px;
    margin: 0;
    list-style: none;
}

/*
 * Aligned to the first line, not to the middle of the label: "Walking distance
 * from the beach" wraps to two lines, and centring put its box halfway down the
 * pair while every other row's sat on its single line.
 */
.stay-search-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    cursor: pointer;
}

.stay-search-check input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    /* Half the difference between the 27px line box and the 20px control. */
    margin-top: 3px;
    cursor: pointer;
    accent-color: var(--color-black);
}

.stay-search-panel-foot {
    padding: 16px;
    margin-top: auto;
}

.stay-search-apply {
    width: 100%;
    padding: 18px 24px;
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-white);
    background: var(--color-black);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

/*
 * Mobile: every panel is a sheet over the page.
 *
 * Fixed to the viewport rather than absolutely placed in the bar, so a long
 * location list scrolls inside the sheet instead of pushing the listing down.
 */
@media (width < 992px) {
    /*
     * Node 1:2345 has the whole card above the fold on a 375 x 812 screen: the
     * band ends at 496, the card overlaps it by 104 and has to finish inside
     * 812. Four label-and-value fields at the desktop rhythm overran that by
     * about 90, so the padding and the gaps come in.
     */
    .stay-search-bar {
        gap: 12px;
        /* Node 1:2361 is 343 inside a 375 frame - inset from the band, not
           flush with it. */
        margin-inline: 16px;
        padding: 20px;
        border-radius: 12px;
    }

    .stay-search-field {
        gap: 4px;
    }

    .stay-search-submit {
        padding: 16px 32px;
    }

    .stay-search-panel {
        position: fixed;
        inset: 0;
        /* Over the sticky header, which is 1001 - the Big Menu overlay
           clears it the same way at 1002. */
        z-index: 1002;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .stay-search-locations,
    .stay-search-types,
    .stay-search-panel .stay-search-group-title {
        padding-inline: 16px;
    }

    .stay-search-locations {
        padding-block: 16px;
    }

    .stay-search-group-title {
        margin-top: 24px;
    }

    .stay-search-panel-foot {
        position: sticky;
        bottom: 0;
        background: var(--color-white);
    }
}

@media (width >= 992px) {
    /*
     * The frame's own measures (node 1:3308, a 1307 container): 44 of padding,
     * fields of 380 / 180 / 180 / 200 with 40 between them, and the button 119
     * x 60 at the end. The field widths are `fr` so the bar still divides
     * sensibly at other widths, in the proportion the frame draws.
     */
    .stay-search-bar {
        grid-template-columns: 380fr 180fr 180fr 200fr auto;
        gap: 40px;
        align-items: end;
        padding: 44px;
    }

    /*
     * The panel hangs off the field rather than the bar, so each one lines up
     * under the control it belongs to, as all five frames draw it.
     */
    .stay-search-panel {
        position: absolute;
        top: calc(100% + 24px);
        left: -16px;
        z-index: 30;
        min-width: 260px;
        padding: 16px 0;
        border-radius: 2px;
        box-shadow: 0 12px 40px rgb(0 0 0 / 12%);
    }

    .stay-search-panel-wide {
        left: 0;
        width: 806px;
        max-width: calc(100vw - 96px);
        padding: 24px;
    }

    /*
     * Property Type - node 1:3437. A plain list panel sits under its field
     * rather than 16px to the left of it: the -16px above pulls the option
     * *text* into line with the field's label, which is right for the wide
     * locations panel but leaves a narrow one visibly overhanging its column.
     * The frame aligns the card's edge with the field and indents the options
     * inside it.
     *
     * The frame's card is 192 wide over six types; the catalogue has ten, some
     * of them long ("Apartment Complex"), so the width is a floor and the
     * options refuse to wrap - a type that needs more room widens the card
     * instead of becoming two lines.
     */
    .stay-search-panel-list {
        left: 0;
        min-width: 192px;
        padding: 20px 12px;
    }

    .stay-search-panel-list .stay-search-group-title {
        margin: 0 0 8px;
        padding: 0 8px;
    }

    .stay-search-panel-list .stay-search-option {
        padding: 8px;
        white-space: nowrap;
    }

    /* The bar's own label and Search button are the desktop chrome. */
    .stay-search-panel-head,
    .stay-search-panel-foot {
        display: none;
    }

    .stay-search-locations {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        align-items: start;
    }

    /* Node 1:3179 sets the Popular column's destinations in the body size
       rather than the 16px the region lists use, which is what marks it out
       as the shortcut before the full lists. */
    .stay-search-location-popular .stay-search-option {
        font-size: 20px;
    }

    .stay-search-option {
        padding: 8px 12px;
    }

    .stay-search-submit {
        align-self: end;
        min-width: 119px;
        height: 60px;
        padding: 0 24px;
    }
}