/* Scoping-call booking form. Colours match the bizbootstrap25 package cards. */
.bb-booking-form {
  box-sizing: border-box;
  max-width: 672px;
  margin: 0 auto 60px;
  /* The page template has no side padding on this route, so add our own. */
  padding: 0 16px;
}

.bb-booking-form *,
.bb-booking-form *::before,
.bb-booking-form *::after {
  box-sizing: border-box;
}

.bb-booking-section,
.bb-booking-form > fieldset {
  border: 1px solid #e4e4f5;
  border-radius: 18px;
  padding: 22px 24px 6px;
  margin: 0 0 28px;
  background: #fff;
}

.bb-booking-form .bb-booking-intro {
  margin: 24px 0 24px;
  font-size: 17px;
  line-height: 1.5;
}

/* Even vertical rhythm between fields, whatever wrapper the theme adds. */
.bb-booking-form .form-group,
.bb-booking-form .js-form-item,
.bb-booking-form .form-item {
  margin: 0 0 22px;
}

.bb-booking-form .form-select,
.bb-booking-form select {
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid #d6d6ea;
  border-radius: 10px;
}

.bb-booking-times {
  margin: 4px 0 22px;
}

.bb-booking-times > fieldset,
.bb-booking-times .fieldset-wrapper {
  border: 0;
  padding: 0;
  margin: 0;
}

.bb-booking-form .form-actions {
  margin: 8px 0 12px;
}

.bb-booking-heading {
  font-size: 20px;
  font-weight: 600;
  color: #1E1D4C;
  margin: 0 0 16px;
}

/*
 * The theme's `.form-group input { display: none !important; }` and
 * `.form-group label:before` turn every input into a checkbox square (they are
 * meant for the sign-up checkboxes). Undo that inside this form only.
 */
.bb-booking-form .form-group input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]),
.bb-booking-form .form-group textarea {
  display: block !important;
  width: 100% !important;
  height: auto;
  padding: 10px 14px;
  margin-bottom: 4px;
  font-size: 16px;
  color: #1E1D4C;
  background: #fff;
  border: 1px solid #d6d6ea;
  border-radius: 10px;
  cursor: text;
}

.bb-booking-form .form-group input:focus,
.bb-booking-form .form-group textarea:focus {
  border-color: #5351DE;
  box-shadow: 0 0 0 3px rgba(83, 81, 222, 0.15);
  outline: 0;
}

.bb-booking-form .form-group label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #1E1D4C;
  margin-bottom: 6px;
}

.bb-booking-form .form-group label::before,
.bb-booking-form .form-group label::after {
  content: none !important;
  display: none !important;
}

.bb-booking-form .form-required::after,
.bb-booking-form .js-form-required::after {
  content: " *";
  color: #EA0101;
}

.bb-booking-form .description,
.bb-booking-form .form-text {
  font-size: 14px;
  color: #5b5b77;
}

.bb-booking-intro,
.bb-booking-privacy {
  color: #1E1D4C;
}

.bb-booking-privacy {
  font-size: 13px;
  opacity: 0.8;
}

/* Time slots as pill buttons. */
.bb-booking-times .form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}

.bb-booking-times .form-type-radio,
.bb-booking-times .js-form-type-radio {
  margin: 0;
}

.bb-booking-times input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bb-booking-form .bb-booking-times .form-radios .form-group,
.bb-booking-form .bb-booking-times .form-radios .js-form-item,
.bb-booking-form .bb-booking-times .form-check {
  margin: 0;
  padding: 0;
  min-height: 0;
}

.bb-booking-form .bb-booking-times input[type="radio"] + label {
  display: inline-block;
  min-width: 82px;
  text-align: center;
  padding: 9px 14px;
  border: 2px solid #5351DE;
  border-radius: 999px;
  color: #5351DE;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease all;
}

.bb-booking-form .bb-booking-times input[type="radio"]:checked + label,
.bb-booking-form .bb-booking-times input[type="radio"] + label:hover {
  background: #5351DE;
  color: #fff;
}

.bb-booking-times input[type="radio"]:focus-visible + label {
  outline: 3px solid #3A56F7;
  outline-offset: 2px;
}

.bb-booking-form .form-submit {
  background: #5351DE;
  border: 0;
  color: #fff;
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 999px;
}

.bb-booking-form .form-submit:hover {
  background: #3A56F7;
}

/* Phones: tighter boxes so fields keep their width. */
@media (max-width: 575px) {
  .bb-booking-section,
  .bb-booking-form > fieldset {
    padding: 18px 16px 4px;
    border-radius: 14px;
  }

  .bb-booking-form .bb-booking-times input[type="radio"] + label {
    min-width: 72px;
    padding: 8px 10px;
  }

  .bb-booking-form .form-submit {
    width: 100%;
  }
}