/* CSS Document
Desenvolvido por:
    Brunno Arthur Monteiro Soares
*/

/* Estilos globais para o corpo da página */
body {
    font-family: Arial, sans-serif; /* Define a fonte padrão do corpo */
    background-color: #dce3e9; /* Define a cor de fundo */
    margin: 0; /* Remove as margens externas */
    padding: 0; /* Remove o preenchimento */
    display: flex; /* Define o corpo como um container flex */
    flex-direction: column; /* Define a direção dos itens flex como coluna */
    align-items: center; /* Alinha itens do flex horizontalmente ao centro */
    justify-content: flex-start; /* Alinha itens do flex verticalmente ao início */
    height: 100vh; /* Define a altura do corpo para ocupar toda a altura da janela de visualização */
}

/* Estilos para o contêiner principal */
.container {
    background-color: #fff; /* Define o fundo branco para o container */
    padding: 0px 40px; /* Define o preenchimento interno da esquerda e da direita */
    border-radius: 8px; /* Arredonda os cantos do container */
    box-sizing: border-box; /* Inclui paddings e bordas no total da largura e altura */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma leve sombra em torno do container */
    max-width: 800px; /* Define a largura máxima do container */
    width: 100%; /* Faz o container ocupar toda a largura disponível */
    text-align: center; /* Centraliza o texto do container */
}

/* Estilos para o logo */
.logo {
    width: 180px; /* Define a largura da imagem do logo */
    height: 180px; /* Define a altura da imagem do logo */
}

/* Estilos para o título principal */
h1 {
    font-size: 24px; /* Define o tamanho da fonte do título */
    color: #004580; /* Define a cor do texto do título */
    margin-bottom: 20px; /* Define uma margem abaixo do título */
}

/* Estilos para os grupos de formulário */
.form-group {
    margin-bottom: 15px; /* Define uma margem inferior nos grupos de formulário */
    text-align: left; /* Alinha o texto à esquerda */
}

/* Ajuste para alinhar o checkbox e o label */
.checkbox-group {
    display: flex; /* Configura os itens em linha (horizontal) com flex */
    align-items: center; /* Alinha os itens verticalmente no centro */
}

.checkbox-group input[type="checkbox"] {
    margin: 0; /* Remove qualquer margem padrão do checkbox */
    vertical-align: middle; /* Garante que o checkbox fique bem alinhado ao texto */
}

.checkbox-group label {
    margin-left: 8px; /* Espaçamento padrão entre o checkbox e o texto */
    position: relative; /* Permite ajustar a posição do texto */
    top: 3px; /* Move o texto para baixo */
    line-height: normal; /* Garante que o texto fique com o espaçamento natural */
}

/* Estilos para os rótulos dos campos do formulário */
label {
    display: block; /* Faz o rótulo ocupar a linha inteira */
    margin-bottom: 5px; /* Adiciona um espaço abaixo do rótulo */
    color: #555555; /* Define a cor do texto do rótulo */
}

/* Estilos para os campos de entrada do formulário */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="file"] {
    width: 100%; /* Faz o campo preencher toda a largura do seu container pai */
    padding: 8px; /* Adiciona preenchimento interno aos campos de entrada */
    box-sizing: border-box; /* Inclui interpolação e bordas no total */
    border: 1px solid #ddd; /* Define uma borda cinza clara para o campo */
    border-radius: 4px; /* Arredonda os cantos do campo */
}

/* Melhorias de Estilo para o campo <select> */
select {
    width: 100%; /* Faz o select preencher toda a largura disponível */
    padding: 10px; /* Define um preenchimento interno consistente */
    border-radius: 5px; /* Arredonda os cantos do select */
    border: 1px solid #ccc; /* Define uma borda cinza clara */
    background-color: #f9f9f9; /* Define o fundo do select como cinza claro */
    font-size: 16px; /* Define o tamanho da fonte */
    color: #333; /* Define a cor do texto dentro do select */
    outline: none; /* Remove o contorno nativo do browser */
    -webkit-appearance: none; /* Remove a seta padrão em browsers Webkit */
    -moz-appearance: none; /* Remove a seta padrão no Firefox */
    appearance: none; /* Remove a seta padrão para todos os browsers */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 20,0 10,10"/></svg>'); /* Atribui ícone personalizado */
    background-repeat: no-repeat; /* Define para que o ícone não se repita */
    background-position-x: 95%; /* Posiciona o ícone horizontalmente */
    background-position-y: 50%; /* Posiciona o ícone verticalmente no meio */
    transition: border-color 0.3s ease; /* Transição suave na cor da borda */
}

select:focus {
    border-color: #00A5B5; /* Altera a cor da borda ao focar */
}

/* Estilos para o botão de envio do formulário */
.btn-submit {
    background-color: #004580; /* Cor de fundo azul para o botão */
    color: #fff; /* Cor do texto branco para o botão */
    padding: 10px 15px; /* Preenchimento interno do botão */
    border: none; /* Remove borda padrão */
    border-radius: 4px; /* Arredonda os cantos do botão */
    cursor: pointer; /* Altera o cursor ao passar sobre o botão */
    transition: background-color 0.3s; /* Transição suave no fundo */
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Estilos para o botão de envio ao passar o mouse */
.btn-submit:hover {
    background-color: #013969; /* Escurece a cor do fundo ao passar o mouse */
}

/* Estilos para o contêiner do reCAPTCHA */
.recaptcha-container {
    display: flex; /* Configura o container do reCAPTCHA como flex */
    justify-content: center; /* Centraliza o reCAPTCHA */
    margin-bottom: 20px; /* Espaço abaixo do contêiner */
}

/* Estilos atualizados para o modal */
.modal {
    visibility: hidden; /* Modal escondido por padrão */
    position: fixed; /* Fixa o modal em relação à viewport */
    z-index: 1100; /* Posição mais acima entre elementos */
    left: 0; /* Início na borda esquerda */
    top: 0; /* Início na borda superior */
    width: 100%; /* Tamanho completo em largura */
    height: 100%; /* Tamanho completo em altura */
    display: flex; /* Usa layout flexbox para alinhar ao centro */
    justify-content: center; /* Alinha ao centro horizontalmente */
    align-items: center; /* Alinha ao centro verticalmente */
    background-color: rgba(0, 0, 0, 0.4); /* Fundo semi-transparente */
}

/* Estilos para o conteúdo do modal */
.modal-content {
    background-color: #fefefe; /* Fundo do conteúdo modal */
    padding: 20px; /* Define o preenchimento interno */
    border: 1px solid #888; /* Borda do conteúdo modal */
    width: 80%; /* Largura do modal */
    max-width: 600px; /* Largura máxima do modal */
    border-radius: 8px; /* Cantos arredondados */
    text-align: center; /* Centraliza o texto */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra do modal */
}

/* Estilos para o botão de fechar o modal */
.close {
    color: #aaa; /* Cor do botão fechar */
    float: right; /* Alinhamento à direita */
    font-size: 28px; /* Tamanho do texto */
    font-weight: bold; /* Negrito */
    cursor: pointer; /* Altera o cursor ao passar sobre o botão */
}

/* Estilos para o botão de fechar ao passar o mouse */
.close:hover,
.close:focus {
    color: black; /* Muda a cor ao focar ou passar o mouse */
    text-decoration: none; /* Remove linhas extras */
}

/* Estilos para a barra de progresso */
.progress-bar {
    width: 100%; /* Largura da barra de progresso */
    background-color: #f3f3f3; /* Fundo da barra */
    border-radius: 5px; /* Bordas arredondadas */
    overflow: hidden; /* Conteúdo adicional oculto */
    margin-top: 20px; /* Espaço superior */
}

/* Estilos para o conteúdo interno da barra de progresso */
.progress-bar-inner {
    height: 30px; /* Altura da barra interior */
    width: 0%; /* Largura inicial da barra interior */
    background-color: #00A5B5; /* Fundo da parte preenchida */
    text-align: center; /* Centraliza texto dentro */
    line-height: 30px; /* Espaçamento vertical da linha */
    color: white; /* Cor do texto */
    transition: width 0.5s; /* Transição suave para largura */
}

/* Estilos para o rodapé */
.footer {
    margin-top: 20px; /* Espaçamento superior */
    text-align: center; /* Centraliza texto */
    font-size: 14px; /* Tamanho da fonte */
    color: #555; /* Cor do texto */
}

/* Específico para segurança de ocultação assimétrica, mantendo css exequível prático */
.modal[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
}