/* ============================================================
   REGISTER.CSS — Ninja Revolution 2026 (Criar Conta)
   Reaproveita a navbar e os tokens de cor (--lp-*) do landing.css.
   ============================================================ */

body.reg-body { min-height: 100vh; display: flex; flex-direction: column; }

.rg-wrap {
  flex: 1;
  display: flex;
  min-height: calc(100vh - 66px);
}

/* ── COLUNA VISUAL (personagem + card de destaque) ───────────── */
.rg-visual {
  position: relative;
  flex: 1.15;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    radial-gradient(ellipse 900px 700px at 50% 28%, rgba(220,225,235,.14), transparent 62%),
    var(--lp-bg);
}
.rg-visual::after {
  /* sombreado nas bordas pra integrar com o painel escuro do formulário */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(10,10,16,.9) 100%);
  pointer-events: none;
}
.rg-personagem {
  position: relative;
  z-index: 1;
  height: 92%;
  max-height: 720px;
  width: auto;
  filter: drop-shadow(0 25px 45px rgba(0,0,0,.5));
}

.rg-caption-card {
  position: absolute;
  left: 5%;
  bottom: 6%;
  z-index: 2;
  max-width: 340px;
  background: rgba(12,16,26,.72);
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  padding: 16px 18px;
  backdrop-filter: blur(8px);
}
.rg-caption-card h3 {
  margin: 0 0 6px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lp-text);
}
.rg-caption-card p {
  margin: 0 0 12px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--lp-text-dim);
}
.rg-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.rg-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 600;
  color: #7fe0b8;
  background: rgba(53,212,136,.12);
  border: 1px solid rgba(53,212,136,.3);
  padding: 4px 9px;
  border-radius: 999px;
}

/* ── COLUNA DO FORMULÁRIO ─────────────────────────────────────── */
.rg-form-col {
  flex: 1;
  min-width: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-bg);
  padding: 40px 32px;
}
.rg-card { width: 100%; max-width: 360px; }

.rg-card h1 {
  margin: 0 0 6px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--lp-text);
}
.rg-card-sub {
  margin: 0 0 26px;
  font-size: .85rem;
  color: var(--lp-text-dim);
}

.rg-field { margin-bottom: 16px; }
.rg-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--lp-text-dim);
  margin-bottom: 6px;
}
.rg-input-wrap { position: relative; }
.rg-input-icon {
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  font-size: .88rem;
  color: var(--lp-text-faint);
  pointer-events: none;
}
.rg-input {
  width: 100%;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-line);
  color: var(--lp-text);
  font-family: 'Chakra Petch', sans-serif;
  font-size: .88rem;
  padding: 11px 14px 11px 36px;
  border-radius: 8px;
  transition: border-color .15s ease;
}
.rg-input::placeholder { color: var(--lp-text-faint); }
.rg-input:focus { outline: none; border-color: var(--lp-flame-1); }
.rg-input-status {
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  font-weight: 700;
  font-size: .85rem;
}

.rg-btn {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--lp-flame-1), var(--lp-flame-2));
  color: #1a0d02;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .5px;
  transition: transform .12s ease, filter .15s ease;
}
.rg-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.rg-btn:active { transform: translateY(0); }

.rg-login-link {
  text-align: center;
  margin: 18px 0 0;
  font-size: .82rem;
  color: var(--lp-text-dim);
}
.rg-login-link a { color: var(--lp-flame-1); font-weight: 700; }
.rg-login-link a:hover { color: var(--lp-flame-2); }

.rg-fineprint {
  margin: 18px 0 0;
  font-size: .68rem;
  line-height: 1.5;
  color: var(--lp-text-faint);
  text-align: center;
}

.reg-msg {
  display: none;
  margin-top: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
}
.reg-msg.show { display: block; }
.reg-msg.error   { background: rgba(255,77,94,.1);  color: #ffb3bb; border: 1px solid rgba(255,77,94,.3); }
.reg-msg.success { background: rgba(53,212,136,.1); color: #a8f0cf; border: 1px solid rgba(53,212,136,.3); }

/* ── RESPONSIVO ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rg-wrap { flex-direction: column; }
  .rg-visual { min-height: 320px; flex: none; }
  .rg-visual::after { background: linear-gradient(180deg, transparent 55%, rgba(10,10,16,.95) 100%); }
  .rg-caption-card { left: 50%; transform: translateX(-50%); bottom: 4%; text-align: center; }
  .rg-tags { justify-content: center; }
  .rg-form-col { padding: 32px 20px 48px; }
}