/* ZenSolar Enquiry form -- DISPATCH-2A-20260902, fixed under
 * DISPATCH-2A-FIX-20260902 (D1: visible outcome notices; D2: mobile bottom
 * spacer so Send clears a third-party fixed chat widget -- see the .zs-enquiry-notice*
 * and .zs-enquiry-mobile-spacer rules below). Extended under
 * DISPATCH-2B-20260902 (BUILD-2B) with a fifth, optional field -- a bill
 * upload -- see .zs-optional and input[type="file"] rules below. No new
 * dependency on any --zs-* custom property was introduced.
 * Self-contained: /comparing-foxess-with-deye/ loads tokens.css, qi-base.css,
 * qi-wp.css, qi-a11y.css, services.css, blog.css, article.css,
 * assessment.css, completion.css, full-site.css, legacy-cta.css plus 4
 * WooCommerce core sheets -- NOT zensolar.css, zensolar-chrome.css or
 * global-styles.css. There is no --zs-* custom property anywhere on this
 * page. Every value below is a literal (several match the QI palette
 * already shipped in tokens.css / qi-base.css / qi-a11y.css -- ink #090b0a,
 * paper #f7f8f5, action-green #67b85b, zen-green-dark #347d3b, the
 * qi-a11y.css-validated muted #636864 at ~5.4:1 on white, and the
 * .cta-button convention of black text on the green button -- written
 * literally on purpose so this file has zero dependency on load order or on
 * which other stylesheets a future host page happens to enqueue).
 */

.zs-enquiry {
  margin: 56px 0 8px;
  padding: 32px clamp(20px, 4vw, 40px);
  background: #ffffff;
  border: 1px solid rgba(9, 11, 10, .14);
  border-radius: 16px;
  color: #090b0a;
  font-family: var(--zs-font, "Montserrat", sans-serif);
  max-width: 640px;
}

.zs-enquiry h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #090b0a;
}

.zs-enquiry-intro {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.5;
  color: #636864;
}

/* D1: visible outcome notices (expired / limited / failed / retry). Default
 * is a soft amber -- not accusatory, since none of these four are the
 * visitor's fault. "failed" (our bug, not their mistake) uses the same red
 * treatment as the existing validation-errors box below, since it's the one
 * state that really is broken on our side. */
.zs-enquiry-notice {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid #a86a00;
  border-radius: 8px;
  background: #fff6e0;
  color: #5c3d00;
  font-size: 14px;
  line-height: 1.5;
}
.zs-enquiry-notice p { margin: 0; }
.zs-enquiry-notice-failed {
  border-color: #b3261e;
  background: #fdecea;
  color: #7a1912;
}

.zs-enquiry-errors {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid #b3261e;
  border-radius: 8px;
  background: #fdecea;
  color: #7a1912;
  font-size: 14px;
}
.zs-enquiry-errors p { margin: 0 0 6px; font-weight: 600; }
.zs-enquiry-errors ul { margin: 0; padding-left: 18px; }

.zs-field { margin: 0 0 18px; }

.zs-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #090b0a;
}

.zs-field .zs-required {
  color: #117405;
  font-weight: 500;
}

.zs-field .zs-optional {
  color: #636864;
  font-weight: 500;
}

.zs-field input[type="file"] {
  display: block;
  width: 100%;
  padding: 10px 0;
  color: #090b0a;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.zs-field input[type="file"]:focus-visible {
  outline: 2px solid #117405;
  outline-offset: 2px;
}

.zs-field input[type="text"],
.zs-field input[type="email"],
.zs-field input[type="tel"],
.zs-field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(9, 11, 10, .22);
  border-radius: 8px;
  background: #ffffff;
  color: #090b0a;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
}

.zs-field textarea {
  min-height: 110px;
  resize: vertical;
}

.zs-field input:focus-visible,
.zs-field textarea:focus-visible {
  outline: 2px solid #117405;
  outline-offset: 2px;
  border-color: #117405;
}

.zs-field-error input,
.zs-field-error textarea {
  border-color: #b3261e;
}

.zs-field-error-text {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #7a1912;
}

/* B57: consent tick box, the same sentence and behaviour as the energy
 * assessment form. Literal values, like the rest of this file. */
.zs-enquiry .zs-field-consent .zen-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  background: #f7f8f5;
  border: 1px solid rgba(9, 11, 10, .14);
  border-radius: 8px;
  color: #090b0a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.zs-enquiry .zs-field-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 3px 0 0;
  accent-color: #117405;
}
.zs-enquiry .zs-field-error.zs-field-consent .zen-consent { border-color: #b3261e; }

/* Honeypot: hidden from sighted users (off-screen) AND from screen readers
 * (aria-hidden on the wrapper) AND from keyboard tab order (tabindex="-1"
 * on the input). Real users of any kind never encounter it. */
.zs-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.zs-enquiry-submit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #117405;
  border-radius: 8px;
  padding: 14px 20px;
  background: #1df016;
  color: #000000;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.zs-enquiry-submit:hover { background: #4d9d48; }
.zs-enquiry-submit:active { transform: scale(.97); }
.zs-enquiry-submit:focus-visible {
  outline: 2px solid #117405;
  outline-offset: 2px;
}

.zs-enquiry-success {
  padding: 18px 20px;
  border: 1px solid #117405;
  border-radius: 8px;
  background: #eef8ec;
  color: #143d10;
  font-size: 15px;
}

@media (max-width: 480px) {
  .zs-enquiry {
    padding: 24px 18px;
    margin: 40px 0 8px;
  }
}

/* D2: a third-party GoHighLevel chat widget (injected by wp-headers-and-footers,
 * NOT by this plugin -- see BUILD-2A-FIX.md) sits position:fixed across the
 * bottom ~150-170px of the mobile viewport, in a shadow DOM. It is not ours
 * to touch (its removal/relocation is Conan's call, not this dispatch's).
 * This spacer is the part that IS ours: it adds empty space of our own
 * container, at mobile widths only, below the Send button, so the button's
 * natural resting scroll position clears that band instead of landing in
 * it. Zero height above 768px, so 1440 (and any other desktop width) is
 * unaffected. */
.zs-enquiry-mobile-spacer {
  height: 0;
}

@media (max-width: 768px) {
  .zs-enquiry-mobile-spacer {
    height: 260px;
  }
}

/* Q14 (2026-09-03): the D2 mobile-spacer above adds trailing scroll room
 * after the form, but does not stop the browser's own "scroll target into
 * view" logic (native focus-scroll, and any scrollIntoView/click-driven
 * scroll -- confirmed via document.elementFromPoint()) from resting the
 * Send button flush against the viewport's bottom edge, which is exactly
 * where the GHL chat widget's ~150-170px fixed hot-zone (see D2 note
 * above) sits -- so the button's centre is still the chat widget's
 * hit-area, not the button, once scrolled to. scroll-margin-bottom is the
 * standard CSS mechanism scroll-into-view logic honours for this: it
 * reserves clearance below the button itself, independent of trailing
 * page content, so the button never comes to rest inside the widget's
 * footprint. No GHL/LeadConnector loader config exists for this (checked
 * the loader's own attribute list -- no offset/position attribute is
 * read), so this is a page-side fix, not a widget-side one. */
@media (max-width: 767px) {
  .zs-enquiry-submit {
    scroll-margin-bottom: 190px;
  }
}