/**
 * Баннер согласия на cookie. Полоса внизу экрана, цвета берём из переменных темы,
 * чтобы он не выбивался из оформления сайта.
 */

.alex-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: var(--color-white, #fff);
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.alex-consent[hidden] { display: none; }

.alex-consent__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.alex-consent__title {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 15px;
    color: var(--color-text, #222);
}

.alex-consent__note {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-light, #555);
}

.alex-consent__note a {
    color: var(--color-primary, #9e0f0f);
    text-decoration: underline;
}

.alex-consent__buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.alex-consent__btn {
    /* Эталон кнопки, как у всех кнопок Ремфары (с 2026-10-13, было 39 в высоту, 14/600).
       Ширина не по эталону (176): две такие кнопки не помещаются в баннер, исключение записано
       в docs/design-system.md (раздел «Отличия от канона»). */
    min-height: var(--btn-min-height, 44px);
    padding: var(--btn-padding-y, 12px) var(--btn-padding-x, 16px);
    font-size: var(--btn-font-size, 15px);
    font-family: inherit;
    font-weight: var(--btn-font-weight, 600);
    line-height: var(--btn-line-height, 1);
    cursor: pointer;
    border: 1px solid var(--color-primary, #9e0f0f);
    /* Вторая кнопка канона: подкрашенная плашка, при наведении сплошная фирменная
       (решение владельца 2026-10-13, отчёт дизайна, вопрос 36). */
    background: var(--btn2-bg, rgba(158, 15, 15, 0.1));
    color: var(--color-primary, #9e0f0f);
    border-radius: var(--btn-radius, 4px);
    transition: background 0.15s ease, color 0.15s ease;
}

.alex-consent__btn:hover {
    background: var(--color-primary, #9e0f0f);
    color: var(--color-white, #fff);
}

.alex-consent__btn--accept {
    background: var(--color-primary, #9e0f0f);
    color: var(--color-white, #fff);
}

.alex-consent__btn--accept:hover {
    background: var(--color-primary-hover);
    color: var(--color-white, #fff);
}

@media (max-width: 782px) {
    .alex-consent__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
    }
    .alex-consent__buttons { justify-content: stretch; }
    .alex-consent__btn { flex: 1 1 auto; }
}