/* Cookie consent (devrabiul/laravel-cookie-consent): one white surface, navy for the single primary action */
:root {
    --cc-card-bg-color: #ffffff;
    --cc-card-text-color: #17203a;
    --cc-button-bg-color: #304375;
    --cc-button-bg-color-rgb: 48, 67, 117;
    --cc-button-text-color: #ffffff;
    --cc-border-color: #d9dce6;
}
.cookie-consent-container,
.cookie-consent-container button,
.cookie-preferences-modal,
.cookie-preferences-modal button,
.cookie-consent-floating-button {
    font-family: 'Comfortaa', sans-serif;
}

/* banner and modal share the same card */
.cookie-consent-container .cookie-consent-content-container,
.cookie-preferences-modal-content {
    border: 0.0625rem solid #d9dce6;
    border-radius: 1.25rem;
    box-shadow: 0 1.25rem 2.5rem rgba(23, 32, 58, .12);
}
.cookie-consent-content-title,
.cookie-preferences-modal-title,
.cookie-category-title {
    color: var(--blue);
    font-weight: 700;
    letter-spacing: 0;
}
.cookie-consent-content-description,
.cookie-preferences-intro,
.cookie-category-description {
    color: #45403d;
    line-height: 1.6;
}

/* buttons: pill shape like the rest of the site; only "Accept" is filled */
.cookie-consent-container .cookie-consent-button-container button,
.cookie-preferences-modal .cookie-preferences-modal-footer button {
    --cc-button-bg-opacity: 1;
    border-radius: 6.25rem;
    font-weight: 700;
}
.cookie-consent-container .cookie-consent-button-container button.preferences-btn,
.cookie-consent-container .cookie-consent-button-container button.cookie-consent-reject,
.cookie-preferences-modal .cookie-preferences-modal-footer button.cookie-consent-reject {
    --cc-button-bg-color-rgb: 255, 255, 255;
    --cc-button-text-color: var(--blue);
    box-shadow: inset 0 0 0 0.0625rem var(--blue);
}
.cookie-consent-container .cookie-consent-button-container button.preferences-btn:hover,
.cookie-consent-container .cookie-consent-button-container button.cookie-consent-reject:hover,
.cookie-preferences-modal .cookie-preferences-modal-footer button.cookie-consent-reject:hover {
    --cc-button-bg-color-rgb: 238, 240, 247;
}

/* preferences modal */
.cookie-preferences-modal .cookie-preferences-modal-close {
    background: transparent;
    color: var(--blue);
    border-radius: 50%;
}
.cookie-preferences-modal .cookie-preferences-modal-close:hover,
.cookie-preferences-modal .cookie-preferences-modal-close:focus {
    background-color: #eef0f7;
}

/* floating "cookie settings" button */
.cookie-consent-floating-button {
    background-color: var(--cream);
    color: var(--blue);
    box-shadow: 0 0 0 0.0625rem #d9dce6, 0 0.5rem 1.5rem rgba(23, 32, 58, .12);
}

/* the template sets a, span and label to display:block; keep the toggles inline */
.cookie-toggle,
.cookie-toggle-slider {
    display: inline-block;
}

.cookie-consent-container button:focus-visible,
.cookie-preferences-modal button:focus-visible,
.cookie-consent-floating-button:focus-visible {
    outline: 0.125rem solid var(--blue);
    outline-offset: 0.125rem;
}