/* =========================================================================
   ФІЛЬТРИ ПОДІЙ «під рельсу» — мультиселект категорій, нативні поля,
   останні переглянуті, пагінація. Окремий файл, щоб не чіпати великий
   events.css. Підключається разом із ним лише на сторінці подій.
   ========================================================================= */

/* ---- Категорія — той самий .custom-select-wrapper/trigger/options компонент
   (спільні класи з events.css, ідентичні "Моїм подіям"), що й Дата/Стать;
   .ms/.ms-trigger/.ms-panel (Stimulus multiselect) більше не використовуються
   для цього поля — прибрано на користь точної копії кабінету. ---------------- */

/* Фільтр «Категорія»: мультиселект із галочками (той самий .hobby-checkbox,
   що в "Моїх подіях", cabinet.css). Реальний <input type="checkbox"> лишається
   для FormData/category_ids[] — сховано (opacity:0) поверх видимого квадратика. */
.hobby-checkbox {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(8, 81, 184, 0.32); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: all 0.15s ease;
}
.hobby-checkbox.checked { background: #0851b8; border-color: #0851b8; }
.hobby-checkbox-option:hover .hobby-checkbox { border-color: #0851b8; }

/* Заголовки груп «Спорт»/«Комп'ютерні ігри» — клікабельні (вибрати/зняти всю
   групу одразу). */
.custom-select-group-title--selectable {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.85rem; margin: 0.15rem 0 0.1rem;
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.03em; text-transform: none;
  color: #0851b8; background: rgba(8, 81, 184, 0.06);
  border: 1px dashed rgba(8, 81, 184, 0.28); border-radius: 10px;
  cursor: pointer; opacity: 1; transition: all 0.15s ease;
}
.custom-select-group-title--selectable:hover { background: rgba(8, 81, 184, 0.12); }
.custom-select-group-title--selectable.all-selected {
  background: #0851b8; border-style: solid; border-color: #0851b8; color: #fff;
}
.custom-select-group-title--selectable .hobby-group-check {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center;
}
.custom-select-group-title--selectable .hobby-group-label { flex: 1; }
.custom-select-group-title--selectable .hobby-group-hint {
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; opacity: 0.75;
}

/* ---- Розкривний блок фільтрів ---------------------------------------------
   Показує РІВНО один рядок полів у закритому стані — скільки їх влазить у
   рядок на поточній ширині (4 / 3 / 2, ті самі два viewport-режими, що й
   .filter-grid у events.css — container-query тут ламала мобільний viewport,
   див. коментар там), а не фіксовану кількість.

   Приховуємо/показуємо самі .filter-field (display:none/grid), НЕ контейнер
   через overflow:hidden+max-height — той обрізав би й спливаючі списки ВИДИМИХ
   полів рядка 1 (Категорія/Дата — .custom-select-options, position:absolute),
   бо вони фізично виходять за межі клампованої висоти. Приховане поле
   (display:none) просто не існує в дереві, поки закрито, — його дропдаун
   ніколи не в обрізаючому предку, бо предка для обрізання більше немає. */
.filter-grid > .filter-field:nth-child(n+5) { display: none; }
@media (min-width: 981px) and (max-width: 1310px) {
  .filter-grid > .filter-field:nth-child(n+4) { display: none; }
}
@media (max-width: 832px) {
  .filter-grid > .filter-field:nth-child(n+4) { display: none; }
}
@media (max-width: 552px) {
  .filter-grid > .filter-field:nth-child(n+3) { display: none; }
}
.adv-filters.is-open .filter-grid > .filter-field {
  display: grid !important;
}

/* Кастомна SVG-стрілка для <select> була тут, але нижче її вже скасовано
   (appearance:auto + background-image:none) на користь нативної, як у «Моїх
   подіях». Від неї лишався тільки padding-right:2rem !important — місце під
   стрілку, якої більше немає: текст у полі стояв на 32px від правого краю
   замість 10.4px, тож «Формат події» й «Рівень гри» виглядали ширшими
   всередині за ті самі поля в кабінеті. Правило видалено цілком. */

/* ---- Капсули картки: один wrap-потік (розкладка /events) ------------------
   Категорія й далі формат/вік/рівень стоять у тому самому контейнері, що дата
   й час, тож перенос працює природно: коли категорія не влазить у рядок, вона
   переходить на наступний, а решта капсул тягнеться за нею, а не починає ще
   один рядок (так було з окремим .event-formatmeta).
   margin-bottom тут заміняє суму відступів двох колишніх блоків — щоб зазор до
   заголовка картки лишився таким самим. */
.event-submeta--inline {
  margin-bottom: 0.85rem;
}

/* ---- Підвантаження результатів ------------------------------------------- */
.is-loading [data-events-filter-target="results"] {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* ---- Останні переглянуті (aside) ----------------------------------------- */
/* Скролбар — той самий, що у випадайках кабінету (.custom-select-options,
   cabinet.css): завжди видимий, синій thumb на світлій доріжці. Тримати значення
   синхронними з тим правилом; cabinet.css на /events не підключений, тож
   спільного джерела для них немає. */
/* contain:size — .rv-list живе в flex-ланцюжку (flex:1;min-height:0 тут же
   inline, events/index.html.erb), який МАВ би не давати вмісту впливати на
   розмір предків, але grid-розкладка сторінки (events.css, 981-1189px і
   641-980px запити) все одно рахує "auto"-висоту РЯДКА через MAX-CONTENT
   внесок дітей — а max-content для flex:1;min-height:0 у гіпотетично
   безмежному просторі якраз і Є повний природний розмір (увесь
   нескручений список, не той куций, що дає реальне flex-стискання під
   реальним обмеженням). contain:size явно каже "розмір НЕ залежить від
   вмісту" — вміст перестає просочуватись у розрахунок висоти РЯДКА зовсім,
   а сам розмір .rv-list як і раніше дає flex:1 ЗЗОВНІ. Без цього картка
   останніх переглянутих (і сусідня статистика поруч — обидві розтягуються
   одна під одну) роздувалась під повний список (7 подій ≈ 500px+ замість
   природних ~250px). */
.rv-list {
  contain: size;
}

.rv-empty {
  margin: 0;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}
.rv-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(8, 81, 184, 0.12);
  box-shadow: 0 6px 16px rgba(8, 81, 184, 0.06);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(8, 81, 184, 0.12);
}
.rv-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
}
.rv-card-dot {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, #0851b8, #2b7cff);
  flex-shrink: 0;
}
.rv-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  /* flex+min-width:0 — щоб тіло стискалось у картці, інакше довга назва розпирала б
     її замість того, щоб обрізатись трикрапкою. */
  flex: 1;
  min-width: 0;
}
/* Рядок «назва + категорія». Категорія закріплена справа скраю картки
   (justify-content:space-between — розсуває пару на всю ширину рядка, а не
   лишає її впритул за короткою назвою); gap — мінімальна підлога відступу,
   на випадок коли назва достатньо довга й без space-between уже впритул
   торкалась би категорії. Категорія має лишатись цілою за будь-якої довжини
   назви, тож стискається саме назва (flex: 1 + min-width: 0 вмикають обрізання;
   без min-width:0 flex-елемент не стискається менше за свій вміст). */
.rv-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}
.rv-card-title {
  color: #1f241d;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  /* Стискається (і обрізається трикрапкою) лише коли місця бракує — назва +
     категорія разом ширші за рядок; min-width:0 обовʼязковий — без нього
     flex-елемент не стискається менше за свій вміст. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-card-cat {
  flex: 0 0 auto;   /* ніколи не стискається й не обрізається */
  color: #0851b8;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.rv-card-desc {
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Пагінація ------------------------------------------------------------
   Стилі кнопок — .pagination-row/.pagination-btn/.pagination-ellipsis
   (events.css), 1-в-1 "Мої події" кабінету. Тут лишається лише .events-pagination
   як alias-обгортка (events/_pagination.html.erb навішує обидва класи). */

/* ---- Поля/кнопки/сортування фільтрів — точна відповідність «Мої події» ----
   events.css має власні (частково !important) правила для .filter-field
   input/select (12px радіус, сірувата рамка на select, кастомна стрілка) —
   тут перебиваємо їх під ті самі значення, що дає cabinet.css у кабінеті. */
/* :not([type="checkbox"]) — правило писане під ТЕКСТОВІ поля (рамка, фон,
   padding, min-height:40px). Чекбокси («Лише перевірені», «Куди йдуть друзі»)
   під нього теж підпадали: квадратик роздувався до 40px заввишки й тягнув за
   собою всю плашку-обгортку — 61px проти 40px у сусідніх полів. */
.filter-field input:not(.time-manual-input):not(.radius-slider):not([type="checkbox"]),
.filter-field select {
  /* !important лише на властивостях, які events.css й так задає через
     !important для input (радіус/фон/рамка/тінь/колір/вага) — решта звичайні
     правила, щоб інлайн-стилі окремих полів (напр. менше Сортування, 32px)
     і далі могли їх перебивати, як у кабінеті. */
  border: 1px solid rgba(8, 81, 184, 0.18) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: none !important;
  color: #1f241d !important;
  font-weight: 700 !important;
  min-height: 40px;
  font-size: 0.86rem;
  padding: 0.5rem 0.65rem;
}
/* Мої-події не стилізують стрілку select власноруч (нативна, без appearance:none) —
   прибираємо кастомну блакитну стрілку, щоб вигляд збігався. */
.filter-field select {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  background-image: none !important;
  padding-right: 0.65rem;
}

/* ---- Ручний ввід часу/віку, помилки полів, проміжок дат -------------------
   Портовано з фільтра «Мої події» кабінету (cabinet.css) — той самий вигляд
   і ті самі правила, застосовані до .filter-field замість .create-field. */
.field-error-msg {
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.3rem;
  display: none;
}
.filter-field.has-error .field-error-msg {
  display: block;
}
.filter-field.has-error input:not(.time-manual-input),
.filter-field.has-error .custom-select-trigger,
.filter-field.has-error .time-input-box {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important;
}

input[type="number"].no-spinners::-webkit-inner-spin-button,
input[type="number"].no-spinners::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"].no-spinners {
  -moz-appearance: textfield;
}

.time-input-box {
  position: relative;
  width: 100%;
  border: 1px solid rgba(8, 81, 184, 0.2);
  border-radius: 8px;
  padding: 0 0.85rem;
  display: flex;
  align-items: center;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  /* height (не лише min-height) — вміст (інпут + іконка годинника) інакше
     розтягував бокс на 2px вище за фактичну висоту решти полів (Дата тощо). */
  height: 40px;
  min-height: 40px;
}
.time-input-box:focus-within {
  /* Той самий контур/тінь/підйом, що .custom-select-trigger.open (поле Дата) —
     суцільна синя обводка по контуру, блакитна тінь ширшим кільцем далі й той
     самий підйом на 1px (transform), який раніше був відсутній лише тут. */
  border-color: #0851b8;
  box-shadow: 0 0 0 4px rgba(8, 81, 184, 0.15), 0 6px 16px rgba(8, 81, 184, 0.1);
  transform: translateY(-1px);
}
/* Значення один-в-один із #mev-filter-time у «Мої події» (заміряні на живій
   сторінці кабінету), бо саме там еталон вигляду.
   Селектор з #event-filter-panel обовʼязковий: events.css має правило
   "#event-filter-panel .filter-field input" (1,2,1), яке перебивало і голе
   ".time-manual-input", і ".time-input-box .time-manual-input" попри !important —
   звідти інпут отримував НЕПРОЗОРИЙ білий фон і закривав ним лінії рамки
   контейнера, через що контур виглядав обрізаним посередині.
   Ключ до рамки — саме прозорий фон, а не зменшена висота: у кабінеті інпут
   теж вищий за внутрішню частину боксу. min-height:38px = рівно внутрішня
   висота нашого 40px боксу (мінус рамки), тож інпут вписується без переповнення.
   border-radius:8px (як у кабінеті) замість успадкованих із events.css 12px —
   інакше на низькому інпуті радіус обрізав підсвітку виділеного тексту в «капсулу». */
#event-filter-panel .time-input-box .time-manual-input,
.time-input-box .time-manual-input {
  border: none !important;
  background: transparent !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: #1f241d;
  width: 100%;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: text;
}
#event-filter-panel .time-input-box .time-manual-input:focus,
.time-input-box .time-manual-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Поле «Пошук» (Усі події / Збережені): просвіт між лупою і текстом такий
   самий, як у пошуку розділу «Друзі» (.friends-search-*, cabinet.css). Там
   іконка стоїть абсолютно на left:0.8rem при ширині 18px, а текст починається
   з padding-left:2.5rem ПЛЮС 1px рамки інпута — тобто 41 − (12.8 + 18) =
   10.2px = 0.6375rem. Тут .time-input-box — flex БЕЗ gap, тому інпут ішов
   упритул до лупи.
   Ставимо column-gap на сам контейнер, а не margin/padding на інпут: правило
   "#event-filter-panel .time-input-box .time-manual-input" вище має і
   padding:0 !important, і margin:0 !important при специфічності (1,2,0) —
   перебити його з боку інпута вийшло б лише нарощуванням !important-селекторів.
   column-gap на .time-input-box не задає ніхто, тож конкуренції немає зовсім.
   :has(#events-filter-q) звужує правило рівно до поля пошуку — той самий бокс
   використовують поля часу (іконка годинника), їх просвіт лишається як був. */
.time-input-box:has(#events-filter-q) {
  column-gap: 0.6375rem;
}

/* Проміжок дат (той самий календар, що у фільтрі «Мої події»): дні МІЖ
   обраними "від"/"до" — блідіша заливка без округлення, суцільна смуга. */
.cal-day.in-range {
  background: rgba(8, 81, 184, 0.14);
  border-radius: 0;
  color: #0851b8;
}

/* ---- Порожній список ------------------------------------------------------ */
.events-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: #4a5648;
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(8, 81, 184, 0.25);
  border-radius: 16px;
}
.events-empty strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  color: #1f241d;
  margin-bottom: 0.35rem;
}

/* ── Радіус «поруч зі мною»: повзунок 1…50 км (стиль як у Bumble) ──────────
   Компактне поле в рядку дій фільтра: сам range + підпис «N км» праворуч.
   Ліву (заповнену) частину треку малює JS градієнтом на фоні елемента
   (events_page_filters.js #paintRadius). */
/* Радіус пошуку — вертикальний блок (варіант 2): рядок «підпис із геопіном +
   значення-пігулка», під ним повзунок на всю ширину поля, ще нижче — краї
   діапазону «1 км … 50 км». Стоїть у рядку дій поруч із сортуванням/кнопкою. */
.radius-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto; /* тягнеться, заповнюючи вільне місце рядка (замість 240px) */
  min-width: 220px;
}
.radius-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.radius-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #1f241d;
  white-space: nowrap;
}
.radius-label svg {
  color: #0851b8;
  flex-shrink: 0;
}
/* Поточне значення — помітна світло-синя пігулка. */
.radius-value {
  background: rgba(8, 81, 184, 0.1);
  color: #0851b8;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.radius-ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  font-weight: 700;
  color: #8a94a3;
}
/* Радіус неактивний, поки не ввімкнено «поруч зі мною» (геолокацію): без точки
   відліку фільтр за відстанню безглуздий. Приглушуємо весь блок і глушимо
   вказівник, а JS ще й ставить input[disabled] (events_page_filters.js). */
.radius-field.is-disabled {
  opacity: 0.45;
}
.radius-field.is-disabled .radius-slider {
  cursor: not-allowed;
}
.radius-field.is-disabled .radius-slider::-webkit-slider-thumb {
  cursor: not-allowed;
}
.radius-field.is-disabled .radius-slider::-moz-range-thumb {
  cursor: not-allowed;
}
/* Скидаємо «коробку поля», яку .filter-field input накидає через !important
   (events.css: білий фон, рамка, тінь, min-height 40px) — інакше повзунок
   виглядає як поле вводу, а JS-градієнт заливу програє !important-фону.
   Вища специфічність (.filter-field input.radius-slider) + !important б'ють ті
   правила; сам синій залив лівої частини JS ставить інлайн із important —
   інлайн-important перебиває навіть цей !important-фон. */
.filter-field input.radius-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  height: 8px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: #d5dee9 !important; /* JS замінює на градієнт (inline !important) */
  box-shadow: none !important;
  cursor: pointer;
  outline: none;
}
/* Трек для webkit (Chrome/Safari, зокрема iOS). Без цього правила висоту треку
   визначав UA — і вона НЕ дорівнювала 8px, заданим на самому input. А
   margin-top у thumb нижче компенсує різницю саме з ВИСОТОЮ ТРЕКУ, не input:
   без явних 8px тут компенсація −7px прикладалась не до тієї бази, і кружечок
   сидів нижче лінії. Firefox цієї проблеми не мав — у нього ::-moz-range-track
   із height:8px описаний нижче був завжди.
   Фон прозорий — саму смужку (і синій залив лівої частини) малює background
   самого input: його ставить paintRadius (events_page_filters.js) інлайн-
   градієнтом. Той самий підхід, що вже застосований для ::-moz-range-track. */
.radius-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: transparent;
  border: none;
}
/* Бігунок — синій кружок із білою облямівкою й делікатною тінню. */
.radius-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  /* Глобальне `*, *::before, *::after { box-sizing: border-box }` (events.css)
     сюди НЕ дістає: `*` не матчить UA-псевдоелементи скролбарів/повзунків, а
     `*::before/::after` — це рівно ті два псевдоелементи, не цей. Тож без явного
     рядка нижче thumb лишався content-box і малювався 22 + 3 + 3 = 28px, а не 22.
     Компенсація margin-top рахована під 22px ((8 − 22) / 2 = −7), тому кружечок
     сидів на 3px нижче — лінія треку проходила вище його центру. */
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0851b8;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(8, 81, 184, 0.35);
  cursor: pointer;
  margin-top: -7px; /* центруємо на треку 8px: (8 − 22) / 2 */
}
.radius-slider::-moz-range-thumb {
  /* Те саме й для Firefox: там кружечок центрує сам рушій, але без border-box
     він теж малювався 28px замість заявлених 22 — тобто помітно більший, ніж
     у Chrome/Safari. */
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0851b8;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(8, 81, 184, 0.35);
  cursor: pointer;
}
/* Firefox: прозорий трек, щоб проступав фон-градієнт елемента (заповнення). */
.radius-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: transparent;
}
.radius-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(8, 81, 184, 0.2) !important;
}

/* М'яка інлайн-підказка «Поруч зі мною» замість нативного alert(): легка
   плашка в кольорах застосунку. Ховається атрибутом [hidden] із JS. */
.near-me-hint {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25);
  color: #c0392b;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 320px;
}
.near-me-hint[hidden] {
  display: none;
}

/* === Телефон: рядок дій фільтра — кнопки ПЕРЕД сортуванням, в один рядок ===
   Порядок у DOM лишається «сортування → кнопки» (на ПК саме він і потрібен:
   сортування ліворуч, кнопки праворуч у тому ж рядку). На телефоні блоки й так
   переносяться один під одний, тож міняємо лише візуальний порядок через order —
   без дублювання розмітки.
   Усередині блоку кнопок: лічильник («Знайдено: N») окремим рядком зверху, а
   «Очистити фільтри» і «Всі фільтри» ділять наступний рядок навпіл — інакше на
   вузькому екрані третій елемент зривав другу кнопку на власний рядок (саме це
   й було видно на скріні).
   flex-direction тут дублює те, що events.css робить у своєму ≤620px-блоці:
   цей файл підключається ПІСЛЯ events.css, тож правило поширює ту саму
   вертикальну розкладку на весь діапазон до 640px і порядок читається однаково. */
@media (max-width: 640px) {
  .filter-actions {
    flex-direction: column;
    /* !important — у .filter-actions інлайновий align-items:center (розмітка),
       а інлайн перебиває звичайний селектор. Без цього в діапазоні 621…640px
       колонка лишалась центрованою: блоки стискались до вмісту й «плавали»
       посередині (кнопки й сортування вужчі за панель), тоді як нижче 620px
       усе було на всю ширину — там events.css має власне правило з
       !important. Тепер обидва діапазони поводяться однаково. */
    align-items: stretch !important;
  }
  /* Те саме, що events.css робить у своєму ≤620px-блоці: діти — на всю ширину
     панелі. Ширина тут cross-axis (контейнер — колонка), тож flex-basis її не
     задає, потрібен саме width. */
  .filter-actions > div { width: 100% !important; }
  /* Блоки — знову кожен на всю ширину: на ПК .filter-actions-sort і
     .filter-actions-buttons мають flex:0 1 auto (розмітка), щоб ділити один
     рядок, а тут вони мусять стояти один під одним. */
  .filter-actions > .filter-actions-sort,
  .filter-actions > .filter-actions-buttons,
  .filter-actions > .filter-actions-near { flex: 1 1 100% !important; }
  .filter-actions > .filter-actions-buttons { order: 1; }
  .filter-actions > .filter-actions-near    { order: 2; }
  .filter-actions > .filter-actions-sort    { order: 3; }
  .filter-actions > .filter-actions-buttons {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }
  /* Обидві кнопки — рівні половини рядка. flex-basis:0 (не 140px, як у
     events.css нижче за специфічністю), щоб ділились точно навпіл незалежно
     від довжини підпису. */
  .filter-actions > .filter-actions-buttons > .event-btn {
    flex: 1 1 0 !important;
    min-width: 0;
    /* !important — у самих кнопок інлайн padding:0.4rem 1.25rem (розмітка),
       а з ним підпис «Очистити фільтри» не влазить у половину рядка й
       переноситься в два рядки (заміряно: 50.8px проти 34px у сусідки).
       nowrap страхує від переносу на дуже вузьких екранах. */
    padding: 0.4rem 0.6rem !important;
    white-space: nowrap;
    /* Контейнер має інлайн align-items:center — при різній висоті кнопки
       з'їжджали б одна відносно одної. align-self на самій кнопці інлайну
       не має, тож перебиває без !important. */
    align-self: stretch;
  }
  /* Порядок кнопок — такий самий, як на ПК: «Всі фільтри» ліворуч,
     «Очистити фільтри» праворуч. Раніше тут вони мінялись місцями; юзер
     попросив однаково на всіх адаптивах. Порядок у DOM уже правильний, тож
     явні order лише страхують від успадкування чужих правил. */
  .filter-actions > .filter-actions-buttons > .event-btn:not(.event-btn--ghost) { order: 1; } /* Всі фільтри — перша */
  .filter-actions > .filter-actions-buttons > .event-btn--ghost { order: 2; } /* Очистити фільтри — друга */

  /* --- Порядок усередині блоку «поруч зі мною» ---
     Треба: кнопки фільтрів → «Поруч зі мною» → радіус (із підписами 1 км/50 км)
     → «Сортування». Перші три блоки вже розставлені order'ами вище; тут лише
     розкладаємо вміст .filter-actions-near вертикально — кожен елемент на всю
     ширину, інакше вони тулилися б по кілька в рядок. */
  .filter-actions > .filter-actions-near { flex-wrap: wrap; }
  .filter-actions-near > #events-near-me-btn { order: 1; }
  .filter-actions-near > .radius-field       { order: 2; }
  .filter-actions-near > .near-me-hint       { order: 3; }
  .filter-actions-near > #events-near-me-btn,
  .filter-actions-near > .radius-field,
  .filter-actions-near > .near-me-hint { flex: 1 1 100%; }
  /* «Поруч зі мною» — тієї ж висоти, що «Всі фільтри» (34px). У кнопки інлайн
     min-height:32px (розмітка), тож без !important не перебити. */
  .filter-actions-near > #events-near-me-btn {
    min-height: 34px !important;
    justify-content: center;
  }
  /* Два відступи мусять дорівнювати еталону «поле Пошук → заголовок Категорія»
     = 1.25rem (це gap самої форми-панелі; заміряно на живій розкладці — 20px).
     Рахуємо різницею, бо частину відступу вже дає gap контейнера:
     1) кнопки фільтрів → «Поруч зі мною»: .filter-actions має інлайн gap 0.75rem,
        а «Поруч зі мною» — перший елемент блоку .filter-actions-near;
     2) підписи 1 км/50 км → «Сортування»: між ними тепер межа двох ПРЯМИХ
        дітей .filter-actions (near і sort), тобто той самий gap 0.75rem —
        раніше різниця рахувалась від 0.45rem, бо обидва жили в одному блоці.
     Інлайн-gap перебити не можна без !important, тож додаємо різницю margin'ом. */
  .filter-actions > .filter-actions-near { margin-top: calc(1.25rem - 0.75rem); }
  .filter-actions > .filter-actions-sort { margin-top: calc(1.25rem - 0.75rem); }
}

/* === Від 641px і ширше: сортування й кнопки ТРИМАЮТЬСЯ одного рядка ========
   Природно вони перестають вміщатись близько 1046px (заміряно: рядку дій
   треба 628px = сортування 326 + gap 12 + кнопки 290), і flex-wrap зносив
   кнопки на власний рядок. Юзер попросив інше: тримати обидва в одному рядку,
   а місце вивільняти ЗВУЖЕННЯМ поля сортування.

   Механіка: кнопкам забороняємо стискатись (їхні підписи мали б лишатись
   цілими), а полю сортування знімаємо авто-мінімум — min-width:0. Саме він
   (для flex-елемента min-width:auto = min-content) і не давав селекту стати
   вужчим за найдовший пункт списку, через що стискалось усе інше або рядок
   переносився. Інлайнові 240px у розмітці лишаються БАЖАНОЮ шириною: поки
   місця вистачає, поле саме таке, і звужується тільки за потреби.

   Нижній поріг — 120px: далі текст пункту вже нечитабельний, і тоді нехай
   спрацьовує звичайний flex-wrap (кнопки підуть на наступний рядок), а не
   з'їдається поле до нуля.

   Нижче 641px працює телефонний блок вище — там своя вертикальна колонка. */
@media (min-width: 641px) {
  .filter-actions > .filter-actions-buttons {
    /* Інлайн у розмітці — flex:0 1 auto, тобто стискатись МОЖНА; тут
       забороняємо, інакше першими б поїхали підписи кнопок. */
    flex-shrink: 0 !important;
  }
  /* flex-basis 0 (замість auto з розмітки) — ключовий момент. Перенос рядка
     flexbox вирішує за ГІПОТЕТИЧНИМ розміром елемента, тобто за flex-basis, а
     не за тим, до чого його ще можна стиснути: із basis:auto блок сортування
     «важив» усі свої 326px, не влазив разом із кнопками — і рядок рвався ще
     до будь-якого стискання. З basis:0 він у рядок влазить завжди, а далі
     grow:1 віддає йому весь залишок ширини після кнопок; звужується при
     цьому саме поле (max-width:240px — стеля, min-width:120px — підлога). */
  .filter-actions > .filter-actions-sort { flex: 1 1 0 !important; }
  .filter-actions-sort .filter-sort-inline { min-width: 0; }
  .filter-actions-sort .filter-field {
    min-width: 120px;
    max-width: 240px;
  }
  .filter-actions-sort .filter-field select {
    min-width: 0;
    width: 100%;
  }
}

/* «Знайдено: N» — окремий рядок у самому низу блоку фільтрів (раніше стояв
   у рядку кнопок).
   position:relative + z-index обов'язкові: усередині форми фільтрів лежить
   декоративний шар (фонова картинка, position:absolute; inset:0; z-index:1 —
   events/index.html.erb), і будь-який непозиційований блок форми малюється ПІД
   ним. Саме тому рядок був невидимий.
   Але й 15 (як у сусідніх блоків) не годиться: .filter-actions теж 15, а цей
   рядок іде ПІСЛЯ нього в DOM — за рівних z-index виграє пізніший елемент, і
   лічильник лягав поверх розкритої випадайки «Сортування», що живе всередині
   .filter-actions. Тому значення має бути в вікні 2…14: вище декоративного
   шару (1), нижче .filter-actions (15). 5 — із запасом з обох боків. */
.filter-found-row {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  /* Відступ ПІД рядком — такий самий, як над ним. Зверху 24px дає власний
     margin-bottom сітки фільтрів (.events-main-grid, 1.5rem, розмітка), знизу
     ж не було нічого: перемикач «Список / Карта» стояв упритул. */
  margin-bottom: 1.5rem;
}

/* ── Чекбокс-поля фільтра («Лише перевірені», «Куди йдуть друзі») ───────────
   Друге джерело тієї самої біди: events.css має власне
   .filter-field input { min-height: 40px } (писане під текстові поля). Воно
   роздувало сам квадратик до 40px, а з ним і плашку-обгортку — 61px проти
   40px у сусідніх полів. Виключення в правилі вище знімає лише варіант із
   events_filters.css, тож мінімум скидаємо ще й тут, явно. */
.filter-field input[type="checkbox"] {
  min-height: 0;
  width: 16px;
  height: 16px;
}

/* Плашка-чекбокс у фільтрах («Лише перевірені», «Куди йдуть друзі»). Обгортка —
   теж <label>, тож на неї падало правило .filter-field label (events.css),
   писане під МАЛЕНЬКІ підписи над полями: вага 900, letter-spacing 0.04em,
   text-shadow і сірувато-зелений колір. Через це підпис усередині плашки
   виглядав жирнішим і ширшим за текст сусідніх полів (і навіть переносився в
   два рядки, роздуваючи поле). Вирівнюємо під .filter-field input/select —
   ті самі шрифт, кегль, вага й колір. */
.filter-field label.filter-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  cursor: pointer;
  font-family: var(--font-body) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #1f241d !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
}
/* Рамка/фон/підпис зверху цим двом фільтрам не потрібні — лишається сам
   квадратик і текст праворуч від нього. .filter-field (сітка й кламп
   «згорнутого» блоку, nth-child вище) тримається на обгортці, тож гасимо
   тільки вигляд. */
.filter-check-field {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Нативний вигляд чекбокса на iOS/Android — кружечок (Safari) або власна
   галка виробника, і жоден accent-color цього не міняє: юзер бачив на телефоні
   круглі позначки замість тих самих квадратів із заокругленими кутами, що на
   ПК. Тому малюємо квадрат самі (appearance:none) — ті самі значення, що в
   .hobby-checkbox вище цього файлу (16px, радіус 4px, рамка 1.5px, залитий
   #0851b8 у позначеному стані), щоб позначки в фільтрах виглядали однаково і
   між собою, і на всіх пристроях. */
#event-filter-panel .filter-check input[type="checkbox"] {
  /* !important — по цьому ж елементу б'ють правила під ТЕКСТОВІ поля фільтра
     (.filter-field input у events.css має border-radius:12px, а
     #event-filter-panel .filter-field input — ще й id-селектор, який
     звичайним класом не перебити). Без них квадратик виходив 26x18 із
     радіусом 12px, тобто візуально тумблером. */
  appearance: none !important;
  -webkit-appearance: none !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid rgba(8, 81, 184, 0.32) !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#event-filter-panel .filter-check input[type="checkbox"]:checked {
  border-color: #0851b8 !important;
  background-color: #0851b8 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: 11px 11px !important;
  background-repeat: no-repeat !important;
}
#event-filter-panel .filter-check:hover input[type="checkbox"] {
  border-color: #0851b8 !important;
}