/* =========================================================== DESKTOP ================================================== */

/* MAIN ----------------------------------------------------------------------- */
main{
    background-color: #fff;/*f3f3f3*/
    background-image: url('/incl/img/pattern2.png');
    background-repeat: repeat;
    background-size: 200px 200px;
}
.container_auto {
    margin: auto;
    max-width: 1300px;
    width: 100%;
    padding:25px 10px 0px 10px;
}
.dettaglio{
    gap:30px
}
.dettaglio .intestazione{
    margin-bottom: 20px;
}
.dettaglio .intestazione .titolo{
    font-size: 2rem;
    font-weight: bold;
    color: var(--secondary);
    margin-bottom: 20px;
    margin-top:0px;
    padding:0px;
}
.dettaglio .intestazione .testo{
    font-size: .85rem;
    color: var(--secondary);
}
.grid-dettaglio{
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    grid-gap: 20px; 
}
.grid-dettaglio .item{
    background-color: white;
    padding: 20px;
}
.grid-dettaglio .gallery{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    position: relative;
}
.grid-dettaglio .gallery .tipo{
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: var(--secondary);
    color: white;
    z-index: 1;
    font-size: .9rem;
    font-weight: 600;
    padding: 10px 20px;
    text-transform: uppercase;
}
.grid-dettaglio .gallery .foto{
    height: 600px!important;
}
.grid-dettaglio .dettagli-auto {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.grid-dettaglio .dettagli-auto .box-prezzo{
    margin-bottom: 20px;
    padding-bottom: 20px;
    /*border-bottom: 5px solid #f3f3f3;*/
}
.grid-dettaglio .dettagli-auto .box-prezzo .titolo {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 0;
    color: var(--secondary);
    border: none;
}
.grid-dettaglio .dettagli-auto .box-prezzo .prezzo{
   font-size: 2rem;
   font-weight: bold;
   color: var(--main);
   padding: 10px 0;
}
.grid-dettaglio .dettagli-auto .box-prezzo .prezzo-iva {
    font-size: 1rem;
}

.grid-dettaglio .tasti-azione{
    gap: 10px;
    font-size: .9rem;
    color: var(--text);
    position:absolute;
    right:10px;
}
.grid-dettaglio .tasti-azione div{
    background-color: #f3f3f3;
    padding: 6px;
    transition: .3s;
}
.grid-dettaglio .tasti-azione .condividi{
    background-color: var(--main-very-soft);
    color: white;
}
.grid-dettaglio .tasti-azione .condividi:hover {
    background-color: var(--main);
}
.grid-dettaglio .tasti-azione .share:hover{
    background-color: gainsboro;
}
.grid-dettaglio .tasti-azione .condividi img{
    width: 22px;
    height: auto;
    filter: brightness(0) invert(1);
}

.grid-dettaglio .dati-auto{
    flex-grow: 1;
}
.grid-dettaglio .item .titolo {
    font-size: 2rem;
    color: var(--secondary);
    font-weight: bold;
}
.grid-dettaglio .item .testo {
    font-size: 0.9rem;
    color: var(--primary);
    padding-bottom: 18px;
}
.grid-dettaglio .dati-auto .dato{
    width: 100%;
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 8px;
}
.grid-dettaglio .dati-auto .dato.dato-prezzo{
    padding-bottom: 20px;
}
.grid-dettaglio .dati-auto .dato.dato-prezzo .didascalia.prezzo{
    min-width: 100px;
    text-align: right;
}
.grid-dettaglio .dati-auto .dato.dato-prezzo .incluso{
    background-color: #4d9f21;
    color: #fff;
    padding:5px;
    text-align: center!important;
}
.grid-dettaglio .dati-auto .dato.dato-prezzo .totale{
   color: var(--main);
   font-size: 1.2rem;
}
.grid-dettaglio .dati-auto .didascalia {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text);
}
.grid-dettaglio .dati-auto .testo_dettaglio_prezzo {
    font-size: .85rem;
}
.grid-dettaglio .dati-auto .icona img {
    width: 20px;
    height: auto;
    filter:grayscale(1)
}
.grid-dettaglio .dettagli-auto .tasto{
    background-color: grey;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    transition: .3s;
    width: 50%;
}
.grid-dettaglio .dettagli-auto .tasto.condividi{
    background-color: grey;
}
.grid-dettaglio .dettagli-auto .tasto.email {
    background-color: var(--main);
}
.grid-dettaglio .dettagli-auto .tasto img{
    width: 30px;
    height: 30px;
    filter: invert(1);
}
.grid-dettaglio .dettagli-auto .tasto.condividi:hover{
    background-color: lightgrey;
}
.grid-dettaglio .dettagli-auto .tasto.email:hover {
    background-color: var(--main-very-soft);
}
.grid-dettaglio .come-funziona {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
}
.grid-dettaglio .come-funziona .box-step{
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
    cursor: pointer;
}
.grid-dettaglio .come-funziona .box-step::-webkit-scrollbar {
    height: 8px;
    background-color: #f1f1f1;
}

.grid-dettaglio .come-funziona .box-step::-webkit-scrollbar-thumb {
    background-color: #888;
}

.grid-dettaglio .come-funziona .box-step::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}
.grid-dettaglio .come-funziona .box-step .step{
    flex: 1 1 100%;
    transition: .3s;
    padding: 20px;
}
.grid-dettaglio .come-funziona .box-step .step.selected{
    background-color: #fbfbfb;
}
.grid-dettaglio .come-funziona .box-step .step .icona i{
    font-size: 45px;
    transition: .3;
    color: var(--secondary);
}
.grid-dettaglio .come-funziona .box-step .step .add i{
    font-size: 25px;
    transition: .3;
    color: var(--main);
}
.grid-dettaglio .come-funziona .box-step .step .nome{
    font-weight: bold;
    font-size: .9rem;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--secondary);
}
.grid-dettaglio .come-funziona .box-step .step:hover .nome,
.grid-dettaglio .come-funziona .box-step .step:hover .icona i {
    color: var(--main);
    transition: .3s;
}
.grid-dettaglio .come-funziona .service-description{
    background-color: #fbfbfb;
    font-size: .9rem;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    max-height: 0;
    overflow: hidden;
}
.grid-dettaglio .come-funziona .service-description .title{
    font-weight: bold;
    font-size: 1.2rem;
}
.grid-dettaglio .come-funziona .service-description .text{
    font-size: .9rem;
    margin-bottom: 0;
}
.grid-dettaglio .come-funziona .service-description.show{
    opacity: 1;
    transform: translateY(0);
    max-height: 500px; /* Altezza massima del contenuto del div */
    display: block;
    padding: 20px;
}
.grid-dettaglio .finanziamento {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}
.grid-dettaglio .finanziamento .rate-finanziamento{
    background-color: #f3f3f3;
    padding: 20px;
    border: 1px solid #e9e9e9;
    width: 200px;
    gap: 30px;
}
.grid-dettaglio .finanziamento .rate-finanziamento .label{
    font-weight: 700;
    color: var(--secondary);
}
.grid-dettaglio .finanziamento .rate-finanziamento .prezzo{
    font-weight: bold;
    font-size: 1rem;
    color: var(--main);
}
.grid-dettaglio .finanziamento .wrapper{
    flex: 1 1 auto;
}
.grid-dettaglio .finanziamento .wrapper .form-element {
    margin-bottom: 0;
}
.grid-dettaglio .finanziamento .range-container {
    background-color: #f3f3f3;
    border: 1px solid #e9e9e9;
    padding: 15px;
    flex: 1 1 auto;
}
.grid-dettaglio .finanziamento .range-container label {
    display: block;
    font-size: .9rem;
}
.grid-dettaglio .finanziamento .range-values {
    display: flex;
    justify-content: space-between;
    color: var(--main);
    font-weight: bold;
}
.grid-dettaglio .finanziamento .range-values span {
    font-size: .9rem;
}
.grid-dettaglio .finanziamento .ticks {
    display: flex;
    justify-content: space-between;
    margin-top: -10px;
}
.grid-dettaglio .finanziamento .ticks span {
    font-size: .8rem;
}
.grid-dettaglio .finanziamento .ticks .span_ticks_d {
    display: block;
}
.grid-dettaglio .finanziamento input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    margin: 10px 0;
    background: transparent; /* Assicurati che lo sfondo sia trasparente */
}
.grid-dettaglio .finanziamento input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px; 
    cursor: pointer;
    background: #ddd; 
    border: 1px solid #ccc; 
}
.grid-dettaglio .finanziamento input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #ddd;
    border: 1px solid #ccc;
}
.grid-dettaglio .finanziamento input[type="range"]::-ms-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #ddd;
    border: 1px solid #ccc;
    color: transparent;
}
.grid-dettaglio .finanziamento input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px; 
    height: 24px; 
    border-radius: 50%;
    background: #007bff;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    cursor: pointer;
    margin-top: -8px; 
}
.grid-dettaglio .finanziamento input[type="range"]::-moz-range-thumb {
    width: 24px; 
    height: 24px;
    border-radius: 50%;
    background: #007bff; 
    border: 2px solid white; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    cursor: pointer;
}
.grid-dettaglio .finanziamento input[type="range"]::-ms-thumb {
    width: 24px;
    height: 24px; 
    border-radius: 50%;
    background: #007bff; 
    border: 2px solid white; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    cursor: pointer;
}
.grid-dettaglio .finanziamento input[type="range"]::-ms-fill-lower {
    background: #ddd;
}
.grid-dettaglio .finanziamento input[type="range"]::-ms-fill-upper {
    background: #ddd;
}
.grid-dettaglio .storico {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
}
.grid-dettaglio .dettaglio-prezzo {
    grid-column: 1 / 4;
}
.grid-dettaglio .mappa {
    grid-column: 1 / 4;
    grid-row: 5 / 6;
}
.grid-dettaglio .faq {
    grid-column: 1 / 4;
    grid-row: 6 / 7;
}
.grid-dettaglio .form{
    grid-column: 1 / 4;
    grid-row: 7 / 8;
}

/* Sezioni a scorrimento orizzontale inizio */
.container-scroll {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    scroll-behavior: smooth;
    position: relative;
}

.container-scroll::-webkit-scrollbar {
    display: none;
}

.box-scroll {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.box-scroll.w100 {
    min-width: 100%;
}

.container-scroll .stars {
    color: goldenrod;
    margin-bottom: 1rem;
}

.container-scroll .stars i {
    font-size: calc(2rem + .3vw);
}

.container-scroll quote {
    font-size: calc(1rem + .3vw);
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

.container-scroll p {
    margin-bottom: 0;
}

.btn-scroll {
    position: absolute;
    background-color: white;
    color: var(--secondary);
    cursor: pointer;
    border-radius: 50%;
    z-index: 2;
    transition: .5s;
}

.btn-scroll:hover {
    background-color: var(--main);
    color: white;
    transition: .5s;
}

.btn-scroll i {
    font-size: 2rem;
    font-weight: bold;
}

.btn-scroll.left {
    left: -2rem;
}

.btn-scroll.right {
    right: -2rem;
}
.servizi {
    gap: 20px;
    transition: .5s;
}
.news {
    flex: 1 1 auto;
    min-width: 300px;
    max-width: 100%;
    transition: .3s;
}
.news .news-titolo{
    color: var(--secondary);
    font-weight: bold;
    font-size: 1rem;
    height: 45px;
    margin-bottom: 10px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.news .foto {
    position: relative;
    height: 200px;
    margin-bottom: 10px;
}
.news .foto img{
    transition: .3s;
}
.news .foto .tipo{
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--secondary);
    color: white;
    z-index: 1;
    font-size: .8rem;
    font-weight: 500;
    padding: 3px 10px;
    text-transform: uppercase;
}
.news p {
    color: #333333;
    margin-top: 0;
    font-size: .9rem;
}
.news:hover img {
    opacity: .7;
    transition: .3s;
}
.news .data {
    font-size: .8rem;
    margin-top: 1rem;
    color: gray;
}
.news .container-prezzo {
    justify-content: flex-end;
    gap: 40px;
    margin-top: 20px;
}
.news .container-prezzo .prezzo {
    font-size: 1.4rem;
    font-weight: bold;
}
.news .container-prezzo .prezzo.rata {
    color: var(--secondary);
}
.news .container-prezzo .iva {
    font-size: .65rem;
    color: var(--text);
    margin-bottom: 5px;
}
/* Sezioni a scorrimento orizzontale inizio */

.add_preferito{
    cursor: pointer;;
}
.remove_preferito{
    cursor: pointer;
}
.web-share-button{
    cursor: pointer;
}
#tasto_condividi{
    cursor: pointer;
}
.info_prezzo{
    font-size:1.3rem;
    color: var(--secondary);
    position:absolute;
    margin-left:3px;
}
/*inizio selettore vista */
.tipologia_prezzi{
    position: relative;
    padding-bottom: 20px;
}
.tipologia_prezzi select option:hover{
   background-color: white;
}
.tipologia_prezzi .custom-select2{
    position: absolute;
    right: 0;
    top: 0px;
    font-weight: bold;
    font-size: .85rem;
    cursor: pointer;
}
.tipologia_prezzi .custom-select2 i{
    margin-top: -2px;
}
.tipologia_prezzi .custom-select2 ul{
    font-weight: normal;
    background-color: white;
    padding: 20px;
    list-style: none;
    margin-top: 0;
    width: 200px;
    z-index: 4;
    position: relative;
}
.tipologia_prezzi .custom-select2 ul li{
    cursor: pointer;
    font-size: .8rem;
    background-color: white;
}
.tipologia_prezzi .custom-select2 ul li:not(:last-of-type){
    margin-bottom: 10px;
}
.tipologia_prezzi .custom-select2 ul li:hover{
    font-weight: bold;
    background-color: white!important;
}
.tipologia_prezzi .custom-select2 .options li:hover {
    background-color: #f0f0f0; /* Cambia colore di sfondo al passaggio del mouse */
}
/* fine selettore vista*/

/* ======================================================== TABLET LANDSCAPE ================================================== */
@media only screen and (min-width: 768px) and (max-width: 1450px) {
    
}
/* =========================================================== TABLET PORTRAIT ================================================== */
@media only screen and (min-width: 768px) and (max-width: 1019px) {
   
    .grid-dettaglio {
        grid-template-columns: repeat(1, minmax(250px, 1fr));
    }

    .grid-dettaglio .gallery {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }


    .grid-dettaglio .dettagli-auto {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .grid-dettaglio .come-funziona {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    .grid-dettaglio .finanziamento {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    .grid-dettaglio .storico {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }

    .grid-dettaglio .dettaglio-prezzo {
        grid-column: 1 / 2;
        grid-row: 6 / 7;
    }

    .grid-dettaglio .mappa {
        grid-column: 1 / 2;
        grid-row: 7 / 8;
    }
    .grid-dettaglio .faq {
        grid-column: 1 / 2;
        grid-row: 8 / 9;
    }
    .grid-dettaglio .form {
        grid-column: 1 / 2;
        grid-row: 9 / 10;
    }
    .scroll-container-wrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .grid-dettaglio .come-funziona .box-step {
        padding-right: 50px;
    }

    .grid-dettaglio .come-funziona .box-step:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        pointer-events: none;
        z-index: 10;
    }

    .grid-dettaglio .come-funziona .box-step:after {
        right: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    }

    .grid-dettaglio .finanziamento .container-inner{
        flex-wrap: wrap;
    }
    .grid-dettaglio .finanziamento .rate-finanziamento{
        width: 100%;
    }
}

/* =========================================================== MOBILE ================================================== */
@media only screen and (max-width: 767px) {
    .container_auto{
        padding: 20px 0;
    }
    .dettaglio .intestazione .titolo{
        padding: 0 20px;
        font-size: 1.6rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .dettaglio .intestazione .testo{
        padding: 0 20px;
    }
    .grid-dettaglio {
        grid-template-columns: repeat(1, minmax(250px, 1fr));
    }
    .grid-dettaglio .gallery {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .grid-dettaglio .gallery .foto {
        height: 250px!important;
    }
    .grid-dettaglio .dettagli-auto {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .grid-dettaglio .come-funziona {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
}
    .grid-dettaglio .finanziamento {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .grid-dettaglio .storico {
        grid-column: 1 / 2;
        grid-row: 5 / 6;  
        overflow-x: auto;     
    }
    .grid-dettaglio .storico .titolo{
        position: sticky;
        left: 0;
    }
    .chart-wrapper {
        position: relative;
    }
    .chartWrapper > canvas {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
    }
    .chartAreaWrapper {
        width: 600px;
    }
    .grid-dettaglio .dettaglio-prezzo {
        grid-column: 1 / 2;
        grid-row: 6 / 7;
    }
    .grid-dettaglio .dettagli-auto .box-prezzo{
        align-items: center;
    }
    .grid-dettaglio .mappa {
        grid-column: 1 / 2;
        grid-row: 7 / 8;
    }
    .grid-dettaglio .faq {
        grid-column: 1 / 2;
        grid-row: 8 / 9;
    }
    .grid-dettaglio .form {
        grid-column: 1 / 2;
        grid-row: 9 / 10;
    }
    .grid-dettaglio .item .titolo{
        font-size: 1.4rem;
    }
    .scroll-container-wrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .grid-dettaglio .come-funziona .box-step::-webkit-scrollbar {
        display: none;
    }
    .grid-dettaglio .come-funziona .box-step{
        padding-right: 50px;
    }
    .grid-dettaglio .come-funziona .box-step:after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        pointer-events: none;
        z-index: 10;
    }
    .grid-dettaglio .come-funziona .box-step:after {
        right: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    }
    .btn-scroll.left {
        left: -.8rem;
    }
    .btn-scroll.right {
        right: -.8rem;
    }
    .grid-dettaglio .gallery .tipo{
        font-size: .8rem;
        font-weight: 500;
        padding: 5px 10px;
    }
    .grid-dettaglio .finanziamento .container-inner {
        flex-wrap: wrap;
    }

    .grid-dettaglio .finanziamento .rate-finanziamento {
        width: 100%;
    }

        .grid-dettaglio .finanziamento .rate-finanziamento .rata{
            align-items: flex-start;
        }

    .grid-dettaglio .finanziamento .ticks .span_ticks_d {
        display: none;
    }
    /*inizio selettore vista*/
    .tipologia_prezzi .custom-select2 .selected-option{
        justify-content: flex-start;
    }
    .tipologia_prezzi .custom-select2 ul{
        width: 100%;
        margin-top: 10px;
    }
    .tipologia_prezzi .custom-select2ul li:not(:last-of-type){
        margin-bottom: 20px;
    }
    /*fine selettore vista*/
    .grid-dettaglio .come-funziona .service-description.show{
        max-height: 600px; /* Altezza massima del contenuto del div */
    }
}