:root {
  --nav-h: 64px;
  --green: #0a5c49;
  --green-dark: #07453a;
  --green-tint: #eef4f2;
  --ink: #111827;
  --ink-strong: #0f172a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.16);
}

html,
body {
  height: 100%;
}

body {
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--green);
  text-decoration: none;
}

.brand:hover {
  color: var(--green-dark);
}

.topnav {
  display: flex;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.topnav a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.topnav a:hover {
  background: #f3f4f6;
  color: var(--ink);
}

.topnav a.active {
  background: var(--green-tint);
  color: var(--green-dark);
}

.btn-contact {
  margin-left: auto;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 600;
}

.btn-contact:hover,
.btn-contact:focus {
  background: var(--green-dark);
  color: #fff;
}

.shell {
  display: flex;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

@supports (height: 100dvh) {
  .shell {
    height: calc(100dvh - var(--nav-h));
  }
}

.listings {
  width: 50%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #fff;
}

.listings-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}

.results-count {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.results-count strong {
  color: var(--ink);
}

.load-error {
  margin: 16px 20px;
  padding: 12px 14px;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
}

.cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
  padding: 16px 20px 24px;
  overflow-y: auto;
}

@media (min-width: 1280px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.empty-state {
  margin: 40px 20px;
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted);
}

.empty-state p {
  margin: 0;
}

.btn-reset {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.btn-reset:hover,
.btn-reset:focus {
  background: var(--green-dark);
  color: #fff;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  flex-shrink: 0;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.page-btn:hover:not(:disabled):not(.current),
.page-btn:focus-visible:not(:disabled):not(.current) {
  background: #f3f4f6;
}

.page-btn.current {
  background: var(--ink);
  color: #fff;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-btn.nav-arrow {
  font-size: 17px;
  min-width: auto;
  padding: 0 10px;
}

.cards::-webkit-scrollbar {
  width: 10px;
}

.cards::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
  border: 3px solid #fff;
}

.prop-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.prop-card:hover,
.prop-card.is-hovered {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

.prop-card.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), var(--shadow-sm);
}

.prop-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.prop-media {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: #f3f4f6;
}

.prop-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.prop-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 16px 14px;
  background: #fff;
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}

.prop-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.prop-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-strong);
}

.prop-qualifier {
  font-size: 11.5px;
  color: var(--muted);
}

.prop-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prop-meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.prop-specs {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink);
}

.map-panel {
  position: relative;
  flex: 1;
  background: #e8eaed;
}

#map {
  position: absolute;
  inset: 0;
}

.price-pin {
  width: 0;
  height: 0;
  background: none;
  border: none;
}

.price-pin span {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: inline-block;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.price-pin:hover span,
.price-pin.is-hovered span {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.price-pin.is-active span {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

@media (max-width: 991.98px) {
  .shell {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .listings {
    width: 100%;
    min-width: 0;
    border-right: 0;
  }

  .cards {
    flex: none;
    overflow: visible;
    padding-bottom: 8px;
  }

  .map-panel {
    flex: none;
    height: 60vh;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 767.98px) {
  .topbar-inner {
    gap: 12px;
  }

  .topnav {
    display: none;
  }

  .prop-body {
    padding: 10px 12px 12px;
  }
}

@media (max-width: 599.98px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* ---- Media placeholder (properties without a photo) ---- */
.prop-media-placeholder {
  height: 100%;
  min-height: 120px;
  background: linear-gradient(135deg, var(--green-tint) 0%, #dfe9e5 100%);
}

/* ---- Marker clustering ---- */
/* Restyled from MarkerCluster.Default.css to match the Lisney palette. */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: rgba(10, 92, 73, 0.18);
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: var(--green);
  color: #fff;
  font: 600 12px/18px "Segoe UI", system-ui, sans-serif;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18);
}

.marker-cluster-medium {
  background: rgba(7, 69, 58, 0.18);
}

.marker-cluster-medium div {
  background: var(--green-dark);
}

.marker-cluster-large {
  background: rgba(7, 69, 58, 0.25);
}

/* Price pins should always sit above cluster haloes */
.price-pin {
  z-index: 500;
}

/* =====================================================================
   Search bar (sector dropdown · location search · filters · search)
   ===================================================================== */

.listings-toolbar {
  padding: 12px 20px 10px;
}

.search-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

/* --- Sector dropdown (left of the search field) --- */
.sector-select {
  position: relative;
  flex: none;
}

.sector-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px;
  border: 0;
  background: none;
  border-radius: 999px 0 0 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.sector-btn:hover,
.sector-btn:focus-visible {
  background: #f6f7f8;
}

.sector-btn .caret {
  color: var(--green);
  transition: transform 0.15s ease;
}

.sector-btn[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.sector-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.sector-menu button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}

.sector-menu button:hover,
.sector-menu button:focus-visible {
  background: var(--green-tint);
}

.sector-menu button[aria-selected="true"] {
  background: var(--green);
  color: #fff;
  font-weight: 600;
}

/* --- Location search field --- */
.loc-search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  border-left: 1px solid var(--line);
}

.loc-search-icon {
  flex: none;
  margin-left: 14px;
  color: var(--muted);
  pointer-events: none;
}

.loc-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
}

.loc-input::placeholder {
  color: var(--muted);
}

/* --- Location dropdown panel --- */
.loc-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  width: min(430px, calc(100vw - 48px));
  z-index: 70;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.loc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fafafa;
}

.loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.loc-chip:hover {
  border-color: #d1d5db;
  background: #f6f7f8;
}

.loc-chip svg {
  color: var(--muted);
}

/* Drill-down browser: two sliding panels (root ↔ node), iOS-style */
.loc-browser {
  position: relative;
  max-height: 380px;
  overflow: hidden;
}

.loc-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: 380px;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.28s;
}

/* Panel position classes drive the iOS-style push in both directions. All
   panels stay in the DOM, so entering and leaving both animate. */
.loc-panel.current {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.loc-panel.prev {
  transform: translateX(-28%);
  visibility: visible;
  transition-delay: 0s;
  pointer-events: none;
}

.loc-panel.far {
  transform: translateX(-100%);
  visibility: hidden;
}

.loc-panel.future {
  transform: translateX(100%);
  visibility: hidden;
}

.loc-panel-node {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
}

.loc-sections {
  padding: 6px 8px 10px;
}

.loc-section + .loc-section {
  margin-top: 10px;
}

.loc-section-head,
.mfilter-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 10px 6px;
}

.loc-section-title,
.mfilter-group-title {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-strong);
}

.loc-any {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.loc-any-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.loc-any i {
  width: 16px;
  height: 16px;
  border: 1.5px solid #cbd2d9;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.loc-any-check:checked + i {
  border-color: #e11d48;
  background: #e11d48;
  box-shadow: inset 0 0 0 3px #fff;
}

.loc-node-inner {
  padding: 2px 8px 10px;
}

.loc-node-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 4px;
}

.loc-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.loc-back:hover {
  background: #f6f7f8;
}

.loc-node-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-chips-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.loc-chips-clear {
  border: 0;
  background: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--green);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

.loc-chips-clear:hover {
  color: var(--green-dark);
  text-decoration: underline;
}

.loc-row,
.mfilter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.loc-row:hover,
.loc-row:focus-visible,
.mfilter-item:hover,
.mfilter-item:focus-visible {
  background: #f6f7f8;
}

.loc-check {
  flex: none;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e11d48;
}

.loc-check svg {
  display: none;
}

.loc-check.on svg {
  display: block;
}

.loc-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-check.on + .loc-name {
  font-weight: 700;
  color: var(--ink-strong);
}

.loc-count {
  flex: none;
  font-size: 11.5px;
  color: var(--muted);
}

.loc-row .chev,
.mfilter-item .chev,
.mfilter-row .chev {
  flex: none;
  color: #9ca3af;
}

/* --- Filters button + search submit --- */
.filters-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid var(--line);
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  position: relative;
}

.filters-btn:hover,
.filters-btn:focus-visible {
  background: #f6f7f8;
}

.filters-btn.on {
  background: #f6f7f8;
}

.filters-dot {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.search-submit {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  margin: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
}

.search-submit:hover,
.search-submit:focus-visible {
  background: var(--green-dark);
}

/* --- Desktop filter bar (slides down under the search bar) --- */
.dfilters {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.2s ease, visibility 0s linear 0.28s;
}

.dfilters.open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.dfilters-inner {
  min-height: 0;
  overflow: hidden;
}

.dfilters-grid {
  display: grid;
  /* 170px keeps the three range cards on one row in the list column width,
     while the Type / Build Type cards span the full width below. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  padding-top: 12px;
}

@media (max-width: 767.98px) {
  .dfilters-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dfilter-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 13px 16px 15px;
  overflow: visible;
}

/* Type / Build Type cards: full-width rows of toggle chips below the ranges */
.dfilter-list {
  grid-column: 1 / -1;
}

.dfilter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.dfilter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.dfilter-chip em {
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
}

.dfilter-chip:hover,
.dfilter-chip:focus-visible {
  border-color: #cbd2d9;
  background: #f6f7f8;
}

.dfilter-chip.on {
  border-color: #e11d48;
  background: #fff1f2;
  color: #be123c;
}

.dfilter-chip.on em {
  color: #be123c;
  opacity: 0.75;
}

/* Small screens: collapse the bar into stacked rows */
@media (max-width: 767.98px) {
  .search-bar {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
  }

  .sector-select {
    order: 1;
  }

  .sector-btn {
    height: 44px;
    border-radius: var(--radius-lg) 0 0 0;
  }

  .filters-btn {
    order: 2;
    margin-left: auto;
    border-left: 0;
    border-radius: 0 var(--radius-lg) 0 0;
  }

  .loc-search {
    order: 3;
    flex-basis: 100%;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .loc-search-icon {
    display: none;
  }

  .loc-dropdown {
    width: calc(100vw - 32px);
  }

  .search-submit {
    display: none; /* mobile uses the sheet FAB + list filtering is live */
  }
}

/* =====================================================================
   Mobile filter sheet
   ===================================================================== */

.mfilter {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.mfilter.open {
  display: block;
}

.mfilter-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.mfilter-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 36px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(16, 24, 40, 0.25);
  overflow: hidden;
  animation: mfilter-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes mfilter-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.mfilter-header {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.mfilter-reset {
  justify-self: start;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.mfilter-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-strong);
}

.mfilter-cancel {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

/* Sliding viewport (main ↔ location) */
.mfilter-viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.mfilter-page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 14px 14px 90px;
  background: #fff;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.3s;
}

.mfilter-page.current {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

/* Previous page slides part-way left (iOS-style) */
.mfilter-page.left {
  transform: translateX(-30%);
  visibility: visible;
  transition-delay: 0s;
  pointer-events: none;
}

/* Pages further back than the previous one sit fully off-screen left. */
.mfilter-page.far {
  transform: translateX(-100%);
  visibility: hidden;
}

/* Card wrapping the Type / Build Type rows */
.mfilter-card.mfilter-listrows .mfilter-row:last-child {
  border-bottom: 0;
}

.mfilter-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.mfilter-segmented {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  flex-wrap: wrap;
}

.mfilter-segmented button {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.mfilter-segmented button.on {
  border-color: #e11d48;
  background: #fff1f2;
  color: #be123c;
}

.mfilter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.mfilter-row:last-child {
  border-bottom: 0;
}

.mfilter-row.disabled {
  color: var(--muted);
  cursor: default;
}

.mfilter-row-value {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}

.mfilter-row .chev {
  margin-left: auto;
}

.mfilter-row-value ~ .chev {
  margin-left: 0;
}

/* Lone shell row (Property Type) separated from the cards above. */
.mfilter-row.spaced {
  margin-top: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

/* ---- Range filter cards: price / size / beds ---- */
.mfilter-card.mrange {
  margin-top: 12px;
  padding: 13px 16px 15px;
  overflow: visible;
}

.mrange-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mrange-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.mrange-any {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.mrange-any i {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1.5px solid #c8ccd2;
  border-radius: 50%;
  background: #fff;
}

.mrange-any.on i {
  border-color: #e11d48;
}

.mrange-any.on i::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #e11d48;
}

/* Two overlapping native range inputs make a dependency-free
   double-handle slider: the input ignores pointer events, the thumbs
   take them, so either handle stays draggable. */
.mrange-track {
  position: relative;
  height: 30px;
  margin: 12px 2px 0;
}

.mrange-rail,
.mrange-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  pointer-events: none;
}

.mrange-rail {
  left: 0;
  right: 0;
  background: #e5e7eb;
}

.mrange-fill {
  background: #d1d5db;
}

.mrange.active .mrange-fill {
  background: #111827;
}

.mrange input[type='range'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  outline: none;
}

.mrange input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  background: transparent;
}

.mrange input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: #f4b8b8;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
  cursor: pointer;
  pointer-events: auto;
}

.mrange input[type='range']::-moz-range-track {
  height: 4px;
  border: 0;
  background: transparent;
}

.mrange input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #f4b8b8;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
  cursor: pointer;
  pointer-events: auto;
}

.mrange.active input[type='range']::-webkit-slider-thumb {
  background: #e11d48;
}

.mrange.active input[type='range']::-moz-range-thumb {
  background: #e11d48;
}

.mrange-values {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
}

.mrange-values b {
  font-weight: 500;
}

.mfilter-subheader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 6px;
}

.mfilter-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.mfilter-subtitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-strong);
}

.mfilter-uncheck {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}

.mfilter-searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 14px 4px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  color: var(--muted);
}

.mfilter-searchbox input {
  flex: 1;
  min-width: 0;
  height: 42px;
  border: 0;
  background: none;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
}

.mfilter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 4px;
}

/* Location levels inside the sheet (slide like the desktop browser).
   Both levels share the same grid cell so the hidden level overlays (rather
   than stacking in flow and pushing the active level down the page), while
   the track still sizes to the tallest level so nothing gets clipped. */
.mfilter-browser {
  position: relative;
  display: grid;
  /* A single minmax(0,1fr) track is exactly the container width and lets the
     panels shrink, so the track can never grow wider than the viewport. */
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  min-height: 320px;
}

.mfilter-level {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 14px 20px;
  background: #fff;
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.3s;
}

/* All levels stay in the DOM and share the grid cell, so each transition
   slides in both directions. */
.mfilter-level.current {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.mfilter-level.prev {
  transform: translateX(-28%);
  visibility: visible;
  transition-delay: 0s;
  pointer-events: none;
}

.mfilter-level.far {
  transform: translateX(-100%);
  visibility: hidden;
}

.mfilter-level.future {
  transform: translateX(100%);
  visibility: hidden;
}

.mfilter-group {
  margin-bottom: 8px;
}

.mfilter-item {
  border-bottom: 1px solid #f1f2f4;
  border-radius: 0;
  padding: 12px 6px;
}

.mfilter-item .loc-name {
  font-size: 14px;
}

.mfilter-fab {
  position: absolute;
  right: 18px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

.mfilter-fab:hover {
  background: #1d4ed8;
}

/* The sheet only makes sense on touch-size screens */
@media (min-width: 768px) {
  .mfilter {
    display: none !important;
  }
}

/* Desktop dropdown + slide-down bar only on wide screens; on phones the
   field/Filters button open the sheet instead */
@media (max-width: 599.98px) {
  .loc-dropdown {
    display: none;
  }

  .dfilters {
    display: none;
  }
}

@media (min-width: 600px) and (max-width: 767.98px) {
  .mfilter {
    display: none !important;
  }
}