/* ==========================================================
   Consenso cookie (Klaro) nel tema dell'Ordine

   Klaro arriva con la sua veste: fondo grigio scuro, bottoni
   verdi e azzurri, testo piccolo. E' la prima cosa che vede chi
   apre il sito, quindi deve parlare la stessa lingua del resto:
   superficie chiara, carattere Titillium, rosso istituzionale
   sull'azione principale e focus sempre visibile.

   Questo foglio si carica dopo klaro.min.css e ne riscrive solo
   cio' che serve: colori, tipografia, spaziature e stati.
   ========================================================== */

.klaro {
    --klaro-superficie: #fff;
    --klaro-testo: var(--ordine-text, #1a1a1a);
    --klaro-testo-tenue: #5b5b5b;
    --klaro-bordo: var(--ordine-neutral-300, #dcdada);
    --klaro-primario: var(--ordine-primary, #b21717);
    --klaro-primario-scuro: var(--ordine-primary-dark, #8d1212);
    --klaro-primario-tenue: var(--ordine-primary-light, #f7eaea);

    /* variabili lette da klaro stesso per interruttori e link */
    --green1: var(--ordine-primary, #b21717);
    --green2: var(--ordine-primary-dark, #8d1212);
    --green3: var(--ordine-primary-light, #f7eaea);
    --font-color-dark: var(--ordine-text, #1a1a1a);
}

/* ── Superficie ─────────────────────────────────────────── */
.klaro .cookie-modal,
.klaro .cookie-notice,
.klaro .context-notice {
    font-family: 'Titillium Web', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.klaro .cookie-modal .cm-bg {
    background: rgba(0, 0, 0, .6);
}

.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-notice:not(.cookie-modal-notice) {
    background: var(--klaro-superficie);
    color: var(--klaro-testo);
    border-radius: 4px;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2);
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
    border-top: 4px solid var(--klaro-primario);
    max-width: 40rem;
}

.klaro .cookie-modal .cm-modal.cm-klaro {
    border-top: 4px solid var(--klaro-primario);
}

    .klaro .cookie-modal .cm-modal .cm-header,
    .klaro .cookie-modal .cm-modal .cm-body,
    .klaro .cookie-modal .cm-modal .cm-footer {
        border-color: var(--klaro-bordo);
        padding: 1.25rem 1.5rem;
    }

    .klaro .cookie-modal .cm-modal .cm-header h1,
    .klaro .cookie-notice p.cn-ok ~ *,
    .klaro .cookie-modal .cm-modal .cm-header h1.title {
        font-size: 1.375rem;
        font-weight: 700;
        color: var(--klaro-testo);
        margin: 0 0 .5rem;
    }

/* ── Testi ──────────────────────────────────────────────── */
.klaro .cookie-modal p,
.klaro .cookie-notice p,
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-services .cm-content p {
    color: var(--klaro-testo);
}

.klaro .cookie-modal .cm-purpose .cm-list-title,
.klaro .cookie-modal .cm-services .cm-list-title,
.klaro .cookie-notice .cm-list-title {
    color: var(--klaro-testo);
    font-weight: 600;
}

.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-caret,
.klaro .cookie-modal .purposes,
.klaro .cookie-notice .cm-list-description {
    color: var(--klaro-testo-tenue);
    font-size: .875rem;
}

.klaro .cookie-modal a,
.klaro .cookie-notice a,
.klaro .cookie-modal .cm-caret a {
    color: var(--klaro-primario);
    text-decoration: underline;
    text-underline-offset: .2em;
}

    .klaro .cookie-modal a:hover,
    .klaro .cookie-notice a:hover {
        color: var(--klaro-primario-scuro);
        text-decoration-thickness: 2px;
    }

/* ── Interruttori ───────────────────────────────────────── */
.klaro .cookie-modal .cm-switch-container,
.klaro .cookie-notice .cm-switch-container {
    border-bottom-color: var(--klaro-bordo);
    padding: .875rem .75rem .875rem 66px;
}

.klaro .cookie-modal .slider,
.klaro .cookie-notice .slider {
    background-color: #8a8a8a;
    box-shadow: none;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--klaro-primario);
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
    background-color: var(--klaro-primario);
    opacity: .55;
}

.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:focus + .cm-list-label .slider {
    outline: 3px solid var(--klaro-primario);
    outline-offset: 2px;
}

/* ── Bottoni ────────────────────────────────────────────────
   Klaro scrive le sue regole dentro .cookie-modal e .cookie-notice:
   per riscriverle serve la stessa profondita', altrimenti vincono
   loro. L'ordine conta: "salva" porta insieme le classi info e
   success, e deve restare l'azione principale. */
.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .context-notice .cm-btn {
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    border-radius: 4px;
    padding: .5rem 1.25rem;
    border: 2px solid transparent;
    opacity: 1;
    transition: background-color .15s, color .15s, border-color .15s;
}

    .klaro .cookie-modal .cm-btn:focus-visible,
    .klaro .cookie-notice .cm-btn:focus-visible,
    .klaro .context-notice .cm-btn:focus-visible {
        outline: 3px solid var(--klaro-primario);
        outline-offset: 2px;
    }

/* rifiuta: neutro ma con lo stesso peso visivo, come chiede il GDPR */
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-decline,
.klaro .cookie-modal .cm-btn.cn-decline,
.klaro .cookie-notice .cm-btn.cn-decline {
    background-color: transparent;
    border-color: #8a8a8a;
    color: var(--klaro-testo);
}

    .klaro .cookie-modal .cm-btn.cm-btn-decline:hover,
    .klaro .cookie-notice .cm-btn.cm-btn-decline:hover,
    .klaro .cookie-modal .cm-btn.cn-decline:hover,
    .klaro .cookie-notice .cm-btn.cn-decline:hover {
        background-color: #f2f2f2;
        border-color: var(--klaro-testo);
    }

/* accetta solo la selezione: azione secondaria, in filo di contorno */
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-info {
    background-color: transparent;
    border-color: var(--klaro-primario);
    color: var(--klaro-primario);
}

    .klaro .cookie-modal .cm-btn.cm-btn-info:hover,
    .klaro .cookie-notice .cm-btn.cm-btn-info:hover,
    .klaro .context-notice .cm-btn.cm-btn-info:hover {
        background-color: var(--klaro-primario-tenue);
        color: var(--klaro-primario-scuro);
    }

/* accetta tutto e salva: azione principale, piena */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all {
    background-color: var(--klaro-primario);
    border-color: var(--klaro-primario);
    color: #fff;
}

    .klaro .cookie-modal .cm-btn.cm-btn-success:hover,
    .klaro .cookie-notice .cm-btn.cm-btn-success:hover,
    .klaro .context-notice .cm-btn.cm-btn-success:hover,
    .klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover,
    .klaro .cookie-notice .cm-btn.cm-btn-accept-all:hover {
        background-color: var(--klaro-primario-scuro);
        border-color: var(--klaro-primario-scuro);
    }

/* "accetta la selezione" porta anche la classe success: qui torna
   secondaria, perche' la gerarchia sia leggibile a colpo d'occhio
   (rifiuta - selezione - accetta tutto) */
.klaro .cookie-modal .cm-btn.cm-btn-accept:not(.cm-btn-accept-all),
.klaro .cookie-notice .cm-btn.cm-btn-accept:not(.cm-btn-accept-all) {
    background-color: transparent;
    border-color: var(--klaro-primario);
    color: var(--klaro-primario);
}

    .klaro .cookie-modal .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):hover,
    .klaro .cookie-notice .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):hover {
        background-color: var(--klaro-primario-tenue);
        color: var(--klaro-primario-scuro);
    }

.klaro .cookie-modal .cm-footer-buttons,
.klaro .cookie-notice .cn-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── Coda ───────────────────────────────────────────────── */
.klaro .cookie-modal .cm-powered-by,
.klaro .cookie-notice .cm-powered-by {
    font-size: .75rem;
    padding-top: .75rem;
}

    .klaro .cookie-modal .cm-powered-by a,
    .klaro .cookie-notice .cm-powered-by a {
        color: var(--klaro-testo-tenue);
        text-decoration: none;
    }

/* Su schermo stretto i bottoni stanno in colonna e prendono tutta
   la larghezza: sono bersagli, non decorazioni */
@media (max-width: 575.98px) {
    .klaro .cookie-modal .cm-footer-buttons,
    .klaro .cookie-notice .cn-buttons {
        flex-direction: column;
    }

        .klaro .cookie-modal .cm-footer-buttons .cm-btn,
        .klaro .cookie-notice .cn-buttons .cm-btn {
            width: 100%;
            margin: 0;
        }
}