.amosha-field-error {
  display: block;
  margin-top: 5px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.amosha-invalid-control:not([type="checkbox"]),
.amosha-invalid-field {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent) !important;
}

.amosha-invalid-field > .amosha-invalid-control {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Required state belongs to the form UI, not only to a validation message. */
label:has(input:not([type="checkbox"])[required], textarea[required], select[required]) > span:first-child::after {
  content: " *";
  color: var(--danger);
  font-weight: 700;
}