/***
Pers theme - search / listings page

Covers: top filter bar (search-sidebar.php), category chip row, and the
results header (title, sort, list/grid toggle). Loaded only where needed
(search.php) so it never touches the homepage.

Colour rule: every accent uses var(--pers-primary*/--pers-secondary*),
which pers_color_vars_css() derives from the admin's colour picker - no
hex codes here, so the theme stays environment/colour-agnostic and the
"blue/gold/green/red/yellow" skins and any custom colour keep working.
***/

/* ==========================================================
   FILTER BAR
   ========================================================== */
.pers-filterbar-wrap {
    margin: 0 0 18px;
}
.pers-filterbar {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(16,24,40,.06);
    padding: 12px 14px;
}

/* --- Sticky-on-scroll (Bayut-style) ---------------------------
   Driven by JS (search-sidebar.php) rather than CSS position:sticky,
   which can be silently disabled by an ancestor's overflow. When the
   bar scrolls up to the site header it gets .pers-fb-stuck and pins
   as a full-width white band just under the header (top is set inline
   to the live header height). A spacer preserves the layout so the
   results don't jump. Desktop only; the bar is left alone on phones. */
.pers-fb-spacer { display: none; }
/* while the filter bar is pinned at the top, the site header steps aside
   so the bar fully takes over the top - like Dubizzle.
   r114: the header used to cut out instantly (display:none, unanimatable)
   while the bar faded in over .28s - that one-sided mismatch (abrupt exit,
   smooth entrance) read as a jump even after the bar's own motion was fixed
   (r112). Faded to match instead - opacity + a delayed visibility so it also
   stops intercepting clicks once hidden. The transition here repeats
   pers-home.css's own background/box-shadow/border-color list (search page
   only - this file loads nowhere else) because `transition` is a single
   non-additive shorthand: redeclaring it just for opacity/visibility would
   otherwise silently drop the header's own hover/stick fade on this page. */
#persStickyHeader {
    transition: background .28s ease, box-shadow .28s ease, border-color .28s ease,
                opacity .28s ease, visibility 0s linear 0s;
}
#persStickyHeader.pers-fb-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: background .28s ease, box-shadow .28s ease, border-color .28s ease,
                opacity .28s ease, visibility 0s linear .28s;
}
@media (prefers-reduced-motion: reduce) {
    #persStickyHeader.pers-fb-hidden { transition: none; }
}

/* r112: opacity-only fade, no slide/transform - matches how #persStickyHeader
   itself feels smooth on the homepage (a background/shadow transition with no
   positional motion). position:fixed itself can't be animated - the bar's
   relocation from its scroll position to the viewport top is always instant -
   so a translateY slide (r111) just made that instant jump more visible by
   adding motion for the eye to track. A plain fade hides the jump instead of
   animating it. Also now carries the logo + a single slim row of filters
   (field labels hidden) so the logo is visible while scrolled - the
   "condensed filters" option. */
.pers-filterbar-wrap.pers-fb-stuck { animation: persFbFadeIn .28s ease; }
@keyframes persFbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.pers-fb-logo { display: none; }
.pers-filterbar-wrap.pers-fb-stuck .pers-filterbar { display: flex; align-items: center; gap: 18px; }
.pers-filterbar-wrap.pers-fb-stuck .pers-filterbar-form { flex: 1 1 auto; min-width: 0; }
.pers-filterbar-wrap.pers-fb-stuck .pers-fb-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.pers-filterbar-wrap.pers-fb-stuck .pers-fb-logo img { height: 32px; width: auto; display: block; }
.pers-filterbar-wrap.pers-fb-stuck .pers-fb-logo .logoname { font-size: 18px; font-weight: 800; white-space: nowrap; }
.pers-filterbar-wrap.pers-fb-stuck .pers-fb-row { flex-wrap: nowrap; align-items: center; }
.pers-filterbar-wrap.pers-fb-stuck .pers-fb-field > label { display: none; }
@media (max-width: 991px) { .pers-filterbar-wrap.pers-fb-stuck .pers-fb-price { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .pers-filterbar-wrap.pers-fb-stuck { animation: none; }
}

.pers-filterbar-wrap.pers-fb-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;   /* above the site header (1030) so it pins to the
                        very top and never hides behind the header */
    margin: 0;
    padding: 10px 0;
    background: #fff;
    box-shadow: 0 6px 16px rgba(16,24,40,.10);
}
.pers-filterbar-wrap.pers-fb-stuck .pers-filterbar {
    margin: 0 auto;
    padding: 0 15px;
    border: 0;
    box-shadow: none;
    background: transparent;
}
/* match Bootstrap's .container widths so the pinned bar lines up with
   the page content at every breakpoint */
@media (min-width: 768px)  { .pers-filterbar-wrap.pers-fb-stuck .pers-filterbar { max-width: 750px; } }
@media (min-width: 992px)  { .pers-filterbar-wrap.pers-fb-stuck .pers-filterbar { max-width: 970px; } }
@media (min-width: 1200px) { .pers-filterbar-wrap.pers-fb-stuck .pers-filterbar { max-width: 1170px; } }
.pers-fb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.pers-fb-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* Field titles above each control (CATEGORY, CITY, KEYWORD, PRICE) - small
   uppercase labels, as in the earlier design. The "Filters" button and the
   category-plugin fields inside the popover have their own labels handled
   elsewhere, so this only targets the bar's own direct field labels. */
.pers-fb-field > label {
    display: block;
    margin: 0 0 5px 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #98a2b3;
    line-height: 1.2;
    white-space: nowrap;
}

.pers-fb-cat      { flex: 0 1 auto; }
.pers-fb-city     { flex: 0 1 auto; }
.pers-fb-keyword  { flex: 1 1 200px; min-width: 150px; }
.pers-fb-price    { flex: 0 1 auto; }
.pers-fb-more     { flex: 0 0 auto; }

/* Desktop: keep the whole bar on ONE line - shrink the controls
   instead of letting the Search button wrap onto a second row
   (which happens in the 992-1199px band where the container is only
   970px wide). Below 768px the bar wraps normally (mobile). */
@media (min-width: 768px) {
    .pers-fb-row { flex-wrap: nowrap; }
    .pers-fb-cat, .pers-fb-city, .pers-fb-price, .pers-fb-keyword { min-width: 0; }
    .pers-fb-select, .pers-fb-locbtn, .pers-fb-price-inputs { min-width: 0; }
    .pers-fb-keyword { flex: 1 1 auto; }
}

/* --- shared pill control --- */
/* Scoped under .pers-filterbar so specificity (0,2,0) clears the base
   theme's input[type=text]/select rule (0,1,1) in style.css, which would
   otherwise flatten the corners (border-radius:0) and add an inset shadow
   on the city/keyword text inputs. */
.pers-filterbar .pers-fb-input,
.pers-filterbar .pers-fb-select,
.pers-filterbar .pers-fb-locbtn,
.pers-filterbar .pers-fb-filters-btn {
    height: 46px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    color: #1d2939;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    line-height: normal;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pers-fb-input::placeholder { color: #98a2b3; }
.pers-fb-input:hover,
.pers-fb-select:hover,
.pers-fb-locbtn:hover,
.pers-fb-filters-btn:hover { border-color: #cfd4dc; }
.pers-fb-input:focus,
.pers-fb-select:focus,
.pers-fb-locbtn:focus {
    outline: none;
    border-color: var(--pers-primary, #3492e1);
    box-shadow: 0 0 0 3px var(--pers-primary-soft, #eaf3fc);
}

/* select with a custom (neutral grey) caret so it matches the pills across
   browsers instead of the default OS chrome */
.pers-fb-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    font-weight: 500;
    min-width: 150px;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.pers-fb-locbtn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 128px;
    color: #1d2939 !important;
    text-decoration: none !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pers-fb-locbtn .fa { color: var(--pers-primary, #3492e1); flex: 0 0 auto; }

.pers-fb-search-input { position: relative; }
/* the leading magnifier is a real submit button so a click on the
   lens runs the search (not only the Enter key) */
.pers-fb-searchico {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #98a2b3;
    font-size: 14px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.pers-fb-searchico:hover { color: var(--pers-primary, #3492e1); background: var(--pers-primary-soft, #eaf3fc); }
.pers-fb-search-input .pers-fb-input { padding-left: 44px; }

/* price = one pill holding min - max */
.pers-fb-price-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 46px;
    min-width: 150px;
    padding: 0 12px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pers-fb-price-inputs:focus-within {
    border-color: var(--pers-primary, #3492e1);
    box-shadow: 0 0 0 3px var(--pers-primary-soft, #eaf3fc);
}
.pers-fb-price-inputs .pers-fb-input {
    width: 0;
    flex: 1 1 auto;
    height: auto;
    border: 0 !important;
    padding: 0;
    text-align: center;
    box-shadow: none !important;
}
.pers-fb-price-sep { color: #98a2b3; }

/* --- Filters dropdown (native <details>, no JS needed) --- */
.pers-fb-filters { position: relative; }
.pers-fb-filters summary { list-style: none; cursor: pointer; }
.pers-fb-filters summary::-webkit-details-marker { display: none; }

.pers-fb-filters-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    font-weight: 600;
    color: #1d2939;
    white-space: nowrap;
}
.pers-fb-filters-btn .fa { color: #667085; }
.pers-fb-filters[open] > .pers-fb-filters-btn {
    border-color: var(--pers-primary, #3492e1);
    color: var(--pers-primary, #3492e1);
}
.pers-fb-filters[open] > .pers-fb-filters-btn .fa { color: var(--pers-primary, #3492e1); }
.pers-fb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pers-primary, #3492e1);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.pers-fb-filters-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    /* Wider so category filters (make/model/year...) render as a tidy
       two-column grid instead of one cramped column. */
    width: 560px;
    min-width: 320px;
    max-width: 92vw;
    max-height: 74vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e8ebf0;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16,24,40,.16);
    padding: 16px;
}
.pers-fb-check label { font-weight: 400; color: #344054; display: flex; align-items: center; gap: 8px; }
.pers-fb-check input { margin: 0; }

/* Category-specific fields injected by the custom_attributes plugin's
   'search_form' hook. The plugin emits its own markup (fieldset.box >
   div.row > h5 label + select/input, h4.search_heading group titles,
   div.price-slide for min/max), so this styles that structure into a
   clean stacked layout matching the rest of the bar. */
.pers-fb-filters-panel #pers-cat-fields:empty { display: none; }
.pers-fb-filters-panel #custom_attributes { display: flex; flex-direction: column; gap: 4px; }
.pers-fb-filters-panel #pers-cat-fields fieldset,
.pers-fb-filters-panel #pers-cat-fields .box {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.pers-fb-filters-panel #pers-cat-fields .row {
    margin: 0 0 12px;
    display: block;
}
.pers-fb-filters-panel #pers-cat-fields h4.search_heading {
    font-size: 13px;
    font-weight: 700;
    color: #101828;
    margin: 6px 0 8px;
}
.pers-fb-filters-panel #pers-cat-fields h5 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #667085;
    margin: 0 0 5px;
}
.pers-fb-filters-panel #pers-cat-fields label {
    font-weight: 400;
    color: #344054;
}
.pers-fb-filters-panel #pers-cat-fields select,
.pers-fb-filters-panel #pers-cat-fields input[type="text"],
.pers-fb-filters-panel #pers-cat-fields input[type="number"],
.pers-fb-filters-panel #pers-cat-fields textarea {
    width: 100%;
    height: 40px;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: #101828;
    background: #fff;
    box-sizing: border-box;
    float: none;
}
.pers-fb-filters-panel #pers-cat-fields textarea { height: auto; padding: 8px 12px; }
.pers-fb-filters-panel #pers-cat-fields select:focus,
.pers-fb-filters-panel #pers-cat-fields input:focus {
    outline: none;
    border-color: var(--pers-primary, #3492e1);
}
/* min/max pair (b_search_limits fields) side by side */
.pers-fb-filters-panel #pers-cat-fields .two_input .price-slide,
.pers-fb-filters-panel #pers-cat-fields .price-slide {
    display: flex;
    gap: 8px;
}
.pers-fb-filters-panel #pers-cat-fields .price-slide input { width: 0; flex: 1 1 auto; }
.pers-fb-filters-panel #pers-cat-fields input[type="checkbox"],
.pers-fb-filters-panel #pers-cat-fields input[type="radio"] {
    width: auto;
    height: auto;
    margin-right: 6px;
}

.pers-fb-filters-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef0f4;
}
.pers-fb-clear {
    font-size: 13px;
    font-weight: 600;
    color: #667085;
    text-decoration: underline;
}
.pers-fb-clear:hover { color: #101828; }
.pers-fb-apply { padding: 8px 18px; }

.pers-fb-submit {
    height: 46px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    background: var(--pers-primary, #3492e1);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(16,24,40,.10);
}
.pers-fb-submit:hover { background: var(--pers-primary-hover, #2b7fc4); }

/* Ad banner slot that replaces the old sidebar's position_3 widget */
.pers-search-banner { margin-bottom: 18px; text-align: center; }
.pers-search-banner .dd-widget { display: inline-block; }

/* ==========================================================
   CATEGORY CHIPS
   ========================================================== */
.pers-cat-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 16px;
    padding-bottom: 2px;
}
.pers-cat-chips::-webkit-scrollbar { height: 4px; }
.pers-chip {
    flex: 0 0 auto;
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #d9dee5;
    background: #fff;
    color: #344054 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pers-chip:hover { border-color: var(--pers-primary, #3492e1); color: var(--pers-primary, #3492e1) !important; }
.pers-chip.active {
    background: var(--pers-primary-soft, #eaf3fc);
    border-color: var(--pers-primary, #3492e1);
    color: var(--pers-primary, #3492e1) !important;
}

/* ==========================================================
   RESULTS HEADER (title / count / list-grid / sort)
   ========================================================== */
.page-title h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #101828;
}
.page-title .counter-search {
    font-size: 14px;
    color: #667085;
}

.searchpage .actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.searchpage .actions .togglebutton { display: flex; gap: 4px; }
.searchpage .actions .togglebutton a {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
}
.searchpage .actions .sortby { margin-left: auto; }
.searchpage .actions .sortby button {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 991px) {
    .pers-fb-row { align-items: stretch; }
    .pers-fb-cat, .pers-fb-city, .pers-fb-price { flex: 1 1 45%; }
    .pers-fb-cat .pers-fb-select,
    .pers-fb-city .pers-fb-locbtn,
    .pers-fb-price .pers-fb-price-inputs { min-width: 0; width: 100%; }
    .pers-fb-keyword { flex: 1 1 100%; }
    .pers-fb-more, .pers-fb-submit { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 767px) {
    /* .hidden-xs itself (Bootstrap) hides this by default below 768px;
       search.php's existing #filter click handler reveals it again by
       removing that class - unchanged from the old sidebar's behaviour. */
    .pers-filterbar { padding: 14px; }
    .pers-fb-row { flex-direction: column; align-items: stretch; }
    .pers-fb-cat, .pers-fb-city, .pers-fb-price, .pers-fb-more, .pers-fb-keyword {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }
    .pers-fb-filters-panel {
        position: static;
        box-shadow: none;
        border: 0;
        padding: 12px 0 0;
        max-height: none;
        width: 100%;
    }
    .pers-fb-submit { width: 100%; justify-content: center; }
    .page-title h1 { font-size: 21px; }
    .pers-cat-chips { margin-bottom: 12px; }
}

/* ==========================================================
   PREMIUM HIGHLIGHT STRIP (owl carousel, search page)
   Mirrors the homepage premium carousel. The owl prev/next
   arrows sit at top:-42px relative to .pers-home-carousel,
   so the strip reserves a 52px top margin for them, exactly
   like the homepage's ".pers-section-head + .pers-home-grid"
   rule does.
   ========================================================== */
.pers-premium-strip { margin: 4px 0 22px; }
.pers-premium-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.pers-premium-strip-title {
    font-size: 17px;
    font-weight: 700;
    color: #101828;
    margin: 0;
}
.pers-premium-strip-title .fa { margin-right: 6px; }
.pers-premium-strip.has-carousel .pers-home-grid .pers-home-carousel {
    margin-top: 52px !important;
}
/* Grid variant (few premiums, no carousel): reuse the float-based
   .listing-4up grid, cards left-aligned, no reserved slider row. */
.pers-premium-strip.is-grid .listing-4up > .listing-card {
    margin-bottom: 16px;
}
/* single-slide / few-slide safety: if owl hasn't (or can't) initialise,
   the cards still lay out as a normal grid rather than stacking full-width */
.pers-premium-strip .pers-home-carousel:not(.owl-carousel) { display: flex; flex-wrap: wrap; }

/* AJAX field swap: dim the panel briefly while new category fields load */
.pers-fb-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }

/* ==========================================================
   PAGINATION
   ========================================================== */
.pers-pagination {
    margin: 26px 0 8px;
    text-align: center;
}
.pers-pagination ul {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.pers-pagination ul > li { display: inline-flex; }
.pers-pagination ul > li > a,
.pers-pagination ul > li > span {
    float: none;
    margin: 0;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    background: #fff;
    color: #344054;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pers-pagination ul > li > a:hover,
.pers-pagination ul > li > a:focus {
    border-color: var(--pers-primary, #3492e1);
    color: var(--pers-primary, #3492e1);
    background: #fff;
}
.pers-pagination ul > li > span.searchPaginationSelected {
    background: var(--pers-primary, #3492e1);
    border-color: var(--pers-primary, #3492e1);
    color: #fff;
    cursor: default;
}

/* --- Price range validation (r115) --------------------------------
   Max < Min is blocked: a small red note shows under the price field and every
   submit control is disabled until it's corrected. */
.pers-fb-price { position: relative; }
.pers-fb-price-err {
    display: none;
    position: absolute;
    top: 100%;
    left: 2px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: #d93025;
    white-space: nowrap;
    z-index: 6;
}
.pers-fb-price.pers-price-invalid .pers-fb-price-err { display: block; }
.pers-fb-price.pers-price-invalid .pers-fb-input {
    border-color: #d93025;
    box-shadow: 0 0 0 2px rgba(217,48,37,.14);
}
.pers-fb-submit:disabled,
.pers-fb-searchico:disabled,
.pers-fb-apply:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}