/* ================= AVALIAÇÕES ================= */


#avaliacoes{

    padding:80px 20px;

    background:#f8f8f8;

    text-align:center;

}



#avaliacoes h2{

    font-size:2.2rem;

    color:#111;

    margin-bottom:20px;

}



/* ================= FORMULÁRIO ================= */


#form-avaliacao{

    width:100%;

    max-width:650px;

    margin:40px auto;

    display:flex;

    flex-direction:column;

    gap:18px;

}



#form-avaliacao input,
#form-avaliacao textarea{


    width:100%;

    padding:15px;

    border:2px solid #ddd;

    border-radius:10px;

    font-size:16px;

    outline:none;

    transition:.3s;

}



#form-avaliacao input:focus,
#form-avaliacao textarea:focus{

    border-color:#FFC107;

    box-shadow:0 0 10px rgba(255,193,7,.3);

}



#form-avaliacao textarea{

    resize:none;

    min-height:120px;

}



/* ================= BOTÃO ENVIAR ================= */


#form-avaliacao button{

    background:#FFC107;

    color:#111;

    font-size:18px;

    font-weight:bold;

    border:none;

    border-radius:10px;

    padding:15px;

    cursor:pointer;

    transition:.3s;

}



#form-avaliacao button:hover{

    background:#111;

    color:#FFC107;

}



/* ================= ESTRELAS ================= */


.estrelas{

    display:flex;

    justify-content:center;

    gap:10px;

    margin:20px 0;

}



.estrela{

    font-size:40px;

    cursor:pointer;

    transition:.2s;

}



.estrela:hover{

    transform:scale(1.25);

}



/* ================= LISTA DE AVALIAÇÕES ================= */


#lista-avaliacoes{

    margin-top:50px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:25px;

}



/* ================= CARD DO CLIENTE ================= */


.card-avaliacao{

    width:100%;

    max-width:650px;

    background:white;

    padding:25px;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    border-left:8px solid #FFC107;

    text-align:left;

    transition:.3s;

}



.card-avaliacao:hover{

    transform:translateY(-5px);

}



.card-avaliacao h3{

    color:#FFC107;

    font-size:28px;

    margin-bottom:10px;

}



.card-avaliacao h4{

    color:#111;

    margin-bottom:5px;

}



.card-avaliacao small{

    color:#777;

    display:block;

    margin-bottom:15px;

}



.card-avaliacao p{

    margin-bottom:20px;

    line-height:1.7;

}



/* ================= BOTÃO LIKE ================= */


.btn-like{

    background:#FFC107;

    border:none;

    border-radius:8px;

    padding:10px 18px;

    cursor:pointer;

    font-weight:bold;

    transition:.3s;

}



.btn-like:hover{

    background:#111;

    color:#FFC107;

    transform:scale(1.05);

}