/* =====================================================================
 * YARMETRO UI KIT -- КНОПКИ МОБИЛЬНЫХ ФИЛЬТРОВ
 * Файл: local/templates/metro/ui/mobile-filter-kit.css
 * Подключается в header.php ПОСЛЕ mobile-redesign.css.
 *
 * ЭТО СТАНДАРТ. Любая новая группа кнопок в мобильных фильтрах
 * оформляется классами отсюда, а не собственными правилами.
 * Правила словами -- в ui/README.md, читать перед правкой фильтров.
 *
 * КАК ПОЛЬЗОВАТЬСЯ
 *   <div class="ym-mobile-sheet__checks ym-fk-row ym-fk-row--2">
 *       <label><input type="radio" ...><span>Новостройка</span></label>
 *       <label><input type="radio" ...><span>Вторичка</span></label>
 *   </div>
 *
 * ГЛАВНОЕ ПРАВИЛО РЯДА
 *   Кнопки в ряду делят всю ширину поровну и тянутся до краёв листа.
 *   Ряд из двух кнопок выглядит как «Купить / Снять»: две половины,
 *   без пустого места справа. Модификатор выбирается по числу кнопок:
 *   --2 две в ряд, --3 три, --4 четыре, --5 пять.
 *   Если кнопок больше пяти -- это не ряд, а список: --wrap.
 * ===================================================================== */

:root {
    /* размеры и цвета кнопок фильтра -- менять здесь, а не по месту */
    --ym-fk-gap: 8px;
    --ym-fk-height: 44px;
    --ym-fk-radius: 11px;
    --ym-fk-font: 13px;
    --ym-fk-border: #dce2ea;
    --ym-fk-text: #07183f;
    --ym-fk-bg: #fff;
    --ym-fk-active-border: #e7182c;
    --ym-fk-active-text: #b71323;
    --ym-fk-active-bg: #fff7f8;
}

/* --- ряд кнопок --- */
.ym-fk-row {
    display: grid;
    gap: var(--ym-fk-gap);
    width: 100%;
    align-items: stretch;
}
.ym-fk-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ym-fk-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ym-fk-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ym-fk-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ym-fk-row--wrap {
    display: flex;
    flex-wrap: wrap;
}
.ym-fk-row--wrap > label { flex: 1 1 calc(50% - var(--ym-fk-gap)); }

/* --- сама кнопка --- */
.ym-fk-row > label {
    display: flex;
    align-items: center;
    justify-content: center;
    /* текст центрируется и по горизонтали, и по вертикали -- иначе
     * длинная подпись съезжает и ряд выглядит кривым */
    min-height: var(--ym-fk-height);
    margin: 0;
    padding: 0 6px;
    text-align: center;
    cursor: pointer;
}
.ym-fk-row > label > input { position: absolute; opacity: 0; pointer-events: none; }
.ym-fk-row > label > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ym-fk-height);
    padding: 0 8px;
    border: 1px solid var(--ym-fk-border);
    border-radius: var(--ym-fk-radius);
    color: var(--ym-fk-text);
    background: var(--ym-fk-bg);
    font-size: var(--ym-fk-font);
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}
.ym-fk-row > label > input:checked + span {
    border-color: var(--ym-fk-active-border);
    color: var(--ym-fk-active-text);
    background: var(--ym-fk-active-bg);
}
.ym-fk-row > label > input:disabled + span { opacity: .6; cursor: default; }

/* =====================================================================
 * YARMETRO_ITEM71: выставленный фильтр видно по ряду чипов над картой.
 * Синий контур = «здесь я что-то задал». Подсвечиваются только те чипы,
 * которые пользователь выставил сам: сделка, тип недвижимости и регион
 * стоят всегда, подсвечивать их -- значит подсветить весь ряд и не сказать
 * этим ничего. «Все фильтры» горят, если задано хоть что-то: ряд
 * прокручивается вбок, и выставленный чип может быть не виден.
 * Класс ставит syncChipActive() в footer.php.
 * ===================================================================== */
.ym-mobile-catalog__quick button.is-set {
    border-color: #276ef1;
    box-shadow: inset 0 0 0 1px #276ef1;
    color: #1b4fbf;
}