/* ─── MLS Listings Widget — Nerem & Associates ──────────────────────────────── */

/* Design tokens taken from the live Duda site
   (nerem-and-associates.multiscreensite.com) so the widget matches it. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap");

:root {
  --color-primary: #002e50; /* navy — headings, price */
  --color-primary-mid: #00508b; /* mid blue — links, hovers */
  --color-accent: #52b3e1; /* light blue — buttons, accents */
  --color-accent-dk: #3a9bc9;
  --color-bg: #efefef;
  --color-surface: #ffffff;
  --color-surface-alt: #faf9f9;
  --color-border: #e2e2e2;
  --color-text: #1e1e1e;
  --color-muted: #6a6a6a;
  --color-tag-active: #16a34a;
  --radius: 8px;
  --radius-pill: 50px;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.14);
  --transition: 0.18s ease;
  --font: "Instrument Sans", "Source Sans Pro", system-ui, -apple-system, sans-serif;
  --eyebrow-spacing: 1.6px;
  --control-h: 48px; /* search box and Search button share this */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.mls-widget {
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  padding: 0 0 48px;
}

/* ─── Header ─────────────────────────────────────────────────────────────────── */

.mls-header {
  background: var(--color-primary);
  color: #fff;
  padding: 28px 32px 24px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.mls-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.mls-header p {
  font-size: 0.92rem;
  opacity: 0.75;
}

/* ─── Filters ────────────────────────────────────────────────────────────────── */

.btn-search {
  height: 38px;
  padding: 0 20px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}
.btn-search:hover {
  background: var(--color-accent-dk);
}

.btn-reset {
  height: 38px;
  padding: 0 14px;
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-reset:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ─── Results bar ────────────────────────────────────────────────────────────── */

.mls-results-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
  font-size: 0.88rem;
  color: var(--color-muted);
  flex-wrap: wrap;
  gap: 8px;
}
.mls-results-bar .sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mls-results-bar select {
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 28px 0 10px;
  font-size: 0.85rem;
  color: var(--color-text);
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* ─── Grid ───────────────────────────────────────────────────────────────────── */

.mls-grid {
  display: grid;
  /* Never more than 4 columns: the 12-per-page size divides evenly by 4, 3, 2
     and 1, so the last row always fills. At 5 columns it was 3 cards short.
     The max() floor makes each track at least a quarter of the row. */
  grid-template-columns: repeat(auto-fill, minmax(max(300px, (100% - 72px) / 4), 1fr));
  gap: 24px;
  padding: 0 32px 24px;
}

/* ─── Card ───────────────────────────────────────────────────────────────────── */

.listing-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow var(--transition),
    transform var(--transition);
  display: flex;
  flex-direction: column;
}
.listing-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #dde3ea;
  overflow: hidden;
}
.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.listing-card:hover .card-photo img {
  transform: scale(1.04);
}

.card-photo .no-photo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #e8ecf0 0%, #d4dbe3 100%);
  color: var(--color-muted);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.card-photo .no-photo::before {
  content: "";
  width: 40px;
  height: 32px;
  background: var(--color-muted);
  opacity: 0.3;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.card-status {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-active {
  background: var(--color-tag-active);
  color: #fff;
}
.status-pending {
  background: #f59e0b;
  color: #fff;
}
.status-closed {
  background: var(--color-muted);
  color: #fff;
}
.status-default {
  background: var(--color-primary);
  color: #fff;
}

.card-photo-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
}

.card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-price {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--color-primary);
}

.card-address {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.4;
}
.card-address .city-line {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.card-specs {
  display: flex;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--color-muted);
  margin-top: 4px;
  flex-wrap: wrap;
}
.card-specs span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-specs .spec-value {
  font-weight: 600;
  color: var(--color-text);
}

.card-subtype {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

/* ─── Loading / Error / Empty states ────────────────────────────────────────── */

.mls-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  color: var(--color-muted);
}
.mls-state .spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.mls-state p {
  font-size: 1rem;
}
.mls-state .retry-btn {
  margin-top: 16px;
  padding: 8px 20px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.88rem;
}

/* ─── Pagination ─────────────────────────────────────────────────────────────── */

.mls-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px 32px 0;
  flex-wrap: wrap;
}
.page-btn {
  height: 36px;
  min-width: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--color-text);
}
.page-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.page-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Modal ──────────────────────────────────────────────────────────────────── */

.mls-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
}
.mls-modal-backdrop.open {
  display: flex;
}

.mls-modal {
  background: var(--color-surface);
  border-radius: 12px;
  max-width: 780px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modal-in 0.22s ease;
  position: relative;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.modal-close:hover {
  background: rgba(0, 0, 0, 0.75);
}

.modal-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #111;
  overflow: hidden;
}
.modal-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal-gallery .no-photo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1a2a3a;
  color: #fff;
  opacity: 0.5;
  font-size: 0.85rem;
}
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-nav:hover {
  background: rgba(0, 0, 0, 0.8);
}
.gallery-prev {
  left: 12px;
}
.gallery-next {
  right: 12px;
}
.gallery-counter {
  position: absolute;
  bottom: 10px;
  right: 14px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 20px;
}

.modal-body {
  padding: 24px;
}
.modal-price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
}
.modal-address {
  font-size: 1.05rem;
  color: var(--color-text);
  margin-top: 4px;
}
.modal-specs {
  display: flex;
  gap: 20px;
  margin: 16px 0;
  flex-wrap: wrap;
}
.modal-spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 60px;
}
.modal-spec .spec-val {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
}
.modal-spec .spec-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.modal-divider {
  height: 1px;
  background: var(--color-border);
  margin: 16px 0;
}
.modal-remarks {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-text);
  max-height: 160px;
  overflow-y: auto;
}
.modal-agent {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 0.88rem;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.modal-agent-info strong {
  display: block;
  font-size: 0.95rem;
  color: var(--color-primary);
}
.modal-agent-info span {
  color: var(--color-muted);
}
.modal-contact-btn {
  margin-left: auto;
  padding: 8px 18px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.modal-contact-btn:hover {
  background: var(--color-accent-dk);
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .mls-header {
    padding: 20px 16px;
  }
    .mls-results-bar {
    padding: 10px 16px;
  }
  .mls-grid {
    padding: 0 16px 24px;
    gap: 16px;
  }
  .mls-pagination {
    padding: 16px 16px 0;
  }
  }

/* ─── MLS display compliance (required by feed) ─────────────────────────────── */
.card-compliance {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--color-muted);
}
.card-subtype + .card-compliance {
  margin-top: 0;
  padding-top: 6px;
}

.modal-compliance {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.modal-compliance:empty { display: none; }

.mls-disclaimer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--color-muted);
  text-align: center;
}
.mls-disclaimer:empty { display: none; }


/* ─── Search + filter bar (values modelled on neremre.com) ───────────────────── */

.mls-search {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}

.search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.search-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--color-text);
  height: var(--control-h);
  padding: 0 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-input::placeholder { color: var(--color-muted); }
.search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(82, 179, 225, 0.18);
}

.mls-search .btn-search {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-pill);
  height: var(--control-h);
  padding: 0 40px;
  cursor: pointer;
  transition: background var(--transition);
}
.mls-search .btn-search:hover { background: var(--color-accent-dk); }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Dropdown filters */
.fdrop { position: relative; }

.fdrop-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 0.85rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.fdrop-btn:hover { border-color: var(--color-accent); }
.fdrop.is-set .fdrop-btn {
  border-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 500;
  background: rgba(82, 179, 225, 0.08);
}
.fdrop-caret { color: var(--color-muted); font-size: 0.7rem; }

.fdrop-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 14px;
}

.drop-select {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font);
  font-size: 0.85rem;
  color: var(--color-text);
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}
.drop-select:focus { outline: none; border-color: var(--color-accent); }

.drop-opt:hover { color: var(--color-primary-mid); }
.drop-opt input { accent-color: var(--color-accent); cursor: pointer; }
.drop-count { margin-left: auto; font-style: normal; font-size: 0.72rem; color: var(--color-muted); }
.drop-empty { font-size: 0.82rem; color: var(--color-muted); }

.fdrop-done {
  display: block;
  width: 100%;
  margin-top: 12px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 0;
  cursor: pointer;
  transition: background var(--transition);
}
.fdrop-done:hover { background: var(--color-primary-mid); }

.btn-allfilters,
.filter-row .btn-reset {
  font-family: var(--font);
  font-size: 0.85rem;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.btn-allfilters:hover,
.filter-row .btn-reset:hover { border-color: var(--color-accent); }
.btn-allfilters.is-open { background: rgba(82, 179, 225, 0.12); border-color: var(--color-accent); }
.filter-row .btn-reset { margin-left: auto; color: var(--color-muted); }

/* All Filters panel */
.filter-summary {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--color-muted);
}
.filter-summary:empty { display: none; }

@media (max-width: 640px) {
  .search-row { flex-direction: column; }
  .mls-search .btn-search { width: 100%; padding: 0; }
  .filter-row .btn-reset { margin-left: 0; }
  .fdrop { flex: 1 1 calc(50% - 4px); }
  .fdrop-btn { width: 100%; justify-content: space-between; }
  .fdrop-panel { left: 0; right: 0; min-width: 0; }
}


/* ─── Icons ─────────────────────────────────────────────────────────────────── */

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
  pointer-events: none;
}

/* ─── Branded form controls ─────────────────────────────────────────────────── */
/* Every control is drawn from the brand palette — no browser-default widgets. */

.mls-widget select,
.drop-select,
.mls-results-bar select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font);
  color: var(--color-primary);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2352b3e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px 15px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding-right: 34px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.mls-widget select:hover,
.drop-select:hover { border-color: var(--color-accent); }

.mls-widget select:focus-visible,
.drop-select:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(82, 179, 225, 0.22);
}
.mls-widget select option { color: var(--color-text); }

/* Checkboxes and radios, drawn rather than inherited */
.drop-opt input[type="checkbox"],
.drop-opt input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  display: inline-grid;
  place-content: center;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.drop-opt input[type="checkbox"] { border-radius: 5px; }
.drop-opt input[type="radio"]    { border-radius: 50%; }

.drop-opt:hover input[type="checkbox"],
.drop-opt:hover input[type="radio"] { border-color: var(--color-accent); }

.drop-opt input[type="checkbox"]:checked,
.drop-opt input[type="radio"]:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.drop-opt input[type="checkbox"]::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #fff;
  transform: scale(0);
  transition: transform 0.14s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.4 3.4L13 5.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.4 3.4L13 5.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.drop-opt input[type="checkbox"]:checked::after { transform: scale(1); }

.drop-opt input[type="radio"]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.14s ease;
}
.drop-opt input[type="radio"]:checked::after { transform: scale(1); }

.drop-opt input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(82, 179, 225, 0.25);
}

/* Search button carries its icon inline */
.mls-search .btn-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.mls-search .btn-search .icon { stroke-width: 1.8; font-size: 1.05rem; }

.btn-allfilters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-allfilters .icon { color: var(--color-accent); font-size: 1rem; }

.fdrop-caret {
  color: var(--color-muted);
  font-size: 0.95rem;
  transition: transform var(--transition), color var(--transition);
}
.fdrop-btn[aria-expanded="true"] .fdrop-caret {
  transform: rotate(180deg);
  color: var(--color-accent);
}
.fdrop.is-set .fdrop-caret { color: var(--color-accent); }

.card-photo-count .icon { font-size: 0.95rem; }
.mls-state .icon { color: var(--color-accent); font-size: 1.1rem; }
.page-btn .icon,
.gallery-nav .icon { font-size: 1.05rem; }

/* Brand the scrollbars in the scrolling lists */
.drop-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
}
.drop-scroll::-webkit-scrollbar { width: 8px; }
.drop-scroll::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 8px;
  border: 2px solid var(--color-surface);
}

/* ─── All Filters panel ─────────────────────────────────────────────────────── */
/* Two bands: aligned min/max ranges, then a row of dropdown pills matching the
   header. Keeps every control the same height instead of mixing short rows with
   tall scrolling lists. */

.all-filters[hidden] { display: none; }

.all-filters {
  display: block;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.af-ranges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px 28px;
}

.af-row {
  display: flex;
  flex-direction: column;   /* title sits above its slider */
  align-items: stretch;
  gap: 9px;
}

.af-label {
  flex: none;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-accent);
}

.af-choicebar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

/* Option rows are a fixed height so a scrolling list always cuts between items
   rather than slicing one in half. */
.drop-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 2px;
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
}
.drop-scroll {
  max-height: 256px; /* exactly 8 rows */
  overflow-y: auto;
  margin: -2px 0;
  /* On macOS the scrollbar is an overlay and takes no layout width, so it paints
     straight over the counts at the right edge. Inset the rows instead of the
     container, so the scrollbar rides in empty space and nothing is clipped. */
  scrollbar-gutter: stable;
}
.drop-scroll .drop-opt { padding-right: 14px; }
.fdrop-panel { max-width: min(340px, 86vw); }

@media (max-width: 640px) {
  .af-ranges { grid-template-columns: 1fr; }
  .af-choicebar .fdrop { flex: 1 1 calc(50% - 4px); }
}

/* ─── Dual-handle range slider ──────────────────────────────────────────────── */
/* Two native range inputs share one track. The native element stays underneath
   for keyboard and screen-reader support; every painted part is ours. */

.mslider {
  flex: 1 1 auto;
  min-width: 0;
}

.mslider-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mslider-sep {
  flex: 0 0 auto;
  color: var(--color-muted);
}

/* The min and max are editable, so an exact figure can be typed instead of dragged */
.mslider-val {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-primary);
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.mslider-val::placeholder {
  color: var(--color-muted);
  font-weight: 400;
}
.mslider-val:hover { border-color: var(--color-accent); }
.mslider-val:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(82, 179, 225, 0.2);
}

.mslider-track {
  position: relative;
  height: 22px;
}

.mslider-rail,
.mslider-fill {
  position: absolute;
  top: 50%;
  height: 5px;
  border-radius: 999px;
  transform: translateY(-50%);
  pointer-events: none;
}
.mslider-rail { left: 0; right: 0; background: var(--color-border); }
.mslider-fill { background: var(--color-accent); }

.mslider-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none; /* only the thumbs are grabbable */
}
.mslider-input:focus { outline: none; }

.mslider-input::-webkit-slider-runnable-track {
  height: 22px;
  background: transparent;
  border: none;
}
.mslider-input::-moz-range-track {
  height: 22px;
  background: transparent;
  border: none;
}

.mslider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2.5px solid var(--color-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mslider-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2.5px solid var(--color-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mslider-input::-webkit-slider-thumb:hover { transform: scale(1.1); }
.mslider-input::-moz-range-thumb:hover     { transform: scale(1.1); }
.mslider-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.14); }
.mslider-input::-moz-range-thumb:active     { cursor: grabbing; transform: scale(1.14); }

.mslider-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(82, 179, 225, 0.32);
}
.mslider-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(82, 179, 225, 0.32);
}

/* Sliders need breathing room inside the header dropdown panels */
.fdrop-panel .mslider { min-width: 252px; }
.af-row .mslider { padding-top: 2px; }

/* ─── Infinite scroll sentinel + loader ─────────────────────────────────────── */

.mls-sentinel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 0 4px;
}

.mls-spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: mls-spin 0.7s linear infinite;
}
.mls-spinner[hidden] { display: none; }

@keyframes mls-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mls-spinner { animation-duration: 2.4s; }
}

.mls-sentinel-note {
  font-size: 0.76rem;
  color: var(--color-muted);
}
.mls-sentinel-note:empty { display: none; }

/* The full-grid loader uses the same mark */
.mls-state .spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 12px;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: mls-spin 0.7s linear infinite;
}

/* ─── Load More + pager fallback ────────────────────────────────────────────── */

.btn-loadmore {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 10px 26px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.btn-loadmore:hover {
  border-color: var(--color-accent);
  background: rgba(82, 179, 225, 0.08);
}
.btn-loadmore[hidden] { display: none; }

.page-gap {
  padding: 0 4px;
  color: var(--color-muted);
}
.mls-pagination:empty { display: none; }

/* ─── Modal contact ─────────────────────────────────────────────────────────── */

.modal-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.modal-contact-who {
  font-size: 0.74rem;
  color: var(--color-muted);
}
.modal-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modal-contact-btn,
.modal-contact-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}

.modal-contact-btn {
  color: #fff;
  background: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}
.modal-contact-btn:hover { background: var(--color-accent-dk); border-color: var(--color-accent-dk); }

.modal-contact-tel {
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
}
.modal-contact-tel:hover { border-color: var(--color-accent); background: rgba(82, 179, 225, 0.08); }
.modal-contact-tel .icon { color: var(--color-accent); font-size: 1rem; }

@media (max-width: 560px) {
  .modal-contact { align-items: stretch; }
  .modal-contact-actions { flex-direction: column; }
  .modal-contact-btn,
  .modal-contact-tel { width: 100%; }
}

/* ─── Listing modal: two columns on desktop ─────────────────────────────────── */
/* Gallery fills the left, all the detail sits on the right and scrolls on its own.
   Below 860px it falls back to the stacked layout. */

.modal-section-title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-accent);
}

.modal-remarks p { margin: 0 0 0.85em; }
.modal-remarks p:last-child { margin-bottom: 0; }

@media (min-width: 861px) {
  .mls-modal {
    display: grid;
    /* Image-led: the gallery takes roughly two thirds. The detail column keeps a
       340px floor so it never collapses into an unreadable strip. */
    grid-template-columns: minmax(0, 1.9fr) minmax(340px, 1fr);
    /* column 1 is .modal-media (gallery + thumb strip) */
    align-items: stretch;
    max-width: 1320px;

    /* Height is derived from the photos rather than the viewport. Measured across
       30 listing photos: none are portrait and the median is 3:2, so a 3:2 frame
       hugs most of them with no dead space. The gallery is ~65.5% of the modal
       width, so its 3:2 height is width * 0.655 / 1.5 = width * 0.437. */
    --thumbs-h: 84px;
    --modal-h: min(92vh, max(520px, calc(min(1320px, 100vw - 32px) * 0.437 + var(--thumbs-h))));
    max-height: var(--modal-h);
  }

  .modal-gallery {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }

  .modal-body {
    overflow-y: auto;
    max-height: var(--modal-h);
    padding: 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
  }
  .modal-body::-webkit-scrollbar { width: 8px; }
  .modal-body::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 8px;
    border: 2px solid var(--color-surface);
  }

  /* the column scrolls as a whole, so the description needs no cap of its own */
  .modal-remarks {
    max-height: none;
    overflow: visible;
  }

  .modal-close {
    /* sits over the scrolling detail column, so it must be opaque rather than
       translucent or text slides visibly underneath it */
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  }
  .modal-close:hover { background: var(--color-bg); }
}

@media (max-width: 860px) {
  /* Stacked, but give the description far more room than the old 160px */
  .modal-remarks {
    max-height: 340px;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
  }
  .modal-remarks::-webkit-scrollbar { width: 8px; }
  .modal-remarks::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 8px;
    border: 2px solid var(--color-surface);
  }
}

/* ─── Modal: open houses + property details ─────────────────────────────────── */

.modal-details-title { margin-top: 22px; }
.modal-details-title[hidden] { display: none; }

.modal-details {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 26px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.83rem;
}
.detail-row dt {
  flex: 0 0 auto;
  color: var(--color-muted);
}
.detail-row dd {
  margin: 0;
  text-align: right;
  color: var(--color-text);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ─── Contact box (restyled) ────────────────────────────────────────────────── */
/* One card, read top to bottom: who listed it, a rule, then how to reach us. */

.modal-agent {
  display: block;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 20px;
}

.modal-agent-info {
  display: block;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.agent-eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-accent);
}
.modal-agent-info strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--color-primary);
}
.modal-agent-info span:not(.agent-eyebrow) {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.modal-contact {
  display: block;
  padding-top: 14px;
}
.modal-contact-who {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text);
}
.modal-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.modal-contact-btn,
.modal-contact-tel {
  width: 100%;
  height: 44px;
  padding: 0 18px;
}

/* ─── Gallery: fit, not crop ────────────────────────────────────────────────── */
/* Many MLS photos are portrait or oddly cropped; filling the frame blew them up
   and lost the edges. Contain shows the whole photo at its real resolution. */
.modal-gallery { background: #0e1620; }
.modal-gallery img { object-fit: contain; }

/* ─── Results bar: view toggle + custom sort ────────────────────────────────── */

.results-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.view-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.view-btn:hover { color: var(--color-primary); }
.view-btn.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.view-btn .icon { font-size: 0.95rem; }
.view-btn.is-active .icon { color: var(--color-accent); }

.sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.sort-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-muted);
}
#sortDrop .fdrop-panel { left: auto; right: 0; min-width: 210px; }

/* ─── Map view ──────────────────────────────────────────────────────────────── */

.mls-grid[hidden],
.mls-map[hidden] { display: none; }

.mls-map {
  position: relative;
  margin: 0 32px 24px;
}
.map-canvas {
  height: min(70vh, 640px);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  z-index: 0;
}
.map-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--color-muted);
  pointer-events: none;
}
.map-status:empty { display: none; }

/* Price pins */
.map-pin-wrap { background: none; border: none; }
.map-pin {
  display: inline-block;
  padding: 4px 9px;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: var(--color-primary);
  border: 1.5px solid #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
  transform: translate(-50%, -50%);
}
.map-pin-wrap:hover .map-pin { background: var(--color-accent); }

.map-popup { font-family: var(--font); }
.map-popup-price {
  margin: 0 0 3px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-primary);
}
.map-popup-addr {
  margin: 0 0 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text);
}
.map-popup-specs {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--color-muted);
}
.map-popup-btn {
  width: 100%;
  padding: 8px 0;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.map-popup-btn:hover { background: var(--color-accent-dk); }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-popup-content-wrapper { border-radius: var(--radius); }

/* ─── Modal location map ────────────────────────────────────────────────────── */

.modal-map { margin-top: 22px; }
.modal-map[hidden] { display: none; }
.modal-map-canvas {
  height: 240px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  z-index: 0;
}

@media (max-width: 640px) {
  .mls-map { margin: 0 16px 20px; }
  .map-canvas { height: 60vh; }
  .results-tools { width: 100%; justify-content: space-between; }
}

/* Clustered pins */
.map-cluster-wrap { background: none; border: none; }
.map-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
}
.marker-cluster, .marker-cluster div { background: none !important; }

/* ─── Media column: main image + thumbnail strip ────────────────────────────── */

.modal-media {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #0e1620;
}
/* Desktop: the modal has a definite height, so the gallery takes whatever the
   thumb strip leaves. flex-basis MUST be 0, not auto — with auto the gallery
   sizes itself from the image and a portrait photo blew it out to ~1226px,
   shoving the thumbnail strip off the bottom. */
@media (min-width: 861px) {
  .modal-media .modal-gallery {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
  }
}

/* Mobile: the stacked column has NO definite height, so a 0 flex-basis had
   nothing to grow into and collapsed the gallery to 0px — the main image simply
   vanished. Size it by aspect ratio instead (3:2 matches most listing photos). */
@media (max-width: 860px) {
  .modal-media .modal-gallery {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

.modal-thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  background: #0b111a;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
}
.modal-thumbs[hidden] { display: none; }
.modal-thumbs::-webkit-scrollbar { height: 7px; }
.modal-thumbs::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 8px;
}

.thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #16212e;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition), border-color var(--transition);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { opacity: 1; }
.thumb.is-active {
  opacity: 1;
  border-color: var(--color-accent);
}
.thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ─── 3D tour link ──────────────────────────────────────────────────────────── */

.tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-pill);
  transition: background var(--transition);
}
.tour-btn[hidden] { display: none; }
.tour-btn:hover { background: rgba(82, 179, 225, 0.12); }
.tour-btn .icon { color: var(--color-accent); font-size: 1rem; }

/* ─── Rooms ─────────────────────────────────────────────────────────────────── */

.modal-rooms[hidden],
.modal-rooms-title[hidden] { display: none; }

.modal-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 26px;
}
.room-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.83rem;
}
.room-name { color: var(--color-text); font-weight: 500; }
.room-meta { display: inline-flex; gap: 10px; color: var(--color-muted); white-space: nowrap; }
.room-dims { font-variant-numeric: tabular-nums; }

/* ─── Centre the listing modal on the page ──────────────────────────────────── */

.mls-modal-backdrop { align-items: center; }
/* margin:auto keeps a modal taller than the viewport from clipping at the top */
.mls-modal { margin: auto; }

@media (max-width: 860px) {
  .thumb { width: 72px; height: 52px; }
}

/* ─── Gallery loader ────────────────────────────────────────────────────────── */

.gallery-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: mls-spin 0.7s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.gallery-loader[hidden] { display: none; }

/* ─── Open house banner ─────────────────────────────────────────────────────── */
/* Sits above the price so it is the first thing read in the detail column. */

.modal-openhouse {
  display: flex;
  flex-direction: column;   /* date and time sit under the Open House flag */
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--color-primary-mid);
  color: #fff;
}
.modal-openhouse[hidden] { display: none; }

.oh-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}
.oh-flag .icon { color: #fff; font-size: 0.9rem; }

.oh-times {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.oh-when {
  margin: 0;
  display: flex;
  flex-direction: column;   /* day on one line, time beneath it */
  gap: 2px;
  line-height: 1.35;
}
.oh-when strong {
  font-size: 0.92rem;
  font-weight: 600;
}
.oh-when span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}



/* ─── Typography ────────────────────────────────────────────────────────────── */
/* Brand spec: Instrument Sans throughout. H1/H3/H4 bold; H2 all caps, italic. */

/* The modal backdrop is a sibling of .mls-widget, not a child, so both roots
   have to be named or the modal's headings are missed entirely. */
:is(.mls-widget, .mls-modal-backdrop) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font);
}

:is(.mls-widget, .mls-modal-backdrop) :is(h1, h3, h4) {
  font-weight: 700;
  font-style: normal;
}

:is(.mls-widget, .mls-modal-backdrop) h2 {
  text-transform: uppercase;
  font-style: italic;
}

/* the section labels are H2s, so they inherit the caps + italic above */
.modal-section-title {
  font-weight: 600;
}

/* ─── Font inheritance ──────────────────────────────────────────────────────── */
/* The modal backdrop is a SIBLING of .mls-widget, not a child, so it never
   inherited the widget's font and the whole popup fell back to the browser
   default serif. Both roots have to set it. */

.mls-widget,
.mls-modal-backdrop {
  font-family: var(--font);
  color: var(--color-text);
}

/* Form controls don't inherit font-family from an ancestor by default. */
:is(.mls-widget, .mls-modal-backdrop) :is(button, input, select, textarea, optgroup) {
  font-family: inherit;
}

/* Leaflet ships its own font stack for map chrome (Helvetica Neue, and Lucida
   Console for the zoom glyphs). Bring the map controls onto the brand font. */
/* Leaflet's stylesheet is injected at runtime, so it lands AFTER ours in the
   cascade and wins any tie on specificity. Scoping by a root raises ours above
   it without resorting to !important. */
:is(.mls-widget, .mls-modal-backdrop) .leaflet-container,
:is(.mls-widget, .mls-modal-backdrop) .leaflet-container *,
:is(.mls-widget, .mls-modal-backdrop) .leaflet-popup-content {
  font-family: var(--font);
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font-weight: 600;
}

/* These use display:flex, which overrides the [hidden] attribute unless said
   explicitly — that is why Load More and the pager stayed visible in map view. */
.mls-sentinel[hidden],
.mls-pagination[hidden] { display: none; }

/* ─── Location autocomplete ─────────────────────────────────────────────────── */

.search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.search-field .search-input { width: 100%; }

.q-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
}
.q-suggest[hidden] { display: none; }
.q-suggest::-webkit-scrollbar { width: 8px; }
.q-suggest::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 8px;
  border: 2px solid var(--color-surface);
}

.qs-group + .qs-group {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}
.qs-label {
  margin: 0;
  padding: 6px 10px 4px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-accent);
}

.qs-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}
.qs-item:hover,
.qs-item.is-active {
  background: rgba(82, 179, 225, 0.14);
}
.qs-value {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-primary);
}
.qs-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .q-suggest { max-height: 260px; }
}

/* ─── Our own listings ──────────────────────────────────────────────────────── */

.btn-ours {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-ours .icon { color: var(--color-accent); font-size: 0.95rem; }
.btn-ours em {
  font-style: normal;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-muted);
}
.btn-ours:hover { border-color: var(--color-accent); }
.btn-ours.is-on {
  background: var(--color-primary-mid);
  border-color: var(--color-primary-mid);
  color: #fff;
}
.btn-ours.is-on .icon { color: #fff; }
.btn-ours.is-on em { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Cards: a blue frame and a badge so our listings read first */
.listing-card.is-featured {
  border: 2px solid var(--color-accent);
  box-shadow: 0 2px 14px rgba(82, 179, 225, 0.28);
}
.listing-card.is-featured:hover {
  box-shadow: 0 8px 26px rgba(82, 179, 225, 0.4);
}

.card-ours {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-mid);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.card-ours .icon { color: #fff; font-size: 0.82rem; }

.courtesy-ours {
  color: var(--color-primary-mid);
  font-weight: 600;
}

/* Map pins for our listings */
.map-pin.is-ours {
  background: var(--color-accent);
  border-color: #fff;
  box-shadow: 0 2px 8px rgba(82, 179, 225, 0.55);
}
.map-pin-wrap:hover .map-pin.is-ours { background: var(--color-primary-mid); }