/* ============================
   Unified LLP styling for Clio Grow [grow-contact-form]
   Scoped safely to #lf_form_container
   Brand colours: Yellow #ffbb0b, Charcoal #3d3d3d
   ============================ */

#lf_form_container{
  /* “Card” feel like the site’s clean blocks */
  background:#fff;
  border:1px solid rgba(61,61,61,.16);
  border-radius:20px;
  padding:24px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

#lf_form_container form{
  margin:0;
}

#lf_form_container h3{
  margin:0 0 14px;
  text-align: center;
  color:#3d3d3d;
  font-size:35px;
  line-height:1.25;
  font-weight:700;
}

#lf_form_container p{
  margin:0 0 14px;
}

#lf_form_container label.description{
  display:block;
  margin:0 0 6px;
  color:#3d3d3d;
  font-weight:600;
  font-size:14px;
  line-height:1.3;
}

/* Inputs */
#lf_form_container input[type="text"],
#lf_form_container input[type="email"],
#lf_form_container textarea{
  width:100%;
  box-sizing:border-box;
  background:#fff;
  color:#3d3d3d;
  border:1px solid rgba(61,61,61,.22);
  border-radius:3px;
  padding:12px 14px;
  font-size:16px;
  line-height:1.35;
  transition: border-color .2s ease, box-shadow .2s ease;
}

#lf_form_container textarea{
  min-height:150px;
  resize:vertical;
}

#lf_form_container input::placeholder,
#lf_form_container textarea::placeholder{
  color:rgba(61,61,61,.55);
}

/* Focus state (Unified yellow) */
#lf_form_container input[type="text"]:focus,
#lf_form_container input[type="email"]:focus,
#lf_form_container textarea:focus{
  outline:none;
  border-color:#ffbb0b;
  box-shadow:0 0 0 3px rgba(255,187,11,.25);
}

/* Disclaimer checkbox row */
#lf_form_container #lf_disclaimer{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

#lf_form_container #lf_disclaimer input[type="checkbox"]{
  margin-top:3px;
  width:18px;
  height:18px;
  accent-color:#ffbb0b;
}

/* Full-width, centered submit button */
#lf_form_container .buttons{
  text-align:center;
}

#lf_form_container input#saveForm.button_text{
  display:block;
  width:100% !important;
  max-width:520px;          /* optional: keeps it from being comically wide on big screens */
  margin:12px auto 0 !important;
}


#lf_form_container input#saveForm.button_text{
  appearance:none;
  -webkit-appearance:none;
  background:#ffbb0b !important;
  color:#3d3d3d !important;
  border:1px solid #ffbb0b !important;
  border-radius:3px !important;
  padding:12px 22px !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:.02em;
  cursor:pointer;
}

#lf_form_container input#saveForm.button_text:hover{
  filter:brightness(.96);
}

#lf_form_container input#saveForm.button_text:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,187,11,.35);
}

#lf_form_container input#saveForm.button_text:disabled{
  opacity:.65;
  cursor:not-allowed;
}

/* Messages */
#lf_form_container .lf_errors{
  margin:14px 0 0;
  padding:12px 14px;
  border-left:4px solid #b00020;
  background:rgba(176,0,32,.06);
  border-radius:3px;
  color:#3d3d3d;
}

#lf_form_container .lf_errors li{
  margin-left:18px;
}

#lf_form_container .lf_success{
  margin:14px 0 0;
  padding:12px 14px;
  border-left:4px solid #2e7d32;
  background:rgba(46,125,50,.10);
  border-radius:3px;
  color:#3d3d3d;
}

#lf_form_container .lf_failure{
  margin:14px 0 0;
  padding:12px 14px;
  border-left:4px solid #b00020;
  background:rgba(176,0,32,.06);
  border-radius:3px;
  color:#3d3d3d;
}

/* Desktop layout: 2-column for name fields */
@media (min-width: 768px){
  #lf_form_container form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 18px;
  }

  #lf_form_container h3{
    grid-column:1 / -1;
    margin-bottom:0;
  }

  /* Full-width rows */
  #lf_form_container #lf_email_block,
  #lf_form_container #lf_phone_block,
  #lf_form_container #lf_message_block,
  #lf_form_container #lf_disclaimer,
  #lf_form_container .g-recaptcha,
  #lf_form_container .buttons{
    grid-column:1 / -1;
  }

  #lf_form_container textarea{
    min-height:50px;
  }
}

/* Add red "(Required)" beside each label */
#lf_form_container label.description::after{
  content:" (Required)";
  color:#b00020;           /* accessible red */
  font-weight:600;
  font-size:12px;
  margin-left:6px;
}

/* Optional: don't add it to the disclaimer checkbox label (if it uses label.description) */
#lf_form_container #lf_disclaimer label.description::after{
  content:"";
}