/* =========================================================================
 * CORREÇÕES E AJUSTES PARA O TEMA 5DROPZ (VERSÃO DEFINITIVA)
 * ========================================================================= */

/* 1. Reset Essencial para Botões e Ícones
-------------------------------------------------------------------------- */

/* REMOVE os estilos padrão do navegador (círculos cinza, bordas, etc.) 
   dos nossos botões do header, permitindo que o base-5play.css funcione. */
.hbtn, .qs-btn, .mod-btn {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Desativa a técnica de mask-image do CSS base para que a Font Awesome funcione */
.im, .fa-solid, .fa-brands {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: transparent !important;
    width: auto;
    height: auto;
}

/* Estilos personalizados do tema */
.hbtn { font-size: 16px; }
.m-item { gap: 8px; }
.m-item .fa-solid { font-size: 20px; width: 24px; text-align: center; }
.huser img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }


/* 2. Lógica de Animação para Ícones de Botões
-------------------------------------------------------------------------- */
.hbt > i.fa-solid {
    transition: transform .2s ease, opacity .2s ease;
    position: absolute;
    font-size: 20px;
}
.qs-toggle .fa-magnifying-glass { opacity: 1; transform: scale(1); }
.qs-toggle .fa-xmark { opacity: 0; transform: scale(0.5); }
html.qs .qs-toggle .fa-magnifying-glass { opacity: 0; transform: scale(0.5); }
html.qs .qs-toggle .fa-xmark { opacity: 1; transform: scale(1); }

.mod-btn .fa-sun { opacity: 1; transform: scale(1); }
.mod-btn .fa-moon { opacity: 0; transform: scale(0.5); }
html.darkmod .mod-btn .fa-sun { opacity: 0; transform: scale(0.5); }
html.darkmod .mod-btn .fa-moon { opacity: 1; transform: scale(1); }


/* 3. Lógica da Barra de Pesquisa (COM AJUSTES DE POSIÇÃO E RESPONSIVIDADE)
-------------------------------------------------------------------------- */

/* A. Alinha o formulário para sobrepor o menu, em vez de ficar abaixo */
.header-tools {
    position: relative; /* Cria um contexto de posicionamento para o formulário */
}
.qs-form {
    position: absolute; /* Tira o formulário do fluxo normal da página */
    top: 0;             /* Alinha no topo do container .header-tools */
    left: 0;
    width: 100%;
    /* A animação de entrada/saída já é controlada pelo margin-top do base-5play.css */
}

/* B. Ativa o formulário quando a classe .searchopen é adicionada */
.header-tools.searchopen .qs-form {
    margin-top: 0;
}
.header-tools.searchopen .qs-control {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

/* C. Corrige o ícone duplicado em diferentes tamanhos de tela */

/* EM TELAS MENORES (até 991px): Esconde a lupa do topo direito. */
@media (max-width: 991px) {
    .head-r .qs-toggle {
        display: none !important;
    }
}

/* EM TELAS MAIORES (a partir de 992px): Esconde a lupa de dentro do menu de navegação. */
@media (min-width: 992px) {
    .hmenu-list > .qs-toggle {
        display: none !important;
    }
}


/* D. Estilos para o botão de fechar a busca em mobile */
.qs-control .qs-toggle { --im-color: hsl(var(--c-primary)); }
.qs-control .qs-toggle i.fa-arrow-left {
    color: var(--im-color); position: relative; font-size: 16px;
}
.qs-control .qs-toggle i.fa-arrow-left::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 28px; height: 28px;
    border-radius: 50%; background-color: hsla(var(--c-primary), 0.2); z-index: -1;
}

/* 4. Seletor de Idiomas
-------------------------------------------------------------------------- */
.lang-sel-border > i {
    cursor: pointer; transition: opacity .2s ease; font-style: normal;
    text-transform: uppercase; font-size: 11px;
    font-family: 'Geologica', sans-serif, system-ui; font-weight: 500;
}
.lang-sel-border > i::after { content: attr(title); }

/* 5. Ajustes para a Página Single (appview)
-------------------------------------------------------------------------- */

/* Alinha os ícones do Font Awesome dentro dos botões de like/dislike */
.appview-likes button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaço entre o ícone e o texto */
}

/* Alinha os ícones das ferramentas (Share, Update, Bookmark) */
.av-tool-list .av-tool button,
.av-tool-list .av-tool a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; /* Espaço vertical entre ícone e texto */
}
.av-tool-list .av-tool .fa-solid {
    font-size: 24px;
    height: 24px;
    margin-bottom: 4px;
}

/* 6. Botões de Scroll da Galeria (VISÍVEIS APENAS EM DESKTOP)
-------------------------------------------------------------------------- */

/* Por padrão (mobile-first), o container dos botões fica escondido. */
.scroll-buttons {
    display: none;
}

/* A partir de 992px de largura (telas maiores), os estilos abaixo são aplicados. */
@media (min-width: 992px) {

    /* Mostra o container dos botões */
    .scroll-buttons {
        display: flex !important; /* !important para sobrescrever qualquer estilo inline */
    }

    /* Estilos para os ícones dentro dos botões de scroll */
    .scroll-button .fa-solid {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: hsl(var(--c-text));
        font-size: 16px;
        opacity: 0.8;
    }

    /* Fundo circular para os ícones, imitando o 5play */
    .scroll-button .fa-solid::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        border-radius: 50%;
        background-color: hsla(var(--c-body), 0.8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: var(--block-sw);
        transition: transform .15s ease, opacity .15s ease;
    }

    .scroll-button:hover .fa-solid {
        opacity: 1;
    }
    
    .scroll-button:hover .fa-solid::after {
        transform: scale(1.05);
    }

    /* Classe .hidden para controlar a visibilidade via JavaScript */
    .scroll-button.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
}

/* 8. Estilos para a Seção de Comentários
-------------------------------------------------------------------------- */

/* Garante que o avatar preencha o círculo */
.com-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Estiliza o botão de "Responder" para se parecer com os outros botões */
.com-cloud-foot .comment-reply-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-2);
    padding: 12px 16px;
    height: 48px;
}
.com-cloud-foot .com-likes {
    margin-left: auto;
}
.com-cloud-foot .com-likes a {
    gap: 4px;
}

/* Ajustes no formulário de comentário padrão do WordPress */
.comment-respond {
    margin-top: 20px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
}
.form-submit {
    text-align: right;
}
.logged-in-as {
    font-size: var(--fs-3);
    margin-bottom: 10px;
}

/* 9. Estilos para Formulário de Comentário Compacto
-------------------------------------------------------------------------- */
.com-form-editor .btn .fa-paper-plane {
    font-size: 20px;
}
.com-form-editor textarea {
    min-height: 48px; /* Altura mínima igual ao input normal */
    padding-top: 12px;
    padding-bottom: 12px;
}

/* 10. Estilos para o Rodapé (Footer)
-------------------------------------------------------------------------- */

/* Ícone do Telegram no banner */
.f-telegram .f-telegram-icon .fa-telegram {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -40%);
    opacity: 0.1;
    color: hsl(var(--c-blue));
}

/* Ícone de "Voltar ao Topo" */
.scroll-up .fa-arrow-up {
    font-size: 20px;
    opacity: 0.7;
}
.scroll-up:hover .fa-arrow-up {
    opacity: 1;
}

/* 11. Ajustes Finais de Layout do Header (Desktop & Mobile) - VERSÃO DEFINITIVA
-------------------------------------------------------------------------- */

/* Regras para DESKTOP (telas com 992px ou mais) */
@media (min-width: 992px) {
    /* Transforma a coluna da esquerda em um container flex para alinhar o logo e o seletor */
    .header-first .head-l {
        display: flex;
        align-items: center;
        gap: 16px; /* Cria um espaçamento consistente entre o logo e o seletor */
    }

    /* Define uma altura máxima para a imagem do logo para manter a harmonia */
    .header-first .logotype img {
        max-height: 40px; /* Altere para o tamanho ideal do seu logo no desktop */
        width: auto;
    }

    /* Remove a largura fixa do container do logo, permitindo que ele se ajuste à imagem */
    .header-first .logotype {
        width: auto;
    }

    /* SOBRESCREVE a margem fixa do menu central para algo flexível.
       Isso força o menu a respeitar o espaço ocupado pela coluna da esquerda. */
    .header-tools {
        margin-left: 280px !important; /* Aumente este valor se o seu logo for muito largo */
        margin-right: 188px !important; /* Mantém o alinhamento com os ícones da direita */
    }
}

/* Regras para MOBILE (telas com até 991px) - Sem alterações, já está correto */
@media (max-width: 991px) {
    .header-first { height: auto !important; }
    .header-first .wrp { height: auto; padding-top: 12px; padding-bottom: 12px; }
    .header-first .logotype { width: auto; max-width: 200px; }
    .header-first .logotype img { max-height: 36px; }
    .head-l, .head-r, .lang-sel { align-self: center; }
}


/* 12. Estilos do Seletor de Idiomas (Cores Ativo/Inativo)
-------------------------------------------------------------------------- */
.lang-sel-border > i { opacity: 0.4; transition: opacity 0.2s ease; }
.lang-sel-border > i.active { opacity: 1; }
.lang-sel-border > i:not(.active):hover { opacity: 0.7; }

/* 13. Estilos para Widget de Últimos Comentários
-------------------------------------------------------------------------- */

/* Garante que a imagem do avatar preencha o container circular */
.cardcom-head .cover img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Alinha o ícone de seta à direita no link do post */
.cardcom-cloud .item-link .fa-chevron-right {
    margin-left: auto;
    font-size: 14px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.cardcom-cloud .item-link:hover .fa-chevron-right {
    transform: translateX(3px);
}

/* 14. Estilos para a Página de Categoria e Paginação
-------------------------------------------------------------------------- */

.navigation.pagination {
    margin-top: var(--sect-gap);
    display: flex;
    justify-content: center;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    line-height: 24px;
    height: 40px;
    min-width: 40px;
    white-space: nowrap;
    border-radius: 20px;
    text-align: center;
    font-weight: var(--fw-bold);
    text-decoration: none;
}

.nav-links .page-numbers.prev,
.nav-links .page-numbers.next {
    box-shadow: inset 0 0 0 1px hsla(var(--c-text), 0.1);
}
.nav-links .page-numbers.prev:hover,
.nav-links .page-numbers.next:hover {
    box-shadow: inset 0 0 0 1px hsla(var(--c-text), 0.2);
}

.nav-links .page-numbers.current {
    background-color: hsla(var(--c-primary), 0.1);
    color: hsl(var(--c-second));
}

.nav-links .page-numbers:not(.current):not(.prev):not(.next):hover {
    box-shadow: inset 0 0 0 1px hsla(var(--c-text), 0.1);
}

.nav-links .dots {
    padding: 8px;
}

/* 15. Estilos para a Página de Tags (Nuvem de Tags)
-------------------------------------------------------------------------- */

/* Garante que todos os links dentro da lista de tags tenham o mesmo estilo,
   sobrescrevendo os tamanhos de fonte inline que o WordPress adiciona. */
.tag-list a {
    font-size: 16px !important; /* !important para forçar o mesmo tamanho */
    padding: 8px 16px !important; /* Garante o padding correto */
}

/* O WordPress envolve a contagem de posts em um 'aria-label'. 
   Não precisamos disso, mas mantemos a estilização do link. */
.tag-list a .tag-link-count {
    display: none; /* Esconde a contagem de posts se ela aparecer */
}

/* 16. Estilos para a Página de Notícias (Blog e Single) - VERSÃO FINAL E DEFINITIVA
-------------------------------------------------------------------------- */

/* Garante que a estrutura de 2 colunas seja ativada em telas maiores */
@media (min-width: 992px) {
    .blog .str-main { flex: 1 1 auto; min-width: 0; }
    .blog .str-add { flex: 0 0 320px; min-width: 300px; }
    .blog.str { gap: 40px; }
}

/* --- Lista de Notícias (archive-news.php) --- */
.blog-list .article {
    display: flex; flex-direction: column;
    margin-bottom: var(--group-gap);
    border: 1px solid var(--c-border);
    border-radius: var(--block-rd);
    overflow: hidden;
}
@media (min-width: 576px) { .blog-list .article { flex-direction: row; } }
.blog-list .article .cont { padding: 20px; display: flex; flex-direction: column; }
.blog-list .article .meta { margin-bottom: 8px; gap: 12px; }
.blog-list .article .title { font-size: 20px; margin-bottom: 12px; }
.blog-list .article .title a:hover { color: var(--c-primary); }
.blog-list .article .desc {
    color: hsla(var(--c-text), .7); margin-bottom: 16px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-list .article .btn-group { margin-top: auto; }

/* --- Post Individual (single-news.php) --- */
.blogview-head .title { font-size: var(--fs-title-view); margin-bottom: 16px; }
.blogview-head .meta { display: flex; align-items: center; gap: 16px; font-size: var(--fs-2); color: hsla(var(--c-text), .7); margin-bottom: 24px; }
.blogview-head .meta-item { display: flex; align-items: center; gap: 6px; }

/* --- Barra Lateral --- */
.blog-block { border: 1px solid var(--c-border); border-radius: var(--block-rd); padding: 24px; }
.blog-block > .title { font-size: var(--fs-title-sect); margin-bottom: 16px; }
.article-min { display: flex; gap: 12px; }
.article-min + .article-min { margin-top: 16px; }
.article-min .title { font-size: 15px; font-weight: normal; }
.article-min .title a:hover { color: var(--c-primary); }


/* ========================================================================= */
/* A CORREÇÃO FINAL E DEFINITIVA PARA TODAS AS IMAGENS DESTACADAS            */
/* ========================================================================= */

/* Para o post individual (single-news.php) */
.blogview-cover.cover {
    display: block;
    border-radius: var(--block-rd);
    overflow: hidden;
    margin-bottom: 24px;
}
.blogview-cover.cover img {
    position: relative; /* <-- ADICIONE ESTA LINHA */
    width: 100%;
    height: auto;
    display: block;
}

/* Para a lista de notícias (archive-news.php) */
.blog-list .article-cover {
    flex-shrink: 0;
    width: 100%; /* Mobile */
    height: 186px; /* Altura fixa como no 5play */
}
@media (min-width: 576px) {
    .blog-list .article-cover {
        width: 304px; /* Largura fixa em desktop */
    }
}
.blog-list .article-cover .cover,
.blog-list .article-cover .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem cobrir o espaço sem distorcer */
}

/* Para a barra lateral (sidebar-news.php) */
.article-min .article-cover {
    flex: 0 0 100px;
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
}
.article-min .article-cover .cover,
.article-min .article-cover .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 18. Ajustes Finais para a Página de Notícia
-------------------------------------------------------------------------- */

/* Corrige os botões de Like/Dislike para ocuparem o espaço todo */
.blogview-rate.appview-likes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--c-border);
}

.blogview-rate.appview-likes a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--block-rd);
    background-color: hsla(var(--c-text), 0.05);
    transition: background-color 0.2s ease;
}

.blogview-rate.appview-likes a:hover {
    background-color: hsla(var(--c-text), 0.1);
}

/* Ajusta o formulário de comentário na página de notícias */
.single-news .comments-add {
    width: 100%;
    max-width: 700px; /* Limita a largura para melhor legibilidade */
    margin: 0 auto;
}

/* Garante que o ícone do app/imagem destacada no formulário seja redondo */
.com-form-head .appicon img {
    border-radius: 22%;
    object-fit: cover;
}

/* 19. Estilos para a Seção "Leia a Seguir" (single-news.php) - VERSÃO FINAL
-------------------------------------------------------------------------- */

/* Container principal do bloco */
.blogview-more {
    margin-top: 32px;
    padding: 24px;
    border-radius: var(--block-rd);
    background-color: hsla(var(--c-primary), 0.07);
    text-align: center; /* A MÁGICA: Centraliza tudo dentro do bloco */
}
.darkmod .blogview-more {
    background-color: hsla(var(--c-primary), 0.12);
}

/* Bloco superior (Leia a seguir, título e botão) */
.read-next {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 16px;
    /* A linha separadora é criada aqui */
    border-bottom: 1px solid hsla(var(--c-text), 0.1); 
}

/* Estilo para o texto "Leia a seguir" */
.read-next-label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--fs-3);
    color: hsl(var(--c-primary)); /* Cor verde */
    opacity: 0.8;
}

/* Estilo para o título do próximo post */
.read-next .title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 16px;
    line-height: 1.3;
}
.read-next .title a:hover {
    color: hsl(var(--c-primary));
}

.read-next .btn-group {
    margin-bottom: 0;
}

/* Estilo para o link "Todas as notícias" */
.read-all {
    display: block;
    font-size: var(--fs-2);
    color: hsl(var(--c-primary)); /* Cor verde */
    font-weight: bold; /* Texto em negrito */
    opacity: 0.8;
}
.read-all:hover {
    opacity: 1;
}

/* 20. Estilos para o Dropdown de Compartilhamento (single-news.php)
-------------------------------------------------------------------------- */

/* A. Estilos gerais para o link/botão de compartilhamento */
.share-list .share-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;  /* Define a largura do círculo */
    height: 40px; /* Define a altura do círculo */
    position: relative; /* Necessário para o fundo circular */
    z-index: 1;
}

/* B. Estilos para o ícone Font Awesome */
.share-list .share-btn .fa-brands {
    font-size: 20px; /* Tamanho do ícone dentro do círculo */
    line-height: 1;
    color: var(--share-color); /* Usa a cor definida abaixo */
    transition: transform 0.2s ease;
}

/* C. Fundo circular colorido (a mágica acontece aqui) */
.share-list .share-btn::after {
    content: "";
    position: absolute;
    inset: 0; /* Ocupa todo o espaço do link <a> */
    border-radius: 50%;
    z-index: -1; /* Fica atrás do ícone */
    background-color: var(--share-color); /* Usa a cor definida abaixo */
    opacity: 0.15; /* Deixa o fundo clarinho */
    transition: opacity 0.15s ease;
}

/* D. Efeito Hover */
.share-list .share-btn:hover::after {
    opacity: 0.25; /* Deixa o fundo um pouco mais forte no hover */
}
.share-list .share-btn:hover .fa-brands {
    transform: scale(1.05); /* Efeito de crescimento sutil no ícone */
}

/* E. Cores específicas para cada rede social */
.share-list .share-tg { --share-color: #26A5E4; } /* Azul do Telegram */
.share-list .share-wa { --share-color: #25D366; } /* Verde do WhatsApp */
.share-list .share-fb { --share-color: #1877F2; } /* Azul do Facebook */

/* 21. Ajustes Finais na Seção de Comentários
-------------------------------------------------------------------------- */

/* Garante um espaçamento maior quando a seção de comentários está vazia,
   imitando o layout do 5play. */
.sect-comments .sect-head + .comments-add {
    margin-top: var(--sect-gap); /* Usa a variável de espaçamento padrão do tema */
}

/* 22. Ajuste de Espaçamento do Botão de Comentário (VERSÃO DEFINITIVA)
-------------------------------------------------------------------------- */

/* Adiciona um espaçamento no topo do container do botão "Send"
   para separá-lo do campo de texto em TODOS os tamanhos de tela. */
.com-form-editor .form-submit {
    margin-top: 12px;
}

/* 23. Estilos e Ajustes para o Modal de Login
-------------------------------------------------------------------------- */

/* Garante que o ícone do botão de fechar seja visível */
.modal .close-btn .fa-solid {
    font-size: 20px;
    line-height: 1;
}

/* Garante que a classe para abrir o modal funcione */
.modal-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Estilo para o logo dentro do modal */
.modal-side-pic .modal-logo {
    position: absolute;
    top: 32px;
    left: 32px;
    z-index: 2;
    width: 32px;
    height: 32px;
    background-color: white; /* Cor do ícone de logo */
    -webkit-mask-image: url('../img/icons/5play.svg');
    mask-image: url('../img/icons/5play.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Ícone para o botão de login no header */
.huser.hlogin .mask .fa-solid {
    font-size: 20px;
    color: hsl(var(--c-primary));
}

/* 24. Estilos Finais para Botões de Login e Avatar no Header (VERSÃO DEFINITIVA)
-------------------------------------------------------------------------- */

/* A. Estilo para o botão de LOGIN (quando deslogado) */
.huser.hlogin {
    position: relative; /* Cria um contexto para o posicionamento do ícone */
    border-radius: 50%; /* Garante que o botão seja um círculo */
    background-color: hsla(var(--c-primary), 0.2); /* Fundo verde semi-transparente */
    width: 40px;
    height: 40px;
}

/* Cria o efeito de "selo" com um pseudo-elemento */
.huser.hlogin::before {
    content: "";
    position: absolute;
    inset: -2px; /* Ligeiramente maior que o botão para criar a borda */
    border-radius: 50%;
    /* A mágica do formato de selo acontece aqui com mask-image */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 44C16.9248 44 11.9845 42.1995 8.18182 38.899L8.18241 38.8984C8.18212 38.8981 8.18182 38.8978 8.18152 38.8975L8.18182 38.899L6.50553 40.3015L6.07107 38.4289L4.02492 37.9289L3.59046 36.0564L1.54431 35.5564L1.10985 33.6838L-0.936299 33.1838L-1.37076 31.3113L-3.41691 30.8113L-3.85137 28.9387L-5.89752 28.4387L-6.33198 26.5662L-8.37813 26.0662L-8.81259 24.1936L-10.8587 23.6936L-11.2932 21.821L-13.3394 21.321L-13.7738 19.4485L-15.8199 18.9485L-16.2544 17.0759L-18.3005 16.5759L-18.735 14.7033L-20.7812 14.2033L-21.2156 12.3308L-22 11.8541L-21.2156 11.3774L-20.7812 9.50484L-18.735 9.00484L-18.3005 7.13227L-16.2544 6.63227L-15.8199 4.7597L-13.7738 4.2597L-13.3394 2.38712L-11.2932 1.88712L-10.8587 -0.0125868L-8.81259 -0.512587L-8.37813 -2.38516L-6.33198 -2.88516L-5.89752 -4.75773L-3.85137 -5.25773L-3.41691 -7.1303L-1.37076 -7.6303L-0.936299 -9.50288L1.10985 -10.0029L1.54431 -11.8755L3.59046 -12.3755L4.02492 -14.248L6.07107 -14.748L6.50553 -16.5711L8.18182 -18.001L8.18152 -18.0025C8.18182 -18.0022 8.18212 -18.0019 8.18241 -18.0016L8.18182 -18.001C11.9845 -21.3005 16.9248 -23.1 22 -23.1C27.0752 -23.1 32.0155 -21.3005 35.8182 -18.001L35.8176 -18.0016C35.8179 -18.0019 35.8182 -18.0022 35.8185 -18.0025L35.8182 -18.001L37.4945 -16.5711L37.9289 -14.748L39.9751 -14.248L40.4095 -12.3755L42.4557 -11.8755L42.8901 -10.0029L44.9363 -9.50288L45.3708 -7.6303L47.4169 -7.1303L47.8514 -5.25773L49.8975 -4.75773L50.332 -2.88516L52.3781 -2.38516L52.8126 -0.512587L54.8587 -0.0125868L55.2932 1.88712L57.3394 2.38712L57.7738 4.2597L59.8199 4.7597L60.2544 6.63227L62.3005 7.13227L62.735 9.00484L64.7812 9.50484L65.2156 11.3774L66 11.8541L65.2156 12.3308L64.7812 14.2033L62.735 14.7033L62.3005 16.5759L60.2544 17.0759L59.8199 18.9485L57.7738 19.4485L57.3394 21.321L55.2932 21.821L54.8587 23.6936L52.8126 24.1936L52.3781 26.0662L50.332 26.5662L49.8975 28.4387L47.8514 28.9387L47.4169 30.8113L45.3708 31.3113L44.9363 33.1838L42.8901 33.6838L42.4557 35.5564L40.4095 36.0564L39.9751 37.9289L37.9289 38.4289L37.4945 40.3015L35.8182 38.899L35.8185 38.8975C35.8182 38.8978 35.8179 38.8981 35.8176 38.8984L35.8182 38.899C32.0155 42.1995 27.0752 44 22 44Z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: hsla(var(--c-primary), 0.2);
}

/* Centraliza e colore o ícone do Font Awesome */
.huser.hlogin .fa-solid {
    font-size: 20px;
    color: hsl(var(--c-primary)); /* Ícone verde sólido */
}


/* B. Estilo para o AVATAR (quando logado) */
.huser.hlogged img.avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* 25. Estilos para a Página de Registro (VERSÃO RESPONSIVA FINAL)
-------------------------------------------------------------------------- */

/* Estilos gerais para a página */
.pageform-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: hsl(var(--c-body-tone));
}
.pageform {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.pageform-in {
    flex-grow: 1; /* Faz esta div ocupar todo o espaço vertical disponível */
    display: flex;
    align-items: center; /* Centraliza verticalmente o box */
    justify-content: center; /* Centraliza horizontalmente o box */
    padding: 20px;
}
.pform-box {
    width: 100%;
    max-width: 480px; /* Largura do formulário em desktop */
    background-color: hsl(var(--c-body));
    border-radius: var(--block-rd);
    box-shadow: var(--block-sw);
    overflow: hidden;
}
.pform-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--c-border);
}
.pform-box-head .logotype img {
    max-height: 28px;
    width: auto;
}
.pform-cont-in {
    padding: 40px;
}
.pform-cont-form.form-list .form-group + .form-group {
    margin-top: 24px;
}
.pageform-copyright {
    padding: 24px;
    font-size: var(--fs-3);
    opacity: 0.7;
    text-align: center;
}

/* A MÁGICA PARA O MOBILE ACONTECE AQUI */
@media (max-width: 575px) {
    /* 1. Removemos o padding do container principal */
    .pageform-in {
        padding: 0;
        align-items: stretch; /* Estica o filho para ocupar 100% da altura */
    }

    /* 2. Fazemos o box do formulário ocupar 100% da tela */
    .pform-box {
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }

    /* 3. Fazemos a área de conteúdo do formulário crescer */
    .pform-box .pform-cont {
        flex-grow: 1;
    }
    
    /* 4. Ajustamos o padding interno para mobile */
    .pform-cont-in {
        padding: 24px 20px;
    }

    /* 5. Escondemos o copyright no mobile */
    .pageform-copyright {
        display: none;
    }
}

/* Estilo para as mensagens de erro (permanece o mesmo) */
.fivedropz-form-message.error {
    background-color: hsla(var(--c-red), 0.1);
    color: hsl(var(--c-red));
    padding: 12px 16px;
    border-radius: var(--btn-rd);
    margin-bottom: 24px;
    font-size: var(--fs-2);
}
.fivedropz-form-message.error p { margin: 0; }
.fivedropz-form-message.error p + p { margin-top: 8px; }

/* Estilo para as mensagens de sucesso */
.fivedropz-form-message.success {
    background-color: hsla(var(--c-primary), 0.1);
    color: hsl(var(--c-primary));
    padding: 12px 16px;
    border-radius: var(--btn-rd);
    margin-bottom: 24px;
    font-size: var(--fs-2);
    text-align: center;
}
.fivedropz-form-message.success p {
    margin: 0;
}

/* 26. Estilos para a Página de Perfil de Usuário (VERSÃO FINAL)
-------------------------------------------------------------------------- */
.sys-page-user .wrp { max-width: 800px; }

.userpage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}
.userpage-photo .avatar { width: 128px; height: 128px; border-radius: 50%; margin-bottom: 16px; }
.userpage-photo .avatar img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
.userpage-name .title { font-size: var(--fs-title-cat); margin-bottom: 4px; }
.userpage-name .fullname { font-size: var(--fs-1); opacity: 0.7; margin-bottom: 16px; }
.userpage-name .status { margin-bottom: 20px; }

.userpage-info {
    width: 100%;
    padding: 16px 24px;
    background-color: hsl(var(--c-body-tone));
    border-radius: var(--block-rd);
    font-size: var(--fs-2);
}
.userpage-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}
.userpage-info-item + .userpage-info-item { border-top: 1px solid var(--c-border); }
.userpage-info-label { opacity: 0.7; }
.userpage-info-data { font-weight: var(--fw-bold); }

.userpage-form .title { font-size: var(--fs-title-sect); margin-bottom: 20px; }
.userpage-form hr { margin: 20px 0; }
.delete-account { text-align: center; }

/* Estilos para o input de arquivo customizado */
.file-attachment input[type="file"] { display: none; }
.file-attachment label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px dashed var(--c-border);
    border-radius: var(--btn-rd);
    cursor: pointer;
    transition: border-color .2s ease;
}
.file-attachment label:hover { border-color: hsla(var(--c-primary), 0.5); }
.file-attachment .file-name { font-size: var(--fs-3); opacity: 0.7; }
.file-attachment .fa-solid { color: hsl(var(--c-primary)); }

/* Estilos para o checkbox customizado */
.checkbox-btn input[type="checkbox"] { display: none; }
.checkbox-btn .checkbtn-on { display: none; }
.checkbox-btn input:checked + .checkbox-btn-label .checkbtn-off { display: none; }
.checkbox-btn input:checked + .checkbox-btn-label .checkbtn-on { display: inline; }
.checkbox-btn input:checked + .checkbox-btn-label {
    --btn-c-text: hsl(var(--c-red));
    --btn-c-bg: hsla(var(--c-red), 0.1);
}

/* 27. Estilos para o Modal do Usuário Logado (VERSÃO FINAL)
-------------------------------------------------------------------------- */

#modal-user { max-width: var(--modal-w); }

/* CORREÇÃO: Altera o layout do perfil para ser uma coluna centralizada */
.upanel-profile {
    display: flex;
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: center;   /* Centraliza horizontalmente */
    padding: 24px;
    text-align: center;
}
.upanel-profile .avatar-link {
    display: block;
    width: 100px; /* Tamanho do avatar */
    height: 100px;
    margin-bottom: 12px; /* Espaço entre o avatar e o texto */
}
.upanel-profile .avatar-link .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.upanel-profile .cont .title {
    font-size: var(--fs);
    font-weight: var(--fw-bold);
    margin-bottom: 2px;
}
.upanel-profile .cont .item-link {
    font-size: var(--fs-2);
    opacity: 0.7;
    transition: opacity .2s ease;
}
.upanel-profile .cont .item-link:hover { opacity: 1; }

/* Menu de navegação (estilos permanecem os mesmos) */
.upanel-menu { padding: 12px; border-top: 1px solid var(--c-border); }
.upanel-menu .m-item { padding: 12px !important; gap: 12px; font-size: var(--fs-1); transition: background-color .2s ease; border-radius: 8px; }
.upanel-menu .m-item:hover { background-color: hsla(var(--c-text), 0.05); opacity: 1; }
.upanel-menu .m-item .fa-solid { width: 24px; text-align: center; font-size: 20px; opacity: 0.7; }
.upanel-menu .m-item .m-item-num { margin-left: auto; font-size: var(--fs-3); background-color: hsla(var(--c-yellow),0.5); color: hsl(var(--c-text)); padding: 2px 6px; border-radius: 8px; }
.darkmod .upanel-menu .m-item .m-item-num { background-color: hsla(var(--c-yellow),0.1); color: hsl(var(--c-yellow)); }

/* 28. Estilos para o Popup de Perfil de Usuário (VERSÃO FINAL 2)
-------------------------------------------------------------------------- */

/* 1. Aumenta a largura máxima do popup */
#modal-user-profile .modal {
    max-width: 420px; /* Aumentado de 380px para 420px para mais espaço */
}
#user-profile-popup-content {
    transition: opacity .2s ease;
}

/* 2. Caixa cinza do perfil com mais espaçamento */
#modal-user-profile .upanel-profile {
    background-color: hsla(var(--c-text), 0.05);
    border-radius: var(--btn-rd);
    padding: 20px; /* Aumentado de 16px para 20px */
    display: flex;
    align-items: center;
    gap: 16px; /* Espaço entre avatar e texto */
    margin: 24px;
}

/* 3. Garante que o avatar seja redondo e visível */
#modal-user-profile .upanel-profile .mask.cover {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    /* Remove a máscara de SVG para garantir compatibilidade */
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 50%; /* Força o formato redondo */
    overflow: hidden; /* Garante que a imagem fique dentro do círculo */
}
#modal-user-profile .upanel-profile .mask.cover .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Textos dentro da caixa cinza */
#modal-user-profile .upanel-profile .title { font-size: var(--fs-1); font-weight: var(--fw-bold); }
#modal-user-profile .upanel-profile .upanel-status { font-size: var(--fs-3); opacity: 0.7; }

/* 4. Lista de informações com mais espaçamento */
.usinf {
    padding: 16px 32px; /* Aumenta o padding horizontal de 24px para 32px */
    font-size: var(--fs-2);
}
.usinf li { display: flex; justify-content: space-between; padding: 12px 0; }
.usinf li + li { border-top: 1px solid var(--c-border); }
.usinf .ui-c1 { opacity: 0.7; }
.usinf a { color: inherit; text-decoration: underline; }

/* 5. Botões com mais espaçamento */
#modal-user-profile .ui-dialog-buttonpane {
    padding: 8px 32px 24px; /* Aumenta o padding horizontal de 24px para 32px */
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#modal-user-profile .ui-dialog-buttonpane .btn { flex: 1; width: 100%; }

/* 29. Estilos para o Sistema de Votação
-------------------------------------------------------------------------- */
.appview-likes .rate-btn.loading {
    opacity: 0.5;
    pointer-events: none; /* Desativa cliques enquanto carrega */
}

.appview-likes .rate-btn.voted {
    opacity: 0.7;
    pointer-events: none; /* Desativa cliques após votar */
}

/* 30. Estilos para Votação de Comentários
-------------------------------------------------------------------------- */
.com-cloud-foot .com-likes {
    margin-left: auto; /* Empurra para a direita */
    display: flex;
    align-items: center;
}

.com-cloud-foot .com-likes a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    font-size: var(--fs-2);
    opacity: 0.7;
    transition: opacity .2s ease;
}

.com-cloud-foot .com-likes a:hover {
    opacity: 1;
}

.com-cloud-foot .com-likes a.loading,
.com-cloud-foot .com-likes a.voted {
    opacity: 0.5;
    pointer-events: none;
}

/* 31. Estilos para a Página de Resultados de Pesquisa
-------------------------------------------------------------------------- */

.search-box {
    margin-bottom: var(--group-gap);
}
.search-form {
    display: flex;
    position: relative;
}
.search-field {
    width: 100%;
    height: 48px;
    padding: 0 56px 0 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--btn-rd);
    background-color: transparent;
}
.search-submit.btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 48px;
    width: 48px;
}
.search-box-info {
    margin-top: 12px;
    font-size: var(--fs-2);
    opacity: 0.7;
}

/* Resultados da Pesquisa */
.search-results-list .search-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}
.search-results-list .search-item + .search-item {
    border-top: 1px solid var(--c-border);
}
.search-item-img {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}
.search-item-img .cover,
.search-item-img .cover img {
    width: 100%;
    height: 100%;
    border-radius: 22%;
    object-fit: cover;
}
.search-item .cont {
    flex-grow: 1;
}
.search-item .title {
    font-size: var(--fs);
    font-weight: var(--fw-bold);
    margin-bottom: 4px;
    display: block;
}
.search-item .search-item-cat {
    font-size: var(--fs-3);
    opacity: 0.7;
}
.search-item .fa-chevron-right {
    opacity: 0.5;
    margin-left: auto;
}

/* Estilo para a paginação */
.navigation.pagination {
    margin-top: var(--group-gap);
}

/* 32. Estilos para o Live Search (Busca AJAX)
-------------------------------------------------------------------------- */
#search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: hsl(var(--c-body));
    border-radius: var(--modal-rd);
    box-shadow: var(--modal-sw);
    margin-top: 8px;
    padding: 12px;
    overflow: hidden;
    display: none;
}
.fastsearch-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    transition: background-color .2s ease;
}
.fastsearch-item:hover {
    background-color: hsla(var(--c-text), 0.05);
}
.fastsearch-item + .fastsearch-item {
    border-top: 1px solid var(--c-border);
}
.fastsearch-item .cover {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
    background-color: hsla(var(--c-text), 0.1);
}
.fastsearch-item .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fastsearch-item .fastsearch-title {
    padding-left: 12px;
    font-size: var(--fs-2);
}
.fastsearch-item.loading,
.fastsearch-item.nothing {
    justify-content: center;
    opacity: 0.7;
}

/* Responsividade para o posicionamento da caixa */
@media (max-width: 991px) {
    .header-second.scrolled #search-suggestions {
        position: fixed;
        top: var(--headersec-h);
        left: var(--wrp-p);
        right: var(--wrp-p);
    }
}

/* 33. Estilos para a Página de Download (VERSÃO FINAL)
-------------------------------------------------------------------------- */
.page-cdn {
    text-align: center;
    padding: 40px 0;
}
.page-cdn .appicon {
    width: 144px;
    height: 144px;
    margin: 0 auto 24px;
}
.page-cdn .appicon img {
    border-radius: 22%;
}
.page-cdn .title {
    font-size: var(--fs-title-file);
    margin-bottom: 12px;
}
.cdn-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    font-size: var(--fs-2);
    opacity: 0.7;
}
#page-cdn-btns {
    justify-content: center;
    flex-direction: column;
    max-width: 320px;
    margin: 0 auto;
}

/* Estilos para a lista de FAQ na página de download */
.page-cdn .faq-list {
    max-width: 600px;
    margin: var(--group-gap) auto 0;
}
.page-cdn .link-faq {
    display: flex;
    align-items: center;
    padding: 16px;
    transition: background-color .2s ease;
    border-radius: var(--btn-rd);
}
.page-cdn .link-faq:hover {
    background-color: hsla(var(--c-text), 0.05);
}
.page-cdn .link-faq span {
    flex-grow: 1;
    text-align: left;
}
.page-cdn .link-faq .fa-chevron-right {
    opacity: 0.5;
}

/* Estilo para agrupar os botões de download principais */
.main-download-buttons {
    display: grid; /* Mantém empilhado no mobile por padrão */
    gap: 8px;
    width: 100%;
}

/* Em telas maiores, os botões ficam lado a lado */
@media (min-width: 576px) {
    #page-cdn-btns {
        /* Garante que o container principal tenha a largura correta para o alinhamento */
        max-width: 500px; 
    }
    .main-download-buttons {
        display: flex; /* MUDANÇA PRINCIPAL: Usamos Flexbox para controle de largura */
        gap: 8px;
    }
    /* Faz ambos os botões terem a mesma largura, dividindo o espaço igualmente */
    .main-download-buttons .btn {
        flex: 1; 
    }
}

/* 34. Estilos para a Página Padrão (page.php)
-------------------------------------------------------------------------- */
.sys-page-static .wrp {
    max-width: 800px; /* Limita a largura do conteúdo para facilitar a leitura */
}

/* Garante o espaçamento correto abaixo do título */
.sys-page-static .category-head {
    margin-bottom: var(--group-gap);
}

.sys-page-static .desc.text {
    line-height: 1.7; /* Aumenta um pouco o espaçamento entre linhas para textos longos */
}

/* 35. Estilos para a Página de Pedidos
-------------------------------------------------------------------------- */
.sys-page-orders .wrp {
    max-width: 800px;
}
.sys-page-orders .desc {
    margin-bottom: var(--group-gap);
}
.order-form .form-submit {
    margin-top: 16px;
}

/* 36. ESTILOS DO DROPDOWN DO MENU (VERSÃO FINAL)
-------------------------------------------------------------------------- */
/* Em DESKTOP, o dropdown fica escondido por padrão e só aparece com a classe .open */
@media (min-width: 992px) {
    .dropdown .dropdown-box {
        display: none;
    }
    .dropdown.open .dropdown-box {
        display: block;
    }
}

/* Em MOBILE, garantimos que o dropdown NUNCA apareça, pois usamos o off-canvas */
@media (max-width: 991px) {
    .dropdown .dropdown-box {
        display: none !important;
    }
}

/*
 * Estilo para seções dentro da aba de Informações
 * ----------------------------------------------- */

.download-box-info {
    padding: 15px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--clr-text-secondary);
}

.info-section {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Modo escuro */
.darkmod .info-section {
    border-color: rgba(255, 255, 255, 0.1);
}

/*
 * CORREÇÃO FINAL: Estilo para as etiquetas "New" e "Update"
 * ----------------------------------------------- */

/* 1. Define a cor do texto para a etiqueta "New". */
.card-status.card-status-new {
    color: hsl(var(--c-blue)); /* Usa a variável de cor azul do seu tema */
}

/* 2. Garante que o ponto separador herde a cor correta da etiqueta.
   Esta regra modifica o ponto já existente no seu tema base. */
.meta-vers .meta-item + .card-status::before {
    /* A mágica está aqui: 'currentColor' faz o ponto ter a mesma cor do texto da etiqueta */
    background-color: currentColor;
}

/*
 * Correção para o botão "Scroll to Top" no rodapé
 * ----------------------------------------------- */

.scroll-up {
    /* Usa Flexbox para um alinhamento perfeito */
    display: flex;
    align-items: center;    /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    
    /* Remove padding e line-height que podem interferir no alinhamento flex */
    padding: 0;
    line-height: 1; 
}

/*
 * ========================================================================
 *  ESTILO FINAL E DEFINITIVO PARA O PAINEL DE POPULARIDADE
 * ========================================================================
 */

/* 1. Layout do Cabeçalho: Título em cima, porcentagem e ícone embaixo */
.rstatus-head .title {
    margin-bottom: 12px;
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.rstatus-head .rstatus-num {
    display: flex;
    justify-content: space-between; /* Empurra a % para a esquerda e o ícone para a direita */
    align-items: center;            /* Alinha verticalmente */
    margin: 0;
}

/* 2. Estilos visuais para o Ícone e o Círculo */
.rstatus-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rstatus-icon .fa-thumbs-up {
    font-size: 32px;
    position: relative;
    z-index: 1;
}

.rstatus-icon .mask {
    --mask-size: 100%;
    --mask-bg: hsla(var(--c-primary), 0.15);
    --mask-img: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23000' stroke-width='4' stroke-dasharray='5 5'/%3E%3C/svg%3E");
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: background-color .2s ease;
}

/* 3. Lógica para o estado negativo (popularidade < 50%) */
.rstatus-num.negative .fa-thumbs-up {
    transform: rotate(180deg);
}
.rstatus-num.negative .rstatus-icon .mask {
    --mask-bg: hsla(var(--c-red), 0.15);
}

/* 4. A BARRA DE POPULARIDADE (RE-ADICIONADA) */
.rstatus-line {
    --rating-line-svg: url("data:image/svg+xml,%3Csvg width='100' height='28' viewBox='0 0 100 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 27V12M5 27V1M9 27V15M13 27V12M17 27V18M21 27V15M25 27V5M29 27V12M33 27V18M37 27V8M41 27V15M45 27V1M49 27V12M53 27V18M57 27V1M61 27V5M65 27V12M69 27V1M73 27V15M77 27V1M81 27V8M85 27V15M89 27V5M93 27V12M97 27V18M99 27V1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --rating-pos: calc((100% - 28px) * (var(--rating-value) / 100));
    
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 12px; /* Espaço entre a linha da porcentagem e a barra */
    
    background-image: linear-gradient(90deg, hsl(var(--c-red)) 0%, hsl(var(--c-yellow)) 50%, hsl(var(--c-primary)) 100%);
    
    -webkit-mask-image: var(--rating-line-svg);
    mask-image: var(--rating-line-svg);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-position: var(--rating-pos) 0;
    mask-position: var(--rating-pos) 0;
}

/* 5. Ajustes de responsividade para telas maiores */
@media (min-width: 992px) {
    .rstatus-icon {
        width: 92px;
        height: 92px;
    }
    .rstatus-icon .fa-thumbs-up {
        font-size: 46px;
    }
}
/* Estilo para o botão de bookmark ativo */
.bookmark-btn.bookmarked i,
.bookmark-btn.bookmarked .av-tool-cont {
    color: hsl(var(--c-primary)); /* Cor verde do tema */
    opacity: 1;
}
.bookmark-btn.loading {
    opacity: 0.5;
    pointer-events: none;
}

/*
 * =============================================================
 *  CONTROLE DE VISIBILIDADE DO HEADER NO DESKTOP (RESTAURAR)
 * =============================================================
 */
@media (min-width: 992px) {
    .header-second:not(.scrolled) {
        background-color: transparent !important;
    }
    .header-second.scrolled .hmenu {
        opacity: 1;
        pointer-events: all;
    }
    .header-second.scrolled .header-tools {
        margin: 0;
        max-width: 100%;
    }
}

/*
 * ========================================================================
 *  38. ESTILO PADRÃO PARA BARRA DE BUSCA (MODO CLARO)
 * ========================================================================
 *
 * Estas regras garantem que a barra de busca seja sempre visível no
 * tema claro padrão, criando um contraste adequado.
 * Elas serão sobrescritas automaticamente pela sua lógica de cores 
 * personalizadas quando uma cor de fundo para o header for definida.
 */

/* 1. Define um fundo cinza claro e uma borda mais visível para o campo de texto. */
.qs-input {
    background-color: hsla(var(--c-text), 0.05) !important; /* Fundo cinza claro */
    box-shadow: inset 0 0 0 1.5px hsla(var(--c-text), 0.1) !important; /* Borda cinza */
    color: hsl(var(--c-text)) !important; /* Cor do texto digitado (preto/cinza escuro) */
}

/* 2. Garante que o texto do placeholder seja escuro e legível. */
.qs-input::placeholder {
    color: hsl(var(--c-text)) !important;
    opacity: 0.6;
}

/* 3. Garante que os ícones de lupa e seta sejam escuros e visíveis. */
.qs-control .qs-btn .fa-solid,
.qs-control .qs-toggle .fa-solid {
    color: hsl(var(--c-text)) !important;
    opacity: 0.7;
}

/*
 * ========================================================================
 *  39. ESTILO FIXO PARA BARRA DE BUSCA (MODO CLARO) - ABORDAGEM DIRETA
 * ========================================================================
 *  Esta regra força um estilo visível para a barra de busca no modo
 *  claro padrão, independentemente das variáveis do tema.
 */

/* Aplica-se apenas quando o tema NÃO está no modo escuro */
body:not(.darkmod) .qs-input {
    background-color: #f1f3f4 !important; /* Um cinza muito claro e neutro */
    box-shadow: none !important;
    border: 1px solid transparent !important;
    color: #202124 !important; /* Cor de texto bem escura para contraste máximo */
}

/* Adiciona um efeito sutil quando o campo de busca está focado */
body:not(.darkmod) .qs-input:focus {
    background-color: #ffffff !important;
    border-color: #dfe1e5 !important;
    box-shadow: 0 1px 6px rgba(32,33,36,.28) !important;
}

/* Garante que o texto do placeholder seja visível */
body:not(.darkmod) .qs-input::placeholder {
    color: #5f6368 !important; /* Cinza médio, padrão do Google */
    opacity: 1; /* Garante que a opacidade não o deixe invisível */
}

/* Garante que os ÍCONES de lupa e seta sejam visíveis */
body:not(.darkmod) .qs-control .qs-btn .fa-solid,
body:not(.darkmod) .qs-control .qs-toggle .fa-solid {
    color: #5f6368 !important; /* Cinza médio, para combinar com o placeholder */
}

/* =============================================================
 *  ESTILO CORRETO E COMPLETO PARA O PAINEL DE POPULARIDADE
 * =============================================================
 */

/* 1. Layout do Cabeçalho: Título em cima, porcentagem e ícone embaixo */
.rstatus-head .title {
    margin-bottom: 12px;
    font-weight: var(--fw-bold);
    line-height: 1.3;
}
.rstatus-head .rstatus-num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

/* 2. Estilos visuais para a Porcentagem, Ícone e Círculo */
.rstatus-value {
    font-size: 64px;
    letter-spacing: -0.05em;
    line-height: 1;
}
.rstatus-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}
.rstatus-icon .fa-thumbs-up {
    font-size: 32px;
    position: relative;
    z-index: 1;
}
.rstatus-icon .mask {
    --mask-size: 100%;
    /* A cor do círculo é definida pela variável --mask-bg */
    --mask-img: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23000' stroke-width='4' stroke-dasharray='5 5'/%3E%3C/svg%3E");
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: background-color .2s ease;
}

/* 3. Lógica para o estado negativo (popularidade < 50%) */
.rstatus-num.negative {
    color: hsl(var(--c-red)); /* Cor vermelha para a porcentagem */
}
.rstatus-num.negative .fa-thumbs-up {
    transform: rotate(180deg); /* Vira o ícone para baixo */
    color: hsl(var(--c-red));  /* Cor vermelha para o ícone */
}
.rstatus-num.negative .rstatus-icon .mask {
    --mask-bg: hsla(var(--c-red), 0.15); /* Fundo do círculo vermelho claro */
}

/* 4. A Barra de Popularidade (equalizador) */
.rstatus-line {
    --rating-line-svg: url("data:image/svg+xml,%3Csvg width='100' height='28' viewBox='0 0 100 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 27V12M5 27V1M9 27V15M13 27V12M17 27V18M21 27V15M25 27V5M29 27V12M33 27V18M37 27V8M41 27V15M45 27V1M49 27V12M53 27V18M57 27V1M61 27V5M65 27V12M69 27V1M73 27V15M77 27V1M81 27V8M85 27V15M89 27V5M93 27V12M97 27V18M99 27V1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --rating-pos: calc((100% - 28px) * (var(--rating-value) / 100));
    
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 12px;
    
    /* Esta regra é fixa e não deve ser alterada pela cor principal */
    background-image: linear-gradient(90deg, hsl(3, 88%, 60%) 0%, hsl(45, 99%, 64%) 50%, hsl(157, 76%, 38%) 100%) !important;
    
    -webkit-mask-image: var(--rating-line-svg);
    mask-image: var(--rating-line-svg);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-position: var(--rating-pos) 0;
    mask-position: var(--rating-pos) 0;
}

/* 5. Ajustes de responsividade para telas maiores */
@media (min-width: 992px) {
    .rstatus-value {
        font-size: 92px;
    }
    .rstatus-icon {
        width: 92px;
        height: 92px;
    }
    .rstatus-icon .fa-thumbs-up {
        font-size: 46px;
    }
}

/*
 * ========================================================================
 *  40. CORREÇÃO DEFINITIVA: FORÇAR DROPDOWN DE COMPARTILHAMENTO NO MOBILE
 * ========================================================================
 *
 * O tema base adiciona a classe '.native' no mobile, o que esconde o
 * '.dropdown-box' com 'display: none !important'.
 * Esta regra é mais específica e força o dropdown a aparecer quando o
 * botão é clicado (ganhando a classe '.open' do JavaScript).
 */

.sharefunc.native.open > .dropdown-box {
    display: block !important;
}

/*
 * ========================================================================
 *  41. CORREÇÃO FINAL E DEFINITIVA: DROPDOWN DE COMPARTILHAMENTO MOBILE
 * ========================================================================
 *
 * O tema base esconde este dropdown no mobile. Esta regra super-específica
 * não apenas força sua exibição, mas também o reposiciona para aparecer
 * ACIMA do botão de "Share", o que é melhor para a usabilidade mobile.
 */
@media (max-width: 991px) {
    /* Este seletor é genérico e funciona em qualquer lugar do site */
    .sharefunc.open > .dropdown-box {
        /* Força a exibição do elemento */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Reposiciona o dropdown para aparecer ACIMA do botão */
        top: auto !important;
        bottom: 100% !important; /* Posiciona no topo do botão pai */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Centraliza horizontalmente */
        margin-bottom: 10px; /* Adiciona um pequeno espaço */
    }
}

/*
 * ========================================================================
 *  42. ESTILOS PARA A PÁGINA DE ÚLTIMOS COMENTÁRIOS
 * ========================================================================
 */

.lastcomments-list .com-item {
    margin-bottom: var(--com-gap);
}

.lastcomments-list .com-cloud .com-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    margin-top: 8px;
    background-color: hsla(var(--c-text), 0.05);
    border-radius: var(--btn-rd);
    font-size: var(--fs-2);
    transition: background-color .2s ease;
}

.lastcomments-list .com-cloud .com-title:hover {
    background-color: hsla(var(--c-text), 0.08);
}

.lastcomments-list .com-cloud .com-title .fa-arrow-right {
    opacity: 0.5;
}

/*
 * ========================================================================
 *  43. ESTILOS PARA SISTEMA DE MENSAGENS PRIVADAS (ESTILO 5PLAY)
 * ========================================================================
 */

.pm-box {
    background-color: hsl(var(--c-body));
    border-radius: var(--block-rd);
    box-shadow: var(--block-sw);
    margin-bottom: var(--group-gap);
    overflow: hidden;
}
.darkmod .pm-box {
    background-color: hsl(var(--block-bg));
}

.pm-status {
    padding: 12px 20px;
    font-size: var(--fs-3);
    border-bottom: 1px solid var(--c-border);
}
.pm_progress_bar {
    width: 100%;
    height: 4px;
    background-color: hsla(var(--c-text), 0.1);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.pm_progress_bar span {
    display: block;
    height: 100%;
    background-color: hsl(var(--c-yellow));
    border-radius: 2px;
}

.pm-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pm-menu li {
    flex: 1;
    text-align: center;
}
.pm-menu li + li {
    border-left: 1px solid var(--c-border);
}
.pm-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    font-weight: var(--fw-bold);
    transition: background-color .2s ease;
    font-size: var(--fs-2);
}
.pm-menu a i {
    font-size: 24px;
    opacity: 0.7;
}
.pm-menu a:hover {
    background-color: hsla(var(--c-text), 0.05);
}

.new-pm-form {
    margin-top: var(--group-gap);
}

.pmlist-table {
    width: 100%;
    border-collapse: collapse;
}
.pmlist-table th, .pmlist-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
}
.pmlist-table th {
    font-weight: var(--fw-bold);
    opacity: 0.7;
    font-size: var(--fs-3);
}
.pmlist-table .unread td a {
    font-weight: var(--fw-bold);
}
.pmlist-table a {
    text-decoration: none;
}
.delete-pm-link {
    color: hsl(var(--c-red));
    font-size: var(--fs-3);
}

.pm-no-messages {
    display: block;
    text-align: center;
    padding: 40px;
    background-color: hsla(var(--c-text), 0.05);
    border-radius: var(--block-rd);
}

.pm-view-message {
    margin-top: var(--group-gap);
    padding: 24px;
    background-color: hsla(var(--c-text), 0.05);
    border-radius: var(--block-rd);
}
.pm-view-message h3 { margin-top: 0; }
.pm-view-meta {
    font-size: var(--fs-3);
    opacity: 0.7;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

/* Estilos para a visualização de uma única conversa */
.p-msg-list .com-item {
    margin-bottom: var(--com-gap);
}

/*
 * ========================================================================
 *  44. ESTILOS PARA RESPOSTA E AÇÕES DE PM
 * ========================================================================
 */

/* Estiliza a visualização da conversa */
.p-msg-list {
    margin-bottom: var(--group-gap);
}
.p-msg-item .com-head {
    margin-bottom: 8px; /* Reduz a margem na visualização da mensagem */
}

/* Estiliza o formulário de resposta */
.p-msg-replyform .form-submit {
    margin-top: 16px;
}

/* Estiliza o dropdown de ações da mensagem */
.p-msg-item .com-drop .dropdown-btn {
    padding: 8px;
    margin: -8px;
}
.p-msg-item .com-drop .dropdown-box {
    right: 0;
    left: auto;
}
.p-msg-item .com-drop-menu a {
    display: block;
    padding: 8px 16px;
    font-size: var(--fs-2);
    white-space: nowrap;
}
.p-msg-item .com-drop-menu a:hover {
    background-color: hsla(var(--c-text), .05);
}

/*
 * ========================================================================
 *  45. ESTILOS PARA SISTEMA DE MENSAGENS TIPO CHAT
 * ========================================================================
 */

/* Lista de Conversas */
.pm-conversation-list {
    display: flex;
    flex-direction: column;
}
.convo-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--c-border);
    transition: background-color .2s ease;
}
.convo-item:hover {
    background-color: hsla(var(--c-text), 0.03);
}
.convo-item.unread .convo-user-name,
.convo-item.unread .convo-excerpt {
    font-weight: var(--fw-bold);
}
.convo-item .com-avatar {
    flex-shrink: 0;
}
.convo-info {
    flex-grow: 1;
    min-width: 0;
}
.convo-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.convo-user-name {
    font-weight: var(--fw-bold);
    font-size: var(--fs-1);
}
.convo-time {
    font-size: var(--fs-3);
    opacity: 0.6;
}
.convo-excerpt {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
}
.convo-excerpt p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.unread-badge {
    background-color: hsl(var(--c-primary));
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Visualização do Chat */
.pm-chat-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background-color: hsla(var(--c-text), 0.05);
    border-radius: var(--block-rd);
}
.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    max-width: 80%;
}
.chat-message .com-avatar {
    flex-shrink: 0;
}
.chat-bubble {
    background-color: hsl(var(--c-body));
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.darkmod .chat-bubble {
    background-color: hsl(var(--block-bg));
}
.chat-content p:last-child {
    margin-bottom: 0;
}
.chat-meta {
    font-size: var(--fs-4);
    opacity: 0.6;
    margin-top: 8px;
}

/* Mensagens Enviadas */
.message-sent {
align-self: flex-end;
flex-direction: row-reverse;
}
.message-sent .chat-bubble {
background-color: var(--btn-fill-bg);
color: var(--btn-fill-text);
border-bottom-right-radius: 4px;
}
.message-sent .chat-meta {
    text-align: right;
    color: hsla(0,0%,100%,0.7);
}

/* Mensagens Recebidas */
.message-received {
    align-self: flex-start;
}
.message-received .chat-bubble {
    border-bottom-left-radius: 4px;
}
.message-received .chat-meta {
    text-align: left;
}

/*
 * ========================================================================
 *  46. CORREÇÃO FINAL: FORÇAR COR VERDE NA ETIQUETA "UPDATE"
 * ========================================================================
 *
 * Garante que a etiqueta de status "Update" seja sempre verde, 
 * independentemente da "Cor Principal" definida nas opções do tema.
 * O !important é usado para garantir prioridade sobre a regra do base-5play.css.
 */

.card-status-up {
    color: hsl(157, 76%, 38%) !important; /* Verde sólido e consistente */
}

.card-status-up::before {
    background-color: hsl(157, 76%, 38%) !important; /* Cor do ponto separador */
}

/*
 * ========================================================================
 *  47. CORREÇÃO: TEXTO DO LIVE SEARCH NO MODO CLARO
 * ========================================================================
 */
body:not(.darkmod) #search-suggestions .fastsearch-item {
    color: #5f6368 !important; /* COR AJUSTADA CONFORME SOLICITADO */
}
body:not(.darkmod) #search-suggestions .fastsearch-item:hover .fastsearch-title span {
    color: var(--c-primary) !important;
}

/*
 * ========================================================================
 *  51. AJUSTE FINO: COR DO TEXTO NO CAMPO DE BUSCA (MODO ESCURO)
 * ========================================================================
 */

/* Aplica-se apenas ao campo de input quando o tema está no modo escuro */
body.darkmod .qs-input {
    color: #5f6368 !important; /* Cor do texto que o usuário digita */
}

/* Aplica-se ao placeholder do campo de input no modo escuro */
body.darkmod .qs-input::placeholder {
    color: #5f6368 !important; /* Mesma cor para o placeholder */
    opacity: 0.8; /* Leve opacidade para diferenciar do texto digitado */
}

/*
 * ========================================================================
 *  52. ESTILOS PARA A PÁGINA DE VERSÕES ANTIGAS
 * ========================================================================
 */

.versions-list .version-item {
    border: 1px solid var(--c-border);
    border-radius: var(--btn-rd);
    margin-bottom: 16px;
    transition: background-color .2s ease, transform .2s ease;
}

.versions-list .version-item:hover {
    background-color: hsla(var(--c-text), 0.03);
    transform: translateY(-2px);
}

.version-item-link {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 16px;
}

.version-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 22%;
    overflow: hidden;
}

.version-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.version-details {
    flex-grow: 1;
}

.version-title {
    font-size: var(--fs);
    font-weight: var(--fw-bold);
    margin: 0 0 4px 0;
}

.version-meta {
    font-size: var(--fs-2);
    opacity: 0.7;
}

.version-download-btn {
    margin-left: auto;
    flex-shrink: 0;
}

/*
 * ========================================================================
 *  53. ESTILOS PARA O AVISO DE NOVA VERSÃO
 * ========================================================================
 */

.version-notice {
    margin: 24px 0;
}
.version-notice a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: hsla(var(--c-primary), 0.1);
    color: hsl(var(--c-primary));
    border-radius: var(--btn-rd);
    font-weight: var(--fw-bold);
    transition: background-color .2s ease;
}
.version-notice a:hover {
    background-color: hsla(var(--c-primary), 0.15);
}
.version-notice a .fa-solid {
    font-size: 24px;
}

/*
 * ========================================================================
 *  54. ESTILOS PARA O AVISO DE VERSÃO ANTIGA NO SINGLE
 * ========================================================================
 */

.version-notice.old-version-warning {
    margin-top: 24px; /* Adiciona espaço acima do aviso */
}

.version-notice.old-version-warning a {
    background-color: hsla(50, 100%, 50%, 0.15); /* Fundo amarelo de aviso */
    color: hsl(45, 99%, 40%); /* Texto laranja/amarelo escuro */
}
.darkmod .version-notice.old-version-warning a {
    background-color: hsla(50, 100%, 50%, 0.2);
    color: hsl(50, 100%, 70%);
}
.version-notice.old-version-warning a:hover {
    background-color: hsla(50, 100%, 50%, 0.25);
}
.version-notice.old-version-warning a .fa-solid {
    font-size: 24px;
}

/*
 * ========================================================================
 *  55. ESTILOS PARA BOTÕES DE AÇÃO PRINCIPAIS
 * ========================================================================
 */

/* Garante que os botões fiquem lado a lado */
.main-action-buttons {
    display: flex;
    gap: 8px; /* Espaçamento entre os botões */
    width: 100%;
}
.main-action-buttons .btn {
    flex: 1; /* Faz os botões dividirem o espaço igualmente */
}

/* Estilo para o botão vermelho de "Última Versão" */
.btn.btn-red {
    --btn-c-bg: hsl(var(--c-red)); /* Usa a variável de cor vermelha do tema */
}
.btn.btn-red:hover {
    --btn-c-bg: hsl(var(--c-red), 55%); /* Um pouco mais claro no hover */
}
.btn.btn-red:active {
    --btn-c-bg: hsl(var(--c-red));
}

/*
 * ========================================================================
 *  56. ESTILOS PARA WIDGET DE ANÚNCIOS RESPONSIVOS
 * ========================================================================
 */

/* Por padrão (mobile-first), esconde o anúncio de desktop e mostra o de mobile */
.responsive-ad-container .responsive-ad-desktop {
    display: none;
}
.responsive-ad-container .responsive-ad-mobile {
    display: block;
}

/* Em telas maiores (a partir de 768px), inverte a visibilidade */
@media (min-width: 768px) {
    .responsive-ad-container .responsive-ad-desktop {
        display: block;
    }
    .responsive-ad-container .responsive-ad-mobile {
        display: none;
    }
}

/* Garante que a área do widget tenha um espaçamento consistente */
.single-widget-area {
    margin: var(--group-gap) 0;
    text-align: center;
}

/*
 * ========================================================================
 *  58. ESTILOS PARA O CONTADOR DE DOWNLOAD
 * ========================================================================
 */

.download-timer-container {
    margin: 24px auto;
    padding: 20px;
    max-width: 480px;
    border: 1px solid var(--c-border);
    border-radius: var(--block-rd);
    background-color: hsla(var(--c-text), 0.02);
}
.darkmod .download-timer-container {
    background-color: hsla(var(--c-text), 0.08);
}

.download-timer-container p {
    margin: 0 0 15px 0;
    font-weight: var(--fw-bold);
    opacity: 0.8;
}

/* Estilo Numérico */
.timer-numeric {
    font-size: 48px;
    font-weight: var(--fw-bold);
    color: hsl(var(--c-primary));
}

/* Estilo Barra de Progresso */
.progress-bar-outer {
    width: 100%;
    height: 20px;
    background-color: hsla(var(--c-text), 0.1);
    border-radius: 10px;
    overflow: hidden;
}
.progress-bar-inner {
    width: 0%; /* Começa em 0% e o JS aumenta */
    height: 100%;
    background-color: hsl(var(--c-primary));
    border-radius: 10px;
    transition: width 0.5s linear; /* Animação suave */
}

/* Controle de visibilidade dos tipos de contador */
.timer-style-numeric .timer-progress-bar { display: none; }
.timer-style-bar .timer-numeric { display: none; }

/*
 * ========================================================================
 *  59. CONTROLE DE VISIBILIDADE DO CONTADOR (COMPATÍVEL COM CACHE)
 * ========================================================================
 */

/* Regra para quando o JS está DESATIVADO ou ATRASADO */
.no-js #download-timer {
    display: none; /* Esconde o contador */
}
.no-js #page-cdn-btns {
    display: flex !important; /* Mostra os botões como fallback */
}

/* Regra para quando o JS está ATIVO (a classe .js é adicionada pelo script inline) */
.js #download-timer {
    display: block; /* Mostra o contador */
}
.js #page-cdn-btns {
    display: none; /* Esconde os botões para esperar o contador */
}

/*
 * ========================================================================
 *  60. ESTILOS PARA O METABOX DO EDITOR DE POST
 * ========================================================================
 */

#refresh-post-status .spinner {
    margin-top: -3px !important;
}

/*
 * ========================================================================
 *  61. CONTROLE DE VISIBILIDADE DO BOTÃO DE DARK MODE (VERSÃO FINAL)
 * ========================================================================
 */

/* Por padrão, o botão está visível no HTML, mas o escondemos aqui. */
.mod-btn {
    display: none !important;
}

/* O PHP adiciona a classe .dm-toggle-visible ao body quando o modo é 'auto' ou 'manual'.
   Esta regra torna o botão visível nesses casos. */
body.dm-toggle-visible .mod-btn {
    display: flex !important;
}