/*
 * Баннер куки: узкая лента внизу экрана.
 * Разметка — .cookie-window в footer.php, показ и закрытие — js/scripts.js.
 *
 * Весь баннер описан здесь. В styles.css правил .cookie-window / .cookie-button
 * больше нет — их специально убрали, чтобы не держать оформление в двух файлах
 * и не перебивать одно другим. Файл подключается последним в header.php.
 *
 * Цвета — из палитры сайта, новых не вводится:
 *   #FFFFFF, #E6F0F5, #455159   — светлый фон, граница, текст
 *   #0093A6, #F6FBFC            — кнопка (вторичная кнопка сайта: .product-card__btn,
 *                                 .blue-button.conf-save, .bx_filter_search_button)
 */

:root {
    /* полоса */
    --cookie-bar-bg: #FFFFFF;
    --cookie-bar-border: #E6F0F5;
    --cookie-bar-color: #455159;
    --cookie-bar-font-size: 12px;
    --cookie-bar-padding-y: 10px;
    --cookie-bar-padding-x: 16px;
    --cookie-bar-gap: 12px;

    /* кнопка «Окей» */
    --cookie-btn-bg: #FFFFFF;
    --cookie-btn-color: #0093A6;
    --cookie-btn-border: #0093A6;
    --cookie-btn-shadow: 0 0 10px 3px rgb(17 153 162 / 25%);

    --cookie-btn-bg-hover: #0093A6;
    --cookie-btn-color-hover: #F6FBFC;
    --cookie-btn-border-hover: #0093A6;
    --cookie-btn-shadow-hover: 0 0 10px 3px rgb(17 153 162 / 40%);

    /*
     * Пустое место справа под виджет чата (jivo.ru, подключается в footer.php).
     * Значения по замерам живого виджета: на десктопе он отдаёт панель ~300px
     * с отступом от края, на тач-устройствах — круглый пузырь 85px (122px
     * на экранах от 1000px). Что именно отдаст jivo, решается по User-Agent,
     * поэтому ориентируемся не на ширину окна, а на тип указателя — ниже.
     */
    --cookie-chat-reserve: 355px;
}

/* Тач-устройства (телефоны и планшеты) — пузырь 85px. */
@media (hover: none) and (pointer: coarse) {
    :root {
        --cookie-chat-reserve: 95px;
    }
}

/* Крупные тач-экраны (планшет горизонтально) — пузырь 122px. */
@media (hover: none) and (pointer: coarse) and (min-width: 1000px) {
    :root {
        --cookie-chat-reserve: 132px;
    }
}

.cookie-window {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /*
     * Ниже z-index виджета чата (900): иначе полоса накрывает пузырь
     * и до чата не дотянуться, пока не нажмёшь «Окей».
     */
    z-index: 888;

    /*
     * Именно block, не flex. Прямые дети флекс-контейнера блокируются
     * по спецификации: display:inline на <p> вычислился бы в block, каждый
     * абзац стал бы отдельной колонкой и полоса разъехалась бы по этажам —
     * так она и ведёт себя сейчас на планшетах. Обычный текстовый поток
     * складывает оба абзаца и кнопку в одну строку и переносит их вместе.
     */
    display: block;
    text-align: left;

    box-sizing: border-box;
    padding: var(--cookie-bar-padding-y) var(--cookie-bar-padding-x);
    padding-right: calc(var(--cookie-bar-padding-x) + var(--cookie-chat-reserve));

    background: var(--cookie-bar-bg);
    border-top: 1px solid var(--cookie-bar-border);
    color: var(--cookie-bar-color);
    font-size: var(--cookie-bar-font-size);
    line-height: 1.35;

    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.cookie-window.visible {
    visibility: visible;
    opacity: 1;
}

/*
 * Абзацы идут одним текстовым потоком, иначе каждый занимает свою строку
 * и полоса разъезжается по этажам — так было на планшетных ширинах.
 */
.cookie-window p {
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.cookie-window p:first-child {
    font-weight: bold;
    margin-right: 4px;
}

footer .cookie-window p,
footer .cookie-window a {
    font-size: inherit;
    color: var(--cookie-bar-color);
}

.cookie-window a {
    color: var(--cookie-bar-color);
    text-decoration: underline;
}

/* На широких экранах текст умещается в строку — оставляем привычное центрирование. */
@media (min-width: 992px) {
    .cookie-window {
        text-align: center;
    }
}

.cookie-button {
    /* Часть той же строки, что и текст; сама не разрывается. */
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--cookie-bar-gap);
    white-space: nowrap;

    padding: 5px 14px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;

    box-sizing: border-box;
    border: 2px solid var(--cookie-btn-border);
    border-radius: 15px 5px 10px;
    background: var(--cookie-btn-bg);
    color: var(--cookie-btn-color);
    box-shadow: var(--cookie-btn-shadow);
}

.cookie-button:hover,
.cookie-button:focus,
.cookie-button:active {
    background: var(--cookie-btn-bg-hover);
    color: var(--cookie-btn-color-hover);
    border-color: var(--cookie-btn-border-hover);
    box-shadow: var(--cookie-btn-shadow-hover);
}