/* Login Page - Estilo profissional inspirado em Hotmart (clean, moderno e mais preenchido) */

:root {
  --login-primary: #e804b4; /* cor principal */
  --login-primary-hover: #cf03a3;
  --login-bg-start: #ffffff; /* base branca */
  --login-bg-end: #fff7fb;   /* leve tom rosado */
  --login-card-bg: #ffffff;
  --login-card-border: #f1e6f3;
  --login-text: #1f2937;     /* gray-800 */
  --login-muted: #6b7280;    /* gray-500 */
  --line: #e5e7eb;           /* gray-200 */
}

/* Fundo limpo com gradiente suave e sutil acento radial na cor principal */
body.h-100 {
  min-height: 100vh;
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(232, 4, 180, 0.08), transparent 60%),
    linear-gradient(180deg, var(--login-bg-start), var(--login-bg-end));
}

/* Centralização e espaçamento padrão */
.authincation.h-100 .container-fluid.h-100 .row.justify-content-center.h-100.align-items-center {
  padding: 32px 16px;
}

/* Card mais sóbrio, com borda sutil e sombra leve */
.authincation-content {
  border-radius: 16px;
  background: var(--login-card-bg);
  border: 1px solid var(--login-card-border);
  box-shadow: 0 10px 26px rgba(31, 41, 55, 0.08);
}

/* Conteúdo do formulário */
.auth-form {
  padding: 36px;
}

.login-brand {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.login-brand-logo {
  width: 80px;
  height: auto;
  display: block;
}

/* Título e subtítulo com destaque minimalista na cor principal */
.auth-form h4.text-center {
  color: var(--login-text);
  font-weight: 800;
  letter-spacing: 0.2px;
}
.auth-form h4.text-center + .subtitle {
  color: var(--login-muted);
  font-size: 0.97rem;
}
.auth-form h4.text-center::after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  border-radius: 4px;
  margin: 10px auto 0;
  background: var(--login-primary);
}

/* Formulário mais preenchido com separadores e textos de apoio */
.auth-form .form-group {
  margin-bottom: 18px;
}
.auth-form .form-group label {
  color: var(--login-muted);
  font-weight: 600;
}
.auth-form .form-group + .form-group {
  border-top: 1px dashed var(--line);
  padding-top: 18px;
}

/* Inputs profissionais com foco definido */
.auth-form .form-control {
  height: 48px;
  border-radius: 10px;
  border: 1px solid #e5d5e8;
  background-color: #fff;
  color: var(--login-text);
}
.auth-form .form-control::placeholder {
  color: #9aa3af;
}
.auth-form .form-control:focus {
  border-color: var(--login-primary);
  box-shadow: 0 0 0 3px rgba(232, 4, 180, 0.18);
}

/* Lembrar-me e Esqueci a senha */
.forgot-link {
  color: var(--login-muted);
  font-size: 0.92rem;
}
.forgot-link:hover { color: var(--login-primary); }

/* Divisor "ou" para entradas sociais */
.divider {
  position: relative;
  text-align: center;
  color: var(--login-muted);
}
.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 36%;
  height: 1px;
  background: var(--line);
}
.divider::before { left: 0; }
.divider::after { right: 0; }
.divider span {
  background: var(--login-card-bg);
  padding: 0 10px;
}

/* Botões sociais (somente UI) */
.social-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.btn.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--login-text);
}
.btn.btn-social.btn-google svg circle,
.btn.btn-social.btn-google svg path { stroke: var(--login-primary); }

/* Lista de benefícios com ícones simples */
.benefits {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 16px;
}
.benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--login-muted);
}
.benefits svg { flex-shrink: 0; }

/* Texto de termos e privacidade */
.terms {
  color: var(--login-muted);
  font-size: 0.86rem;
}

/* Botão principal */
.btn.btn-primary.btn-block {
  height: 50px;
  border-radius: 12px;
  background: var(--login-primary);
  border: 1px solid var(--login-primary);
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.btn.btn-primary.btn-block:hover {
  background: var(--login-primary-hover);
  box-shadow: 0 8px 22px rgba(232, 4, 180, 0.24);
  transform: translateY(-1px);
}
.btn.btn-primary.btn-block:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(232, 4, 180, 0.18);
}

/* Spinner do botão */
#login-submit-btn { position: relative; }
#login-submit-btn .btn-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.6);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Utilitários */
.d-none { display: none !important; }

/* Responsividade */
@media (max-width: 768px) {
  .social-group { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
  .auth-form { padding: 24px; }
  .benefits { grid-template-columns: 1fr; }
}