/* Native lead form (src/_includes/partials/lead-form.njk). It reuses the live site's hidden Webflow
   form box, input and button classes; these rules only make that box visible and add the pieces
   Webflow's version didn't have. The 157 form pages load 14 different page stylesheets, so anything
   every page needs lives here or in webflow-shared.css. */

/* The page CSS sets .form-box-landscaping-design to display:none; show it as the flex column its own
   rules describe. The margin replaces .w-form's, which this box no longer has. */
.form-box-landscaping-design.lead-form {
  display: flex;
  margin: 0 0 15px;
}

/* The box aligns children to flex-start; stretch the form and state blocks to the full width the
   Fillout embed used to fill. */
.lead-form > form,
.lead-form > .w-form-done,
.lead-form > .w-form-fail {
  align-self: stretch;
  width: 100%;
}

.lead-form .contcat-submit-button[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.lead-form-error {
  color: #800020;
  font-family: Manrope, Arial, sans-serif;
  font-size: 14px;
}

/* First and last name side by side, like the Fillout form: Webflow's two-column .w-layout-grid
   (webflow-shared.css) trimmed to one row, stacked on small screens */
.lead-form .lead-form-row {
  grid-template-rows: auto;
  grid-column-gap: 30px;
}

.lead-form-cell {
  min-width: 0;
}

@media screen and (max-width: 767px) {
  .lead-form .lead-form-row {
    grid-template-columns: 1fr;
    grid-row-gap: 15px;
  }
}

/* Service select: the text inputs' look; the "Select a service" placeholder shows in placeholder grey */
.lead-form select.contact-input-field:invalid {
  color: #999;
}

/* Labeled textareas with the Fillout form's helper text */
.lead-form-label {
  margin-bottom: 4px;
  color: #000;
  font-family: Manrope, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.lead-form-optional {
  font-weight: 400;
}

.lead-form .lead-form-help {
  margin-bottom: 8px;
  color: #6b6b6b;
}

.lead-form textarea.contact-input-field {
  min-height: 120px;
  resize: vertical;
}

/* SMS consent: the checkbox sits inside its label, so the whole wording is the tap target, at least
   44px tall around a 24px box; the text wraps beside the box at any width */
.lead-form .lead-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  font-weight: 400;
  cursor: pointer;
}

.lead-form .lead-form-consent-input {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: #800020;
  cursor: pointer;
}

.lead-form .lead-form-consent-text {
  min-width: 0;
  color: #000;
}

/* Honeypot: moved off-screen rather than display:none, so it stays a normal field for bots that fill
   every input while people never see or reach it. */
.lead-form-company {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}