/* ==========================================================
   MAKETBUS
   Sistema de Comentários
   ========================================================== */


/* ==========================================================
   RESUMO
   ========================================================== */

.comentarios-resumo{

    margin-bottom:20px;

}


.comentarios-resumo strong{

    display:block;

    margin-bottom:6px;

    color:#1f2937;

    font-size:18px;

}


.comentarios-resumo .form-help{

    margin:0;

}


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

.comentario-formulario{

    margin-bottom:25px;

}


.comentario-formulario textarea{

    resize:vertical;

    min-height:120px;

}


/* ==========================================================
   VISITANTE
   ========================================================== */

.comentarios-visitante{

    margin-bottom:25px;

}


.comentarios-visitante p{

    max-width:700px;

    line-height:1.6;

}


/* ==========================================================
   LISTA
   ========================================================== */

.comentarios-lista{

    display:flex;

    flex-direction:column;

    gap:18px;

}


.comentario-item{

    padding:20px;

    scroll-margin-top:24px;

    border:1px solid #e2e6eb;

    border-radius:10px;

    background:#fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;

}


.comentario-item:target{

    border-color:#2563eb;

    background:#eff6ff;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, .16);

}


.comentario-item-moderado{

    border-color:#d1d5db;

    background:#f9fafb;

}


/* ==========================================================
   CABEÇALHO DO COMENTÁRIO
   ========================================================== */

.comentario-cabecalho{

    display:flex;

    align-items:center;

    gap:14px;

}


.comentario-avatar{

    display:block;

    width:52px;

    height:52px;

    flex-shrink:0;

    border-radius:50%;

    overflow:hidden;

    background:#eef1f5;

}


.comentario-avatar img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}


.comentario-identidade{

    min-width:0;

    flex:1;

}


.comentario-identidade h3{

    margin:0 0 4px 0;

    font-size:16px;

}


.comentario-identidade h3 a{

    text-decoration:none;

}


.comentario-identidade small{

    color:#777;

}


/* ==========================================================
   TEXTO
   ========================================================== */

.comentario-texto{

    margin-top:15px;

    padding-top:15px;

    border-top:1px solid #edf0f3;

}


.comentario-texto p{

    margin:0;

    color:#444;

    line-height:1.7;

    overflow-wrap:anywhere;

}


/* ==========================================================
   REMOÇÃO
   ========================================================== */

.comentario-remover-formulario{

    margin-top:15px;

}


/* ==========================================================
   LISTA VAZIA
   ========================================================== */

.comentarios-vazio{

    padding:24px;

    border:1px dashed #c8ced6;

    border-radius:10px;

    background:#f8f9fb;

    text-align:center;

    color:#666;

}


.comentarios-vazio p{

    margin:0;

}


.comentarios-vazio p + p{

    margin-top:8px;

}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media(max-width:600px){

    .comentario-item{

        padding:16px;

    }


    .comentario-cabecalho{

        align-items:flex-start;

    }


    .comentario-avatar{

        width:46px;

        height:46px;

    }


    .comentario-identidade h3{

        font-size:15px;

    }

}


.comentario-item-moderado .comentario-texto{

    border-top-color:#d1d5db;

}


.comentario-item-moderado .comentario-texto p{

    color:#6b7280;

}


.comentario-item-moderado .comentario-texto em{

    font-style:italic;

    font-weight:600;

}

/* ==========================================================
   UX03-T01 — Tema escuro: Comentários
   ========================================================== */

html[data-theme="dark"] .comentarios-resumo strong{
    color:var(--text);
}

html[data-theme="dark"] .comentario-item{
    background:var(--surface);
    border-color:var(--border);
}

html[data-theme="dark"] .comentario-item:target{
    background:var(--surface-2);
    border-color:var(--brand-400);
}

html[data-theme="dark"] .comentario-item-moderado{
    background:var(--surface-2);
    border-color:var(--border);
}

html[data-theme="dark"] .comentario-avatar{
    background:var(--surface-2);
}

html[data-theme="dark"] .comentario-identidade small{
    color:var(--text-muted);
}

html[data-theme="dark"] .comentario-texto{
    border-color:var(--border);
}

html[data-theme="dark"] .comentario-texto p{
    color:var(--text);
}

html[data-theme="dark"] .comentario-item-moderado .comentario-texto{
    border-color:var(--border);
}

html[data-theme="dark"] .comentario-item-moderado .comentario-texto p{
    color:var(--text-muted);
}

html[data-theme="dark"] .comentarios-vazio{
    background:var(--surface-2);
    border-color:var(--border-strong);
    color:var(--text-secondary);
}