/* =====================================================================
   Appslin — shared form validation styles (pairs with js/form-enhance.js)
   ===================================================================== */
.fe-error {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 6px 0 0; font-size: .8rem; line-height: 1.4; font-weight: 600; color: #c0262d;
  text-align: left; letter-spacing: 0; text-transform: none;
}
.fe-error::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 1px;
  border-radius: 50%; background: #c0262d; color: #fff; font-size: .66rem; font-weight: 800; line-height: 1;
}
.fe-hint { margin: 6px 0 0; font-size: .76rem; line-height: 1.4; color: #6c7f9c; text-align: left; }

input.fe-invalid, select.fe-invalid, textarea.fe-invalid,
.cc-select.fe-invalid .cc-toggle {
  border-color: #d93a41 !important;
  background-color: #fffafa !important;
}
input.fe-invalid:focus, select.fe-invalid:focus, textarea.fe-invalid:focus {
  box-shadow: 0 0 0 4px rgba(217, 58, 65, .14) !important; outline: none;
}

/* Dark form panels (navy backgrounds) */
.hx-contact-form .fe-error, .d1-contact .fe-error { color: #c0262d; }

/* Phone row: the error sits under both the code and the number */
.hx-phone + .fe-error, .phone-group + .fe-error { width: 100%; }

/* Keep side-by-side fields aligned when one shows a hint or error below it */
.hx-grid2, .form-row { align-items: start; }