/* --- RESET COMPLETO E PREVENÇÃO DE SCROLL --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    /* Mata o scrollbar que aparece no desktop */
    overflow: hidden; 
    background-color: #0b0b0b;
    color: white;
}

/* --- ESTRUTURA PRINCIPAL (FLEXBOX) --- */
.auth-page {
    display: flex;
    width: 100%;
    height: 100vh; /* Altura total da tela */
}

/* --- LADO ESQUERDO (BANNER COM IMAGEM DE FUNDO) --- */
.auth-banner {
    flex: 1; /* Ocupa metade da tela */
    position: relative;
    /* Imagem de Fundo (Troque pelo caminho da sua imagem) */
    background-image: url('/img/Login-Mobile.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Camada escura sobre a imagem para dar contraste ao texto */
.banner-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Mais escuro para destacar o texto */
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2; /* Acima da overlay */
    text-align: center;
}

.auth-logo { width: 130px; margin-bottom: 30px; }

.auth-title {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.1;
}

.auth-title span {
    display: block;
    color: #00d4ff; /* Ciano Neon */
}

/* --- LADO DIREITO (FORMULÁRIO) --- */
.auth-form-container {
    flex: 1; /* Ocupa a outra metade */
    background-color: #0b0b0b;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.form-wrapper { width: 100%; max-width: 400px; }

/* Título 'Crie sua conta' foi removido do HTML conforme solicitado */

/* Estilo dos Campos de Entrada */
.input-group { margin-bottom: 25px; }

.input-group label {
    display: block;
    color: #00d4ff;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 10px;
}

.input-field {
    background-color: #161616; /* Cinza do seu modelo */
    border: 1px solid #222;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    transition: 0.3s;
}

/* Borda acende ao clicar no campo */
.input-field:focus-within { border-color: #00d4ff; }

.input-field i { color: #555; font-size: 16px; margin-right: 15px; }

.input-field input {
    background: transparent;
    border: none;
    color: white;
    padding: 16px 0;
    width: 100%;
    outline: none;
    font-size: 15px;
}

/* Botão de Cadastro Moderno */
.btn-auth-submit {
    width: 100%;
    background-color: #00d4ff;
    color: #000;
    border: none;
    padding: 18px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s ease;
    text-transform: uppercase;
}

.btn-auth-submit:hover {
    background-color: #00b8db;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
}

/* Rodapé do Formulário (Já tem uma conta?) */
.auth-footer { 
    text-align: center; 
    margin-top: 30px; /* Espaço maior abaixo do botão */
    color: #888; 
    font-size: 14px; 
}

.auth-footer a { 
    color: #00d4ff; 
    text-decoration: none; 
    font-weight: bold; 
    margin-left: 5px; 
}

.auth-footer a:hover { text-decoration: underline; }

/* --- RESPONSIVIDADE (MOBILE) --- */

@media (max-width: 850px) {
    body { overflow-y: auto; } /* Reativa o scroll no mobile */
    .auth-page { flex-direction: column; height: auto; }
    
    .auth-banner {
        min-height: 350px;
        padding: 50px 20px;
        flex: none;
        width: 100%;
    }

    .auth-title { font-size: 2.2rem; }
    
    .auth-form-container {
        flex: none;
        width: 100%;
        padding: 60px 20px;
    }
}