/* ================================================================
   Shared form validation styles — apply consistent error UX across
   every customer-facing form on the site.

   Markup convention used by /assets/form-validate.js:
     <form data-validate novalidate>
       <input id="email" type="email" required>
       <div class="field-error" data-error-for="email"></div>
       …
     </form>

   The script adds .is-invalid to the field and writes the message
   into the matching .field-error element on blur (live), clears it
   on input, and runs a full sweep on submit (focusing the first
   invalid field). Forms that don't use this script can still pick
   up the visual styles by adding the same classes manually.
================================================================ */

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: #c0392b !important;
}
input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .14) !important;
}

/* Wrap radios/checkboxes in [data-validate-group="<name>"] to get a
   group-level invalid outline. */
[data-validate-group].is-invalid {
  outline: 2px solid rgba(192, 57, 43, .35);
  outline-offset: 4px;
  border-radius: 10px;
}

.field-error {
  display: block;
  font-size: 13px;
  color: #c0392b;
  line-height: 1.45;
  margin-top: 6px;
  min-height: 0;
}
.field-error:empty {
  display: none;
}