/* ============================================================
   FILTER-KIT.CSS — Универсальный фильтр-кит для внутренних страниц
   Театр на Таганке

   Подключается на страницах с фильтрами (афиша, репертуар) после
   page.css и до страничного CSS:

     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="components/page/page.css">
     <link rel="stylesheet" href="components/filter-kit/filter-kit.css"> ← здесь
     <link rel="stylesheet" href="components/afisha/afisha.css">

   Что содержит:
     ── МОБИЛЬНЫЙ ТУЛБАР ──────────────────────────────
     .filter__bar             панель из двух кнопок (фильтры + календарь/название)
     .filter__bar-btn         сама кнопка
     .filter__bar-btn-count   бейдж с количеством активных фильтров
     .filter__bar-btn-icon    иконка слева от лейбла

     ── ДЕСКТОПНЫЕ ДРОПДАУНЫ ──────────────────────────
     .filter__drops           контейнер кнопок-дропдаунов в правой колонке бара
     .filter__drop-btn        сама кнопка
     .filter__drop-content    обёртка badge + label слева в кнопке
     .filter__drop-label      текстовый лейбл
     .filter__drop-badge      квадратик-счётчик
     .filter__drop-chevron    шеврон вниз
     .filter__drop-cal-icon   иконка календаря (для кнопки «Весь месяц»)

     ── DESKTOP DROPDOWN PANEL ────────────────────────
     .filter__dropdown          сама панель (position: absolute, JS позиционирует)
     .filter__dropdown-divider  разделитель между группами чекбоксов
     .filter__dropdown-footer   ряд кнопок «Применить» / «Сбросить»
     .filter__dropdown-apply
     .filter__dropdown-reset

     ── ЧЕКБОКСЫ ──────────────────────────────────────
     .filter__check-list        список чекбоксов
     .filter__check-item        строка: чекбокс + текст
     .filter__check-input       сам кастомный чекбокс
     .filter__check-item--special / --input--special
                                   модификаторы для Пушкинская/Премьеры

     ── МОБИЛЬНАЯ ПАНЕЛЬ (тёмная) ─────────────────────
     .filter__panel             корневой контейнер (position: fixed)
     .filter__panel--scroll     вариант с единым скроллом всего содержимого
     .filter__panel-header      шапка с title и × кнопкой
     .filter__panel-title       заголовок
     .filter__panel-close       × кнопка
     .filter__panel-body        тело панели
     .filter__panel-months      табы месяцев (только в календарной панели)
     .filter__panel-footer      футер с кнопками
     .filter__panel-apply       «Применить»
     .filter__panel-reset       «Сбросить»

     ── СОДЕРЖИМОЕ МОБИЛЬНОЙ ПАНЕЛИ ФИЛЬТРОВ ─────────
     .filter__panel-content     главный контейнер контента (gap 40px)
     .filter__panel-group       группа категорий+сцен
     .filter__panel-section     одна секция (заголовок + список)
     .filter__panel-section-title
     .filter__panel-content-footer  кнопки внутри потока контента (для --scroll)

     ── КАЛЕНДАРЬ (светлый — десктопный) ──────────────
     .filter__calendar          корневой контейнер
     .filter__cal-header        строка с навигацией prev/next
     .filter__cal-month-name    название месяца
     .filter__cal-prev / -next  кнопки навигации
     .filter__cal-week-header   ряд заголовков дней недели
     .filter__cal-dow           одна ячейка дня недели
     .filter__cal-grid          сетка ячеек дат
     .filter__cal-cell          одна ячейка
     .filter__cal-cell--empty / --inactive / --active / --selected / --today
     .filter__cal-cell--range-start / --range-end / --range-pending / --in-range

     ── КАЛЕНДАРЬ (тёмный — для мобильной панели) ─────
     .filter__calendar--panel + все .filter__cal-* выше
     ============================================================ */


/* ══════════════════════════════════════════════════
   МОБИЛЬНЫЙ ТУЛБАР
   Два полноширинных блока, h:60px, border:1px black, gap:0.
   На десктопе скрывается (см. блок @media 1024+ ниже).
   ══════════════════════════════════════════════════ */
.filter__bar {
  display: flex;
  gap: 0;
  padding: 28px 10px 0;
  background: var(--color-bg-warm);
}

/* Кнопка: border 1px solid black, 60px, Pragmatica Medium 18px */
.filter__bar-btn {
  flex: 1;
  height: var(--btn-h-l);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--color-black-soft);
  background: var(--color-bg-warm);
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  padding: 0 16px;
}
/* Второй btn: левый бордер не нужен (смыкается с правым первого) */
.filter__bar-btn + .filter__bar-btn { margin-left: -1px; }
.filter__bar-btn:hover         { background: var(--color-black-soft-04); }
.filter__bar-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.filter__bar-btn.is-active     { background: var(--color-black-soft); color: var(--color-white); }

/* Бейдж с кол-вом фильтров: чёрный квадрат 25×25, белый текст */
.filter__bar-btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  background: var(--color-black-soft);
  color: var(--color-white);
  font-family: var(--font-main);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  letter-spacing: -0.015em;
  flex-shrink: 0;
}
/* display:inline-flex выше перебивает [hidden]{display:none} —
   явно возвращаем скрытие для обоих переключаемых элементов кнопки. */
.filter__bar-btn-count[hidden],
.filter__bar-btn-icon[hidden] {
  display: none;
}
/* Инвертируем когда кнопка активна */
.filter__bar-btn.is-active .filter__bar-btn-count {
  background: var(--color-white);
  color: var(--color-black-soft);
}


/* ══════════════════════════════════════════════════
   ДЕСКТОПНЫЕ ДРОПДАУНЫ — БАЗА
   На мобилке скрыты, на десктопе разворачиваются (см. @media 1024+).
   ══════════════════════════════════════════════════ */
.filter__drops { display: none; }

.filter__dropdown {
  position: absolute;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-black-soft-15);
  border-radius: var(--card-radius);
  box-shadow: none;
  margin-top: -2px; /* перекрывает нижний бордер кнопки + верхний бордер дропдауна */
  min-width: 0;
  z-index: var(--z-modal);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* hidden имеет низкую специфичность — перебивается display:flex выше */
.filter__dropdown[hidden] { display: none; }

/* Разделитель между группами чекбоксов */
.filter__dropdown-divider {
  border: none;
  border-top: 1px solid var(--color-black-soft-15);
  margin: 0;
}

/* Список внутри дропдауна */
.filter__dropdown .filter__check-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Строка: чекбокс + текст */
.filter__dropdown .filter__check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
  padding: 0;
  cursor: pointer;
  user-select: none;
  background: none;
  border-radius: 0;
}
/* Ховер на строке подсвечивает только сам чекбокс */
.filter__dropdown .filter__check-item:hover .filter__check-input {
  border-color: var(--color-black-soft);
}

/* Чекбокс 20×20, светлая тема — тёмная рамка */
.filter__dropdown .filter__check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 1px solid var(--color-black-soft-25);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}
.filter__dropdown .filter__check-input:checked {
  background: var(--color-black-soft);
  border-color: var(--color-black-soft);
}
.filter__dropdown .filter__check-input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--color-white);
  border-top: 0;
  border-left: 0;
  transform: rotate(43deg);
}

/* Текст пункта */
.filter__dropdown .filter__check-item span {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: 1.05;
  color: var(--color-black-soft);
  white-space: nowrap;
}

/* Дропдаун «Календарь» (специфика афиши) — другие отступы */
#afishaDropCalendar {
  padding: 16px;
  gap: 16px;
}

/* Футер с кнопками: Применить + Сбросить */
.filter__dropdown-footer {
  display: flex;
  gap: 8px;
}

/* Применить — чёрная заливка */
.filter__dropdown-apply {
  flex: 1;
  height: var(--btn-h-m);
  background: var(--color-black-soft);
  color: var(--color-white);
  border: 1px solid var(--color-black-soft);
  border-radius: var(--card-radius);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: var(--font-weight-body);
  cursor: pointer;
  transition: opacity var(--duration-fast) ease;
}
.filter__dropdown-apply:hover { opacity: 0.8; }

/* Сбросить — инвертированная: прозрачный фон, серый бордер */
.filter__dropdown-reset {
  flex: 1;
  height: var(--btn-h-m);
  background: none;
  color: var(--color-black-soft-40);
  border: 1px solid var(--color-black-soft-25);
  border-radius: var(--card-radius);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: var(--font-weight-body);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.filter__dropdown-reset:hover { border-color: var(--color-black-soft); color: var(--color-black-soft); }
/* Когда есть выбор — рамка и текст чёрные */
.filter__dropdown-reset.is-active {
  border-color: var(--color-black-soft);
  color: var(--color-black-soft);
}


/* ══════════════════════════════════════════════════
   КНОПКА-ДРОПДАУН .filter__drop-btn
   База — мобильная (на мобилке кнопки внутри .filter__drops скрыты).
   На десктопе пересоздаётся в @media 1024+.
   ══════════════════════════════════════════════════ */
.filter__drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--color-black-soft-25);
  border-radius: var(--card-radius);
  padding: 8px 14px;
  font-family: var(--font-accent);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-black-soft);
  cursor: pointer;
  height: 40px;
  white-space: nowrap;
  transition: background var(--duration-fast) ease;
}
.filter__drop-btn:hover         { background: var(--color-black-soft-04); }
.filter__drop-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.filter__drop-btn.is-active     { background: var(--color-black-soft); color: var(--color-white); border-color: var(--color-black-soft); }
/* has-value: только бейдж, без цветовой индикации на самой кнопке */
.filter__drop-btn.has-value { }

.filter__drop-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) ease;
}
.filter__drop-btn[aria-expanded="true"] .filter__drop-chevron { transform: rotate(180deg); }

/* Квадратик-бейдж с цифрой слева от лейбла */
.filter__drop-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  background: var(--color-black-soft);
  color: var(--color-white);
  border-radius: var(--card-radius);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  flex-shrink: 0;
  margin-right: 6px;
}
.filter__drop-btn.has-value .filter__drop-badge { display: inline-flex; }

/* Обёртка badge + label слева в кнопке */
.filter__drop-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Иконка календаря (для кнопки «Весь месяц») */
.filter__drop-cal-icon {
  flex-shrink: 0;
  color: currentColor;
}


/* ══════════════════════════════════════════════════
   МИНИ-КАЛЕНДАРЬ (светлый — для дропдауна десктопа)
   ══════════════════════════════════════════════════ */
.filter__cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.filter__cal-month-name {
  font-family: var(--font-accent);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-black-soft);
}

/* Кнопки навигации по месяцам */
.filter__cal-prev,
.filter__cal-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black-soft);
  border-radius: var(--card-radius);
  flex-shrink: 0;
  transition: background var(--duration-fast) ease;
}
.filter__cal-prev:hover,
.filter__cal-next:hover { background: var(--color-black-soft-10); }

.filter__cal-week-header {
  display: grid;
  grid-template-columns: repeat(7, minmax(36px, 1fr));
  gap: 2px;
  margin-bottom: 4px;
}

.filter__cal-dow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: var(--font-weight-body);
  color: var(--color-black-soft-40);
}

.filter__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(36px, 1fr));
  gap: 3px;
}

.filter__cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--card-radius);
  background: none;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: var(--font-weight-body);
  color: var(--color-black-soft);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}
.filter__cal-cell:hover:not(:disabled) { background: var(--color-black-soft-10); }
.filter__cal-cell:focus-visible        { outline: 2px solid var(--color-brand); outline-offset: 0; }
.filter__cal-cell--empty    { cursor: default; }
.filter__cal-cell--inactive { color: var(--color-black-soft-25); cursor: default; }
.filter__cal-cell--active   { font-weight: var(--font-weight-bold); }
.filter__cal-cell--selected { background: var(--color-brand) !important; color: var(--color-white) !important; }
.filter__cal-cell--today    { border: 1px solid var(--color-black-soft-25); }

/* Диапазон дат: светлый фон (десктопный дропдаун) */
.filter__cal-cell--range-start,
.filter__cal-cell--range-end,
.filter__cal-cell--range-pending {
  background: var(--color-brand) !important;
  color: var(--color-white) !important;
  border-color: transparent !important;
}
/* Дни внутри диапазона: рамка цвета бренда, без заливки */
.filter__cal-cell--in-range {
  border: 1px solid var(--color-brand) !important;
  background: none !important;
}
.filter__cal-cell--in-range.filter__cal-cell--inactive {
  border: 1px solid rgba(194, 42, 34, 0.3) !important;
  background: none !important;
  color: var(--color-black-soft-25);
  pointer-events: none;
}


/* ══════════════════════════════════════════════════
   МОБИЛЬНЫЕ ПАНЕЛИ
   Точная копия анимации .menu из menu.css.
   ══════════════════════════════════════════════════ */
.filter__panel {
  position: fixed;
  inset: 0;
  background: var(--color-black-soft);
  color: var(--color-white);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms;
}
.filter__panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 180ms ease,
    visibility 0s linear 0s;
}

/* Гарантированное конечное состояние закрытой панели.
   Базовый `visibility: hidden` доезжает только отложенным переходом;
   если переход не завершился, панель остаётся visible и держит внутри
   14 фокусируемых элементов — при этом с aria-hidden="true".
   Комбинация «есть в tab-порядке, нет в дереве доступности» ломает
   VoiceOver/TalkBack. Класс ставит page.js после анимации закрытия.
   Дублируется атрибутом `inert`, который page.js вешает сразу. */
.filter__panel.is-hidden {
  visibility: hidden;
  transition: none;
}

/* Длительность fade-out панели для JS (page.js читает и ждёт её
   перед постановкой .is-hidden). Держать синхронно с transition выше. */
:root { --js-panel-fade: 180ms; }

/* Шапка: × at top:24px, title at top:36px (Figma).
   padding-top 24px + padding-bottom 66px = 134px до начала табов. */
.filter__panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 10px 66px;
  flex-shrink: 0;
}

/* Title: Pragmatica Medium 20px, opacity 40% */
.filter__panel-title {
  margin-top: 12px;
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: var(--font-weight-body);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--color-white);
  opacity: 0.4;
}

/* × кнопка: 44×44, border rgba(255,255,255,0.2).
   menu__close уже задаёт width, height, flex, color, cursor. */
.filter__panel-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-white-20);
  border-radius: var(--card-radius);
  flex-shrink: 0;
}
.filter__panel-close:hover { border-color: var(--color-white-40); }
.filter__panel-close svg { opacity: 0.4; }

/* Табы месяцев в календарной панели: section-tab с белым цветом.
   Кол-во месяцев задаёт CMS и может быть >3, а ширина панели ~355px.
   Поэтому строка табов прокручивается горизонтально (тот же приём,
   что .section-tabs--scrollable): overflow-x на контейнере, а боковые
   отступы 10px — на крайних табах через margin, НЕ через padding
   контейнера (padding на скролл-контейнере не показывается у
   прокручиваемого контента в части браузеров). Скроллбар скрыт. */
.filter__panel-months {
  display: flex;
  gap: 40px;
  padding: 0 0 24px;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.filter__panel-months::-webkit-scrollbar { display: none; }

.filter__panel-months .section-tab {
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter__panel-months .section-tab:first-child { margin-left: 10px; }
.filter__panel-months .section-tab:last-child  { margin-right: 10px; }
.filter__panel-months .section-tab__line { background-color: var(--color-white); }

/* Разделитель: внутри 355px контейнера (left:10px) */
.filter__panel > .menu__sub-divider {
  margin: 0 10px;
  flex-shrink: 0;
}

/* Базовое тело: только flex:1, без overflow */
.filter__panel-body {
  flex: 1;
  padding: 0 10px;
}

/* Календарь афиши: вся панель скроллится целиком */
#afishaPanelCalendar {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#afishaPanelCalendar .filter__panel-body {
  flex: none;
  overflow: visible;
  padding: 24px 10px 80px; /* 80px до кнопок */
}

/* Фильтры: панель скроллит себя целиком (h:1062px в Figma).
   Никакого flex-дележа на header/body/footer — всё в одном потоке. */
.filter__panel--scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Отменяем flex-column от базового .filter__panel */
  display: block;
}
.filter__panel--scroll::-webkit-scrollbar { display: none; }


/* ══════════════════════════════════════════════════
   СОДЕРЖИМОЕ МОБИЛЬНОЙ ПАНЕЛИ ФИЛЬТРОВ
   Скоуплено внутрь .filter__panel чтобы не влиять на десктопные дропдауны
   (там свои стили чекбоксов с другими размерами и цветами).
   ══════════════════════════════════════════════════ */

/* Главный контейнер: gap 40px между блоками */
.filter__panel .filter__panel-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px 10px 0;
}

/* Кнопки внутри потока контента (для --scroll панелей) */
.filter__panel-content-footer {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px 0 24px;
}

/* Группа категорий+сцен: gap 40px */
.filter__panel .filter__panel-group {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Одна секция: заголовок + список, gap 24px */
.filter__panel .filter__panel-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Заголовок секции */
.filter__panel .filter__panel-section-title {
  font-family: var(--font-accent);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

/* Список чекбоксов: gap 20px */
.filter__panel .filter__check-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Строка: чекбокс + текст, gap 16px.
   height:auto и padding:0 — переопределяем десктопный .filter__check-item. */
.filter__panel .filter__check-item {
  display: flex;
  align-items: center;
  gap: 16px;
  height: auto;
  padding: 0;
  cursor: pointer;
  user-select: none;
  border-radius: 0;
}
.filter__panel .filter__check-item:hover { background: none; }

/* Кастомный чекбокс 24×24 */
.filter__panel .filter__check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}

.filter__panel .filter__check-input:checked {
  background: var(--color-white);
  border-color: var(--color-white);
}

.filter__panel .filter__check-input:checked::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 11px;
  border: 2px solid var(--color-black-soft);
  border-top: 0;
  border-left: 0;
  transform: rotate(43deg);
}

/* Текст */
.filter__panel .filter__check-item span {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: var(--font-weight-body);
  line-height: 1.05;
  color: var(--color-white);
}

/* Пушкинская/Премьеры: gap 14px (vs 16px), border opacity 0.40, tracking -0.45px */
.filter__panel .filter__check-item--special { gap: 14px; }
.filter__panel .filter__check-input--special { border-color: rgba(255, 255, 255, 0.40); }
.filter__panel .filter__check-item--special span { letter-spacing: -0.025em; }

/* Разделители внутри flex-контейнеров: не сжимаются */
.filter__panel .filter__panel-content > .menu__sub-divider,
.filter__panel .filter__panel-group   > .menu__sub-divider { flex-shrink: 0; }

/* Футер: два действия «Применить» и «Сбросить». Для не-scroll панелей. */
.filter__panel-footer {
  padding: 16px 10px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* «Применить»: bg white, color #131313, h:60px */
.filter__panel-apply {
  height: var(--btn-h-l);
  background: var(--color-white);
  color: var(--color-black-soft);
  border: none;
  border-radius: var(--card-radius);
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: opacity var(--duration-fast) ease;
}
.filter__panel-apply:hover { opacity: 0.85; }

/* «Сбросить»: базовые стили от menu__search-reset (высота, рамка, цвет).
   Здесь обнуляем внешние отступы и переводим насыщенность на body:
   menu__search-reset даёт medium, но на внутренних страницах кнопки фильтров
   консистентны с остальным body-текстом. Работает потому что filter-kit.css
   подключается ПОСЛЕ menu.css (см. порядок подключения в HTML). */
.filter__panel-reset {
  margin: 0;
  text-align: center;
  cursor: pointer;
  font-weight: var(--font-weight-body);
}


/* ══════════════════════════════════════════════════
   КАЛЕНДАРЬ В ТЁМНОЙ ПАНЕЛИ
   Точные размеры из Figma 3068:4081
   Panel body padding:0 10px даёт 355px ширину → 7×(41.3px) + 6×(11px) = 355px
   ══════════════════════════════════════════════════ */
/* Заголовок не нужен — его роль выполняют табы месяцев */
.filter__calendar--panel .filter__cal-header { display: none; }

/* Заголовки дней: h:27.5px, 18px Medium, opacity 40% */
.filter__calendar--panel .filter__cal-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 11px;
  margin: 0;
  padding: 0;
  opacity: 0.4;
}
.filter__calendar--panel .filter__cal-dow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  letter-spacing: -0.025em;
  color: var(--color-white);
}

/* Сетка дат: row-gap:12px, col-gap:11px */
.filter__calendar--panel .filter__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px 11px;
  padding: 12px 0 0;
}

/* Базовая ячейка: 41×41px */
.filter__calendar--panel .filter__cal-cell {
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  color: var(--color-white);
  background: none;
  border: none;
  border-radius: var(--card-radius);
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-fast) ease;
}

/* Нет показов: opacity 15% */
.filter__calendar--panel .filter__cal-cell--inactive {
  opacity: 0.15;
  cursor: default;
}

/* Есть показы: border rgba(255,255,255,0.15) */
.filter__calendar--panel .filter__cal-cell--active {
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.filter__calendar--panel .filter__cal-cell--active:hover {
  background: var(--color-white-10);
}

/* Выбрана: bg #c22a22, text #131313 */
.filter__calendar--panel .filter__cal-cell--selected {
  background: var(--color-brand) !important;
  color: var(--color-black-soft) !important;
  border-color: var(--color-brand) !important;
  opacity: 1;
}

/* Пустая ячейка */
.filter__calendar--panel .filter__cal-cell--empty {
  cursor: default;
  border: none;
  opacity: 0;
  pointer-events: none;
}

/* После 1-го тапа: ждём второй — полностью красный */
.filter__calendar--panel .filter__cal-cell--range-pending {
  background: var(--color-brand) !important;
  color: var(--color-black-soft) !important;
  border-color: var(--color-brand) !important;
  opacity: 1;
}

/* Начало и конец диапазона */
.filter__calendar--panel .filter__cal-cell--range-start,
.filter__calendar--panel .filter__cal-cell--range-end {
  background: var(--color-brand) !important;
  color: var(--color-black-soft) !important;
  border-color: var(--color-brand) !important;
  opacity: 1;
}

/* Дни внутри диапазона: квадрат с белой рамкой */
.filter__calendar--panel .filter__cal-cell--in-range {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  opacity: 1;
}

.filter__calendar--panel .filter__cal-cell--in-range.filter__cal-cell--inactive {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  opacity: 0.4;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════
   ПЛАНШЕТ (768–1023.98px)
   Только подстройка боковых отступов мобильного тулбара
   под планшетные 16px. На мобилке значение наследуется (10px).
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .filter__bar { padding: 24px 16px 0; }
}


/* ══════════════════════════════════════════════════
   ДЕСКТОП (≥1024px)
   Мобильный тулбар скрывается, дропдауны разворачиваются.
   Кнопка-дропдаун пересоздаётся: высота 56px, фон 10%, без бордера.
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .filter__bar { display: none; }

  /* Контейнер дропдаунов в правой колонке бара */
  .filter__drops {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    flex-shrink: 0;
  }

  /* Кнопка-дропдаун — десктопный стиль (Figma 3079:4975):
     три равных кнопки, фон #131313 @ 10%, без бордера */
  .filter__drop-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    border: none;
    background: var(--color-black-soft-10);
    border-radius: var(--card-radius);
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: var(--font-weight-body);
    letter-spacing: -0.01em;
    color: var(--color-black-soft);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--duration-fast) ease;
  }
  .filter__drop-btn:last-child { margin-right: 0; }
  .filter__drop-btn:hover     { background: var(--color-black-soft-04); }
  .filter__drop-btn.is-active { background: var(--color-black-soft); color: var(--color-white); border-color: var(--color-black-soft); }
  /* has-value handled by .filter__drop-badge */
  .filter__drop-chevron { width: 20px; height: 20px; }
}