/**
 * TRDS Cookie Notice — стили баннера
 * Использует CSS-переменные из variables.css темы trds-custom.
 */

/* Контейнер баннера */
.trds-cn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--trds-z-max, 9999);
    background-color: var(--trds-neutral-800, #2c1810);
    color: var(--trds-text-inverse, #ffffff);
    box-shadow: var(--trds-shadow-xl, 0 20px 25px -5px rgba(0,0,0,.1));
    padding: var(--trds-space-4, 1rem) var(--trds-space-6, 1.5rem);
    transform: translateY(100%);
    opacity: 0;
    transition:
        transform var(--trds-duration-medium, 0.3s) var(--trds-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        opacity var(--trds-duration-medium, 0.3s) var(--trds-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Состояние «видимый» */
.trds-cn.trds-cn--visible {
    transform: translateY(0);
    opacity: 1;
}

/* Скрытый через [hidden] — переопределяем display, чтобы работала анимация */
.trds-cn[hidden] {
    display: block;
    visibility: hidden;
    pointer-events: none;
}

/* Внутренний контейнер */
.trds-cn__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--trds-space-6, 1.5rem);
    max-width: var(--trds-container-max, min(98.75rem, 100% - 2rem));
    margin: 0 auto;
    flex-wrap: wrap;
}

/* Текст */
.trds-cn__text {
    margin: 0;
    font-size: var(--trds-fs-sm, clamp(.875rem, 2vw, 1rem));
    line-height: var(--trds-lh-relaxed, 1.8);
    color: var(--trds-neutral-200, #ebe8e3);
    flex: 1 1 0;
    min-width: 0;
}

/* Ссылка на политику */
.trds-cn__link {
    color: var(--trds-secondary, #d4a574);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--trds-duration-fast, 0.15s) var(--trds-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.trds-cn__link:hover,
.trds-cn__link:focus {
    color: var(--trds-secondary-light, #e0b88a);
}

/* Группа кнопок */
.trds-cn__actions {
    display: flex;
    align-items: center;
    gap: var(--trds-space-3, .75rem);
    flex-shrink: 0;
}

/* Кнопка «Принять» */
.trds-cn__btn--accept {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--trds-space-2, .5rem) var(--trds-space-6, 1.5rem);
    background-color: var(--trds-primary, #8b4513);
    color: var(--trds-text-inverse, #ffffff);
    border: none;
    border-radius: var(--trds-radius-md, .75rem);
    font-size: var(--trds-fs-sm, clamp(.875rem, 2vw, 1rem));
    font-weight: var(--trds-fw-semibold, 600);
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color var(--trds-duration-fast, 0.15s) var(--trds-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        box-shadow var(--trds-duration-fast, 0.15s) var(--trds-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.trds-cn__btn--accept:hover,
.trds-cn__btn--accept:focus {
    background-color: var(--trds-primary-light, #a65d2e);
    box-shadow: var(--trds-shadow-primary, 0 4px 14px rgba(139,69,19,.25));
    outline: none;
}

.trds-cn__btn--accept:focus-visible {
    box-shadow: var(--trds-focus-ring, 0 0 0 2px #faf9f7, 0 0 0 4px #8b4513);
}

/* Кнопка «Закрыть» (×) */
.trds-cn__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--trds-radius-full, 9999px);
    color: var(--trds-neutral-300, #d6d1c9);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background-color var(--trds-duration-fast, 0.15s) var(--trds-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        color var(--trds-duration-fast, 0.15s) var(--trds-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.trds-cn__close:hover,
.trds-cn__close:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--trds-text-inverse, #ffffff);
    outline: none;
}

.trds-cn__close:focus-visible {
    box-shadow: var(--trds-focus-ring, 0 0 0 2px #faf9f7, 0 0 0 4px #8b4513);
}

/* =========================================================
   Адаптивность
   ========================================================= */

@media (max-width: 600px) {
    .trds-cn__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--trds-space-4, 1rem);
    }

    .trds-cn__actions {
        width: 100%;
        justify-content: space-between;
    }

    .trds-cn__btn--accept {
        flex: 1;
    }
}

/* =========================================================
   Режим уменьшенного движения (accessibility)
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .trds-cn {
        transition: none;
    }
}