/* Booking widget styles are loaded only when booking markup is present. */

.cpp_form,
#fbuilder,
[id^="fbuilder_"],
.wp-block-shortcode:has(.cpp_form) {
  box-sizing: border-box;
}

.wp-block-shortcode:has(.cpp_form) {
  padding: 24px;
}

.cpp_form {
  padding: 0;
}

/* Match the DEV booking widget container and step-panel treatment. */
#fbuilder {
  width: min(100%, 650px);
  margin-inline: auto;
}

#fbuilder .pbreak fieldset,
#fbuilder .pbreak legend {
  background: #ffffff;
  border-color: #c0a9a9;
}

/* Preserve the DEV service selection validation. */
#fbuilder .ahbfield_service.cpefb_error {
  border: 1px solid red !important;
}

#fbuilder .availableslot a,
#fbuilder .availableslot a:hover,
#fbuilder .availableslot a:focus-visible,
#fbuilder .availableslot a:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* Default desktop/tablet captcha width. */
#cp_appbooking_pform_1 #hdcaptcha_cp_appbooking_post_1,
#cp_appbooking_pform_1 #fieldname14_1 {
  width: 25% !important;
  max-width: 25% !important;
  box-sizing: border-box;
}

/* Mobile captcha width. */
@media (max-width: 767px) {
  .wp-block-shortcode:has(.cpp_form) {
    padding: 18px;
  }

  #cp_appbooking_pform_1 #hdcaptcha_cp_appbooking_post_1,
  #cp_appbooking_pform_1 #fieldname14_1 {
    width: 50% !important;
    max-width: 50% !important;
  }
}

#fbuilder .pbSubmit,
#fbuilder .pbPrevious,
#fbuilder .pbNext {
  display: inline-block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background-color: var(--wp--preset--color--green, #2e7500) !important;
  color: var(--wp--preset--color--white, #ffffff) !important;
  border: 1px solid var(--wp--preset--color--green, #2e7500) !important;
  border-radius: 15px !important;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1px;
  letter-spacing: 1px;
  padding: 15px 30px 16px !important;
  transition: all 0.3s;
}

#fbuilder .pbSubmit:hover,
#fbuilder .pbSubmit:focus-visible,
#fbuilder .pbPrevious:hover,
#fbuilder .pbPrevious:focus-visible,
#fbuilder .pbNext:hover,
#fbuilder .pbNext:focus-visible {
  background-color: var(--wp--preset--color--white, #ffffff) !important;
  color: var(--wp--preset--color--green, #2e7500) !important;
  border-color: var(--wp--preset--color--green, #2e7500) !important;
}