.cookie-banner {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    background-color: #001438; /* Verde scuro come nell'immagine */

    color: #fff;

    padding: 20px;

    box-sizing: border-box;

    display: flex; /* Flexbox per allineare contenuto e pulsanti */

    justify-content: center; /* Centra il contenuto orizzontalmente */

    align-items: flex-start; /* Allinea gli elementi in alto */

    flex-wrap: wrap; /* Permette agli elementi di andare a capo */

    gap: 30px; /* Spazio tra le sezioni principali */

    z-index: 1000; /* Assicura che sia sopra tutto il resto */

    transition: transform 0.3s ease-in-out;

}



.cookie-banner.hidden {

    transform: translateY(100%);

    /* display: none; /* Alternativa se non vuoi animazione */

}



.cookie-content {

    display: flex;

    max-width: 1200px; /* Larghezza massima del contenuto interno */

    width: 100%;

    gap: 40px; /* Spazio tra le colonne principali */

    flex-wrap: wrap; /* Permette il wrap su schermi piccoli */

    justify-content: space-between; /* Spinge le colonne ai lati */

}



.cookie-text-section {

    flex: 1; /* Prende spazio disponibile */

    min-width: 300px; /* Larghezza minima per evitare schiacciamento */

    padding-right: 20px; /* Spazio a destra del testo */

    border-right: 1px solid #336633; /* Linea verticale */

}



.cookie-text-section h2 {

    color: #fff;

    margin-top: 0;

    font-size: 1.8em;

}



.cookie-text-section p {

    font-size: 0.95em;

    line-height: 1.5;

    opacity: 0.9;

}



.cookie-options-section {

    flex: 1.2; /* Prende più spazio delle altre colonne */

    min-width: 400px; /* Larghezza minima */

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px; /* Spazio tra i gruppi di toggle */

    padding-left: 20px;

    border-left: 1px solid #001438; /* Linea verticale */

}



.cookie-toggle-group {

    display: flex;

    flex-wrap: wrap;

    gap: 30px; /* Spazio tra i singoli toggle */

    align-items: center;

}



.cookie-option {

    display: flex;

    align-items: center;

    gap: 10px;

}



.cookie-option span {

    font-size: 0.9em;

    white-space: nowrap; /* Evita che il testo vada a capo */

}



.cookie-buttons-section {

    flex: 1.5; /* Prende meno spazio, va a capo se necessario */

    min-width: 250px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    justify-content: center; /* Centra verticalmente i bottoni */

    padding-left: 20px;

}



/* Stili per i toggle switch (copiato e adattato da un esempio comune) */

.toggle-switch {

    position: relative;

    display: inline-block;

    width: 50px;

    height: 28px;

}



.toggle-switch input {

    opacity: 0;

    width: 0;

    height: 0;

}



.slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    -webkit-transition: .4s;

    transition: .4s;

}



.slider:before {

    position: absolute;

    content: "";

    height: 20px;

    width: 20px;

    left: 4px;

    bottom: 4px;

    background-color: white;

    -webkit-transition: .4s;

    transition: .4s;

}



input:checked + .slider {

    background-color: #2196F3; /* Blu come nell'immagine per attivo */

}



input:focus + .slider {

    box-shadow: 0 0 1px #2196F3;

}



input:checked + .slider:before {

    -webkit-transform: translateX(22px);

    -ms-transform: translateX(22px);

    transform: translateX(22px);

}



/* Rounded sliders */

.slider.round {

    border-radius: 28px;

}



.slider.round:before {

    border-radius: 50%;

}



/* Stili per i bottoni */

.btn-primary, .btn-secondary, .btn-tertiary, .text-button {

    padding: 12px 25px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    font-weight: bold;

    font-size: 0.9em;

    transition: background-color 0.2s ease, color 0.2s ease;

    white-space: nowrap;

}



.btn-primary {

    background-color: #0047b3; /* Blu scuro */

    color: white;

}



.btn-primary:hover {

    background-color: #003a8f;

}



.btn-secondary {

    background-color: transparent;

    color: #a0f0a0; /* Verde chiaro per testo */

    border: 1px solid #336633; /* Bordo verde */

}



.btn-secondary:hover {

    background-color: #1a4d1a;

    color: white;

}



.btn-tertiary {

    background-color: transparent;

    color: #a0f0a0; /* Verde chiaro per testo */

    border: 1px solid #336633; /* Bordo verde */

}



.btn-tertiary:hover {

    background-color: #1a4d1a;

    color: white;

}



.text-button {

    background: none;

    color: #fff;

    padding: 5px 0;

    text-align: left;

    font-size: 0.85em;

    text-decoration: underline;

}



.text-button:hover {

    color: #a0f0a0;

}



/* Stili per il pannello dei dettagli */

.cookie-details-panel {

    background-color: #001438; /* Stesso sfondo del banner */

    color: #fff;

    padding: 20px;

    box-sizing: border-box;

    width: 100%;

    margin-top: 20px;

    border-top: 1px solid #336633;

}



.cookie-details-panel h3 {

    margin-top: 0;

    color: #fff;

}



.cookie-details-panel p {

    margin-bottom: 10px;

    font-size: 0.9em;

}



.cookie-details-panel.hidden {

    display: none;

}





/* Media Queries per la responsività */

@media (max-width: 992px) {

    .cookie-content {

        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 20px;

    }



    .cookie-text-section,

    .cookie-options-section,

    .cookie-buttons-section {

        border: none; /* Rimuovi i bordi verticali su schermi più piccoli */

        padding: 0;

        min-width: unset; /* Rimuovi il min-width */

        width: 100%;

        max-width: 600px; /* Limita la larghezza su schermi piccoli */

    }



    .cookie-options-section {

        align-items: center;

    }



    .cookie-toggle-group {

        justify-content: center; /* Centra i toggle */

    }



    .cookie-text-section {

        text-align: center;

    }

    .cookie-buttons-section {

        align-items: center;

    }

}



@media (max-width: 600px) {

    .cookie-banner {

        padding: 15px;

    }

    .cookie-text-section h2 {

        font-size: 1.5em;

    }

    .cookie-text-section p {

        font-size: 0.9em;

    }

    .cookie-toggle-group {

        flex-direction: column; /* Impila i toggle verticalmente */

        gap: 15px;

    }

    .btn-primary, .btn-secondary, .btn-tertiary {

        width: 100%; /* I bottoni occupano tutta la larghezza */

        padding: 10px 15px;

    }

}