/*!
 * @file css/signup.css
 * @description Estilos da página de cadastro (form, grid responsivo e botões "mostrar senha").
 *              Mantém consistência com Bootstrap e padrão CityZen, com foco em acessibilidade UX/UI.
 * @author Giselle Cristina Cardoso, André Lucas Novaes, Débora Zumkeller Sabonaro
 * @since 2025-11
 */

.content {
    display: flex; /* Coloca imagem e formulário lado a lado */
    flex-direction: column; /* Permite adaptação para telas menores */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    gap: 20px; /* Espaço entre a imagem e o formulário */
    padding: 10px;
    flex: 1;
   }    


/* Estilo do botão de mostrar senha */
div {
    position: relative;
  }

#toggle-password,
#toggle-confirm-password {
  position: absolute;
  right: 10px; /* Alinha à direita do campo */
  top: 50%; /* Centraliza verticalmente */
  transform: translateY(-70%);
  background: transparent; /* Remove a cor de fundo */
  border: none; /* Remove a borda */
  cursor: pointer; /* Mostra que é clicável */
  font-size: 18px; /* Ajusta o tamanho do ícone */
  color: #333; /* Cor do ícone */
  outline: none; /* Remove o contorno ao clicar */
  line-height: 1; /* Remove o espaçamento vertical */
  height: 24px; /* Define a altura para evitar quebra */
  width: 24px; /* Define a largura */
}

.input-group {
  position: relative;
}

.input-group input {
  width: 100%;
  padding-right: 10px; /* Espaço para o botão "olhinho" */
}

/* Remove o estilo padrão do botão */
#toggle-password:focus {
    outline: none;
  }
  
.cadastro-container { 
    background-color: #fff; /* Fundo branco */
    padding: 15px; /* Espaçamento interno */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra leve */
    max-width: 90%; /* Define o limite de largura como 80% da tela */
    width: 100%; /* Garante que o container ocupe 80% */
    margin: 20px auto; /* Centraliza o container na tela */
  }    
  
  
.cadastro-form {      
    display: grid; /* Ativa o Grid Layout */
    grid-template-columns: (auto-fit, minmax(200px, 1fr)); /* Cria um layout fluido */
    grid-gap: 3px; /* Espaçamento entre os elementos */
    max-width: 100%; /* Largura máxima para o formulário */
    width: 100%;
    margin: 0 auto; /* Centraliza o formulário */
    background-color: #fff;
    padding: 10px;  
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 12px; /* Reduz o tamanho da fonte do rótulo */
  }
  
  form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  form input:focus {
    border: 1px solid #4CAF50; /* Verde no foco */
    outline: none; /* Remove o contorno padrão */
  }

  form button {
    width: 100%;
    padding: 10px;
    background: linear-gradient(90deg, #8BC34A, #66BB6A); /* Gradiente verde-limão */
    color: #fff; /* Texto branco */
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  form button:hover {
    background: linear-gradient(90deg, #66BB6A, #4CAF50); /* Verde mais escuro no hover */
    transform: scale(1.1); /* Aumenta ligeiramente no hover */
  }
 
  .cadastro-header {
    grid-column: span 3; /* Faz o cabeçalho ocupar as três colunas */
    text-align: center;
    margin-bottom: 5px;
  }
  
  .cadastro-header h1 {
    font-size: 28px;
    font-weight: bold; /* Destaque no título */
    color: #333;
    margin-bottom: 5px;
  }
  
  .cadastro-header p {
    font-size: 16px;
    color: #666;
  }
  
  .cadastro-form label {
    font-size: 12px; /* Reduz o tamanho da fonte do rótulo */  
    margin-bottom: 3px;
    font-weight: bold;  
  }
  
  .cadastro-form input,
  .cadastro-form select { 
    width: 100%; /* Preenche o espaço disponível */
    padding: 10px;  
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
  }
  
.cadastro-form button{
  grid-column: span 3; /* Faz o botão ocupar as três colunas */
  width: 100%;
  padding: 10px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}
  
.cadastro-form button:hover {
    background-color: #45a049;
  }
  
/* Reorganizando os campos em linhas */
.form-row {  
    display: grid; /* Ativa o Grid Layout para as linhas */
    grid-template-columns: repeat(2, 1fr); /* Define três colunas iguais */
    gap: 10px; /* Espaço entre os campos */
  }
      
.form-row:last-child {
    grid-template-columns: repeat(3, 1fr); /* Mantém 3 colunas */
  }
    
  
.form-row:nth-child(2) {
    grid-template-columns: 1fr; /* Linha 2 ocupa toda a largura */
  }
    
.form-row:nth-child(3) {
    grid-template-columns: repeat(1, 1fr); /* Mantém 3 colunas */
  }
  
.form-row:nth-child(4) {
    grid-template-columns: repeat(2, 1fr); /* Mantém 3 colunas */
  }
  
.form-group {  
      display: flex;
      flex-direction: column; /* Coloca o label acima do campo */
      margin-bottom: 0px; /* Reduz o espaçamento vertical entre os campos */
    }
  
.form-group button {  
      width: auto; /* Ajusta o tamanho do botão */
      padding: 10px 20px; /* Adiciona espaçamento interno */     
  }