/* ═══════════════════════════════════════════════════════════════
   MASTUA — Property Page  |  Compact Filter Bar + Drawer
   ═══════════════════════════════════════════════════════════════ */


/* ── Skeleton loader ─────────────────────────────────────────── */
.prop-skel-card {
    border-radius: 12px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skelShimmer 1.4s infinite;
    height: 320px;
}
.prop-skel-card.prop-skel-list {
    height: 200px;
}

/* 2-column list view — fix feature-separator width */
#propListContainer .popular-list-1.list-style .property-featured li::after {
    right: -61%;
}
@media (max-width: 1470px) {
    #propListContainer .popular-list-1.list-style .property-featured li::after {
        right: -45%;
    }
}
@media (max-width: 991px) {
    #propListContainer .popular-list-1.list-style .property-featured li::after {
        right: -78%;
    }
}
@keyframes skelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Fixed image height: grid cards ─────────────────────────── */
#propGridContainer .popular-list-1.grid-style .thumb-wrapper {
    height: 210px !important;
    max-height: 210px !important;
    overflow: hidden;
}
#propGridContainer .popular-list-1.grid-style .thumb-wrapper .swiper-slide img {
    width: 100%;
    height: 210px !important;
    object-fit: cover;
}

/* ── Fixed image height: list cards ─────────────────────────── */
#propListContainer .popular-list-1.list-style .thumb-wrapper {
    height: 200px !important;
    max-height: 200px !important;
    overflow: hidden;
}
#propListContainer .popular-list-1.list-style .thumb-wrapper .swiper-slide img {
    width: 100%;
    height: 200px !important;
    object-fit: cover;
}

/* ── Equal-height grid cards ─────────────────────────────────── */
#propGridContainer .col-xl-3,
#propGridContainer .col-lg-6,
#propGridContainer .col-md-6 {
    display: flex;
}
#propGridContainer .popular-list-1.grid-style {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#propGridContainer .popular-list-1.grid-style .property-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#propGridContainer .popular-list-1.grid-style .property-bottom {
    margin-top: auto;
}

/* ─────────────────────────────────────────────────────────────
   0. PAGE-LEVEL SPACING
   ───────────────────────────────────────────────────────────── */

/*
  Spacer = header height + filter bar height (set by JS)
  Default fallback covers most cases before JS runs
*/
.prop-filter-bar-spacer {
    height: 180px; /* fallback: ~120px header + ~52px bar; JS overrides */
    pointer-events: none;
}

/* Listings section */
.prop-listing-section {
    padding-top: 16px;
    padding-bottom: 60px;
}

/* ─────────────────────────────────────────────────────────────
   1. COMPACT FILTER BAR  (fixed — never moves)
   ───────────────────────────────────────────────────────────── */
.prop-filter-bar {
    background: #fff;
    border-bottom: 1px solid #eaedf0;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    padding: 12px 0;
    position: fixed;      /* fixed so it never overlaps listings */
    top: 120px;           /* JS sets exact header height */
    left: 0; right: 0;
    z-index: 500;
}
@media (max-width: 767px) {
    .prop-filter-bar { top: 70px; }
    .prop-filter-bar-spacer { height: 125px; }
}
.prop-filter-bar .container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    overflow: visible;  /* must be visible so pill dropdowns escape the bar */
}

/* Search-type tabs */
.pf-type-tabs {
    display: flex;
    background: #f4f6f8;
    border-radius: 24px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}
.pf-type-tab {
    padding: 7px 18px;
    border-radius: 22px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--body-font);
    color: #666;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}
.pf-type-tab.active {
    background: #ff4136;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255,65,54,.35);
}
.pf-type-tab:hover:not(.active) { color: #ff4136; }

/* Divider */
.pf-divider {
    width: 1px;
    height: 28px;
    background: #e0e4e9;
    flex-shrink: 0;
}

/* Pill dropdowns */
.pf-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}
.pf-pill {
    position: relative;
}
.pf-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: #fff;
    border: 1.5px solid #dde1e7;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--body-font);
    color: #444;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
    line-height: 1;
}
.pf-pill-btn:hover { border-color: #ff4136; color: #ff4136; box-shadow: 0 2px 10px rgba(255,65,54,.1); }
.pf-pill-btn.has-value { border-color: #ff4136; color: #ff4136; background: #fff5f5; font-weight: 600; }
.pf-pill-btn.open { border-color: #ff4136; color: #ff4136; box-shadow: 0 2px 10px rgba(255,65,54,.15); }
.pf-pill-btn .pf-pill-arrow {
    font-size: 9px;
    opacity: .55;
    transition: transform .22s ease, opacity .22s;
}
.pf-pill-btn.open .pf-pill-arrow { transform: rotate(180deg); opacity: 1; }

/* Pill dropdown panel */
@keyframes pfDropIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);   }
}
@keyframes pfDropInRight {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.pf-pill-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;                          /* centre under the pill button */
    transform: translateX(-50%);
    min-width: 220px;
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    z-index: 9999;
    padding: 18px;
    display: none;
}
.pf-pill-dropdown.open {
    display: block;
    animation: pfDropIn .18s cubic-bezier(.25,.8,.25,1);
}
/* Last two pills right-align to avoid viewport overflow */
.pf-pills .pf-pill:nth-last-child(-n+2) .pf-pill-dropdown {
    left: auto; right: 0; transform: none;
}
.pf-pills .pf-pill:nth-last-child(-n+2) .pf-pill-dropdown.open {
    animation: pfDropInRight .18s cubic-bezier(.25,.8,.25,1);
}
/* Slim search input inside pill dropdown */
.pf-pill-dropdown .drawer-input {
    padding: 4px 10px;
    font-size: 12.5px;
    border-radius: 7px;
    color: #222;
    margin-bottom: 2px;
    height: 30px;
}
.pf-pill-dropdown h6 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #7a8494;
    margin: 0 0 10px;
    font-family: var(--body-font);
}
.pf-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 6px;
}
.pf-chip {
    padding: 6px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    background: #f8f9fb;
    font-size: 12.5px;
    font-family: var(--body-font);
    color: #555;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.4;
}
.pf-chip:hover  { border-color: #ff4136; color: #ff4136; background: #fff5f5; }
.pf-chip.active { background: #ff4136; border-color: #ff4136; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(255,65,54,.25); }

/* Apply button inside pill dropdown */
.pf-pill-apply-btn {
    margin-top: 10px;
    width: 100%;
    padding: 7px;
    background: #ff4136;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--body-font);
    transition: background .18s;
    letter-spacing: .2px;
}
.pf-pill-apply-btn:hover { background: #d63020; }

/* Range row inside pill dropdown */
.pf-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pf-range input {
    width: 100%;
    padding: 4px 10px;
    height: 30px;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    font-size: 12.5px;
    font-family: var(--body-font);
    color: #222;
    outline: none;
}
.pf-range input:focus { border-color: #ff4136; }

/* All Filters button */
.pf-all-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: #1a1a2e;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--body-font);
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
    flex-shrink: 0;
}
.pf-all-filters-btn:hover { background: #ff4136; }
.pf-filter-count {
    background: #ff4136;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pf-all-filters-btn:hover .pf-filter-count { background: #fff; color: #ff4136; }

/* Active chips row (below bar, shown when filters active) */
.active-chips-row {
    background: #fafbfc;
    border-bottom: 1px solid #eaedf0;
    padding: 10px 0;
    display: none;
}
.active-chips-row .container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.active-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #ffcdd2;
    color: #c0392b;
    border-radius: 16px;
    padding: 4px 10px 4px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--body-font);
}
.active-chip-remove {
    background: none;
    border: none;
    color: #c0392b;
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    opacity: .7;
    line-height: 1;
}
.active-chip-remove:hover { opacity: 1; }
.btn-clear-all-chips {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    font-family: var(--body-font);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    margin-left: auto;
    white-space: nowrap;
}
.btn-clear-all-chips:hover { color: #ff4136; }


/* ─────────────────────────────────────────────────────────────
   2. RESULTS BAR
   ───────────────────────────────────────────────────────────── */

/* Results bar right side — nav + sort on one row */
.sorting-filter-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* List / Grid toggle buttons */
.sorting-filter-wrap .nav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f4f6f8;
    border-radius: 10px;
    padding: 4px;
}
.sorting-filter-wrap .nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #888;
    font-size: 15px;
    transition: all .18s;
    text-decoration: none;
}
.sorting-filter-wrap .nav a:hover { color: #ff4136; background: #fff; }
.sorting-filter-wrap .nav a.active { background: #fff; color: #ff4136; box-shadow: 0 1px 5px rgba(0,0,0,.1); }

.sorting-filter-wrap select.orderby {
    height: 44px;
    padding: 0 10px;
    font-size: 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f4f6f8;
    color: #374151;
    outline: none;
    cursor: pointer;
}

.prop-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.prop-results-count {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--body-font);
}
.prop-results-count .prc-label {
    font-size: 14px;
    font-weight: 500;
    color: #888;
}
.prop-results-count .prc-highlight {
    font-size: 15px;
    font-weight: 700;
    color: var(--title-color);
    background: linear-gradient(135deg, #ff4136 0%, #ff7043 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ─────────────────────────────────────────────────────────────
   3. SIDE DRAWER (All Filters)
   ───────────────────────────────────────────────────────────── */
.drawer-overlay {
    position: fixed;
    top: var(--prop-header-h, 80px);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

.filter-drawer {
    position: fixed;
    top: var(--prop-header-h, 80px);           /* JS keeps this in sync with header */
    right: 0;
    width: 400px;
    max-width: 100vw;
    height: calc(100vh - var(--prop-header-h, 80px));
    background: #fff;
    z-index: 910;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow: -8px 0 40px rgba(0,0,0,.18);
}
.filter-drawer.open { transform: translateX(0); }

/* Drawer head */
.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f4f8;
    flex-shrink: 0;
    background: #fff;
}
.drawer-head h4 {
    font-size: 17px;
    font-weight: 700;
    font-family: var(--title-font);
    color: var(--title-color);
    margin: 0;
}
.drawer-close-btn {
    background: #f4f6f8;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: background .18s;
    flex-shrink: 0;
}
.drawer-close-btn:hover { background: #ff4136; color: #fff; }

/* Drawer body (scrollable) */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}
.drawer-body::-webkit-scrollbar { width: 4px; }
.drawer-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* Drawer section */
.drawer-section {
    border-bottom: 1px solid #f0f4f8;
}
.drawer-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 24px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background .15s;
}
.drawer-section-toggle:hover { background: #fafbfc; }
.drawer-section-toggle h5 {
    font-size: 12.5px;
    font-weight: 700;
    font-family: var(--body-font);
    color: var(--title-color);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.drawer-section-toggle .ds-arrow {
    font-size: 10px;
    color: #aaa;
    transition: transform .2s;
}
.drawer-section-toggle.collapsed .ds-arrow { transform: rotate(-90deg); }
.drawer-section-body {
    padding: 2px 24px 18px;
}
.drawer-section-body.collapsed { display: none; }

/* Items inside drawer */
.drawer-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.drawer-chip {
    padding: 7px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 22px;
    background: #fff;
    font-size: 13px;
    font-family: var(--body-font);
    color: #555;
    cursor: pointer;
    transition: all .15s;
}
.drawer-chip:hover  { border-color: #ff4136; color: #ff4136; }
.drawer-chip.active { background: #ff4136; border-color: #ff4136; color: #fff; font-weight: 600; }

.drawer-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 13.5px;
    font-family: var(--body-font);
    color: #555;
    line-height: 1.3;
}
.drawer-check-row input[type="checkbox"],
.drawer-check-row input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #ff4136;
    cursor: pointer;
    flex-shrink: 0;
}
.drawer-check-row:hover { color: #ff4136; }

.drawer-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.drawer-input {
    width: 100%;
    padding: 1px 7px;
    height: 38px;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    font-size: 12px;
    font-family: var(--body-font);
    color: #222;
    outline: none;
    transition: border-color .18s;
    background: #fff;
    line-height: 1;
}
.drawer-input:focus { border-color: #ff4136; }
.drawer-input::placeholder { color: #b0b7c3; }
.drawer-input-sm { padding: 2px 7px; font-size: 11.5px; border-radius: 6px; }

/* Toggle switch */
.drawer-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
}
.drawer-toggle-row span {
    font-size: 13.5px;
    font-family: var(--body-font);
    color: #555;
}
.toggle-sw {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-sw input { opacity: 0; width: 0; height: 0; }
.toggle-sw .sw-track {
    position: absolute;
    inset: 0;
    background: #dde1e7;
    border-radius: 24px;
    cursor: pointer;
    transition: .25s;
}
.toggle-sw .sw-track:before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .25s;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.toggle-sw input:checked + .sw-track { background: #ff4136; }
.toggle-sw input:checked + .sw-track:before { transform: translateX(18px); }

.drawer-sub-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 10px 0 6px;
    font-family: var(--body-font);
    display: block;
}

.show-more-link {
    background: none;
    border: none;
    color: #ff4136;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--body-font);
    cursor: pointer;
    padding: 6px 0 0;
    display: block;
}
.show-more-link:hover { text-decoration: underline; }

/* ── Checkbox Chips (multiselect toggle pills) ── */
.ds-check-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ds-check-chip {
    display: inline-flex; align-items: center;
    padding: 7px 16px;
    border: 1.5px solid #e2e8f0; border-radius: 22px;
    background: #fff; font-size: 13px;
    font-family: var(--body-font); color: #555;
    cursor: pointer; transition: all .15s; user-select: none;
}
.ds-check-chip input[type="checkbox"],
.ds-check-chip input[type="radio"] { display: none; }
.ds-check-chip:hover { border-color: #ff4136; color: #ff4136; }
.ds-check-chip:has(input:checked) { background: #ff4136; border-color: #ff4136; color: #fff; font-weight: 600; }

/* ── Budget Range Slider ── */
.ds-slider-labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 12px; }
.ds-range-track { position: relative; height: 5px; background: #e2e8f0; border-radius: 5px; margin-bottom: 20px; }
.ds-range-fill { position: absolute; height: 100%; background: #ff4136; border-radius: 5px; pointer-events: none; }
.ds-range-input {
    -webkit-appearance: none; appearance: none;
    position: absolute; top: -6px; left: 0;
    width: 100%; height: 17px;
    background: transparent; pointer-events: none;
}
.ds-range-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: #ff4136; border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(255,65,54,.3);
    cursor: pointer; pointer-events: all;
}
.ds-range-input::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #ff4136; border: 2.5px solid #fff;
    cursor: pointer; pointer-events: all; border: none;
}

/* ── Amenity Groups ── */
.ds-amenity-group { margin-bottom: 12px; }
.ds-amenity-cat {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #94a3b8;
    margin-bottom: 4px; padding-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
}

/* Drawer footer */
.drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f4f8;
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    background: #fff;
}
.btn-drawer-clear {
    flex: 1;
    padding: 12px;
    background: #f4f6f8;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--body-font);
    color: #555;
    cursor: pointer;
    transition: background .18s;
}
.btn-drawer-clear:hover { background: #e8ecf0; }
.btn-drawer-apply {
    flex: 2;
    padding: 12px;
    background: #ff4136;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--body-font);
    color: #fff;
    cursor: pointer;
    transition: background .2s;
}
.btn-drawer-apply:hover { background: #d63020; }


/* ─────────────────────────────────────────────────────────────
   4. MOBILE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .pf-pills { display: none; }
    .pf-divider { display: none; }
    .pf-type-tabs { width: 100%; justify-content: center; }
    .prop-filter-bar-spacer { height: 130px; }
}
@media (max-width: 767px) {
    .filter-drawer { width: 100vw; }
    .prop-filter-bar { top: 70px; }
    .prop-filter-bar-spacer { height: 120px; }
}
@media (max-width: 575px) {
    .pf-type-tab { padding: 7px 12px; font-size: 12px; }
    .pf-all-filters-btn { padding: 9px 14px; }
}


/* ─────────────────────────────────────────────────────────────
   5. PROPERTY CARD SIZE NORMALIZATION
   Brings card titles, body text and padding in line with the
   compact filter-bar instead of using the global 24 px defaults.
   ───────────────────────────────────────────────────────────── */

/* Content area vertical padding */
.prop-listing-section .popular-list-1 .property-content {
    padding: 14px 0 16px;
}

/* Title + address block */
.prop-listing-section .popular-list-1 .media-body {
    padding: 0 18px 12px;
    margin-bottom: 6px;
}
.prop-listing-section .popular-list-1 .media-body .box-title {
    font-size: 15px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 4px;
}
.prop-listing-section .popular-list-1 .media-body .box-text {
    font-size: 12.5px;
    gap: 6px;
}

/* Bed / Bath / Sqft row */
.prop-listing-section .popular-list-1 .property-featured {
    padding: 9px 18px;
}
.prop-listing-section .popular-list-1 .property-featured li {
    font-size: 12.5px;
}

/* Price + View button row */
.prop-listing-section .popular-list-1 .property-bottom {
    padding: 12px 18px 0;
    align-items: center;
}
.prop-listing-section .popular-list-1 .property-bottom .box-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    margin-right: 8px;
}

/* List-style cards — reset left-edge padding applied by global rules */
.prop-listing-section .popular-list-1.list-style .property-content .media-body {
    padding-left: 0;
}
.prop-listing-section .popular-list-1.list-style .property-content .property-bottom {
    padding-left: 0;
}
.prop-listing-section .popular-list-1.list-style .property-content .property-featured {
    padding-left: 0;
}

/* Override global 1299 px breakpoint that bumps padding back up */
@media (max-width: 1299px) {
    .prop-listing-section .popular-list-1 .media-body { padding: 0 14px 10px; }
    .prop-listing-section .popular-list-1 .property-featured { padding: 9px 14px; }
    .prop-listing-section .popular-list-1 .property-bottom { padding: 12px 14px 0; }
}

/* Mobile */
@media (max-width: 767px) {
    .prop-listing-section .popular-list-1 .media-body .box-title { font-size: 14px; }
    .prop-listing-section .popular-list-1 .property-bottom .box-title { font-size: 14px; }
}

/* ── Title & address: single line with ellipsis ──────────────── */
.prop-listing-section .popular-list-1 .media-body .box-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.prop-listing-section .popular-list-1 .media-body .box-title a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.prop-listing-section .popular-list-1 .media-body .box-text {
    overflow: hidden;
    flex-wrap: nowrap;
    min-height: 22px;
}
.prop-listing-section .popular-list-1 .media-body .box-text .prop-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

/* ── Title word-wrap for long property names on mobile ────────── */
.popular-list-1 .box-title,
.popular-list-1 .box-title a {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}
@media (max-width: 767px) {
    .popular-list-1 .box-title {
        font-size: 16px;
    }
}


/* ─────────────────────────────────────────────────────────────
   6. MULTI-SELECT MODE
   ───────────────────────────────────────────────────────────── */

/* Multi-select toolbar toggle button */
.pf-multiselect-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #fff;
    border: 1.5px solid #dde1e7;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--body-font);
    color: #444;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s;
    flex-shrink: 0;
}
.pf-multiselect-btn:hover {
    border-color: #ff4136;
    color: #ff4136;
    background: #fff5f5;
}
.pf-multiselect-btn.active {
    background: #ff4136;
    border-color: #ff4136;
    color: #fff;
}
.pf-multiselect-btn.active:hover {
    background: #d63020;
    border-color: #d63020;
}
@media (max-width: 575px) {
    .pf-multiselect-btn { padding: 9px 12px; font-size: 12px; }
    .pf-multiselect-btn .ms-label { display: none; }
}

/* Property card checkbox overlay — hidden until multi-select mode is active */
.thumb-wrapper { position: relative; }

.prop-ms-check {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 12;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid #d1d5db;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #64748b;
    padding: 0;
    line-height: 1;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.prop-ms-check:hover {
    background: #fff;
    border-color: #ff4136;
    color: #ff4136;
    box-shadow: 0 3px 12px rgba(255, 65, 54, .2);
}
body.prop-multiselect-active .prop-ms-check {
    display: flex;
}