/* Additions on top of the mockup's design system for real form
   submission: inline validation errors and a status banner for the
   no-JS fallback. Everything else on the forms page is unchanged. */

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #C6433A;
}

.field-error {
  display: block;
  color: #C6433A;
  font-size: .82rem;
  margin-top: 6px;
}

.form-status {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius);
  margin-bottom: 22px;
  font-size: .95rem;
}

.form-status--success {
  background: rgba(47, 134, 214, .1);
  border: 1px solid rgba(47, 134, 214, .35);
}

.form-status--error {
  background: rgba(198, 67, 58, .08);
  border: 1px solid rgba(198, 67, 58, .35);
}