/* Общие правила для всего сайта: и витрины, и админки.
   Подключается последним, после темы, чтобы перебивать её. */

/* Палитра — из логотипа (static/img/logo_451.svg), и больше ниоткуда.

   Тема магазина была собрана на чужих цветах: голубой #00a1e5 у кнопок и
   заголовков, бирюзовый #058199 у «В корзину» и подвала, оранжевый #f6933e в
   меню, тёмно-синий #042747 в шапке, а Bootstrap добавлял свой синий #007bff в
   фокус полей и кнопки админки. Рядом с амбером и огнём логотипа это читалось
   как два разных магазина.

   Три цвета логотипа берутся как есть, два — производные, и вот почему. Белый
   текст на ember логотипа даёт контраст 3.8 — ниже 4.5, которых требует WCAG AA
   для обычного текста. Поэтому заливки под текстом и ссылки — `--brand-accent`,
   тот же ember на тон темнее (4.75), а наведение — ещё на тон (5.6). Сам ember
   остаётся там, где на нём нет текста: рамки, фокус, полосы, отметки.
   Соответствие логотипу сверяет tests/test_brand_colors.py. */
:root {
    --brand-ember: #e2531d;        /* логотип: низ обложки и пламя */
    --brand-amber: #faa13a;        /* логотип: верх обложки */
    --brand-cream: #fff6e6;        /* логотип: цифры */
    --brand-accent: #c9481a;       /* заливки под белым текстом, ссылки — AA 4.75 */
    --brand-accent-hover: #b83f16; /* наведение и нажатие — AA 5.58 */
    --brand-ink: #1b1d21;          /* тёмный: шапка админки, подвал, текст шапки */
    --brand-focus: rgba(226, 83, 29, .25);
}

/* Отметки и переключатели браузера — тем же цветом, а не системным синим. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-accent);
}

/* --- синий Bootstrap 4 ------------------------------------------------------ */

.btn-primary,
.btn.btn-primary {
    color: #fff;
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:hover {
    color: #fff;
    background-color: var(--brand-accent-hover);
    border-color: var(--brand-accent-hover);
}

.btn:focus,
.btn.focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem var(--brand-focus);
}

.form-control:focus {
    border-color: var(--brand-ember);
    box-shadow: 0 0 0 .2rem var(--brand-focus);
}

.badge-primary,
.bg-primary {
    background-color: var(--brand-accent) !important;
    color: #fff;
}

.text-primary {
    color: var(--brand-accent) !important;
}

.page-link {
    color: var(--brand-accent);
}

.page-item.active .page-link {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

/* Информационная плашка — кремом логотипа, а не бирюзой Bootstrap. Успех,
   предупреждение и ошибка остаются своими цветами: они несут смысл. */
.alert-info {
    color: #7a2e10;
    background-color: var(--brand-cream);
    border-color: #f6d3b8;
}

/* --- тема магазина ------------------------------------------------------------ */

/* У темы кнопки «В корзину» и подвал делили один цвет в одном правиле. Кнопке
   — акцент (его подставляет main.min.css), подвалу — тёмный: на акценте текст
   подвала и ссылка в нём сливались бы с кнопками. */
.footer-bottom {
    background-color: var(--brand-ink);
}

/* Верхняя часть подвала — крем логотипа вместо серо-бежевого #f0f0e9 темы. */
#footer {
    background: var(--brand-cream);
}

.footer-bottom p span a {
    color: var(--brand-amber);
}

.add-to-cart:hover,
.check_out:hover,
.check_out:focus,
.result_button_wrap .btn-default:hover {
    background-color: var(--brand-accent-hover);
    color: #fff;
}

/* Шапка витрины: кнопка корзины и ссылка в админку подсвечиваются акцентом. */
.cart-wrap a:hover,
.cart-wrap a:focus {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
    text-decoration: none;
}

.header-middle #envLabel {
    color: var(--brand-accent);
}

/* Корень всех горизонтальных свайпов на телефоне.

   Тема задаёт `body{display:grid;grid-template-rows:auto 1fr auto}` — прижимает
   подвал к низу. Колонки при этом не заданы вовсе, а неявная колонка грида имеет
   размер `auto`, то есть тянется по самому широкому содержимому. Любой элемент,
   который не помещается в 375 px (таблица на шесть колонок, меню админки в одну
   строку), растягивал не себя, а всю страницу: на «Картах магазина» документ
   становился 838 px при экране 375. Уезжала и шапка, потому что её ширину задаёт
   тот же трек.

   `minmax(0, 1fr)` разрешает колонке сжиматься до ширины экрана; широкое
   содержимое после этого разбирается со своим переполнением само — меню
   переносится, таблицы прокручиваются внутри `.adm-table-wrap`. */
body {
    grid-template-columns: minmax(0, 1fr);
}

/* Картинка не должна распирать колонку: `max-width` в теме не задан ни одному
   изображению. Только на телефоне — на широком экране это правило меняет вид
   уже сложившейся вёрстки: миниатюра в корзине нарисована 120 px в ячейке на
   96 и вылезает из неё намеренно, замер до и после это подтвердил. */
@media (max-width: 767px) {
    img {
        max-width: 100%;
    }
}

/* Длинный токен или e-mail без пробелов переносится, а не вылезает за край. */
code,
.text-break {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Нижнее меню телефона стоит в `<header>` само по себе, без `.container`.
   Внутри у него бутстраповский `.row`, а тот раздвигается полями `0 -15px` в
   расчёте на то, что их скомпенсируют отступы контейнера. Компенсировать
   некому: меню шириной ровно в экран, поэтому строка получалась 405 px при 375
   и правый пункт («Админка») уезжал за край наполовину. */
.mobile-menu > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Пункты того же меню не помещались в свою треть экрана: у колонок `.col-4`
   отступы по 15 px с каждой стороны, на подпись с иконкой оставалось 95 px из
   125, и строка переносилась. Вторая строка уходила под нижний край (у меню
   фиксированные 50 px), поэтому «Админка» выглядела как одна иконка без
   подписи. Сжимаем отступы и запрещаем перенос. */
.mobile-menu > .row > div {
    padding-left: 6px;
    padding-right: 6px;
}

.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    line-height: 1;
    white-space: nowrap;
    font-size: 15px;
}

.mobile-menu i {
    padding-right: 6px;
}

/* На узких экранах (320 px — старые iPhone SE и бюджетные андроиды) «Корзина»
   со счётчиком товаров всё ещё не помещалась в свою треть: 100 px против 94.
   Уменьшаем шрифт и иконку — переносить или обрезать подпись хуже. */
@media (max-width: 359px) {
    .mobile-menu-btn {
        font-size: 13px;
    }

    .mobile-menu i {
        font-size: 17px;
        padding-right: 4px;
    }
}

/* Шапка витрины на узком экране. У `.logo` в теме жёсткая высота 50 px в
   расчёте на то, что название магазина уместится в одну строку рядом с
   картинкой. При 320 px «BOOKSHOP V.2.0» кеглем 28 переносится на вторую
   строку, вылезает из этих 50 px и ложится поверх содержимого страницы —
   в корзине название накрывало карточку товара. Снимаем фиксированную высоту,
   собираем логотип флексом (плавающие блоки внутри флекса не работают, и это
   к лучшему) и уменьшаем кегль. */
@media (max-width: 575px) {
    .header-middle {
        margin-bottom: 16px;
    }

    .header-middle .logo {
        float: none;
        height: auto;
    }

    .header-middle .logo > a {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .header-middle .logo .pull-left {
        float: none;
    }

    .header-middle .brand {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 1px;
    }

    .header-middle #envLabel {
        font-size: 13px;
        line-height: 1.3;
    }
}

/* Исход операции ещё не известен: банк её не закрыл. Ни зелёный, ни красный
   тут не годятся — оба утверждают то, чего мы не знаем. */
.pending {
    color: #8a6d3b;
}