* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Prompt', sans-serif;
    /* Atualizado para usar a fonte Prompt */
    line-height: 1.6;
    background: #f8f8f8;
}

.menu {
    background-color: #111627;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-menu{
    padding: 20px;
    color: white;
}

.logo {
    width: 120px;
    /* Ajuste conforme o tamanho do seu logo */
    height: auto;
}

.main-header {
    text-align: center;
    padding: 20px;
    background: #fff;
    /* ou qualquer cor de fundo desejada */
}

.grupos {
    background: #fff;
    padding: 20px;
}

.header-grupos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.btn-anuncio {
    padding: 20px;
    background-color: #e94560;
    /* Cor do botão */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-anuncio:hover{
    background-color: #b8273f;
}

.categorias h2 {
    margin-bottom: 20px;
    color: #111627;
}

.lista-grupos {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grupo {
    background: #f1f1f1;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    width: 100%;
    /* ou max-width para largura máxima */
}

.foto-grupo {
    width: 50px;
    /* Ajuste conforme necessário */
    height: 50px;
    border-radius: 50%;
    /* Isso fará a imagem ficar redonda */
    margin-right: 10px;
}

.info-grupo h3 {
    margin-bottom: 5px;
    color: #333;
}

.info-grupo p {
    color: #555;
}

/* Media queries para responsividade */
@media (max-width: 768px) {
    .header-grupos {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-anuncio {
        margin-top: 10px;
    }

    /* Ajustes adicionais para responsividade conforme necessário */
}

/* Restante do CSS acima permanece inalterado */

.grupos {
    max-width: 600px;
    margin: 0 auto;
    /* Isso centraliza a caixa "Grupos" */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* Adicione uma sombra leve se desejar */
}

/* Restante do CSS para estilização das abas e componentes do grupo */

/* Estilos para as abas */
.tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* Espaço entre os botões das abas */
    margin: 20px 0;
    /* Espaço acima e abaixo das abas */
}

.tablink {
    padding: 10px 20px;
    background-color: #f1f1f1;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tablink:hover,
.tablink.active {
    background-color: #e94560;
    color: white;
}

.tabcontent {
    display: none;
    /* Inicialmente oculto até que uma aba seja clicada */
}

/* Adicione media queries para responsividade se necessário */
@media (max-width: 900px) {
    .grupos {
        width: 90%;
        /* Reduz a largura em telas menores */
    }

    .header-grupos {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-anuncio {
        margin-top: 10px;
    }
}

/* Adicione estilos adicionais conforme necessário */


/* Estilos para o componente de grupo */
.grupo {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
}

.grupo:hover {
    cursor: pointer;
    transform: translateY(-3px);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}

.foto-grupo {
    width: 50px;
    /* Ajuste o tamanho conforme necessário */
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    /* Garante que a imagem cubra toda a área sem distorção */
}

.info-grupo {
    flex-grow: 1;
}

.info-grupo h3 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 5px;
}

.info-grupo p {
    font-size: 0.9rem;
    color: #666;
}

/* CSS DO POPUP */

.subgrupo{
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}

.subgrupo:hover{
    cursor: pointer;
    transform: translateY(-3px);
    transition: transform 0.2s ease-in-out;
}

.subgrupo{
    color: #333;
    text-decoration: none;
    margin: 0px 20px;
}

.popup .subgrupo,
.grupo {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.popup .subgrupo img,
.grupo img {
    width: 50px;
    /* Ajuste conforme necessário */
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.nome-subgrupo,
.info-grupo h3 {
    font-weight: bold;
    margin: 0;
}

.canal-subgrupo,
.info-grupo p {
    font-size: 0.9rem;
    color: #555;
    margin: 5px 0 0;
}

.popup-overlay {
    display: none; /* Inicialmente oculto */
    position: fixed; /* Posicionamento fixo na página */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Preto semi-transparente */
    z-index: 1000; /* Deve estar atrás do popup (assumindo que o popup tenha um z-index maior, como 1001) */
}


.popup {
    overflow-y: scroll;
    max-height: 80vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 0px;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1001;
    width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 900px) {
    .popup{
        width: 90%;;
    }
}

.popup-header {
    position: sticky;
    top: 0;
    background: #FFF; /* Ou qualquer outra cor de fundo que deseja para o cabeçalho */
    padding: 10px;
    display: flex;
    justify-content: space-between; /* Isso alinha o título à esquerda e o botão à direita */
    align-items: center;
    z-index: 100; /* Para garantir que o cabeçalho fique acima do conteúdo scrollável */
}

.popup-close-btn {
    cursor: pointer;
    border: none;
    background-color: #e94560; /* Cor de destaque que se alinha com o seu esquema de cores */
    color: white; /* Cor do texto */
    font-size: 16px; /* Tamanho do texto */
    line-height: 20px; /* Altura da linha */
    width: 30px; /* Largura do botão */
    height: 30px; /* Altura do botão */
    text-align: center; /* Alinha o texto 'X' horizontalmente */
    border-radius: 15px; /* Deixa o botão circular */
    position: absolute;
    right: 0px; /* Ajuste conforme necessário */
    top:0px; /* Ajuste conforme necessário */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

.popup-close-btn:hover {
    background-color: #b8273f; /* Cor um pouco mais escura quando o mouse está sobre o botão */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Sombra mais pronunciada */
}

.popup-close-btn:focus {
    outline: none; /* Remove o contorno padrão para navegadores que o exibem ao focar */
}

.popup button {
    display: block;
    margin: 20px auto 0;
}

/* FIM CUSTOMIZAÇÃO DO POPUP */


/* ESTILO DA CAIXA DE PESQUISA */
.input-pesquisa {
    padding: 10px 15px;
    font-size: 1rem;
    border: 2px solid #ddd; /* Cor suave para a borda */
    border-radius: 5px; /* Bordas arredondadas */
    margin-right: 10px; /* Espaço à direita */
    width: calc(100% - 200px); /* Largura ajustável */
    box-sizing: border-box; /* Inclui padding na largura total */
    outline: none; /* Remove o contorno ao focar */
}

.input-pesquisa:focus {
    border-color: #e94560; /* Cor de destaque ao focar, deve combinar com o seu esquema de cores */
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.2); /* Sombra suave ao redor do input */
}

/* Considerando que você tem um botão "Crie seu anúncio aqui", este estilo manterá o input alinhado com o botão */
.header-grupos {
    display: flex;
    align-items: center; /* Alinha verticalmente */
    justify-content: space-between; /* Separa o input e o botão */
    padding: 10px; /* Espaçamento interno */
}

/* Estilo para a largura responsiva */
@media (max-width: 768px) {
    .input-pesquisa {
        width: 100%; /* A caixa de pesquisa ocupa toda a largura em dispositivos móveis */
        margin-bottom: 10px; /* Espaço abaixo do input para separar do próximo elemento */
    }
    .header-grupos {
        flex-direction: column; /* Empilha o input e o botão verticalmente em dispositivos menores */
    }
}