/* Каркас сайта (cookie) — есть на каждой странице. */

/*
 * Светлая плашка согласия по Figma NV-Global: Desktop 2835:28521 (643×220),
 * Mobile 2835:28656 (360×208 при вьюпорте 392).
 *
 * Токены --nv-* объявлены на самой `.cookie-banner` — тем же приёмом, что и на
 * `.header` (css/layout/header.css): плашка выводится из footer.php на КАЖДОЙ
 * странице, в том числе на тех, чьего класса нет в списке `body.home, …` из
 * css/base.css. Без собственного объявления `var(--nv-surface-1)` там был бы
 * невалиден и дал бы прозрачный фон (docs/QA.md → «Ловушка с переменными»).
 * Объявлены только используемые токены, значения — ровно как в css/base.css.
 *
 * Тени у плашки нет: в обеих нодах макета у фрейма нет эффектов, край держит
 * обводка #D2D2D2.
 */
.cookie-banner {
    --nv-primary: #FD6B01;
    --nv-object-1: #212121;
    --nv-object-2: #5A5A5A;
    --nv-surface-1: #F8F8F8;
    --nv-surface-2: #F2F2F2;
    --nv-surface-3: #E4E4E4;
    --nv-surface-4: #D2D2D2;
    --nv-constant-1: #F8F8F8;
    --nv-gradient: linear-gradient(167deg, #FD6B01 15%, #FF4601 100%);

    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 9;
    border-radius: var(--Frame-Card-Padding-Corner, 24px);
    border: 1px solid var(--nv-surface-4);
    background: var(--nv-surface-1);
    /* Макет: 643 = 1+24 + 332 (текст) + 32 (gap) + 229 (картинка) + 24+1.
       max-width держит поля 32px, когда 643 уже не помещается (вьюпорт < 707). */
    width: 643px;
    max-width: calc(100% - 64px);
    padding: 24px;
    gap: 32px;
    align-items: flex-end;
    display: none;
}

.cookie-banner.cookie-banner--visible {
    display: flex;
}

/* Колонка текста: в макете 332 и ровно по высоте картинки (172), текст сверху,
   кнопки снизу — отсюда `stretch` + `space-between`, а не фиксированный gap.
   `gap` остаётся нижней границей на узких экранах, где колонка выше 172. */
.cookie__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    align-self: stretch;
    flex: 1 1 332px;
    min-width: 0;
    max-width: 332px;
}

.cookie__text {

}

/* Body text / Medium Regular: 18/28. */
.cookie__text p {
    color: var(--nv-object-2);
    font-size: 18px;
    line-height: 155.556%;
}

.cookie__text a {
    color: var(--nv-primary);
    text-decoration-line: underline;
}

.cookie__action {
    display: flex;
    gap: 12px;
}

/*
 * Обе кнопки — те же выражения, что у `.kyc-btn--primary` / `.kyc-btn--small`
 * в css/base.css. У оранжевой в макете обводки нет, но `border` оставлен
 * прозрачным: он держит высоту одинаковой с серой. Градиент закрашивает и
 * полосу бордера (background-clip по умолчанию border-box), поэтому кнопка
 * выглядит сплошной, как в макете.
 *
 * Поле 7/15 вместо 8/16 — компенсатор обводки: Figma рисует stroke внутрь
 * габарита, CSS `border` добавляет 2px сверх. 7+24+7+2 = 40 ровно по макету
 * (на мобильном 7+20+7+2 = 36), по горизонтали 15+1 = 16. Тот же приём, что
 * у `.kyc-btn--small` в css/base.css.
 */
.cookie__btn {
    display: flex;
    padding: 7px 15px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--nv-gradient);
    backdrop-filter: blur(10px);
    color: var(--nv-constant-1);
    font-size: 18px;
    font-weight: 700;
    line-height: 133.333%;
    transition: background-color .2s ease, background-image .2s ease;
}

/* Hover/focus в этих двух нодах Figma не нарисован — взят из общей пары
   состояний светлой темы (docs/QA.md → «Hover-состояния»: градиент → сплошной
   #FD6B01, #F2F2F2 → #E4E4E4), как у `.kyc-btn--primary` / `.kyc-btn--small`. */
.cookie__btn:hover,
.cookie__btn:focus-visible {
    background: var(--nv-primary);
}

.cookie__btn--gray {
    color: var(--nv-object-1);
    border: 1px solid var(--nv-surface-4);
    background: var(--nv-surface-2);
}

.cookie__btn--gray:hover,
.cookie__btn--gray:focus-visible {
    background: var(--nv-surface-3);
}

/*
 * Картинка — обычный элемент потока рядом с текстом (в макете это соседний
 * фрейм, а не оверлей), поэтому на текст она не заходит ни на одной ширине
 * (docs/OWNER_REMARKS.md, О-13).
 *
 * Слот 229×172 уже исходника (237×201) по пропорции, `cover` + `bottom`
 * повторяет кроп макета: срезается ~23px сверху, а там у файла ровно
 * прозрачное поле (непрозрачный бокс начинается с y=27). Сам персонаж цел,
 * О-17 соблюдено.
 */
.cookie__image {
    flex: 0 0 229px;
    width: 229px;
    height: 172px;
    overflow: hidden;
}

.cookie__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

@media (max-width: 767.98px) {
    /* Та же композиция, но плашка прижата к левому краю, как было в теме. */
    .cookie-banner {
        left: 16px;
        right: unset;
        max-width: calc(100% - 32px);
    }

    .cookie__image {

    }

    .cookie__info {

    }

    .cookie__action {

    }
}

/*
 * Мобильная композиция по ноде 2835:28656: поле 12, текст на всю ширину,
 * кнопки столбиком слева, картинка прижата к правому нижнему углу.
 * Ширины кнопок и картинки — 152 из макета, но с процентным потолком: на 392
 * потолок выше 152 и значение макета сохраняется, а на 320 оба блока
 * ужимаются и не сходятся друг с другом.
 */
@media (max-width: 575.98px) {
    .cookie-banner {
        padding: 12px;
        gap: 0;
    }

    .cookie__info {
        flex: 1 1 auto;
        max-width: unset;
        align-self: auto;
        /* Макет: 72 (текст) + 32 + 80 (кнопки) = 184. */
        gap: 32px;
    }

    /* Body text / Regular: 16/24. */
    .cookie__text p {
        font-size: 16px;
        line-height: 150%;
    }

    .cookie__action {
        flex-direction: column;
        gap: 8px;
        width: 152px;
        max-width: 46%;
    }

    /* Button / Small: 14/20, высота 36. */
    .cookie__btn {
        width: 100%;
        font-size: 14px;
        line-height: 142.857%;
    }

    .cookie__image {
        position: absolute;
        right: 0;
        bottom: 0;
        flex: 0 0 auto;
        width: 152px;
        max-width: 43%;
        height: auto;
        aspect-ratio: 152 / 114;
        border-bottom-right-radius: var(--Frame-Card-Padding-Corner, 24px);
    }
}

@media (max-width: 478.98px) {
    /* Мобильная композиция выше работает до 320 включительно; отдельных
       значений этому брейкпоинту макет не даёт. */
    .cookie__info {

    }

    .cookie__image {

    }
}