body, html {
    margin: 0;
    font-family: 'Lexend', sans-serif;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

a {
    color: unset;
    text-decoration: none;
}

.wrapper-all {
    width: fit-content;
    margin: auto;
    max-width: 1400px;
}

.wrapper-percorso_views {
    display: grid;
    grid-template-columns: 2fr 1fr; /* per dare pi첫 spazio al percorso*/
    margin: auto;
    align-items: center;
    padding: 15px 25px 15px 25px;
    align-items: flex-start;
    justify-items: center; /* Centra gli elementi orizzontalmente */
}

.percorso {
    font-size: 0.8rem;
    margin-right: auto;
    color:#e96900;
}

.views {
    font-size: 0.8rem;
    margin-left: auto;
    color:#e96900;
}

/* inizio wrapper galleria e dettagli destra */
.wrapper-gallery_dettaglidx {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    align-items: center;
    padding: 25px 25px 0px 25px;
    align-items: flex-start;
    justify-items: center; /* Centra gli elementi orizzontalmente */
}

/* Galleria */
.gallery-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    justify-self: end;
    border-right: 1px solid transparent; /* Necessario per border-image */
    -webkit-border-image-source: linear-gradient(to bottom, white, #e0dfdf, #e0dfdf, white);
    border-image-source: linear-gradient(to bottom, white, #e0e0df, #e0dfdf, white);
    -webkit-border-image-slice: 1;
    border-image-slice: 1;
    padding-right: 25px;
}


/* Dettagli */
.detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    justify-self: start;
    padding-left: 25px;
    height: 100%;
    max-width: 600px;
}



.detail .nome {
    font-size: 3rem;
    padding-top: 0px;
    margin-bottom: 10px;
    margin-top: 0px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    text-transform: uppercase; /*mette in maiuscolo*/ 
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word; 
    color: black;
}



.detail .sottotitolo {
    font-size: 1.5rem;
    padding-top: 0px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    padding-bottom: 25px; 
    color: black;
}

.detail .categoria {
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 2px;
    color:#e96900;
    font-family: 'Lexend', sans-serif;
}


.detail .description {
    font-weight: 300;
    font-size: 1rem;
    margin-top: 25px;
    color: #2e2e2e;
}

.detail .infogen {
    margin: 0px 0px 10px 0px;
    font-weight: 600;
    width: fit-content;
    color: #303030;
}

.description table {
    width: 75%;
    border-collapse: collapse;
    line-height: 2rem;
}

.description td {
    padding: 8px 0px;
    border-bottom: 1px solid #e0dfdf; /* Bordi sottili grigio chiaro */
}

.description tr:last-child td {
    border-bottom: none; /* Rimuove il bordo inferiore dell'ultima riga */
}

.description td:first-child {
    text-align: left; /* Allinea a sinistra il valore */
     /* Testo leggermente pi첫 evidente per la prima colonna */
}

.description td:last-child {
    text-align: right; /* Allinea a destra il valore */
    font-weight: 600;
}

/* Rimuove i bordi laterali */
.description table {
    border-left: none;
    border-right: none;
}


/*Bottoni*/
.detail .bottoni {
    margin-top: auto; /* Spinge i bottoni verso il basso */
    display: flex;
    gap: 10px; /* Distanza tra i bottoni, se necessario */
    justify-content: flex-end; /* Allinea i bottoni a destra */
    padding: 10px;
    margin-bottom: 25px;
}

.btnchiediinfo {
    color: white;
    letter-spacing: 3px;
    padding: 15px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    overflow: hidden;
    border-radius: 70px;
    background-color: #e96900;
    font-family: 'Lexend', sans-serif;
    border: 1px solid #e96900;
    box-shadow: 0 4px 8px 0 rgba(77, 77, 77, 0.3), 0 6px 20px 0 rgba(77, 77, 77, 0.3);
}
  .btnchiediinfo:hover {
    padding-right: 40px;
    padding-left: 15px;
    background-color: #ff6a24;
    border: 1px solid #ff6a24;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
  .btnchiediinfo:hover:after {
    opacity: 1;
    right: 10px;
  }
  .btnchiediinfo:after {
    content: "\f0e0";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    opacity: 0;
    font-size: 20px;
    line-height: 46px;
    top: 0;
    right: -20px;
    transition: 0.4s;
  }


  .btnscaricascheda {
    color: white;
    letter-spacing: 3px;
    padding: 15px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    overflow: hidden;
    border-radius: 70px;
    background-color: #585858;
    font-family: 'Lexend', sans-serif;
    border: 1px solid #585858;
    box-shadow: 0 4px 8px 0 rgba(77, 77, 77, 0.3), 0 6px 20px 0 rgba(77, 77, 77, 0.3);
}
  .btnscaricascheda:hover {
    padding-right: 40px;
    padding-left: 15px;
    background-color: #303030;
    border: 1px solid #303030;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    color: white !important;
  }
  
  .btnscaricascheda:active {
    color: white !important; 
}

  .btnscaricascheda:hover:after {
    opacity: 1;
    right: 10px;
    color: #c96161 !important;
  }
  .btnscaricascheda:after {
    content: "\f1c1";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    opacity: 0;
    font-size: 20px;
    line-height: 46px;
    top: 0;
    right: -20px;
    transition: 0.4s;
    color: white !important;
  }
  
  .btnscaricascheda:focus {
    color: white !important; /* Forza il colore bianco quando il bottone è in focus */
}

/* fine wrapper galleria e dettagli destra */




/* inizio wrapper caratteristiche e opzioni */
.wrapper-specs_options {
    display: grid;
    grid-template-columns: 1fr; /* La prima colonna termina al centro */
    gap: 0px; /* Spazio tra le due colonne */
    margin: auto;
    padding: 15px 25px;
    align-items: flex-start;
    justify-items: center; /* Centra gli elementi orizzontalmente */
    font-weight: 300;
    font-size: 1rem;
    line-height: 2rem;
    max-width: 1250px;
    margin-top: 25px;
    border-top: 1px solid transparent; /* Necessario per border-image */
    -webkit-border-image-source: linear-gradient(to right, white, #e0e0df, #e0dfdf, white);
    border-image-source: linear-gradient(to right, white, #e0e0df, #e0dfdf, white);
    -webkit-border-image-slice: 1;
    border-image-slice: 1;
}

.caratteristiche {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    padding: 0px 0px;
    box-sizing: border-box; /*fix bordo dx */
}

.caratteristiche .nometabspecs {
    margin: 0px auto 10px 0px;
    font-weight: 600;
    padding-left: 0px;
    color: #303030;
}

.tabspecs {
    width: 100%; /* Occupa il 100% del contenitore */
    border-collapse: collapse; 
}


.opzioni {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    padding: 0px 0px;
    box-sizing: border-box; /*fix bordo dx */
}

.note {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    padding: 0px 0px;
    box-sizing: border-box; /*fix bordo dx */
}

.form {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    padding: 0px 0px;
    box-sizing: border-box; /*fix bordo dx */
    margin-top: 40px;
    border-top: 3px solid #9d9d9d;
}

.opzioni .nometabopz {
    margin: 25px auto 10px 0px;
    font-weight: 600;
    padding-left: 0px;
    color: #303030;
}

.tabopzioni {
    width: 100%; /* Occupa il 100% del contenitore */
    border-collapse: collapse;
    text-align: left;
}

.tabopzioni td::before {
    content: "\f00c"; /* Codice Unicode per fa-check */
    font-family: "Font Awesome 6 Free"; /* versione fontawesome */
    font-weight: 900; /* Necessario per le icone 'solid' */
    margin-right: 8px; /* Distanza tra l'icona e il testo */
    color:#e96900; /* Cambia colore flag */
  }

.note .nometabnote {
    margin: 25px auto 10px 0px;
    font-weight: 600;
    padding-left: 0px;
    color: #303030;
}

.form .nometabform {
    margin: 25px auto 10px 0px;
    font-weight: 600;
    padding-left: 0px;
    color: #303030;
}

.tabnote {
    width: 100%; /* Occupa il 100% del contenitore */
    border-collapse: collapse;
    text-align: left; 
}

.tabform {
    width: 100%; /* Occupa il 100% del contenitore */
    border-collapse: collapse;
    text-align: left; 
}
  

.tabspecs td, .tabopzioni td, .tabnote td {
    border-bottom: 1px solid #e0dfdf;
    padding: 8px 25px;
    border-radius: 7px;
    vertical-align: middle;
}

.tabform td {
   border-bottom: 1px solid #e0dfdf;
    padding: 8px 0px;
    border-radius: 7px;
    vertical-align: middle;
}

.tabspecs td:nth-child(1){
    text-align: left;
}

.tabspecs td:nth-child(2){
    text-align: center;
    white-space: nowrap; /* Impedisce il ritorno a capo */
    border-left: 1px solid #e0dfdf;
    border-right: 1px solid #e0dfdf;
}
.tabspecs td:nth-child(3) {
    text-align: right;
    white-space: nowrap; /* Impedisce il ritorno a capo */
    font-weight: 400;
    color: #2e2e2e;
}

.tabspecs tr:nth-child(odd),
.tabopzioni tr:nth-child(odd),
.tabnote tr:nth-child(odd) {
    background-color: #f9f9f9;
}
.tabspecs tr:nth-child(even),
.tabopzioni tr:nth-child(even),
.tabnote tr:nth-child(even) {
    background-color: white;
}

.tabspecs tr:last-child td,
.tabopzioni tr:last-child td,
.tabnote tr:last-child td,
.tabform tr:last-child td {
    border-bottom: none; /* Rimuove il bordo inferiore dell'ultima riga */
}



.gradborderbottom {
    border-top: 1px solid transparent; /* Necessario per border-image */
    -webkit-border-image-source: linear-gradient(to right, #ffffff, #e0dfdf, #e0dfdf, white);
    border-image-source: linear-gradient(to right, #ffffff, #e0e0df, #e0dfdf, white);
    -webkit-border-image-slice: 1;
    border-image-slice: 1;
}

.gradbordertop {
    border-top: 1px solid transparent; /* Necessario per border-image */
    -webkit-border-image-source: linear-gradient(to right, #ffffff, #e0dfdf, #e0dfdf, white);
    border-image-source: linear-gradient(to right, #ffffff, #e0e0df, #e0dfdf, white);
    -webkit-border-image-slice: 1;
    border-image-slice: 1;
}
/* fine wrapper caratteristiche e opzioni */





/* Responsive Design */

@media only screen and (max-width: 1100px) {
    .wrapper-gallery_dettaglidx {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0px;
    }

    .gallery-container {
        justify-self: center;
        border: none;
        padding-right: 0px;
    }

    .detail {
        text-align: center;
        justify-self: center;
        margin-top: 20px;
        padding-left: 0px;
        max-width: 600px;
    }

    .detail .nome {
        font-size: 3rem;
    }

    .detail .sottotitolo {
        font-size: 1rem;
    }

    .detail .infogen {
        margin: auto;
        border: none;
    }

    .description table {
        width: 100%;
    }

    .detail .bottoni {
        justify-content: center;
        margin-top: 30px;
    }




    .wrapper-specs_options {
        grid-template-columns: 1fr; /* Una colonna unica */
        text-align: center;
        gap: 0px;
        margin: auto;
        max-width: 600px;
        margin-top: 20px;
    }

    .caratteristiche, .opzioni, .note, .form {
        justify-self: center;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding-right: 0px;
    }

    .caratteristiche .nometabspecs {
        margin: 10px auto 15px auto;
        text-align: left;
        border: none;
    }


    .opzioni .nometabopz, .note .nometabnote, .form .nometabform {
        text-align: left;
        margin: 25px auto 15px auto;
        border: none;
    }

    .tabspecs, .tabopzioni, .tabnote, .tabform {
        margin-right: auto;
        margin-left: auto;
    }
    
    
}


@media only screen and (max-width: 668px) {

  .wrapper-all {
    width: 100%;    
  }

  .wrapper-gallery_dettaglidx {
    text-align: center;
    display: flex;
    flex-wrap: wrap; /* Permette ai dettagli di andare sotto quando serve */
    gap: 0px;
    margin: auto;
    align-items: center;
    padding: 20px;   
  }

  .detail {
    text-align: center;
    justify-self: center;
    margin: auto;
    margin-top: 20px;
    width: 100%;
    min-width: auto;
}

  .detail .nome {
    font-size: 2rem;
}

.detail .categoria {
    font-size: 0.8rem;
    margin-top: 0px;
}

.detail .infogen {
    margin: 0px 0px 20px 0px;
    text-align: left;
}

.detail .description table {
    line-height: normal;
}

.detail .bottoni {
    margin-bottom: 10px;
}

.btnchiediinfo, .btnscaricascheda {
    font-size: 0.7rem;
    padding: 12px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* Galleria */
.gallery-container {
    flex: 1 1 600px; /* Occupa 50% dello spazio ma si riduce se serve */
    max-width: 100%; /* Evita che resti troppo grande */
    justify-self: center;
}



/*specifiche tecniche, opzioni, note, form*/
  .wrapper-specs_options{
    margin-top: 0px;
    font-size: 0.8rem;
    border-radius: 7px;
    box-shadow: 0 4px 8px 0 rgba(77, 77, 77, 0.3), 
                0 6px 20px 0 rgba(77, 77, 77, 0.3);
  }

  .tabspecs td,
  .tabopzioni td,
  .tabnote td,
  .tabform td {
    padding: 5px;
}
  .caratteristiche .nometabspecs {
    font-size: 1rem;
    margin-left: 0px;
    padding-left: 0px;
    margin-bottom: 5px;
    margin-top: 0px;
}
  .opzioni .nometabopz {
    font-size: 1rem;
    margin-left: 0px;
    padding-left: 0px;
    margin-bottom: 5px;
}

.note .nometabnote {
    font-size: 1rem;
    margin-left: 0px;
    padding-left: 0px;
    margin-bottom: 5px;
}

.form .nometabform {
    font-size: 1rem;
    margin-left: 0px;
    padding-left: 0px;
    margin-bottom: 5px;
}

}



@media only screen and (max-width: 400px) {
   .wrapper-specs_options{
   font-size: 0.7rem;  
}

   .btnchiediinfo, .btnscaricascheda {
   font-size: 0.6rem;
    }

}