@charset "utf-8";
/* CSS Document */

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #16213e;
  /* #5549c0; */
  margin: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Grid de Números --- */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  /* Padrão */
  gap: 10px;
  margin: 20px 0;
}

.number-cell {
  background: white;
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  font-size: 16px;
  font-weight: bold;
}

.number-cell.sold {
  background: #48ff57;
  cursor: pointer;
}

.number-cell.sold .buyer-name {
  color: #333333;
  /* Um cinza bem escuro, quase preto */
}

/* Permitir clique para detalhes */
.number-cell.unpaid {
  /* background: #ffebee;
  border: 1px solid #ffcdd2; */
  background: #dc3b3b;
  border: 1px solid #d32f2f;
  cursor: help;
}

.number-cell.unpaid .buyer-name {
  color: #FFFFFF;
  /* Branco */
}

.number-cell.disabled {
  background: #e0e0e0;
  cursor: default;
  opacity: 0.7;
}

.number-cell.unpaid.disabled .payment-status {
  color: #555555;
  /* Um cinza escuro, para ser legível */
}

.number-cell.unpaid.disabled .buyer-name {
  color: #333333;
  /* Ou #b2b2b2, a cor que você tinha antes */
}

.number-cell.no-raffle {
  cursor: not-allowed;
}

/*ATUALIZAÇÃO DO ADMIN*/
/* --- Admin Visualization of Temporary Client Reservations --- */
.number-cell.reserved-temp {
  background: #ff9800 !important;
  /* Orange */
  color: #fff !important;
  cursor: pointer !important;
  /* Ensures Admin can click */
}

.number-cell.reserved-temp .buyer-name {
  color: #fff !important;
  font-size: 11px;
}

.number-cell.reserved-temp .payment-status {
  color: #fffebd;
  /* Light yellow text */
}

.buyer-name {
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  margin-top: 3px;
  line-height: 1.2;
  word-break: break-word;
  color: #b2b2b2;
  /*#333*/
}

.payment-status {
  font-size: 9px;
  /* color: #f44336; */
  color: #ffffff;
  font-style: italic;
}

.number-cell.unpaid .payment-status {
  /* color: #FFF59D; */
  color: #ffffff;
  /* Amarelo claro */
  font-weight: normal;
  /* Tira o negrito se não quiser */
  font-size: 10px;
}

/* --- Estilos Gerais de Formulário --- */
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
}

input[type="checkbox"] {
  width: auto;
  margin: 0;
  vertical-align: middle;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.checkbox-group label {
  margin-bottom: 0;
  font-weight: normal;
}

small {
  font-size: 0.8em;
  color: #555;
  display: block;
  margin-top: -5px;
  margin-bottom: 10px;
}

/* --- Estilo Base para Botões --- */
button {
  background: #ff9800;
  /* #4CAF50;*/
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  margin: 5px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  transition: background 0.2s ease, transform 0.1s ease;
  box-sizing: border-box;
}

button:hover {
  filter: brightness(110%);
}

button:active {
  transform: scale(0.98);
}

button:disabled {
  background: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
  filter: none;
}

/* --- Seções Principais (Painéis) --- */
.promoter-info,
.raffle-management,
.stats,
.form-container,
.raffle-details {
  background: #9B9B9B;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

h2,
h3 {
  margin-top: 0;
  color: #333;
}

/* --- Painel do Promotor (Admin & Público) --- */
.promoter-info h2 {
  position: relative;
  padding-right: 45px;
  margin-bottom: 15px;
}

.settings-button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #FF9800;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  /* --- AJUSTES AQUI --- */
  display: flex;
  /* Usa Flexbox */
  align-items: center;
  /* Centraliza ícone verticalmente */
  justify-content: center;
  /* Centraliza ícone horizontalmente */
  padding: 8px;
  /* Padding uniforme ao redor do ícone */
  /* line-height: 0; REMOVIDO */
  width: auto;
  /* Largura automática */
  height: auto;
  /* Altura automática */
  min-width: unset;
  /* Remove qualquer min-width herdado */
  margin: 0;
  /* --- FIM AJUSTES --- */

  transition: background 0.3s ease;
  /* Herda border, cursor, radius da base button */
}

.settings-button:hover {
  background: #F57C00;
}

.settings-button:active {
  transform: translateY(-50%) scale(0.95);
  /* Adiciona efeito de clique */
}

.settings-button .material-icons {
  font-size: 20px;
  color: white;
  /*vertical-align: middle;*/
  display: block;
  /* Garante que o span se comporte como bloco dentro do flex */
}

/* Layout Info Promotor */
#promoter-display .promoter-container {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  min-height: 50px;
  width: 100%;
}

#promoter-display .info {
  flex: 1;
  min-width: 180px;
  flex-basis: auto;
}

#promoter-display .info p {
  margin-bottom: 5px;
  font-size: 14px;
  word-wrap: break-word;
}

#promoter-display .separator {
  width: 1px;
  background-color: #757575;
  align-self: stretch;
  margin: 5px 0;
  min-height: 50px;
}

#promoter-display .logo {
  flex-shrink: 0;
  line-height: 0;
  text-align: center;
  /* margin-left: auto; REMOVIDO */
}

#promoter-display .promoter-logo-img {
  max-width: 150px;
  max-height: 70px;
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}

/* Painel Edição Promotor (Modal Admin) */
.promoter-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #16213e;
  /*  rgb(180, 183, 253); */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(255, 143, 0, 0.5);
  z-index: 1010;
  width: 90%;
  /*max-width: 550px;*/
  max-width: 600px;
  /* <<< AUMENTADO (Opcional, para dar mais espaço horizontal) */
  height: 92vh;
  max-height: 92vh;
  /* <<< ADICIONADO: Limita altura a 85% da tela */
  overflow-y: auto;
  /* <<< ADICIONADO: Adiciona barra de rolagem vertical se necessário */
  scrollbar-color: #ff8f00 rgba(255, 143, 0, 0.5);

  flex-direction: column;
}

.promoter-panel h2 {
  margin-bottom: 20px;
  
  color: #FFC107; /* Título Amarelo/Laranja */
  margin-top: 0;
  /*border-bottom: 1px solid #444;*/
  
  padding-bottom: 15px;
  text-align:center;
}

.promoter-panel h4 {

  color: white;
}

.promoter-panel .form-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.promoter-panel label {
  color: #fff;
  min-width: 80px;
  margin-bottom: 0;
}

.promoter-panel label small {
  color: #ccc;
}

.promoter-panel input {
  flex: 1;
  margin-bottom: 0;
}

.promoter-panel .radio-group input[type="radio"] {
  accent-color: #ff8f00;
  /* cor vibrante para o círculo */
}


.promoter-panel .form-group small {
  margin-left: 90px;
}

#promoter-panel input[type="text"],
#promoter-panel input[type="tel"],
#promoter-panel input[type="email"],
#promoter-panel input[type="password"] {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;

  padding: 10px;
  font-size: 14px;
  box-sizing: border-box;
  /* Garante que o padding não aumente a altura total */
  height: 30px;
  /* Define uma altura fixa */
  border-radius: 4px;
  /* Ajuste a altura (ex: 40px) se necessário para igualar aos outros */
}

#logo-preview {
  /* 1. Ajuste ao Conteúdo: A caixa encolhe para o tamanho exato da imagem */
  width: fit-content;

  /* 2. Mantemos a borda para marcar o campo */
  border: 1px solid #ccc;
  border-radius: 6px;

  /* 3. Sem espaços internos sobrando */
  padding: 0;
  background-color: transparent;

  /* 4. Centralização na tela */
  margin: 0 auto 15px auto;

  /* 5. Centralização do conteúdo interno (imagem ou texto) */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 6. Garante altura mínima para o texto "Sem logo" não sumir */
  min-height: 50px;
  /* Removemos o max-width fixo rígido que poderia forçar proporções erradas, 
     mas mantemos um limite para não estourar a tela se a imagem for gigante */
  max-width: 100%;
  overflow: hidden;
}

#logo-preview img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;

  /* Box visual */
  background-color: #1a274a;
  /* fundo escuro sutil */
  border: 1px solid #ff8f00;
  /* borda laranja */
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.button-container button {
  width: auto;
  min-width: 100px;
}

.button-container button:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

.fill-button {
  display: block;
  margin: 20px auto;
  background: #2196F3;
}

.fill-button:hover {
  background: #1976D2;
}

/* --- Botão Excluir (Mantém Vermelho) --- */
.delete-button {
  background: #f44336;
  /* Vermelho Base */
  color: white;
}

.delete-button:hover {
  background: #d32f2f;
  /* Vermelho mais escuro no mouse */
}

/* --- Botão Cancelar (Agora Cinza) --- */
button[onclick="closePromoterPanel()"] {
  background: #757575;
  /* Cinza */
  color: white;
}

button[onclick="closePromoterPanel()"]:hover {
  background: #616161;
  /* Cinza mais escuro no mouse */
}

/* Garante que o painel fique bem em telas menores - responsividade*/
@media (max-width: 480px) {
  .promoter-panel {
    padding: 15px;
    max-width: 95%;
  }

  .promoter-panel .form-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .promoter-panel label {
    min-width: unset;
    margin-bottom: 5px;
  }

  .promoter-panel input {
    width: 100%;
  }
}


/* --- Gerenciamento de Rifas (Admin) --- */
.raffle-management h2 {
  margin-bottom: 20px;
}

.raffle-management .form-group1 button {
  display: block;
  margin: 10px auto 20px auto;
}

/* Botão Criar */
.raffle-management textarea {
  width: 100%;
}

.raffle-management button[onclick="saveRaffleDescription()"] {
  width: auto;
  min-width: 120px;
  padding: 6px 12px;
  font-size: 13px;
  margin: 5px 0 15px 0;
  display: block;
}

/* Salvar Descrição */
/* Upload Imagens */
.raffle-management .form-group .input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.raffle-management .form-group small {
  margin-left: 0;
}

.image-previews-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
  min-height: 80px;
  background: #f9f9f9;
}

.image-previews-container>div {
  position: relative;
  border: 1px solid #ccc;
  padding: 3px;
  border-radius: 3px;
  background: white;
  line-height: 0;
}

.image-previews-container img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: cover;
  cursor: pointer;
}

/* Botão 'X' Excluir Imagem */
.image-previews-container>div>button {
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(200, 0, 0, 0.7);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 16px;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  min-width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.image-previews-container>div>button:hover {
  background: rgba(200, 0, 0, 1);
  border-color: white;
}

/* Navegação Rifas */
.raffle-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 20px 0 10px 0;
}

.raffle-navigation button {
  width: auto;
  min-width: 90px;
}

#current-raffle-display {
  font-weight: bold;
  padding: 0 15px;
  font-size: 1.1em;
}

#raffle-counter {
  display: inline-block;
  background: #eee;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.9em;
  margin: 0 5px;
}

.delete-raffle-btn {
  display: block;
  margin: 15px auto 5px auto;
  background: #f44336;
}

/* Botão Excluir Rifa */
.delete-raffle-btn:hover {
  background: #d32f2f;
}

/* Input file customizado (opcional) */
input[type="file"].image-input {
  display: none;
}

input[type="file"].image-input+label.file-label {
  background: #e0e0e0;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

input[type="file"].image-input+label.file-label:hover {
  background: #d5d5d5;
}

/* --- Estilização Input File com Label --- */

/* Esconde o input original de forma acessível */
.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Estilização Input File com Label (ESTILO BOTÃO VERDE) --- */

/* Esconde o input original de forma acessível */
.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Estiliza o LABEL para parecer o botão verde */
.file-label-button {
  display: inline-block;
  background: #4CAF50;
  /* <<< VERDE PADRÃO */
  color: white;
  /* <<< TEXTO BRANCO */
  border: none;
  /* <<< SEM BORDA */
  border-radius: 4px;
  padding: 8px 16px;
  /* <<< Padding ajustado (pode ser 10px 15px como o base se preferir) */
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  /* <<< BOLD como outros botões */
  text-align: center;
  transition: filter 0.2s ease, transform 0.1s ease;
  /* Usa filter para hover */
  margin: 0 0 0 10px;
  width: auto;
  vertical-align: middle;
  box-sizing: border-box;
  /* Garante consistência de padding/border */
}

/* Efeito Hover igual ao botão base */
.file-label-button:hover {
  filter: brightness(110%);
  /* Remove background-color do hover anterior */
}

/* Efeito Active igual ao botão base */
.file-label-button:active {
  transform: scale(0.98);
  filter: brightness(100%);
  /* Remove escurecimento extra se houver */
  /* Remove background-color e border-color do active anterior */
}

/* Ajuste específico dentro do painel do promotor */
#promoter-panel .form-group .file-label-button {
  flex: 1;
  margin-left: 0;
}

#promoter-panel textarea#whatsapp-template {
  width: 100%;
  box-sizing: border-box;
  /* Garante que padding não aumente a largura total */
  min-height: 100px;
  /* Define uma altura mínima razoável */
}

/* Ajuste específico para o label das imagens da rifa */
.raffle-management .input-row .file-label-button {
  flex: none;
}

/* --- Status da Rifa --- */
.stats h3 {
  margin-bottom: 10px;
}

.stats p {
  margin-bottom: 5px;
  font-size: 14px;
}

.winner-number {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 3px dashed #aaa;
}

.winner-number p {
  margin-bottom: 8px;
}

#winner-number {
  color: #ff0000;
  font-size: 1.5em;
  font-weight: bold; /* Deixa o número mais forte */
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ccc; /* 1px fica mais elegante que 2px */
  
  /* --- AS MUDANÇAS MÁGICAS --- */
  display: inline-block; /* Permite aplicar largura e padding corretamente */
  padding: 5px 20px;     /* 5px em cima/baixo, 20px nas laterais (deixa largo) */
  min-width: 50px;       /* Garante uma largura mínima mesmo se for número 1 */
  text-align: center;    /* Centraliza o número dentro da caixa */
  margin-left: 10px;     /* Dá um espacinho do texto "Número Vencedor:" */
}

/* --- Detalhes do Vencedor (Status da Rifa - Admin) --- */
.winner-details {
  background: #e0e0e0; /* Fundo cinza um pouco mais escuro para destaque */
  padding: 15px;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;

  /* A MÁGICA PARA FICAR UM ABAIXO DO OUTRO */
  display: flex;
  flex-direction: column; /* Empilha verticalmente */
  gap: 8px; /* Espaço entre cada linha */
}

/* Estiliza cada linha (Nome, Telefone, Email...) */
.winner-details p {
  margin: 0; /* Remove margens padrão do navegador */
  padding-bottom: 5px;
  border-bottom: 1px dashed #bbb; /* Linha separadora pontilhada */
  display: block; /* Garante que ocupe a linha toda */
}

/* Remove a borda do último item para ficar bonito */
.winner-details p:last-child {
  border-bottom: none;
}

/* Deixa os rótulos (Nome:, Email:) em negrito se estiverem dentro de tags */
.winner-details strong {
  color: #000;
  margin-right: 5px;
}

/* --- Correção: Detalhes do Vencedor (Lista Vertical) --- */

#winner-details {
  /* O pulo do gato: Flexbox em Coluna */
  display: none; /*flex !important; /* O !important garante que o JS (block) não quebre o flex */
  flex-direction: column;   /* Empilha um item abaixo do outro */
  gap: 10px;                /* Espaço entre as linhas */
  
  /* Visual de "Cartão" para destacar */
  background-color: rgba(0, 0, 0, 0.1); /* Fundo sutilmente mais escuro */
  padding: 15px;
  border-radius: 6px;
  margin-top: 15px;
  border: 1px solid rgba(0,0,0,0.2);
  text-align: left; /* Alinha o texto à esquerda para facilitar leitura */
}

/* Quando ativo via JS, usamos uma classe para forçar o flex */
#winner-details.visible {
  display: flex !important;
}

/* Estiliza cada linha (Nome, Telefone, Email...) */
#winner-details p {
  margin: 0; /* Remove margens padrão que atrapalham */
  width: 100%; /* Ocupa a largura total */
  
  /* Linha separadora sutil entre os dados */
  border-bottom: 1px dashed #aaa; 
  padding-bottom: 5px;
  
  font-size: 14px;
  color: #333; /* Garante contraste */
}

/* Remove a linha do último item */
#winner-details p:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Opcional: Deixa o rótulo (Nome:) em negrito, mas como está no HTML puro, 
   teria que envolver em <b> ou <strong>. 
   Se não quiser mexer no HTML, o CSS acima já resolve o alinhamento. */

/* --- Formulário Registrar Venda --- */
.form-container h3 {
  margin-bottom: 20px;
}

#purchase-btn {
  width: auto;
  min-width: 150px;
}

/* Botão Registrar */
#draw-btn {
  width: auto;
  min-width: 150px;
  display: block;
  margin: 20px auto;
}

/* Botão Sortear */

/* --- Modais --- */

.modal {
  display: none;
  /* O JS muda isso para 'flex' */
  position: fixed;
  z-index: 2000;
  /* Garante que fique no topo */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* Fundo escuro */

  /* O SEGREDO DA CENTRALIZAÇÃO SEM PULO: */
  align-items: center;
  justify-content: center;

  /* Desfoque opcional */
  backdrop-filter: blur(2px);
}

/* --- Correção do Modal (Centralização e Rolagem) --- */
.modal-content {
  /*background: white;*/
  background: rgba(22, 33, 62, 0.98);
  padding: 25px;
  border-radius: 8px;
  color: white;

  /* 1. Centralização Absoluta Fixa */
  position: fixed;
  /* Mudado de absolute para fixed para garantir que fique na tela */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Puxa de volta para o centro exato */

  /* 2. Dimensões (Igual ao Promotor) */
  width: 90%;           /* Ocupa a largura disponível */
  max-width: 600px;     /* Limite máximo de largura (igualamos a 600px) */

  /* 3. Altura Inteligente e Rolagem */
  max-height: 92vh;     /* Ocupa no máximo 90% da altura da tela */
  overflow-y: auto;     /* Cria barra de rolagem se o conteúdo for maior */

  /* Sombra e Borda */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  box-sizing: border-box; /* Garante que o padding não estoure o tamanho */
}

@keyframes modalZoom {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-content h3 {
    color: #FFC107;
  margin-bottom: 20px;
  text-align: center;
}

/* Força a cor de destaque laranja nos Radio Buttons */
.modal-content input[type="radio"] {
  accent-color: #ff8f00;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.modal-content button[onclick="closeModal()"],
button[onclick="closeCreateRaffleModal()"] {
  display: block;
  margin: 20px auto 0 auto;
  width: auto;
  min-width: 100px;
  background: #757575;
}

/* Botão Fechar/Cancelar cinza */
button[onclick="closeCreateRaffleModal()"] {
  background: #f44336;
}

/* Exceto Cancelar Criar Rifa */
.modal-content button[onclick="closeModal()"]:hover {
  background: #616161;
}

button[onclick="closeCreateRaffleModal()"]:hover {
  background: #d32f2f;
}

/* Botão de Ação Principal (Criar Rifa) */
button[onclick="confirmCreateRaffle()"] {
  background: #4CAF50; /* Verde Sucesso */
  /* OU use #FF9800 se preferir Laranja como padrão */
  color: white;
  display: block;
  margin: 20px auto 0 auto; /* Centraliza e separa do topo */
  width: auto;
  min-width: 120px;
  font-weight: bold;
  padding: 10px 20px;
}

button[onclick="confirmCreateRaffle()"]:hover {
  filter: brightness(110%);
}

/* Modal Detalhes Comprador */
#number-modal .modal-content p {
  margin-bottom: 8px;
  font-size: 14px;
}

#number-modal .modal-content .checkbox-group label {
  font-size: 13px;
}

#number-modal .modal-content button[onclick^="handleNumberActions"] {
  background: #4CAF50;
  margin-top: 15px;
}

/* Botão Salvar Ações */
/* Modal Criar Rifa */
#create-raffle-modal textarea {
  width: 100%;
}

/* Display Vencedor (Modal Sorteio) */
.winner-display {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*background: linear-gradient(135deg, #66bb6a, #43a047);*/
  color: white;
  padding: 30px 40px;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
  z-index: 1010;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.winner-display h2 {
  font-size: 2em;
  margin-bottom: 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.winner-display p {
  margin-bottom: 8px;
}

.winner-display a {
  color: white;
  text-decoration: underline;
}

.shuffling {
  font-size: 4em;
  font-weight: bold;
  color: white;
  text-align: center;
  margin: 20px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.unpaid-winner-options {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  justify-content: center;
}

.unpaid-winner-options button {
  flex: 0 1 auto;
  padding: 10px 15px;
  font-size: 14px;
  min-width: 120px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.keep-winner {
  background: #FF9800 !important;
}

.keep-winner:hover {
  background: #F57C00 !important;
}

.new-draw {
  background: #f44336 !important;
}

.new-draw:hover {
  background: #d32f2f !important;
}

.winner-display button:not(.keep-winner):not(.new-draw) {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid white;
  color: white;
  padding: 10px 25px;
  font-size: 16px;
  margin-top: 25px;
  box-shadow: none !important;
}

.winner-display button:not(.keep-winner):not(.new-draw):hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* --- Destaque Célula Vencedora --- */
.winner-highlight {
  animation: pulse 1.5s infinite ease-in-out;
  background: #66BB6A !important;
  color: white !important;
  border-color: #388E3C !important;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.8);
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
  }

  50% {
    transform: scale(1.04);
    box-shadow: 0 0 18px rgba(76, 175, 80, 1);
  }
}

/* --- Imagem Expandida --- */
.expanded-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;/*1020;*/
  cursor: zoom-out;
}

.expanded-image img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border: 3px solid white;
  border-radius: 5px;
}

/* --- Voltar ao Topo --- */
.topo {
  background: rgba(60, 112, 128, 0.8);
  position: fixed;
  bottom: 20px;
  right: -80px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.4s ease-in-out;
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.topo svg {
  fill: white;
  width: 24px;
  height: 24px;
}

#topo a {
  text-decoration: none;
  transition: text-decoration 0.2s ease-in-out;

}

#topo a:hover {
  text-decoration: underline;
}


.show-button .topo {
  /*right: 10px;*/
  right: 5px !important; /* Estava 20px */
        bottom: 5px !important;
}

/* --- Bloqueio Durante Sorteio --- */
.numbers-grid.drawing-in-progress {
  cursor: wait;
}

.numbers-grid.drawing-in-progress .number-cell {
  cursor: wait !important;
}

/* --- Página Pública Detalhes Rifa --- */
.raffle-details h2 {
  text-align: center;
  margin-bottom: 15px;
}

#raffle-description-public {
  text-align: justify;
  margin-bottom: 20px;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

#image-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  background-color: #f9f9f9 !important; /*rgba(255, 255, 255, 0.1);*/
  border-radius: 4px;
  padding: 10px;
}

#image-preview img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
}

.thumbnails-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 15px;
  /* Espaço ACIMA das miniaturas */
  /* margin-bottom: 20px; */
  /* <<< ADICIONE ESTA LINHA: Espaço ABAIXO das miniaturas */
  margin-bottom: 25px !important;
  /* <<< ADICIONE !important e aumente um pouco */
}

.thumbnails-container img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.thumbnails-container img:hover {
  border-color: #ccc;
}

.raffle-pricing {
  text-align: center;
  /*margin-top: 25px;*/
  font-size: 1.1em;
  clear: both;
  /* Garante que não flutue ao lado de nada */
  padding-top: 40px;
  /* <<< ADICIONE UM PADDING SUPERIOR como alternativa à margem */
  margin-bottom: 30px;
  /* <<< Adicione esta linha */

}

.raffle-pricing p {
  margin-bottom: 5px;
}

/* --- Responsividade --- */
@media (max-width: 768px) {
  .numbers-grid {
    grid-template-columns: repeat(7, 1fr);
  }

  #promoter-display .promoter-container {
    justify-content: center;
  }

  /* Centraliza em telas médias */
}

@media (max-width: 600px) {
  body {
    padding: 10px;
  }

  .numbers-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
  }

  .number-cell {
    padding: 8px;
    font-size: 13px;
  }

  .buyer-name {
    font-size: 9px;
  }

  h2 {
    font-size: 1.4em;
  }

  h3 {
    font-size: 1.2em;
  }

  /* Removido 'button' geral daqui para evitar conflito com 'X' */
  .modal-content,
  .promoter-panel {
    width: 95%;
    padding: 15px;
  }

  .promoter-info h2 {
    font-size: 1.2em;
    padding-right: 35px;
  }

  .settings-button {
    /*top: 50%;*/
    right: 5px;
    padding: 6px;
  }

  .settings-button .material-icons {
    font-size: 18px;
  }

  #promoter-display .promoter-container {
    flex-direction: column;
    text-align: center;
  }

  #promoter-display .separator {
    width: 80%;
    height: 1px;
    margin: 10px auto;
    min-height: 1px;
  }

  /* Ajuste separador */
  #promoter-display .logo {
    margin-left: 0;
    margin-top: 10px;
  }

  #promoter-display .promoter-logo-img {
    max-width: 120px;
    max-height: 70px;
  }

  .button-container {
    flex-direction: column;
    gap: 8px;
  }

  .button-container button {
    width: 100%;
    min-width: unset;
    margin: 0;
  }

  .image-previews-container img {
    width: 45px;
    height: 45px;
  }

  /* REGRA DUPLICADA DO BOTÃO 'X' FOI REMOVIDA DAQUI */
  .raffle-navigation {
    gap: 10px;
  }

  .raffle-navigation button {
    min-width: 80px;
    padding: 6px 10px;
  }

  #current-raffle-display {
    padding: 0 10px;
  }

  .winner-display {
    padding: 20px;
    font-size: 16px;
  }

  .winner-display h2 {
    font-size: 1.5em;
  }

  .shuffling {
    font-size: 3em;
  }

  .unpaid-winner-options {
    flex-direction: column;
    gap: 8px;
  }

  .unpaid-winner-options button {
    width: 100%;
    min-width: unset;
  }

  #image-preview img {
    max-height: 250px;
  }

  .thumbnails-container img {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 400px) {
  .numbers-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .number-cell {
    padding: 6px;
    font-size: 12px;
  }

  .buyer-name {
    display: none;
  }

  .promoter-info h2 {
    font-size: 1.1em;
  }
}

/* --- Botões de Navegação da Imagem Expandida --- */
.expanded-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 24px;
  /* Tamanho da seta */
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 4px;
  z-index: 1021;
  /* Acima da imagem, abaixo do overlay se necessário */
  transition: background-color 0.2s ease;
  /* Resetar estilos base de button se necessário */
  margin: 0;
  font-weight: bold;
  line-height: 1;
  display: block;
  /* Garante display block */
}

/* <<< ADICIONE ESTE BLOCO ABAIXO >>> */
.expanded-nav-btn:active {
  /* Combina a centralização (-50%) com o efeito de clique (0.90) */
  /* O !important garante que sobrescreva o estilo global de botões */
  transform: translateY(-50%) scale(0.90) !important;
}

.expanded-nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.expanded-nav-btn.prev {
  left: 15px;
  /* Posição do botão anterior */
}

.expanded-nav-btn.next {
  right: 15px;
  /* Posição do botão próximo */
}

/* Esconde botões inicialmente (JS controla display baseado no nº de imgs) */
.expanded-image:not(:hover) .expanded-nav-btn {
  opacity: 0.7;
  /* Ou esconde completamente: opacity: 0; pointer-events: none; */
}

/* Correção para o modal de sorteio (admin)
  Define uma largura mínima para o box que exibe os números
  aleatórios, impedindo que ele redimensione.
*/
/* Usando o ID #winner-display para garantir prioridade */
/* =========================================================== */
/* === DESIGN PREMIUM: TELA DE SORTEIO (THE STAGE) === */
/* =========================================================== */

/* =========================================================== */
/* === MODAL DE SORTEIO E VENCEDOR (Correção Final) === */
/* =========================================================== */

/* =========================================================== */
/* === OVERLAY DE FUNDO (O DESFOQUE/BLUR) === */
/* =========================================================== */
/* =========================================================== */
/* === CAMADA 1: O "VIDRO" (Fundo com Blur) === */
/* =========================================================== */
/* Este ID agora age como o Overlay que cobre a tela toda */
#winner-display {
    display: none; /* Controlado pelo JS */
    
    /* Ocupa a tela inteira e flutua sobre tudo */
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* Removemos transformações antigas para ele fixar na tela */
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    
    /* O Efeito de Blur/Vidro */
    background-color: rgba(0, 0, 0, 0.7) !important; /* Fundo escuro transparente */
    backdrop-filter: blur(8px); /* O desfoque real */
    -webkit-backdrop-filter: blur(8px); /* Safari */
    
    /* Centraliza o conteúdo (a caixa filha) */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    
    z-index: 9999 !important; /* Acima de tudo */
    overflow: hidden; /* Impede rolagem da página de fundo */
}

/* =========================================================== */
/* === CAMADA 2: A CAIXA SÓLIDA (Conteúdo) === */
/* =========================================================== */

/* =========================================================== */
/* === A CAIXINHA DO VENCEDOR (CORREÇÃO DE COR) === */
/* =========================================================== */

.winner-content-animated {
    /* Fundo AZUL ESCLARECIDO e Sólido */
    background: #16213e !important; 
    
    /* Borda Verde */
    border: 2px solid #4CAF50 !important;
    
    /* Sombra para destacar do blur */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9) !important;
    
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    color: white;
    
    /* Tamanho e Scroll */
    width: 100%;
    max-width: 550px;
    height: auto;
    max-height: 85vh;
    overflow-y: auto;
    
    /* Garante que fique acima do blur */
    position: relative;
    z-index: 10000;
    
    /* Animação de entrada (Zoom) */
    animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Garante que o fundo do modal de sorteio (números) também seja azul */
#winner-display .shuffling {
    background: #16213e !important; 
    border: 2px solid #4CAF50 !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9) !important;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    color: #4CAF50; /* Número verde */
    
    width: 100%;
    max-width: 550px;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: relative;
    z-index: 10000;
}

/* Títulos e Textos */
#winner-display h2 {
  font-size: 1.8em;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  margin: 0 0 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 15px;
  width: 100%;
}

/* Dados do Vencedor (Card interno) */
#winner-display p {
  font-size: 1.1em;
  color: #e0e0e0;
  margin: 8px 0;
  background: rgba(255,255,255,0.05); /* Fundo sutil */
  padding: 8px 15px;
  border-radius: 30px;
  width: 100%;
  box-sizing: border-box;
}

#winner-display strong {
  color: #FFC107; /* Dourado para os rótulos */
}

/* Botão Fechar (Estilo Ghost) */
#winner-display button {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.3);
  color: white;
  padding: 10px 40px;
  border-radius: 50px;
  font-size: 14px;
  margin-top: 25px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#winner-display button:hover {
  background: white;
  color: #16213e;
  border-color: white;
  box-shadow: 0 0 15px rgba(255,255,255,0.5);
}

/* Animação de Destaque Final (5 segundos) */
@keyframes winner-flash {
  0%, 100% { color: #4CAF50; text-shadow: 0 0 20px rgba(76, 175, 80, 0.8); transform: scale(1); }
  50% { color: #FFC107; text-shadow: 0 0 40px rgba(255, 193, 7, 1); transform: scale(1.1); } /* Reduzido para 1.1 */
}

.winner-reveal {
  animation: winner-flash 0.5s infinite; /* Pisca rápido por 5 segundos */
}

/* Ajuste fino para o container de botões dentro do modal de vencedor */
#winner-display .action-buttons {
  margin-top: 25px;
  width: 100%;
  display: flex;
  flex-direction: row;    /* Volta a colocar lado a lado se couber */
  flex-wrap: wrap;        /* Quebra linha se a tela for pequena */
  gap: 15px;
  justify-content: center;
}

#winner-display .action-buttons button {
  flex: 1 1 140px;        /* Cresce para preencher, mas com mínimo de 140px */
  max-width: 250px;       /* Não deixa ficar gigante demais */
  margin-top: 0;
}

/* Em telas muito pequenas, empilha os botões */
@media (max-width: 480px) {
  #winner-display .action-buttons {
    flex-direction: column;
  }
  #winner-display .action-buttons button {
    width: 100%;
    max-width: 100%;
  }
}

/* --- ESTILO VENCEDOR PREMIUM --- */
.winner-content-animated {
    text-align: center;
    animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.trophy-icon {
    font-size: 80px;
    margin-bottom: 10px;
    animation: trophyBounce 2s infinite;
    filter: drop-shadow(0 5px 15px rgba(255, 215, 0, 0.6));
}

.winner-title {
    color: #FFD700; /* Dourado */
    font-size: 1.8em;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.winner-number-box {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #FFD700;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    display: inline-block;
    min-width: 200px;
}

.winner-number-box .label {
    display: block;
    font-size: 0.9em;
    color: #ccc;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.winner-number-box .number {
    font-size: 3.5em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.winner-info-box {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #eee;
}

.payment-alert {
    background: #ff5252;
    color: white;
    padding: 8px;
    border-radius: 5px;
    font-weight: bold;
    margin-bottom: 15px;
    animation: pulse 1s infinite;
}

.btn-close-winner {
    background: white !important;
    color: #333 !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    font-weight: bold !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

@keyframes trophyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px) scale(1.1); }
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- Estilos do Modal do Vencedor --- */

/* =========================================================== */
/* === DESIGN PREMIUM: BANNER DO VENCEDOR (GOLDEN TICKET) === */
/* =========================================================== */

.winner-banner {
  /* Gradiente Dourado de Luxo */
  background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
  color: #1a1a2e; /* Texto escuro para contraste com o dourado */
  
  width: 100%;            /* Garante que caiba no pai */
  box-sizing: border-box; /* Inclui padding na largura */
  
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  
  /* Efeito de Profundidade */
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
  border: 1px solid #ffe082;
  position: relative;
  overflow: hidden;
}

/* Efeito de Brilho Passando (Animação) */
.winner-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  100% { left: 200%; }
}

.winner-banner h4 {
  font-size: 1.6em;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #3e2723; /* Marrom escuro/Dourado escuro */
}

.winner-banner .material-icons {
  font-size: 32px;
  color: #3e2723;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.winner-banner p {
  font-size: 1.1em;
  margin: 5px 0;
  font-weight: 500;
}

.winner-banner strong {
  color: #000;
  font-weight: 800;
}

/* Animação de "brilho" */
@keyframes glow-animation {
  from {
    box-shadow: 0 0 8px #4CAF50, 0 0 15px #4CAF50;
  }

  to {
    box-shadow: 0 0 15px #388E3C, 0 0 25px #388E3C;
  }
}

/* Estiliza o botão "Fechar" APENAS no modal do vencedor */
.modal-content.winner-modal .modal-close-btn {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.modal-content.winner-modal .modal-close-btn:hover {
  background-color: #388E3C;
}



/* --- Ajuste Layout Modal Promotor (Radios Link Imagem - V2) --- */
/*outros ajustes em: Painel Edição Promotor (Modal Admin) */
/* Container dos radios */
#promoter-panel .link-preference-options {
  display: flex;
  /* Usa Flexbox */
  flex-wrap: wrap;
  /* Permite quebrar linha */
  gap: 10px 20px;
  /* Espaço vertical e horizontal menor */
  justify-content: flex-start;
  /* Alinha à esquerda */
  padding-top: 5px;
  /* Pequeno espaço abaixo da label principal */
}

/* --- Ajuste Layout Modal Promotor (Radios Link Imagem - V4 FINAL) --- */

/* 1. Força o .form-group que contém os radios a empilhar verticalmente */
#promoter-panel .form-group:has(.link-preference-options) {
  display: block !important;
  /* Sobrescreve o 'display: flex' do .form-group pai */
  align-items: initial !important;
  /* Reseta o alinhamento do pai */
}

/* 2. Garante que a label principal ocupe 100% e tenha espaço */
#promoter-panel .form-group:has(.link-preference-options)>label {
  width: 100% !important;
  text-align: left !important;
  margin-bottom: 8px !important;
  /* Espaço abaixo da label */
}

/* 3. Agora, aplica o display: flex aos radio buttons */
#promoter-panel .link-preference-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 20px !important;
  /* Espaço entre os radios */
  justify-content: flex-start !important;
  width: 100% !important;
}

/* 4. Garante que os radio-groups se comportem bem */
#promoter-panel .link-preference-options .radio-group {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  /* Remove margem que causa empilhamento */
  font-weight: normal !important;
  /* Garante que labels não estejam em negrito */
}

/* 5. Garante que a label dentro do radio-group não esteja em negrito */
#promoter-panel .link-preference-options .radio-group label {
  font-weight: normal !important;
}

/* Alinha verticalmente o label e o input */
#image-base-url-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  /*margin-top: 10px;*/
}

#image-base-url-group>label {
  min-width: 150px;
  margin-top: 8px;
  /* Alinha verticalmente com o input */
  text-align: left;

}

#image-base-url-group .input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#image-base-url-group input[type="url"] {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  font-size: 14px;

  height: 30px;
  /*padding: 4px 8px;*/



}

#image-base-url-group small {
  margin-top: 12px;
  /* Mais espaço abaixo do input */
  font-size: 13px;
  color: #666;
}

/* --- Ajuste Layout Modal Promotor (Textarea Template) --- */

/* Força este form-group específico a empilhar seus filhos verticalmente */
#promoter-panel .form-group.form-group-vertical {
  display: block !important;
  /* Sobrescreve o 'display: flex' */
}

/* Garante que a label ocupe a largura total e tenha alinhamento correto */
#promoter-panel .form-group.form-group-vertical>label {
  width: 100% !important;
  text-align: left !important;
  margin-bottom: 8px !important;
  /* Espaço abaixo da label */
}

/* Garante que o textarea ocupe 100% da largura */
#promoter-panel .form-group.form-group-vertical>textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 100px;
  margin-bottom: 5px !important;
  /* Espaço antes do 'small' */
}

/* Garante que o 'small' ocupe 100% e fique abaixo */
#promoter-panel .form-group.form-group-vertical>small {
  width: 100% !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
}

/*================================================================*/

/* CSS para a nova lista de solicitações */
.requests-list-modern {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.requests-empty-message {
  text-align: center;
  color: #888;
  font-style: italic;
  margin: 10px 0;
}

.request-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  /* Informações | Botão 1 | Botão 2 */
  align-items: center;
  background: #fff;
  padding: 12px;
  border-radius: 5px;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}

.request-item:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.request-info {
  font-size: 14px;
  line-height: 1.4;
}

.request-info strong {
  color: #333;
  display: block;
  /* Nome em cima */
}

.request-info small {
  color: #777;
}

.request-action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  transition: opacity 0.2s ease;
}

.request-action-btn:hover {
  opacity: 0.8;
}

.approve-btn {
  background-color: #4CAF50;
  /* Verde */
  color: white;
}

.reject-btn {
  background-color: #f44336;
  /* Vermelho */
  color: white;
}

/* =================================================== */
/* === ESTILOS V2.2 (BLOQUEIO DE NÚMEROS/CARRINHO) === */
/* =================================================== */

/*
 * Cor para o número que o CLIENTE ATUAL bloqueou
 * (o azul que você já usa no .number-cell:hover)
 */
.number-cell.locked-me {
  background-color: #0292f9ff;
  /* Azul 'selecionado' */
  color: #ffffff;
  font-weight: bold;
}

.number-cell.locked-me .payment-status {
  color: #e3f2fd;
  /* Azul bem claro */
}

.number-cell.locked-admin {
  background-color: #0292f9ff !important;
  /* Azul escuro (seleção do admin) */
  color: white;
  font-weight: bold;
}

/*
 * Cor para o número que OUTRO cliente bloqueou
 * (cinza, parecido com 'desabilitado')
 */
.number-cell.locked-other {
  background-color: #cccccc !important;
  /* Cinza (bloqueado por cliente) */
  color: #666;
  cursor: not-allowed;
  /* O JS muda para 'pointer' no admin */
}

.number-cell.locked-other .buyer-name {
  /* color: #999; */
  color: #333;
  font-size: 0.8em;
  font-weight: bold;
}

.number-cell.locked-other .payment-status {
  color: #aaa;
}

.locked-admin {
  background-color: #e0e0e0;
  color: #555;
}

/* =================================================== */
/* === ESTILOS MODAL CLIENTE (UPLOAD) === */
/* =================================================== */

/* Modal do Cliente (Fundo claro) */
#number-modal .upload-section {
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px dashed #ccc;
  margin-top: 15px;
}

#number-modal .upload-section label {
  font-weight: bold;
  color: #fff;
  font-size: 14px;
  margin-bottom: 0;
  /* Correção para alinhamento */
}

#number-modal .upload-controls {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

#number-modal .upload-controls input[type="file"] {
  flex: 1;
  margin-bottom: 0;
  /* Correção para alinhamento */
}

#number-modal .upload-controls .upload-btn-modal {
  background: #0288d1;
  /* Azul */
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  margin: 0;
  /* Reset de margem do botão */
}

/* - - - Devoluções - - - */

.btn-devolucoes {
  background: linear-gradient(45deg, #ff8f00, #ff6b00) !important;
  animation: pulse 3s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);

  }

  50% {
    opacity: 0.9;
    transform: scale(1.05);

  }
}

/* =================================================== */
/* === ESTILOS DO MODAL ESCURO (TEMA DEVOLUÇÕES) === */
/* =================================================== */

/* 1. O Fundo do Modal (baseado no .c de devolucoes.php) */
.modal-content.modal-content-dark {
  /* 1. Centralização Fixa (Igual ao Promotor) */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* 2. Dimensões Controladas */
  width: 90%;
  max-width: 600px;   /* Largura padrão */
  
  /* 3. Altura Inteligente */
  height: 95vh;       /* Cresce com o conteúdo */
  max-height: 95vh;   /* Trava em 90% da altura da tela */
  overflow-y: auto;   /* Cria rolagem se os campos não couberem */
  
  /* 4. Visual (Baseado na sua imagem: Fundo Azul Escuro) */
  background: #16213e; 
  color: #eee; /*white;*/
  border: 1px solid #ff8f00; /*#444;*/
  border-radius: 8px;
  padding: 25px;
  /*box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);*/
  box-shadow: 0 4px 15px rgba(255, 143, 0, 0.5);
  box-sizing: border-box;
  
  scrollbar-color: #ff8f00 rgba(255, 143, 0, 0.5);
  
}

/* 2. Título (laranja) */
.modal-content-dark h3 {
  color: #ff8f00;
  text-align: center;
  border-bottom: 1px solid #444;
  padding-bottom: 15px;
  margin-top: 0;
}

/* 3. Texto Padrão (branco) */
.modal-content-dark p,
.modal-content-dark label {
  color: #eee;
  font-weight: normal;
}

.modal-content-dark strong {
  color: #ffffff;
}

.modal-content-dark small {
  color: #ccc;
  line-height: 1.3;
}

/* 4. Link "Ver Comprovante" (verde) */
.modal-content-dark .comprovante-link {
  color: #4CAF50 !important;
  /* Verde */
  font-weight: bold;
  text-decoration: none;
}

.modal-content-dark .comprovante-link:hover {
  text-decoration: underline;
}

/* 5. Barras de Status (Verde/Vermelho) */
.modal-content-dark .status-bar {
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
  font-size: 14px;
}

.modal-content-dark .status-bar.confirmed {
  background: #64B5F6; /*#e8f5e9;*/
  color: #2e7d32;
  font-family: monospace !important; 
  font-size: 1.5em !important;
  font-weight: bold !important;
}

.modal-content-dark .status-bar.pending {
  background: #ffcdd2; /*#ffebee;*/
  color: #c62828;
  font-family: monospace !important; 
  font-size: 1.5em !important;
  font-weight: bold !important;
}

.modal-content-dark .status-bar strong {
  color: #333;
  /* Texto escuro no fundo claro */
}

/* 6. Contêiner de Ações (divisor) */
/* (Removido o fundo laranja que causava a inconsistência) */
.modal-content-dark .actions-container {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #444;
  /* Linha divisória escura */
}

.modal-content-dark .actions-container .checkbox-group input[type="checkbox"] {
  accent-color: #ff8f00;
}

/* 7. Seção de Upload */
.modal-content-dark .upload-section {
  padding-bottom: 15px;
  border-bottom: 1px dashed #444;
  margin-bottom: 15px;
}

.modal-content-dark .upload-section label {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 0;
}

.modal-content-dark .upload-controls {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.modal-content-dark .upload-controls input[type="file"] {
  flex: 1;
  color: #eee;
  margin-bottom: 0;
}

.modal-content-dark .upload-controls .upload-btn-modal {
  background: #0288d1;
  /* Azul "Enviar" */
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}

.modal-content-dark .upload-checkbox {
  /* padding-left: 10px;
  background: #1a274a; */
  /* Fundo azul mais escuro */
  /* border-radius: 4px;
  padding: 8px;
  margin-top: 10px; */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: #1a274a;
  border-radius: 4px;
  margin-top: 10px;
}

.modal-content-dark .upload-checkbox input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}


/* 8. Ações Pendentes (Salvar) */
.modal-content-dark .action-btn-salvar {
  background: #4CAF50;
  /* Verde "Salvar" */
  color: white;
  margin-top: 15px;
  padding: 10px 15px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 9. Ações Confirmadas (Devolução) */
.modal-content-dark .refund-section {
  /* background: #1a1a2e; (removido para manter consistência) */
  border-left: 4px solid #ff8f00;
  padding: 15px 15px 15px 10px;
  border-radius: 4px;
}

.modal-content-dark .refund-section p {
  color: #ff8f00;
  /* Título laranja */
  font-weight: bold;
  margin: 0 0 10px 0;
}

.modal-content-dark .refund-section .checkbox-group input[type="checkbox"] {
  accent-color: #ff8f00;
}


/* --- CORREÇÃO DE ALINHAMENTO DO CHECKBOX --- */
.modal-content-dark .checkbox-group {
  display: flex;
  align-items: flex-start;
  /* Alinha pelo topo (corrige desalinhamento) */
  gap: 8px;
  margin-bottom: 10px;
}

.modal-content-dark .checkbox-group input[type="checkbox"] {
  margin-top: 3px;
  /* Desce o checkbox um pouco */
  flex-shrink: 0;
}

.modal-content-dark .checkbox-group label {
  display: flex;
  flex-direction: column;

  margin-bottom: 0;
  line-height: 1.0;
  /* 1.4; */
}

.modal-content-dark .checkbox-group label small {
  /* display: block; */
  margin-top: 3.5px;
  color: #ccc;

}

/* --- FIM DA CORREÇÃO DE ALINHAMENTO --- */

.modal-content-dark .refund-section .refund-all-checkbox {
  padding-left: 10px;
  /* Reduzido o padding */
  background: #1a274a;
  /* Fundo (container devolucoes) */
  border-radius: 4px;
  padding: 8px;
  margin-top: 5px;
}

.modal-content-dark .refund-section .refund-all-checkbox label small {
  color: #bbb;
}

.modal-content-dark .refund-section textarea {
  background: #f0f8ff;
  color: #333;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.modal-content-dark .action-btn-refund {
  background: #ff5722;
  /* Laranja/Vermelho "Registrar" */
  color: white;
  margin-top: 10px;
  padding: 10px 15px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 10. Botão Fechar */
.modal-content-dark .modal-close-btn {
  background: #757575;
  color: white;
  display: block;
  margin: 20px auto 0 auto;
  min-width: 100px;
  font-weight: bold;
  border: none;
}

.modal-content-dark .modal-close-btn:hover {
  background: #616161;
}

/* =================================================== */
/* === ESTILOS PAINEL MEUS CONVITES (admin.php) === */
/* =================================================== */

/* O container (baseado no devolucoes.php) */
.convites-container {
  max-width: 1200px;
  margin: 20px auto;
  background: #16213e;
  /* Cor do .c */
  padding: 20px;
  border-radius: 12px;
}

.convites-container h2 {
  text-align: center;
  color: #ff8f00;
  /* Laranja */
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
}

/* Notificação "Blink" */
@keyframes blink {
  50% {
    opacity: 0.3;
  }
}

.blinking-text {
  animation: blink 1.5s linear infinite;
}

#notificacao-convite {
  padding: 10px;
  background: #ff8f00;
  color: #000;
  font-weight: bold;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 20px;
  cursor: pointer;
}

/* Itens da lista */
#lista-convites {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

#sem-convites {
  color: #888;
  text-align: center;
  padding: 20px;
}

.convite-item {
  background: #1a274a;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #ff8f00;
  /* #0288d1; */
  /* Azul */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* Para telas menores */
  gap: 15px;
}

.convite-item p {
  margin: 0;
  flex: 1 1 300px;
  /* O texto ocupa o espaço principal */
  color: #eee;
}

.convite-item p strong {
  color: #ff8f00;
  /* Laranja */
}

.opcoes-convite input[type="radio"]:checked+label {
  color: #ff8f00;
  /* Cor Laranja */
  font-weight: bold;
}

/* .opcoes-convite {
  display: flex;
  gap: 15px;
  transition: color 0.2s ease-in-out;
}

.opcoes-convite label {
  color: #eee;
  margin-bottom: 0;
  /* Sobrescreve CSS global *
  font-weight: normal;
} */

/* =================================================== */
/* === ESTILO CONVITE (RADIO BUTTON LARANJA v2) === */
/* =================================================== */

/* 1. Esconde o radio button original do navegador */
.opcoes-convite input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 2. Prepara a label (o texto) e adiciona os estilos que você já tinha */
.opcoes-convite label {
  position: relative;
  padding-left: 28px;
  /* Espaço para o botão customizado */
  cursor: pointer;
  line-height: 20px;
  /* Ajuda a alinhar verticalmente */
  display: inline-block;
  color: #eee;
  /* Sua cor original */
  margin-bottom: 0;
  /* Seu estilo original */
  font-weight: normal;
  /* Seu estilo original */
  transition: color 0.2s ease-in-out;
  /* Sua transição original */
}

/* 3. Cria o CÍRCULO EXTERNO (o "botão") */
.opcoes-convite label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  /* Cor do botão desmarcado */
  border-radius: 50%;
  background: #1a274a;
  /* Fundo do botão desmarcado */
  transition: border-color 0.2s ease-in-out;
}

/* 4. Cria o PONTO INTERNO (Laranja) - escondido por padrão */
.opcoes-convite label::after {
  content: '';
  position: absolute;
  left: 5px;
  /* Posição dentro do círculo externo (2px borda + 3px espaço) */
  top: 50%;
  transform: translateY(-50%) scale(0);
  /* Escondido (escala 0) */
  width: 12px;
  /* Tamanho do ponto laranja */
  height: 12px;
  border-radius: 50%;
  background: #ff8f00;
  /* Cor Laranja */
  transition: transform 0.2s ease-in-out;
}

/* 5. QUANDO MARCADO: Muda a cor da borda do botão */
.opcoes-convite input[type="radio"]:checked+label::before {
  border-color: #ff8f00;
  /* Borda Laranja */
}

/* 6. QUANDO MARCADO: Muda a cor da label (texto) - (Sua regra original) */
.opcoes-convite input[type="radio"]:checked+label {
  color: #ff8f00;
  /* Cor Laranja */
  font-weight: bold;
}

/* 7. QUANDO MARCADO: Mostra o ponto interno */
.opcoes-convite input[type="radio"]:checked+label::after {
  transform: translateY(-50%) scale(1);
  /* Mostra (escala 1) */
}

/* 8. Estilo do container (da sua folha original) */
.opcoes-convite {
  display: flex;
  gap: 15px;
}

/* =================================================== */
/* === ESTILO CONVITE (RADIO BUTTON LARANJA v2) === */
/* =================================================== */

.btn-salvar-convite {
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 15px;
  cursor: pointer;
  font-weight: bold;
  margin: 0;
  /* Remove margem do 'button' global */
}

/* =================================================== */
/* === ESTILOS NOTIFICAÇÃO (SININHO ADMIN) === */
/* =================================================== */

/* (O código do #topo, #notification-bell-icon, #notification-badge, 
   #notification-dropdown, h4, #notification-list, #notification-list-empty 
   permanece o mesmo - linhas 948 a 982) */

.material-icons {
  font-family: 'Material Icons' !important;
  /* Força o uso da fonte CLÁSSICA */
  font-weight: normal;
  font-style: normal;
  font-size: 28px;
  /* Tamanho bom para sino */
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  color: #fff;
  /* Cor do sino no cabeçalho */
  /* Outros ajustes de compatibilidade */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

#topo #notification-bell-container {
  position: relative;
  display: inline-block;
  margin: 0 15px;
  cursor: pointer;
  color: #fff;
}

#notification-bell-icon {
  font-size: 28px;
  color: #eee;
  cursor: pointer;
  vertical-align: middle;
  transition: color 0.2s;
}

#notification-bell-icon:hover {
  color: #ff8f00;
}

#notification-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  background-color: #f44336;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  display: none;
  border: 1px solid #1a1a2e;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1;
  font-weight: bold;
  min-width: 10px;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

/* --- ESTILIZAÇÃO DAS NOTIFICAÇÕES (MENU) --- */
#notification-dropdown {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  width: 350px;
  max-height: 400px;
  overflow-y: auto;
  background: #16213e;
  /* Fundo base escuro */
  border: 1px solid #ff8f00;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 1020;
}

/* Título Centralizado */
#notification-dropdown h4 {
  color: #ff8f00;
  padding: 15px 10px;
  margin: 0;
  border-bottom: 1px solid #444;
  text-align: center;
  /* <--- CENTRALIZA "NOTIFICAÇÕES" */
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#notification-list {
  display: flex;
  flex-direction: column;
}

#notification-list-empty {
  color: #888;
  padding: 20px;
  text-align: center;
}

/* Garante o estilo base para os ícones Material Symbols */
.material-symbols-outlined {
  font-family: 'Material Icons' !important;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

/* --- INÍCIO DA CORREÇÃO DE ESTILO (LIDA vs NÃO LIDA) --- */
/* --- ITEM LIDO (Acinzentado/Apagado) --- */
/* Notificação LIDA (Padrão) */
.notification-item {
  padding: 15px;
  border-bottom: 1px solid #2c3e50;
  background: #16213e;
  /* Fundo escuro igual ao container */
  color: #7f8c8d;
  /* Texto Cinza (apagado) */
  text-decoration: none;
  display: block;
  font-size: 13px;
  line-height: 1.4;
  transition: all 0.2s ease;
  opacity: 0.8;
}

.notification-item:hover {
  background: #1a2542;
  /* Leve destaque ao passar o mouse */
  color: #aab7b8;
  opacity: 1;
}

.notification-item small {
  display: block;
  font-size: 11px;
  color: #555;
  /* Data bem escura */
  margin-top: 5px;
  font-weight: normal;
}

/* Notificação NÃO LIDA */
.notification-item.unread {
  background: #253350;
  /* Fundo Azul mais claro que o container */
  color: #ffffff !important;
  /* Texto Branco Brilhante */
  font-weight: bold;
  border-left: 4px solid #ff8f00;
  /* Tarja Laranja na esquerda */
  opacity: 1;
}

.notification-item.unread:hover {
  background: #2d3b5a;
  /* Ainda mais claro no hover */
}

.notification-item.unread small {
  color: #ccc;
  /* Data visível */
}

/* --- FIM DA CORREÇÃO DE ESTILO --- */

/* CSS para o alerta de 'sem comprovante' (AGORA: Material Symbols Outlined) */
.number-cell .buyer-name .receipt-alert {
  display: block;
  /* Centraliza horizontalmente o ícone (opcional, mas recomendado) */
  margin: 4px auto 0;
  /**/
  font-family: 'Material Icons' !important;
  /* <<< MUDANÇA: Novo nome da fonte */
  font-size: 24px;
  /* Tamanho ligeiramente maior para melhor visibilidade */
  font-weight: 400;
  /* Peso da fonte */
  color: #E65100;
  /* Cor Laranja */
  z-index: 1;
  /* Garante que o clipe fique na camada de baixo */

  /* margin-left: 4px; */
  /* position: relative; */
  /* top: 3px; */
  /* Ajuste vertical para melhor alinhamento */
  cursor: help;
  font-style: normal;
  /* Garante que não está em itálico */
  text-shadow: none;

  /* Configurações específicas para Material Symbols */
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.number-cell .buyer-name .receipt-alert::after {
  /* Usa o conteúdo do ícone 'warning' do Material Icons */
  content: "warning";
  font-family: 'Material Icons' !important;

  /* Posicionamento sobreposto no canto */
  position: absolute;
  top: -4px;
  /* Puxa para cima do clipe */
  right: -4px;
  /* Puxa para a direita do clipe */

  /* Estilos do Aviso */
  font-size: 14px;
  /* Tamanho menor para o aviso */
  color: #c0392b;
  /* Vermelho forte para indicar alerta */
  background: white;
  /* Fundo branco para garantir contraste total */
  border-radius: 50%;
  /* Faz com que o aviso fique em um círculo branco */
  padding: 1px;
  line-height: 1;
  /* Garante alinhamento vertical */
  z-index: 2;
  /* Fica por cima do clipe */
}

/* Para cotas pendentes (amarelas), o ícone fica mais escuro */
.number-cell.unpaid .buyer-name .receipt-alert {
  color: #FF9800;
  /* Laranja mais escuro */
}

/* .receipt-alert {
  align-items: center;
  align-self: center;
} */

.number-cell .buyer-name {
  display: block;
  /* Garante que o nome também seja um bloco e o ícone vá para baixo */
  margin: 0;
  padding: 0;
}

/* --- Estilos para Radio Buttons de Agrupamento de Comprovante no Modal --- */

/* 1. Alinha o Radio Button e a Label lado a lado e centraliza verticalmente */
.radio-group-upload {
  color: #ccc !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.radio-group-upload label {
  color: #ccc !important;

}

/* 2. Corrige a cor do TÍTULO (Aplicar este comprovante a:) */
/* Aumenta a especificidade com o seletor principal do modal */
.number-modal-content .upload-grouping-options .grouping-title {
  color: #ccc !important;
  /* <<< FORÇA A COR CLARA E AUMENTA A PRIORIDADE */
  font-weight: bold;
  font-size: 0.9em;
  margin-bottom: 10px;
}

.upload-grouping-options label {
  color: #ccc !important;
  /* <<< FORÇA A COR CLARA E AUMENTA A PRIORIDADE */
  font-weight: normal;
  /* bold; */
  font-size: 0.9em;
  margin-bottom: 10px;
}

.upload-section-admin label {
  font-weight: normal;
  /* bold; */
  color: #ccc;
  font-size: 14px;
  margin-bottom: 0;
  /* Correção para alinhamento */
}

/* 3. Corrige a cor do TEXTO das LABELS */
/* Aumenta a especificidade com o seletor principal do modal */
.number-modal-content .radio-group-upload label {
  color: #eee !important;
  /* <<< FORÇA A COR CLARA E AUMENTA A PRIORIDADE */
  font-weight: normal;
  cursor: pointer;
  margin: 0;
  display: inline;
}

/* Aplicamos o seletor mais específico e absoluto (white) */
.number-modal-content .upload-grouping-options .radio-group-upload label {
  color: white !important;
  /* <<< FORÇA MÁXIMA PARA A COR BRANCA */
  font-weight: normal;
  cursor: pointer;
  margin: 0;
  display: inline;
}

/* Regra de fallback (se o texto não for label ou title, ainda será branco) */
.number-modal-content .upload-grouping-options {
  color: white !important;
}

/* Ajuste do input em si (não deve afetar a cor do texto) */
.radio-group-upload input[type="radio"] {
  accent-color: #ff8f00;
  min-width: 16px;
  height: 16px;
}

/* Remover comprovante */
.remove-receipt-link {
  color: #f44336;
  /* Vermelho */
  cursor: pointer;
  font-size: 0.9em;
  margin-left: 8px;
}

.remove-receipt-link:hover {
  text-decoration: underline;
}

/* --- Estilização do Botão de Arquivo (Input File) no Modal Escuro --- */
.modal-content-dark input[type="file"] {
  background: rgba(255, 255, 255, 0.05);
  /* Fundo sutil na área do input */
  border: 1px solid #444;
  border-radius: 4px;
  padding: 5px;
  color: #ccc;
  /* Cor do texto "Nenhum arquivo..." */
  width: 100%;
  /* Ocupa a largura disponível */
  box-sizing: border-box;
}

/* Estiliza o botão "Escolher Arquivo" especificamente */
.modal-content-dark input[type="file"]::file-selector-button {
  background-color: #0288d1;
  /* Azul para combinar com o botão "Enviar" ao lado */
  /* OU use #ff9800 se preferir Laranja */
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  margin-right: 10px;
  transition: background 0.2s ease;
}

.modal-content-dark input[type="file"]::file-selector-button:hover {
  filter: brightness(110%);
}

/* --- Estilos do Modal PIX (Dark Theme) --- */

.pix-summary-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  text-align: left;
}

.pix-value {
  font-size: 1.4em;
  font-weight: bold;
  margin: 0 0 10px 0;
  text-align: center;
  border-bottom: 1px dashed #555;
  padding-bottom: 10px;
}

.pix-details p {
  margin: 5px 0;
  font-size: 0.95em;
  color: #ccc;
}

.pix-promoter {
  margin-top: 10px;
  font-size: 0.9em;
  color: #aaa;
  text-align: center;
}

/* Container do QR Code */
.qr-code-wrapper {
  background: white;
  /*padding: 5px;*/
  border-radius: 8px;
  display: inline-block;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.qr-code-wrapper img {
  width: 200px;
  height: 200px;
  display: block;
}

/* Campo Copia e Cola */
.copy-paste-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.copy-paste-wrapper input {
  background: #1a274a;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
  padding: 0 10px;
  font-family: monospace;
  margin-bottom: 0;
  /* Reset */
}

.copy-paste-wrapper .btn-copy {
  background: #FF9800;
  /* Laranja */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  /* Reset */
}

.copy-paste-wrapper .btn-copy:hover {
  background: #F57C00;
}

/* Status Aguardando */
.pix-waiting-status {
  color: #FFC107;
  /* Amarelo */
  font-weight: bold;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 193, 7, 0.1);
  padding: 10px;
  border-radius: 4px;
  
  /* ---INSERIR AQUI O MESMO TRATAMENTO DOS OUTROS MODAIS --- */
  
  
  
  
}

/* Animação de rotação para o ícone de sync */
.spinning {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* SISTEMA DE MODAIS */
#sys-alert-modal,
#sys-confirm-modal {
  background-color: rgba(0, 0, 0, 0.85);
  /* Fundo bem escuro */
  backdrop-filter: blur(4px);
  /* Efeito de desfoque moderno */
}

#sys-alert-modal .modal-content,
#sys-confirm-modal .modal-content {
  animation: modalPop 0.3s ease-out;
  border-radius: 8px;

  /* --- CORREÇÃO DO PULO (BUG FIX) --- */
  /* Remove o posicionamento fixo herdado e deixa o Flexbox centralizar */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none;
  /* Limpa conflitos de transformação para a animação rodar lisa */
  margin: 0 !important;
}

@keyframes modalPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#sys-alert-btn:hover,
#sys-confirm-btn-yes:hover,
#sys-confirm-btn-no:hover {
  filter: brightness(110%);
  transform: translateY(-1px);
}

/* --- DIMENSÕES DO MODAL PIX (Igual ao Admin) --- */

/*#pix-display-modal .modal-content {
  /* Espaçamento interno generoso igual ao Admin */
  /*padding: 30px 30px;

  /* Garante que ele use a largura definida no HTML (600px) */
  /*width: 90%;

  /* Centralização na tela */
  /*position: fixed;
  /* ou relative se estiver usando o sistema flex do JS */
  /*max-height: 95vh !important;
  /*height: auto;
  /*overflow-y: auto;
  */
  /* Altura ajustável, mas com limite */
/* =========================================================== */
/* === CORREÇÃO FINAL V3: MODAL PIX (EXPANDIDO) === */
/* =========================================================== */

#pix-display-modal .modal-content {
   height: auto !important;
    /*min-height: 550px !important; /* <--- FORÇA A ALTURA MÍNIMA AQUI */
    max-height: 95vh !important;
    width: 95% !important;
    max-width: 600px !important;
    
    /* Centralização Flex Interna */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    
    /* Centralização na Tela */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    align-self: center !important;
    margin: 0 auto !important;
    
    padding: 20px !important;
    
    /* Visual */
    background-color: #16213e !important;
    border: 1px solid #ff8f00 !important;
    box-shadow: 0 4px 20px rgba(255, 143, 0, 0.6) !important;
    color: #eee !important;
    overflow-y: auto;
}

/* Garante que o QR Code tenha espaço para respirar */
#pix-display-modal .qr-code-wrapper {
    margin: 15px auto !important;
    padding: 15px !important;
    background: white;
    border-radius: 8px;
    display: inline-block; /* Garante que o box branco envolva a imagem */
    max-height: 40vh; /* Limita a imagem em telas pequenas */
    width: auto;
}

/* LIBERA A LARGURA DOS ELEMENTOS INTERNOS */
/* Isso fará com que a caixa de resumo e o input "copia e cola" ocupem 100% da largura */
#pix-display-modal .pix-summary-box,
#pix-display-modal .copy-paste-wrapper,
#pix-display-modal button,
#pix-display-modal .pix-waiting-status {
  width: 100%;
  max-width: 100%;
  /* Remove a trava de 400px anterior */
  box-sizing: border-box;
  /* Garante que o padding não estoure a largura */
  margin-left: 0;
  margin-right: 0;
}

/* Exceção: O QR Code não deve esticar, deve ficar centralizado */
/*#pix-display-modal .qr-code-wrapper {
  display: inline-block;
  /* Mantém o tamanho natural do QR Code */
  /*margin: 10px auto;
  padding: 15px;
  background: white;
  border-radius: 8px;
  
  max-height: 35vh;                  /* Limita altura da imagem para caber em telas pequenas */
  /*  width: auto;
    object-fit: contain;
}*/

#pix-display-modal .qr-code-wrapper img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/* O Input: Cresce para ocupar todo o espaço disponível */
#pix-display-modal .copy-paste-wrapper input {
  flex: 1 !important;
  /* A mágica acontece aqui: ocupa o espaço livre */
  width: auto !important;
  /* Reseta largura fixa */
  margin: 0 !important;
  /* Remove margens externas */
  border-radius: 4px;
  /* Garante o visual */
}

/* O Botão Copiar: Ocupa apenas o tamanho necessário */
#pix-display-modal .copy-paste-wrapper button {
  width: auto !important;
  /* SOBRESCREVE o 100% global do modal */
  flex: 0 0 auto;
  /* Impede que o botão estique ou encolha demais */
  min-width: 100px;
  /* Tamanho mínimo elegante */
  margin: 0 !important;
  /* Remove margem */
  display: flex;
  /* Para alinhar ícone e texto */
  align-items: center;
  justify-content: center;
}

/* Remove o botão "X" do topo do Modal PIX */
#pix-display-modal .close-modal {
  display: none !important;
}

/* --- Notificação no Card da Rifa (Dashboard) --- */
.raffle-card {
  position: relative; /* Necessário para o posicionamento absoluto do badge */
}

.card-notification-badge {
  position: absolute;
  bottom: 20px;
  right: 50%;
  background-color: rgba(22, 33, 62, 0.9); /* Fundo escuro semi-transparente */
  color: #ff8f00; /* Sino Laranja */
  border-radius: 30px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  border: 1px solid #ff8f00;
  z-index: 10;
  animation: bounceIn 0.5s ease-out;
}

.card-notification-badge .material-icons {
  font-size: 20px;
  animation: swing 2s ease-in-out infinite; /* O sino balança! */
}

.card-notification-badge .badge-count {
  background-color: #f44336; /* Bolinha Vermelha */
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 50%;
  min-width: 14px;
  text-align: center;
  line-height: 1;
}

/* Animação do Sino Balançando */
@keyframes swing {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
}

@keyframes bounceIn {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* --- BARRA DE TEMPO DE RESERVA (Sticky Footer) --- */
.timer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #16213e; /* Azul escuro */
  border-top: 3px solid #FF9800; /* Laranja */
  color: white;
  padding: 15px 0;
  z-index: 10000; /* Acima de tudo */
  transform: translateY(100%); /* Escondido para baixo */
  transition: transform 0.3s ease-in-out;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

.timer-bar.visible {
  transform: translateY(0); /* Aparece */
}

.timer-bar .timer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.1em;
}

.timer-bar strong {
  font-family: monospace;
  font-size: 1.3em;
  color: #FF9800;
}

/* Quando faltar menos de 2 minutos, fica vermelho */
.timer-bar.urgent {
  border-top-color: #f44336;
}
.timer-bar.urgent strong {
  color: #f44336;
  animation: pulse-text 1s infinite;
}

@keyframes pulse-text {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* --- TIMER DENTRO DO MODAL PIX --- */
.pix-expiry-timer {
  margin-top: 10px;
  font-size: 0.9em;
  color: #ccc;
  text-align: center;
}
.pix-expiry-timer span {
  color: #ff8f00;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.1em;
}

/* --- Barra de Progresso de Vendas --- */
.stats-progress-container {
  width: 100%;
  background-color: #e0e0e0; /* Fundo cinza da barra vazia */
  border-radius: 10px;       /* Bordas arredondadas */
  height: 8px;               /* Altura da barra */
  margin-top: 8px;           /* Espaço entre o texto e a barra */
  overflow: hidden;          /* Garante que o conteúdo respeite a borda redonda */
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* Profundidade sutil */
}

.stats-progress-bar {
  height: 100%;
  width: 0%; 
  border-radius: 10px;
  
  /* Cor inicial (será sobrescrita pelo JS) */
  background-color: #f44336; 
  
  /* Adicionamos 'background-color' na transição para a cor mudar suavemente */
  transition: width 0.6s ease-in-out, background-color 0.6s ease-in-out;
}

/* =========================================================== */
/* === MODAL CRIAR RIFA (Padrão Promotor) === */
/* =========================================================== */

#create-raffle-modal .modal-content {
  /* 1. Centralização Fixa (Igual ao Promotor) */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* 2. Dimensões Controladas */
  width: 90%;
  max-width: 600px;   /* Largura padrão */
  
  /* 3. Altura Inteligente */
  height: 95vh;       /* Cresce com o conteúdo */
  max-height: 95vh;   /* Trava em 90% da altura da tela */
  overflow-y: auto;   /* Cria rolagem se os campos não couberem */
  
  /* 4. Visual (Baseado na sua imagem: Fundo Azul Escuro) */
  background: #16213e; 
  color: white;
  border: 1px solid #ff8f00; /*#444;*/
  border-radius: 8px;
  padding: 25px;
  /*box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);*/
  box-shadow: 0 4px 15px rgba(255, 143, 0, 0.5);
  box-sizing: border-box;
  scrollbar-color: #ff8f00 rgba(255, 143, 0, 0.5);
}

/* Ajuste para os títulos dentro dele ficarem brancos/laranja */
#create-raffle-modal .modal-content h1 {
  color: #FFC107; /* Título Amarelo/Laranja */
  margin-top: 0;
  border-bottom: 1px solid #444;
  padding-bottom: 15px;
  text-align:center;
}

/* Garante que as labels sejam brancas para ler no fundo azul */
#create-raffle-modal .modal-content label {
  color: #eee;
}

#create-raffle-modal .raffle-numbers-wrapper {
  border: 2px solid #FF8F00;       /* Moldura laranja */
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  /*background: transparent; /*rgba(255, 143, 0, 0.05); /* Fundo suave */
  /* Remove qualquer fundo aplicado */
  background: none;

  /* Herda o fundo do modal (azul escuro) e mantém o estilo limpo */
  box-shadow: 0 0 0 transparent;

}

/* O Container (Mantém sua moldura e estilo) */
#create-raffle-modal .button-container {
  display: flex;               /* Força linha */
  align-items: center;         /* Centraliza verticalmente na linha */
  justify-content: center;     /* Centraliza horizontalmente no container */
  gap: 15px;                   /* Espaço exato entre os botões */
  
  /* Garante que não tenha margens estranhas herdadas */
  padding: 25px;               /* Aumenta o espaço interno (altura da moldura) */
  margin-top: 20px;
  flex-wrap: nowrap;           /* Impede que um botão caia para baixo */
  border: 2px solid #FF8F00;   /* Moldura laranja */
  border-radius: 6px;          /* Deixa a moldura arredondada */
  /*background: rgba(255, 143, 0, 0.1); /* Fundo suave dentro da moldura */

}

/* Os Botões (Força tamanhos iguais) */
#create-raffle-modal .button-container button {
  margin: 0;                   /* Remove margens externas individuais */
  height: 40px;                /* Altura fixa igual para ambos */
  min-width: 120px;            /* Largura mínima igual */
  
  /* Garante que o texto fique no meio */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botão "Criar Rifa" (Verde) */
button[onclick="confirmCreateRaffle()"] {
  background: #4CAF50; /* Verde */
  color: white;
}

/* Botão "Cancelar" (Vermelho/Laranja - já definido, mas reforçando) */
button[onclick="closeCreateRaffleModal()"] {
  background: #f44336; /* Vermelho */
  color: white;
}

/* ======== 26/112025 ======== */

/* =========================================================== */
/* Modal de Sucesso (Pagamento Confirmado)
/* =========================================================== */
.modal-success-compact {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 30px !important;
    align-self: center !important;
}

/* =========================================================== */
/* === UTILITÁRIO ADMIN: MODAL COMPACTO === */
/* =========================================================== */
.modal-compact {
    height: auto !important;           /* Remove a altura fixa */
    max-height: 85vh !important;       /* Trava de segurança */
    padding-bottom: 25px !important;
    
    /* Garante centralização perfeita (Reset total de posição) */
    position: relative !important;     /* Volta ao fluxo normal */
    top: auto !important;              /* Remove top: 50% */
    left: auto !important;             /* <--- O ERRO ERA A FALTA DISSO (Remove left: 50%) */
    transform: none !important;        /* Remove a translação antiga */
    
    align-self: center !important;     /* Centraliza verticalmente no Flexbox */
    margin: 0 auto !important;         /* Centraliza horizontalmente */
}

/* =========================================================== */
/* === MODAL COMPACTO EXCLUSIVO DO CLIENTE (Visual + Layout) === */
/* =========================================================== */

.modal-client-compact {
    /* 1. VISUAL (Cópia idêntica do Admin: Azul + Laranja) */
    background-color: #16213e !important;
    border: 1px solid #ff8f00 !important;       /* A Borda Laranja */
    box-shadow: 0 4px 15px rgba(255, 143, 0, 0.5) !important; /* O Brilho */
    color: #eee !important;

    /* 2. TAMANHO (Ajuste Automático para não ficar vazio) */
    height: auto !important;           
    max-height: 85vh !important;       
    padding-bottom: 25px !important;
    width: 90%;
    max-width: 600px;
    box-sizing: border-box;

    /* 3. POSICIONAMENTO (Centralização Flex) */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    align-self: center !important;
    
    /* 4. SCROLLBAR (Laranja) */
    overflow-y: auto;
    scrollbar-color: #ff8f00 rgba(255, 143, 0, 0.2) !important;
    scrollbar-width: thin;
}

/* Scrollbar Webkit */
.modal-client-compact::-webkit-scrollbar { width: 8px; }
.modal-client-compact::-webkit-scrollbar-track { background: rgba(22, 33, 62, 0.5); }
.modal-client-compact::-webkit-scrollbar-thumb { background-color: #ff8f00; border-radius: 4px; }

/* 5. INPUTS (Garante legibilidade dentro deste modal específico) */
.modal-client-compact input[type="text"],
.modal-client-compact input[type="email"],
.modal-client-compact input[type="tel"],
.modal-client-compact input[type="password"] {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    height: 40px;
    border-radius: 4px;
    padding: 10px;
    width: 100%;
}

/* =========================================================== */
/* === CORREÇÃO DE ALTURA: MODAIS DE SISTEMA E PIX === */
/* =========================================================== */

/* Força altura automática (compacta) para os modais estáticos */
/* O uso de IDs (#) garante prioridade sobre a classe .modal-content-dark */

#sys-alert-modal .modal-content,
#sys-confirm-modal .modal-content,
#pix-checkout-modal .modal-content {
    height: auto !important;           /* Remove a altura de 95vh */
    min-height: 0 !important;          /* Remove altura mínima se houver */
    max-height: 90vh !important;       /* Limite de segurança */
    
    /* Centralização perfeita */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    align-self: center !important;     /* Centraliza no Flexbox do pai */
    
    padding-bottom: 25px !important;   /* Espaço visual no fundo */
    
    /* Garante o visual Dark/Laranja (caso tenha se perdido) */
    background-color: #16213e !important;
    border: 1px solid #ff8f00 !important;
    box-shadow: 0 4px 15px rgba(255, 143, 0, 0.5) !important;
    color: #eee !important;
}

/* Ajuste específico para o modal de Checkout (CPF) para não ficar largo demais */
#pix-checkout-modal .modal-content {
    max-width: 450px !important;
}

/* Ajuste específico para o modal de Alerta (Processando/Ok) para ficar bem pequeno */
#sys-alert-modal .modal-content,
#sys-confirm-modal .modal-content {
    max-width: 400px !important;
    padding: 30px 20px !important;
    text-align: center !important;
}


/* =========================================================== */
/* === ESTILOS GLOBAIS: CAMPO DE SENHA COM OLHO === */
/* =========================================================== */

.password-input-group {
    position: relative;
    height: 40px;
    display: flex;
    flex: 1; /* Faz o grupo ocupar todo o espaço restante na linha */
}

/* Garante que o input dentro do grupo ocupe 100% */
.password-input-group input {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-right: 40px !important; /* Espaço para o ícone não cobrir texto */
}

/* Botão do Olho */
.password-toggle-btn {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 38px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 4px 4px 0;
    outline: none;
}

/* Ícone Laranja */
.password-toggle-btn .material-icons {
    color: #ff8f00 !important;
    font-size: 24px;
    line-height: 1;
}

/* Efeito de clique */
.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.95) !important;
}

/* Oculta ícones nativos do navegador */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-webkit-reveal,
input[type="password"]::-webkit-clear-button { display: none !important; -webkit-appearance: none; }

/* =========================================================== */
/* === LAYOUT GRID PARA O PERFIL (Igual ao Register) === */
/* =========================================================== */

/* =========================================================== */
/* === LAYOUT GRID PERFIL (Estilo Register.html) === */
/* =========================================================== */

/* Container do Grid */
.profile-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    gap: 15px;                      /* Espaço entre os campos */
    margin-bottom: 15px;
}

/* Item que ocupa a linha inteira (Nome, Email, Rua) */
.profile-span-full {
    grid-column: 1 / -1;
}

/* Garante que o Label fique em cima do Input (Visual Register) */
#profile-modal .form-group {
    display: flex !important;
    flex-direction: column !important; /* Empilha Label e Input */
    align-items: flex-start !important;
    margin-bottom: 0 !important; /* O gap do grid cuida do espaço */
}

/* Estilo do Label */
#profile-modal label {
    text-align: left !important;
    width: 100% !important;
    margin-bottom: 5px !important;
    font-weight: bold;
    color: #ffffff !important; 
    min-width: auto !important;
    display: block !important;
}

/* Estilo do Input */
#profile-modal input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsividade: Em celulares, tudo vira 1 coluna */
@media (max-width: 600px) {
    .profile-grid-layout {
        grid-template-columns: 1fr;
    }
}


/* =========================================================== */
/* === UNIFICAÇÃO: ESTILOS DO REGISTRO (USADOS NO PERFIL) === */
/* =========================================================== */

/* 1. Layout de Grid do Formulário */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.full-width {
    grid-column: 1 / -1;
}

/* 2. Visual dos Inputs (Idêntico ao Register) */
.modal-content-dark input[type="text"],
.modal-content-dark input[type="email"],
.modal-content-dark input[type="tel"],
.modal-content-dark input[type="password"] {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    height: 40px !important;
    border-radius: 4px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Inputs somente leitura (ex: Rua carregada pelo CEP) */
.modal-content-dark input[readonly] {
    background-color: #333 !important;
    color: #ccc !important;
    cursor: not-allowed;
    border-color: #444 !important;
}

/* Erro de validação */
.input-error {
    border: 2px solid #f44336 !important;
    box-shadow: 0 0 5px rgba(244, 67, 54, 0.7);
}

/* 3. Barra de Força da Senha */
#profile-password-strength-container {
    width: 100%;
    height: 6px;
    background: transparent;
    border-radius: 0 0 4px 4px;
    margin-top: -2px; /* Cola no input */
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}

#profile-password-strength-bar {
    height: 100%;
    width: 0;
    transition: width 0.3s ease, background-color 0.3s ease;
}

#profile-password-strength-text {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: -18px; /* Ajuste visual */
    right: 0;
}

/* 4. Lista de Dicas de Senha */
#profile-password-tips {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 5px 0 15px 0;
    list-style: none;
    font-size: 12px;
    color: #bbb;
}

#profile-password-tips li {
    width: 50%;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}

#profile-password-tips li .material-icons {
    font-size: 14px;
    color: #bbb;
    background: #444; /* Fundo bolinha */
    border-radius: 50%;
}

#profile-password-tips li.valid {
    color: #4CAF50;
}

#profile-password-tips li.valid .material-icons {
    background: #4CAF50;
    color: white;
}

/* Responsividade do Grid */
@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================== */
/* === CORREÇÃO FINAL: CAMPOS DE SENHA E MÁSCARAS === */
/* =========================================================== */

/* 1. Trava o grupo de senha para não esticar */
#profile-modal .password-input-group {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Ajusta o input para dar espaço ao olho */
#profile-modal .password-input-group input {
    width: 100% !important;
    padding-right: 45px !important; /* Espaço para o ícone não cobrir o texto */
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 3. Posiciona o botão do olho de forma absoluta e fixa */
#profile-modal .password-toggle-btn {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important; /* Ocupa toda a altura do input */
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    z-index: 5 !important;
}

/* 4. Remove qualquer margem extra que faça a caixa pular */
#profile-modal .form-group {
    overflow: visible !important; /* Garante que sombras não cortem */
}

/* =========================================================== */
/* === CORREÇÃO FINAL: OLHO DA SENHA E BOTÕES DO PERFIL === */
/* =========================================================== */

/* 1. CORREÇÃO DO OLHO (Fixar dentro da caixa) */
#profile-modal .password-input-group {
    display: block !important;       /* Remove comportamento flex que empurra o botão */
    position: relative !important;   /* Cria o contexto para o botão absoluto */
    width: 100% !important;
}

#profile-modal .password-input-group input {
    width: 100% !important;
    padding-right: 45px !important;  /* Espaço interno para o texto não ficar embaixo do olho */
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

#profile-modal .password-toggle-btn {
    position: absolute !important;   /* Fixa a posição */
    top: 0 !important;
    right: 0 !important;
    height: 40px !important;         /* Mesma altura do input */
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    z-index: 5 !important;
    transform: none !important;      /* Remove transforms que podem deslocar o ícone */
}

/* 2. CORREÇÃO DOS BOTÕES (Remover a moldura quebrada) */
/* 2. CORREÇÃO DOS BOTÕES (Restaurar a moldura completa e corrigida) */
#profile-modal .button-container {
    /* Restaura o visual de caixa */
    background: rgba(255, 255, 255, 0.05) !important; /* Fundo sutil */
    border: 1px solid #ff8f00 !important; /* Borda Laranja COMPLETA (4 lados) */
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    
    /* Remove a borda superior de separação antiga para não duplicar */
    border-top: 1px solid #ff8f00 !important; 
    
    /* Espaçamento e alinhamento */
    padding: 20px !important;
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    
    /* Garante que a caixa não estoure a largura */
    width: auto !important;
    box-sizing: border-box !important;
}


/* =========================================================== */
/* === AJUSTE DO BOTÃO VOLTAR AO TOPO (MOBILE) === */
/* =========================================================== */


/* =========================================================== */
/* === AJUSTES DE RESPONSIVIDADE (CELULAR, FOLD, TABLET) === */
/* =========================================================== */

/* =========================================================== */
/* === RESPONSIVIDADE AVANÇADA E ANIMAÇÕES (FINAL) === */
/* =========================================================== */

/* 1. COMPORTAMENTO BASE (Desktop > 1024px) */
.topo {
    /* Estado ESCONDIDO */
    right: -80px !important; 
    bottom: 20px !important; /* Altura Fixa Desktop */
    width: 50px !important;
    height: 50px !important;
    
    /* Animação apenas lateral */
    transition: right 0.4s ease-in-out !important;
    
    opacity: 1 !important;
    visibility: visible !important;
}

/* Estado VISÍVEL (Desktop) */
.show-button .topo {
    right: 20px !important; 
    bottom: 20px !important; /* Mantém igual para não pular */
}

/* 2. REGRAS PARA TABLETS E Z-FOLD (Até 1024px) */
@media (max-width: 1024px) {
    .topo {
        /* Estado ESCONDIDO (Mobile/Tablet) */
        width: 35px !important;
        height: 35px !important;
        right: -60px !important; 
        bottom: 10px !important; /* Altura Fixa Mobile (Mais baixa) */
    }

    .topo svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Estado VISÍVEL (Mobile/Tablet) */
    .show-button .topo {
        right: 10px !important;
        bottom: 10px !important; /* Sincronizado com o estado escondido */
    }
}

/* 3. AJUSTE FINO DO GRID (Tablets e Fold Aberto: 601px a 1024px) */
/* Mantém 10 colunas, mas ajusta o espaçamento para não quebrar */
@media (max-width: 1024px) and (min-width: 601px) {
    .numbers-grid {
        gap: 6px !important;
    }
}

/* 4. REGRAS PARA CELULARES PADRÃO (Até 600px) */
@media (max-width: 600px) {
    /* Ajuste fino da posição lateral no celular (bem no canto) */
    .show-button .topo {
        right: 5px !important; 
    }
    
    /* GRID: 9 Colunas (Otimizado para celulares modernos) */
    .numbers-grid {
        grid-template-columns: repeat(9, 1fr) !important; 
        gap: 4px !important; 
    }

    .number-cell {
        padding: 5px !important;
        font-size: 12px !important; 
        min-height: 35px;
    }
}

/* 5. CELULARES PEQUENOS / Z-FOLD FECHADO (Abaixo de 400px) */
/* Reduz para 5 colunas para garantir o clique correto */
@media (max-width: 400px) {
    .numbers-grid {
        grid-template-columns: repeat(5, 1fr) !important; 
    }
    
    /* Aumenta um pouco a fonte já que os quadrados ficaram maiores */
    .number-cell {
        font-size: 14px !important;
    }
}

/* =========================================================== */
/* === CORREÇÃO FINAL V2: SENHAS NO ADMIN === */
/* =========================================================== */

/* 1. Garante que o input tenha espaço para o olho e altura correta */
#promoter-panel .password-input-group input {
    width: 100% !important;
    padding-right: 45px !important;
    margin-bottom: 0 !important;
    height: 40px !important; /* Altura padrão confortável */
    box-sizing: border-box !important;
}

/* 2. Posiciona o botão (olho) no canto direito absoluto */
#promoter-panel .password-toggle-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 40px !important; /* Mesma altura do input */
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    z-index: 10 !important;
    cursor: pointer !important;
    transform: none !important; /* Remove qualquer deslocamento herdado */
}

/* 3. Estilo da Barra de Força (Admin) */
#admin-password-strength-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 4px 4px;
    margin-top: -2px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}

#admin-password-strength-bar {
    height: 100%;
    width: 0;
    transition: width 0.3s ease, background-color 0.3s ease;
}

#admin-password-strength-text {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: -18px;
    right: 0;
}

/* 4. Lista de Dicas */
#admin-password-tips {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 5px 0 15px 0;
    list-style: none;
    font-size: 12px;
    color: #bbb;
}

#admin-password-tips li {
    width: 50%;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}

#admin-password-tips li .material-icons {
    font-size: 14px;
    color: #bbb;
    background: #444;
    border-radius: 50%;
}

#admin-password-tips li.valid { color: #4CAF50; }
#admin-password-tips li.valid .material-icons { background: #4CAF50; color: white; }

/* =========================================================== */
/* === PADRONIZAÇÃO DE ALTURA DOS CAMPOS (ADMIN) === */
/* =========================================================== */

/* 1. Força TODOS os tipos de input a terem a mesma altura (40px) */
#promoter-panel input[type="text"],
#promoter-panel input[type="tel"],
#promoter-panel input[type="email"],
#promoter-panel input[type="password"],
#promoter-panel input[type="url"],     /* Corrige o campo do Drive */
#promoter-panel select {
    height: 30px !important;           /* Altura unificada */
    padding: 10px !important;          /* Espaçamento interno confortável */
    font-size: 14px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;       /* O espaçamento é controlado pelo form-group */
    border-radius: 4px;
}

/* 2. Remove regra antiga quebrada que esmagava o campo de URL */
#image-base-url-group input[type="url"],
#gdrive-link-group input[type="url"] {
    height: 30px !important;
}

/* 3. Garante que o botão 'Olho' acompanhe a altura exata */
#promoter-panel .password-toggle-btn {
    height: 30px !important;
    width: 40px !important;
    top: 0 !important;
}

/* =========================================================== */
/* === CORREÇÃO FINAL: TAMANHO DOS CAMPOS DE URL (TRAVA) === */
/* =========================================================== */

#image-base-url, 
#gdrive-link {
    /* Força altura exata de 40px */
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    
    /* Garante que o padding não aumente o tamanho */
    box-sizing: border-box !important;
    padding: 10px !important;
    
    /* Previne que o Flexbox estique o campo verticalmente */
    flex: none !important; 
    
    /* Garante largura total */
    width: 100% !important;
    
    /* Remove margens estranhas */
    margin-bottom: 0 !important;
}

/* Ajuste fino para o texto de ajuda não colar no campo */
#image-base-url-group small {
    margin-top: 5px !important;
}

/* =========================================================== */
/* === CARD DE RIFA VENCIDA PELO USUÁRIO (DASHBOARD) === */
/* =========================================================== */

.raffle-card.user-winner-card {
    border: 2px solid #FFD700 !important; /* Borda Dourada */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    transform: scale(1.02);
    position: relative;
    overflow: hidden;
}

.winner-ribbon {
    background: linear-gradient(90deg, #FFC107, #FF9800);
    color: #16213e;
    font-weight: 900;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    animation: glow-text 2s infinite;
}

.winner-ribbon .material-icons {
    font-size: 18px;
    animation: trophyBounce 2s infinite;
}

@keyframes glow-text {
    0% { filter: brightness(100%); }
    50% { filter: brightness(120%); }
    100% { filter: brightness(100%); }
}

/* =========================================================== */
/* === AJUSTES FINAIS: CARD VENCEDOR E ANIMAÇÃO === */
/* =========================================================== */

/* 1. REMOVE OPACIDADE DO CARD VENCEDOR */
/* Vence a regra .status-sorteada que deixava cinza */
.raffle-card.status-sorteada.user-winner-card {
    opacity: 1 !important;
    filter: none !important;
    background-color: #fff !important; /* Garante fundo branco brilhante */
    transform: scale(1.02); /* Mantém o destaque de tamanho */
}

/* Garante que o rodapé e o conteúdo interno também fiquem nítidos */
.raffle-card.status-sorteada.user-winner-card .raffle-card-footer,
.raffle-card.status-sorteada.user-winner-card * {
    opacity: 1 !important;
    background-color: transparent; /* Evita fundo cinza herdado */
}

/* 2. ANIMAÇÃO DE PULSO (SUBSTITUI O PULO) */
@keyframes trophyPulse {
    0% { transform: scale(1); filter: brightness(100%); }
    50% { transform: scale(1.3); filter: brightness(130%) drop-shadow(0 0 5px gold); }
    100% { transform: scale(1); filter: brightness(100%); }
}

/* Aplica a nova animação ao ícone do troféu */
.winner-ribbon .material-icons {
    animation: trophyPulse 1.5s infinite ease-in-out !important;
}

/* =========================================================== */
/* === CORREÇÃO FINAL: BOTÃO INVISÍVEL NO CARD VENCEDOR === */
/* =========================================================== */

/* Restaura a cor e o estilo do botão dentro do card dourado */
.raffle-card.user-winner-card .raffle-action-btn {
    background-color: #2196F3 !important; /* Azul Forte */
    color: white !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* Garante o efeito de hover */
.raffle-card.user-winner-card .raffle-action-btn:hover {
    background-color: #1976D2 !important; /* Azul mais escuro */
    filter: brightness(110%);
}

/* =========================================================== */
/* === CORREÇÃO FINAL: CENTRALIZAR MODAL DE VITÓRIA === */
/* =========================================================== */

/* 1. O Overlay (Fundo Escuro) */
#client-victory-modal {
    /* Garante que o container ocupe a tela toda */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    background-color: rgba(0, 0, 0, 0.85) !important; /* Fundo escuro */
    
    /* Força o alinhamento Flexbox no centro */
    /* (O JS coloca display: flex, aqui alinhamos o conteúdo) */
    align-items: center !important;
    justify-content: center !important;
}

/* 2. A Caixa de Conteúdo (Reset de posição) */
#client-victory-modal .modal-content {
    /* Remove o posicionamento "top: 50%" padrão dos outros modais */
    position: relative !important; 
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    
    /* Garante tamanho e visual */
    width: 90% !important;
    max-width: 500px !important;
    background: #16213e !important;
    border: 2px solid #FFD700 !important; /* Borda Dourada */
    border-radius: 20px !important;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.4) !important;
}


/* =========================================================== */
/* === PERSONALIZAÇÃO V2: CORES LIMPAS E LEGÍVEIS === */
/* =========================================================== */

/* 1. Nome da Rifa (Ação) - Limpo e Profissional */
#current-raffle-name, 
#status-raffle-name {
    /* Opção A: Azul Escuro da Marca (Mais elegante) */
    color: #16213e !important; 
    
    /* Opção B: Laranja (Se preferir manter o destaque, descomente abaixo) */
    /* color: #ff8f00 !important; */

    font-weight: 800 !important; /* Negrito forte */
    text-shadow: none !important; /* Remove a sombra suja */
    text-transform: uppercase;
}

/* 2. Fundo da Descrição - Claro e Legível */
#raffle-description-public {
    /* Fundo Claro (Cinza quase branco) */
    background-color: #f9f9f9 !important; 
    
    /* Borda sutil */
    border: 1px solid #ddd !important;
    
    /* Texto Escuro (Leitura perfeita) */
    color: #333 !important; 
    
    padding: 20px !important;
    border-radius: 8px;
    line-height: 1.6 !important; /* Melhora o respiro do texto */
    font-size: 15px !important;
}

/* 2. Ajuste da Cor do Preço (Azul do Título) */
#raffle-price {
  color: #16213e !important; /* Azul */
  font-weight: 800;
  font-size: 1.5em;
}

/* =========================================================== */
/* === MODAL IDENTIFIQUE-SE (LOGIN/CADASTRO) === */
/* =========================================================== */

#auth-choice-modal .modal-content {
    /* Largura e Altura confortáveis */
    width: 90% !important;
    max-width: 450px !important; /* Tamanho ideal para diálogos de ação */
    height: auto !important;
    
    /* Visual Padrão (Azul Escuro + Laranja) */
    background-color: #16213e !important;
    border: 1px solid #ff8f00 !important;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.5) !important;
    color: #eee !important;

    /* Centralização Flexbox (Remove posições absolutas antigas) */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    align-self: center !important;

    /* Espaçamento interno */
    padding: 30px 25px !important;
    text-align: center !important;
}

/* Ajuste dos botões grandes */
#auth-choice-modal button {
    font-size: 1.1em !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}

#auth-choice-modal button:active {
    transform: scale(0.98);
}