@charset "UTF-8";
/* design v4.0 */
/* ============================================================================
   section_filters_v2.css — НОВОСТИ-НОВЫЙ-ДИЗАЙН-ФИЛЬТРОВ-1
   (тег NEWS-FILTER-REDESIGN-1, 05.10.2026).

   ОБЩИЙ БЛОК ФИЛЬТРОВ РАЗДЕЛА (образец — «Новости»).

   Слова владельца 05.10.2026: «Фильтры, сортировки - дизайн никуда не
   годится… Блок занимает пол-страницы… Делаем новый дизайн… Делаем блок
   скрытым. Все без кнопок. капс-лок убираем и первые буквы тоже строчные.
   Исключение - Название города - первая буква Прописная… Шрифт наш
   стандартный, но размер чуть больше чем внутри кнопок, цвет голубой.»

   ЧТО ЗДЕСЬ ЗАКРЕПЛЕНО:
     • пункты фильтров — ТЕКСТОВЫЕ ССЫЛКИ, без рамок, скруглений и заливки
       (никаких «таблеток» .ro-button в этом блоке больше нет);
     • регистр: текст пишется строчными как есть; капс даёт ТОЛЬКО заголовок
       раздела (.section-header, он общий для всего сайта) — здесь мы его
       не отменяем и не добавляем;
     • шрифт — стандартный 'Proxima Nova Regular' (правило 11а: начертание
       задаётся ТОЧНЫМ ИМЕНЕМ семейства, font-weight не используем);
       кегль 18px — чуть больше, чем внутри кнопок (у .ro-button 16px);
     • цвет — голубой акцент проекта #00aeef (он же у .ro-button);
     • панель фильтров СКРЫТА по умолчанию (атрибут hidden) и открывается
       ссылкой «фильтры»; в закрытом виде блок занимает ОДНУ строку;
     • тап-зоны всех ссылок и кнопок не меньше 44px (правило проекта).

   Файл в UTF-8, перевод строки LF. Только классы .cb-flt* — чужие правила
   (filter-panel, ro-button, puzzle-item из common.css / news_articles.css)
   не переопределяются, кроме одного места: вид «строчками» для карточек
   ленты новостей (ниже, раздел 6).
   ========================================================================= */

/* --- 1. блок целиком ----------------------------------------------------- */
.cb-flt {
  margin: 0 0 18px;
  font-family: 'Proxima Nova Regular', Arial, sans-serif;
}

/* --- 2. строка заголовка раздела ---------------------------------------- */
/* .section-header (common.css:45) даёт капс, кегль 30pt и начертание
   Condensed Bold — это заголовок «НОВОСТИ», его не меняем. Меняем только
   раскладку: заголовок слева, «фильтры» и переключатель города справа. */
.section-header.cb-flt-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cb-flt-title {
  display: inline-block;
}

/* число материалов в заголовке — «число в заголовке», тот же список */
.cb-flt-total {
  display: inline-block;
  margin-left: 12px;
  font-family: 'Proxima Nova Regular', Arial, sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: #8a8f98;
  text-transform: none;
  vertical-align: middle;
}

.cb-flt-headright {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-transform: none;
  font-family: 'Proxima Nova Regular', Arial, sans-serif;
  font-size: 18px;
  line-height: 24px;
}

/* --- 3. ссылка «фильтры» (открывает скрытую панель) --------------------- */
.cb-flt-toggle,
.cb-flt-city-item,
.cb-flt-link,
.cb-flt-view,
.cb-flt-search-btn {
  color: #00aeef;
  text-decoration: none;
}

.cb-flt-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 44px;
  padding: 0 12px 0 0;
  font-size: 18px;
  line-height: 24px;
}

/* уголок «открыть/закрыть» — рисуем рамками, без картинок и шрифтов */
.cb-flt-toggle:after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 7px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #00aeef;
}

.cb-flt-toggle.cb-flt-open:after {
  border-top: 0;
  border-bottom: 6px solid #00aeef;
}

.cb-flt-toggle:hover,
.cb-flt-city-item:hover,
.cb-flt-link:hover,
.cb-flt-view:hover,
.cb-flt-search-btn:hover {
  text-decoration: underline;
}

/* --- 4. переключатель «мой город <Город> | все города» ------------------ */
.cb-flt-city {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.cb-flt-city-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  font-size: 18px;
  line-height: 24px;
}

/* --- 5. панель фильтров: СКРЫТА по умолчанию, одна видимая строка ------- */
.cb-flt-panel {
  margin: 2px 0 6px;
}

.cb-flt-panel[hidden] {
  display: none;
}

.cb-flt-group {
  display: block;
  padding: 0;
}

.cb-flt-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: 18px;
  line-height: 24px;
}

/* активный пункт — тем же голубым, но другим начертанием (правило 11а) */
.cb-flt-on {
  font-family: 'Proxima Nova Bold', Arial, sans-serif;
}

.cb-flt-sep {
  display: inline-block;
  margin: 0 6px;
  color: #bfe9fb;
  font-size: 18px;
  line-height: 24px;
}

.cb-flt-count {
  display: inline-block;
  margin-left: 5px;
  color: #7ec9ea;
  font-family: 'Proxima Nova Regular', Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
}

/* --- 6. видимая строка: сортировки, значки вида, поиск ------------------ */
.cb-flt-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.cb-flt-sorts,
.cb-flt-views {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.cb-flt-views {
  margin-left: 4px;
}

.cb-flt-right {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: auto;
}

/* значки «строчки» / «карточки» — рисуем рамками, без картинок */
.cb-flt-view {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.cb-flt-ico {
  display: inline-block;
  position: relative;
  width: 22px;
  height: 16px;
}

.cb-flt-ico-rows:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 2px;
  background: #9adcf7;
  box-shadow: 0 5px 0 #9adcf7, 0 10px 0 #9adcf7;
}

.cb-flt-ico-cards:before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 9px;
  height: 6px;
  background: #9adcf7;
  box-shadow: 12px 0 0 #9adcf7, 0 8px 0 #9adcf7, 12px 8px 0 #9adcf7;
}

.cb-flt-view.cb-flt-on .cb-flt-ico-rows:before {
  background: #00aeef;
  box-shadow: 0 5px 0 #00aeef, 0 10px 0 #00aeef;
}

.cb-flt-view.cb-flt-on .cb-flt-ico-cards:before {
  background: #00aeef;
  box-shadow: 12px 0 0 #00aeef, 0 8px 0 #00aeef, 12px 8px 0 #00aeef;
}

/* поиск по разделу + кнопка «найти» (тоже текстом, без «таблетки») */
.cb-flt-search {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  /* ФИЛЬТРЫ-РАСКАТКА-1: своя часть строки поиска у раздела («Места» —
     список подсказок) позиционируется от самой формы. */
  position: relative;
}

.cb-flt-search-input {
  box-sizing: border-box;
  width: 240px;
  max-width: 55vw;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-family: 'Proxima Nova Regular', Arial, sans-serif;
  font-size: 16px;
}

.cb-flt-search-btn {
  min-width: 44px;
  min-height: 44px;
  margin-left: 8px;
  padding: 0 6px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Proxima Nova Regular', Arial, sans-serif;
  font-size: 18px;
  line-height: 24px;
}

/* --- 7. вид «строчками» для ленты новостей ------------------------------ */
/* Значок «строчки» переключает ленту: карточка занимает всю ширину, обложка
   слева, текст справа. Правило ограничено разделом #news, чтобы карточки
   статей и других разделов не поехали. */
#news .puzzle-container.cb-flt-view-list .puzzle-item-news {
  width: 100%;
  overflow: hidden;
}

#news .puzzle-container.cb-flt-view-list .puzzle-item-news .puzzle-item-image {
  float: left;
  width: 240px;
  height: 140px;
  margin: 0 18px 8px 0;
  overflow: hidden;
}

#news .puzzle-container.cb-flt-view-list .puzzle-item-news .puzzle-item-image img {
  width: 100%;
  height: 100%;
  min-width: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

#news .puzzle-container.cb-flt-view-list .puzzle-item-news .puzzle-item-info-container-news {
  margin-top: 0;
  overflow: hidden;
}

/* --- 8. телефон: строки переносятся, переполнения нет ------------------- */
@media (max-width: 900px) {
  .section-header.cb-flt-head {
    display: block;
  }

  .cb-flt-headright {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-top: 4px;
  }

  .cb-flt-toggle {
    padding-right: 8px;
  }

  .cb-flt-right {
    width: 100%;
    margin-left: 0;
  }

  .cb-flt-search {
    width: 100%;
  }

  .cb-flt-search-input {
    width: auto;
    max-width: none;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }

  #news .puzzle-container.cb-flt-view-list .puzzle-item-news .puzzle-item-image {
    width: 120px;
    height: 84px;
    margin-right: 12px;
  }
}

/* ============================================================================
   NEWS-VIEW-ICONS-ONLY-1 (НОВОСТИ-ВИД-БЕЗ-СЛОВ-1, 06.10.2026).
   Слова владельца: «вот так, но без слов» — переключатель вида «карточками /
   списком» повторяет снимок владельца: ДВА СЕГМЕНТА, активный голубой с белым
   значком, неактивный белый с голубым значком, углы скруглены, высота одна.
   Видимых слов нет; сами слова остались только в подсказках title/aria-label
   (их даёт lib/sectionfilterslib.php).

   Правила ниже касаются ТОЛЬКО .cb-flt-views/.cb-flt-view — остальная часть
   блока фильтров не меняется. Селекторы той же или большей точности, чем
   выше, но идут ПОЗЖЕ, поэтому побеждают без !important.
   ========================================================================= */
.cb-flt-views {
  border: 2px solid #00aeef;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
}

.cb-flt-view {
  min-width: 44px;
  min-height: 44px;
  background-color: #fff;
}

/* разделитель между сегментами */
.cb-flt-view + .cb-flt-view {
  border-left: 1px solid #00aeef;
}

/* активный сегмент — голубой */
.cb-flt-view.cb-flt-on,
.cb-flt-view.cb-flt-on:hover {
  background-color: #00aeef;
}

.cb-flt-view:hover {
  background-color: #d0f2ff;
}

/* значки: неактивный — голубой, активный — белый */
.cb-flt-view .cb-flt-ico-rows:before {
  background: #00aeef;
  box-shadow: 0 5px 0 #00aeef, 0 10px 0 #00aeef;
}

.cb-flt-view .cb-flt-ico-cards:before {
  background: #00aeef;
  box-shadow: 12px 0 0 #00aeef, 0 8px 0 #00aeef, 12px 8px 0 #00aeef;
}

.cb-flt-view.cb-flt-on .cb-flt-ico-rows:before {
  background: #fff;
  box-shadow: 0 5px 0 #fff, 0 10px 0 #fff;
}

.cb-flt-view.cb-flt-on .cb-flt-ico-cards:before {
  background: #fff;
  box-shadow: 12px 0 0 #fff, 0 8px 0 #fff, 12px 8px 0 #fff;
}

/* ============================================================================
   NEWS-VIEW-ICONS-SEPARATOR-1 (НОВОСТИ-ЗНАЧКИ-ПОСЛЕ-ЧЕРТЫ-1, 06.10.2026).
   Слова владельца: «В Новостях. Значки только после вертикальной черты делаем,
   фон и заливку убираем. Активный режим инвертирует цвет и абрис.»

   ЧТО СДЕЛАНО: правила ниже перебивают блок NEWS-VIEW-ICONS-ONLY-1 выше —
   селекторы той же точности, но идут позже, поэтому !important не нужен.
     • у переключателя вида НЕТ ни рамки-сегмента, ни фона, ни заливки:
       голубые плашки-сегменты убраны совсем (border/background/overflow сняты);
     • сами значки стоят ПОСЛЕ вертикальной черты — её рисует тот же
       <span class="cb-flt-sep">|</span>, что и между «сначала новые» и
       «сначала популярные» (цвет #bfe9fb, кегль 18px, отступы 6px, LF);
       разметка — smarty/templates/include/section_filters_v2.tpl;
     • НЕАКТИВНЫЙ значок — голубая заливка + голубой абрис (сплошной голубой);
     • АКТИВНЫЙ значок — заливка и абрис МЕНЯЮТСЯ МЕСТАМИ: заливка белая,
       абрис голубой, то есть значок читается голубым контуром;
     • слова-подписи (title/aria-label) и тап-зона 44x44 не тронуты.
   Файл в UTF-8, перевод строки LF.
   ========================================================================= */
.cb-flt-views {
  margin-left: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  overflow: visible;
}

/* обёртка «черта + значки»: держит их одним блоком, чтобы на телефоне
   при переносе строки черта не отрывалась от значков */
.cb-flt-viewswrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.cb-flt-view {
  background-color: transparent;
}

/* активный пункт тоже БЕЗ заливки: голубой плашки-сегмента нет */
.cb-flt-view.cb-flt-on,
.cb-flt-view.cb-flt-on:hover {
  background-color: transparent;
}

.cb-flt-view + .cb-flt-view {
  border-left: 0;
}

.cb-flt-view:hover {
  background-color: transparent;
}

.cb-flt-view:hover .cb-flt-ico {
  opacity: .65;
}

/* Старая отрисовка значков (::before с box-shadow) выключена: значки теперь
   собраны из маленьких <i>, у каждого свой фон и свой абрис (border). */
.cb-flt-view .cb-flt-ico-rows:before,
.cb-flt-view .cb-flt-ico-cards:before {
  content: none;
}

/* НЕАКТИВНЫЙ значок: голубая заливка + голубой абрис (сплошной голубой) */
.cb-flt-view .cb-flt-ico i {
  display: block;
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #00aeef;
  border-radius: 1px;
  background: #00aeef;
}

/* ЗНАЧОК-МЕНЮ-КВАДРАТИК-1 (MENU-ICON-SQUARE-LINE-1, 06.10.2026): значок вида
   «строчки» — не три черты, а «квадратик + черта» три раза. Механизм тот же,
   что и был (элементы <i> + их ::before, скругление 1 px): каждый <i> — черта
   14x4 справа, его ::before — квадратик 4x4 слева. Габарит значка 22x16 не
   изменился, поэтому строка фильтров не сдвинулась; цвета те же (#00aeef,
   в активном — белая заливка с голубым абрисом). */
.cb-flt-view .cb-flt-ico-rows i {
  left: 8px;
  width: 14px;
  height: 4px;
}

.cb-flt-view .cb-flt-ico-rows i:before {
  content: "";
  position: absolute;
  left: -9px;
  top: -1px;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  border: 1px solid #00aeef;
  border-radius: 1px;
  background: #00aeef;
}

.cb-flt-view .cb-flt-ico-rows i:nth-child(1) { top: 0; }
.cb-flt-view .cb-flt-ico-rows i:nth-child(2) { top: 6px; }
.cb-flt-view .cb-flt-ico-rows i:nth-child(3) { top: 12px; }
.cb-flt-view .cb-flt-ico-rows i:nth-child(4) { display: none; }

.cb-flt-view .cb-flt-ico-cards i {
  width: 10px;
  height: 7px;
}

.cb-flt-view .cb-flt-ico-cards i:nth-child(1) { left: 0; top: 0; }
.cb-flt-view .cb-flt-ico-cards i:nth-child(2) { left: 12px; top: 0; }
.cb-flt-view .cb-flt-ico-cards i:nth-child(3) { left: 0; top: 9px; }
.cb-flt-view .cb-flt-ico-cards i:nth-child(4) { left: 12px; top: 9px; }

/* АКТИВНЫЙ значок: заливка и абрис МЕНЯЮТСЯ МЕСТАМИ — заливка белая,
   абрис голубой, значок читается голубым контуром. */
.cb-flt-view.cb-flt-on .cb-flt-ico i {
  background: #fff;
  border-color: #00aeef;
}

/* квадратик значка «строчки» в активном виде повторяет черту: белая заливка,
   голубой абрис */
.cb-flt-view.cb-flt-on .cb-flt-ico-rows i:before {
  background: #fff;
  border-color: #00aeef;
}

/* ============================================================================
   ФИЛЬТРЫ-РАСКАТКА-1 (SECTION-FILTERS-ROLLOUT-1, 06.10.2026).
   Раскатка блока на разделы «Афиша», «Фото», «Места». Новых механизмов нет:
   те же классы .cb-flt*, добавлены только:
     • слот действий раздела в строке заголовка (.section-header-actions
       внутри .cb-flt-headright — снимаем чужой float, он там лишний);
     • форма «узких» полей скрытой панели (.cb-flt-xform);
     • своя форма раздела внутри панели (.cb-flt-panel .cb-phf — «Фото»).
   Файл в UTF-8, перевод строки LF.
   ========================================================================= */

/* действия раздела стоят в строке заголовка рядом с «фильтры» и городом */
.cb-flt-head .section-header-actions {
  float: none;
  margin: 0 0 0 14px;
}

.cb-flt-head .header-action {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 44px;
  font-size: 18px;
  line-height: 24px;
}

/* --- форма скрытой панели: узкие поля + «найти» + «сбросить» ------------ */
.cb-flt-xform {
  margin: 6px 0 2px;
}

.cb-flt-xform-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.cb-flt-xinput {
  box-sizing: border-box;
  width: 220px;
  max-width: 55vw;
  height: 44px;
  margin: 0 10px 6px 0;
  padding: 0 12px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-family: 'Proxima Nova Regular', Arial, sans-serif;
  font-size: 16px;
}

.cb-flt-xreset {
  margin-left: 12px;
}

/* --- своя форма раздела внутри скрытой панели («Фото») ------------------ */
.cb-flt-panel .cb-phf {
  margin: 8px 0 2px;
}

@media (max-width: 900px) {
  .cb-flt-head .section-header-actions {
    margin: 4px 0 0;
  }

  /* на телефоне четыре сортировки («популярные | по дате | по названию |
     по заведению») в переносе занимали 2–3 строки; держим их ОДНОЙ строкой
     с горизонтальной прокруткой — высота блока не растёт */
  .cb-flt-sorts {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    max-width: calc(100% - 116px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cb-flt-sorts .cb-flt-link {
    white-space: nowrap;
  }

  /* поле поиска и «найти» — одной строкой (иначе кнопка уезжает вниз) */
  .cb-flt-search {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  /* «фильтры» и переключатель города — на 16 px: тогда они укладываются
     в одну строку и шапка блока не растёт на лишний ряд */
  .cb-flt-headright {
    font-size: 16px;
  }

  .cb-flt-toggle,
  .cb-flt-city-item {
    font-size: 16px;
  }

  .cb-flt-xinput {
    width: 100%;
    max-width: none;
    margin-right: 0;
  }

  .cb-flt-xform-form .cb-flt-search-btn {
    margin-left: 0;
  }
}