/* =============================================================
   Lead Square Form (lead-square-form.php)
   Self-contained styling for the #enquiryForm partial.

   Everything is scoped under .lsq-form-container so the form renders
   identically wherever it is placed - hero section, popup modal, or any
   future location - without the host page adding bespoke CSS.
   ============================================================= */

/* The wrapper that hosts this partial carries the dedicated marker class
   .lsq-form-host (added in the three templates that render the form). We
   neutralise ONLY that marker so the host wrapper never draws its own box
   and the form is not double-wrapped. We deliberately do NOT target the
   shared wrapper classes (.ebook_banner_form, .banner_form) because
   .banner_form is reused by many other forms across the theme - restyling
   it globally would affect those unrelated popups. */
.lsq-form-host {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}

.lsq-form-container {
  background-color: #e3e5e4;
  padding: 30px 25px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

/* Optional form title, rendered inside the gray box above the fields. */
.lsq-form-container .lsq-form-title {
  text-align: center;
  margin: 0 0 20px;
  color: #1a1a1a;
  font-family: 'ProximaNova-Bold', Arial, sans-serif;
  font-size: 22px;
  line-height: 1.3;
}

/* Row/column grid relies on Bootstrap; guarantee sane gutters even if the
   host page's Bootstrap build differs. */
.lsq-form-container .row {
  margin-left: -8px;
  margin-right: -8px;
}

.lsq-form-container [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}

/* ---- Text / email / tel inputs ---- */
.lsq-form-container .form-control {
  font-family: 'ProximaNova-Regular', Arial, sans-serif;
  color: #313030;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.4;
}

.lsq-form-container .form-control::placeholder {
  color: #9a9a9a;
  opacity: 1;
}

.lsq-form-container .form-control:focus {
  outline: none;
  border-color: #f7971e;
  box-shadow: none;
}

/* ---- Country-code select2 dropdown ----
   Force the select2 single-select to match the height and look of the
   adjacent .form-control inputs. select2 injects its own markup, so these
   rules keep the two visually aligned in every context. */
.lsq-form-container .select2-container {
  width: 100% !important;
}

.lsq-form-container .select2-container .select2-selection--single {
  height: 48px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.lsq-form-container
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  line-height: normal;
  padding-left: 14px;
  color: #313030;
  font-family: 'ProximaNova-Regular', Arial, sans-serif;
  font-size: 15px;
}

.lsq-form-container
  .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  height: 46px;
}

/* ---- Agreement checkbox row ---- */
.lsq-form-container .checkbox-container {
  gap: 8px;
}

.lsq-form-container .checkbox-container input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}

.lsq-form-container .check-label label {
  margin: 0;
  font-size: 13px;
  color: #333;
  line-height: 1.3;
}

/* ---- Submit button ---- */
.lsq-form-container .submit-btn {
  width: 100%;
  text-align: center;
  text-transform: none;
  padding: 13px 0;
  font-family: 'ProximaNova-Regular', Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  background-image: linear-gradient(to right, #f7971e, #f44500) !important;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.lsq-form-container .submit-btn:hover,
.lsq-form-container .submit-btn:focus {
  filter: brightness(0.95);
  color: #ffffff;
  outline: none;
}

.lsq-form-container .submit-btn:after {
  display: none;
}

/* ---- Inline validation errors ---- */
.lsq-form-container .error {
  color: #d00;
  font-size: 12px;
  margin-top: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .lsq-form-container {
    padding: 20px 16px;
  }

  /* Keep the country-code and phone-number fields side by side on mobile,
     matching the desktop layout. Bootstrap's col-md-* classes collapse to
     full width below the md breakpoint, so we restore the 5/7 split here.
     The .ml-auto on the phone column is neutralised so the two sit flush. */
  .lsq-form-container #enquiryForm > .col-md-5 {
    flex: 0 0 41.666%;
    max-width: 41.666%;
  }

  .lsq-form-container #enquiryForm > .col-md-7 {
    flex: 0 0 58.333%;
    max-width: 58.333%;
    margin-left: 0 !important;
  }
}