/* Importação da fonte Montserrat do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Aplicação de estilo geral a todos os elementos */
*{
  margin: 0; /* Remove margens padrão */
  padding: 0; /* Remove preenchimentos padrão */
  box-sizing: border-box; /* Inclui bordas no cálculo do tamanho total */
  font-family: 'Montserrat', sans-serif; /* Define a fonte padrão */
  letter-spacing: .5px; /* Ajusta o espaçamento entre letras */
}

/* Estilização geral do corpo da página */
body{
  /* background-image: url(../assets/bg/bg.svg); */
  background-size: cover; /* Ajusta o tamanho da imagem para cobrir todo o elemento */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  background-position: center; /* Centraliza a imagem */

  display: flex; /* Torna o corpo um contêiner flexível */
  justify-content: center; /* Centraliza horizontalmente os itens */
  align-items: center; /* Centraliza verticalmente os itens */
  background-color: #0c0c0c; /*Define um fundo escuro */
  min-height: 100vh; /* Altura mínima de 100% da janela */
  color: #eaeaea; /* Cor do texto em cinza claro */
}

/* Contêiner principal */
.container{
  width: 90%; /* Largura relativa a 90% do espaço disponível */
  background-color: rgba(4, 4, 4, 0.901); /* Fundo escuro */
  padding: 1.5rem; /* Espaçamento interno */
  margin: 5rem 0rem; /* Margem superior e inferior */
  border-radius: 10px; /* Bordas arredondadas */
}

input, select, textarea {
    font-size: 1rem; /* Define fonte como 16px equivalente */
}

/* Estilização do cabeçalho */
.header{
  text-align: center; /* Centraliza o conteúdo */
}

.header img{
  width: 9rem; /* Define a largura da imagem */
  margin-bottom: 1.5rem; /* Espaço abaixo da imagem */
}

/* Estilização de títulos */
h1, h2{
  font-size: 1.3rem; /* Tamanho da fonte */
  font-weight: 500; /* Peso intermediário */
  margin-bottom: 1.5rem; /* Espaçamento inferior */
}

/* Destaque de texto com a tag <span> */
span{
  color: #C28E3C; /* Cor dourada */
  font-weight: 600; /* Negrito médio */
}

/* Estilização de linhas horizontais */
hr{
  margin-bottom: 2rem; /* Espaço abaixo da linha */
  background-color: #C28E3C; /* Cor dourada */
  height: 3px; /* Altura da linha */
  border: 0; /* Remove borda padrão */
  border-radius: 8px; /* Cantos arredondados */
}

/* Estilização de rótulos nos grupos de entrada */
.inputGroup label{
  margin-left: 1.1rem; /* Margem à esquerda */
}

input{
  margin-top: .6rem; /* Espaço acima dos campos de entrada */
}

/* Parágrafos nos grupos de referência */
.refGroup p{
  font-weight: 500; /* Negrito médio */
  margin-left: 1.1rem; /* Margem à esquerda */
  margin-bottom: .7rem; /* Espaço inferior */
}

/* Campos de texto e e-mail */
input[type="text"],
input[type="email"]{
  width: 100%; /* Ocupa toda a largura disponível */
  padding: .8rem; /* Espaçamento interno */
  margin-bottom: 2rem; /* Espaço abaixo */
  border: 1px solid #ccc; /* Borda cinza clara */
  background-color: rgb(4, 4, 4); /* Fundo escuro */
  color: #eaeaea; /* Cor do texto */
  border-radius: 50px; /* Bordas arredondadas */
  outline: none; /* Remove destaque padrão ao foco */
}

/* Estilo geral para checkboxes */
input[type="checkbox"] {
    width: 1.25rem; /* Tamanho do checkbox (20px ÷ 16) */
    height: 1.25rem; /* Altura do checkbox (20px ÷ 16) */
    cursor: pointer; /* Cursor muda para ponteiro */
    appearance: none; /* Remove estilo padrão */
    border: 0.125rem solid #fff; /* Borda branca (2px ÷ 16) */
    border-radius: 0.25rem; /* Cantos arredondados (4px ÷ 16) */
    background-color: transparent; /* Fundo transparente */
    transition: all 0.3s ease; /* Transições suaves */
    vertical-align: middle; /* Alinha ao meio verticalmente */
}
  

/* Estilo para checkboxes marcados */
input[type="checkbox"]:checked {
  background-color: #C28E3C; /* Fundo azul */
  border-color: #C28E3C; /* Borda azul */
  color: white; /* Cor do ícone */
}

input[type="checkbox"]:checked::before {
  content: "✔"; /* Adiciona um ícone de marcação */
  color: white; /* Ícone branco */
  font-size: .6rem; /* Tamanho do ícone */
  text-align: center; /* Centraliza o conteúdo */
  line-height: 1.1rem; /* Ajusta o alinhamento vertical */
}

.inputConheceu{
  display: flex;
  flex-direction: column;
}

.inputConheceu > label:last-of-type{
  margin-top: 1.5rem;
}

.check_verificacaoCliente input[type="checkbox"]{
    margin: 0;
}

/* Grupo de inputs para atividades comerciais */
#inputAtivComercial{
  display: flex; /* Configuração flexível */
  flex-direction: column; /* Coloca itens em coluna */
  margin-bottom: 1.5rem; /* Espaço abaixo */
}

.inputGroup input[type="checkbox"]{
  margin-bottom: .7rem; /* Espaço entre checkboxes */
}

/* Grupo para inputs de atividades do cliente */
.check_atividadeClienteInput{
  display: flex; /* Configuração flexível */
  margin-bottom: 2rem; /* Espaço abaixo */
}

/* Estilo para o campo de texto quando estiver desabilitado */
#segmento:disabled, 
#inputOutro:disabled {
    opacity: 0.5; /* Torna o campo mais apagado */
    pointer-events: none; /* Impede interação com o campo */
    background-color: #656565; /* Cor de fundo desativada */
}

.verificacaoGroup{
    font-size: .9rem;
    margin-bottom: .9rem;
    text-align: justify;
}

.verificacaoGroup input[type="checkbox"]{
  margin-bottom: .2rem;
}

/* Botão de envio */
input[type="submit"] {
  background-color: #C28E3C; /* Cor de fundo dourada */
  color: rgb(4, 4, 4); /* Texto escuro */
  width: 100%; /* Ocupa toda a largura */
  font-size: 1rem; /* Tamanho da fonte */
  font-weight: 700; /* Texto em negrito */
  padding: .8rem; /* Espaçamento interno */
  border: none; /* Sem bordas */
  border-radius: 8px; /* Bordas arredondadas */
  cursor: pointer; /* Cursor muda para ponteiro */
  transition: all .3s; /* Transições suaves */
}

/* Estilo para o contêiner do botão de envio */
#containerEnviar {
  position: relative; /* Permite posicionamento interno */
}

/* Camada de bloqueio para o botão de envio */
#containerEnviar #blockEnviar {
  display: none; /* Inicialmente escondido */
  position: absolute; /* Posição absoluta no contêiner */
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

/* Estilo para o botão quando desabilitado */
#containerEnviar.disabled #blockEnviar {
  display: block; /* Mostra o bloqueio */
}

#containerEnviar.disabled #send {
  opacity: 0.5; /* Reduz opacidade */
}

.whatsapp img{
  position: fixed;
  width: 4rem;
  bottom: 3rem;
  right: 0.5rem;
  z-index: 9999;
}

/* Estilo responsivo para telas maiores */
@media screen and (min-width: 800px){
  .container{
    max-width: 30rem; /* Define um limite máximo de largura */
  }

  input[type="submit"]:hover{
    background-color: #ac7929; /* Muda a cor ao passar o mouse */
    color: #eaeaea; /* Texto muda para cinza claro */
  }

  input[type="checkbox"]:checked::before {
    font-size: 1rem; /* Tamanho do ícone */
  }

  .whatsapp{
    width: 5rem;
  }
  .whatsapp img{
    width: 5rem;
    position: fixed;
    bottom: 3rem;
    right: .5rem;
    z-index: 9999;
    transition: all .3s;
  }

  .whatsapp img:hover{
    width: 5.5rem;
  }
}