/**
* Theme Name: BuddyxPro Child
* Description: This is a child theme of BuddyxPro, generated by Merlin WP.
* Author: <a href="https://wbcomdesigns.com">wbcomdesigns</a>
* Template: buddyx-pro
* Version: 3.8.8
*/

/* ==========================================================================
   FIX: Ícones bugados - Força recarregamento de fontes
   Problema: Font Awesome e Dashicons às vezes não carregam corretamente
   Solução: Garante que as fontes sejam carregadas com prioridade
   ========================================================================== */

/* Força Font Awesome a carregar corretamente */
.fa, .fas, .far, .fal, .fab {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    display: inline-block;
}

/* Força Dashicons a carregar corretamente */
.dashicons, .dashicons-before:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    display: inline-block;
}

/* Fix para ícones do menu lateral */
.left-sidebar .menu-item i,
.left-sidebar .menu-item .dashicons,
.left-sidebar .menu-item .fa {
    width: auto !important;
    height: auto !important;
    font-size: inherit !important;
}

/* Fix para ícones do header */
.site-header .menu-item i,
.site-header .menu-item .dashicons,
.site-header .menu-item .fa,
.buddypress-icons-wrapper i,
.buddypress-icons-wrapper .dashicons,
.buddypress-icons-wrapper .fa {
    width: auto !important;
    height: auto !important;
    font-size: inherit !important;
}

/* ==========================================================================
   Fim do fix de ícones
   ========================================================================== */

/* ==========================================================================
   Início da estilização do recent-visitors
   ========================================================================== */
   body div.recent-visitors {
    max-width: 1270px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding: 15px 20px !important;
}
/* ==========================================================================
   Fim da estilização do recent-visitors
   ========================================================================== */

/* ==========================================================================
   Início da estilização do item-avatar
   ========================================================================== */
body div.recent-visitors .item-avatar {
    display: inline-block !important;
    max-width: 100% !important;
    margin: 10px !important;
}

body div.recent-visitors .item-avatar img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
}
/* ==========================================================================
   Fim da estilização do item-avatar
   ========================================================================== */

/* ==========================================================================
   Início da estilização do h5 (título Recent Visitors)
   ========================================================================== */
body div.recent-visitors h5 {
    margin-bottom: 20px !important;
    padding: 0 !important;
    font-size: 18px !important;
}
/* ==========================================================================
   Fim da estilização do h5 (título Recent Visitors)
   ========================================================================== */

/* ==========================================================================
   Início da estilização para telas menores que 1270px (responsividade)
   ========================================================================== */
@media (max-width: 1270px) {
    body div.recent-visitors {
        max-width: 92% !important;
        padding: 15px 20px !important;
    }
}
/* ==========================================================================
   Fim da estilização para telas menores que 1270px (responsividade)
   ========================================================================== */

/* ==========================================================================
   Início da estilização para tablets (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {
    body div.recent-visitors {
        padding: 12px 15px !important;
    }

    body div.recent-visitors .item-avatar {
        margin: 5px !important;
    }

    body div.recent-visitors .item-avatar img {
        width: 60px !important;
        height: 60px !important;
    }

    body div.recent-visitors h5 {
        margin-bottom: 15px !important;
        font-size: 16px !important;
    }
}
/* ==========================================================================
   Fim da estilização para tablets (≤ 768px)
   ========================================================================== */

/* ==========================================================================
   Início da estilização para smartphones (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
    body div.recent-visitors {
        padding: 15px 20px !important;
    }

    body div.recent-visitors .item-avatar {
        margin: 3px !important;
    }

    body div.recent-visitors .item-avatar img {
        width: 50px !important;
        height: 50px !important;
    }

    body div.recent-visitors h5 {
        margin-top: 10px !important; /* Adiciona espaçamento superior */
        margin-bottom: 10px !important;
        font-size: 14px !important;
    }
}
/* ==========================================================================
   Fim da estilização para smartphones (≤ 480px)
   ========================================================================== */

/* ==========================================================================
   Início da estilização para telas grandes (> 1920px)
   ========================================================================== */
@media (min-width: 1920px) {
    body div.recent-visitors {
        max-width: 1270px !important;
        padding: 20px 25px !important;
    }

    body div.recent-visitors .item-avatar {
        margin: 15px !important;
    }

    body div.recent-visitors .item-avatar img {
        width: 100px !important;
        height: 100px !important;
    }

    body div.recent-visitors h5 {
        margin-bottom: 25px !important;
        font-size: 20px !important;
    }
}
/* ==========================================================================
   Fim da estilização para telas grandes (> 1920px)
   ========================================================================== */

 /* ==========================================================================
   Personalização do Chat Selecionado - Modo Escuro
   Descrição: Ajusta o fundo e os textos do chat selecionado no BuddyBoss para
   melhor visibilidade no modo escuro do BuddyX Pro.
   Referência: BuddyX Pro Dark Mode Documentation
   ========================================================================== */
.dark-mode #message-threads li.thread-item.current a.bp-message-link {
    background: var(--global-body-lightcolor, #222222) !important;
    border-left: 3px solid var(--color-theme-primary, #e94560) !important;
}

.dark-mode #message-threads li.thread-item.current a.bp-message-link .thread-content,
.dark-mode #message-threads li.thread-item.current a.bp-message-link .thread-to .user-name,
.dark-mode #message-threads li.thread-item.current a.bp-message-link .thread-subject .thread-excerpt,
.dark-mode #message-threads li.thread-item.current a.bp-message-link .thread-subject .thread-date time {
    color: var(--global-font-color, #bfc2c9) !important;
}

/* Ajuste para chats não selecionados, garantindo consistência */
.dark-mode #message-threads li.thread-item a.bp-message-link {
    background: var(--color-theme-white-box, #191919) !important;
    border-left: 3px solid transparent !important;
}

.dark-mode #message-threads li.thread-item a.bp-message-link .thread-content,
.dark-mode #message-threads li.thread-item a.bp-message-link .thread-to .user-name,
.dark-mode #message-threads li.thread-item a.bp-message-link .thread-subject .thread-excerpt,
.dark-mode #message-threads li.thread-item a.bp-message-link .thread-subject .thread-date time {
    color: var(--global-font-color, #bfc2c9) !important;
}
/* Fim da personalização do chat selecionado */

/* ==========================================================================
   Personalização da Dropzone - Modo Escuro
   Descrição: Ajusta a dropzone nos chats do BuddyBoss para o modo escuro do BuddyX Pro,
   alinhando com o modelo padrão (fundo escuro, bordas e textos claros).
   Referência: BuddyX Pro Dark Mode Documentation
   ========================================================================== */
   .dark-mode .bp-messages-content-wrapper .dropzone {
    background: var(--color-theme-white-box, #191919) !important;
    border: 1px solid var(--global-border-color, #202020) !important;
}

/* Ajusta o botão de upload dentro da dropzone */
.dark-mode .bp-messages-content-wrapper .dropzone .dz-default.dz-message .dz-button {
    background: var(--global-body-lightcolor, #222222) !important;
    color: var(--global-font-color, #bfc2c9) !important;
    border: 0 !important;
}

/* Ajusta as pré-visualizações de arquivos */
.dark-mode .bp-messages-content-wrapper .dropzone .dz-preview.dz-file-preview .dz-details {
    background: var(--global-body-lightcolor, #222222) !important;
    border: 1px solid var(--global-border-color, #202020) !important;
    color: var(--global-font-color, #bfc2c9) !important;
}

.dark-mode .bp-messages-content-wrapper .dropzone .dz-preview.dz-file-preview .dz-details .dz-filename {
    color: var(--global-font-color, #bfc2c9) !important;
}

/* Ajusta o ícone de upload */
.dark-mode .bp-messages-content-wrapper .dropzone .dz-default.dz-message::before {
    color: var(--global-font-color, #bfc2c9) !important;
}
/* Fim da personalização da dropzone */

/**
 * Estilização da página com widget único
 */
.page-template-page-single-widget .site-main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}
.page-template-page-single-widget .sidebar,
.page-template-page-single-widget .widget-area:not(.single-widget-area) {
    display: none;
}

/* ==========================================================================
   HMVIP Mobile Edge-to-Edge Layout
   Baseado em análise real do DOM em hotmodel.vip (17/02/2026)

   DOM verificado:
     #page.site > .container (padding: 0 15px)
       > .site-wrapper (margin: 32px 0)
         > main#primary > .entry-content > #buddypress
           > .screen-content > #activity-stream
             > ul.activity-list > li.activity-item (border-radius: 8px, border: 1px solid #252525)
               > .activity-content > .activity-inner (padding: 0 14px 14px)

   Breakpoint: 544px — usado pelo próprio BuddyX Pro para mobile
   ========================================================================== */
@media screen and (max-width: 544px) {

    /* 1. Container — remove padding lateral para edge-to-edge */
    #page .container {
        padding-left: 0;
        padding-right: 0;
    }



    /* 2. Site wrapper — reduz margin top excessiva */
    #page .site-wrapper {
        margin-top: 8px;
    }

    /* 2b. Fix for Root Profiles/Groups (no .container) 
       Estes layouts não têm .container, o wrapper precisa ser full width */
    body.bp-user #page .site-wrapper,
    body.groups #page .site-wrapper,
    body.directory #page .site-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2c. Force container full width on these pages too */
    body.bp-user #page .container,
    body.groups #page .container,
    body.directory #page .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. Activity items — manter full width mas respeitando design do tema (cards) */
    body.buddypress #buddypress .activity-list .activity-item {
        margin-bottom: 8px;
        /* create spacing between items but let theme handle borders/radius */
    }

    /* 4. Widget area / sidebar — ocultar em mobile para conteúdo full-width */
    body.buddypress .widget-area.left-sidebar {
        display: none;
    }

    /* 5. Main content — ocupar largura total sem sidebar */
    body.buddypress main#primary.site-main {
        width: 100%;
        max-width: 100%;
    }

    /* 6. Profile & Groups Headers — Full bleed cover image */
    body.buddypress #buddypress .item-header-cover-image-wrapper,
    body.buddypress #buddypress #item-header-cover-image .item-header-cover-image-wrapper {
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        /* Removed border-radius: 0 to respect theme design if applicable, 
           or keep it if cover image should be square. 
           Usually cover images are nice edge-to-edge square. 
           Let's keep it square for COVER IMAGE as it looks better full width. */
        border-radius: 0 !important; 
    }

    /* 7. Profile & Groups Body — Restore card look but keep full width container */
    body.buddypress #buddypress #item-body {
        /* Removed border: none, border-radius: 0 to restore card look */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important; /* Keep transparent to avoid double bg if wrapper has it */
        box-shadow: none !important; /* Avoid double shadow */
    }
    /* 8. Restore padding for Header & Footer containers (exclude from edge-to-edge) 
       NOTE: Needs high specificity to beat "body.bp-user #page .container" defined above. */
    body #page .site-header-wrapper .container,
    body #page .site-footer-wrapper .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important; 
    }

    /* 9. Restore rounded corners for Profile AND Group Headers (v1.1.11) */
    body.bp-user #page #item-header, 
    body.bp-user #page .item-header-cover-image-wrapper,
    body.groups #page #item-header, 
    body.groups #page .item-header-cover-image-wrapper {
        border-radius: 8px !important;
        overflow: hidden !important; 
    }
}

/* ==========================================================================
   Restore Desktop Footer Layout (> 992px)
   Fix for regression where footer hides behind side panel or is off-center.
   ========================================================================== */
@media screen and (min-width: 992px) {
    .site-footer-wrapper {
        margin-left: 0 !important;
        width: auto !important; 
        position: static !important;
        z-index: 10 !important; /* Ensure visibility context */
        /* If #page moves, footer moves with it. */
    }
    
    /* Ensure container respects max-width and centering */
    .site-footer-wrapper .container {
        width: 100% !important;
        max-width: 1200px !important; /* Restore standard width */
        margin: 0 auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

/* ==========================================================================
   HMVIP FIX: Dark Mode Toggle — Move do flutuante para o header
   Problema: BuddyX Pro usa position:fixed; top:50%; right:0; z-index:999999
   que faz o botão flutuar em cima do feed de posts.
   Solução: Neutraliza o posicionamento flutuante e alinha com os ícones do header.
   Referência: global.min.css .switch-mode (BuddyX Pro v4.9.2)
   ========================================================================== */

/* 1. Remove o posicionamento flutuante original do BuddyX Pro */
.switch-mode {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center;
}

/* 2. Estiliza o container no header */
.hmvip-header-dark-mode {
    display: flex;
    align-items: center;
    margin-left: 5px;
}

.hmvip-header-dark-mode .switch-mode {
    margin: 0 5px !important;
}

/* 3. Alinha o botão com a área de ícones do BuddyBoss */
.buddypress-icons-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 4. Garante que o botão sun/moon fique com tamanho correto no header */
.hmvip-header-dark-mode .switch-mode button.buddyx-switch-mode {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    opacity: 0.85;
    transition: all 0.2s ease;
}

.hmvip-header-dark-mode .switch-mode button.buddyx-switch-mode:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* 5. Mobile: garante visibilidade no menu hamburger também */
@media (max-width: 960px) {
    .hmvip-header-dark-mode {
        display: flex;
    }
}
}

/* ==========================================================================
   HMVIP FIX: Reduzir tamanho da logo no smartphone
   Descrição: A logo em dispositivos móveis fica muito grande, ocupando 
   espaço excessivo no header. Esta regra reduz o tamanho mantendo a proporção.
   
   NOTA: O BuddyX Pro injeta CSS inline via wp_head com width fixo.
   Por isso usamos seletores de alta especificidade e !important.
   
   Estrutura do tema:
     .site-branding > .site-logo-wrapper > a > img (custom-logo)
     .site-branding > .site-logo-wrapper > img (fallback)
   
   Breakpoint: 544px — usado pelo BuddyX Pro para mobile
   ========================================================================== */

/* 
   SMARTPHONES (≤544px) 
   Sobrescreve o CSS inline do tema com !important e alta especificidade
*/
@media screen and (max-width: 544px) {
    /* Força redução da logo - alta especificidade para vencer CSS inline */
    body #page .site-header .site-branding .site-logo-wrapper img,
    body #page .site-header .site-branding .site-logo-wrapper a img,
    body .site-header .site-logo-wrapper .custom-logo,
    body .site-header .site-logo-wrapper img.custom-logo,
    html body .site-logo-wrapper img,
    .site-logo-wrapper>a>img,
    .site-logo-wrapper>img {
        width: auto !important;
        max-width: 100px !important;
        height: auto !important;
        max-height: 35px !important;
        object-fit: contain !important;
    }
    
    /* Container da logo */
    body #page .site-header .site-branding .site-logo-wrapper,
    body .site-header .site-branding .site-logo-wrapper,
    .site-header .site-logo-wrapper {
        max-width: 100px !important;
        min-width: auto !important;
        flex: 0 0 auto !important;
    }
    
    /* Ajusta o branding container */
    body #page .site-header .site-branding,
    body .site-header .site-branding,
    .site-header .site-branding {
        min-width: auto !important;
        max-width: 100px !important;
        flex: 0 0 auto !important;
    }
}

/* 
   TABLETS (545px - 768px)
   Logo um pouco maior que mobile mas ainda reduzida
*/
@media screen and (min-width: 545px) and (max-width: 768px) {
    body #page .site-header .site-branding .site-logo-wrapper img,
    body #page .site-header .site-branding .site-logo-wrapper a img,
    body .site-header .site-logo-wrapper .custom-logo,
    body .site-header .site-logo-wrapper img.custom-logo,
    html body .site-logo-wrapper img {
        width: auto !important;
        max-width: 130px !important;
        height: auto !important;
        max-height: 45px !important;
        object-fit: contain !important;
    }
    
    body #page .site-header .site-branding .site-logo-wrapper,
    body .site-header .site-branding .site-logo-wrapper {
        max-width: 130px !important;
        min-width: auto !important;
    }
    
    body #page .site-header .site-branding,
    body .site-header .site-branding {
        min-width: auto !important;
        max-width: 130px !important;
    }
}

/* 
   Header mobile compacto - reduz altura geral do header
   Isso ajuda a logo a parecer proporcional
*/
@media screen and (max-width: 544px) {
    body #page .site-header,
    body .site-header {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    
    body #page .site-header .container,
    body .site-header .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}