/*
 * Crasta — le aggiunte del CMS al vecchio aspetto: l'avviso dei cookie, i
 * video bloccati, l'esito dei moduli, la 404. Il resto lo fanno i CSS di
 * Elementor in tema/wp/.
 */
[hidden] { display: none !important; }

/* La palette di Crasta (i colori globali di Elementor del vivo):
   azzurro #00ABC8, viola #8347AD, notte #12002A, grigio #E9E9E9. */
:root { --cr-azzurro: #00ABC8; --cr-viola: #8347AD; --cr-notte: #12002A; --cr-grigio: #E9E9E9; }

/* L'avviso dei cookie, nei colori del sito. */
.cr-cookie {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99999;
    max-width: 720px; margin: 0 auto; padding: 18px 20px;
    background: var(--cr-notte); color: #fff; border-radius: 6px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .3);
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.cr-cookie-testo { flex: 1 1 320px; font: 15px/1.5 "Rubik", sans-serif; color: #fff; }
.cr-cookie a { color: var(--cr-azzurro); font: inherit; text-decoration: underline; }
.cr-cookie-bottoni { display: flex; gap: 10px; }
.cr-cookie button {
    font: 500 14px/1 "Rubik", sans-serif; text-transform: uppercase; letter-spacing: .03em;
    padding: 12px 18px; border-radius: 4px; cursor: pointer; border: 1px solid #fff;
}
.cr-cookie .cr-cookie-si { background: var(--cr-azzurro); border-color: var(--cr-azzurro); color: #fff; }
.cr-cookie .cr-cookie-si:hover, .cr-cookie .cr-cookie-si:focus { background: #fff; border-color: #fff; color: var(--cr-notte); }
.cr-cookie .cr-cookie-no { background: transparent; color: #fff; }
.cr-cookie .cr-cookie-no:hover, .cr-cookie .cr-cookie-no:focus { background: #fff; color: var(--cr-notte); }
.cr-cookie-riapri {
    position: fixed; left: 12px; bottom: 12px; z-index: 9999; padding: 6px 10px;
    font: 12px/1 "Rubik", sans-serif; background: rgba(18, 0, 42, .75); color: #fff;
    border: 0; border-radius: 4px; cursor: pointer; opacity: .7;
}
.cr-cookie-riapri:hover { opacity: 1; background: var(--cr-notte); color: #fff; }

/* I video in attesa del consenso: l'anteprima e un bottone. */
.cr-bloccato { position: relative; background-size: cover; background-position: center; min-height: 200px; }
.cr-attiva {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    padding: 12px 18px; font: 500 15px/1 "Rubik", sans-serif; color: #fff;
    background: var(--cr-azzurro); border: 0; border-radius: 4px; cursor: pointer;
}

/* L'esito di un modulo (dopo l'invio si torna sulla pagina con ?inviato=1). */
.cr-inviato {
    position: fixed; left: 50%; top: 24px; transform: translateX(-50%); z-index: 99999;
    max-width: 90vw; padding: 14px 20px; border-radius: 6px;
    background: var(--cr-azzurro); color: #fff; font: 16px/1.4 "Rubik", sans-serif;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .25); animation: cr-sparisci 8s forwards;
}
@keyframes cr-sparisci { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.cr-nl-esito { width: 100%; margin-top: 10px; font: 15px/1.4 "Rubik", sans-serif; }

/* La pagina che non c'è. */
.cr-404 { max-width: 760px; margin: 0 auto; padding: 120px 24px; text-align: center; font-family: "Rubik", sans-serif; }
.cr-404 h1 { font-size: 42px; color: var(--cr-notte); margin-bottom: 12px; }
.cr-404 .elementor-button { margin: 8px; background: var(--cr-azzurro); color: #fff; padding: 14px 24px; border-radius: 4px; display: inline-block; }