/* FIRST-596 — cookie consent banner styles.
   Extracted from the partial so the banner is cacheable like the rest of the
   portal. Colours resolve from the per-tenant TenantStyling CSS variables.
   Loaded from layout/tools-header.html whenever `cookie_consent_required`, which
   is also the condition that renders the banner and the footer settings link. */
.cookie-consent-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    margin-inline: auto;
    width: auto;
    max-width: 430px;
    /* Above modal dialogs so the banner stays clickable, not dimmed behind a
       backdrop. The blocking dashboard consent modal is a separate problem —
       Bootstrap traps focus inside it, so the controller waits for it to close
       instead of stacking on top of it (see cookie_consent.js). */
    z-index: 1060;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow:
        0 12px 32px -8px rgba(0, 0, 0, 0.28),
        0 3px 8px -4px rgba(0, 0, 0, 0.16);
    padding: 1.15rem 1.25rem 1.25rem;
    animation: cookieConsentIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-consent-banner[hidden] {
    display: none;
}
/* The controller focuses the card itself when it is re-opened from a footer
   link; that programmatic focus needs no ring of its own. */
.cookie-consent-banner:focus {
    outline: none;
}
.cookie-consent-banner__close {
    position: absolute;
    top: 0.4rem;
    right: 0.55rem;
    border: 0;
    background: none;
    padding: 0.1rem 0.35rem;
    font-size: 1.35rem;
    line-height: 1;
    color: #8a8a94;
    cursor: pointer;
    border-radius: 6px;
}
.cookie-consent-banner__close[hidden] {
    display: none;
}
.cookie-consent-banner__close:hover {
    color: #33333a;
    background: #f0f0f3;
}
.cookie-consent-banner__close:focus-visible {
    outline: 2px solid
        var(--tenant-primary-color, var(--tenant-primary, #4401ca));
    outline-offset: 1px;
}
.cookie-consent-banner__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.cookie-consent-banner__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--tenant-primary-color, var(--tenant-primary, #4401ca));
    background: color-mix(
        in srgb,
        var(--tenant-primary-color, var(--tenant-primary, #4401ca)) 14%,
        #ffffff
    );
}
.cookie-consent-banner__icon svg {
    width: 22px;
    height: 22px;
}
.cookie-consent-banner__body {
    min-width: 0;
}
.cookie-consent-banner__title {
    margin: 0 0 0.2rem;
    /* Keep the title clear of the close button in the card's top-right. */
    padding-right: 1.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #1f1f1f);
}
.cookie-consent-banner__text {
    margin: 0;
    font-size: 0.825rem;
    line-height: 1.5;
    color: #5a5a63;
}
.cookie-consent-banner__current {
    margin: 0.55rem 0 0;
    font-size: 0.775rem;
    font-weight: 600;
    color: #33333a;
}
.cookie-consent-banner__current[hidden] {
    display: none;
}
.cookie-consent-banner__link {
    color: var(
        --link-color,
        var(--tenant-primary-color, var(--tenant-primary, #4401ca))
    );
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.cookie-consent-banner__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
/* Accept and Reject share one style on purpose: same size, weight and colour.
   A more prominent Accept is a nudge that undermines freely-given consent, so
   the two differ by label only. */
.ccb-btn {
    flex: 1 1 0;
    border: 1px solid
        var(--tenant-primary-color, var(--tenant-primary, #4401ca));
    border-radius: 9px;
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tenant-primary-color, var(--tenant-primary, #4401ca));
    background: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.ccb-btn:hover {
    background: color-mix(
        in srgb,
        var(--tenant-primary-color, var(--tenant-primary, #4401ca)) 10%,
        #ffffff
    );
}
.ccb-btn:focus-visible {
    outline: 2px solid
        var(--tenant-primary-color, var(--tenant-primary, #4401ca));
    outline-offset: 2px;
}
/* Below sm the footer's legal links are hidden and Cookie settings is the only
   one left; drop its inherited left margin so it isn't indented from the edge.
   Lives here rather than inline in layout/footer.html so the rule is cacheable
   and only ships for tenants that actually render the link. */
@media (max-width: 575.98px) {
    .footer-links a[data-cookie-settings] {
        margin-left: 0;
    }
}
@keyframes cookieConsentIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cookie-consent-banner {
        animation: none;
    }
}