/*
 * Klaro Cookie Banner – Colour customisation Coconut Pearl
 * Overrides the Klaro CSS variables within .klaro
 *
 * Project colours used:
 *   --color-2    rgba(48, 84, 105, 1)      Dark blue
 *   --color-14   rgba(45, 184, 191, 1)     Cyan
 *   --color-12-1 rgba(242, 241, 234, 1)    Light beige
 *
 * Overridden Klaro classes / variables:
 *   .klaro                          → CSS variables overall
 *   .klaro .cookie-notice           → Banner bottom
 *   .klaro .cookie-modal .cm-modal  → Modal window
 *   .klaro .cm-btn.cm-btn-success   → Accept button
 *   .klaro .cm-btn.cm-btn-success-var → Required toggle
 */

.klaro {
    --dark1:         var(--color-2);        /* Dark blue   – banner / modal background   */
    --dark2:         var(--color-2-50);     /* Dark blue   – dividers, secondary         */
    --dark3:         var(--color-2-50);     /* Dark blue   – description text            */
    --light1:        var(--color-12-1);     /* Beige       – text & light surfaces       */
    --light2:        var(--color-12);       /* Beige       – borders                    */
    --light3:        var(--color-12);       /* Beige       – subtle text               */
    --green1:        var(--color-14);       /* Cyan        – accept button               */
    --green2:        var(--color-14);       /* Cyan        – required toggle             */
    --green3:        var(--color-14);       /* Cyan        – focus highlight             */
    --font-family:   var(--font-text-light);
    --border-radius: 8px;
}

/* Bold text: titles, buttons, labels */
.klaro .cm-list-title,
.klaro .cm-btn,
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-notice .cn-title {
    font-family: var(--font-text-medium);
}

/* Larger text */
.klaro .cookie-modal p,
.klaro .cookie-modal span,
.klaro .cookie-modal li,
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-list-title,
.klaro .cookie-notice p,
.klaro .cookie-notice span {
    font-size: 1rem;
}

/* Modal title "Cookie Settings" */
.klaro .cookie-modal h1.title span {
    font-size: var(--font-size-5);
    font-family: var(--font-text-medium);
}

/* "Functional" label */
.klaro .cm-list-title {
    font-size: 1rem;
    font-family: var(--font-text-medium);
}

/* Save button cyan + more padding */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var,
.klaro .cm-btn.cm-btn-accept,
.klaro .cm-btn.cm-btn-accept-all {
    background-color: var(--color-14) !important;
    padding: 0.6em 1.4em !important;
}

/* All buttons more padding */
.klaro .cm-btn {
    padding: 0.6em 1.4em !important;
}