/*
 * Search v2 (search/index2.php) — the compact filter bar and its Filters panel.
 *
 * Scoped to .sv2-wrap so nothing here reaches index.php, which keeps its own inline styles. The bar
 * is sticky (inherited .search-filters), so its height is the point: one row, about 64px, instead of
 * three rows of labelled button groups.
 */

.sv2-wrap {
    background: #222;
    border-radius: 14px;
    padding: 12px 22px;
}

.sv2-label {
    display: block;
    font: 12px/1.4 'Barlow Condensed', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 3px;
}

/* ---- the bar ---- */
.sv2-bar {
    display: flex;
    align-items: center;
    gap: 14px 22px;
    flex-wrap: wrap;
}

.sv2-dates { display: flex; flex-direction: column; margin: 0; }
.sv2-wrap .sv2-date-input {
    min-width: 220px;
    height: 40px;
    margin: 0;              /* style.css gives every text input margin-bottom: 15px — it lifted this off the line */
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #2b2b2b;
    color: #fff;
    font-size: 15px;
    text-align: center;
}

/* Everything in the bar sits on one centre line (the bar is align-items: center). */
.sv2-pills { display: flex; gap: 10px; }

/*
 * Borderless on purpose. style.css sets button:hover { border: 0 }, so a pill with a 1px outline lost
 * it on hover and shifted. Background only, in the old buttons' colours: #2b2b2b resting, #e4a853 on
 * hover, #aa8453 when on — nothing changes size, so nothing moves.
 */
.sv2-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #2b2b2b;
    color: #fff;
    font: 15px/1 'Barlow', sans-serif;
    cursor: pointer;
    transition: background-color .15s;
}
.sv2-pill:hover { background: #e4a853; color: #fff; }
.sv2-pill[aria-pressed="true"],
.sv2-pill[aria-expanded="true"] { background: #aa8453; }
.sv2-pill svg { flex: none; }

.sv2-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

/* Sort: the same isotope buttons, smaller, pushed to the right. */
.sv2-wrap .sv2-sorts {
    float: none;
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
}
.sv2-wrap .sv2-sort-label { margin: 0 10px 0 0; }
.sv2-wrap .sv2-sorts .button,
.sv2-wrap .sv2-panel .button {
    height: 36px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 36px;
}

/* ---- the panel ---- */
.sv2-panel {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sv2-panel[hidden] { display: none; }

.sv2-panel-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}
.sv2-panel-row > .sv2-label { width: 130px; flex: none; margin: 0; }
.sv2-wrap .sv2-panel .button-group { float: none; margin: 0; display: flex; flex-wrap: wrap; align-items: center; }
.sv2-wrap .sv2-price { min-width: 0; width: 360px; max-width: 100%; }

.sv2-exact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 12px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    cursor: pointer;
}
.sv2-exact input { margin: 0; accent-color: #aa8453; }

.sv2-panel-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
    padding-top: 6px;
}
.sv2-link {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
}
.sv2-done {
    height: 38px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #aa8453;
    color: #fff;
    font: 14px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
}

/* ---- phones ---- */
@media (max-width: 768px) {
    .sv2-wrap { padding: 12px 14px; }
    .search-filters .sv2-wrap { margin-top: 40px; }
    /*
     * Dates, Allows pets and Filters on one line: the date field takes whatever the two pills leave
     * and its text scales down to fit; the pills tighten a little. Sort keeps its own row below.
     */
    .sv2-bar { gap: 10px 8px; }
    .sv2-dates { flex: 1 1 0; min-width: 0; }
    .sv2-wrap .sv2-date-input { width: 100%; min-width: 0; padding: 0 8px; font-size: 13px; letter-spacing: -0.2px; }
    .sv2-pills { flex: none; gap: 8px; }
    .sv2-pill { padding: 0 13px; gap: 6px; font-size: 14px; }
    .sv2-wrap .sv2-sorts { margin: 0; width: 100%; overflow-x: auto; }
    .sv2-panel-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .sv2-panel-row > .sv2-label { width: auto; }
    .sv2-wrap .sv2-price { width: 100%; }
}

/* =========================================================================================
 * Map view (search/js/search-map.js)
 * ======================================================================================= */

/* Results header: the count on the left, the Grid | Map switch on the right. */
.sv2-results-head {
    display: flex;
    align-items: baseline;              /* the switch's text sits on the count's baseline */
    justify-content: space-between;
    gap: 16px;
}
.sv2-results-head .section-title { margin: 0 !important; }   /* its own bottom margin pushed the switch below its centre line */

.sv2-view {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    position: relative;
    top: -10px;                         /* baseline-aligned, the box hung below the count; this rests its bottom on the baseline */
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #2b2b2b;
    color: rgba(255, 255, 255, 0.85);
    font: 13px/30px 'Barlow Condensed', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.sv2-view svg { flex: none; }
.sv2-view:hover { background: #e4a853; color: #fff; }
.sv2-view.is-on { background: #aa8453; color: #fff; }

/* The map: short on purpose — enough to show the spread of the valley, not to bury the grid. */
.sv2-map-wrap {
    position: relative;
    margin: 22px 0 34px;
}
.sv2-map-wrap[hidden] { display: none; }
.sv2-map {
    height: 380px;
    border-radius: 14px;
    overflow: hidden;
    background: #242f3e;
}
.sv2-map-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
}

/* Price bubbles. Fixed size and no border, so hover changes colour only and nothing shifts. */
.sv2-bubble {
    position: absolute;
    transform: translate(-50%, -50%);
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #1b1b1b;
    font: 600 14px/30px 'Barlow', sans-serif;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.sv2-bubble:hover { background: #e4a853; color: #fff; z-index: 2; }
.sv2-bubble.is-active { background: #aa8453; color: #fff; z-index: 3; }

/* The popup card, above its bubble. */
.sv2-pop {
    position: absolute;                 /* placed in px by search-map.js, in .sv2-map-wrap */
    width: 290px;
    background: #222;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    z-index: 5;
}
/* style.css has `a, a:hover { display: inline-block }`, which outranks a single class: on hover the
   link shrank to its contents and the photo shrank with it. Two classes keep it a block either way. */
.sv2-pop .sv2-pop-link,
.sv2-pop .sv2-pop-link:hover { display: block; color: #fff; text-decoration: none; }
.sv2-pop img { display: block; width: 100%; height: 150px; object-fit: cover; transition: none; }
.sv2-pop-body { display: block; padding: 12px 16px 14px; }
.sv2-pop-title { display: block; font: 21px/1.25 'Gilda Display', serif; color: #fff; }
.sv2-pop-city { display: block; font: 12px/1.5 'Barlow Condensed', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #aa8453; margin-top: 2px; }
.sv2-pop-specs { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-top: 6px; }
.sv2-pop-price { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.85); margin-top: 6px; }
.sv2-pop-price strong { color: #fff; font-size: 16px; }
.sv2-pop-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #1b1b1b;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}
.sv2-pop-x:hover { background: #fff; }

@media (max-width: 768px) {
    /*
     * The gap under the filter bar on a phone was the section's own 80px top padding, and the
     * heading's 6px letter spacing wrapped "Palm Springs Luxury Vacation Rentals" onto two lines on
     * a narrow screen. Tightened for phones only; desktop keeps both.
     */
    .search-header.section-padding-80 { padding-top: 22px; }
    .search-header h1.search-h1 { font-size: 12px; letter-spacing: 2.5px; margin-bottom: 2px; }
    .search-header .sv2-results-head .section-title { font-size: 27px; }   /* beats the page's inline .search-header .section-title */
    .sv2-view { top: -4px; }
    .sv2-view { padding: 0 11px; letter-spacing: 1.5px; }
    .sv2-results-head { flex-wrap: wrap; }
    .sv2-map { height: 300px; }
    .sv2-pop { width: 250px; }
    .sv2-pop img { height: 140px; }
}

/* Narrow phones (390-430px): the count and the Grid | Map switch still share one row. */
@media (max-width: 440px) {
    .search-header .sv2-results-head .section-title { font-size: 23px; }
    .search-header h1.search-h1 { letter-spacing: 1.5px; }
    .sv2-view { padding: 0 10px; font-size: 12px; }
}

/* The narrowest phones: a smaller date still fits the full mm/dd/yyyy range. */
@media (max-width: 400px) {
    .sv2-wrap .sv2-date-input { font-size: 12px; padding: 0 6px; }
    .sv2-pill { padding: 0 11px; font-size: 13px; }
}

/* =========================================================================================
 * Saved page (search/index.php with view=saved — /saved)
 * ======================================================================================= */
.sv2-saved-actions { display: inline-flex; gap: 8px; margin-left: auto; margin-right: 8px; }
.sv2-results-head .sv2-saved-actions + .sv2-view { margin-left: 0; }

.sv2-saved-empty {
    max-width: 460px;
    margin: 40px auto 80px;
    text-align: center;
}
.sv2-saved-empty svg { fill: none; stroke: #aa8453; stroke-width: 1.6; }
.sv2-saved-empty h2 { font: 30px/1.25 'Gilda Display', serif; color: #fff; margin: 14px 0 8px; }
.sv2-saved-empty p { color: rgba(255, 255, 255, 0.65); margin-bottom: 22px; }
.sv2-saved-empty .sv2-done { display: inline-block; line-height: 38px; text-decoration: none; }

/* A heart taken off on this page dims its card until the next visit. */
.sv2-unsaved { opacity: 0.4; transition: opacity .2s; }

/* Saved, but booked for the chosen dates: smaller cards, no price. */
.sv2-unavailable { margin-top: 30px; }
.sv2-unavailable-title { font: 24px/1.3 'Gilda Display', serif; color: #fff; margin: 0 0 18px; }
.sv2-unavailable-title span { color: rgba(255, 255, 255, 0.5); font-size: 18px; }
.sv2-unavail-item { margin-bottom: 26px; }
.sv2-unavail-card,
.sv2-unavail-card:hover { display: block; color: #fff; text-decoration: none; }
.sv2-unavail-card .card-image-wrapper { display: block; border-radius: 10px; overflow: hidden; }
.sv2-unavail-card img { display: block; width: 100%; height: 210px; object-fit: cover; filter: grayscale(0.55) brightness(0.8); transition: none; }
.sv2-unavail-body { display: block; padding: 12px 2px 0; }
.sv2-unavail-name { display: block; font: 22px/1.25 'Gilda Display', serif; }
.sv2-unavail-meta { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 3px; }
.sv2-unavail-note { display: block; font: 12px/1.6 'Barlow Condensed', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #aa8453; margin-top: 6px; }

@media (max-width: 768px) {
    .sv2-saved-actions { margin: 6px 0 0; order: 3; width: 100%; }
}