@charset "UTF-8";
/* ==========================================================================
   Search panel v2
   --------------------------------------------------------------------------
   Loaded last, after compiled.purged.min.css and style.min.css, so it can
   override the legacy dark-panel rules in compiled.css:8637-8856 without
   editing that generated file (its LESS sources no longer exist).

   Everything is scoped to .search-panel--v2, which the markup adds alongside
   the legacy .search-panel class. Where the old rule is more specific, the
   selector here is written to match or beat it; source order settles ties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell — an in-flow card that overlaps the hero.
   In-flow (not absolute) on purpose: expanding the advanced panel then pushes
   the page down instead of covering the section below it.
   -------------------------------------------------------------------------- */

.jumbo {
    position: relative;
}

.search-panel--v2,
.jumbo .search-panel--v2 {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    /* Above .suggest-property (100). On towns/sea there is no hero, so the card
       starts ~24px under the navbar and the fixed CTA has nowhere to sit that
       does not overlap it; when they do collide the card must win, because
       hiding the primary Search button is worse than briefly hiding a
       secondary CTA. The CTA reappears as soon as the card scrolls past. */
    z-index: 120;
    max-width: none;
    min-height: 0;
    background: none;
    background-color: transparent;
    padding: 24px 20px 32px;
    margin-top: 0;
}

/* Overlap only when there is actually a hero to overlap. towns.blade.php and
   sea.blade.php wrap the panel in .jumbo but include no carousel, so keying off
   .jumbo alone would pull the card up under the navbar on those two pages —
   they get the default top padding instead.

   Two selectors because parts/carousel.blade.php used to emit one more </div>
   than it opened, which closed .jumbo early and left the panel as a *sibling*
   of .jumbo rather than a child. That stray tag is gone now, so the first
   selector is the one that matches; the sibling selector stays as a safety net
   for any other view that closes .jumbo early. */
.carousel + .search-panel--v2,
.jumbo + .search-panel--v2 {
    margin-top: -70px;
    padding-top: 0;
}

.search-panel--v2 #main-form-wrapper {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0;
}

.search-panel--v2 .sp-card {
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    padding: 22px 26px 20px;
}

.search-panel--v2 form {
    margin: 0;
}

/* compiled.css kills focus rings inside the panel with
   `.search-panel a, .search-panel button { outline: 0 !important }`, but
   accessibility-fixes.css loads later and restores `outline: 2px solid #f4c000
   !important` on button/input/select focus — so keyboard focus is visible.
   These add a matching ring to elements that rule does not cover, and mark the
   open dropdown. (No box-shadow on .form-control: accessibility-fixes.css sets
   `box-shadow: none !important` on its focus state.) */
.search-panel--v2 .sp-segment__input:focus + span,
.search-panel--v2 .bootstrap-select.open .dropdown-toggle {
    border-color: #d4a000;
    box-shadow: 0 0 0 3px rgba(244, 192, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Shared field furniture
   -------------------------------------------------------------------------- */

.search-panel--v2 .sp-label {
    display: block;
    margin: 0 0 6px;
    color: #5b6472;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-transform: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-panel--v2 .sp-field {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Main bar
   -------------------------------------------------------------------------- */

.search-panel--v2 .sp-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin: 0 -7px;
}

.search-panel--v2 .sp-bar > .sp-field {
    padding: 0 7px 12px;
}

.search-panel--v2 .sp-field--deal {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
}

.search-panel--v2 .sp-field--city {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 200px;
    flex: 1 1 200px;
}

.search-panel--v2 .sp-field--district,
.search-panel--v2 .sp-field--type {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 170px;
    flex: 1 1 170px;
}

.search-panel--v2 .sp-field--submit {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 168px;
    flex: 0 0 168px;
}

/* --------------------------------------------------------------------------
   Rent / sale segmented control
   The checkboxes stay in the DOM (they are the submitted values) but are
   visually replaced by their labels.
   -------------------------------------------------------------------------- */

.search-panel--v2 .sp-segment {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #f2f4f7;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    padding: 3px;
}

.search-panel--v2 .sp-segment__item {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    position: relative;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.search-panel--v2 .sp-segment__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.search-panel--v2 .sp-segment__item > span {
    display: block;
    border-radius: 8px;
    padding: 0 10px;
    color: #5b6472;
    font-size: 13px;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: background-color 0.15s ease, color 0.15s ease;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.search-panel--v2 .sp-segment__item:hover > span {
    color: #2c2c2c;
}

.search-panel--v2 .sp-segment__item.is-active > span {
    background-color: #efb811;
    color: #2c2c2c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   bootstrap-select, restyled for a light surface.
   Beats `.search-panel .dropdown-toggle` (0,2,0) with 0,3,0.
   -------------------------------------------------------------------------- */

.search-panel--v2 .bootstrap-select {
    width: 100%;
}

.search-panel--v2 .bootstrap-select .dropdown-toggle,
.search-panel--v2 .bootstrap-select .dropdown-toggle:hover,
.search-panel--v2 .bootstrap-select .dropdown-toggle:focus,
.search-panel--v2 .bootstrap-select .dropdown-toggle:active,
.search-panel--v2 .bootstrap-select.open .dropdown-toggle {
    height: 44px;
    background-color: #fff;
    /* Matches the 2px #757575 that accessibility-fixes.css forces onto
       .form-control, so selects and text inputs read as one control set.
       #757575 on white is 4.6:1 — WCAG 1.4.11 wants ≥3:1 for control borders. */
    border: 2px solid #757575;
    border-radius: 10px;
    padding: 0 34px 0 12px;
    color: #212121;
    font-size: 14px;
    line-height: 40px;
    text-align: left;
}

.search-panel--v2 .bootstrap-select .dropdown-toggle:hover {
    border-color: #4a4a4a;
}

.search-panel--v2 .bootstrap-select .dropdown-toggle .filter-option {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-panel--v2 .bootstrap-select .dropdown-toggle .caret {
    right: 14px;
    border-top-color: #8a929e;
}

.search-panel--v2 .bootstrap-select .dropdown-toggle.disabled,
.search-panel--v2 .bootstrap-select .dropdown-toggle.disabled:hover {
    background-color: #f2f3f5;
    border-color: #9a9a9a;
    border-style: dashed;
    color: #6b6b6b;
}

.search-panel--v2 .bootstrap-select .dropdown-menu {
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    padding: 6px;
    margin-top: 4px;
}

.search-panel--v2 .bootstrap-select .dropdown-menu li a {
    border-radius: 6px;
    padding: 8px 12px;
    color: #2c2c2c;
    font-size: 14px;
    white-space: normal;
}

.search-panel--v2 .bootstrap-select .dropdown-menu li a:hover,
.search-panel--v2 .bootstrap-select .dropdown-menu li a:focus,
.search-panel--v2 .bootstrap-select .dropdown-menu li.active > a {
    background-color: #fdf3d5;
    color: #2c2c2c;
}

.search-panel--v2 .bootstrap-select .dropdown-menu li.selected > a {
    background-color: #efb811;
    color: #2c2c2c;
    font-weight: 600;
}

.search-panel--v2 .bootstrap-select .dropdown-menu .dropdown-header {
    padding: 8px 12px 4px;
    color: #8a929e;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.search-panel--v2 .bootstrap-select .bs-searchbox .form-control {
    height: 38px;
    border: 1px solid #d7dce3;
    border-radius: 8px;
    color: #2c2c2c;
}

/* --------------------------------------------------------------------------
   Primary submit
   Colours here mirror accessibility-fixes.css, which forces #f4c000 on #000
   onto every button[type="submit"] with !important (a contrast fix worth
   keeping). Declaring the same values keeps this file honest about what
   actually renders; hover/active likewise resolve to its #d4a000.
   -------------------------------------------------------------------------- */

.search-panel--v2 .sp-submit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    background-color: #f4c000;
    border: 2px solid #f4c000;
    border-radius: 10px;
    padding: 0 16px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: none;
    -webkit-transition: background-color 0.15s ease, border-color 0.15s ease;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.search-panel--v2 .sp-submit:hover,
.search-panel--v2 .sp-submit:focus {
    background-color: #d4a000;
    border-color: #d4a000;
}

.search-panel--v2 .sp-submit__icon {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    margin-right: 8px;
}

/* --------------------------------------------------------------------------
   Meta bar — advanced toggle + reference-number lookup
   -------------------------------------------------------------------------- */

.search-panel--v2 .sp-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-top: 1px solid #ebeef2;
    margin-top: 4px;
    padding-top: 14px;
}

.search-panel--v2 .sp-advanced {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 44px;
    background-color: #fff;
    border: 1px solid #e3d09a;
    border-radius: 22px;
    padding: 0 18px;
    color: #8a6d09;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: background-color 0.15s ease, border-color 0.15s ease;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.search-panel--v2 .sp-advanced:hover {
    background-color: #fdf6e3;
    border-color: #d9a60e;
}

.search-panel--v2 .sp-advanced__chevron {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    margin-right: 8px;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
}

/* The chevron points down while closed ("open this") and flips up once open.
   Bootstrap 3 keeps .collapsed on the trigger for as long as the target is closed. */
.search-panel--v2 .sp-advanced:not(.collapsed) .sp-advanced__chevron {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.search-panel--v2 .sp-advanced__count {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    background-color: #efb811;
    border-radius: 10px;
    margin-left: 8px;
    padding: 0 6px;
    color: #2c2c2c;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.search-panel--v2 .sp-advanced__count[hidden] {
    display: none;
}

.search-panel--v2 .sp-ref {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.search-panel--v2 .sp-ref__label {
    margin: 0 10px 0 0;
    color: #5b6472;
    font-size: 13px;
    font-weight: 600;
}

.search-panel--v2 .form-control[type="text"].sp-ref__input {
    width: 120px;
    height: 44px;
    background-color: #fff;
    border: 2px solid #757575; /* forced by accessibility-fixes.css; restated so this file matches reality */
    border-radius: 10px;
    padding: 0 12px;
    color: #2c2c2c;
    font-size: 14px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Advanced panel
   -------------------------------------------------------------------------- */

.search-panel--v2 .sp-advanced-panel__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    border-top: 1px solid #ebeef2;
    margin: 14px -7px 0;
    padding-top: 18px;
}

.search-panel--v2 .sp-advanced-panel__inner > .sp-field {
    padding: 0 7px 4px;
}

.search-panel--v2 .sp-field--range {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 280px;
    flex: 1 1 280px;
}

.search-panel--v2 .sp-field--extras {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 240px;
    flex: 1 1 240px;
}

.search-panel--v2 .sp-range {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.search-panel--v2 .sp-range__dash {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 10px;
    height: 1px;
    background-color: #cfd5dd;
    margin: 0 8px;
}

.search-panel--v2 .sp-input {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
}

.search-panel--v2 .form-control[type="text"].sp-input__control {
    width: 100%;
    height: 44px;
    background-color: #fff;
    border: 2px solid #757575; /* forced by accessibility-fixes.css; restated so this file matches reality */
    border-radius: 10px;
    padding: 0 34px 0 12px;
    color: #2c2c2c;
    font-size: 14px;
    box-shadow: none;
}

.search-panel--v2 .sp-input__unit {
    position: absolute;
    top: 0;
    right: 12px;
    color: #69717e;
    font-size: 13px;
    line-height: 44px;
    pointer-events: none;
}

/* #69717e on #fff is 4.9:1. The "from"/"to" placeholders carry meaning here
   (they are the only thing distinguishing the two inputs in a range), so they
   are held to the 4.5:1 text threshold rather than treated as decoration. */
.search-panel--v2 ::-webkit-input-placeholder { color: #69717e; }
.search-panel--v2 :-ms-input-placeholder      { color: #69717e; }
.search-panel--v2 ::placeholder               { color: #69717e; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .search-panel--v2 .sp-field--deal {
        -ms-flex: 0 0 220px;
        flex: 0 0 220px;
    }

    .search-panel--v2 .sp-field--submit {
        -ms-flex: 1 1 160px;
        flex: 1 1 160px;
    }
}

@media (max-width: 991px) {
    .search-panel--v2,
    .jumbo .search-panel--v2 {
        padding: 20px 12px 24px;
    }

    .carousel + .search-panel--v2,
    .jumbo + .search-panel--v2 {
        margin-top: -40px;
        padding-top: 0;
    }

    .search-panel--v2 .sp-card {
        padding: 18px 16px 16px;
    }

    .search-panel--v2 .sp-field--deal,
    .search-panel--v2 .sp-field--city,
    .search-panel--v2 .sp-field--district,
    .search-panel--v2 .sp-field--type {
        -ms-flex: 1 1 46%;
        flex: 1 1 46%;
    }

    .search-panel--v2 .sp-field--submit {
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    }

    .search-panel--v2 .sp-field--submit .sp-label {
        display: none;
    }
}

@media (max-width: 767px) {
    .search-panel--v2,
    .jumbo .search-panel--v2,
    .carousel + .search-panel--v2,
    .jumbo + .search-panel--v2 {
        margin-top: 0;
        padding: 16px 10px 20px;
    }

    .search-panel--v2 .sp-card {
        border-radius: 12px;
        padding: 16px 14px 14px;
    }

    .search-panel--v2 .sp-bar > .sp-field,
    .search-panel--v2 .sp-field--deal,
    .search-panel--v2 .sp-field--city,
    .search-panel--v2 .sp-field--district,
    .search-panel--v2 .sp-field--type,
    .search-panel--v2 .sp-field--range,
    .search-panel--v2 .sp-field--extras {
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    }

    /* 16px keeps iOS Safari from zooming the viewport on focus. */
    .search-panel--v2 .bootstrap-select .dropdown-toggle,
    .search-panel--v2 .form-control[type="text"].sp-ref__input,
    .search-panel--v2 .form-control[type="text"].sp-input__control {
        height: 46px;
        font-size: 16px;
        line-height: 44px;
    }

    .search-panel--v2 .sp-submit {
        height: 48px;
    }

    /* 36px pills fall under the 44px touch-target minimum on small screens. */
    .search-panel--v2 .sp-segment__item > span {
        font-size: 14px;
        line-height: 44px;
    }

    .search-panel--v2 .sp-meta {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }

    .search-panel--v2 .sp-advanced {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
    }

    .search-panel--v2 .sp-ref {
        margin-top: 12px;
    }

    .search-panel--v2 .sp-ref__input,
    .search-panel--v2 .form-control[type="text"].sp-ref__input {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: auto;
    }

    .search-panel--v2 .sp-advanced-panel__inner {
        margin-top: 12px;
        padding-top: 14px;
    }
}