.cookie-banner {
    position: fixed;
    left: 20px;
    bottom: 20px;

    width: 700px;
    padding: 16px;

    display: flex;
    flex-direction: row;
    gap: 12px;

    background: rgba(20, 20, 20, 0.95);
    color: #fff;

    border-radius: 14px;

    z-index: 99999;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    animation: cookieFadeIn 0.4s ease;
}

.cookie-banner__text {
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
    text-align: left;
}

.cookie-banner__btn {
    padding: 14px 15px;

    border: none;
    border-radius: 10px;

    background: #138a36;
    color: #fff;

    cursor: pointer;
    font-size: 12px;

    transition: 0.25s ease;

    align-self: flex-start;
}

.cookie-banner__btn:hover {
    background: #0f6f2b;
    transform: translateY(-1px);
}

.agreement {
    /* Базовый приятный зеленоватый цвет */
    color: #4CAF50;
    /* Или альтернативные оттенки: */
    /* color: #66BB6A; */  /* более светлый */
    /* color: #43A047; */  /* более насыщенный */

    /* Убираем подчеркивание, добавляем при наведении */
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;

    /* Делаем текст чуть жирнее для акцента */
    font-weight: 500;

    /* Добавляем плавность при наведении */
    cursor: pointer;
}

.agreement:hover {
    /* Затемненный оттенок при наведении */
    color: #2E7D32;
    /* Или: */
    /* color: #388E3C; */
    /* color: #1B5E20; */  /* более темный */

    /* Опционально: добавляем подчеркивание для интерактивности */
    border-bottom-color: #2E7D32;

    /* Небольшое увеличение для эффекта */
    transform: scale(1.02);
}

@keyframes cookieFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ADAPTATION */

/* ===== TABLET ===== */

@media (max-width: 768px) {

    .cookie-banner {

        left: 15px;
        right: 15px;

        bottom: 15px;

        width: auto;

        padding: 14px;
    }

    .cookie-banner__text {
        font-size: 12px;
    }

    .cookie-banner__btn {
        padding: 12px 14px;
    }
}

/* ===== MOBILE ===== */

@media (max-width: 480px) {

    .cookie-banner {

        left: 10px;
        right: 10px;

        bottom: 10px;

        width: auto;

        flex-direction: column;

        padding: 14px;

        gap: 15px;
    }

    .cookie-banner__text {

        font-size: 12px;
        line-height: 1.5;
    }

    .cookie-banner__btn {

        width: 100%;

        align-self: stretch;

        padding: 14px;

        font-size: 14px;
    }
}