/* Animazione di comparsa del testo domanda */
@keyframes questionAnimation{
    from{opacity: 0;}
    to{opacity:1;}
}
/* Animazione di scomparsa del testo domanda */
@keyframes questionAnimationNegative{
    from{opacity: 1;}
    to{opacity:0;}
}
/* Espansione orizzontale della risposta su desktop */
@keyframes answerAnimation{
    from{width: 0;}
    to{width :400px;}
}
/* Apertura verticale del pannello risposta */
@keyframes aniPositive{
    from{height: 0;}
    to{height :135px}
}
/* Chiusura verticale del pannello risposta */
@keyframes aniNegative{
    from{height:135px;}
    to{height :0px;}
}

/* Contenitore principale FAQ */
.faqContainer{
    display: block;
    width:50vw;
    padding-top: 20px;
    margin:auto;
    margin-top: 80px;
    background: #F7F6F4 ; 
}

/* Titolo sezione FAQ */
.titleFaq{
    text-align: center;
    color:#744112;
}
/* Riga singola della domanda */
.faq{
    height: 80px;
    margin:auto;
    text-align: center;
    margin-top: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
/* Testo domanda */
.paraFaq{
    display: inline-block;
    font-size: 20px;
    animation: questionAnimation 2s forwards;
}
/* Bottone per aprire/chiudere la risposta */
.faqBtn{
    width:32px;
    height: 32px;
    background: none;
    border:0;
    outline: 0;
    cursor: pointer;
}

/* Icona +/- dentro il bottone */
.imgFaq{
    width: 16px;
    height: 16px;
}

/* Box risposta inizialmente chiuso */
.answer{
    height: 0px;
    margin: auto;
    overflow: hidden;
    border-top:solid #744112 0.5px; 
    animation: answerAnimation 2s forwards;
}
/* Testo risposta inizialmente nascosto */
.paraAnswer{
    opacity: 0;
    text-align: center;
}
/* Classe aggiunta via JS per mostrare la risposta */
.paraAnswerani{
    animation: questionAnimation 1s forwards;
}
.paraAnsweraninegative{
    animation: questionAnimationNegative 1s forwards;
}
/* Classe aggiunta via JS per espandere la risposta */
.positive{
    animation: aniPositive 1s forwards ;
}
.negative{
    animation: aniNegative 1s forwards ;
}
/* Responsive smartphone */
@media only screen and (max-width:600px){
    /* Contenitore più largo su schermi piccoli */
    .faqContainer{
        width:90%;
    }
    /* Domande a tutta larghezza utile */
    .faq{
        width:90%;
    }
    /* Riduzione area clic del bottone */
    .faqBtn{
        width: 32px;
        height: 32px;
    }
    /* Riduzione dimensione icona +/- */
    .imgFaq{
        width: 10px;
        height: 10px;
    }
    /* Mantiene leggibile il testo domanda */
    .paraFaq{
        font-size: 20px;
    }
    /* Testo risposta più grande su mobile */
    .paraAnswer{
        font-size: 20px;
    }
}
/* Responsive tablet */
@media only screen and (min-width:600px) and (max-width:1024px){
    /* Larghezza fissa ottimizzata per tablet */
    .faqContainer{
        width:90%;
    }
    /* Tipografia aumentata */
    .paraFaq{
        font-size: 25px;
    }
    .paraAnswer{
        font-size: 25px;
    }
}