/**
 * Замена Bootstrap 3 (/bitrix/css/main/bootstrap.min.css, 118 КБ).
 *
 * Зачем. На странице одновременно жили два бутстрапа: v3 от Битрикса и v4 из
 * шапки сайта — вместе 274 КБ блокирующего CSS. Разбор показал, что из v3
 * реально используются считаные классы: на карточке товара 7, на главной 2.
 * Все остальные общие классы (.modal*, .fade, .row, .container, .active,
 * .text-center) есть и в v4, а v4 в каскаде идёт позже, то есть побеждает
 * уже сейчас — удаление v3 на них не влияет.
 *
 * Здесь собрано то, чего в v4 нет совсем: утилиты видимости .hidden/.visible
 * и оформление .checkbox/.radio. Значения и брейкпоинты взяты из самого
 * bootstrap.min.css v3.3.7, не по памяти, чтобы вид не поехал.
 *
 * Файл подключают те же шаблоны, что раньше подключали v3 — так ни одна
 * страница не может остаться без этих классов.
 */

/* --- утилиты видимости --- */

.hidden {
    display: none !important;
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

/* --- базовые правила, на которые сайт опирается незаметно ---
   Сверил вычисленные стили базовых тегов с включённым и выключенным Bootstrap 3:
   отличий оказалось всего два — оформление label и базовый цвет текста у полей
   и кнопок (#333 против чёрного по умолчанию). Селекторы по тегу, то есть самая
   низкая специфичность: любое правило сайта по классу по-прежнему сильнее. */

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

button,
input,
optgroup,
select,
textarea {
    color: #333;
}

/* --- чекбоксы и радио --- */

.radio,
.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

.radio label,
.checkbox label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
}

.radio + .radio,
.checkbox + .checkbox {
    margin-top: -5px;
}