:root {
    --cookie-navy: #0d2345;
    --cookie-gold: #d6a84f;
    --cookie-cream: #f8f5ee;
    --cookie-white: #ffffff;
    --cookie-text: #1d2735;
}

.cookie-banner {
    display: none;
    position: fixed;
    z-index: 99999;
    right: 20px;
    bottom: 20px;
    left: 20px;

    max-width: 720px;
    margin: 0 auto;
    padding: 24px;

    color: var(--cookie-text);
    background: var(--cookie-cream);
    border: 1px solid rgba(13, 35, 69, 0.15);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(13, 35, 69, 0.24);
}

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

.cookie-banner__title {
    margin: 0 0 10px;
    color: var(--cookie-navy);
    font-size: 1.35rem;
    line-height: 1.25;
}

.cookie-banner__text {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.6;
}

.cookie-banner__link {
    color: var(--cookie-navy);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.cookie-banner__button {
    min-height: 46px;
    padding: 11px 20px;

    border: 2px solid var(--cookie-navy);
    border-radius: 999px;
    cursor: pointer;

    font: inherit;
    font-weight: 700;

    transition:
        transform 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

.cookie-banner__button:hover {
    transform: translateY(-1px);
}

.cookie-banner__button:focus-visible,
.cookie-banner__link:focus-visible {
    outline: 3px solid var(--cookie-gold);
    outline-offset: 3px;
}

.cookie-banner__button--accept {
    color: var(--cookie-white);
    background: var(--cookie-navy);
}

.cookie-banner__button--reject {
    color: var(--cookie-navy);
    background: transparent;
}

.cookie-settings-button {
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 600px) {
    .cookie-banner {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 20px;
        border-radius: 15px;
    }

    .cookie-banner__actions {
        flex-direction: column;
    }

    .cookie-banner__button {
        width: 100%;
    }
}