/* ============================================
   AJUSTES CIRÚRGICOS PARA COMENTÁRIOS NO MOBILE
   Ferramentas Hub - Correções de Layout Mobile
   ============================================ */

/* Aplica box-sizing para garantir que padding não estoure largura */
.comments-section *,
.comments-section *::before,
.comments-section *::after {
    box-sizing: border-box;
}

/* AJUSTES MOBILE (max-width: 768px) */
@media (max-width: 768px) {
    
    /* Container Principal - Menos padding */
    .comments-section {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
        border-radius: 12px;
    }

    /* Cabeçalho - Ajuste de tamanhos */
    .comments-header {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .comments-header i {
        font-size: 1.5rem;
    }

    .comments-header h2 {
        font-size: 1.375rem;
    }

    .comments-count {
        padding: 0.25rem 0.625rem;
        font-size: 0.8125rem;
    }

    /* Formulário - Ajuste de padding */
    .comment-form-wrapper {
        padding: 1.25rem;
        margin-bottom: 2rem;
    }

    .comment-form-header {
        gap: 0.5rem;
        margin-bottom: 1.25rem;
    }

    .comment-form-header i {
        font-size: 1.25rem;
    }

    .comment-form-header h3 {
        font-size: 1.125rem;
    }

    /* Campos do formulário */
    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-group label {
        font-size: 0.8125rem;
        margin-bottom: 0.375rem;
    }

    .form-group textarea,
    .form-group input[type="text"],
    .form-group input[type="email"] {
        padding: 0.75rem;
        font-size: 0.9375rem;
        width: 100%;
        max-width: 100%;
    }

    .form-group textarea {
        min-height: 100px;
    }

    /* Rating de Estrelas - Reduzir tamanho */
    .rating-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
    }

    .rating-group label {
        font-size: 0.8125rem;
    }

    .star-rating {
        gap: 0.5rem;
    }

    .star-rating label {
        font-size: 1.5rem;
    }

    /* Grid de campos - Garantir quebra correta */
    .form-fields-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Botão de enviar */
    .submit-comment-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
        width: 100%;
        justify-content: center;
    }

    .submit-comment-btn i {
        font-size: 0.9375rem;
    }

    /* Lista de Comentários */
    .comments-list {
        gap: 1.25rem;
    }

    /* Item de Comentário */
    .comment-item {
        padding: 1rem;
        border-radius: 10px;
    }

    /* Avatar - Reduzir tamanho */
    .comment-avatar {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    /* Cabeçalho do comentário */
    .comment-header {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .comment-author {
        font-size: 0.9375rem;
    }

    .comment-info {
        gap: 0.75rem;
    }

    .comment-date {
        font-size: 0.8125rem;
    }

    .comment-rating i {
        font-size: 0.8125rem;
    }

    /* Conteúdo do comentário */
    .comment-content {
        font-size: 0.9375rem;
        line-height: 1.6;
        margin-bottom: 0.875rem;
    }

    /* Ações do comentário */
    .comment-actions {
        gap: 0.625rem;
        flex-wrap: wrap;
    }

    .comment-action-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
        flex: 1;
        min-width: calc(50% - 0.3125rem);
        justify-content: center;
    }

    .comment-action-btn i {
        font-size: 0.8125rem;
    }

    .helpful-count {
        font-size: 0.8125rem;
    }

    /* Área de resposta */
    .respond-area {
        margin-top: 1rem;
        padding: 1rem;
    }

    .respond-area .comment-form-wrapper {
        padding: 1rem;
    }

    /* Comentários aninhados */
    .comment-item[style*="margin-left"] {
        margin-left: 0.75rem !important;
        padding-left: 0.75rem;
        margin-top: 1rem;
    }

    /* Botão cancelar resposta */
    .cancel-reply-btn {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
        margin-left: 0.5rem !important;
        margin-top: 0.75rem !important;
    }
}

/* AJUSTES PARA TELAS MUITO PEQUENAS (max-width: 480px) */
@media (max-width: 480px) {
    
    .comments-section {
        padding: 1rem;
        border-radius: 10px;
    }

    .comments-header h2 {
        font-size: 1.25rem;
    }

    .comment-form-wrapper {
        padding: 1rem;
    }

    .comment-form-header h3 {
        font-size: 1rem;
    }

    .form-group textarea,
    .form-group input[type="text"],
    .form-group input[type="email"] {
        padding: 0.625rem;
        font-size: 0.875rem;
    }

    .star-rating {
        gap: 0.375rem;
    }

    .star-rating label {
        font-size: 1.375rem;
    }

    .submit-comment-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .comment-item {
        padding: 0.875rem;
    }

    .comment-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .comment-author {
        font-size: 0.875rem;
    }

    .comment-date {
        font-size: 0.75rem;
    }

    .comment-content {
        font-size: 0.875rem;
    }

    .comment-action-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        min-width: 100%;
    }

    .comment-item[style*="margin-left"] {
        margin-left: 0.5rem !important;
        padding-left: 0.5rem;
    }
}

/* Garante que nenhum elemento ultrapasse a largura da tela */
@media (max-width: 768px) {
    .comments-section,
    .comment-form-wrapper,
    .comment-item,
    .form-group textarea,
    .form-group input {
        max-width: 100%;
        overflow: hidden;
    }

    /* Previne quebra de layout em textos longos */
    .comment-content,
    .comment-author {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}