/*
  Фильтр отзывов — единственное место со стилями ряда кнопок-разделов
  и выпадающего списка врачей.

  До 04.09.2026 одни и те же правила лежали в ТРЁХ копиях — assets/css/main.css,
  otzyvy.html и services.html — и успели разойтись: у кнопок отличалась
  длительность перехода (220 мс против 0,15 с), у списка врачей на otzyvy.html
  была своя копия, а на services.html списка не было вовсе. Копии удалены,
  править стили фильтра теперь можно ТОЛЬКО здесь (правило «один факт —
  одно место», §🔁 v3.15 в CLAUDE.md).

  Разметку рисует assets/js/reviews-filter.js: кнопки .rf-chip и
  label.rf-select-label > select.rf-select он кладёт в ОДИН ряд —
  .reviews-filter (главная, страницы направлений и услуг) либо
  .cat-filter (otzyvy.html, services.html). Классы .rf-* переименовывать
  нельзя, на них завязан скрипт.

  Высота кнопки и высота списка берутся из одной переменной --rf-h,
  поэтому они всегда стоят в одну линию.
*/

/* ==== Ряд фильтра ==== */
.reviews-filter,
.cat-filter{
  --rf-h: 38px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.reviews-filter{
  justify-content: center;
  margin-bottom: 40px;
}
.cat-filter{
  padding: 24px 0 8px;
}

/* ==== Кнопка-«таблетка» раздела ==== */
.rf-chip{
  font: inherit; font-size: 13px; line-height: 20px; letter-spacing: .02em;
  min-height: var(--rf-h, 38px);
  padding: 8px 16px; border-radius: 100px;
  border: 1px solid var(--divider); background: transparent;
  color: var(--fg-muted); cursor: pointer;
  transition: color var(--dur-fast, .15s) var(--easing, ease),
              border-color var(--dur-fast, .15s) var(--easing, ease),
              background var(--dur-fast, .15s) var(--easing, ease);
}
.rf-chip:hover{
  color: var(--accent-strong); border-color: var(--accent);
}
.rf-chip[aria-selected="true"]{
  color: #fff; background: var(--accent);
  border-color: var(--accent);
}
.rf-count{
  font-size: 11px; opacity: .75; margin-left: 6px;
}

/* ==== Выпадающий список врачей ====
   Врач выбирается списком, а не рядом кнопок: врачей 11, кнопками
   они занимали две строки и спорили с фильтром по разделам. */
.rf-select-label{
  display: inline-flex; align-items: center; gap: 10px;
  max-width: 100%;
  font-size: 13px; color: var(--fg-muted);
}
.rf-select{
  appearance: none; -webkit-appearance: none;
  /* Та же высота, что у кнопок-«таблеток» рядом — иначе список
     выпирал из ряда на 2 пикселя. */
  height: var(--rf-h, 38px);
  max-width: 100%;
  padding: 0 34px 0 14px;
  border-radius: 100px;
  border: 1px solid var(--divider-strong, rgba(196,191,175,.16));
  background-color: var(--bg-elev, #14140E);
  color: var(--fg-strong, #F4F1EA);
  font: inherit; font-size: 13px; line-height: 20px; cursor: pointer;
  /* Сам раскрывающийся перечень рисует операционная система, а не сайт.
     Без color-scheme она берёт светлую тему — на тёмном сайте перечень
     выглядел белым пятном. Цвета строк задаём и явно: Firefox и старые
     сборки Chrome color-scheme у select не применяют. */
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237EA593' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  transition: border-color var(--dur-fast, .15s) var(--easing, ease);
}
.rf-select option{
  background: var(--bg-elev, #14140E);
  color: var(--fg-strong, #F4F1EA);
}
.rf-select:hover{ border-color: var(--accent, #7EA593); }
.rf-select:focus-visible{ outline: 2px solid var(--accent, #7EA593); outline-offset: 2px; }

/* ==== Узкий экран ====
   Список занимает всю ширину строки: с длинными фамилиями он
   иначе вылезал за край полосы. */
@media (max-width: 560px){
  .rf-select-label{ display: flex; width: 100%; }
  .rf-select{ flex: 1 1 auto; width: 100%; min-width: 0; }
}

/* Подпись вместо пустого списка: раньше при выборе врача без отзывов в
   выбранном разделе экран просто оказывался пустым (04.09.2026). */
.rf-empty{
  margin: 24px 0 8px;
  color: var(--fg-muted, #9C978B);
  font-size: 15px; line-height: 1.5;
}