/* --- Estilos Específicos para a Página de Cadastro de Empresas --- */

/* Ajustes gerais para o main para centralizar o conteúdo */
main {
    flex-grow: 1 !important; /* Essencial para empurrar o footer */
    padding: 20px; /* Padding vertical e horizontal para o main */
    display: flex; /* Torna o main um container flex */
    justify-content: center; /* Centraliza horizontalmente o conteúdo do main */
    align-items: center; /* Alterado: Centraliza verticalmente o conteúdo do main */
    min-height: calc(100vh - var(--header-height) - var(--footer-height)); /* Garante que o main ocupe a altura restante para centralização vertical */
    width: 100%;
    box-sizing: border-box; /* Inclui padding na largura e altura */
}
/* Estilos para Grupos de Formulário */
.form-group {
    margin-bottom: 20px;
    text-align: left; /* Garante que labels e inputs se alinhem à esquerda dentro do grupo */
}

.form-group label {
    display: block; /* Garante que o label fique em sua própria linha, acima do input */
    margin-bottom: 8px; /* Espaço entre o label e o input */
    font-weight: 600; /* Deixa o texto do label em negrito */
    color: var(--color-text); /* Usa a cor de texto definida globalmente */
    font-size: 1em; /* Tamanho da fonte padrão para o label */
}

/* Estilos para todos os tipos de input de texto, email, telefone e password */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"], /* Adicionado explicitamente para senhas */
.form-group select,
.form-group textarea {
    width: 100%; /* Faz o input ocupar toda a largura disponível do seu contêiner pai */
    padding: 12px 15px; /* Espaçamento interno dentro do input */
    border: 1px solid var(--color-border); /* Borda padrão */
    border-radius: 5px; /* Cantos levemente arredondados */
    font-size: 1em; /* Tamanho da fonte padrão para o texto digitado */
    color: var(--color-text); /* Cor do texto digitado */
    background-color: var(--color-background); /* Fundo do input */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura total */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transição suave para efeitos de foco */
}

/* Efeito de foco para os inputs (quando o usuário clica ou tabula para o campo) */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary); /* Muda a cor da borda ao focar */
    box-shadow: 0 0 0 3px rgba(13, 68, 124, 0.2); /* Adiciona uma sombra suave ao focar */
    outline: none; /* Remove o outline padrão do navegador */
}
/* Contêiner principal do formulário */
.page-container {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: 900px; /* Largura máxima maior para o formulário de cadastro */
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto; /* Adicionado: Garante centralização horizontal */
    /* Remover display flex aqui se for causar aninhamento indesejado */
    /* display: flex;
    flex-direction: column; */
}

/* Estilo do Card (caixa do formulário) */
.card {
    background-color: var(--color-background); /* Fundo branco para o card */
    border: 1px solid var(--color-border); /* Borda padrão */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidade */
    padding: 30px; /* Espaçamento interno */
    width: 100%; /* Ocupa 100% do .page-container */
    box-sizing: border-box;
    text-align: left; /* Alinha o texto à esquerda por padrão para formulários */
}

.card-header {
    margin-bottom: 25px;
    text-align: center; /* Centraliza o título e a descrição */
}

.card-title {
    font-size: 2em; /* Tamanho maior para o título principal */
    color: var(--color-primary);
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    display: inline-block;
}

.card-header p {
    font-size: 1.1em;
    color: var(--color-text-secondary);
    margin-top: 15px;
}

/* Estilos para Títulos de Seções dentro do formulário (h3) */
.card h3 {
    font-size: 1.5em;
    color: var(--color-primary);
    margin-top: 35px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-secondary); /* Borda mais destacada */
    text-align: left; /* Alinha os títulos à esquerda */
}

/* Mensagens de Sucesso e Erro */
.message {
    padding: 12px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: bold;
    text-align: left;
    border: 1px solid transparent;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* Estilos para Grupos de Formulário */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-text);
    font-size: 1em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 1em;
    color: var(--color-text);
    background-color: var(--color-background);
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 68, 124, 0.2);
    outline: none;
}

/* Estilo para campos readonly */
input[readonly] {
    background-color: var(--color-light-grey); /* Fundo cinza para campos readonly */
    cursor: not-allowed; /* Cursor de "não permitido" */
    opacity: 0.8;
}

/* Small text/hint below form fields */
.form-text {
    font-size: 0.85em;
    color: var(--color-text-secondary);
    margin-top: 5px;
    display: block; /* Garante que o texto fique abaixo do input */
}

/* Botões */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    text-align: center; /* Centraliza o texto do botão */
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-hover-text);
    width: auto; /* Deixa o botão ter largura automática, não 100% como no login */
    margin-top: 15px; /* Espaçamento superior */
}

.btn-primary:hover {
    background-color: var(--color-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Estilo para a linha divisória */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 40px 0; /* Espaçamento maior para separar seções */
}

/* Estilo para o campo de checkbox de aceite de termos */
.form-group input[type="checkbox"] {
    width: auto; /* Para não ocupar 100% da largura */
    margin-right: 10px; /* Espaço entre o checkbox e o label */
    vertical-align: middle; /* Alinha verticalmente com o texto */
}

.form-group label[for="aceite_termos"] {
    display: inline-block; /* Permite que o texto flua ao lado do checkbox */
    font-weight: normal; /* Remove negrito se for diferente dos outros labels */
    font-size: 0.9em; /* Texto um pouco menor */
    color: var(--color-text-secondary);
}

.form-group label[for="aceite_termos"] a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
}

.form-group label[for="aceite_termos"] a:hover {
    text-decoration: underline;
}


/* Estilos para o campo "campos-nova-empresa" que pode ser ocultado */
#campos-nova-empresa {
    transition: all 0.3s ease-in-out; /* Transição suave para aparecer/desaparecer */
    overflow: hidden; /* Garante que o conteúdo que está desaparecendo não ocupe espaço */
    max-height: 1000px; /* Um valor grande o suficiente para o conteúdo aparecer */
    opacity: 1;
}

/* Estilo quando os campos estão ocultos via JS (display: none) */
/* Se o JS usa style.display = 'none', esta transição não funcionará diretamente.
    Seria melhor usar uma classe para ocultar, ex: .hidden { max-height: 0; opacity: 0; }
    No entanto, para 'display: none', não há transição visual. */


/* Responsividade */
@media (max-width: 768px) {
    .card {
        padding: 20px;
    }

    .card-title {
        font-size: 1.8em;
    }

    .card h3 {
        font-size: 1.3em;
    }
}

@media (max-width: 480px) {
    .card {
        padding: 15px;
    }

    .card-title {
        font-size: 1.5em;
    }

    .card h3 {
        font-size: 1.2em;
        margin-top: 30px;
        margin-bottom: 15px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .btn {
        padding: 10px 15px;
        font-size: 0.95em;
    }

    .btn-primary {
        width: 100%; /* Botão em largura total em telas muito pequenas */
    }
}