/* =============================================================
   RMR PROPERTY VIEW
   A browsable grid of every unit, grouped by neighbourhood,
   plus the switch that moves between it and the map.

   Tokens come from map.css. Nothing here redefines them.

   Stacking, for reference (map.css owns these numbers):
     header            100
     panel-overlay     300
     property view     340   <- this file
     view switch       341   <- this file
     detail-panel      350
   ============================================================= */

/* ── View switch ───────────────────────────────────────────── */

#rmr-view-switch {
    position: fixed;

    top: 15px;
    left: 30px;
    right: 30px;

    z-index: 1000;

    display: flex;
    align-items: center;
    gap: 2px;

    width: auto;

    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;

    transform: none;
}


/* URLs containing ?touchscreen=true */
html.is-touchscreen #rmr-view-switch {
    top: 10%;
    left: 75px;
}

/* Keep Map + Properties together */
#rmr-view-switch button:first-of-type {
    border-radius: 9999px 0 0 9999px;
}

#rmr-view-switch button:nth-of-type(2) {
    margin-left: -1px;
    border-radius: 0 9999px 9999px 0;
}


/* Contact Us goes all the way to the right */
#rmr-view-switch #btn-contact {
    margin-left: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 18px;

    border: 1px solid var(--accent, #c9a962);
    border-radius: 9999px;

    background: var(--accent, #c9a962);
    color: var(--bg, #0a0c0f);

    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

#rmr-view-switch button {
    position: relative;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 9px 16px;

    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: var(--surface, #13161c);

    color: var(--text-muted, #9ca3af);

    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;

    cursor: pointer;
}

/* Map — left half */
#rmr-view-switch button:first-of-type {
    border-radius: 9999px 0 0 9999px;
}

/* Properties — right half */
#rmr-view-switch button:nth-of-type(2) {
    margin-left: -3px;
    border-radius: 0 9999px 9999px 0;
}

#rmr-view-switch button:hover { color: var(--text, #f4f4f5); }

#rmr-view-switch button[aria-selected="true"] {
  background: var(--accent, #c9a962);
  color: var(--bg, #0a0c0f);
}

#rmr-view-switch svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* In the property view the switch is moved into the sticky bar, so
   it sits in normal flow and the filters stack beneath it rather
   than scrolling underneath. */

/* ── The view ──────────────────────────────────────────────── */
body.rmr-view-properties header {
  
    z-index: 950;
    background: var(--bg, #0a0c0f);
}

body.rmr-view-properties::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 60px;
    background: var(--bg, #0a0c0f);
    z-index: 900;
    pointer-events: none;
}

#rmr-properties {
    position: fixed;
    inset: 0;
    z-index: 340;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg, #0a0c0f);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

body.rmr-view-properties #rmr-properties {
  opacity: 1;
  visibility: visible;
}

/* The detail panel and its scrim have to clear the view. */
body.rmr-view-properties #panel-overlay { z-index: 345; }

/* Map furniture would otherwise sit on top of the view. */
body.rmr-view-properties #season-toggle,
body.rmr-view-properties #layer-toggle,
body.rmr-view-properties #quick-access-btn,
body.rmr-view-properties #units-sidebar,
body.rmr-view-properties #rmr-layers-btn,
body.rmr-view-properties #rmr-layers-panel {
  opacity: 0;
  pointer-events: none;
}

/* ── Hero ──────────────────────────────────────────────────── */

.rmr-hero {
    position: relative;
    padding: 150px 40px 40px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.rmr-hero h1 {
  max-width: 16ch;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.rmr-hero p {
  max-width: 52ch;
  margin-top: 14px;
  color: var(--text-muted, #9ca3af);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ── Filter bar ────────────────────────────────────────────── */

.rmr-filters {
        position: sticky;
    top: 60px;
    z-index: 5;
    padding: 14px 40px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(10, 12, 15, 0.98);
    backdrop-filter: blur(14px);
}

/* =============================================================
   FILTER HIERARCHY
============================================================= */

/* Primary filter container */
.rmr-filter-row-primary {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;

    padding: 6px;

    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.025);
}


/* Neighbourhood / Status groups */
.rmr-filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    padding: 7px 10px;

    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}


/* Remove old divider treatment */
.rmr-filter-group + .rmr-filter-group {
    padding-left: 10px;
    border-left: none;
}


/* Make group headings actually read as headings */
.rmr-filter-group .rmr-filter-label {
    margin-right: 6px;

    color: var(--text, #f4f4f5);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    opacity: 0.9;
}

/* Secondary property refinement */

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

    margin-top: 10px;
    padding: 0 2px;
}

.rmr-filter-row-secondary .rmr-search,
.rmr-filter-row-secondary .rmr-select {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.14);
}

.rmr-filter-row-secondary .rmr-search:hover,
.rmr-filter-row-secondary .rmr-select:hover {
    border-color: rgba(255, 255, 255, 0.28);
}
@media (max-width: 860px) {

    .rmr-filter-row-secondary {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        overflow: visible;
        padding-bottom: 0;
    }

    .rmr-filter-row-secondary .rmr-select,
    .rmr-filter-row-secondary .rmr-search,
    .rmr-filter-row-secondary .rmr-reset {
        flex: 0 0 auto;
    }

    .rmr-filter-spacer {
        display: block;
        flex: 1 1 100%;
        height: 0;
    }

    .rmr-result-count {
        flex: 1 1 100%;
        text-align: right;
        margin-top: 2px;
    }
}
.rmr-filter-row + .rmr-filter-row { margin-top: 10px; }

.rmr-filter-label {
  margin-right: 2px;
  color: var(--text-muted, #9ca3af);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rmr-pill {
  padding: 7px 15px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 9999px;
  background: var(--surface, #13161c);
  color: var(--text-muted, #9ca3af);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.rmr-pill:hover {
  border-color: var(--accent, #c9a962);
  color: var(--text, #f4f4f5);
}

.rmr-pill[aria-pressed="true"] {
  background: var(--accent, #c9a962);
  border-color: var(--accent, #c9a962);
  color: var(--bg, #0a0c0f);
}

.rmr-search {
  flex: 1 1 180px;
  min-width: 150px;
  max-width: 280px;
  padding: 8px 14px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 9999px;
  background: var(--surface, #13161c);
  color: var(--text, #f4f4f5);
  font-family: inherit;
  font-size: 0.78rem;
}

.rmr-search::placeholder { color: var(--text-muted, #9ca3af); }
.rmr-search:focus { outline: none; border-color: var(--accent, #c9a962); }

.rmr-select {
  padding: 8px 14px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 9999px;
  background: var(--surface, #13161c);
  color: var(--text-muted, #9ca3af);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.rmr-select:focus { outline: none; border-color: var(--accent, #c9a962); }

.rmr-filter-spacer { flex: 1 1 auto; }

.rmr-result-count {
  color: var(--text-muted, #9ca3af);
  font-size: 0.76rem;
  white-space: nowrap;
}

.rmr-reset {
  border: none;
  background: none;
  padding: 0 2px;
  color: var(--text-muted, #9ca3af);
  font-family: inherit;
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rmr-reset:hover { color: var(--accent, #c9a962); }

/* ── Sections ──────────────────────────────────────────────── */

.rmr-sections { padding: 8px 40px 80px; }

.rmr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 20px;
}

/* ── Tile ──────────────────────────────────────────────────── */

.rmr-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: var(--surface, #13161c);
  overflow: hidden;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.rmr-tile:hover {
  border-color: var(--accent, #c9a962);
  transform: translateY(-3px);
}

.rmr-tile-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-alt, #1a1e26);
  overflow: hidden;
}

.rmr-tile-media img,
.rmr-tile-media canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.rmr-tile:hover .rmr-tile-media img,
.rmr-tile:hover .rmr-tile-media canvas { transform: scale(1.04); }

/* Floor plans are dark line art on white, so they get a light bed
   and sit inside the frame rather than filling it. */
.rmr-tile-media.is-plan {
  background: #f2f1ed;
  padding: 6px;
}

.rmr-tile-media.is-plan img,
.rmr-tile-media.is-plan canvas {
  object-fit: contain;
}

.rmr-plan-pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #9a978c;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rmr-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(10, 12, 15, 0.78);
  backdrop-filter: blur(6px);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rmr-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot, var(--accent, #c9a962));
}

.rmr-tile-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  padding: 14px 15px 15px;
}

.rmr-tile-property {
  color: var(--text-muted, #9ca3af);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rmr-tile-name {
  font-size: 0.98rem;
  font-weight: 500;
}

.rmr-tile-specs {
  color: var(--text-muted, #9ca3af);
  font-size: 0.76rem;
}

.rmr-tile-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.rmr-tile-price {
  color: var(--accent, #c9a962);
  font-size: 0.94rem;
  font-weight: 600;
}

.rmr-tile-map {
  border: none;
  background: none;
  padding: 2px 0;
  color: var(--text-muted, #9ca3af);
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
}

.rmr-tile-map:hover { color: var(--accent, #c9a962); }

/* ── Empty ─────────────────────────────────────────────────── */

.rmr-empty {
  padding: 90px 0;
  text-align: center;
  color: var(--text-muted, #9ca3af);
}

.rmr-empty p { margin-bottom: 14px; font-size: 0.9rem; }

#rmr-view-switch button:focus-visible,
.rmr-pill:focus-visible,
.rmr-tile:focus-visible,
.rmr-tile-map:focus-visible,
.rmr-project-map:focus-visible,
.rmr-reset:focus-visible,
.rmr-search:focus-visible,
.rmr-select:focus-visible {
  outline: 2px solid var(--accent, #c9a962);
  outline-offset: 2px;
}

/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .rmr-hero { padding: 150px 20px 28px;}
  .rmr-filters { padding: 12px 20px; }
  .rmr-sections { padding: 4px 20px 60px; }
  .rmr-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .rmr-tile-body { padding: 12px; }
  .rmr-tile-foot { flex-direction: column; align-items: flex-start; gap: 2px; }
  #rmr-view-switch button { padding: 7px 12px; font-size: 0.76rem; }

  /* Horizontal scroll for the filter rows rather than wrapping
     into a bar that eats half the screen. */
  .rmr-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .rmr-filter-row::-webkit-scrollbar { display: none; }
  .rmr-filter-spacer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #rmr-properties,
  .rmr-tile,
  .rmr-tile-media img {
    transition-duration: 0.01ms;
  }
  .rmr-tile:hover { transform: none; }
}

/* =============================================================
   NEIGHBOURHOOD SECTION BREAK
   A title and a hairline rule, nothing more. The imagery lives
   one level down, on each building.
   ============================================================= */

.rmr-section { padding-top: 82px; }
.rmr-section:first-child { padding-top: 28px; }

.rmr-hood-break {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 38px;
}

/* A rule either side, so the name sits centred between them. */
.rmr-hood-break::before,
.rmr-hood-break::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border, rgba(255, 255, 255, 0.08));
}

.rmr-hood-break h2 {
  flex: 0 0 auto;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-align: center;
}

/* =============================================================
   PROJECT HERO  (building / offering)
   Name, price, count and the map link sit on the image.
   ============================================================= */

.rmr-project { padding-top: 42px; }
.rmr-project:first-of-type { padding-top: 0; }

.rmr-project-hero {
  position: relative;
  margin-bottom: 20px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-alt, #1a1e26);
  aspect-ratio: 24 / 7;
  min-height: 176px;
}

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

.rmr-project-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 12, 15, 0.92) 0%,
    rgba(10, 12, 15, 0.55) 42%,
    rgba(10, 12, 15, 0.1) 100%
  );
}

.rmr-project-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 26px 30px;
}

.rmr-project-overlay h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  font-weight: 500;
  line-height: 1.15;
}

.rmr-project-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.8rem;
  color: var(--text-muted, #9ca3af);
}

.rmr-project-price {
  color: var(--accent, #c9a962);
  font-weight: 600;
}

.rmr-project-count strong {
  color: var(--text, #f4f4f5);
  font-weight: 600;
}

.rmr-project-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  background: rgba(10, 12, 15, 0.45);
  backdrop-filter: blur(6px);
  color: var(--text, #f4f4f5);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.rmr-project-map:hover {
  background: var(--accent, #c9a962);
  border-color: var(--accent, #c9a962);
  color: var(--bg, #0a0c0f);
}

.rmr-project-map svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Description and downloads sit under the hero so the overlay
   stays legible. */
.rmr-project-intro {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 20px;
}

.rmr-project-intro p {
  flex: 1 1 auto;
  max-width: 82ch;
  color: var(--text-muted, #9ca3af);
  font-size: 0.82rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rmr-project-links {
  flex: 0 0 auto;
  display: flex;
  gap: 16px;
  padding-top: 1px;
}

.rmr-project-links a {
  color: var(--text-muted, #9ca3af);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.rmr-project-links a:hover { color: var(--accent, #c9a962); }

/* =============================================================
   EXPANDED UNIT DETAIL
   ============================================================= */

.rmr-tile[aria-expanded="true"] {
  border-color: var(--accent, #c9a962);
}

.rmr-detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 26px;
  padding: 24px;
  border: 1px solid var(--accent, #c9a962);
  border-radius: 12px;
  background: var(--surface, #13161c);
}

.rmr-detail-plan {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f1ed;
  aspect-ratio: 4 / 3;
  padding: 10px;
}

.rmr-detail-plan img,
.rmr-detail-plan canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.rmr-detail-body { min-width: 0; }

.rmr-detail-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 4px;
}

.rmr-detail-head h4 {
  font-size: 1.25rem;
  font-weight: 500;
}

.rmr-detail-price {
  color: var(--accent, #c9a962);
  font-size: 1.05rem;
  font-weight: 600;
}

.rmr-detail-sub {
  color: var(--text-muted, #9ca3af);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rmr-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.rmr-stat {
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 9px;
  background: var(--surface-alt, #1a1e26);
}

.rmr-stat b {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
}

.rmr-stat span {
  color: var(--text-muted, #9ca3af);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rmr-detail-desc {
  color: var(--text-muted, #9ca3af);
  font-size: 0.84rem;
  line-height: 1.65;
}

.rmr-detail-desc p + p { margin-top: 8px; }

.rmr-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.rmr-btn {
  padding: 9px 18px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 9999px;
  background: var(--surface-alt, #1a1e26);
  color: var(--text, #f4f4f5);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.rmr-btn:hover {
  border-color: var(--accent, #c9a962);
  color: var(--accent, #c9a962);
}

.rmr-btn.is-primary {
  background: var(--accent, #c9a962);
  border-color: var(--accent, #c9a962);
  color: var(--bg, #0a0c0f);
}

.rmr-btn.is-primary:hover {
  background: transparent;
  color: var(--accent, #c9a962);
}

.rmr-detail-close {
  margin-left: auto;
  border: none;
  background: none;
  padding: 4px;
  color: var(--text-muted, #9ca3af);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.rmr-detail-close:hover { color: var(--text, #f4f4f5); }

.rmr-btn:focus-visible,
.rmr-detail-close:focus-visible,
.rmr-project-links a:focus-visible,
.rmr-project-links button:focus-visible {
  outline: 2px solid var(--accent, #c9a962);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .rmr-section { padding-top: 54px; }
  .rmr-hood-break { gap: 16px; margin-bottom: 26px; }

  .rmr-project { padding-top: 30px; }
  .rmr-project-hero { min-height: 150px; aspect-ratio: 16 / 9; }
  .rmr-project-overlay { padding: 18px; gap: 6px; }
  .rmr-project-meta { gap: 6px 12px; font-size: 0.75rem; }

  .rmr-project-intro { flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .rmr-project-links { padding-top: 0; }

  .rmr-detail { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
}


/* Hide map-only controls while viewing Properties */
body.rmr-view-properties #map-controls {
    display: none !important;
}



/* =============================================================
   FILTER UPDATE FEEDBACK
============================================================= */

.rmr-sections {
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.rmr-sections.is-updating {
    opacity: 0.35;
    transform: translateY(3px);
    pointer-events: none;
}


/* Result count / updating indicator */

.rmr-result-count {
    transition: opacity 150ms ease;
}

.rmr-result-count.is-updating {
    opacity: 0.65;
}

.rmr-result-count.is-updating::before {
    content: "";
    display: inline-block;

    width: 10px;
    height: 10px;

    margin-right: 7px;

    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;

    vertical-align: -1px;

    animation: rmr-filter-spin 600ms linear infinite;
}

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


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .rmr-property-grid,
    .rmr-result-count {
        transition: none;
    }

    .rmr-result-count.is-updating::before {
        animation: none;
    }
}
/* Collapsible property filters: desktop keeps the existing pill layout. */
.rmr-filter-options {
    display: contents;
}

.rmr-filter-toggle {
    display: none;
}

@media (max-width: 860px) {
    .rmr-filter-row-primary {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .rmr-filter-row-primary .rmr-filter-group {
        display: block;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 0;
    }

    .rmr-filter-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        padding: 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--text, #f4f4f5);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .rmr-filter-toggle-label {
        flex: 0 0 auto;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .rmr-filter-summary {
        flex: 1 1 auto;
        min-width: 0;
        color: var(--text-muted, #9ca3af);
        font-size: 0.76rem;
        line-height: 1.4;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .rmr-filter-arrow {
        flex: 0 0 auto;
        width: 6px;
        height: 6px;
        margin: 0 3px 3px 2px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
    }

    .rmr-filter-toggle[aria-expanded="true"] .rmr-filter-arrow {
        transform: rotate(225deg);
        margin-top: 5px;
    }

    .rmr-filter-toggle:focus-visible {
        outline: 2px solid var(--accent, #c9a962);
        outline-offset: 2px;
    }

    .rmr-filter-group > .rmr-filter-options {
        display: none;
    }

    .rmr-filter-group.is-filter-open > .rmr-filter-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 10px 10px;
    }

    .rmr-filter-options > .rmr-filter-label {
        display: none;
    }

    .rmr-filter-options > .rmr-pill {
        min-height: 44px;
        white-space: normal;
    }
}