/* register.css — was nur die Registrierung braucht.
 *
 * Fehlerzustaende der Eingabefelder, der Hinweiskasten, der Wechsel zur
 * Anmeldung und der Erfolgshinweis. Der gemeinsame Teil steht in
 * css/auth.css und wird davor eingebunden.
 */

.reg-input.error{border-color:color-mix(in srgb, var(--magenta) 45%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--magenta) 10%, transparent);}

.reg-error-msg{
  font-size:12px;color:var(--magenta);margin-top:-8px;margin-bottom:8px;
  display:none;align-items:center;gap:5px;
}

.reg-error-msg.visible{display:flex;}

.reg-alt{
  width:100%;padding:12px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.65);font-size:13px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s,border-color .2s;
}

.reg-alt:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);}

.reg-alt i{font-size:18px;}

.reg-hint{
  margin-top:16px;padding:12px 14px;border-radius:var(--r-lg);
  background:var(--accent-t05);border:1px solid var(--accent-t10);
  font-size:12px;color:var(--text-muted-dark-bg);line-height:1.6;text-align:center;
}

.reg-hint i{color:var(--green-fg);font-size:13px;vertical-align:middle;}

html.dark .reg-hint i{color:var(--green);}

@keyframes pop-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

.reg-success-hint{
  font-size:12px;color:var(--text-muted-dark-bg);margin-top:24px;line-height:1.6;
}

.reg-success-hint a{color:rgba(255,255,255,.55);cursor:pointer;}

.reg-success-hint a:hover{color:#fff;}

.reg-spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid color-mix(in srgb, var(--navy) 30%, transparent);border-top-color:var(--navy);
  animation:spin .6s linear infinite;flex-shrink:0;
}

@keyframes spin{to{transform:rotate(360deg)}}