/* Windows, toasts, promo bar and the cookie banner in the new look (BR Stage 1, PR 6; ModalsUtility). */
.ci-dialog {
    width: min(480px, calc(100vw - 2 * var(--ci-gutter)));
    max-height: calc(100vh - 32px);
    padding: var(--ci-s6) var(--ci-s5) var(--ci-s5);
    border: 0;
    border-radius: var(--ci-r-panel);
    background: var(--ci-surface);
    color: var(--ci-ink);
    box-shadow: var(--ci-shadow-float);
    font: var(--ci-body);
}
.ci-dialog::backdrop { background: rgba(18, 51, 38, .45); }
.ci-dialog h2 { margin: 0 var(--ci-s6) var(--ci-s3) 0; font: var(--ci-h3); font-size: 22px; }
.ci-dialog p { margin: 0 0 var(--ci-s3); }
.ci-dialog .ci-card__head, .ci-dialog .ci-code { margin-bottom: var(--ci-s4); }
.ci-dialog__close {
    position: absolute;
    top: var(--ci-s3);
    right: var(--ci-s3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ci-tap);
    height: var(--ci-tap);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ci-ink);
    cursor: pointer;
}
.ci-dialog__close:hover { background: var(--ci-paper); }
.ci-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--ci-s2); margin-top: var(--ci-s4); }
.ci-dialog__actions .ci-btn { flex: 1 1 auto; }
.ci-dialog .ci-card__ref { margin-top: var(--ci-s2) !important; }
@media (max-width: 599px) {
    .ci-dialog { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: var(--ci-r-panel) var(--ci-r-panel) 0 0; }
}

/* Promo bar: deep forest, never clay */
.ci-promo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ci-s3);
    min-height: var(--ci-tap);
    padding: 0 var(--ci-gutter);
    background: var(--ci-deep-forest);
    color: var(--ci-paper);
    font: 500 14px/1.35 var(--ci-sans);
}
.ci-promo-bar[hidden] { display: none; }
.ci-promo-bar p { margin: 0; padding: var(--ci-s2) 0; text-align: center; }
.ci-promo-bar a { margin-left: var(--ci-s2); color: var(--ci-mint); font-weight: 600; text-decoration: underline; }
.ci-promo-bar button { display: inline-flex; align-items: center; justify-content: center; width: var(--ci-tap); height: var(--ci-tap); border: 0; background: transparent; color: var(--ci-paper); cursor: pointer; }

/* Toasts: bottom centre */
.ci-toasts {
    position: fixed;
    left: 50%;
    bottom: var(--ci-s5);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ci-s2);
    width: min(480px, calc(100vw - 2 * var(--ci-gutter)));
    transform: translateX(-50%);
    pointer-events: none;
}
.ci-toast {
    display: flex;
    align-items: center;
    gap: var(--ci-s3);
    width: 100%;
    padding: var(--ci-s3) var(--ci-s2) var(--ci-s3) var(--ci-s4);
    border-radius: var(--ci-r-field);
    box-shadow: var(--ci-shadow-toast);
    font: 500 14px/1.4 var(--ci-sans);
    pointer-events: auto;
}
.ci-toast span { flex: 1; }
.ci-toast--success { background: var(--ci-deep-forest); color: var(--ci-paper); }
.ci-toast--info { background: var(--ci-surface); color: var(--ci-ink); border: 1px solid var(--ci-line); }
.ci-toast--error { background: var(--ci-error-tint); color: var(--ci-error-text); }
.ci-toast__close { min-width: 32px; min-height: 32px; border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }

/* The cookie banner and settings (cookieconsent 3) in the new colours and fonts */
#cc-main {
    --cc-font-family: var(--ci-sans);
    --cc-bg: var(--ci-surface);
    --cc-primary-color: var(--ci-ink);
    --cc-secondary-color: var(--ci-muted);
    --cc-btn-primary-bg: var(--ci-forest);
    --cc-btn-primary-color: var(--ci-white);
    --cc-btn-primary-border-color: var(--ci-forest);
    --cc-btn-primary-hover-bg: var(--ci-deep-forest);
    --cc-btn-primary-hover-border-color: var(--ci-deep-forest);
    --cc-btn-secondary-bg: var(--ci-paper);
    --cc-btn-secondary-color: var(--ci-forest);
    --cc-btn-secondary-border-color: var(--ci-forest);
    --cc-btn-secondary-hover-bg: var(--ci-moss);
    --cc-btn-secondary-hover-border-color: var(--ci-forest);
    --cc-separator-border-color: var(--ci-line);
    --cc-toggle-on-bg: var(--ci-forest);
    --cc-toggle-off-bg: var(--ci-field-border);
    --cc-toggle-readonly-bg: var(--ci-moss);
    --cc-cookie-category-block-bg: var(--ci-paper);
    --cc-cookie-category-block-border: var(--ci-line);
    --cc-overlay-bg: rgba(18, 51, 38, .45);
    --cc-modal-border-radius: var(--ci-r-panel);
    --cc-btn-border-radius: var(--ci-r-pill);
}

/* Support us (BR Stage 3, PR 4: ModalsUtility, S42) */
.ci-support__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ci-s2); margin: var(--ci-s4) 0 var(--ci-s3); }
.ci-support__option { display: grid; gap: 2px; padding: var(--ci-s4); border: 1px solid var(--ci-line); border-radius: var(--ci-r-field);
    color: var(--ci-ink); text-decoration: none; }
.ci-support__option:hover { border-color: var(--ci-forest); background: var(--ci-moss); color: var(--ci-ink); }
.ci-support__option span { color: var(--ci-muted); font: var(--ci-small); }
.ci-ref-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; }
@media (max-width: 599px) { .ci-support__options { grid-template-columns: 1fr; } }