/* assets/css/login.css */

/* Container principal da tela de login */
.login-container {
  /* ocupa toda a altura e desfaz o margin */
  height: 100vh;
  margin: 0;
  
  /* manter fundo “glass” se quiser */
  background: var(--glass-bg);
  
  /* flex já está no HTML, então não precisa repetir aqui */
}

.login-box{
  max-width:420px;       /* largura máx. */
  width:100%;
  background:#fff;       /* contêiner branco */
  border-radius:1rem; 
  padding:2rem 1.75rem;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
}

/* Cabeçalho com logo e título */
.login-header {
  margin-bottom: 1.5rem;
}

.login-logo {
  font-size: 3rem;
  color: var(--primary-color);
}

.login-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

/* Link "Esqueci Minha Senha" */
.forgot-password {
  font-size: 0.9rem;
  color: var(--primary-color);
  text-decoration: underline;
}

/* Seção "Criar Conta" */
.create-account {
  font-size: 0.9rem;
  color: var(--secondary-color);
}

.create-account a {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: 500;
}

/* Animação de fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  background-image: url('https://d2gc27jy00o0yk.cloudfront.net/default-assets/image/cognito-image-background-page-light.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--light-bg); /* Cor de fundo de fallback */
}

body {
  background-color: transparent; /* Torna o fundo do body transparente para exibir a imagem do html */
}

input.form-control::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.15) !important;
}
input.form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.15) !important;
}
input.form-control:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.15) !important;
}
input.form-control:-moz-placeholder {
  color: rgba(0, 0, 0, 0.15) !important;
}
input.form-control::placeholder {
  color: rgba(0, 0, 0, 0.15) !important;
}