/* Marketplace + homepage listing grid. Extracted from marketplace.php (v8) so browsers cache it. */
/* ─── BASE ─────────────────────────────────────── */
:root {
    --primary: #006AFF;
    --text-dark: #0f172a;
    --text-light: #64748b;
    --border: #e5e7eb;
    --card-bg: #fff;
    --bg: #f8fafc;
}
body { background: var(--bg); font-family: 'Inter', -apple-system, sans-serif; }

/* ─── FILTER BAR ───────────────────────────────── */
.filter-bar-sticky {
    background: var(--card-bg);
    position: sticky; top: var(--header-height, 64px); z-index: 90;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.filter-bar-inner { padding: 4px 16px; }
@media (max-width: 768px) { .filter-bar-inner { padding: 2px 12px; } }

.filter-row {
    /* v8: one clean row. No overflow-x (it clipped the Sort/Filters popovers and
       forced a scrollbar) — controls shrink their labels instead, and the two
       groups wrap onto a second line only on very narrow phones. */
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 12px;
    padding: 6px 0;
}
.fr-left, .fr-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fr-right { margin-left: auto; }
.fr-left > *, .fr-right > * { flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Icon-only chip buttons (Filters / Sort) */
.icon-btn.icon-only { width: 40px; padding: 0; justify-content: center; }
.icon-btn.icon-only i { font-size: 1rem; }

/* Shared popover menu chrome */
.menu-head { font-size: 0.68rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #94a3b8; padding: 6px 12px 4px; }
.menu-sep  { height: 1px; background: var(--border); margin: 6px 4px; }
.sort-reset { color: #dc2626 !important; text-decoration: none; }
.sort-reset i { width: 14px; font-size: 0.82rem; }
.sort-reset:hover { background: #fef2f2 !important; }

/* View selector dropdown */
.view-dd { position: relative; display: inline-flex; }
.view-dd-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 12px 0 14px;
    border: 1px solid var(--border); border-radius: 999px;
    background: #fff; color: var(--text-dark);
    font: inherit; font-size: 0.92rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    transition: border-color .15s, box-shadow .15s;
}
.view-dd-btn:hover, .view-dd.open .view-dd-btn { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,106,255,.10); }
.view-dd-btn > i:first-child { color: var(--primary); font-size: 0.95rem; }
.view-dd-chev { font-size: 0.68rem; color: var(--text-light); transition: transform .15s; }
.view-dd.open .view-dd-chev { transform: rotate(180deg); }
.view-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 260;
    background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 6px;
    box-shadow: 0 20px 40px -12px rgba(15,23,42,0.18), 0 4px 10px -4px rgba(15,23,42,0.08);
    min-width: 230px;
}
.view-dd.open .view-menu { display: block; }
.view-opt {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 9px 12px; border: none; background: transparent; border-radius: 8px;
    text-align: left; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-dark);
    cursor: pointer; transition: background .12s;
}
.view-opt > i:first-child { width: 18px; text-align: center; color: var(--text-light); font-size: 0.95rem; }
.view-opt span { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.view-opt span small { font-size: 0.74rem; font-weight: 500; color: var(--text-light); }
.view-opt .vo-check { visibility: hidden; color: var(--primary); font-size: 0.82rem; }
.view-opt:hover { background: rgba(0,106,255,0.06); }
.view-opt.active { color: var(--primary); }
.view-opt.active > i:first-child { color: var(--primary); }
.view-opt.active .vo-check { visibility: visible; }

/* "List a property" — primary CTA: green gradient pill with a plus badge */
.list-cta {
    display: inline-flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 18px 0 6px;
    border-radius: 999px; text-decoration: none;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #fff; font-weight: 700; font-size: 0.95rem; letter-spacing: .1px;
    box-shadow: 0 6px 16px -6px rgba(5,150,105,.55), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .15s, box-shadow .15s, filter .15s;
    white-space: nowrap;
}
.list-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(5,150,105,.65), inset 0 1px 0 rgba(255,255,255,.18); filter: saturate(1.08); color: #fff; }
.list-cta:active { transform: translateY(0); }
.list-cta-ic {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.list-cta .lb-short { display: none; }

/* Sort dropdown */
.sort-wrap { position: relative; display: inline-flex; }
.sort-menu {
    display: none;
    position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 260;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 20px 40px -12px rgba(15,23,42,0.18), 0 4px 10px -4px rgba(15,23,42,0.08);
    min-width: 220px;
    font-family: inherit;
}
.sort-wrap.open .sort-menu { display: block; }
.sort-opt {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}
.sort-opt:hover { background: rgba(0,106,255,0.06); }
.sort-opt.active { color: var(--primary); font-weight: 600; }
.sort-opt i.fa-check { color: var(--primary); font-size: 0.82rem; width: 14px; }
.sort-opt .sort-check-spacer { width: 14px; display: inline-block; }
.sort-btn i.fa-chevron-down { transition: transform 0.15s; }
.sort-wrap.open .sort-btn i.fa-chevron-down { transform: rotate(180deg); }

/* TYPE TOGGLE — Rabbu-style paired chips */
.type-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--primary);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    height: 40px;
}
/* When moved into the header, keep it compact */
.type-toggle.in-header { height: 38px; }
.type-toggle.in-header .type-btn { padding: 0 14px; font-size: 0.9rem; }
@media (max-width: 700px) {
    .type-toggle.in-header .type-btn { padding: 0 10px; font-size: 0.82rem; }
}
.type-btn {
    border: none; background: transparent;
    padding: 0 18px;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--primary); cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    line-height: 1;
}
.type-btn.active {
    background: var(--primary);
    color: #fff;
}

/* INPUTS — search bar with submit icon tucked inside on the right */
.fi-search {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 540px;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    height: 40px;
}
.fi-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--primary); font-size: 1rem; z-index: 2;
}
.fi {
    padding: 0 50px 0 42px;   /* 50px right padding clears the submit button */
    border: none;
    font-size: 0.95rem;
    width: 100%;
    background: transparent;
    font-family: inherit;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1;
}
.fi:focus { outline: none; }
.fi-search-submit {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    transition: background 0.15s;
    z-index: 2;
}
.fi-search-submit:hover { background: #0052cc; }
.fi-search-submit:disabled { opacity: 0.6; cursor: wait; }

/* Filter chip buttons — Rabbu's pale-tinted pill style */
.icon-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--primary);
    background: #e6f2ff; /* soft-blue tint, like Rabbu's #DEDAE5 lavender */
    font-size: 1rem; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    color: var(--primary);
    transition: all 0.15s;
    position: relative;
    font-family: inherit;
    line-height: 1;
}
.icon-btn:hover { background: #d9ebff; }
.icon-btn.on { background: var(--primary); color: #fff; }
.icon-btn.on .badge { background: #fff; color: var(--primary); border-color: var(--primary); }
.icon-btn .badge {
    position: absolute; top: -6px; right: -6px;
    background: #ef4444; color: #fff; font-size: 0.62rem; font-weight: 800;
    width: 17px; height: 17px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}

/* Search submit button — Rabbu-style attached right square */
.filter-bar .btn-primary {
    background: var(--primary); color: #fff;
    padding: 0 20px;
    height: 40px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    line-height: 1;
}
.filter-bar .btn-primary:hover { background: #0052cc; }

.filter-bar .btn-outline {
    background: #fff;
    color: var(--text-dark);
    padding: 0 14px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color 0.15s, color 0.15s;
}
.filter-bar .btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* ─── ADVANCED PANEL — popover under Filters button ─────────────── */
.filter-pop-wrap { position: relative; display: inline-flex; }
.adv-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 280;
    width: min(720px, 92vw);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px 16px;
    box-shadow: 0 20px 50px -12px rgba(15,23,42,0.2), 0 4px 12px -4px rgba(15,23,42,0.06);
    /* Cap to the viewport and scroll internally. In split view the page body
       is locked to viewport height, so without this the bottom of the popover
       (incl. the Apply button) would fall off-screen with no way to reach it. */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.filter-pop-wrap.open .adv-panel,
.adv-panel.open { display: block; }
.adv-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; align-items: flex-end; }
.adv-row .adv-sep { display: none; }               /* visual separators don't work in grid */
.adv-row .adv-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: 6px; margin-left: 0; align-self: auto; }
@media (max-width: 620px) { .adv-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .adv-row { grid-template-columns: minmax(0,1fr); } }
.adv-grp { display: flex; flex-direction: column; gap: 4px; }
.adv-grp label { font-size: 0.72rem; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
.adv-sel, .adv-in {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.88rem; background: #fff; min-width: 80px; font-family: inherit;
}
.adv-sel:focus, .adv-in:focus { outline: none; border-color: var(--primary); }
.adv-sel { min-width: 120px; }
.adv-in { width: 90px; }

.adv-checks { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; height: 34px; }
/* full-width "Purchase Terms" group: spans the whole grid row and wraps freely */
.adv-grp--terms { grid-column: 1 / -1; }
.adv-grp--terms label { margin-bottom: 2px; }
.adv-grp-hint { color: #bbb; font-weight: 600; text-transform: none; letter-spacing: 0; }
.adv-checks--wrap { height: auto; }
.pill-check {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 20px;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    background: #fff; color: var(--text-dark);
    transition: all 0.15s; user-select: none;
}
.pill-check input { display: none; }
.pill-check.on { background: #eff6ff; border-color: var(--primary); color: var(--primary); }

.adv-sep { width: 1px; background: var(--border); align-self: stretch; margin: 0 2px; flex-shrink: 0; }

.adv-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;      /* push to the far right of the filter row */
    align-self: flex-end;
}
.adv-actions .btn-primary,
.adv-actions .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 20px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
}
.adv-actions .btn-primary {
    background: linear-gradient(180deg, var(--primary) 0%, #0052cc 100%);
    color: #fff;
    border: 1px solid rgba(0,82,204,0.3);
    box-shadow: 0 6px 16px -6px rgba(0,106,255,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.adv-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -6px rgba(0,106,255,0.65), inset 0 1px 0 rgba(255,255,255,0.3);
}
.adv-actions .btn-primary:active { transform: translateY(0); }
.adv-actions .btn-outline {
    background: #fff;
    color: var(--text-light);
    border: 1px solid var(--border);
}
.adv-actions .btn-outline:hover {
    color: var(--text-dark);
    border-color: #94a3b8;
    background: #f8fafc;
}
.adv-actions .btn-outline i,
.adv-actions .btn-primary i { font-size: 0.85rem; }

/* ─── LAYOUT ─────────────────────────────────── */
.market-content { width: 100%; }
.pane-inner { max-width: 1480px; margin: 0 auto; padding: 0 16px 24px; }
@media (max-width: 768px) { .pane-inner { padding: 0 12px 18px; } }

/* Full-width map section */
#mapSection {
    width: 100%;
    height: 72vh;
    min-height: 400px;
    display: none;
    border-bottom: 1px solid var(--border);
}
#mapSection.visible { display: block; }
#marketMap { width: 100%; height: 100%; }

/* Grid section */
#gridSection { width: 100%; }
#gridSection.map-mode { display: none; }

/* ─── LAYOUT WRAP ─────────────────────────────── */
#layoutWrap { width: 100%; }

/* SPLIT mode — list left, map right */
#layoutWrap.split-mode {
    display: flex;
    align-items: stretch;
    height: calc(100vh - var(--filter-bar-height, 57px) - 48px);
    min-height: 560px;
}
#layoutWrap.split-mode .market-content {
    flex: 0 0 58%;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--border);
    background: var(--bg);
}
#layoutWrap.split-mode #mapSection {
    flex: 1;
    display: block !important;
    height: auto;
    min-height: 0;
    border-bottom: none;
    position: sticky;
    top: 0;
}
#layoutWrap.split-mode .pane-inner {
    max-width: none;
    padding: 16px 18px 40px;
}
#layoutWrap.split-mode .listings-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    padding: 0 !important;
}

/* Default grid view — adaptive: 4-up on wide screens, 3-up mid, 2-up tablet, 1-up mobile */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 12px 0 0;
}
@media (max-width: 1440px) { .listings-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .listings-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 640px)  { .listings-grid { grid-template-columns: minmax(0,1fr); gap: 12px; } }

/* GRID-only mode */
#layoutWrap.grid-only #mapSection { display: none; }
/* LIST mode — single column, cards laid out horizontally (image left, content right) */
#layoutWrap.list-mode .listings-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 900px;
    margin: 0 auto;
}
#layoutWrap.list-mode .prop-card {
    flex-direction: row;
    align-items: stretch;
    min-height: 160px;
}
#layoutWrap.list-mode .pc-img-wrap {
    flex: 0 0 260px;
    padding-top: 0;
    height: auto;
}
#layoutWrap.list-mode .pc-body {
    flex: 1;
    padding: 16px 20px;
}
#layoutWrap.list-mode .prop-card:hover { transform: translateY(-2px); }
@media (max-width: 640px) {
    #layoutWrap.list-mode .prop-card { flex-direction: column; }
    #layoutWrap.list-mode .pc-img-wrap { flex: 0 0 auto; padding-top: 66%; }
}

/* MAP-only mode */
#layoutWrap.map-only .market-content { display: none; }
#layoutWrap.map-only #mapSection { display: block; }

@media (max-width: 900px) {
    #layoutWrap.split-mode {
        flex-direction: column;
        height: auto;
    }
    #layoutWrap.split-mode .market-content {
        flex: 1 1 auto;
        border-right: none;
        max-height: none;
    }
    #layoutWrap.split-mode #mapSection {
        flex: 0 0 50vh;
        position: relative;
        border-bottom: 1px solid var(--border);
    }
}


/* VIEW BAR — below the filter row */
#viewBar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: calc(var(--header-height, 64px) + var(--filter-bar-height, 57px));
    z-index: 80;
}
.vb-count {
    font-size: 0.9rem;
    color: var(--text-light);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.vb-count strong { color: var(--text-dark); font-weight: 800; font-size: 0.95rem; }
.vb-area { color: var(--text-light); }
.vb-clear {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--primary); text-decoration: none;
    font-size: 0.82rem; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(0,106,255,0.08);
    transition: background 0.15s;
}
.vb-clear:hover { background: rgba(0,106,255,0.15); }

/* Filter row — compact phone layout (≤640px). Everything stays on ONE row on
   390px+ phones; on narrower screens the right-hand group wraps beneath, right-aligned.
   Never a horizontal scrollbar. */
@media (max-width: 640px) {
    .filter-bar-inner { padding: 2px 10px; }
    .filter-row { gap: 6px 6px; padding: 5px 0; }
    .fr-left, .fr-right { gap: 5px; }
    .vb-count { display: none; }
    .icon-btn { height: 38px; font-size: 0.88rem; }
    .icon-btn.icon-only { width: 38px; }
    .type-toggle { height: 38px; }
    .type-btn { padding: 0 9px; font-size: 0.82rem; }
    .view-dd-btn { height: 38px; padding: 0 9px 0 11px; font-size: 0.86rem; gap: 5px; }
    .view-dd-label { display: none; }                     /* icon + chevron only */
    .view-menu { min-width: 210px; }
    .list-cta { height: 38px; padding: 0 11px 0 4px; font-size: 0.9rem; gap: 6px; }
    /* bottom-sheet filter inputs: consistent full-width fields, inherit Inter */
    .adv-in, .adv-sel { width: 100%; min-width: 0; font-family: inherit; font-size: 16px; }
    .list-cta-ic { width: 26px; height: 26px; }
    .list-cta .lb-full { display: none; }                 /* "List a property" -> "List" */
    .list-cta .lb-short { display: inline; }
}
@media (max-width: 380px) {
    .type-btn { padding: 0 9px; font-size: 0.8rem; }
    .filter-bar-inner { padding: 2px 8px; }
}

/* ─── CARD (reverted to previous, better design) ───────────────────────────────────── */
.prop-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden;
    cursor: pointer; position: relative;
    display: flex; flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.prop-card:hover { transform: translateY(-5px); box-shadow: 0 24px 60px -20px rgba(15,23,42,0.22); border-color: rgba(0,106,255,0.3); }
/* v8: the card is a real link (crawlable, keyboard-focusable, middle-click opens a tab);
   the address anchor stretches over the whole card. The save button sits above it (z-index 20). */
.pc-link { color: inherit; text-decoration: none; }
.pc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc-link:focus-visible { outline: none; }
.prop-card:focus-within { box-shadow: 0 0 0 3px rgba(0,106,255,0.35); }
.prop-card.map-hl { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,106,255,0.18); }

.pc-img-wrap { position: relative; padding-top: 66%; background: linear-gradient(135deg,#e2e8f0,#cbd5e1); overflow: hidden; }
.pc-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.prop-card:hover .pc-img { transform: scale(1.07); }

.pc-badge {
    position: absolute; top: 12px; left: 12px; z-index: 5;
    background: rgba(255,255,255,0.95); color: var(--text-dark);
    padding: 4px 10px; border-radius: 6px; font-size: 0.68rem;
    font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    backdrop-filter: blur(6px);
}
.pc-badge.sale            { color: #10b981; }
.pc-badge.rent            { color: #6366f1; }
.pc-badge.under-contract  { color: #f59e0b; }
.pc-badge.sold            { color: #ef4444; }

/* Distance banner above grid + per-card distance chip */
.dist-banner {
    background: rgba(0,106,255,0.08);
    border: 1px solid rgba(0,106,255,0.22);
    color: var(--primary);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dist-banner.warn { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); color: #b45309; }
.dist-banner strong { color: var(--text-dark); }
.dist-reset {
    margin-left: auto;
    background: #fff;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.dist-reset:hover { background: var(--primary); color: #fff; }

.pc-dist-badge {
    position: absolute;
    top: 12px;
    left: 50%; transform: translateX(-50%);
    z-index: 6;
    background: rgba(0,106,255,0.96);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.pc-dist-badge i { font-size: 0.7rem; margin-right: 3px; }

.pc-save-btn {
    position: absolute; top: 8px; right: 8px; z-index: 20;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.9); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #ef4444;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}
.pc-save-btn:hover { transform: scale(1.1); background: #fff; }

.pc-creative-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 8px; display: flex; flex-wrap: wrap; gap: 4px; z-index: 10;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}
.term-banner {
    padding: 4px 8px; border-radius: 5px; font-size: 0.67rem; font-weight: 700;
    display: flex; align-items: center; gap: 4px; text-transform: uppercase; white-space: nowrap;
}
.tb-seller { background: #dcfce7; color: #166534; }
.tb-subto  { background: #f3e8ff; color: #6b21a8; }
.tb-hybrid { background: #e0f2fe; color: #0369a1; }
.tb-nodown { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }

.pc-body { padding: 18px 18px 16px; flex: 1; display: flex; flex-direction: column; }
.pc-price { font-family: 'Inter', sans-serif; font-size: 1.55rem; font-weight: 800; color: var(--text-dark); display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; letter-spacing: -0.02em; line-height: 1.05; }
.pc-period { font-size: 0.85rem; color: var(--text-light); font-weight: 500; letter-spacing: 0; }
.pc-specs { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; color: #334155; }
.pc-spec { display: inline-flex; align-items: center; gap: 5px; }
.pc-spec i { color: #94a3b8; font-size: 0.82rem; }
.pc-prop-type { font-size: 0.76rem; color: var(--text-light); font-weight: 500; }
.pc-addr { font-size: 0.85rem; color: var(--text-light); margin-bottom: 10px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.pc-foot {
    margin-top: auto; padding-top: 10px; border-top: 1px solid #f3f4f6;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8rem; color: var(--text-light);
    gap: 8px;
}
.pc-listed-by {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; flex: 1 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-listed-by-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    background: #e5e7eb; border: 1px solid #e5e7eb;
}

/* ─── RESULTS BAR ────────────────────────────── */
.results-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0 0; font-size: 0.88rem; color: var(--text-light);
}
.results-bar strong { color: var(--text-dark); }

/* ─── PAGINATION ─────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 4px 16px;
    flex-wrap: wrap;
    font-family: inherit;
}
.pg-left, .pg-right { flex: 1; min-width: 180px; }
.pg-right { text-align: right; }
.pg-center { display: flex; gap: 4px; align-items: center; }
.pg-range { font-size: 0.88rem; color: var(--text-light); }
.pg-range strong { color: var(--text-dark); font-weight: 700; }
.pg-btn, .pg-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    font-size: 0.88rem; font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    transition: all 0.15s;
    font-family: inherit;
}
.pg-btn i { font-size: 0.72rem; }
.pg-btn:hover, .pg-num:hover { border-color: var(--primary); color: var(--primary); }
.pg-btn.disabled { opacity: 0.4; pointer-events: none; }
.pg-num.current { background: var(--primary); color: #fff; border-color: var(--primary); cursor: default; }
.pg-num.current:hover { color: #fff; }
.pg-ellipsis { padding: 0 6px; color: var(--text-light); }
.pg-per { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--text-light); }
.pg-per select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-dark);
    background: #fff;
    cursor: pointer;
}
.pg-per select:focus { outline: none; border-color: var(--primary); }

@media (max-width: 700px) {
    .pagination { gap: 12px; }
    .pg-left, .pg-right { flex: 0 0 100%; text-align: center; }
    .pg-center { flex: 0 0 100%; justify-content: center; }
}

/* ─── EMPTY STATE ────────────────────────────── */
.empty-state {
    text-align: center; padding: 70px 20px;
    background: #fff; border-radius: 16px;
    border: 1px dashed var(--border); margin-top: 30px;
}

/* ─── MAP POPUP ──────────────────────────────── */
.mp-popup { min-width: 190px; font-family: inherit; }
.mp-popup-price { font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.mp-popup-addr { font-size: 0.82rem; color: #555; margin-bottom: 6px; }
.mp-popup-specs { font-size: 0.82rem; margin-bottom: 8px; }
.mp-popup-link {
    display: block; text-align: center; background: var(--primary);
    color: #fff; padding: 6px; border-radius: 6px;
    text-decoration: none; font-size: 0.84rem; font-weight: 600;
}
.mp-popup-link:hover { background: #0050cc; }

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 900px) {
    #mapSection { height: 55vh; }
}
@media (max-width: 640px) {
    .fi-price { width: 80px; }
    .type-btn { text-align: center; }
    .adv-in { width: 100%; }   /* v8: full-width fields in the bottom sheet */
    /* type-toggle should NOT be full-width when relocated into the header */
    .type-toggle.in-header { width: auto !important; flex-shrink: 0; }
    /* sort dropdown — right-align to prevent overflow off the right edge */
    .sort-menu { left: auto; right: 0; }
    /* filter panel — bottom sheet instead of absolute dropdown */
    .adv-panel {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-height: 78vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px 16px 0 0 !important;
        border: 1px solid var(--border) !important;
        border-bottom: none !important;
        padding: 8px 16px 40px;
        box-shadow: 0 -8px 32px rgba(15,23,42,0.18);
        z-index: 500 !important;
    }
    .adv-panel::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: #e2e8f0; border-radius: 2px;
        margin: 0 auto 16px;
    }
}
/* backdrop — only visible on mobile when filter panel is open */
#filterBackdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 499;
}
@media (max-width: 640px) {
    #filterBackdrop.open { display: block; }
}

/* v8: NEW / PRICE CUT flags under the status badge */
.pc-flags { position: absolute; top: 42px; left: 12px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pc-flag { padding: 3px 8px; border-radius: 6px; font-size: .64rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.pc-flag.new { background: #1d4ed8; }
.pc-flag.cut { background: #b91c1c; }
.pc-flag.oh { background: #047857; }
.pc-flag.back { background: #334155; }
.pc-flag.early { background: #f59e0b; }

/* v8: Recently viewed strip */
.rv-strip { margin: 0 0 14px; }
.rv-head { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #475569; margin: 0 0 8px; }
.rv-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.rv-card { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; width: 250px; padding: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; text-decoration: none; color: inherit; }
.rv-card:hover { border-color: #93c5fd; box-shadow: 0 6px 16px rgba(2,32,71,.08); }
.rv-card img, .rv-ph { width: 72px; height: 54px; flex: 0 0 72px; border-radius: 8px; object-fit: cover; background: #e2e8f0; display: grid; place-items: center; color: #64748b; }
.rv-txt { min-width: 0; display: flex; flex-direction: column; }
.rv-txt b { font-size: .92rem; color: #0f172a; }
.rv-txt small { font-size: .76rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v8 quick filters */
.mp-quick{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mp-qchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;color:#334155;font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap;line-height:1.2}
.mp-qchip:hover{border-color:#0052cc;color:#0052cc}
.mp-qchip.on{background:#0052cc;border-color:#0052cc;color:#fff}
.mp-qsep{width:1px;height:20px;background:#e2e8f0;margin:0 2px}

/* v8 line icons (lib/icons.php) — quieter, more professional than the solid glyphs */
.ic { display: inline-block; vertical-align: -3px; flex: 0 0 auto; }
.pc-spec .ic { color: #94a3b8; }
.rv-head { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.rv-head .ic { color: #94a3b8; }
.mp-qchip { font-weight: 600; border-radius: 8px; padding: 6px 11px; border-color: #e2e8f0; color: #334155; }
.mp-qchip .ic { color: #64748b; }
.mp-qchip:hover { border-color: #94a3b8; color: #0f172a; }
.mp-qchip:hover .ic { color: #0f172a; }
.mp-qchip.on { background: #0f172a; border-color: #0f172a; color: #fff; }
.mp-qchip.on .ic { color: #fff; }
.pc-cap { color: #0f172a; }
.pc-cap .ic { color: #15803d; }

/* v8: two-row filter bar — row 1 = view/count/nav + actions (right, never pushed off screen), row 2 = chips */
@media (min-width: 901px) {
    .filter-row { flex-wrap: nowrap; }
    .fr-left { flex: 1 1 auto; min-width: 0; }
    .fr-right { flex: 0 0 auto; }
}
.fr-left .lp-countnav { flex: 1 1 auto !important; min-width: 0; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 2px 2px 0; }
.fr-left .lp-countnav::-webkit-scrollbar { display: none; }
.fr-left .lp-countnav .lp-cb { flex: 0 0 auto; }
.mp-quick-row { padding: 2px 0 8px; }
.mp-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mp-quick::-webkit-scrollbar { display: none; }
.mp-qchip { flex: 0 0 auto; }
.fr-left .lp-countnav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 24px; }

/* v8: filters auto-open (server-side 'auto') only as the desktop dropdown. On phones the panel is a bottom sheet that
   covered the whole page on every filtered URL, so there it stays closed until the Filters button is tapped. */
@media (max-width: 640px) {
    .filter-pop-wrap.open.auto .adv-panel, .adv-panel.open.auto { display: none; }
}

/* v8: "Save this search" bar above the results */
.mp-save-search { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 16px; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; font-size: .9rem; color: #334155; }
.mp-save-search span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mp-save-search .btn-outline { white-space: nowrap; padding: 8px 14px; border: 1px solid #bfdbfe; border-radius: 8px; color: #1d4ed8; font-weight: 600; background: #fff; text-decoration: none; }
.mp-save-search .btn-outline:hover { background: #eff6ff; }