/* Clio Grow Form styled to match the previous WPForms "Request Form".
   Pasted into Settings > Clio Grow Form > Custom CSS (option lf_custom_css).
   Do not use the ">" combinator: the plugin's CSS filter breaks it.
   Variants come from the Elementor widget CSS class: plf-clio-form--white (Contact Us) / plf-clio-form--grey (practice pages). */

#lf_form_container form { display: flex; flex-wrap: wrap; column-gap: 20px; margin: 0; padding: 15px 0 0; }
#lf_form_container h3, #lf_form_container label.description { display: none; }
#lf_form_container p { flex: 0 0 100%; margin: 0 0 30px; padding: 0; }
#lf_form_container #lf_first_name_block, #lf_form_container #lf_last_name_block { flex: 1 1 0; order: 1; }
#lf_form_container #lf_phone_block { order: 2; }
#lf_form_container #lf_email_block { order: 3; }
#lf_form_container #lf_message_block { order: 4; margin-bottom: 25px; }
#lf_form_container p.buttons { order: 5; margin: 0; text-align: center; }

#lf_form_container input[type=text], #lf_form_container input[type=email], #lf_form_container textarea {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box; height: 50px; margin: 0; padding: 0 14px;
  font: 400 16px/16px Roboto, sans-serif; color: #000; background: #fff;
  border: 1px solid #C19A61; border-radius: 3px; box-shadow: none; outline-offset: 0;
}
#lf_form_container textarea { height: 120px; padding: 14px; line-height: 20.8px; resize: vertical; }
#lf_form_container input::placeholder, #lf_form_container textarea::placeholder { color: #757575; opacity: 1; }
#lf_form_container #saveForm {
  width: 300px; max-width: 100%; height: 41px; padding: 0 15px; border: 0; border-radius: 3px;
  font: 600 17px/17px Arial, sans-serif; cursor: pointer; -webkit-appearance: none; appearance: none;
}
#lf_form_container #saveForm:hover { opacity: .9; }

.plf-clio-form--grey #lf_form_container input[type=text], .plf-clio-form--grey #lf_form_container input[type=email], .plf-clio-form--grey #lf_form_container textarea { height: 60px; background: #F5F5F5; border: 0; }
.plf-clio-form--grey #lf_form_container textarea { height: 150px; }

@media (max-width: 767px) {
  .plf-clio-form--white #lf_form_container #lf_first_name_block, .plf-clio-form--white #lf_form_container #lf_last_name_block { flex: 0 0 100%; }
  .plf-clio-form--white #lf_form_container #lf_first_name_block { margin-bottom: 15px; }
}

/* After a successful submit: show the message, hide the form (like WPForms did) */
h3.lf_success { margin: 0 0 25px; padding: 15px; background: #e0ffc7; border: 1px solid #b4d39b; font: 400 16px/1.5 Roboto, sans-serif; color: #333; }
h3.lf_success + #lf_form_container { display: none; }
h3.lf_failure, ul.lf_errors { margin: 0 0 20px; padding: 15px; background: #fff0f0; border: 1px solid #e0a0a0; font: 400 16px/1.5 Roboto, sans-serif; color: #900; list-style: none; }