/* LRA cards use rounded corners, Inter body copy and Lora headings. */
#cc-main {
    --cc-font-family: inter, sans-serif;
    --cc-bg: #fff;
    --cc-primary-color: #0d3068;
    --cc-secondary-color: #354b66;
    --cc-btn-primary-bg: #0d3068;
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: #0d3068;
    --cc-btn-primary-hover-bg: #1a4a8f;
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: #1a4a8f;
    --cc-btn-secondary-bg: #fff;
    --cc-btn-secondary-color: #0d3068;
    --cc-btn-secondary-border-color: #0d3068;
    --cc-btn-secondary-hover-bg: #edf4fa;
    --cc-btn-secondary-hover-color: #0d3068;
    --cc-btn-secondary-hover-border-color: #0d3068;
    --cc-link-color: #006b7c;
    --cc-separator-border-color: #d6e1ed;
    --cc-toggle-on-bg: #007e92;
    --cc-toggle-off-bg: #64748b;
    --cc-toggle-on-knob-bg: #fff;
    --cc-toggle-off-knob-bg: #fff;
    --cc-toggle-readonly-bg: #0d3068;
    --cc-toggle-readonly-knob-bg: #fff;
    --cc-toggle-readonly-knob-icon-color: #0d3068;
    --cc-cookie-category-block-bg: #f3f7fb;
    --cc-cookie-category-block-border: #d6e1ed;
    --cc-cookie-category-block-hover-bg: #e8f1f8;
    --cc-cookie-category-block-hover-border: #b8cadf;
    --cc-cookie-category-expanded-block-bg: #fff;
    --cc-cookie-category-expanded-block-hover-bg: #edf4fa;
    --cc-section-category-border: #d6e1ed;
    --cc-footer-bg: #f3f7fb;
    --cc-footer-color: #354b66;
    --cc-footer-border-color: #d6e1ed;
    --cc-modal-border-radius: 16px;
    --cc-btn-border-radius: 10px;
    --cc-modal-margin: 24px;
    --cc-z-index: 9970;
}

#cc-main .cm,
#cc-main .pm {
    border: 1px solid #d6e1ed;
    box-shadow: 0 12px 40px rgb(13 48 104 / 18%);
}

#cc-main .cm__title,
#cc-main .pm__title {
    font-family: Lora, Georgia, serif;
    color: #0d3068;
}

/* All three banner choices have the same size, colour and weight. */
#cc-main .cm__btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#cc-main .cm__btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#cc-main .cm__btn {
    margin: 0;
    min-height: 44px;
}

#cc-main .cm__btn[data-role="show"] {
    background: var(--cc-btn-primary-bg);
    border-color: var(--cc-btn-primary-border-color);
    color: var(--cc-btn-primary-color);
}

#cc-main .cm__btn[data-role="show"]:hover {
    background: var(--cc-btn-primary-hover-bg);
    border-color: var(--cc-btn-primary-hover-border-color);
}

#cc-main button:focus-visible,
#cc-main a:focus-visible,
#cc-main input:focus-visible {
    outline: 3px solid #007e92;
    outline-offset: 3px;
}

/* RTL chat is on the left: keep the consent card on the opposite side. */
#cc-main.cc--rtl .cm--left {
    left: auto;
    right: var(--cc-modal-margin);
}

@media (width <= 900px) {
    #cc-main .cm.cm--box {
        width: 100%;
        max-width: none;
        margin: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 16px 16px 0 0;
        max-height: 65dvh;
    }

    /* Keep the adviser launcher, teaser and open panel above the sheet. */
    html.show--consent .lra-chat-launcher,
    html.show--consent .lra-chat-panel {
        bottom: calc(var(--lra-consent-height, 0px) + 16px);
    }

    html.show--consent .lra-chat-panel {
        max-height: calc(100dvh - var(--lra-consent-height, 0px) - 32px);
    }

    html.show--consent .lra-chat-teaser {
        bottom: calc(var(--lra-consent-height, 0px) + 84px);
    }
}