/* Двойной ползунок «от и до» — общий для карты и каталога квартир.

   🔴 Отдельным файлом, а не внутри map.css: страница квартир подключает те
   же правила, а копия однажды разошлась бы с разметкой (правка Захара,
   п. 9 — «две копии однажды разойдутся»). Разметка — partials/range.html,
   поведение — js/range.js, вид — cmd/site/ranges.go. */

/* ─── Двойной ползунок «от и до» ──────────────────────────────────────────
   Устройство снято с работающего сайта: две обычные полосы внахлёст,
   дорожка отдельным слоем под ними. Сами полосы не ловят курсор — его
   ловят только бегунки, иначе верхняя перекрывала бы нижнюю целиком. */

.rng {
  display: flex; align-items: center; gap: 8px;
  min-width: 168px; padding: 4px 12px 4px 10px;
  border-left: 1px solid var(--line);
}
/* Цене нужно больше места: «от 11 млн ₽» и «до 17,5 млн ₽» длиннее,
   чем «от 15 м²», и в 168 пикселях они слипаются. */
.rng[data-range="price"] { min-width: 210px; }
.rng__unit { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.rng__body { flex: 1 1 auto; min-width: 0; }
/* Зазор обязателен: без него при узкой полосе «от 11 млн ₽» и «до 17,5 млн ₽»
   смыкаются в одну строку без пробела. */
.rng__head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.rng__head i {
  font-size: 11px; font-weight: 500; font-style: normal; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Заданное условие видно по цвету подписей — как и у остальных фильтров. */
.rng.is-on .rng__head i { color: var(--accent-2); font-weight: 600; }

.rng__track { position: relative; display: block; height: 18px; }
.rng__fill {
  position: absolute; top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(to right,
    var(--line) 0%, var(--line) var(--from, 0%),
    var(--accent) var(--from, 0%), var(--accent) var(--to, 100%),
    var(--line) var(--to, 100%), var(--line) 100%);
}
.rng__thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; background: transparent;
  -webkit-appearance: none; appearance: none;
  /* Курсор ловят только бегунки: полосы лежат друг на друге, и без этого
     верхняя закрыла бы нижнюю. */
  pointer-events: none;
}
.rng__thumb:nth-of-type(1) { z-index: 3; }
.rng__thumb:nth-of-type(2) { z-index: 4; }

.rng__thumb::-webkit-slider-runnable-track { -webkit-appearance: none; height: 4px; background: transparent; border: 0; }
.rng__thumb::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: all;
  width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%; background: #fff; border: 2.5px solid var(--accent);
  box-shadow: 0 1px 5px rgba(0,0,0,.2); cursor: grab;
  transition: transform .1s, box-shadow .1s;
}
.rng__thumb::-webkit-slider-thumb:active { transform: scale(1.18); box-shadow: 0 2px 10px rgba(238,99,33,.38); cursor: grabbing; }
.rng__thumb:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--accent-bg); outline-offset: 2px; }

/* Firefox рисует бегунок своими правилами. */
.rng__thumb::-moz-range-track { height: 4px; background: transparent; border: 0; }
.rng__thumb::-moz-range-thumb {
  pointer-events: all; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--accent);
  box-shadow: 0 1px 5px rgba(0,0,0,.2); cursor: grab;
}

@media (max-width: 760px) {
  /* На телефоне ползунки идут во всю ширину и без разделителя: полоса
     фильтров тут в столбик, и вертикальная черта слева ни к чему. */
  .rng { flex: 1 1 100%; padding: 2px 0; border-left: 0; }
}