/* WPForms styling to match the site's design system — added 2026-09-13 for the
   Microsoft CSP for Business lead-capture form (WPForms Lite ships only generic
   default styling with no theme integration). Scoped to .wpforms-container so it
   never leaks onto anything else; enqueued only on pages that actually embed a
   [wpforms] shortcode (see includes/enqueue.php). */

.wpforms-container {
  font-family: inherit;
  max-width: 640px;
}

.wpforms-field-label {
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--e-global-color-text);
  margin-bottom: 6px;
}

.wpforms-field-required .wpforms-required-label {
  color: var(--e-global-color-primary);
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--e-global-color-text);
  width: 100%;
  height: auto !important; /* overrides XStore's "button, input, select, textarea { height: var(--et_inputs-height) }" - fighting our own padding otherwise */
  line-height: normal !important; /* same theme rule also forces line-height:1, which combined with the fixed height above clips/misplaces text */
  padding: 12px 14px;
  border: 1px solid rgba(26,26,26,0.15); /* neutral border, 15% of --e-global-color-text */
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  outline: none;
  border-color: var(--e-global-color-primary);
  box-shadow: 0 0 0 3px rgba(30,144,255,0.15); /* 15% of --e-global-color-primary */
}

.wpforms-container textarea {
  min-height: 110px;
  resize: vertical;
}

.wpforms-field {
  margin-bottom: 12px;
  padding-bottom: 0 !important; /* WPForms' own base CSS (.wpforms-container .wpforms-field) adds a 15px padding-bottom on top of this margin - stacking into the "too much space between fields" complaint */
}

.wpforms-field-checkbox fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.wpforms-field-checkbox legend.wpforms-field-label {
  text-transform: none; /* overrides the theme's default <legend> uppercase styling */
}

.wpforms-field-checkbox ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wpforms-field-checkbox li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpforms-field-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0 !important; /* WPForms/theme default is an asymmetric 2px/0/3px/10px margin, which combined with the label's inherited ~27px line-height threw off the flex vertical-centering below - spacing now comes purely from the li's own gap:8px instead */
  accent-color: var(--e-global-color-primary);
  flex-shrink: 0;
}

.wpforms-field-checkbox .wpforms-field-label-inline {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3; /* was inheriting ~1.8 from the page's body text line-height, inflating the row height the checkbox was being centered against */
  color: var(--e-global-color-text);
  font-weight: 400;
}

.wpforms-field-description {
  font-size: 13px;
  color: rgba(26,26,26,0.6); /* 60% of --e-global-color-text */
  margin-top: 4px;
}

.wpforms-submit-container {
  margin-top: 8px;
}

.wpforms-submit {
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: var(--e-global-color-primary);
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  height: auto !important; /* same XStore "form button { height: var(--et_inputs-height) }" conflict as the fields above - this is what was pushing the button text off-center */
  line-height: normal !important;
  display: inline-flex; /* belt-and-suspenders centering, independent of the height/line-height fix above */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.wpforms-submit:hover:not(:disabled) {
  opacity: 0.9;
}

.wpforms-error-container,
.wpforms-field-invalid-input,
.wpforms-error {
  color: #c0392b; /* standard error red, not part of the brand palette by design */
  font-size: 13px;
}