/*
 * OKclarity theme for the cookie consent banner (vanilla-cookieconsent 3.1.0).
 *
 * The vendor file css/cookieconsent.css is left untouched so it can be upgraded
 * in place. This file only redefines the vendor's CSS variables and a few button
 * rules. Load it AFTER cookieconsent.css.
 *
 * The values match the Next app's banner (okclarity.next, app/globals.css, the
 * "Cookie banner" block), because these pages now share the new header. Keep the
 * two in sync:
 *   - #007ffc  site blue, used by buttons and links
 *   - #323232  heading text
 *   - #707070  body text
 *   - #f9f9f9  footer background
 *   - 8px      popup corner radius, pill-shaped buttons
 *   - "Open Sans" site font
 */

/* Overall look: site font, white background, site text colors, site-blue links. */
#cc-main {
    --cc-font-family: "Open Sans", "PT Sans", Calibri, Tahoma, sans-serif;
    --cc-bg: #fff;
    --cc-primary-color: #323232;
    --cc-secondary-color: #707070;
    --cc-link-color: #007ffc;
    --cc-modal-border-radius: 8px;
    --cc-btn-border-radius: 9999px;
}

/* Primary button (Accept): solid site blue, like the new site's primary buttons. */
#cc-main {
    --cc-btn-primary-bg: #007ffc;
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: #007ffc;
    --cc-btn-primary-hover-bg: #0067cc;
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: #0067cc;
}

/* Secondary button (Decline): outlined site blue, light-blue fill on hover. */
#cc-main {
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: #007ffc;
    --cc-btn-secondary-border-color: #007ffc;
    --cc-btn-secondary-hover-bg: #ddeeff;
    --cc-btn-secondary-hover-color: #007ffc;
    --cc-btn-secondary-hover-border-color: #007ffc;
}

/* Preferences modal: toggles in brand blue, footer and dividers in the site's light grey. */
#cc-main {
    --cc-toggle-on-bg: #18b8ea;
    --cc-toggle-on-knob-bg: #fff;
    --cc-toggle-off-bg: #dbdbdb;
    --cc-toggle-off-knob-bg: #fff;
    --cc-toggle-readonly-bg: #e0e0e0;
    --cc-toggle-readonly-knob-bg: #fff;
    --cc-footer-bg: #f9f9f9;
    --cc-footer-border-color: rgba(0, 0, 0, 0.05);
    --cc-separator-border-color: #e0e0e0;
    --cc-cookie-category-block-bg: #f9f9f9;
    --cc-cookie-category-block-border: #f9f9f9;
    --cc-cookie-category-block-hover-bg: #f0f0f0;
    --cc-cookie-category-block-hover-border: #f0f0f0;
}

/* Button text and padding to match the Next app's banner (14px, bold, 10px 24px). */
#cc-main .cm__btn,
#cc-main .pm__btn {
    font-size: 14px;
    font-weight: 700;
    padding: 10px 24px;
    transition: all 0.2s ease-in-out;
}

/*
 * Preferences popup sections. The vendor CSS draws every section after the first as a
 * bordered, padded "category block" (meant for rows with a toggle). Our sections are plain
 * text with no toggles, so make them all look like the first one: no box, no indent, no
 * hover background, just a gap between them.
 */
#cc-main .pm__section:first-child {
    margin-bottom: 0;
}

#cc-main .pm__section:not(:first-child) {
    border: none;
    padding: 0;
    margin-top: 1.5em;
}

#cc-main .pm__section:not(:first-child):hover {
    background: transparent;
    border-color: transparent;
}

/*
 * Preferences popup buttons. The vendor always renders two button groups in the footer:
 * Accept + Decline on the left, and a Save group on the right. We show no Save button, so
 * the right group is empty. Hide it, let the remaining group fill the footer, and give each
 * button an equal share so Accept and Decline sit evenly side by side. The vendor's mobile
 * rules (below 640px) stack the buttons vertically and are left as they are.
 */
#cc-main .pm__btn-group:empty {
    display: none;
}

#cc-main .pm__btn-group {
    flex: 1;
}

#cc-main .pm__btn-group .pm__btn {
    flex: 1;
}

#cc-main .pm__btn + .pm__btn {
    margin-left: 0.75rem;
}