/* ============================================
   COOKIE-БАННЕР — глобальное окно согласия
   Файл: /assets/css/coockies.css
   Методология: БЭМ, блок .cookie-banner
   Размеры: ТОЛЬКО rem через переменные дизайн-системы
   (--fz-*, --spacing-*, --gap-*, --radius-*, --shadow-*).
   Цвета: локальные переменные --cb-* с фолбэками на системные;
   режим --dark и inline-переменные кастомного режима их переопределяют.
   ============================================ */

/* ------------------------------------------------------------
   БЛОК: базовое состояние (скрыт до решения JS)
   ------------------------------------------------------------ */
.cookie-banner {
    /* Локальные цветовые переменные: светлая схема по умолчанию */
    --cb-bg: var(--bg-surface);
    --cb-title: var(--color-heading);
    --cb-text: var(--color-text);
    --cb-link: var(--color-link);

    position: fixed;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: var(--cb-bg);
    color: var(--cb-text);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transform: translateY(var(--spacing-md));
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0s linear 0.4s;
}

/* ------------------------------------------------------------
   МОДИФИКАТОРЫ ПОЗИЦИИ
   ------------------------------------------------------------ */
.cookie-banner--bl {
    left: var(--spacing-md);
    bottom: var(--spacing-md);
    width: 48rem;
    max-width: calc(100% - var(--spacing-md) * 2);
}

.cookie-banner--br {
    right: var(--spacing-md);
    bottom: var(--spacing-md);
    width: 48rem;
    max-width: calc(100% - var(--spacing-md) * 2);
}

.cookie-banner--bar {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
}

.cookie-banner--top {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: 100%;
    border-radius: 0;
    transform: translateY(calc(var(--spacing-md) * -1));
}

/* ------------------------------------------------------------
   СОСТОЯНИЕ: показан (класс ставит JS)
   ------------------------------------------------------------ */
.cookie-banner.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

/* ------------------------------------------------------------
   МОДИФИКАТОР ЦВЕТОВОЙ СХЕМЫ: тёмный фон
   ------------------------------------------------------------ */
.cookie-banner--dark {
    --cb-bg: #222222;
    --cb-title: #ffffff;
    --cb-text: #ffffff;
    --cb-link: #ffffff;
}

/* ------------------------------------------------------------
   ЭЛЕМЕНТ: внутренний контейнер
   ------------------------------------------------------------ */
.cookie-banner__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    padding: var(--spacing-md);
}

.cookie-banner--bar .cookie-banner__inner,
.cookie-banner--top .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--gap-lg);
    max-width: var(--container-width);
    margin: 0 auto;
}

/* ------------------------------------------------------------
   ЭЛЕМЕНТ: контент (заголовок + текст)
   ------------------------------------------------------------ */
.cookie-banner__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.cookie-banner--bar .cookie-banner__content,
.cookie-banner--top .cookie-banner__content {
    flex: 1;
}

.cookie-banner__title {
    margin: 0;
    font-size: var(--fz-h4);
    font-weight: var(--fw-bold);
    color: var(--cb-title);
}

.cookie-banner__text {
    font-size: var(--fz-text);
    color: var(--cb-text);
}

.cookie-banner__text p {
    margin: 0;
}

.cookie-banner__text p + p {
    margin-top: var(--spacing-xs);
}

/* ------------------------------------------------------------
   ЭЛЕМЕНТ: действия (кнопки + ссылка на политику)
   ------------------------------------------------------------ */
.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-md);
}

/* ------------------------------------------------------------
   ЭЛЕМЕНТ: крестик закрытия
   ------------------------------------------------------------ */
.cookie-banner__close {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--cb-text);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.cookie-banner__close:hover {
    opacity: 0.6;
}

.cookie-banner__close svg {
    display: block;
    width: var(--gap-md);
    height: var(--gap-md);
}

/* ------------------------------------------------------------
   ДОСТУПНОСТЬ
   ------------------------------------------------------------ */
.cookie-banner__close:focus-visible,
.cookie-banner__btn:focus-visible,
.cookie-banner__link:focus-visible {
    outline: 0.2rem solid var(--color-primary);
    outline-offset: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner,
    .cookie-banner.is-visible {
        transition: none;
    }
}

/* ------------------------------------------------------------
   АДАПТИВ: планшет — компенсация ширины карточки
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
    .cookie-banner--bl,
    .cookie-banner--br {
        width: 64rem;
    }
}

@media (max-width: 1024px) {
    .cookie-banner--bl,
    .cookie-banner--br {
        width: 90rem;
    }
}

/* ------------------------------------------------------------
   АДАПТИВ: мобильные — любая позиция становится полосой снизу
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .cookie-banner--bl,
    .cookie-banner--br,
    .cookie-banner--top {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        transform: translateY(var(--spacing-md));
    }

    .cookie-banner__inner,
    .cookie-banner--bar .cookie-banner__inner,
    .cookie-banner--top .cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gap-md);
    }

    .cookie-banner__title {
        font-size: var(--fz-h3);
    }

    .cookie-banner__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gap-sm);
    }

    .cookie-banner__buttons {
        flex-direction: column;
        margin-left: 0;
    }

    .cookie-banner__buttons .btn {
        width: 100%;
    }
}