/* Resetando algumas margens e padding */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  background-color: #353535;
  overflow-y: auto; /* Permite a rolagem vertical no corpo */
}

body {
  background-color: #121212;
  color: white;
  font-family: Arial, sans-serif;
}

#bordel {
  display: none;
}
/* Cabeçalho futurista */
header {
  background-color: #b922b7; /* Cor primária futurista */
  color: #fff;
  padding: 10px;
  font-size: 22px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Adicionando espaço entre os elementos */
  box-shadow: 0px 4px 10px rgba(185, 34, 183, 0.5); /* Sombra suave e futurista */
}

.header-icon {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 24px;
}

.info {
  font-size: 16px; /* Ajuste no tamanho da fonte do IP */
  text-align: right; /* Alinha o IP à direita */
  flex-grow: 1; /* Permite que o IP ocupe o espaço restante */
  font-weight: bold;
  transition: color 2s ease-in-out; /* Transição suave de 2 segundos */
}

/* Estilo para o bloco do grupo */
.box-grupo-key {
  border: 1px solid #b922b7;
  width: 350px;
  border-radius: 10px;
  overflow: hidden;
  margin: 25px auto;
  position: relative;
  box-shadow: 0 6px 14px rgba(185, 34, 183, 0.6);
}

.header-grupo-key {
  background-color: #b922b7;
  color: #121212;
  padding: 12px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0, 255, 255, 0.6);
}

.content-grupo-key {
  background: linear-gradient(to bottom, #b922b733, #b922b722);
  color: #fff;
  padding: 18px;
  text-align: center;
}

.zapzap {
  padding: 30px;
  text-align: center;
}

.zapzap i {
  font-size: 24px;
  margin: 0 10px;
}

/* Cores oficiais */
.zapzap .fa-whatsapp {
  color: hsl(144, 100%, 34%); /* Verde do WhatsApp */
}

.zapzap .fa-telegram-plane {
  color: hsl(201, 100%, 50%); /* Azul do Telegram */
}

.zapzap .fa-google {
  background: linear-gradient(45deg, #db4437, #4285f4, #f4b400, #0f9d58); /* Cores do Gmail */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-link-grupo-key {
  display: block;
  background-color: #b922b7;
  color: #121212;
  padding: 15px 0;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #b922b7;
  text-align: center;
  transition: background-color 0.3s ease;
}

.btn-link-grupo-key:hover {
  background-color: #9b1e9f;
}

/* Rodapé */
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  color: #b922b7;
  text-align: center;
  padding: 10px 0;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

.header-icon i {
  font-size: 20px; /* Tamanho reduzido dos ícones */
  margin-right: 15px; /* Espaçamento entre os ícones */
  position: relative;
  top: -6px; /* Sobe os ícones */
}

/* Container com animação de piscar */
.container {
  font-size: 1em;
  margin-top: -20px; /* Ajuste o valor conforme necessário */
  border-right: 2px solid #b922b7;
  white-space: nowrap;
  overflow: hidden;
  animation: blink 0.7s step-end infinite;
}

@keyframes blink {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #b922b7;
  }
}

/* Estilo para colocar os botões lado a lado */
.button-container {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* Espaço entre os botões */
}

#statusCriar, #statusDeletar {
  color: red;
}

.anuncio-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  position: relative;
}

.anuncio {
  font-size: 16px;
  font-weight: bold;
  margin: 0 10px;
  text-align: center;
  color: white;
  border: 2px solid black;
  padding: 15px;
  border-radius: 10px;
  width: 80%;
  background-color: #1e1e1e;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.link-vermelho {
  color: red;
  cursor: pointer;
  text-decoration: none;
}

.controle {
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  color: white;
}

.indicadores {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.bolinha {
  width: 5px;
  height: 5px;
  margin: 0 5px;
  background-color: gray;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.bolinha.ativa {
  background-color: #de4cbe;
}

/* Estilo para itens de menu */
.menu-item i {
  color: inherit;
}

/* Estilos para o "bordel" (janela centralizada) */
.bordel-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; /* Largura ajustada */
  max-width: 500px; /* Limite máximo */
  height: auto;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  padding: 20px;
  color: white;
  z-index: 999;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  box-sizing: border-box; /* Garantir que padding não afete largura */
}

.bordel-header {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.bordel-content {
  margin-top: 20px;
  text-align: center;
}

.bordel-button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: black;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  width: 48%; /* Botões lado a lado */
  font-size: 14px;
}

.bordel-button:hover {
  background-color: #444;
}

.input-key {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-top: 10px;
}

/* Estilos para a linha de input */
.input-key {
  padding: 10px;
  width: 100%;
  margin-top: 10px;
  border-radius: 5px;
  background-color: #333;
  color: white;
  border: none;
  text-align: center;
  box-sizing: border-box; /* Inclui padding no tamanho */
}

#status {
  margin-top: 10px;
  color: white;
  text-align: center;
}


/* Novo bordel fixado na tela com rolagem */
#bordel2 {
  position: fixed; /* Fixar o bordel na tela */
  top: 20px; /* Distância do topo da tela */
  left: 50%; /* Centralizar horizontalmente */
  transform: translateX(-50%); /* Ajuste para garantir centralização */
  background-color: #000; /* Cor de fundo preta */
  border-radius: 10px; /* Arredondamento do bordel */
  padding: 20px;
  width: 90%; /* Largura do bordel */
  max-width: 500px; /* Largura máxima */
  height: 80%; /* Altura do bordel com rolagem */
  max-height: 600px; /* Altura máxima */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  overflow-y: auto; /* Permitir rolagem vertical se o conteúdo exceder a altura */
  z-index: 9999; /* Garantir que fique acima de outros elementos */
  display: none; /* Inicialmente oculto */
  color: #fff; /* Texto branco */
}

/* Header do bordel */
.bordel-header {
  font-size: 24px;
  font-weight: bold;
  color: white;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between; /* Alinhar o X à direita */
  align-items: center;
}

/* Botão de fechar (X) */
.bordel-header .fechar-bordel {
  font-size: 24px;
  cursor: pointer;
  color: white;
  border: none;
  background: transparent;
  padding: 0;
}

.bordel-header .fechar-bordel:hover {
  color: #ff0000; /* Cor vermelha quando o mouse passa por cima */
}

/* Estilos para os botões */
.bordel-buttonN {
  background-color: #2c2a2acc; /* Cor de fundo diferente */
  color: #8c8c8c;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
  width: 100%;
  text-align: left;
}

.bordel-buttonN:hover {
  background-color: #e71be5a7;
}

/* Submenu inicial oculto */
.submenuU {
  display: none; /* Esconde os submenus inicialmente */
  padding-left: 20px;
  margin-top: 10px;
}


.submenuU button:hover {
  background-color: #ffffff73;
}