@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,500,600,700&display=swap');

:root {
    --color-purple: #6E0AD6;
    --color-orange: #F28000;
    --color-green: #8CE563;
    --color-border: #CFD4DD; /* rgb(207, 212, 221) */
    --color-text-primary: #1A1D23; /* rgb(26, 29, 35) */
    --color-text-secondary: #898989; /* rgb(137, 137, 137) */
    --color-bg-neutral: #F5F6F7; /* rgb(245, 246, 247) */
    --color-facebook-blue: #3a5998; /* rgb(58, 89, 152) */
    --color-help-arrow: #4A4A4A;
    --color-error: #FF3B30; /* Cor de erro vermelha */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #FFFFFF; /* Alterado para branco (era var(--color-bg-neutral)) */
    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 24px;
    color: var(--color-text-primary);
}

header {
    padding: 16px 72px;
    background-color: #FFFFFF;
    border-bottom: 1.33333px solid var(--color-border);
    height: 80px;
    width: 100%;
}

.header-content {
    align-items: center;
    column-gap: 24px;
    display: flex;
    height: 47px;
    margin: 0 auto;
    max-width: 1576px;
}

/* --- Estilos do Logo (mantidos) --- */
.logo-link { background-color: transparent; border: 0; padding: 0; align-items: center; color: var(--color-purple); cursor: pointer; display: flex; font-size: 12px; font-weight: 600; justify-content: center; line-height: 15.84px; text-decoration: none; }
.sr-only { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.logo-container { align-items: center; display: flex; height: 48px; width: 48px; }
.logo-svg { min-height: 12px; min-width: 12px; width: 100%; }
.logo-o { fill: var(--color-purple); }
.logo-l { fill: var(--color-green); }
.logo-x { fill: var(--color-orange); }
/* --- Fim Estilos do Logo --- */


main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 48px;
    padding: 0 16px; /* Padding lateral geral para mobile */
    flex: 1;
}

/* Container principal branco */
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 466px;
    background-color: #FFFFFF;
    border: 1.33333px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    padding-top: 24px;
    flex: 1 1 auto;
    margin-bottom: 8px; /* Espaço antes do footer-text */
}

.title-container {
    text-align: center;
    padding: 0;
}

h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 31.68px;
    color: var(--color-text-primary);
    margin: 0;
}

/* Wrapper do conteúdo interno do card */
.form-content-wrapper {
    display: flex;
    flex-direction: column;
    padding: 24px 56px 0px; /* Padding desktop */
}

/* Tag <form> */
#main-form {
    padding-bottom: 40px; /* Espaço abaixo do botão Continuar */
}

.email-container {
    margin-bottom: 8px;
    position: relative;
}

label {
    display: block;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.input-wrapper {
    border-radius: 8px;
    background-color: #FFFFFF;
    box-shadow: var(--color-border) 0px 0px 0px 1px;
    width: 100%;
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Estilo para quando há erro */
.input-wrapper.error {
    box-shadow: var(--color-error) 0px 0px 0px 2px !important;
}

input {
    width: 100%;
    border-radius: 8px;
    font-size: 16px;
    line-height: 22.4px;
    padding: 12px 16px;
    background-color: #FFFFFF;
    border: 0;
    color: var(--color-text-primary);
    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: none;
}

input:focus {
    box-shadow: var(--color-purple) 0px 0px 0px 2px;
}

/* Impedindo que o input focus sobrescreva o estado de erro */
.input-wrapper.error input:focus {
    box-shadow: var(--color-error) 0px 0px 0px 2px !important;
}

.divspan {
    display: none; /* Inicialmente escondido */
    position: absolute;
    align-items: center;
    gap: 4px;
    left: 0;
    bottom: -24px; /* Posicionado abaixo do input */
}

.spanEmail {
    color: var(--color-error);
    font-size: 14px;
    line-height: 18px;
}

.iconErro {
    color: var(--color-error);
    font-size: 16px;
    margin-right: 4px; /* Adiciona espaço entre o ícone e o texto */
}

.button-container {
    margin-top: 32px;
}

button#login-btn {
    width: 100%;
    background-color: var(--color-orange);
    border: 1.33333px solid var(--color-orange);
    border-radius: 500px;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    height: 40px;
    line-height: 24px;
    padding: 8px 24px;
}

button#login-btn:hover {
    background-color: #df7400;
    border-color: #df7400;
}

button#login-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* "Ou conecte com" */
.connect-container {
    position: relative;
    display: flex;
    align-items: center;
    margin: 24px 0 32px;
}

.connect-line {
    flex: 1;
    height: 1.33333px;
    background-color: var(--color-border);
    border-width: 1.33333px 0px 0px;
    border-style: solid;
    border-color: var(--color-border);
}

.connect-text {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0;
    font-size: 14px;
    color: var(--color-text-secondary);
    background-color: #FFFFFF;
    padding: 0 8px;
    line-height: 24px;
    font-weight: 400;
    white-space: nowrap;
}

/* Botões Sociais */
.social-container {
    display: flex;
    justify-content: center;
    gap: 32px; /* Espaçamento entre botões */
}

.social-btn {
    width: 55px; /* <<< ALTERADO: Aumentado tamanho */
    height: 55px; /* <<< ALTERADO: Aumentado tamanho */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    padding: 10px; /* <<< ALTERADO: Adicionado padding para centralizar ícones maiores */
}

.google-btn {
    border: 1px solid var(--color-border);
    background-color: #FFFFFF;
}
.google-btn svg { /* Garante que o SVG do google preencha o espaço */
    width: 100%;
    height: 80%;
}

.facebook-btn {
    background-color: var(--color-facebook-blue);
    border: none;
}
.facebook-btn svg { /* Ajusta tamanho do ícone FB para novo botão */
     width: 50px;  /* <<< ALTERADO: Levemente aumentado */
     height: 25px; /* <<< ALTERADO: Levemente aumentado */
     fill: #FFFFFF;
}

/* "Não tem conta?" */
.register-container {
    text-align: center;
    padding: 32px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-container p {
    font-size: 15px; /* <<< ALTERADO: Aumentado tamanho */
    color: var(--color-text-primary);
    line-height: 1.4; /* Ajuste linha-altura */
    margin: 0;
}

.register-link {
    text-decoration: none;
    color: var(--color-purple);
    font-weight: 600;
    font-size: 15px; /* <<< ALTERADO: Aumentado tamanho */
    line-height: 1.4;
    margin-left: 4px;
    cursor: pointer;
}

/* "Preciso de ajuda" */
.help-container {
    background-color: var(--color-bg-neutral); /* Mantido o fundo cinza apenas nesta seção */
    border-top: 1.33333px solid var(--color-border);
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.help-link {
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.help-link svg {
    width: 16px;
    height: 16px;
    fill: var(--color-help-arrow);
}

/* Rodapé */
.footer-text {
    max-width: 466px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 15.84px;
    color: rgb(60, 68, 83);
    margin: 8px auto 24px auto; /* Mantido margin-top 8px */
    padding: 0 16px;
}

.footer-text a {
    color: var(--color-purple);
    font-weight: 600;
    text-decoration: none;
    font-size: 12px;
    line-height: 15.84px;
}

/* --- Media Query para Responsividade --- */
@media (max-width: 768px) {
    header {
        padding: 16px; /* Menos padding no header */
    }
      main {
        margin-top: 50px; /* Espaço entre o header e o card (menor no mobile) */
        padding: 0; /* Remove padding lateral no mobile */
    }

    /* Reduz padding lateral DENTRO do card */
    .form-content-wrapper {
        padding-left: 20px;  /* <<< ALTERADO: Padding bem menor */
        padding-right: 20px; /* <<< ALTERADO: Padding bem menor */
    }

    /* Ajusta o container principal em telas menores */
     .container {
         margin-left: 0; /* Remove margem desktop se existir */
         margin-right: 0;
         width: 100%; /* Usa largura total disponível (considerando padding do main) */
         max-width: none; /* Remove max-width fixo */
         border-left: none; /* Opcional: remover bordas laterais no mobile */
         border-right: none;/* Opcional: remover bordas laterais no mobile */
         border-radius: 0;  /* Opcional: remover bordas arredondadas no mobile */
     }

     .footer-text {
         max-width: none; /* Permite quebrar linha melhor */
         padding: 0 20px; /* Alinha com padding interno do form */
     }
}