/* Migration addition on top of the live theme CSS: the simplified "Book online Appointment" section
   (replaces the BookingPress booking workflow).
   Uses only the live theme's own tokens and button styles (global.css: .secondaryBtn, --accent-color,
   --secondary-color, 10px radius); the buttons themselves are .secondaryBtn. */
.appointment_cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
}
.appointment_cta .appointment_cta_btn {
  gap: 10px;
  border: 1px solid transparent;
}
.appointment_cta .appointment_cta_btn svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: currentColor;
}
/* Call: the theme's dark button variant (as the header menu's .primaryBtn), hover → accent. */
.appointment_cta .appointment_cta_call {
  background-color: var(--secondary-color);
}
.appointment_cta .appointment_cta_call:hover {
  background-color: var(--accent-color);
  color: var(--light-color);
}

/* /book-appointment/: the page had only the booking form under its banner, so the section gets the same
   white card the homepage's appointment section uses (main.css .book_appointment .inner_block). */
.bookingpress-template .appointment_cta_card {
  background-color: var(--light-color);
  border-radius: 10px;
  width: 100%;
  max-width: 710px;
  margin: 0 auto;
  padding: clamp(1.25rem, 0.7143rem + 2.6786vw, 3.125rem);
}

@media only screen and (max-width: 530px) {
  .appointment_cta .appointment_cta_btn {
    width: 100%;
  }
}

.static-form-notice {
  margin-top: 15px;
  color: var(--secondary-color);
}