/* public/css/dropdownlist.css */

/* ==================================================== */
/* ESTILOS GERAIS PARA DROPDOWNS (MENU RETICÊNCIAS) */
/* ==================================================== */

/* Dropdown principal (fundo amarelo) */
.dropdown-menu.dropdown-menu-dark {
    background-color: #ffeb3b !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.25rem;
    pointer-events: auto;
    /* Deixe overflow visível aqui para evitar cortes no conteúdo do dropdown */
    overflow: visible !important;
}

.dropdown-menu-dark .dropdown-item {
    color: #0000FF !important;
    transition: background-color 0.2s;
    pointer-events: auto;
}

.dropdown-menu-dark .dropdown-item i {
    color: #0000FF !important;
}

.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #0000FF !important;
}

/* Ícone das reticências (dentro do card) */
.publicacao-buttons-container .btn-icon i.fa-ellipsis-v {
    color: #0000FF !important;
}

/* ==================================================== */
/* SUBMENU DE COMPARTILHAMENTO (.submenu-share) */
/* ====================================================
   Objetivo: garantir que o submenu sempre apareça acima do footer
   sem criar stacking contexts desnecessários que quebrem carrosséis.
*/

/* ==================================================== */
/* SUBMENU DE COMPARTILHAMENTO (.submenu-share) */
/* ==================================================== */

.submenu-share {
    position: absolute !important;
    top: 32px !important;      /* 🔥 Deixa o submenu logo abaixo das reticências */
    right: 0 !important;

    background-color: #00d17a;
    border: 1px solid black;
    padding: 5px 0;
    min-width: 160px;
    border-radius: 6px;

    z-index: 999999 !important;
    overflow: visible !important;

    display: none; /* aparece somente quando ativado */

    box-shadow: 0px 3px 7px rgba(0,0,0,0.4);

    pointer-events: auto !important;
}

/* Mostra quando o JS adiciona .show */
.submenu-share.show {
    display: block !important;
    overflow: visible !important;
}

/* Itens */
.submenu-share .dropdown-item {
    color: #000;
    background: transparent;
    padding: 6px 12px;
    font-size: .95em;
    cursor: pointer !important;
}

.submenu-share .dropdown-item:hover {
    background: #e5ff41;
}

/* Ícones coloridos */
.submenu-share [data-social="facebook"] i { color:#3b5998 }
.submenu-share [data-social="instagram"] i { color:#e4405f }
.submenu-share [data-social="whatsapp"] i { color:#25d366 }


/* ---------------------------------------------------- */
/* MODAL */
/* ---------------------------------------------------- */

#detalhesModal .modal-footer .btn-secondary {
    background-color: #0000FF;
    border-color: #0000FF;
    color: white;
}

#detalhesModal .modal-footer .btn-secondary:hover {
    background-color: #0000CC;
    border-color: #0000CC;
}

/* ---------------------------------------------------- */
/* GARANTIR QUE DROPDOWNS NÃO SEJAM CORTADOS */
/* ---------------------------------------------------- */

.dropdown-menu.show,
.submenu-share.show {
    overflow: visible !important;
}

/* ==================================================== */
/* LIBERA OVERFLOW APENAS NOS CARDS PEQUENOS (sem afetar carrosséis) */
/* ====================================================

   IMPORTANTE:
   - NÃO incluir .carousel-item-content aqui (isso quebrou o carrossel antes).
   - Liberamos overflow APENAS para os elementos dos cards pequenos,
     onde o submenu realmente precisa escapar do contêiner.
*/

.publicacao-peq,
.publicacao-peq .publicacao-card-wrapper{
    overflow: visible !important;
    z-index: auto !important;
}

/* ---------------------------------------------------- */
/* Ajustes finais de segurança (não mudam visual) */
/* ---------------------------------------------------- */

/* Evita que um footer com opacity/transform crie stacking context inesperado.
   Se você aplica transform/opacity ao footer em outro CSS, considere remover. */
.carrossel-footer-interacoes {
    /* Mantemos a propriedade visual (background, border-radius etc.) no seu CSS atual;
       aqui garantimos que o z-index seja baixo para permitir a sobreposição do submenu. */
    z-index: 10 !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    transform: none !important;
}

/* ============================================================= */
/*  PERMITIR QUE O SUBMENU ESCAPE DO CARROSSEL GRANDE           */
/*  (Mesma lógica que já funciona nas peqPublicacoes)            */
/* ============================================================= */

.carousel-item,
.carousel-item-content,
.carousel-inner,
.carousel {
    overflow: visible !important;
    z-index: auto !important; /* Não força stacking context */
}

/* No final do seu dropdownlist.css, substitua o bloco do btn-close-custom por este: */
#detalhesModal .btn-close-custom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #eee !important; /* Dá um fundo para não ficar pelado */
    color: #333 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    border: none !important;
}


/* Fim do arquivo */