/*
 * Cookie manager del sito. Colori e carattere vengono dal tema attivo (--hb-t-*); senza tema valgono i valori di partenza.
 * La larghezza su schermo grande è la variabile --hb-ck-larghezza (scelta nelle impostazioni). Sul telefono il banner occupa
 * tutta la larghezza in basso (o in alto) ed è il più basso possibile: i tre comandi stanno su una sola riga.
 */

.hb-ck,
.hb-ck-gestisci,
.hb-ck-preferenze {
    --hb-ck-fondo: var(--hb-t-fondo, #ffffff);
    --hb-ck-testo: var(--hb-t-testo, #1a1a1a);
    --hb-ck-tenue: var(--hb-t-tenue, #6b6b6b);
    --hb-ck-bordo: var(--hb-t-bordo, #d9d9d4);
    --hb-ck-azione: var(--hb-t-azione, #111111);
    --hb-ck-azione-testo: var(--hb-t-azione-testo, #ffffff);
    --hb-ck-interruttore: var(--hb-t-bordo, #c8c8c2);
    box-sizing: border-box;
    font-family: inherit;
}

.hb-ck *,
.hb-ck-gestisci {
    box-sizing: border-box;
}

.hb-ck[hidden],
.hb-ck [hidden],
.hb-ck-gestisci[hidden] {
    display: none !important;
}

.hb-ck {
    position: fixed;
    z-index: 2147483000;
    left: 0;
    right: 0;
    max-height: 100vh;
    overflow-y: auto;
    background: var(--hb-ck-fondo);
    color: var(--hb-ck-testo);
    border: 1px solid var(--hb-ck-bordo);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.hb-ck-v-bottom {
    bottom: 0;
    border-bottom: 0;
}

.hb-ck-v-top {
    top: 0;
    border-top: 0;
}

.hb-ck-dentro {
    padding: 0.625rem 0.75rem;
}

.hb-ck-titolo {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.hb-ck-testo {
    margin: 0 0 0.375rem;
}

.hb-ck-link {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
}

.hb-ck-link a {
    margin-right: 1rem;
    color: inherit;
    text-decoration: underline;
}

.hb-ck-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

.hb-ck-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.625rem;
    border: 2px solid var(--hb-ck-azione);
    border-radius: 8px;
    background: transparent;
    color: var(--hb-ck-azione);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.hb-ck-btn-primario {
    background: var(--hb-ck-azione);
    color: var(--hb-ck-azione-testo);
}

.hb-ck-btn-testo {
    flex: 0 0 auto;
    padding-right: 0.25rem;
    padding-left: 0.25rem;
    border-color: transparent;
    font-weight: 500;
    text-decoration: underline;
}

.hb-ck-btn:focus-visible,
.hb-ck-gestisci:focus-visible,
.hb-ck-preferenze button:focus-visible,
.hb-ck-interruttore input:focus-visible + span {
    outline: 2px solid var(--hb-ck-azione);
    outline-offset: 2px;
}

.hb-ck-categorie {
    margin: 0 0 0.5rem;
    border-top: 1px solid var(--hb-ck-bordo);
}

.hb-ck-categoria {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--hb-ck-bordo);
}

.hb-ck-categoria strong {
    display: block;
}

.hb-ck-categoria small {
    display: block;
    color: var(--hb-ck-tenue);
    font-size: 0.75rem;
    line-height: 1.35;
}

.hb-ck-sempre {
    flex: 0 0 auto;
    color: var(--hb-ck-tenue);
    font-size: 0.75rem;
}

.hb-ck-interruttore {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    width: 48px;
    height: 28px;
}

.hb-ck-interruttore input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.hb-ck-interruttore span {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: var(--hb-ck-interruttore);
    pointer-events: none;
    transition: background 0.15s;
}

.hb-ck-interruttore span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.15s;
}

.hb-ck-interruttore input:checked + span {
    background: var(--hb-ck-azione);
}

.hb-ck-interruttore input:checked + span::after {
    transform: translateX(20px);
}

.hb-ck-gestisci {
    position: fixed;
    z-index: 2147482999;
    left: 0.75rem;
    bottom: 0.75rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--hb-ck-bordo);
    border-radius: 22px;
    background: var(--hb-ck-fondo);
    color: var(--hb-ck-testo);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

/* Pulsante [cookie_preferenze] dentro le pagine (per esempio la Cookie Policy) */
.hb-ck-preferenze button {
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--hb-ck-azione);
    border-radius: 8px;
    background: var(--hb-ck-azione);
    color: var(--hb-ck-azione-testo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

@media (min-width: 640px) {
    .hb-ck {
        left: auto;
        right: auto;
        width: calc(100% - 2rem);
        max-width: var(--hb-ck-larghezza, 600px);
        border-radius: 12px;
        border-width: 1px;
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    .hb-ck-v-bottom {
        bottom: 1rem;
    }

    .hb-ck-v-top {
        top: 1rem;
    }

    .hb-ck-x-center {
        left: 50%;
        transform: translateX(-50%);
    }

    .hb-ck-x-left {
        left: 1rem;
    }

    .hb-ck-x-right {
        right: 1rem;
    }

    .hb-ck-dentro {
        padding: 1.25rem;
    }

    .hb-ck-titolo {
        margin-bottom: 0.375rem;
        font-size: 1.0625rem;
    }

    .hb-ck-testo {
        margin-bottom: 0.75rem;
    }

    .hb-ck-link {
        margin-bottom: 0.75rem;
        font-size: 0.875rem;
    }

    .hb-ck-btn {
        flex: 0 0 auto;
        padding: 0.625rem 1.125rem;
    }

    .hb-ck-btn-testo {
        margin-left: auto;
    }

    .hb-ck-categoria small,
    .hb-ck-sempre {
        font-size: 0.8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hb-ck-interruttore span,
    .hb-ck-interruttore span::after {
        transition: none;
    }
}
