.demo-field-error {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.3;
  color: #d42a2a;
  font-weight: 500;
}

.demo-field.invalid input,
.demo-field.invalid textarea {
  border-color: #d42a2a;
}

.error-message {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.3;
  color: #d42a2a;
  font-weight: 500;
}

.terms-group input[type="checkbox"].invalid {
  outline: 2px solid #d42a2a;
  outline-offset: 2px;
}

.demo-inline-success {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #1b7a2a;
  background: rgba(27,122,42,0.06);
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
}

.demo-inline-error {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #b71c1c;
  background: rgba(183,28,28,0.04);
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
}

/* Submit button loading spinner */
.demo-submit{
  position: relative;
}
.demo-submit.loading{
  color: rgba(255,255,255,0.9);
  cursor: default;
}
.demo-submit.loading::after{
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.9);
  border-top-color: transparent;
  border-radius: 50%;
  animation: demo-spin 0.8s linear infinite;
}

@keyframes demo-spin{ from{transform: translateY(-50%) rotate(0);} to{transform: translateY(-50%) rotate(360deg);} }