/* =========================================================
   NEXTou COOKIE BANNER
   ========================================================= */

#nextou-cookie-banner {
    position: fixed;

    left: 20px;
    right: 20px;
    bottom: 20px;

    z-index: 999999;

    max-width: 900px;

    margin: 0 auto;

    padding: 24px;

    background: #ffffff;

    color: #222222;

    border: 1px solid #dddddd;

    border-radius: 12px;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.18);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.5;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}


/* Banner visibile */

#nextou-cookie-banner.nextou-cookie-visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


/* Titolo */

#nextou-cookie-banner h2 {

    margin: 0 0 10px;

    font-size: 20px;

    line-height: 1.3;
}


/* Testo */

#nextou-cookie-banner p {

    margin: 0 0 15px;
}


/* Link */

#nextou-cookie-banner a {

    color: inherit;

    text-decoration:
        underline;
}


/* =========================================================
   PULSANTI
   ========================================================= */

.nextou-cookie-buttons {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 15px;
}


.nextou-cookie-button {

    min-height: 42px;

    padding:
        10px 18px;

    border-radius: 7px;

    border:
        1px solid #cccccc;

    background:
        #ffffff;

    color:
        #222222;

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        opacity 0.2s ease,
        background 0.2s ease;
}


.nextou-cookie-button:hover {

    opacity:
        0.85;
}


/* Accetta */

#nextou-cookie-accept {

    background:
        #222222;

    border-color:
        #222222;

    color:
        #ffffff;
}


/* Rifiuta */

#nextou-cookie-reject {

    background:
        #eeeeee;

    color:
        #222222;
}


/* Preferenze */

#nextou-cookie-preferences-button {

    background:
        #ffffff;
}


/* =========================================================
   PREFERENZE
   ========================================================= */

#nextou-cookie-preferences {

    display: none;

    margin-top: 20px;

    padding-top: 18px;

    border-top:
        1px solid #dddddd;
}


#nextou-cookie-preferences.nextou-preferences-visible {

    display:
        block;
}


.nextou-cookie-option {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        12px 0;
}


.nextou-cookie-option-title {

    font-weight:
        700;

    margin-bottom:
        3px;
}


.nextou-cookie-option-description {

    font-size:
        13px;

    color:
        #666666;
}


/* =========================================================
   SWITCH
   ========================================================= */

.nextou-switch {

    position:
        relative;

    width:
        48px;

    min-width:
        48px;

    height:
        26px;
}


.nextou-switch input {

    opacity:
        0;

    width:
        0;

    height:
        0;
}


.nextou-slider {

    position:
        absolute;

    inset:
        0;

    cursor:
        pointer;

    background:
        #cccccc;

    border-radius:
        30px;

    transition:
        0.2s;
}


.nextou-slider:before {

    content:
        "";

    position:
        absolute;

    width:
        20px;

    height:
        20px;

    left:
        3px;

    top:
        3px;

    background:
        #ffffff;

    border-radius:
        50%;

    transition:
        0.2s;
}


.nextou-switch input:checked
+ .nextou-slider {

    background:
        #222222;
}


.nextou-switch input:checked
+ .nextou-slider:before {

    transform:
        translateX(22px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #nextou-cookie-banner {

        left:
            10px;

        right:
            10px;

        bottom:
            10px;

        padding:
            18px;

        max-height:
            calc(100vh - 20px);

        overflow-y:
            auto;
    }


    .nextou-cookie-buttons {

        flex-direction:
            column;
    }


    .nextou-cookie-button {

        width:
            100%;
    }


    .nextou-cookie-option {

        align-items:
            flex-start;
    }
}