/*
 * The cookie notice and settings (cookies.js). They reach every theme, Bootstrap 3, 4, 5 or
 * none, so they bring their own look: a card at the bottom in the theme's primary colour where
 * it has one, with white text on it (--cms-cookies-accent-color). A theme sets the variables, or
 * restyles the classes, as it likes. A primary colour can be light, so cookies.js sets the link,
 * the icon and the focus ring to the text colour where the accent would not stand out from the
 * card (--cms-cookies-link, --cms-cookies-icon, --cms-cookies-focus).
 */
.cms-cookies,
.cms-cookies-float {
    --cms-cookies-accent: var(--bs-primary, var(--primary, #1f4e79));
    --cms-cookies-accent-color: #fff;
    --cms-cookies-bg: #fff;
    --cms-cookies-color: #1d1d1f;
    --cms-cookies-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .25);
}

.cms-cookies {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 1035;
    box-sizing: border-box;
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    border-radius: .75rem;
    background: var(--cms-cookies-bg);
    box-shadow: var(--cms-cookies-shadow);
    color: var(--cms-cookies-color);
    font-size: .9375rem;
    line-height: 1.5;
    text-align: left;
}

.cms-cookies[hidden],
.cms-cookies [hidden] {
    display: none !important;
}

.cms-cookies:focus {
    outline: none;
}

.cms-cookies:focus-visible {
    outline: 2px solid var(--cms-cookies-focus, var(--cms-cookies-accent));
    outline-offset: 2px;
}

.cms-cookies-title {
    margin: 0 2rem .5rem 0;
    color: inherit;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.cms-cookies-text,
.cms-cookies-state {
    margin: 0 0 .75rem;
    color: inherit;
    font-size: inherit;
}

.cms-cookies-state {
    font-weight: 700;
}

.cms-cookies-policy {
    color: var(--cms-cookies-link, var(--cms-cookies-accent));
    text-decoration: underline;
}

.cms-cookies-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

/* Accept and reject alike: refusing is as easy as accepting */
.cms-cookies-button {
    min-width: 7rem;
    margin: 0;
    padding: .5rem 1.25rem;
    border: 2px solid var(--cms-cookies-accent);
    border-radius: .375rem;
    background: var(--cms-cookies-accent);
    color: var(--cms-cookies-accent-color);
    font: inherit;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
}

.cms-cookies-button:hover {
    filter: brightness(.9);
}

.cms-cookies-button:focus-visible,
.cms-cookies-close:focus-visible,
.cms-cookies-float:focus-visible,
.cms-cookie-settings:focus-visible {
    outline: 2px solid var(--cms-cookies-focus, var(--cms-cookies-accent, currentColor));
    outline-offset: 2px;
}

.cms-cookies-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.cms-cookies-close:hover {
    background: rgba(0, 0, 0, .06);
}

/* "Choose": a switch for each purpose, all off until the visitor turns one on */
.cms-cookies-choice {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.cms-cookies-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cms-cookies-option input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--cms-cookies-accent);
}

.cms-cookies-option input:focus-visible {
    outline: 2px solid var(--cms-cookies-focus, var(--cms-cookies-accent));
    outline-offset: 2px;
}

/* The settings where the theme has no link of its own: bottom left, once the page is at its end */
.cms-cookies-float {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cms-cookies-bg);
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .25);
    color: var(--cms-cookies-icon, var(--cms-cookies-accent));
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.cms-cookies-float.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .2s ease;
}

.cms-cookies-chips {
    fill: var(--cms-cookies-bg);
}

@media (prefers-reduced-motion: reduce) {
    .cms-cookies-float,
    .cms-cookies-float.is-visible {
        transition: none;
    }
}

/* The theme's own settings link: a button that reads as a link, as in a footer */
.cms-cookie-settings {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* The notice's own way to the settings, where the site does not ask first */
.cms-cookies .cms-cookie-settings {
    color: var(--cms-cookies-link, var(--cms-cookies-accent));
}

@media print {
    .cms-cookies,
    .cms-cookies-float {
        display: none !important;
    }
}