/* ==========================================================================
   Contact form restyle - matches the Project Cost Calculator.
   Targets the Avada form at the bottom of /dock-deck-resurfacing/ (form ID
   3552). To style a different Avada form, change every ".fusion-form-3552"
   below to that form's ID class.
   Loaded by the Complete Plugin - Deck & Dock Calculator plugin; no pasting needed.
   ========================================================================== */

/* Field labels ("Contact Info", "Your Address", "Request Samples", "Your Message") */
.fusion-form-3552 .fusion-form-field > label,
.fusion-form-3552 .fusion-form-label-wrapper label,
.fusion-form-3552 legend .label {
  font-family: Poppins, Arial, Helvetica, sans-serif;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.55;
  color: #1d1d1f !important;
  margin-bottom: 6px;
}
.fusion-form-3552 .fusion-form-element-required { color: #0089f7; text-decoration: none; border: 0; }

/* Text inputs and the message box: soft grey fill, no outline, 12px corners */
.fusion-form-3552 input.fusion-form-input,
.fusion-form-3552 textarea.fusion-form-input,
.fusion-form-3552 select.fusion-form-input {
  min-height: 48px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background-color: rgba(0, 3, 42, .05) !important;
  box-shadow: inset 0 0 0 1.5px transparent !important;
  font-family: Poppins, Arial, Helvetica, sans-serif;
  font-size: 16px !important; /* 16px stops iPhones zooming in on focus */
  color: #1d1d1f !important;
  transition: box-shadow .15s, background-color .15s;
}
.fusion-form-3552 select.fusion-form-input { padding-right: 40px !important; }
.fusion-form-3552 .fusion-select-wrapper .select-arrow { border: 0 !important; background: none !important; }
.fusion-form-3552 textarea.fusion-form-input { min-height: 120px; padding: 12px 14px !important; line-height: 1.55; }
.fusion-form-3552 .fusion-form-input::placeholder { color: #9a9aa3 !important; opacity: 1; }

/* Focus: white field with a blue ring, same as the calculator */
.fusion-form-3552 input.fusion-form-input:focus,
.fusion-form-3552 textarea.fusion-form-input:focus,
.fusion-form-3552 select.fusion-form-input:focus {
  outline: 0 !important;
  background-color: #fff !important;
  box-shadow: inset 0 0 0 2px #0089f7 !important;
}

/* Fields with an icon (phone, street address) */
.fusion-form-3552 .fusion-form-input-with-icon > i { color: #9a9aa3 !important; left: 14px; font-size: 14px; }
.fusion-form-3552 .fusion-form-input-with-icon input.fusion-form-input { padding-left: 40px !important; }

/* Checkboxes ("I would like to request samples" / "...schedule a quote").
   Only the empty box is restyled; the ticked state keeps the site's existing
   blue checkmark image. */
.fusion-form-3552 .fusion-form-checkbox label,
.fusion-form-3552 .fusion-form-radio label {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #4d4d4d !important;
}
.fusion-form-3552 .fusion-form-checkbox label::before {
  border: 0 !important;
  border-radius: 6px !important;
  background-color: rgba(0, 3, 42, .08) !important;
  transition: background-color .15s;
}
.fusion-form-3552 .fusion-form-checkbox input:focus-visible + label::before { box-shadow: 0 0 0 3px rgba(0, 137, 247, .35); }

/* Small print under the message box */
.fusion-form-3552 .fusion-text:has(+ .fusion-form-submit-field) p { font-size: 14px; font-weight: 400; line-height: 22px; color: rgb(144, 147, 172); }

/* Send button: #0089F7, white text, 8px corners, #1799FF on mouseover */
.fusion-form-3552 .fusion-form-submit-field .fusion-button {
  min-height: 52px;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #0089f7 !important;
  color: #fff !important;
  font-family: Poppins, Arial, Helvetica, sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background-color .2s, transform .1s ease-out;
}
.fusion-form-3552 .fusion-form-submit-field .fusion-button:hover,
.fusion-form-3552 .fusion-form-submit-field .fusion-button:focus { background: #1799ff !important; }
.fusion-form-3552 .fusion-form-submit-field .fusion-button:active { transform: scale(.97); }
.fusion-form-3552 .fusion-form-submit-field .fusion-button .fusion-button-text,
.fusion-form-3552 .fusion-form-submit-field .fusion-button i { color: #fff !important; }

/* One-line address: the street field keeps Google autocomplete and shows the
   full address. City / State / Zip are hidden but still filled in automatically
   and still sent with the form. The script half of this is in decking-page.js. */
.fusion-form-3552 .fusion-builder-row-inner:has(#address_auto_city) { display: none !important; }

/* Samples / quote cards. Each choice is a rounded card; ticking it highlights
   the card and opens its follow-up fields inside (decking-page.js moves those
   fields into the card). */
.fusion-form-3552 .lml-choice {
  border: 1.5px solid rgba(0, 3, 42, .12) !important;
  border-radius: 16px !important;
  padding: 20px 20px 4px !important;
  margin-top: 34px !important;    /* clear space under the question above */
  margin-bottom: 24px !important; /* and above the divider below */
  background: #fff !important;
  transition: border-color .2s, box-shadow .2s;
}
.fusion-form-3552 .lml-choice:has(> .fusion-form-checkbox-field:first-child input:checked) {
  border-color: #0089f7 !important;
  box-shadow: 0 10px 28px -14px rgba(0, 137, 247, .55) !important;
}
.fusion-form-3552 .lml-choice > .fusion-form-field { width: 100%; }