/* Estilos para o body, garantindo que o card fique centralizado na tela */
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Seu gradiente de fundo roxo */
  background: linear-gradient(
    78deg,
    #6936af 0%,
    #6936af 49.9%,
    #743fba 50%,
    #743fba 51.9%,
    #8553cc 52%,
    #8553cc 100%
  );
}

/* Estilos para o card de login/cadastro */
.login-card {
  width: 100%;
  max-width: 500px; /* Largura máxima para o card */
  padding: 2rem;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
  border-radius: 10px; /* Bordas arredondadas */
  background: #fff; /* Fundo branco para o card */
}

/* Estilo para a imagem do logo dentro do card */
#logo-img {
  width: 100px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%); /* Centraliza a imagem horizontalmente */
  border-radius: 10px; /* Mantém as bordas arredondadas da logo */
}

/* Estilo para os botões primários dentro do card de login/cadastro.
   Isso garante que o botão "Cadastrar" tenha a cor roxa se essa for a cor padrão dos seus botões.
   Se 'var(--primary)' estiver definido em global.css, ele será usado.
*/
.btn-primary.w-100 { /* Seleciona botões com as classes btn-primary e w-100 */
    background-color: var(--primary, #6936AF); /* Cor de fundo roxa, com fallback */
    border-color: var(--primary, #6936AF);     /* Cor da borda roxa, com fallback */
    color: white; /* Cor do texto branco para contraste */
}

.btn-primary.w-100:hover {
    /* Um pequeno escurecimento ou ajuste ao passar o mouse */
    background-color: color-mix(in srgb, var(--primary, #6936AF) 90%, black);
    border-color: color-mix(in srgb, var(--primary, #6936AF) 90%, black);
}


/* Estilo para o link "Faça login" */
.login-card p.text-center a {
    color: var(--primary, #6936AF); /* Mesma cor dos botões para links principais */
    text-decoration: none; /* Remove sublinhado padrão */
}

.login-card p.text-center a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

/* Estilos para mensagens de erro/validação, caso queira personalizar além do Bootstrap */
.text-danger {
    color: #dc3545; /* Padrão Bootstrap para erro (vermelho) */
    font-size: 0.875em; /* Tamanho de fonte menor */
    margin-top: 0.25rem; /* Pequena margem acima */
}

/* Se precisar de estilos específicos para form-control que não sejam do Bootstrap, adicione aqui */
/* Ex: .form-control { border-radius: 5px; } */