/*
 * Form errors: one look everywhere.
 * The message sits under the field; the field gets a red border and a soft red ring.
 * Both go when the field is corrected (assets/form-errors.js, assets/checkout-steps.js,
 * and Contact Form 7's own validation).
 */

/*
 * Account forms (form-errors.js). The class is repeated on purpose: style.css sets the
 * field borders with two-class !important rules (.woocommerce-form-register input[type=...],
 * and its :focus twin), so one class here would lose to them.
 */
html body input.chf-field-invalid.chf-field-invalid.chf-field-invalid.chf-field-invalid,
html body select.chf-field-invalid.chf-field-invalid.chf-field-invalid.chf-field-invalid,
html body textarea.chf-field-invalid.chf-field-invalid.chf-field-invalid.chf-field-invalid,
html body .chf-has-error.chf-has-error.chf-has-error .select2-container .select2-selection,
/* Checkout, step 1 (checkout-steps.js) */
html body.woocommerce-checkout .chf-co .chf-co-invalid input.input-text,
html body.woocommerce-checkout .chf-co .chf-co-invalid select,
html body.woocommerce-checkout .chf-co .chf-co-invalid textarea,
html body.woocommerce-checkout .chf-co .chf-co-invalid .select2-container .select2-selection,
/* Contact form */
html body .wpcf7 input.wpcf7-not-valid,
html body .wpcf7 select.wpcf7-not-valid,
html body .wpcf7 textarea.wpcf7-not-valid {
  border-color: #E53E3E !important;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, .16) !important;
  outline: none !important;
}

/* A tick box has no border to colour, so it gets a red outline instead. */
html body input[type="checkbox"].chf-field-invalid.chf-field-invalid.chf-field-invalid.chf-field-invalid,
html body input[type="radio"].chf-field-invalid.chf-field-invalid.chf-field-invalid.chf-field-invalid {
  box-shadow: none !important;
  outline: 2px solid #E53E3E !important;
  outline-offset: 2px;
}

/* The message under the field */
.chf-field-error {
  display: block;
  margin-top: 6px;
  color: #C53030;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

/* An error that is not about one field (shown at the top of the form) */
.chf-form-error-box {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #F5B5B5;
  border-radius: 10px;
  background: #FFF5F5;
  color: #9B2C2C;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}