/* Stili per la pagina di registrazione prodotto */

.registra-prodotto {
    color: #333;
    text-align: center;
}

/* Sezione speciale per i clienti */
.special-client {
    padding: 40px 20px;
    background: #e6e5e5e3;
}

/* Contenitore dei benefici */
.client-benefits {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
    flex-wrap: wrap; /* Permette la riorganizzazione sugli schermi più piccoli */
}

/* Stile singolo beneficio */
.benefit {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

.benefit h3 {
    font-size: 16px;
    padding-top: 15px;
    color: #333; /* Colore scuro per leggibilità */
}

.benefit p {
    font-size: 16px;
    color: #555; /* Un grigio leggermente più chiaro per il testo */
    line-height: 1.5; /* Migliora la leggibilità */
}

.fas.fa-pen-alt, .fas.fa-gifts, .fas.fa-paper-plane {
    font-size: 24px; /* Dimensione dell'icona */
    color: #dedacf; /* Colore principale */
    padding: 10px;
    border-radius: 50%;
    background: #f4f4f4; /* Sfondo leggero */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.fas.fa-pen-alt, .fas.fa-gifts, .fas.fa-paper-plane:hover {
    background: #dedacf; /* Cambio colore sfondo */
    color: #fff; /* Cambio colore icona */
    transform: scale(1.1); /* Leggero ingrandimento */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}


/* Uniforma i blocchi sopra */
@media (max-width: 768px) {
    .client-benefits {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Due colonne per i primi due blocchi */
        gap: 20px;
        justify-items: center;
    }

    .benefit {
        width: 100%; /* Adatta alla colonna */
        min-height: 180px; /* Imposta un'altezza minima uguale per tutti */
        display: flex;
        flex-direction: column;
     
    }

    .benefit:nth-child(3) {
        grid-column: span 2; /* Il terzo blocco si espande su due colonne */
        width: 100%;
    }
       /* Icone */
       .benefit i {
        font-size: 22px;
        width: 50px;
        height: 50px;
        background: #e6e5e5e3;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 auto 10px;
    }
    
    
}
 /* --- Sezione "Dati del Cliente" --- */
 .form-buttons1 {
    display: block; /* Rende il pulsante visibile */
    width: 100%; /* Occupa tutta la larghezza del container */
    text-align: right; /* Centra il testo */
    padding: 15px;
    margin-top: 5px; /* Aggiunge spazio sopra */
  
}



/*dati del cliente*/
.form-buttons1 {
  
    float: right;
    padding: 15px;
}


/* Responsività per schermi più piccoli */
@media screen and (max-width: 600px) {
    .form-buttons1 {
        margin-top: 15px;
        padding-bottom: 15px;
    }

    .form-buttons1 button {
        font-size: 16px;
        padding: 10px 20px;
        
    }
     /* --- Sezione "Dati del Cliente" --- */
     .form-buttons1 {
        display: block; /* Rende il pulsante visibile */
        width: 100%; /* Occupa tutta la larghezza del container */
        text-align: right; /* Centra il testo */
        padding: 15px;
        margin-top: 5px; /* Aggiunge spazio sopra */
      
    }
 

}



.form-buttons button[type="submit"] {
    font-size: 18px; /* Aumenta la dimensione del testo */
    padding: 15px 30px; /* Aumenta il padding per renderlo più grande */
    width: auto; /* Imposta la larghezza automatica */
    min-width: 200px; /* Assicura una dimensione minima */
    border-radius: 8px; /* Arrotonda gli angoli */
    background: #00aaad;
}



/* Dati del prodotto */
.step-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }

  .left-column {
    width: 40%;
    order: 1;
  }

  .right-column {
    width: 40%;
    order: 2;
  }


  @media screen and (max-width: 768px) {
    .step-grid {
      flex-direction: column;
    }
    .left-column, .right-column {
      width: 100%;
      order: unset;
    }
    
  }

#form-assistenza {
    max-width: 1200px !important;
    margin: 0 auto !important; /* Centra il form */
    padding: 80px 180px !important; /* Rientro di 50px a destra e sinistra, 30px sopra e sotto */
    background-color: #e9e6dd; /* Imposta il colore di sfondo del modulo */
    border-radius: 15px; /* Arrotonda gli angoli */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Aggiunge un'ombra */
}


section {
    margin: 50px 0; /* Spazio sopra e sotto */
    padding: 20px 0; /* Aggiunge spazio interno verticale */
}

/* Adattamento per mobile */
@media screen and (max-width: 768px) {
    section {
        margin: 0px 0; /* Riduce lo spazio sopra e sotto su mobile */
        padding: 15px 0; /* Adatta il padding per schermi più piccoli */
    }
}



   /* Media query per mobile (schermi con larghezza inferiore a 768px) */
@media (max-width: 768px) {


    /* Modifica il titolo del form */
    #form-assistenza h1 {
        font-size: 25px !important; /* Imposta la dimensione del titolo a 25px */
        text-align: center !important; /* Centra il titolo */
    }

    /* Aggiungi padding generico al form */
    #form-assistenza {
        padding: 30px !important; /* Aggiungi 30px di padding sopra, sotto, destra e sinistra */
        margin: 0 !important; /* Rimuove margini extra */
        max-width: 100% !important; /* Assicura che il form occupi tutta la larghezza */
        box-shadow: none !important; /* Rimuove l'ombra */
        border-radius: 0 !important; /* Rimuove l'arrotondamento degli angoli */
    }

    /* Rimuovi padding e margini da altri contenitori */
    .assistenza-container {
        padding: 0 !important; /* Rimuove il padding */
        margin: 0 !important; /* Rimuove i margini */
    }

 
    /* Rimuove qualsiasi padding aggiuntivo nel contenitore principale */
    .container {
        padding: 0 !important; /* Rimuove il padding */
    }

    /* Sezione con informazioni aggiuntive */
    .assistenza-info {
        padding: 0 !important; /* Rimuove padding */
        margin: 0 !important; /* Rimuove margini extra */
    }

    /* Rimuovi il padding dal bottone "Avanti" per mobile */
    .step .form-buttons button#next-button {
        padding: 8px 20px; /* Rimuove il padding */
        margin-left: 110px !important; /* Rimuove il margine a sinistra */
        font-size: 14px !important; /* Mantiene la dimensione del font */
        width: 100% !important; /* Imposta la larghezza al 100% */
        border-radius: 8px !important; /* Mantiene l'arrotondamento degli angoli */
        border: none !important; /* Rimuove il bordo */
        cursor: pointer !important; /* Mantiene il cursore */
    }
}

 

/* Blocco FAQ Mobile */
.faq-mobile {
    background-color: #F9F9F9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    display: none; /* Nasconde il blocco di default */
}

/* Stile del titolo FAQ */
.faq-mobile h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

/* Stile delle domande FAQ */
.faq-mobile .faq-item {
    margin-bottom: 15px;
}

.faq-mobile .faq-item h4 {
    font-size: 18px;
    color: #007B7F;
    margin-bottom: 5px;
}

/* Stile delle risposte */
.faq-mobile .faq-item p {
    font-size: 16px;
    color: #555;
    padding-left: 20px;
}

/* Media query per mostrare il blocco solo su mobile */
@media (max-width: 768px) {
    .faq-mobile {
        display: block !important; /* Mostra il blocco FAQ solo su mobile */
    }
}

/* Nasconde il blocco FAQ su desktop */
body .faq-mobile {
    display: none !important; /* Nasconde il blocco di default */
}

/* Mostra il blocco FAQ solo su mobile (max-width: 768px) */
@media (max-width: 768px) {
    body .faq-mobile {
        display: block !important; /* Rende visibile solo su mobile */
    }
}

/* Nascondi il blocco FAQ su desktop */
html body .faq-mobile {
    display: none !important;  /* Nasconde su desktop */
}

/* Mostra il blocco FAQ solo su mobile */
@media (max-width: 768px) {
    html body .faq-mobile {
        display: block !important; /* Mostra solo su mobile */
    }
}

/* Stile per il blocco FAQ mobile */
.faq-mobile {
    background: #F9F9F9;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding-top: 50px;
}

.faq-mobile h3 {
    font-size: 20px;
    color: #000;
    margin-bottom: 15px;
}

/* Stile per le FAQ (accordion) */
.faq-mobile .faq-item {
    margin-top: 10px;
}

.faq-mobile details {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    cursor: pointer;
}

.faq-mobile details summary {
    font-weight: bold;
    color: #000;
    padding-bottom: 5px;
}

.faq-mobile details[open] summary {
    color: #007B7F; /* Cambia il colore quando il dettaglio è aperto */
}

.faq-mobile details p {
    margin-top: 10px;
    font-size: 16px;
    color: #555;
    padding-left: 20px;
    padding-top: 10px;
}

/* Hover effetto per il dettaglio */
.faq-mobile .faq-item:hover {
    background: #d0d3d3;
}


/* Nasconde il contenuto extra di default su mobile */
#extra-content {
    display: none;
}

/* Mostra il blocco e il link "Scopri" solo su mobile */
@media (max-width: 768px) {
    #content-desktop {
        display: none; /* Nasconde il contenuto statico su mobile */
    }

    #extra-content {
        display: none; /* Nasconde il contenuto extra su mobile di default */
    }

    #show-more {
        display: inline-block; /* Mostra il link "Scopri" su mobile */
    }
}

/* Nasconde il blocco su desktop */
@media (min-width: 768px) {
    #content-desktop {
        display: block !important; /* Mostra il contenuto statico su desktop */
    }

    #extra-content {
        display: none; /* Nasconde il contenuto extra su desktop */
    }

    #show-more {
        display: none; /* Nasconde il link "Scopri" su desktop */
    }
}




/* Miglioramento dell'aspetto delle radio button */
.radio-container input[type="radio"] {
    width: 20px; /* Aumenta la dimensione del pallino */
    height: 20px;
    margin-right: 10px; /* Distanza tra il pallino e il testo */
    accent-color: #00aaad; /* Colore personalizzato per il pallino */
    vertical-align: middle; /* Allinea verticalmente con il testo */
}

/* Aggiungi uno stile per il testo accanto al pallino */
.radio-container label {
    font-size: 16px; /* Imposta una dimensione del font piacevole */
    color: #333; /* Colore del testo */
    line-height: 1.5; /* Migliora l'altezza della riga */
    display: inline-block;
    cursor: pointer; /* Cambia il cursore quando si passa sopra */
}

/* Personalizzazione per checkbox */
input[type="checkbox"] {
    width: 20px; /* Aumenta la dimensione della checkbox */
    height: 20px;
    margin-right: 10px; /* Distanza tra la checkbox e il testo */
    accent-color: #00aaad; /* Colore personalizzato per la checkbox */
    vertical-align: middle; /* Allinea verticalmente con il testo */
}

/* Styling del contenitore per i radio button */
.radio-container {
    margin-bottom: 15px; /* Distanza tra i gruppi di radio button */
}

/* Stile per i div all'interno dei gruppi radio */
.radio-container div {
    display: flex;
    align-items: center;
    gap: 10px; /* Spazio tra il pallino e il testo */
}

/* Modifica i campi di input, textarea e select per un aspetto pulito */
input, textarea, select {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
}

input:focus, textarea:focus {
    border-color: #00aaad;
    box-shadow: 0 0 8px rgba(0, 170, 173, 0.4);
}

/* Stile per il textarea */
textarea {
    width: 100% !important;
    height: 100px !important;
    padding: 8px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    
}

.cf7-grid, .radio-container{
    text-align: left;
}



/* Aggiungi una media query per ridurre lo spazio sui dispositivi mobili */
@media (max-width: 768px) {
    .step-container {
        width: 100% !important; /* Imposta il form per occupare il 100% su dispositivi mobili */
        margin: 5px; /* Riduci i margini laterali per mobile */
        padding: 15px; /* Riduci il padding per mobile */
    }

    /* Ridurre lo spazio laterale per la griglia del form */
    .cf7-grid {
        gap: 10px; /* Riduci la distanza tra i campi */
    }

    .cf7-grid div {
        min-width: calc(50% - 10px); /* Mantieni la larghezza del 50% ma riduci i margini */
    }

    /* Riduci la larghezza dei campi di input e textarea */
    input, textarea, select {
        padding: 8px; /* Riduci il padding per i campi di input */
    }


}


/* Nascondi il checkbox di default */
input[type="checkbox"] {
    -webkit-appearance: none; /* Rimuove l'aspetto predefinito del browser */
    -moz-appearance: none;
    appearance: none;
    width: 20px; /* Imposta la larghezza del quadrato */
    height: 20px; /* Imposta l'altezza del quadrato */
    border: 2px solid #00aaad; /* Colore del bordo */
    border-radius: 5px; /* Angoli arrotondati */
    background-color: #fff; /* Colore di sfondo del checkbox */
    display: inline-block;
    cursor: pointer;
    position: relative;
}

/* Quando il checkbox è selezionato, mostriamo il segno di spunta */
input[type="checkbox"]:checked {
    background-color: #00aaad; /* Colore di sfondo quando selezionato */
    border-color: #00aaad; /* Colore del bordo quando selezionato */
}

/* Aggiungi il segno di spunta al checkbox selezionato */
input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 8px;
    height: 8px;
    background-color: white; /* Colore del segno di spunta */
    border-radius: 2px; /* Arrotonda il segno di spunta */
}

/* Quando il mouse è sopra il checkbox */
input[type="checkbox"]:hover {
    background-color: #e5f2f2; /* Colore di sfondo quando si passa sopra */
}