:root {
  --contact-error: #D92D20;
  --contact-error-soft: rgba(217, 45, 32, 0.12);
  --contact-success: #12B76A;
  --contact-success-soft: rgba(18, 183, 106, 0.12);
}

#name.contact-form-is-invalid,
#email.contact-form-is-invalid,
#subject.contact-form-is-invalid,
#message.contact-form-is-invalid {
  border-color: var(--contact-error);
  box-shadow: 0 0 0 3px var(--contact-error-soft);
}

#name.contact-form-is-valid,
#email.contact-form-is-valid,
#subject.contact-form-is-valid,
#message.contact-form-is-valid {
  border-color: var(--contact-success);
  box-shadow: 0 0 0 3px var(--contact-success-soft);
}

.contact-field-error {
  margin: 0.375rem 0 0;
  color: var(--contact-error);
  font-size: 0.75rem;
  line-height: 1.45;
}

.contact-field-error[hidden] { display: none; }

.contact-form-is-loading {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  cursor: wait;
  opacity: 0.82;
}

.contact-form-is-loading::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: contactFormSpin 0.72s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .contact-form-is-loading::before { animation: none; }
}