/* Theme's .form-clt only styles input/textarea (contact-wrapper-2 variant), not select —
   the enquiry-type dropdown is a new field with no static design, so this matches the
   existing input styling exactly. Matching padding/line-height alone isn't enough: a
   closed <select> is sized by the browser's own native chrome rather than fully
   respecting line-height the way a text input does, so it still renders visibly shorter.
   Pinning height explicitly to the input's own rendered height (padding 18px*2 +
   line-height 28px + border 1px*2 = 66px) is what actually makes them line up. */
.contact-wrapper-2 .contact-content .contact-form-items .form-clt select {
  border: 1px solid var(--border);
  color: var(--text);
  padding: 18px 20px;
  line-height: 28px;
  height: 66px;
  border-radius: 5px;
  width: 100%;
  background-color: var(--white);
}

/* Validation state: the theme's .form-clt inputs/selects/textareas aren't Bootstrap
   .form-control components, so Bootstrap's own red-border validation styling doesn't
   reach them automatically — this adds it back, scoped to .was-validated (added by
   assets/js/form-validation.js on submit) so fields stay untouched until then. */
.contact-form-items.was-validated .form-clt input:invalid,
.contact-form-items.was-validated .form-clt select:invalid,
.contact-form-items.was-validated .form-clt textarea:invalid {
  border-color: #e53935;
}
.contact-form-items.was-validated .form-clt input:valid,
.contact-form-items.was-validated .form-clt select:valid,
.contact-form-items.was-validated .form-clt textarea:valid {
  border-color: #34a853;
}
.contact-form-items .invalid-feedback {
  color: #e53935;
  font-size: 13px;
  margin-top: 6px;
}

/* Required-field asterisk: the theme's own span color rule (contact-wrapper-2
   .contact-content .contact-form-items .form-clt span) is 5 classes deep and beats a
   plain .req-asterisk selector on specificity alone — matched here to actually win. */
.contact-wrapper-2 .contact-content .contact-form-items .form-clt span.req-asterisk {
  color: #e53935;
}

/* .contact-form-items .form-clt span sets margin-bottom:20px + display:inline-block —
   meant for the outer label span, but it's a plain descendant selector so it also hits
   the nested .req-asterisk span, doubling up the gap under the label. Reset just the
   nested one back to normal inline flow. */
.contact-form-items .form-clt span.req-asterisk {
  margin-bottom: 0;
  display: inline;
}