/***
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-bottom: 18px;
}
.pers-filterbar {
    background: #fff;
    border: 1px solid #e8ebf0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16,24,40,.06);
    padding: 14px 16px;
}
.pers-fb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.pers-fb-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pers-fb-field label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #667085;
    margin-bottom: 5px;
}
.pers-fb-cat      { flex: 1 1 160px; max-width: 200px; }
.pers-fb-city      { flex: 1 1 150px; max-width: 190px; }
.pers-fb-keyword   { flex: 2 1 220px; }
.pers-fb-price     { flex: 1 1 190px; max-width: 220px; }
.pers-fb-more      { flex: 0 0 auto; }

.pers-fb-input,
.pers-fb-select {
    height: 40px;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: #101828;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s ease;
}
.pers-fb-input:focus,
.pers-fb-select:focus {
    outline: none;
    border-color: var(--pers-primary, #3492e1);
}
.pers-fb-select { appearance: auto; cursor: pointer; }

.pers-fb-locbtn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #101828 !important;
    text-decoration: none !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pers-fb-locbtn .fa { color: var(--pers-primary, #3492e1); }

.pers-fb-search-input {
    position: relative;
}
.pers-fb-search-input .fa {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 13px;
}
.pers-fb-search-input .pers-fb-input { padding-left: 32px; }

.pers-fb-price-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pers-fb-price-inputs .pers-fb-input { width: 0; flex: 1 1 auto; text-align: center; }
.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: 7px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #101828;
    background: #fff;
    white-space: nowrap;
}
.pers-fb-filters[open] > .pers-fb-filters-btn {
    border-color: var(--pers-primary, #3492e1);
    color: var(--pers-primary, #3492e1);
}
.pers-fb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pers-primary, #3492e1);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.pers-fb-filters-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    min-width: 320px;
    max-width: 90vw;
    max-height: 70vh;
    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: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* 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 { max-width: none; flex-basis: 45%; }
    .pers-fb-keyword { flex-basis: 100%; }
}

@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;
}