/* ur.estate — живые фильтры витрины (дропдауны фильтр-бара). */

[data-filterbar] .fbtn { position: relative; cursor: pointer; user-select: none; }
.fbtn--active .fbtn__v { color: var(--color-action); font-weight: 600; }
.fbtn--open { background: rgba(15, 17, 22, 0.05); }

.fpanel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 230px;
  padding: 14px;
  border-radius: var(--radius-xl);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-line);
  box-shadow: var(--glass-shadow-lg);
  cursor: default;
  animation: fpanel-in 0.18s var(--ease-out);
}
@keyframes fpanel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fpanel__title {
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-fg-mute);
  margin-bottom: 10px;
}

.fpanel__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fpanel__chips--col { flex-direction: column; align-items: stretch; }
.fchip {
  padding: 8px 14px;
  border-radius: var(--radius-base);
  border: 1px solid var(--color-line);
  background: #fff;
  font: 500 13px/1 var(--font-ui);
  color: var(--color-fg-soft);
  text-align: center;
  transition: background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.fchip:hover { border-color: rgba(15, 17, 22, 0.2); color: var(--color-fg); }
.fchip--on {
  background: var(--color-action);
  border-color: var(--color-action);
  color: #fff;
}

.fpanel__range { display: flex; align-items: center; gap: 8px; }
.fpanel__range input {
  width: 86px;
  padding: 9px 10px;
  border-radius: var(--radius-base);
  border: 1px solid var(--color-line);
  background: #fff;
  font: 500 13px/1 var(--font-ui);
  color: var(--color-fg);
}
.fpanel__range input:focus { outline: none; border-color: var(--color-action); }
.fpanel__dash { color: var(--color-fg-mute); }
.fpanel__unit { font: 500 12px/1 var(--font-ui); color: var(--color-fg-mute); white-space: nowrap; }

/* ── Режим карты: ЖК ↔ Квартиры ── */
.mapmode {
  display: inline-flex; gap: 3px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-line);
  box-shadow: var(--glass-shadow);
}
.mapmode__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-ui);
  color: var(--color-fg-mute);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.mapmode__btn:hover { color: var(--color-fg); }
.mapmode__btn--on { background: rgba(15, 17, 22, 0.92); color: #fff; }

/* Режим «Квартиры»: пины ЖК (и их кластеры) скрыты полностью —
   историю рассказывают точки-квартиры и их кластер-пузыри */
.pins--apt .upin { display: none !important; }

/* Управление картой (переключатель ЖК/Квартиры, зум) — всегда ПОВЕРХ пинов и точек */
.map-overlays { z-index: 40 !important; }

/* ── Точки-квартиры на карте ── */
.dots { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.dot {
  position: absolute; left: -7px; top: -7px;
  width: 14px; height: 14px;
  padding: 0; border: 0; background: none;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}
/* визуальный кружок — ДОЧЕРНИЙ элемент: hover-scale на нём не трогает
   translate(x,y) кнопки (CSS-свойство scale умножает transform целиком) */
.dot i {
  position: absolute; inset: 2px;
  display: block;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 17, 22, 0.35);
  transition: transform .15s var(--ease-out);
  animation: dotpop .22s var(--ease-spring);
}
.dot:hover { z-index: 5; }
.dot:hover i { transform: scale(1.65); }
.dot--available i { background: #2A9D5C; }
.dot--reserved  i { background: #F08C2D; }
.dot--sold      i { background: #A2A9B0; }
@keyframes dotpop {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Кластер точек: пузырь с количеством, клик — приблизить */
.dotcluster {
  position: absolute; left: -17px; top: -17px;
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(42, 111, 78, 0.94);
  color: #fff;
  font: 650 12px/30px var(--font-display);
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(15, 17, 22, 0.28);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  animation: dotpop .25s var(--ease-spring);
  transition: background .15s var(--ease-out);
}
.dotcluster:hover { background: rgba(31, 82, 56, 1); }

/* Мини-карточка квартиры при наведении на точку */
.dot-card {
  position: absolute; left: 0; top: 0;
  z-index: 6;
  transform: translate(-50%, calc(-100% - 12px));
  pointer-events: none;
  width: 216px;
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(15, 17, 22, 0.08);
  box-shadow: 0 18px 44px rgba(15, 17, 22, 0.24);
  overflow: hidden;
  animation: dotcard-in .18s var(--ease-out);
}
@keyframes dotcard-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 6px)); }
  to   { opacity: 1; transform: translate(-50%, calc(-100% - 12px)); }
}
.dot-card__media {
  aspect-ratio: 16 / 10;
  background: var(--color-bg-deep);
}
.dot-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dot-card__body { padding: 10px 12px 12px; }
.dot-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dot-card__price { font: 650 15.5px/1.1 var(--font-display); letter-spacing: -0.01em; color: var(--color-fg); }
.dot-card__pm2 { font: 500 10.5px/1 var(--font-mono); color: var(--color-fg-mute); margin-top: 3px; }
.dot-card__meta { font: 600 12px/1.3 var(--font-ui); color: var(--color-fg-soft); margin-top: 7px; }
.dot-card__loc { font: 400 11px/1.3 var(--font-ui); color: var(--color-fg-mute); margin-top: 2px; }
.dot-card__chip {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font: 600 10.5px/1 var(--font-ui);
}
.dot-card__chip--free { background: rgba(31, 168, 91, 0.12); color: #1B7E45; }
.dot-card__chip--hold { background: rgba(240, 140, 45, 0.14); color: #A85E18; }
.dot-card__chip--sold { background: rgba(15, 17, 22, 0.06); color: var(--color-fg-mute); }