.cookie-popup {
    position: fixed;
    z-index: 9999;
    bottom: 15px;
    left: 15px;
    right: 15px;
    padding: 20px 30px;
    transform: translateY(120%);
    /* hidden (not just off-screen) when inactive so its controls leave the tab order */
    visibility: hidden;
    transition: transform 400ms ease-in-out, visibility 400ms ease-in-out;
    background-color: var(--lgtBgColor);
    color: var(--lgtFgColor);
    box-shadow: 0 0 10px rgba(var(--bs-dark-rgb), var(--lgtShadow));
    border-radius: var(--lgtRounded);
}

@media screen and (min-width: 768px) {
    .cookie-popup {
        max-width: 40%;
        left: auto;
    }
}

@media screen and (min-width: 1200px) {
    .cookie-popup {
        max-width: 40%;
        left: auto;
    }
}

.cookie-popup.notify {
    transform: translateY(0%);
    visibility: visible;
}

.cookie-popup p a {
    color: var(--lgtFgColor);
    text-decoration: underline;
}

/**
    This hides the cookie popup when the C5 sidebar is open
*/
.ccm-panel-transition-slide .cookie-popup {
    transform: translateY(120%) !important;
}

/**
    Visible two-tone focus ring on the banner's own colours (WCAG 2.4.7 / 1.4.11)
*/
#lgt-cookie-popup :focus-visible {
    outline: 3px solid var(--lgtFgColor);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--lgtBgColor);
}

/**
    While the full-screen site menu is open it contains keyboard focus, so hide
    the banner to stop it covering focused menu links (WCAG 2.4.11)
*/
body.menu-open .cookie-popup {
    visibility: hidden;
}