/**
 * form-validate.css  —  Customer Portal (light theme)
 * Scoped validation UI for register.html.
 * Linked after styles.css so cascade overrides work.
 * Prefix: fv- (form-validate)
 */

/* ── Input border states ───────────────────────────────────────────────── */
.tf-field-input.fv-valid {
  border-color: #16a34a !important;
  transition: border-color .2s ease;
}
.tf-field-input.fv-invalid {
  border-color: #dc2626 !important;
  transition: border-color .2s ease;
}

/* ── Inline field message ──────────────────────────────────────────────── */
.fv-msg {
  display: none;
  font-size: 11.5px;
  line-height: 1.45;
  margin-top: 4px;
  padding-left: 2px;
}
.fv-msg.fv-err {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #dc2626;
}
.fv-msg.fv-ok {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
}

/* ── Password strength rules ───────────────────────────────────────────── */
/* Customer portal reuses the existing .pw-rule / #passwordHelp system.
   These styles complement the existing ones in styles.css. */
.pw-rule {
  font-size: 12px;
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .15s;
  color: #9ca3af;
}
.pw-rule::before {
  content: '✗';
  font-size: 11px;
  color: #ef4444;
  flex-shrink: 0;
}
.pw-rule.success {
  color: #16a34a;
}
.pw-rule.success::before {
  content: '✓';
  color: #16a34a;
}
#passwordHelp {
  display: none;
  margin-top: 8px;
  padding: 10px 13px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
}