html[data-theme="night"] #sort_results_by { color:#fff;}
html[data-theme="night"] #sort-options-list { color:#fff;}

/* Close button (SVG inherits color) */
#sortModal .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 1px;                     /* bigger hit area */
  border: 0;
  background: transparent;
  border-radius: 999px;
  line-height: 0;
  cursor: pointer;
  color: #858585;                      /* day icon color */
}

#sortModal .close-btn svg { display: block; }
#sortModal .close-btn:hover { opacity: .85; }
#sortModal .modal-content { position: relative; background: #fff; border-radius: 12px; border: 1px solid #e0e0e0; background-clip: padding-box; overflow: hidden;}

/* NIGHT: solid black panel, no border (removes the white top line) */
html[data-theme="night"] #sortModal .modal-content {
  background: #000;
  border: 0 !important;             /* ← key to kill the white line */
  box-shadow: 0 12px 28px rgba(0,0,0,.7);
}

/* Just in case any pseudo-lines were used by other CSS */
html[data-theme="night"] #sortModal .modal-content::before,
html[data-theme="night"] #sortModal .modal-content::after {
  content: none !important;
}

/* Night color for the icon */
html[data-theme="night"] #sortModal .close-btn { color: #dedede; }

/* If any SVG paths use fills in future, make them follow the color too */
#sortModal .close-btn svg * {
  stroke: currentColor;
}
#sortModal .close-btn svg [fill]:not([fill="none"]) {
  fill: currentColor;
}





/* ========== Toggles (merged) ========== */
.toggle-button, .toggle-button2 { display: flex; gap: 10px; }
.toggle-btn, .toggle-btn2 {
  padding: 8px 16px; border: 1px solid #ccc; background: #f0f0f0; cursor: pointer; font-size: 16px; border-radius: 4px;
  transition: background 0.2s, color 0.2s; width: 98px;
}
.toggle-btn.active, .toggle-btn2.active { background: #007bff; color: #fff; border-color: #007bff; }

#sort-options-list { list-style: none; padding: 0; margin: 15px 0; text-align: center;}
#sort-options-list li { padding: 10px; border-bottom: 1px solid #ddd; cursor: pointer; font-size: 16px; text-align: center;}
#sort-options-list li:last-child { border-bottom: 0; }
#sort-options-list li:hover,
#sort-options-list li.active {
  background: #007bff; color: #fff; font-weight: 700; transition: .3s;
}
#sortModal h2 { margin-bottom: 20px; font-size: 20px; font-weight: 700; text-align: center; color: #333;}
#toggle-buttons-container { position: fixed; bottom: 20px; right: 20px; z-index: 1001; display: flex; gap: 10px; }




/* ========== Icons / Footer badges ========== */
.icon-wrapper .filter-badge { display: none; position: absolute; top: -2px; right: -6px; width: 13px; height: 13px; background: red; border: 2px solid white; box-sizing: border-box; border-radius: 50%; z-index: 1;}
#filter-btn2.has-filters .filter-badge { display: block; }



/* ========== Exact match / filter actions ========== */
.exact-match { display: flex; align-items: center; gap: 8px; }
.exact-match input { width: 12px; height: 12px; margin: 0; vertical-align: middle; }
.exact-match label { font-size: 14px; display: flex; align-items: center; height: 18px; line-height: 18px; padding-top: 6px; }
.filter-actions { display: flex; align-items: center; gap: 20px; }
#resetFilters { background: none; border: none; color: #007bff; font-size: 16px; cursor: pointer; padding: 0; }
#resetFilters:hover { color: #0056b3; }




/* ================= Modal: full viewport, no page scroll ================= */
#filterModal{
  position: fixed;
  inset: 0;                 /* top/right/bottom/left: 0 */
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 1000;
  overflow: hidden;         /* only inner area scrolls */
}

/* ================= Layout inside modal ================= */
#filterModal .filter-modal-container{
  /* tune these once here */
  --fm-pad: 15px;           /* side padding for content alignment */
  --fm-header-h: 42px;      /* visual height of the top bar */
  --fm-footer-h: 56px;      /* min footer height */
  height: 100%;
  display: flex;
  flex-direction: column;
  /* anti-flicker */
  contain: layout paint;
  transform: translateZ(0);
  will-change: transform;
  background:#fff;
  padding: var(--fm-pad);    /* inner padding for content alignment */
}



#applyFilters.is-disabled,
#applyFilters[disabled]{
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}


/* ===================== FILTER MODAL — NIGHT MODE ===================== */

html[data-theme="night"] #filterModal.filterSheet{
  background: transparent !important; /* do NOT tint the whole overlay */
}

html[data-theme="night"] #filterModal .filterSheet__backdrop{
  background: rgba(0,0,0,0.55); /* backdrop tint */
}

html[data-theme="night"] #filterModal .filterSheet__panel{
  background: #000;
  color: #e5e7eb;
}

html[data-theme="night"] #filterModal .filterSheet__toprow{
  background: #000;
  border-bottom: 1px solid #222; /* shaded line under count */
}

html[data-theme="night"] #filterModal .filter-actions{
  background: #000;
  border-top: 1px solid #222;
  box-shadow: 0 -4px 16px rgba(0,0,0,.7);
}

/* Close button (your CSS was targeting #closemodal; fix to #closeFilterModal) */
html[data-theme="night"] #closeFilterModal{
  color: #dedede !important;
}

html[data-theme="night"] #filterModal .filter-modal-container {
  background: #000;
  color: #e5e7eb;
}



/* Labels / section titles */
html[data-theme="night"] #filterModal .filter-group label,
html[data-theme="night"] #filterModal .filter-group strong {
  color: #e5e7eb;
}



/* Footer actions bar + buttons */
html[data-theme="night"] #filterModal .filter-actions {
  background: #000;
  border-top: 1px solid #222;
  box-shadow: 0 -4px 16px rgba(0,0,0,.7);
}
html[data-theme="night"] #applyFilters.is-disabled,
html[data-theme="night"] #applyFilters[disabled] {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}
html[data-theme="night"] #resetFilters {
  color: #90caf9;
}
html[data-theme="night"] #resetFilters:hover {
  color: #64b5f6;
}

/* Price dropdowns */
html[data-theme="night"] #filterModal .dropdown-button {
  background: #0f0f0f;
  border: 1px solid #333;
  color: #e5e7eb;
}
html[data-theme="night"] #filterModal .dropdown-button:hover {
  background: #141414;
}
html[data-theme="night"] #filterModal .dropdown-menu {
  background: #0b0b0b;
  border: 1px solid #333;
  box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
html[data-theme="night"] #filterModal .dropdown-item {
  color: #e5e7eb;
}
html[data-theme="night"] #filterModal .dropdown-item:hover {
  background: #1f2937;
}
html[data-theme="night"] #filterModal .price-separator {
  color: #bbb;
}

/* Bedrooms chips */
html[data-theme="night"] #filterModal .bedroom-btn {
  background: #0f0f0f;
  border: 1px solid #333;
  color: #e5e7eb;
}
html[data-theme="night"] #filterModal .bedroom-btn:focus {
  background: #141414;
}
html[data-theme="night"] #filterModal .bedroom-btn.active {
  background: #0d6efd !important;
  border-color: #0b5ed7 !important;
  color: #fff !important;
}

/* Exact match */
html[data-theme="night"] #filterModal .exact-match label {
  color: #e5e7eb;
}
html[data-theme="night"] #filterModal .exact-match input {
  accent-color: #0d6efd;
}

/* Property type cards */
html[data-theme="night"] #filterModal .property-type-btn {
  background: #0f0f0f;
  border: 1px solid #333;
  color: #e5e7eb;
}
html[data-theme="night"] #filterModal .property-type-btn:hover {
  background: #151515;
}
html[data-theme="night"] #filterModal .property-type-btn:has(input[type="checkbox"]:checked) {
  background: #1f1f1f;
  border-color: #3a3a3a;
}
html[data-theme="night"] #filterModal .property-type-btn span {
  color: inherit;
}

/* Features list */
html[data-theme="night"] #filterModal .feature-checkboxes label span {
  color: #e5e7eb;
}
html[data-theme="night"] #filterModal .feature-checkboxes input {
  accent-color: #0d6efd;
}

/* Count badge styles inside modal (if used anywhere) */
html[data-theme="night"] #filterModal .count-text {
  background: #111;
  color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
}





/* ================================
   BEDROOMS + EXACT MATCH
   ================================ */

.bedrooms-filter { margin: 20px 0; font-family: Arial, sans-serif; }
.bedrooms-buttons { display: flex; gap: 0; width: 100%; margin-top: 0; }
.bedroom-btn { flex: 1; padding: 10px; text-align: center; border: 1px solid #ccc; background: #f8f8f8; cursor: pointer; font-size: 14px; font-weight: 700;}
.bedroom-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.bedroom-btn:nth-child(6) { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.bedroom-btn:focus { outline: none; background: #f8f8f8; }
.bedroom-btn.active { background: #007bff !important; color: #fff !important; border-color: #0056b3 !important; }

.exact-match { display: flex; align-items: center; gap: 5px; margin-top: 6px;}




/* =========================
   Sort bottom sheet (mobile)
   Uses: .sortSheet / .sortSheet__*
   ========================= */

.sortSheet[hidden] { display: none !important; }
.sortSheet{ position: fixed; inset: 0; z-index: 500000;}
.sortSheet__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity .22s ease;}

.sortSheet__panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: min(70vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  color: #111;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.25);
  transform: translateY(110%);
  transition: transform .22s ease;
  padding: 10px 16px 18px;
}

.sortSheet.is-open .sortSheet__backdrop{ opacity: 1; }
.sortSheet.is-open .sortSheet__panel{ transform: translateY(0); }

.sortSheet__drag{ padding: 6px 0 10px; touch-action: none;}
.sortSheet__handle{ width: 46px; height: 5px; border-radius: 999px; margin: 0 auto; background: rgba(0,0,0,0.25);}
.sortSheet__head{ position: relative; padding: 4px 0 10px;}
.sortSheet__head h2{ margin: 0; font-size: 18px; font-weight: 700;}
.sortSheet__close{ position: absolute; right: -6px; top: -6px; border: 0; background: transparent; padding: 6px; cursor: pointer; color: inherit;}
.sortSheet__list{ list-style: none; padding: 0; margin: 8px 0 0;}
.sortSheet__list li{ padding: 14px 12px; border-radius: 12px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;}

.sortSheet__list li:hover{ background: rgba(0,0,0,0.05); }
.sortSheet__list li.active{ background: rgba(39,86,193,0.14); }

/* Night mode */
html[data-theme="night"] .sortSheet__panel{
  background: #111;
  color: #eee;
}

html[data-theme="night"] .sortSheet__handle{
  background: rgba(255,255,255,0.22);
}

html[data-theme="night"] .sortSheet__list li:hover{
  background: rgba(255,255,255,0.06);
}

html[data-theme="night"] .sortSheet__list li.active{
  background: rgba(39,86,193,0.28);
}



/* =========================
   Filter bottom sheet (clean)
   ========================= */

#filterModal[hidden] { display: none !important; }

#filterModal.filterSheet{
  position: fixed;
  inset: 0;
  z-index: 500000;
  background: transparent !important;
}

#filterModal .filterSheet__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity .22s ease;
}

#filterModal.is-open .filterSheet__backdrop{ opacity: 1; }

#filterModal .filterSheet__panel{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  max-height: min(85vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* important */
  background: #fff;
  color: #111;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.25);
  transform: translateY(110%);
  transition: transform .22s ease;
  padding: 0;                       /* we pad sections instead */
}

#filterModal.is-open .filterSheet__panel{ transform: translateY(0); }

/* Drag handle */
#filterModal .filterSheet__drag{
  padding: 10px 16px 6px;
  touch-action: none;
}
#filterModal .filterSheet__handle{
  width: 46px;
  height: 5px;
  border-radius: 999px;
  margin: 0 auto;
  background: rgba(0,0,0,0.25);
}

/* Header / count row (your markup currently uses .sortSheet__head) */
#filterModal .sortSheet__head{
  position: relative;
  padding: 8px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.10); /* shaded line under count */
  touch-action: none; /* allow drag here too if you want */
}

#filterModal #listing-count{
  display: block;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

/* Middle scroller (ONLY this scrolls) */
#filterModal .filterSheet__body{
  flex: 1 1 auto;
  min-height: 0;                 /* critical */
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#filterModal .filterSheet__body::-webkit-scrollbar{
  width: 0; height: 0; display: none;
}

/* Keep your content padding here */
#filterModal .filter-modal-container{
  padding: 12px 16px 16px;
}

/* Footer: always visible, full width, not scrolling */
#filterModal .filter-actions{
  flex: 0 0 auto;
  display: flex;
  gap: 8px;

  padding:
    12px calc(16px + env(safe-area-inset-right))
    calc(12px + env(safe-area-inset-bottom))
    calc(16px + env(safe-area-inset-left));

  background: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}

#filterModal .filter-actions #applyFilters{
  flex: 1 1 auto;
  min-height: 40px;
}

/* Night mode */
html[data-theme="night"] #filterModal .filterSheet__panel{
  background: #111;
  color: #eee;
}
html[data-theme="night"] #filterModal .filterSheet__handle{
  background: rgba(255,255,255,0.22);
}
html[data-theme="night"] #filterModal .sortSheet__head{
  border-bottom-color: rgba(255,255,255,0.10);
}
html[data-theme="night"] #filterModal .filter-actions{
  background: #111;
  border-top-color: rgba(255,255,255,0.10);
  box-shadow: 0 -4px 16px rgba(0,0,0,.7);
}


/* =========================================================
   FILTER MODAL: make top/count bar match SORT modal header/title
   (do NOT change sort; change filter to look like sort)
   ========================================================= */

/* Day */
#filterModal #listing-count-wrapper{
  position: sticky;
  top: 0;
  z-index: 40;
  /* ✅ stop the full-bleed behaviour */
  margin: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* ✅ header-like spacing (similar “title” area) */
  padding: 14px 0 !important;          /* no side-cancel; it sits within your modal padding */
  height: auto !important;
  min-height: 52px;                    /* stable header height */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* remove the bottom fade that was unique to filter top */
#filterModal #listing-count-wrapper::after{
  content: none !important;
}

#filterModal #listing-count{
  font-size: 20px !important;          /* matches your sort title scale */
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #333 !important;
  font-variant-numeric: tabular-nums;
}

/* Night */
html[data-theme="night"] #filterModal #listing-count-wrapper{
  background: #000 !important;
  border-bottom: 1px solid #222 !important;
}
html[data-theme="night"] #filterModal #listing-count{
  color: #fff !important;
}

/* Filter count no-flash: keep the header count stable while server count refreshes. */
#filterModal #listing-count,
#filterModal #listing-count.is-checking{
  opacity: 1 !important;
  transition: none !important;
}



/* =========================================================
   FILTER OVERLAY (non-bootstrap): footer always visible
   Works even if parent containers use transform animations
   ========================================================= */

:root{
  --vvh: 100vh;        /* visible viewport height (JS sets) */
  --fm-pad: 16px;
  --fm-footer-h: 64px; /* JS sets to actual footer height */
}

/* Make the overlay truly viewport-fixed */
#filterModal{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--vvh) !important;
  max-height: var(--vvh) !important;
  z-index: 9999 !important;
  overflow: hidden !important; /* only #filterForm scrolls */
  background: #fff !important;
}

/* Container is the flex column layout */
#filterModal .filter-modal-container{
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Top bar should not scroll */
#listing-count-wrapper{
  flex: 0 0 auto !important;
}

/* The form becomes the ONLY scroller */
#filterForm{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  /* keep content above the pinned footer */
  padding-bottom: calc(var(--fm-footer-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;

  /* hide vertical scrollbar (optional) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#filterForm::-webkit-scrollbar{ width:0; height:0; display:none; }

/* Footer pinned to bottom of the overlay (not viewport-fixed) */
#filterModal .filter-actions{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 30 !important;
  display: flex !important;
  gap: 8px !important;
  background: #fff !important;
  border-top: 1px solid #eee !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08) !important;

  padding:
    12px calc(var(--fm-pad) + env(safe-area-inset-right, 0px))
    calc(12px + env(safe-area-inset-bottom, 0px))
    calc(var(--fm-pad) + env(safe-area-inset-left, 0px)) !important;

  min-height: var(--fm-footer-h) !important;
}

#filterModal .filter-actions .btn#applyFilters{
  flex: 1 1 auto !important;
  min-height: 40px !important;
}

/* Close button stays visible (account for safe area) */
#closemodal{
  position: absolute !important;
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  z-index: 40 !important;
}

/* Night mode footer background */
html[data-theme="night"] #filterModal{
  background: rgba(0,0,0,0.9) !important;
}
html[data-theme="night"] #filterModal .filter-modal-container{
  background: #000 !important;
}
html[data-theme="night"] #filterModal .filter-actions{
  background: #000 !important;
  border-top: 1px solid #222 !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,.7) !important;
}


#filterModal #filterForm{
  overflow: visible !important;
  -webkit-overflow-scrolling: auto !important;
}

/* Contain overscroll + avoid scroll chaining to the page */
#filterModal .filterSheet__body{
  overscroll-behavior: contain;       /* Chrome/Edge/Firefox + newer Safari */
  overscroll-behavior-y: contain;
  background: inherit;                /* so bounce never shows “empty” */
}

/* Ensure the panel provides a solid background behind bounce */
#filterModal .filterSheet__panel{
  background: #fff;
}
html[data-theme="night"] #filterModal .filterSheet__panel{
  background: #111;
}


.segmented-toggle-loc:not(.adtype-ready) .segmented-thumb{
  transition: none !important;
}
.segmented-toggle-loc.adtype-ready .segmented-thumb{
  transition: transform .18s ease;
}

/* Sort options: don’t allow text selection / weird tap highlight */
.sortSheet__panel [data-sort-value]{
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

/* Your single selected state */
.sortSheet__panel [data-sort-value].is-selected{
  /* keep your existing selected styling here */
}




/* Sort button shows an indicator when a sort is selected */
#toggle-sort-btn.has-sort{ position: relative; }
#toggle-sort-btn.has-sort::after{
  content: "";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.95;
  pointer-events: none;
}