@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

    body {
        font-family: 'Poppins', sans-serif;
        scroll-behavior: smooth;
        overflow-x: hidden;
         /* Padding inferior para compensar banner flutuante (h-20 = 80px = pb-20) */
         padding-bottom: 80px;
    }
    /* Estilos para o conteúdo do artigo */
    .article-content h2 { font-size: 1.5em; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; }
    .article-content h3 { font-size: 1.25em; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.4em; }
    .article-content p { margin-bottom: 1em; line-height: 1.6; }
    .article-content ul { list-style: disc; margin-left: 1.5em; margin-bottom: 1em; }
    .article-content ol { list-style: decimal; margin-left: 1.5em; margin-bottom: 1em; }
    .article-content li { margin-bottom: 0.5em; }
    .article-content a { color: #3B82F6; text-decoration: underline; }
    .article-content blockquote { border-left: 4px solid #d1d5db; padding-left: 1em; margin: 1.5em 0; font-style: italic; color: #4b5563; }
    .article-content pre { background-color: #f3f4f6; padding: 1em; border-radius: 0.375rem; overflow-x: auto; margin-bottom: 1em; }
    .article-content code { font-family: monospace; }
    .article-content img { max-width: 100%; height: auto; margin: 1.5em 0; border-radius: 0.375rem; }
    /* .article-content iframe { max-width: 100%; margin: 1.5em 0; aspect-ratio: 16 / 9; } */ /* Removido aspect-ratio direto */

    /* Placeholder para anúncios */
    .ad-placeholder {
        background-color: #e5e7eb;
        border: 1px dashed #9ca3af;
        min-height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #6b7280;
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem; /* Adicionado margem superior */
    }
    /* Estilos para Comentários */
    .comment { border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem; margin-bottom: 1rem; }
    .comment:last-child { border-bottom: none; margin-bottom: 0; }
    .comment-author { font-weight: 600; color: #1f2937; }
    .comment-date { font-size: 0.75rem; color: #6b7280; margin-left: 0.5rem; }
    .comment-content { margin-top: 0.5rem; color: #374151; }
    /* Feedback do formulário */
    .form-feedback { min-height: 1.5em; margin-top: 0.5rem; font-size: 0.875rem; transition: opacity 0.3s ease-in-out; }
    .form-feedback:empty { opacity: 0; }
    .form-feedback.success { color: #16a34a; opacity: 1;} /* green-600 */
    .form-feedback.error { color: #dc2626; opacity: 1;} /* red-600 */
    .form-feedback.loading { color: #2563eb; opacity: 1;} /* blue-600 */

    /* Estilos para Artigos Relacionados */
    .related-article-card img {
         transition: transform 0.3s ease;
    }
    .related-article-card:hover img {
        transform: scale(1.05);
    }
    /* Para garantir que line-clamp funcione */
    .line-clamp-2 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* Estilo para container do vídeo responsivo (sem plugin) */
    .video-container-responsive {
        position: relative;
        padding-bottom: 56.25%; /* Proporção 16:9 (9 / 16 * 100) */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000; /* Fundo preto enquanto carrega */
        /* margin: 1.5em 0; */ /* Removido daqui, será aplicado no container externo */
        border-radius: 0.5rem; /* Adiciona bordas arredondadas */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra suave */

    }
    .video-container-responsive iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0; /* Remove borda do iframe */
    }

    /* Estilo para estrelas de avaliação */
    .rating-stars i { /* Estilo base para estrelas de exibição */
         margin-right: 2px;
    }
    .rating-stars-interactive i { /* Estilo para estrelas clicáveis */
         margin-right: 2px;
         cursor: pointer;
         transition: color 0.2s ease-in-out, transform 0.1s ease-in-out;
         color: #cbd5e1; /* Cor padrão (cinza claro) - Tailwind gray-300 */
    }
    /* Efeito hover: aplica a classe 'hover-active' via JS */
    .rating-stars-interactive i.hover-active {
        color: #facc15; /* Amarelo hover - Tailwind yellow-400 */
        transform: scale(1.15);
    }
    /* Estrelas preenchidas (após voto ou na exibição inicial) */
    .rating-stars-interactive i.active {
         color: #facc15; /* Amarelo ativo - Tailwind yellow-400 */
    }
    /* Desabilita interação visual após votar */
    .rating-stars-interactive.voted i {
        cursor: default;
    }
     .rating-stars-interactive.voted i:hover {
        transform: scale(1); /* Remove efeito de scale após votar */
        /* Mantém a cor base (amarela se ativa, cinza se não) */
    }
    /* Ajuste fino para hover após votar: só muda cor se for ativa */
    .rating-stars-interactive.voted i.active:hover {
         color: #facc15; /* Mantém amarelo se ativa */
    }
    .rating-stars-interactive.voted i:not(.active):hover {
         color: #cbd5e1; /* Mantém cinza se não ativa */
    }


    .rating-feedback {
        font-size: 0.75rem; /* text-xs */
        margin-left: 0.5rem; /* ml-2 */
        color: #6b7280; /* text-gray-500 */
        min-height: 1rem; /* Garante espaço */
        transition: color 0.3s;
    }
    .rating-feedback.success { color: #16a34a; }
    .rating-feedback.error { color: #dc2626; }
    .rating-feedback.loading { color: #2563eb; font-style: italic;}

/* ========================================================================== */
/* Estilos para Imagem de Afiliado no Artigo (ATUALIZADO)                     */
/* ========================================================================== */

.affiliate-image-container {
    float: left;
    margin-right: 1.5rem; /* Espaço à direita (Tailwind mr-6) */
    margin-bottom: 0.5rem; /* Espaço abaixo se o texto for curto (Tailwind mb-2) */
    width: 30%; /* Tenta ocupar uma porcentagem da largura do container pai */
    max-width: 180px; /* Largura máxima absoluta da imagem */
    min-width: 120px; /* Largura mínima para não ficar muito pequena */
    /* Opcional: Adicionar uma borda sutil se desejar */
    /* border: 1px solid #e5e7eb; */
    /* border-radius: 0.375rem; */
    /* padding: 0.25rem; */
}

.affiliate-image-container .affiliate-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.375rem; /* Tailwind rounded-md */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Clearfix para o container do conteúdo principal do artigo.
   Isso garante que o container se expanda para conter os floats internos
   e que elementos subsequentes fora dele (como a seção de comentários)
   sejam posicionados corretamente.
   A classe 'prose' do Tailwind já pode ter alguma forma de clearfix,
   mas adicionar uma explicitamente ao '.article-content' pode ser mais robusto.
*/
.article-content::after {
    content: "";
    clear: both;
    display: table;
}


/* Ajustes para telas menores (celular) */
@media (max-width: 767px) { /* Ajustado para 'md' breakpoint do Tailwind (768px), então usamos um pouco menos */
    .affiliate-image-container {
        float: none; /* Remove o float */
        display: block;
        width: 80%; /* Pode ocupar mais da largura da tela */
        max-width: 280px; /* Um pouco maior, mas ainda limitado */
        min-width: 0; /* Remove o min-width */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5rem; /* Mais espaço abaixo (Tailwind mb-6) */
    }
}