:root {
    --main-padding: 15px;
    --color-yellow: #FFE033;
    --color-white: #FFFFFF;
    --color-purple: #9586FD;
    --color-purple-dark: #6A56A5;
    --color-violet: #47357B;
    --color-celeste: #9FD6FF;
    --color-green: #80C67E;
    --color-red: #F83140;
    --padding-box: 20px;
    --margin-box-top: 5px;
    --max-width: 600px;
}


body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: 'Poppins', sans-serif;
}
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
a {
    text-decoration: none;
    outline: none;
}
img {
    width: 100%;
}
input:focus,
textarea:focus {
    outline: none;
    /* border: none; */
}
input,
textarea {
    font-family: 'Poppins', sans-serif;
}
p,
h2,
h3 {
    margin: 0;
    padding: 0;
}
h2,
.main-page-title {
    font-size: 40px;
    line-height: 0.8em;
    font-weight: 700;
    letter-spacing: -1px;
}


.subtitle {
    font-size: 14px;
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0px;
}
.title30 {
    font-size: 30px;
    line-height: 1.2em;
    font-weight: 600;
}
.title20 {
    font-size: 20px;
    line-height: 1.2em;
    font-weight: 600;
}

.font-regular {
    font-weight: 400;
}








header {
    position: relative;
    z-index: 110;
}

    header .wrap-background {
        background-image: url("../img/sfumatura.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-position: center bottom+15px;
        background-color: #000000;
    }








header,
main,
footer,
#navigation {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
}
    main,
    #navigation #wrap-navigation {
        width: calc(100% - calc(var(--main-padding) * 2) );
        margin: 0 auto;
    }

#wrap-logo {
    position: absolute;
    top: 15px;
    left: auto;
    right: var(--main-padding);
    bottom: 0;
}
    #wrap-logo #logo {
        width: auto;
        height: 13px;
    }


#wrap-logo-cliente {
    position: absolute;
    top: 15px;
    left: var(--main-padding);
    right: auto;
    bottom: 0;
} 
    #wrap-logo-cliente #logo-cliente {
        width: auto;
        height: 40px;
    }


.hamburger {
    margin: 0;
    padding: 0;
    margin-left: auto;
}
.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
    border-radius: 0;
    background-color: #FFF;
    height: 3px;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {
    background-color: #FFF;
}


#action-icon.small .hamburger {
    margin-left: inherit;
}
#action-icon.small .btn-back {
    margin-right: auto
}







/* MAIN */
main {
    margin-bottom: 130px;
}



#action-icon {
    display: flex;
    gap: 20px;
    align-items: center;
    z-index: 100;
    position: relative;
    background-color: #000;
    padding: 0 var(--main-padding) 15px var(--main-padding);
}
#action-icon.small {
    justify-content: flex-end;
}
#action-icon a:not(#action-icon a.btn-back) {
    text-align: center;
    display: block;
    position: relative;
}
    #action-icon a img {
        width: auto;
        height: 30px;
    }
        #action-icon .label {
            font-weight: 400;
            font-size: 9px;
            color: #FFF;
            margin-top: 8px;
        }





#action-icon .quantity {
    width: 20px;
    height: 20px;
    background-color: var(--color-yellow);
    border-radius: 10px;
    overflow: hidden;
    color: #000;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -5px;
    right: -5px;
}


#welcome,
#section-title {
    margin-top: 40px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
#section-title {
    align-items: flex-start;
}
    #welcome .nome {
        display: block;
        color: #FFF;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 1px;
        text-align: center;
    }



    #welcome #ciao img,
    #section-title img {
        width: auto;
        max-height: 45px;
        max-width: 100%;
    }
    #welcome #ciao.double img,
    #section-title .double img {
        max-height: 90px;
    }






.box {
    border-radius: 15px;
    overflow: hidden;
    padding: var(--padding-box);
    position: relative;
    display: block;
}
    .box.yellow {
        background-color: var(--color-yellow);
    }
    .box.white {
        background-color: var(--color-white);
    }
    .box.purple {
        background-color: var(--color-purple);
    }
    .box.dark-purple {
        background-color: var(--color-purple-dark);
    }
    .box.red {
        background-color: var(--color-red);
    }
    .box.green {
        background-color: var(--color-green);
    }
    .box.celeste {
        background-color: var(--color-celeste);
    }
    
    .box.square50 {
        width: calc(calc(calc(100vw - calc(var(--main-padding) * 2)) / 2) - calc(var(--margin-box-top) / 2));
        height: calc(calc(calc(100vw - calc(var(--main-padding) * 2)) / 2) - calc(var(--margin-box-top) / 2));
        max-height: calc(calc(var(--max-width) / 2) - calc(var(--margin-box-top) / 2));
        max-width: calc(calc(var(--max-width) / 2) - calc(var(--margin-box-top) / 2));
    }
    .box.square50 img.icon {
        width: auto;
        height: 30px;
    }




#richiedi-appuntamento {
    background-image: url('../img/richiedi_appuntamento.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right+20px bottom;
    display: block;
    min-height: 200px;
}
#richiedi-appuntamento .plus {
    width: auto;
    height: 50px;
    margin-bottom: var(--padding-box);
}
    #richiedi-appuntamento h2 {
        color: #FFF;
    }




#vetrina {
    background-image: url('../img/vetrina.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    display: block;
    position: relative;
    height: 200px;
}
    #vetrina h2 {
        color: #FFF;
        margin-bottom: var(--padding-box);
    }
    #vetrina .arrow {
        width: 40px;
        height: auto;
    }
    #vetrina .arrow {
        width: 40px;
        height: auto;
        position: absolute;
        top: var(--padding-box);
        right: var(--padding-box);
    }
    






#pacchetti {
    background-color: var(--color-celeste);
    height: 180px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    #pacchetti h2 {
        color: #FFFFFF;
        margin-bottom: var(--padding-box);
        position: relative;
    }
    #pacchetti h2,
    #pacchetti .btn-outline {
        z-index: 10;
    }
    #pacchetti .img {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 5;
        text-align: right;
    }
        #pacchetti .img img {
            width: auto;
            height: 100%;
            border-top-left-radius: 15px;
            overflow: hidden;
        }






#percorso-fedelta {
    background-color: var(--color-green);
}
    #percorso-fedelta h2 {
        color: #FFF;
        margin-bottom: var(--padding-box);
    }

    #percorso-fedelta .wrap-info {
        display: flex;
        gap: var(--margin-box-top);
        margin-top: var(--padding-box);
        text-align: center;
    }
    #percorso-fedelta .box {
        width: calc(50% - calc(var(--margin-box-top) / 2));
    }
    #percorso-fedelta .value,
    .value {
        color: #000;
        font-size: 25px;
        font-weight: 600;
        text-align: center;
    }
    #percorso-fedelta .subtitle {
        margin: var(--padding-box) 0;
        font-size: 15px;
        letter-spacing: -1px;
    }
    #percorso-fedelta img {
        width: auto;
        height: 25px;
    }

    #percorso-fedelta .wrap-btn {
        text-align: right;
    }
    #percorso-fedelta .btn-arrow {
        margin-top: var(--padding-box);
    }








#tue-card {
    height: 200px;
    background-image: url(../img/card.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 250px;
}
    #tue-card h2 {
        color: #FFF;
    }
    #tue-card .subtitle {
        color: #FFF;
        margin-top: var(--padding-box);
    }

        #tue-card .arrow {
            width: 40px;
            height: auto;
            position: absolute;
            top: var(--padding-box);
            right: var(--padding-box);
        }

        #percorso-fedelta-arrow {
            width: 40px;
            height: auto;
            position: absolute;
            top: var(--padding-box);
            right: var(--padding-box);
        }








#buoni-acquisto  h2,
#punti h2,
#negozio  h2 {
    color: #FFF;
    padding-right: 70px;
}
#buoni-acquisto .subtitle,
#punti .subtitle {
    color: #FFF;
    margin-top: var(--padding-box);
}

    #buoni-acquisto .arrow,
    #punti .arrow,
    #negozio .arrow {
        width: 40px;
        height: auto;
        position: absolute;
        top: var(--padding-box);
        right: var(--padding-box);
    }

    #punti .arrow {
        filter: invert();
    }
    #punti .btn-arrow {
        color: #FFFFFF;
    }



    #buoni-acquisto-dettaglio .bar-code {
        background-color: #FFF;
        padding: 30px;
        margin: 30px 0;
        text-align: center;
    }
    #buoni-acquisto-dettaglio .bar-code img {
        width: 100%;
        max-height: 100px;
        max-width: 90%;
        height: auto;
    }

        #buoni-acquisto-dettaglio .details {
            display: flex;
            flex-direction: column;
            gap: 35px;
        }
        #buoni-acquisto-dettaglio .details .title20 {
            margin-bottom: 5px;
        }
        #buoni-acquisto-dettaglio .details .subtitle {
            font-weight: 400;
        }








#menu-fedelta {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 30px;
}
    #menu-fedelta a {
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
    }
    #menu-fedelta a.selected {
        font-size: 30px;
        font-weight: 600;
        border-bottom: 0.5px solid #FFF;
    }














#datepicker,
.flatpickr-mobile {
    border: 0;
    width: 100%;
    padding: 15px 10px;
    border-radius: 10px;
    font-size: 20px;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: var(--color-yellow);
    color: #000;
    border-color: var(--color-yellow);
}











#negozio  h2{
    color: #000000;
}

/*
#saldo-card #visualizza.centered {
    justify-content: flex-start;
}
*/













.quantity-alert {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: var(--main-padding);
    right: var(--main-padding);
    z-index: 10;
}
    .quantity-alert.white {
        background-color: #FFF;
        color: #000;
    }




.card {
    border-radius: 15px;
    background-color: var(--color-violet);
}
    .card .white-band {
        background-color: #FFFFFF;
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }
    .card .white-band .codice-barre {
        width: auto;
        height: 55px;
        padding: 10px;
    }
        .card .white-band .codice-barre span {
            font-size: 13px;
            font-weight: 300;
        }
        .card .space {
            padding: 20px;
        }
        .card .space.second {
            color: #FFF;
            font-size: 10px;
            font-weight: 500;
        }



        .card .space.first {
            display: flex;
            justify-content: space-between;
        }
        .card .space.first .data,
        .card .space.first .saldo {
            display: flex;
            flex-direction: column;
        }
        .card .space.first .data .title,
        .card .space.first .data .prezzo,
        .card .space.first .saldo .title,
        .card .space.first .saldo .prezzo  {
            color: #FFFFFF;
        }
        .card .space.first .data .title {
            font-size: 20px;
            font-weight: 300;
        }
        .card .space.first .data .prezzo {
            font-size: 30px;
            font-weight: 600;
        }


        .card .space.first .saldo .title {
            font-size: 10px;
            font-weight: 500;
        }
        .card .space.first .saldo .prezzo {
            font-size: 20px;
            font-weight: 500;
        }


    #list-cards {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }








.affiancati {
    display: flex;
    justify-content: space-between;
}







.swiper.slide-tipo .swiper-slide {
    width: 70%;
    margin-right: var(--margin-box-top);
}
    .swiper.slide-tipo .swiper-slide .arrow {
        position: absolute;
        bottom: var(--padding-box);
        right: var(--padding-box);
        width: auto;
        height: 30px;
    }
    .swiper.slide-tipo .swiper-slide:last-child {
        margin-right: 0;
    }
    .swiper.slide-tipo .swiper-slide h2 {
        color: #FFFFFF;
        display: block;
        margin-bottom: var(--padding-box);
    }

    .swiper.slide-tipo .swiper-slide .slide-1 {
        background-image: url('../img/corpo.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .swiper.slide-tipo .swiper-slide .slide-2 {
        background-image: url('../img/capelli.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .swiper.slide-tipo .swiper-slide .slide-3 {
        background-image: url('../img/viso.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .swiper.slide-tipo .swiper-slide .box {
        height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
        .swiper.slide-tipo .swiper-slide .box.slide-2 {
            justify-content: flex-start;
        }
    
.swiper.slide-tipo .swiper-slide h2 {
    color: #FFFFFF;
    display: block;
    margin-bottom: var(--padding-box);
}














.swiper.slide-buoni .swiper-slide {
    width: 70%;
    margin-right: var(--margin-box-top);
}
    .swiper.slide-buoni .swiper-slide .arrow {
        position: absolute;
        bottom: var(--padding-box);
        right: var(--padding-box);
    }
    .swiper.slide-buoni .swiper-slide:last-child {
        margin-right: 0;
    }
    .swiper.slide-buoni .swiper-slide h2 {
        color: #FFFFFF;
        display: block;
        margin-bottom: var(--padding-box);
    }
    .swiper.slide-buoni .swiper-slide .value {
        color: #FFFFFF;
        font-weight: 600;
        text-align: left;
    }
    .swiper.slide-buoni .swiper-slide .subtitle {
        font-weight: 400;
    }
    .swiper.slide-buoni .swiper-slide .buoni-before-title {
        font-size: 20px;
        font-weight: 300;
        color: #FFFFFF;
    }
    .swiper.slide-buoni .swiper-slide .wrap-btn {
        margin-top: auto;
    }
    .swiper.slide-buoni .swiper-slide .arrow {
        position: absolute;
        top: var(--padding-box);
        right: var(--padding-box);
        bottom: inherit;
        width: auto;
        height: 45px;
    }



    .swiper.slide-buoni .swiper-slide .box {
        height: 190px;
        display: flex;
        flex-direction: column;
    }

    
.swiper.slide-buoni .swiper-slide h2 {
    color: #FFFFFF;
    display: block;
    margin-bottom: var(--padding-box);
}





#buoni-acquisto .swiper-wrapper,
#punti .swiper-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
    #buoni-acquisto .swiper-wrapper .swiper-slide,
    #punti .swiper-wrapper .swiper-slide {
        width: 100%;
    }









#btn-bar {
    display: flex;
    gap: 3px;
}

#btn-bar .full-btn {
    width: 33.3333%;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 15px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    line-height: 0.9em;
    gap: 10px;
    text-align: center;
    line-height: 1.1;
}
    #btn-bar .full-btn img {
        width: auto;
        height: 20px;
        filter: invert(100%);
    }
    #btn-bar .full-btn span {
        display: block;
        margin: auto 0;
    }


    #btn-bar .full-btn.selected {
        background-color: rgba(255, 255, 255, 1);
        color: #000000;
    }
    #btn-bar .full-btn.active-yellow {
        background-color: var(--color-yellow);
        color: #000000;
    }
        #btn-bar .full-btn.active-yellow img {
            filter: invert(0%);
        }
    #btn-bar .full-btn.selected img {
        filter: invert(0%);
    }












    #wrap-nav {
        position: relative;
    }
    #navigation {
        position: absolute;
        top: -120vh;
        left: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        background-color: #FFF;
        z-index: 90;
        transition: all ease 1s;
        overflow: scroll;
        padding-bottom: 100px;
    }
        #navigation.open {
            top: 0!important;
        }


    #navigation #wrap-navigation .main-title {
        font-size: 40px;
        font-weight: 700;
        margin-top: 30px;
    }
    #navigation #wrap-navigation .sub-title {
        font-size: 24px;
        font-weight: 700;
    }
    #navigation #wrap-navigation a {
        font-size: 20px;
        font-weight: 400;
        color: #000000;
    }


    #navigation #wrap-navigation .group {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 40px;
    }


    #navigation #wrap-navigation hr {
        margin: 40px 0;
    }








    .description {
        margin-top: calc(var(--padding-box) * 4);
    }
        .description p {
            margin-top: 10px;
        }











/* FOOTER */
footer {
    text-align: center;
    margin-bottom: 100px;
}
#logo-vaniglia-pro {
    width: 165px;
    height: auto;
}
footer .copy {

    color: #FFF;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -1;
}

.social {
    color: #FFF;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    margin-bottom: 50px;
}
    .social a img {
        width: auto;
        height: 30px;
    }










#profilo {
    background-color: #FFF;
    border-radius: 15px;
    padding: calc(var(--main-padding) * 3) var(--main-padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#image-profilo img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
}

#profilo .social {
    margin-top: 10px;
    margin-bottom: 20px;
}
    #profilo .social img {
        filter: invert(100%);
    }








#search {
    display: flex;
    margin-bottom: 30px;
}
    #search .icon {
        margin-right: 10px;
    }
    #search .icon img {
        width: auto;
        height: 27px;
    }
    #search .wrap {
        flex: 1;
    }
    #search #search-box {
        width: 100%;
        line-height: 23px;
        border: 0;
        border-bottom: 0.5px solid #FFF;
        border-radius: 0;
        font-size: 18px;
        font-weight: 300;
        color: #FFFFFF;
        background-color: transparent;
    }








#lista-tag {
    display: grid;
    gap: 5px;
    margin-bottom: 30px;
    grid-template-columns: repeat(2,1fr);
}
    #lista-tag .tag {
        background-color: #808080;
        font-size: 12px;
        font-weight: 600;
        color: #000000;
        text-transform: uppercase;
        border-radius: 12px;
        padding: 8px 20px;
        /* white-space: nowrap; */
        flex: 1;
        text-align: center;
    }
    #lista-tag .tag.selected {
        background-color: #FFF;
    }










#negozio {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 15px;
}
    #negozio .box {
        display: flex;
        align-items: center;
        width: 100%;
        background-color: #FFFFFF;
        font-size: 15px;
        color: #000000;
        font-weight: 300;
    }
    #negozio .box.orario {
        align-items: flex-start;
    }
    #negozio .box span {
        display: block;
    }
    #negozio .box.half {
        width: calc(50% - 2.5px);
    }
    #negozio .box .label {
        font-size: 12px;
        color: #000000;
        font-weight: 600;
        display: block;
    }
    #negozio .box img {
        width: auto;
        height: 30px;
        margin-right: 15px;
    }
    #negozio .box.invert img {
        filter: invert(100%);
    }

    #negozio .box.orario .wrap {
        width: 100%;
    }
    #negozio .box.orario .label {
        margin-bottom: 10px;
    }
    #negozio .box.orario .orari {
        display: flex;
        justify-content: space-between;
        padding-bottom: 5px;
        margin-bottom: 5px;
        border-bottom: 1px solid #000;
    }

    #negozio .box.review,
    #negozio .box.social-negozio {
        display: block;
    }
    #negozio .box.review .wrap,
    #negozio .box.social-negozio .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #negozio .box.review img {
        width: auto;
        height: 15px;
        margin-right: 0;
    }

    #negozio .box.social-negozio .social-list {
        display: flex;
        flex-direction: row;
    }
    #negozio .box.social-negozio .social-list img {
        width: auto;
        height: 35px;
        filter: invert(1);
    }
        #negozio .box.social-negozio .social-list a:last-child img {
            margin-right: 0;
        }










#lista-appuntamenti {
    margin-top: 20px;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.appuntamento {
    position: relative;
}
.appuntamento img {
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
}
.appuntamento .title20 {
    margin-bottom: 10px;
}
.appuntamento .wrap-price {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.appuntamento .head {
    display: flex;
}
.appuntamento .promotion,
#lista-prodotti .prodotto .promotion {
    position: absolute;
    top: -25px;
    right: 25px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    overflow: hidden;
    background-color: var(--color-red);
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    z-index: 5;
}
    .appuntamento .head .text {
        flex: 1;
        padding-right: 20px;
    }
    .appuntamento .head .wrap-preferiti img {
        filter: invert(100%);
        width: auto;
        height: 20px;
    }
    .appuntamento .head .wrap-preferiti .selected img {
        filter: invert(0%);
    }

    .appuntamento .wrap-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    .appuntamento .group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }
        .appuntamento .group .row {
            font-size: 15;
            font-weight: 500;
            color: #FFFFFF;
        }
            .appuntamento .group .row img {
                width: auto;
                height: 25px;
                margin-right: 7px;
                border-radius: 0;
                margin-bottom: 0;
            }





















#lista-prodotti {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px; /* Spazio tra colonne e righe */
    margin-top: 30px;
}
    #lista-carrello #lista-prodotti {
        grid-template-columns: repeat(1, 1fr);
    }
    #lista-prodotti .prodotto {
        background-color: #FFFFFF;
        border-radius: 15px;
        padding: 15px;
        color: #000;
        display: flex;
        flex-direction: column;
    }
    #lista-prodotti .prodotto .image {
        width: 100%;
        padding-top: 100%;
        background-image: url(../img/test/test.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 15px;
        margin-bottom: 20px;
        position: relative;
    }
    #lista-prodotti .prodotto .buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 10px;
        margin-top: auto;
    }
    #lista-prodotti .prodotto hr {
        width: 75%;
        border: 0.5px solid #000;
    }
    #lista-prodotti .prodotto .price {
        color: #000000;
        margin: 25px 0;
    }
        #lista-prodotti .prodotto .buttons .btn-outline {
            width: 100%;
            text-align: center;
            font-size: 13px;
            letter-spacing: -0.7px;
        }
        #lista-prodotti .prodotto .buttons .btn-outline.yellow {
            background-color: var(--color-yellow);
        }
        #lista-prodotti .prodotto .promotion {
            top: -5px;
            right: -5px;
        }














#title-carrello {
    display: flex;
    gap: 10px;
    margin-top: 50px;
}
    #title-carrello img {
        width: auto;
        height: 30px;
    }


/* Aggiungi stili CSS a tua discrezione */
    #lista-carrello #lista-prodotti input {
        width: 50px;
        text-align: center;
        /* line-height: 1.5em; */
        font-size: 16px;
        height: 30px;
        border-radius: 0;
        border: 1px solid #000;
    }
    #lista-carrello #lista-prodotti  input:focus {
        outline: none;
        border: 1px solid #000;
    }
    #lista-carrello #lista-prodotti .prodotto {
        padding-bottom: 30px;
    }
    

    button {
        cursor: pointer;
    }
    button.quantity-btn {
        margin: 0;
        border: 0;
        background-color: #000;
        color: #FFF;
        font-weight: 700;
        font-size: 16px;
    }

    #lista-carrello #lista-prodotti .prodotto {
        padding-bottom: 30px;
    }
        #lista-carrello #lista-prodotti .prodotto .cart-action {
            display: flex;
            gap: 35px;
            margin-top: 30px;
        }
        #lista-carrello #lista-prodotti .prodotto .cart-action .price {
            margin: 0;
        }







#modalita {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#modalita input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #999;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
}

#modalita input[type="checkbox"]:checked {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

#modalita input[type="checkbox"]:checked::before {
    content: '\2022';
    display: block;
    text-align: center;
    line-height: 18px;
    font-size: 30px;
    color: #000;
}
          
#modalita .riga {
    display: flex;
    align-items: center;
    color: #FFF;
    gap: 5px;
}


#totale {
    margin-top: 55px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}





#submit-cart {
    margin-top: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
    #submit-cart .btn-outline {
        width: 100%;
    }




#upsell {
    margin-top: 50px;
    font-size: 18px;
    color: #FFF;
    font-weight: 400;
}


#upsell .wrap-buttons {
    margin-top: 35px;
    display: flex;
    gap: 15px;
    justify-content: flex-start;
}
    #upsell .wrap-buttons .btn-prenota {
        padding: 5px 55px;
    }













#pacchetti-dettaglio {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
    #pacchetti-dettaglio .box {

    }
        #pacchetti-dettaglio .box img {
            border-radius: 15px;
            overflow: hidden;
        }
        #pacchetti-dettaglio .box hr {
            border: 0.5px solid #000;
            margin: 5px 0 35px 0;
            width: 50%;
        }

        #pacchetti-dettaglio .description {
            margin: 15px 0;
        }
        #pacchetti-dettaglio .disponibilita {
            font-size: 16px;
            font-weight: 600;
        }















/* GENERALI */
.color-black {
    color: #000;
}
.color-white {
    color: var(--color-white);
}

.color-dark-purple {
    color: var(--color-purple-dark);
}


.stop {
    overflow: hidden;
}


.centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 15px;
}


.to-top-box {
    margin-top: var(--margin-box-top);
}



.btn-outline,
.btn-prenota {
    border: 1px solid #000000;
    font-size: 15px;
    font-weight: 600;
    border-radius: 15px;
    padding: 5px 25px;
    display: inline-block;
    color: #000000;
    background-color: #FFF;
    width: max-content;
}
    .btn-arrow,
    .btn-back {
        background-image: url(../img/arrow.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right center;
        height: 30px;
        display: inline-flex;
        padding-right: 40px;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
        color: #000;
    }
    .btn-back {
        background-image: url(../img/arrow-back.svg);
        background-position: left center;
        padding-left: 40px;
        padding-right: 0;
        color: #FFFFFF;
    }
    .btn-prenota {
        font-size: 11px;
        background-color: var(--color-yellow);
        border: 1px solid var(--color-yellow);
        text-transform: uppercase;
    }
    .btn-prenota.xl {
        width: 100%;
        text-align: center;
        padding: 10px 20px;
        font-size: 15px;
    }
    .btn-submit {
        font-size: 16px;
        background-color: var(--color-yellow);
        border: 1px solid var(--color-yellow);
        text-transform: uppercase;
        padding: 10px 40px;
        border-radius: 25px;
        text-align: center;
    }
        .btn-prenota.confermato {
            background-color: var(--color-green);
            border: 1px solid var(--color-green);
        }
        .btn-prenota.gray {
            background-color: #666666;
            border: 1px solid #666666;
        }
        .btn-prenota.white {
            background-color: #FFFFFF;
            border: 1px solid #FFFFFF;
        }
        .btn-submit.white {
            background-color: #FFF;
            border: 1px solid #FFF;
        }


    .btn-annulla-prenotazione {
        font-size: 11px;
        font-weight: 400;
        color: #FFFFFF;
    }

    #navigation #wrap-navigation a.btn-prenota-appuntamento {
        background-color: var(--color-yellow);
        height: 50px;
        display: flex;
        justify-content: center;
        gap: 15px;
        align-items: center;
        border-radius: 30px;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 50px 0 10px 0;
    }
    #navigation #wrap-navigation a .icon-label img {
        margin-right: 10px;
        width: auto;
        height: 30px;
    }
    .btn-prenota-appuntamento img {
        width: auto;
        height: 30px;
    }


.btn-prenota-appuntamento-full {
    background-color: #FFFFFF;
    padding: 15px;
    font-size: 15px;
    color: #000;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 15px;
    overflow: hidden;
}
    .btn-prenota-appuntamento-full img {
        width: auto;
        height: 30px;
    }













    .switch-container {
        display: flex;
        align-items: center;
        margin: 10px 0;
    }

    .switch-label {
        margin-right: 10px;
        font-size: 20px;
        color: #000000;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 30px;
        background-color: #FFF;
        border: 1px solid #707070;
        border-radius: 25px;
        overflow: hidden;
        margin-left: auto;
    }

    .switch-slider {
        position: absolute;
        top: 2.5%;
        left: 2.5%;
        width: 50%;
        height: 95%;
        background-color: #C4C4C4;
        border: 1px solid #707070;
        border-radius: 25px;
        transition: transform 0.3s ease;
        transition: all ease 0.3s;
    }

    .switch-input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch-input:checked + .switch .switch-slider {
        transform: translateX(100%);
    }

    .switch-container.active .switch-slider {
        background-color: #000000;
        border-color: #000000;
        left: calc(97.5% - 50%);
    }

    .switch-container img {
        filter: invert(100%);
        height: 30px;
        width: auto;
        margin-right: 10px;
    }





.price {
    font-size: 20px;
    font-weight: 400;
    color: #FFFFFF;
}
.price .small {
    font-size: 15px;
}
.price.promo {
    color: #767676;
    text-decoration: line-through;
    margin-right: 15px;
}








#prenota-appuntamento {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
    #prenota-appuntamento .row {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 20px;
    }
    #prenota-appuntamento #messaggio {
        margin-top: 25px;
    }


.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 0;
    border-radius: 4px;
    /* height: 40px; */
    display: block;
    height: 60px;
    border-radius: 10px;
}



.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000;
    line-height: inherit;
    padding: 15px 10px;
    font-size: 20px;
}
.select2-container .select2-selection--single {
    height: auto;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}
.select2-dropdown {
    border: 0;
    border-radius: 10px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--color-yellow);
    color: #000;
}
.select2-results__option {
    padding: 10px;
}

#messaggio,
#wrap-login .wrap-input input {
    color: #000;
    border: 0;
    padding: 15px 10px;
    font-size: 20px;
    border-radius: 10px;
    resize: none;
}
    #wrap-login .wrap-input .btn-outline,
    #wrap-login .registrati .btn-outline {
        width: 100%;
    }
    #wrap-login .recupera-password,
    #wrap-login .registrati {
        margin-top: 30px;
        text-align: center;
    }
    #wrap-login #new-user {
        margin-top: 70px;
    }







#wrap-login .wrap-input {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}













hr.apertura {
    border: 0.5px solid #FFFFFF;
    margin: 20px 0 40px 0;
}
hr.short {
    width: 60px;
    border: 0.5px solid #FFFFFF;
    margin: 20px 0;
}