/* ---------- Sign Up page additions ---------- */

/* Only what Sign Up adds: the card, fields, icons, floating labels, password toggles,
   buttons and error box come from login.css. */

/* ---------- Success message ---------- */

.form-success {
  width: 100%;
  background: rgba(8, 120, 48, 0.15);
  border: 1px solid rgba(8, 120, 48, 0.5);
  color: #ffffff;
  border-radius: var(--radius-inner);
  padding: var(--space-2) var(--space-3);
  font-size: 0.85rem;
  text-align: left;
}

/* ---------- Generated username field ---------- */

/* Filled in from the first and last name; not editable. */
.field__input--readonly {
  background: #fafbfa;
  color: var(--color-text-muted);
  font-weight: 700;
  cursor: default;
}

.field__input--readonly:hover {
  border-color: var(--color-border);
  border-radius: var(--radius-inner);
  box-shadow: none;
}

.field__input--readonly:focus {
  border-color: var(--color-border);
  box-shadow: none;
}

.field__input--readonly + .field__label {
  background: #fafbfa;
}

/* ---------- Username hint ---------- */

/* Sits right under the Username field (the form's gap is pulled in). */
.field-hint {
  margin-top: calc(-1 * var(--space-2));
  padding-left: var(--space-2);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: left;
}

/* Reminder above the name fields: use the complete real name (the username is made from it). */
.form-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  background: rgba(240, 173, 47, 0.16);
  border: 1px solid rgba(240, 173, 47, 0.6);
  color: #ffffff;
  border-radius: var(--radius-inner);
  padding: var(--space-2) var(--space-3);
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: left;
}

.form-notice i {
  margin-top: 3px;
  color: #f0ad2f;
}