:root {
  --primary: #8b5cf6;
  --primary-hover: #7c3aed;
  --bg-gradient-start: #4c1d95;
  --bg-gradient-end: #1e1b4b;
  --text-white: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.7);
  --input-bg: #ffffff;
  --input-text: #1e293b;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: var(--text-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 2.5rem 2rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 420px;
  animation: slideUp 0.6s ease-out;
  text-align: center;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.logo-area { margin-bottom: 1.5rem; display: flex; justify-content: center; align-items: center; }
.logo-area img { max-width: 160px; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); }
.subtitle { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 2rem; font-weight: 400; }

#indicacao-info {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
}

.form-group { margin-bottom: 1rem; text-align: left; }
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: rgba(255, 255, 255, 0.9); margin-left: 0.5rem; }

input[type="text"], input[type="tel"], input[type="password"] {
  width: 100%; padding: 1rem 1.2rem;
  border-radius: 50px; border: 2px solid transparent;
  font-size: 0.95rem; background: var(--input-bg);
  color: var(--input-text); font-weight: 500;
  transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
input::placeholder { color: #94a3b8; font-weight: 400; }
input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.3); }
input.valid { border-color: #34d399; background: #f0fdf4; }
input.invalid { border-color: #f87171; background: #fef2f2; }

.error-message, .success-message {
  font-size: 0.75rem; margin-top: 0.3rem; margin-left: 1rem; min-height: 1rem;
  display: flex; align-items: center; gap: 0.3rem; font-weight: 500;
}
.error-message { color: #fca5a5; }
.success-message { color: #6ee7b7; }

/* CHECKBOX COM DESTAQUE VERMELHO */
.checkbox-group {
  display: flex; align-items: flex-start; gap: 0.8rem;
  margin-bottom: 1.5rem; font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8); text-align: left; margin-top: 0.5rem;
  padding: 1rem; background: rgba(0,0,0,0.2);
  border-radius: 12px; border: 2px solid #ef4444; /* Destaque Vermelho */
}
.checkbox-group input { margin-top: 0.3rem; accent-color: var(--primary); width: 18px; height: 18px; cursor: pointer; }

/* BOTÃO CINZA SE DESABILITADO */
button {
  width: 100%; padding: 1rem;
  background: var(--input-bg); color: var(--primary-hover);
  border: none; border-radius: 50px; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: all 0.3s;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-transform: uppercase; letter-spacing: 0.5px;
}
button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
button:active:not(:disabled) { transform: translateY(0); }

button:disabled {
  background: #475569; /* Cinza Escuro */
  color: #94a3b8; /* Texto Cinza Claro */
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.spinner {
  width: 18px; height: 18px; border: 2.5px solid rgba(79, 70, 229, 0.3);
  border-top-color: var(--primary-hover); border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.redirect-link { margin-top: 1.5rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.redirect-link a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,0.5); }
.redirect-link a:hover { border-bottom-style: solid; }