.form-step {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  }
  
  .form-step.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  }
  
  .progress-bar {
    transition: width 0.5s ease-in-out;
  }
  
/* Defina uma altura mínima para o container das etapas */
#multiStepForm {
    position: relative;
    min-height: 300px; /* Ajuste conforme necessário */
  }
  
  /* Garanta que todas as etapas tenham a mesma posição para evitar deslocamentos */
  .form-step {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  }
  
  /* Torne apenas a etapa ativa visível */
  .form-step.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  }
  
  /* Garanta que os botões estejam alinhados corretamente */
.d-flex.justify-content-between {
    width: 100%;
  }
  
  /* Adicione margens uniformes se necessário */
  .prev-step,
  .next-step {
    min-width: 100px; /* Garante que os botões tenham largura consistente */
  }
  

  


  /* Seta para a caixa de seleção */
.choices__inner {
  position: relative; /* Necessário para posicionar a seta */
}

/* Ícone da seta para lista fechada */
.choices__inner::after {
  content: '▼'; /* Ícone da seta para lista fechada */
  font-size: 12px;
  color: #aaa; /* Cor da seta */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Garante que a seta não interfere no clique */
  transition: transform 0.3s, content 0.3s; /* Transição para uma troca suave */
}

/* Quando a lista está aberta, muda a seta para cima */
.choices__inner.is-open::after {
  content: '▲'; /* Ícone de fechar para lista aberta */
  transform: translateY(-50%) rotate(0deg);
}
.choices__inner.is-focused::after {
  content: '▲'; /* Ícone de fechar para lista aberta */
  font-size: 12px;
  transform: translateY(-50%);
}


/* Para orientações das caixas de seleção múltipla */
#stepHelp {
  color: rgba(var(--bs-primary-rgb), 0.75); /* Cor 75% da cor padrão Bootstrap */
}


#municipalityName:empty::before {
  content: "Nenhum município disponível para os distritos selecionados.";
  color: #ff0000; /* Cor do alerta */
  font-size: 0.875rem;
}


/* Classe para ajustar a fonte da seção de revisão */
.review-info {
  font-size: 0.8rem; /* Tamanho reduzido, mas ainda legível   0.9 */
  line-height: 1.5; /* Espaçamento entre linhas para legibilidade */
  color: #333; /* Cor neutra para facilitar a leitura */
}

.review-info strong {
  font-weight: bold; /* Destaca os títulos */
  color: #000; /* Contraste maior nos títulos */
}

.review-info p {
  margin-bottom: 7px; /* Espaçamento entre os parágrafos para evitar agrupamento visual 8px */
}

.review-info span {
  font-style: italic; /* Diferencia as respostas dos usuários */
}

/* Estilo responsivo para telas menores */
@media (max-width: 768px) {
  .review-info {
    font-size: 0.7rem; /* Reduz mais em dispositivos móveis 0.8 */
  }
}

/* Estilo para limitar texto em 2 linhas */
.text-clamp-2 {
  display: -webkit-box;      /* Flexbox otimizado para texto */
  -webkit-line-clamp: 2;    /* Limita a 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;         /* Esconde o texto excedente */
  text-overflow: ellipsis;  /* Adiciona reticências (...) no final */
  white-space: normal;      /* Permite quebra de linha */
}

/* modal classe de fundo cinza suave*/
.bg-light-gray {
  background-color: #f8f9fa; /* Cinza claro, adequado ao Bootstrap */
  border-radius: 8px;       /* Bordas arredondadas para suavizar */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra leve para destaque */
}

/* Estilo personalizado para o botão de fechar */
.btn-close {
  cursor: pointer;
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
}

.btn-close:hover {
  color: #dc3545; /* Cor vermelha ao passar o mouse */
}

.text-left {
  margin: 0;
  font-weight: bold;
}


/* botao whatsapp */
@media (max-width: 768px) {
  #whatsapp-button {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }
}

#whatsapp-button {
  position: fixed;
  bottom: 20px; /* Distância da parte inferior */
  right: 20px; /* Distância da lateral direita */
  width: 60px; /* Largura do botão */
  height: 60px; /* Altura do botão */
  background-color: #25d366; /* Cor de fundo do WhatsApp */
  color: #fff; /* Cor do ícone */
  border-radius: 50%; /* Botão arredondado */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Garantir que fique acima de outros elementos */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Suavizar transições */
}

#whatsapp-button:hover {
  transform: scale(1.1); /* Ampliar ao passar o mouse */
  background-color: #128c7e; /* Alterar cor ao hover */
  text-decoration: none; /* Remover sublinhado no hover */
}


/* Estilo personalizado para o popover POST IT*/
.popover-postit .popover-body {
  background-color: #F7D34F; /* Cor do fundo semelhante a um post-it */
  color: #000;              /* Texto preto para contraste */
  font-weight: 500;         /* Texto mais destacado */
}

.popover-postit .popover-header {
  background-color: #F7D34F; /* Mesmo fundo para o cabeçalho */
  color: #000;
  font-weight: 700;         /* Cabeçalho mais forte */
  border-bottom: none;      /* Remove a borda inferior */
}

.popover-postit {
  border: 1px solid #F7C63F; /* Borda para destacar */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}


/* Dimensões Terreno */
/* Adicionar espaçamento entre os grupos */
.input-group {
  margin-bottom: 1rem;
}

/* Destacar o rótulo principal */
/*.form-label {
  font-weight: bold; 
  font-size: 1.1rem; 
} */

/* Espaço extra entre a área total e a unidade de medida para separação visual */
.form-check {
  margin-top: 0.5rem;
}