/* SPINNER */
.load-hidden{
    overflow: hidden;
}
.layout-spinner{
    position: absolute;
    background-color: rgba(236, 236, 236, 0.34);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    z-index: 1099;
}
.spinner-red {
    width: 56px;
    height: 56px;
    display: grid;
    animation: spinner-plncf9 4s infinite;
}
.spinner-red::before,
.spinner-red::after {
    content: "";
    grid-area: 1/1;
    border: 9px solid;
    border-radius: 50%;
    border-color: var(--color-primary) var(--color-primary) #0000 #0000;
    mix-blend-mode: darken;
    animation: spinner-plncf9 1s infinite linear;
}
.spinner-red::after {
    border-color: #0000 #0000 var(--color-primary-light) var(--color-primary-light);
    animation-direction: reverse;
}

@keyframes spinner-plncf9 {
    100% {
        transform: rotate(1turn);
    }
}
/* FINE SPINNER */

/* INIZIO CHECKBOX */
.checkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 30px; /* Lascia spazio per la checkmark */
    margin: 5px 0;
    cursor: pointer;
    font-size: 16px;
    user-select: none; /* Impedisce la selezione del testo durante il click */
}
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 2px solid #000; /* Bordo della casella */
    box-sizing: border-box;
}
.checkbox-container:hover .checkmark {
    background-color: #f0f0f0;
}
.checkbox-container input:checked ~ .checkmark {
    background-color: #000;
}
.checkmark::after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox-container input:checked ~ .checkmark::after {
    display: block;
}
.checkbox-container .checkmark::after {
    left: 6px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff; /* Colore della spunta */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* FINE CHECKBOX */



/* Inizio paginazione */
.layout-pagination .paginazione{
    a{
        padding: 0.75rem 1rem;
        border-radius: 4px;
        font-weight: bold;
        background-color: white;
    }
    a.sel{
        background-color: var(--color-primary);
        color: white;
    }
}
/* fine Paginazione */


/* SWIPER FRECCE - INIZIO */
.swiper-button-next, .swiper-button-prev {
    top: unset;
    bottom: 0px;
    width: 36px;
}
.swiper-button-next::after,
.swiper-button-prev::after
{
    content: "";
}
.swiper-button-next, .swiper-button-prev {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.swiper-button-prev {
    background-image: url("../img/swiper/swiper-Back-Button-circle.svg");
    left: 32px;
}
.swiper-button-next {
    background-image: url("../img/swiper/swiper-Next-Button-circle.svg");
    left: 80px;
}
/* SWIPER FRECCE - FINE */


/* TESTO MULTICOLONNA - INIZIO */
.testo-multicolonna {
    text-align: justify;
    column-count: 1;
    column-gap: 60px; /* Spazio tra le colonne */
}
/* Quando la larghezza è maggiore di 700px, dividi in 2 colonne */
@media (min-width: 768px) {
    .testo-multicolonna {
        column-count: 1;
    }
}
/* Quando la larghezza è maggiore di 1200px, dividi in 3 colonne */
@media (min-width: 1200px) {
    .testo-multicolonna {
        column-count: 2;
    }
}
/* TESTO MULTICOLONNA - FINE */




/*CHEKOUT - INIZIO*/
.checkout .container {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
}
.checkout .check-in{
    background-color: var(--color-green);
}
.checkout .check-in > span{
    display: none;
}
.checkout .check-in::after{
    content: '';
    color: white;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    height: 15px;
    width: 9px;
    transform: rotate(45deg);
    position: relative;
    bottom: 2px;
    left: 1px;
}
.checkout .circle {
    height: 36px;
    width: 36px;
    max-width: 36px;
    border-radius: 50% !important;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: bold;
}
@media screen and (min-width: 992px) {
    .checkout .border-left{
        border-left: 1px solid var(--color-black);
    }
}
/*CHEKOUT - FINE*/



/*CALENDARIO - INIZIO*/
.flatpickr-day.start-date {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-radius: 4px;
}
.flatpickr-day.in-range {
    background: rgba(229, 28, 35, 0.2) !important;
    color: #e51c23 !important;
}
.flatpickr-day.end-date {
    border: 2px solid #e51c23 !important;
    color: #fff !important;
    border-radius: 4px;
    background: var(--color-primary) !important;
}
.flatpickr-day.endRange{
    background-color: #f48c8d !important;
}
.icon-clear {
    cursor: pointer;
    font-size: 1.2em;
    color: #888;
    user-select: none;
}
.icon-clear:hover {
    color: #e51c23;
}
/*CALENDARIO - FINE*/

/* PAGINAZIONE - START */
.page-link{
    border: none;
    color: var(--blue-dark);
    border-radius: 8px;
    margin: 0px 8px;
    transition: all 0.3s ease-in-out;
}
.active>.page-link, .page-link.active{
    border-radius: 8px;
    background-color: var(--blue-dark)!important;
    color: white;
}
.page-link:hover{
    background-color: var(--blue-dark);
    color: white;
}
.page-link.disabled{
    background-color: white;
}
/* PAGINAZIONE - END */

/* SPACING - INIZIO */

/* Spacing scale estesa: 6–10 */
/* Margine tutto intorno */
.m-6  { margin: 4rem !important; }
.m-7  { margin: 5rem !important; }
.m-8  { margin: 6rem !important; }
.m-9  { margin: 7rem !important; }
.m-10 { margin: 8rem !important; }

/* Margin-top */
.mt-6  { margin-top:    4rem !important; }
.mt-7  { margin-top:    5rem !important; }
.mt-8  { margin-top:    6rem !important; }
.mt-9  { margin-top:    7rem !important; }
.mt-10 { margin-top:    8rem !important; }

/* Margin-bottom */
.mb-6  { margin-bottom: 4rem !important; }
.mb-7  { margin-bottom: 5rem !important; }
.mb-8  { margin-bottom: 6rem !important; }
.mb-9  { margin-bottom: 7rem !important; }
.mb-10 { margin-bottom: 8rem !important; }

/* Margin-left (in Bootstrap 5: .ms-*) */
.ms-6  { margin-left:   4rem !important; }
.ms-7  { margin-left:   5rem !important; }
.ms-8  { margin-left:   6rem !important; }
.ms-9  { margin-left:   7rem !important; }
.ms-10 { margin-left:   8rem !important; }

/* Margin-right (.me-*) */
.me-6  { margin-right:  4rem !important; }
.me-7  { margin-right:  5rem !important; }
.me-8  { margin-right:  6rem !important; }
.me-9  { margin-right:  7rem !important; }
.me-10 { margin-right:  8rem !important; }

/* Margin orizzontale (left + right: .mx-*) */
.mx-6  { margin-left:   4rem !important; margin-right: 4rem !important; }
.mx-7  { margin-left:   5rem !important; margin-right: 5rem !important; }
.mx-8  { margin-left:   6rem !important; margin-right: 6rem !important; }
.mx-9  { margin-left:   7rem !important; margin-right: 7rem !important; }
.mx-10 { margin-left:   8rem !important; margin-right: 8rem !important; }

/* Margin verticale (top + bottom: .my-*) */
.my-6  { margin-top:    4rem !important; margin-bottom: 4rem !important; }
.my-7  { margin-top:    5rem !important; margin-bottom: 5rem !important; }
.my-8  { margin-top:    6rem !important; margin-bottom: 6rem !important; }
.my-9  { margin-top:    7rem !important; margin-bottom: 7rem !important; }
.my-10 { margin-top:    8rem !important; margin-bottom: 8rem !important; }


/* Lo stesso approccio vale per le padding (.p-*, .pt-*, .px-*, ecc.) */
/* Esempio per .p-6 → paddings di 4rem su tutti i lati  */
.p-6  { padding: 4rem !important; }
.p-7  { padding: 5rem !important; }
.p-8  { padding: 6rem !important; }
.p-9  { padding: 7rem !important; }
.p-10 { padding: 8rem !important; }

/* Padding top */
.pt-6  { padding-top:    4rem !important; }
.pt-7  { padding-top:    5rem !important; }
.pt-8  { padding-top:    6rem !important; }
.pt-9  { padding-top:    7rem !important; }
.pt-10 { padding-top:    8rem !important; }

/* Padding bottom */
.pb-6  { padding-bottom: 4rem !important; }
.pb-7  { padding-bottom: 5rem !important; }
.pb-8  { padding-bottom: 6rem !important; }
.pb-9  { padding-bottom: 7rem !important; }
.pb-10 { padding-bottom: 8rem !important; }

/* Padding left (start) */
.ps-6  { padding-left:   4rem !important; }
.ps-7  { padding-left:   5rem !important; }
.ps-8  { padding-left:   6rem !important; }
.ps-9  { padding-left:   7rem !important; }
.ps-10 { padding-left:   8rem !important; }

/* Padding right (end) */
.pe-6  { padding-right:  4rem !important; }
.pe-7  { padding-right:  5rem !important; }
.pe-8  { padding-right:  6rem !important; }
.pe-9  { padding-right:  7rem !important; }
.pe-10 { padding-right:  8rem !important; }

/* Padding orizzontale (ps+pe: .px-*) */
.px-6  { padding-left:   4rem !important; padding-right: 4rem !important; }
.px-7  { padding-left:   5rem !important; padding-right: 5rem !important; }
.px-8  { padding-left:   6rem !important; padding-right: 6rem !important; }
.px-9  { padding-left:   7rem !important; padding-right: 7rem !important; }
.px-10 { padding-left:   8rem !important; padding-right: 8rem !important; }

/* Padding verticale (pt+pb: .py-*) */
.py-6  { padding-top:    4rem !important; padding-bottom: 4rem !important; }
.py-7  { padding-top:    5rem !important; padding-bottom: 5rem !important; }
.py-8  { padding-top:    6rem !important; padding-bottom: 6rem !important; }
.py-9  { padding-top:    7rem !important; padding-bottom: 7rem !important; }
.py-10 { padding-top:    8rem !important; padding-bottom: 8rem !important; }

.m-32{ margin: 32px;}
.my-32{ margin-top: 32px; margin-bottom: 32px;}
.mx-32{ margin-left: 32px; margin-right: 32px;}
.mt-32{ margin-top: 32px;}
.mb-32{ margin-bottom: 32px;}
.ms-32{ margin-left: 32px;}
.me-32{ margin-right: 32px;}

.p-32{ padding: 32px;}
.py-32{ padding-top: 32px; padding-bottom: 32px;}
.px-32{ padding-left: 32px; padding-right: 32px;}
.pt-32{ padding-top: 32px;}
.pb-32{ padding-bottom: 32px;}
.ps-32{ padding-left: 32px;}
.pe-32{ padding-right: 32px;}

.pb-40{ padding-bottom: 40px;}
.py-40{ padding-top: 40px; padding-bottom: 40px;}

.pt-48{ padding-top: 48px;}

.m-64{ margin: 64px;}
.my-64{ margin-top: 64px; margin-bottom: 64px;}
.mx-64{ margin-left: 64px; margin-right: 64px;}
.mt-64{ margin-top: 64px;}
.mb-64{ margin-bottom: 64px;}
.ms-64{ margin-left: 64px;}
.me-64{ margin-right: 64px;}

.p-64{ padding: 64px;}
.py-64{ padding-top: 64px; padding-bottom: 64px;}
.px-64{ padding-left: 64px; padding-right: 64px;}
.pt-64{ padding-top: 64px;}
.pb-64{ padding-bottom: 64px;}
.ps-64{ padding-left: 64px;}
.pe-64{ padding-right: 64px;}

@media (min-width: 768px) {
    .m-md-32{ margin: 32px;}
    .my-md-32{ margin-top: 32px; margin-bottom: 32px;}
    .mx-md-32{ margin-left: 32px; margin-right: 32px;}
    .mt-md-32{ margin-top: 32px;}
    .mb-md-32{ margin-bottom: 32px;}
    .ms-md-32{ margin-left: 32px;}
    .me-md-32{ margin-right: 32px;}

    .p-md-32{ padding: 32px;}
    .py-md-32{ padding-top: 32px; padding-bottom: 32px;}
    .px-md-32{ padding-left: 32px; padding-right: 32px;}
    .pt-md-32{ padding-top: 32px;}
    .pb-md-32{ padding-bottom: 32px!important}
    .ps-md-32{ padding-left: 32px;}
    .pe-md-32{ padding-right: 32px;}

    .m-md-64{ margin: 64px;}
    .my-md-64{ margin-top: 64px; margin-bottom: 64px;}
    .mx-md-64{ margin-left: 64px; margin-right: 64px;}
    .mt-md-64{ margin-top: 64px;}
    .mb-md-64{ margin-bottom: 64px;}
    .ms-md-64{ margin-left: 64px;}
    .me-md-64{ margin-right: 64px;}

    .p-md-64{ padding: 64px;}
    .py-md-64{ padding-top: 64px; padding-bottom: 64px;}
    .px-md-64{ padding-left: 64px; padding-right: 64px;}
    .pt-md-64{ padding-top: 64px;}
    .pb-md-64{ padding-bottom: 64px;}
    .ps-md-64{ padding-left: 64px;}
    .pe-md-64{ padding-right: 64px;}

    .p-md-0{ padding: 0px;}
    .py-md-0{ padding-top: 0px; padding-bottom: 0px;}
    .px-md-0{ padding-left: 0px; padding-right: 0px;}
    .pt-md-0{ padding-top: 0px;}
    .pb-md-0{ padding-bottom: 0px;}
    .ps-md-0{ padding-left: 0px;}
    .pe-md-0{ padding-right: 0px;}

    .ps-md-5{ padding-left: 3rem;}
}
@media (min-width: 992px) {
    .pt-lg-0{ padding-top: 0rem !important;}
    .py-lg-0{ padding-top: 0rem !important; padding-bottom: 0rem !important;}

    .pe-lg-3{ padding-right: 1rem;}

    .pt-lg-64{ padding-top: 64px !important;}
    .pb-lg-64{ padding-bottom: 64px !important;}

    .mb-lg-64{ margin-bottom: 64px !important;}
}

.ps-30-percent{ padding-right: 30%;}
/* SPACING - FINE */




/*FILTER2 - INIZIO*/
@media screen and (min-width: 576px) {
    #ModalFiltro2.modal.show .modal-dialog {
        width: 100%;
        max-width: 768px;
    }
}

#filter2 .layout-form-home{
    background-color: white;
    width: 100%;
    max-width: 800px;
    border-radius: 24px;
    padding: 32px;
}

#filter2 .layout-form-home .d-flex > div{
    width: 100%;
    padding: 12px 10px;
    border-radius: 6px;
}

#filter2 .input-text > input{
    border: none;
    background-color:transparent;
}

#filter2 .input-text > input:focus,
#filter2 .input-text > input:active
{
    outline: none !important;
    border: none;
}
#filter2 .input-text > i {
    width: 24px;
}

#filter2 .layout-form-home .put-number{
    height: 100%;
    max-height: 42px;
    width: 100px;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
}
/*FILTER2 - FINE*/