@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');

:root {
  --mpa-grid-gap: 20px;
}

.mpa-hide {
  display: none !important;
}

.mpa-error {
  color: #e25950;
  font-weight: bold;
  font-style: italic;
}

.mpa-loading {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center url("../images/loading.gif?ver=2.4.3"), rgba(255, 255, 255, 0.5);
  background-size: 32px 32px;
  z-index: 9000;
}

.mpa-loaded > .mpa-loading {
  display: none;
}

.mpa-table-centered td, .mpa-table-centered th {
  text-align: center;
}
.mpa-table-centered .no-items td,
.mpa-table-centered .no-items th {
  text-align: left;
}

table.fitwidth {
  table-layout: auto;
}

th.fitwidth,
td.fitwidth {
  width: 1%;
  white-space: nowrap;
}

.mpa-description {
  font-style: italic;
}

.mpa-small-description {
  font-size: 75%;
}

.center-text {
  text-align: center;
}

.mpa-preloader {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat center url("../images/preloader.gif?ver=2.4.3");
}

.mpa-table th {
  padding-left: 10px;
  vertical-align: middle;
}

.mpa-deprecated {
  opacity: 0.5;
}
.mpa-deprecated strong {
  color: darkred;
  cursor: help;
}

.mpa-grid {
  display: flex;
  flex-flow: row wrap;
  margin-right: calc(-1 * var(--mpa-grid-gap, 20px));
  margin-left: calc(-1 * var(--mpa-grid-gap, 20px));
}
.mpa-grid > .mpa-grid-column {
  padding: 0 var(--mpa-grid-gap, 20px);
  margin-bottom: calc(2 * var(--mpa-grid-gap, 20px));
  width: 100%;
}
@media (min-width: 768px) {
  .mpa-grid > .mpa-grid-column {
    width: 50%;
  }
}
@media (min-width: 992px) {
  .mpa-grid > .mpa-grid-column {
    width: 16.667%;
  }
}
.mpa-grid.mpa-grid-columns-1 > .mpa-grid-column {
  width: 100%;
}
@media (min-width: 768px) {
  .mpa-grid.mpa-grid-columns-2 > .mpa-grid-column {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .mpa-grid.mpa-grid-columns-3 > .mpa-grid-column {
    width: 33%;
  }
}
@media (min-width: 992px) {
  .mpa-grid.mpa-grid-columns-4 > .mpa-grid-column {
    width: 25%;
  }
}
@media (min-width: 992px) {
  .mpa-grid.mpa-grid-columns-5 > .mpa-grid-column {
    width: 20%;
  }
}

.mpa-preloader-skeleton-pulsate {
  background: linear-gradient(-45deg, #DDDDDD, #F0F0F0, #DDDDDD, #F0F0F0);
  background-size: 400% 400%;
  animation: mpa-preloader-skeleton-pulsate-gradient 2.25s ease infinite;
}

.mpa-stripe-element.mpa-preloader-skeleton-pulsate {
  width: 100%;
  height: 50px;
  position: relative;
  display: block;
  border-radius: 4px;
}
.mpa-stripe-element.mpa-preloader-skeleton-pulsate:before, .mpa-stripe-element.mpa-preloader-skeleton-pulsate:after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  height: 10px;
  background: linear-gradient(-45deg, #cbcbcb, #dddddd, #cbcbcb, #dddddd);
  background-size: 400% 400%;
  animation: mpa-preloader-skeleton-pulsate-gradient 2.25s ease infinite;
}
.mpa-stripe-element.mpa-preloader-skeleton-pulsate.mpa-stripe-payment-request-button-element:before {
  left: calc(50% - 70px);
  width: 140px;
}
.mpa-stripe-element.mpa-preloader-skeleton-pulsate.mpa-stripe-card-element:before {
  left: 12px;
  width: 200px;
}
.mpa-stripe-element.mpa-preloader-skeleton-pulsate.mpa-stripe-card-element:after {
  right: 12px;
  width: 85px;
}
.mpa-stripe-element.mpa-preloader-skeleton-pulsate.mpa-stripe-ideal-element:before {
  left: 12px;
  width: 200px;
}
.mpa-stripe-element.mpa-preloader-skeleton-pulsate.mpa-stripe-ideal-element:after {
  right: 12px;
  width: 10px;
}
.mpa-stripe-element.mpa-preloader-skeleton-pulsate .mpa-stripe-iban-element:before {
  left: 12px;
  width: 200px;
}

@-webkit-keyframes mpa-preloader-skeleton-pulsate-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes mpa-preloader-skeleton-pulsate-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes mpa-preloader-skeleton-pulsate-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.mpa-posts-loop .mpa-loop-post-wrapper > *:first-child {
  margin-top: 0;
}
.mpa-posts-loop .mpa-loop-post-wrapper > *:last-child {
  margin-bottom: 0;
}
.mpa-posts-loop .post-thumbnail img {
  margin-top: 0;
  margin-bottom: 0;
}

.mpa-pagination {
  margin-top: 0;
}

.appointment-form-shortcode, .appointment-form-widget > .widget-body {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.appointment-form-shortcode:not(.mpa-loaded), .appointment-form-widget > .widget-body:not(.mpa-loaded),
.appointment-form-shortcode .mpa-booking-step:not(.mpa-loaded),
.appointment-form-widget > .widget-body .mpa-booking-step:not(.mpa-loaded) {
  min-height: 52px;
  position: relative;
}
.appointment-form-shortcode label, .appointment-form-widget > .widget-body label,
.appointment-form-shortcode select,
.appointment-form-widget > .widget-body select,
.appointment-form-shortcode input[type=text],
.appointment-form-widget > .widget-body input[type=text],
.appointment-form-shortcode input[type=email],
.appointment-form-widget > .widget-body input[type=email],
.appointment-form-shortcode input[type=tel],
.appointment-form-widget > .widget-body input[type=tel] {
  width: 100%;
}
.appointment-form-shortcode select, .appointment-form-widget > .widget-body select,
.appointment-form-shortcode input[type=text],
.appointment-form-widget > .widget-body input[type=text],
.appointment-form-shortcode input[type=email],
.appointment-form-widget > .widget-body input[type=email],
.appointment-form-shortcode input[type=tel],
.appointment-form-widget > .widget-body input[type=tel] {
  display: block;
}
.appointment-form-shortcode .mpa-message, .appointment-form-widget > .widget-body .mpa-message {
  width: 100%;
}
.appointment-form-shortcode .mpa-actions, .appointment-form-widget > .widget-body .mpa-actions {
  margin-top: 1.5em;
}
.appointment-form-shortcode .mpa-booking-step, .appointment-form-widget > .widget-body .mpa-booking-step {
  width: 100%;
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .mpa-cart-item-template, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .mpa-cart-item-template {
  display: none;
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .mpa-cart-item, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .mpa-cart-item {
  margin-bottom: 40px;
  border: 1px solid #eee;
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .mpa-cart-item > *, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .mpa-cart-item > * {
  width: 50%;
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .mpa-cart-item > *:last-child, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .mpa-cart-item > *:last-child {
  margin-bottom: 0;
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .cell, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .cell {
  box-sizing: border-box;
  padding: 5px 25px;
  width: 100%;
}
@media (min-width: 992px) {
  .appointment-form-shortcode .mpa-booking-step .mpa-cart .cell, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .cell {
    width: 50%;
  }
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .cell-title, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .cell-title {
  font-weight: 700;
  margin-bottom: 0;
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .item-header, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .item-header,
.appointment-form-shortcode .mpa-booking-step .mpa-cart .item-body,
.appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .item-body,
.appointment-form-shortcode .mpa-booking-step .mpa-cart .item-footer,
.appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .item-footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .item-header, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .item-header {
  border-bottom: 1px solid #eee;
  font-weight: 700;
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .item-header + .item-footer, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .item-header + .item-footer {
  border-top: 0;
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .item-footer, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .item-footer {
  border-top: 1px solid #eee;
}
.appointment-form-shortcode .mpa-booking-step .mpa-cart .item-footer .cell, .appointment-form-widget > .widget-body .mpa-booking-step .mpa-cart .item-footer .cell {
  width: 100%;
}
.appointment-form-shortcode .mpa-booking-step-service-form, .appointment-form-widget > .widget-body .mpa-booking-step-service-form {
  max-width: 100%;
}
@media screen and (min-width: 992px) {
  .appointment-form-shortcode .mpa-booking-step-service-form, .appointment-form-widget > .widget-body .mpa-booking-step-service-form {
    width: 50%;
  }
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-input-container, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-input-container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
@media screen and (min-width: 992px) {
  .appointment-form-shortcode .mpa-booking-step-period .mpa-input-container, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-input-container {
    flex-wrap: nowrap;
  }
  .appointment-form-shortcode .mpa-booking-step-period .mpa-input-container .mpa-input-wrapper, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-input-container .mpa-input-wrapper {
    width: auto;
  }
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-input-container .mpa-input-wrapper, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-input-container .mpa-input-wrapper {
  padding: 0 10px;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-date-wrapper, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-date-wrapper {
  margin-bottom: 20px;
}
@media screen and (min-width: 992px) {
  .appointment-form-shortcode .mpa-booking-step-period .mpa-date-wrapper, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-date-wrapper {
    margin-bottom: 0;
  }
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-date-wrapper:not(.mpa-loaded), .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-date-wrapper:not(.mpa-loaded) {
  position: relative;
}
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-calendar, .appointment-form-widget > .widget-body .mpa-booking-step-period .flatpickr-calendar {
  margin: 0 0 0 1px;
  top: 0;
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 0 0 rgba(0, 0, 0, 0.08);
}
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-calendar .prevMonthDay.flatpickr-disabled, .appointment-form-widget > .widget-body .mpa-booking-step-period .flatpickr-calendar .prevMonthDay.flatpickr-disabled,
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-calendar .nextMonthDay.flatpickr-disabled,
.appointment-form-widget > .widget-body .mpa-booking-step-period .flatpickr-calendar .nextMonthDay.flatpickr-disabled {
  opacity: 0;
  cursor: default;
}
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-calendar .flatpickr-current-month .cur-month, .appointment-form-widget > .widget-body .mpa-booking-step-period .flatpickr-calendar .flatpickr-current-month .cur-month,
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.appointment-form-widget > .widget-body .mpa-booking-step-period .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
  pointer-events: none;
}
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-days, .appointment-form-widget > .widget-body .mpa-booking-step-period .flatpickr-days,
.appointment-form-shortcode .mpa-booking-step-period .dayContainer,
.appointment-form-widget > .widget-body .mpa-booking-step-period .dayContainer {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day, .appointment-form-widget > .widget-body .mpa-booking-step-period .flatpickr-day {
  max-width: 39px;
  height: 39px;
  line-height: 39px;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (min-width: 992px) {
  .appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper {
    flex: 1 0 auto;
  }
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-times-container, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-times-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-times, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-times {
  overflow: auto;
  max-height: 400px;
}
@media screen and (min-width: 992px) {
  .appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-times, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-times {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100%;
  }
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-time-period, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-time-period {
  width: calc(100% - 10px);
  margin: 0 5px 10px;
  padding: 10px 5px;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-two-columns .mpa-time-period, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-two-columns .mpa-time-period {
  width: calc(50% - 10px);
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-three-columns .mpa-time-period, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-three-columns .mpa-time-period {
  width: calc(33.3333333333% - 10px);
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-four-columns .mpa-time-period, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-four-columns .mpa-time-period {
  width: calc(25% - 10px);
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-five-columns .mpa-time-period, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-five-columns .mpa-time-period {
  width: calc(20% - 10px);
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-period-end-time, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-period-end-time {
  display: none;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-show-end-time .mpa-period-end-time, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-show-end-time .mpa-period-end-time {
  display: inline;
}
/* BookFlow end-time refinement — override the bare display:inline above with
   better visual treatment; scoped to the BookFlow design section */
.appointment-form-shortcode .mpa-booking-step-period .mpa-show-end-time .mpa-time-period {
  flex-direction: column !important;
  gap: 0.12rem !important;
  padding: 0.55rem 0.4rem !important;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-show-end-time .mpa-period-end-time {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  opacity: 0.7 !important;
  line-height: 1.1 !important;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-slot-capacity, .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-slot-capacity {
  display: block;
}
.appointment-form-shortcode .iti__flag, .appointment-form-widget > .widget-body .iti__flag {
  background-image: url("../js/intl-tel-input-17.0.19/img/flags.png");
  /* Lock sprite dimensions — Astro/Tailwind resets often set background-size:cover/100%
     which stretches the whole sprite sheet into the flag box, showing "two flags" */
  background-size: 5652px 15px !important; /* exact 1x sprite dimensions (5652×15) */
  background-repeat: no-repeat !important;
  width: 20px !important;
  display: inline-block !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .appointment-form-shortcode .iti__flag, .appointment-form-widget > .widget-body .iti__flag {
    background-image: url("../js/intl-tel-input-17.0.19/img/flags@2x.png");
    background-size: 5652px 15px !important; /* CSS-pixel display size = physical/2 (11304×30 @2x → 5652×15 CSS) */
  }
}
/* Flag container box — prevent Astro flex rules from stretching it */
.appointment-form-shortcode .iti__flag-box {
  width: 20px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: inline-block !important;
}
.appointment-form-shortcode .mpa-checkout-form .iti, .appointment-form-widget > .widget-body .mpa-checkout-form .iti {
  width: 100%;
}
.appointment-form-shortcode .mpa-phone-number--invalid, .appointment-form-widget > .widget-body .mpa-phone-number--invalid {
  border-color: red;
  color: red;
}
.appointment-form-shortcode .mpa-phone-field-error, .appointment-form-widget > .widget-body .mpa-phone-field-error {
  color: red;
  margin: 5px 0;
  display: inline-block;
}
.appointment-form-shortcode .wp-admin .mpa-phone-number--invalid, .appointment-form-widget > .widget-body .wp-admin .mpa-phone-number--invalid {
  border: 1px solid red;
  color: red;
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-order-details, .appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-order-details,
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-customer-details,
.appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-customer-details {
  padding: 0;
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-order-details, .appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-order-details {
  margin-bottom: 40px;
}
@media screen and (min-width: 800px) {
  .appointment-form-shortcode .mpa-booking-step-checkout .mpa-capacity-details .mpa-bring-people, .appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-capacity-details .mpa-bring-people {
    display: inline-block;
    width: auto;
  }
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-reservation-details, .appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-reservation-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-reservation-details > li, .appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-reservation-details > li {
  flex: 1 0 auto;
  margin: 0 1.5em 1.5em 0;
  padding-left: 0;
  padding-right: 1.5em;
  border-right: 1px dashed #d3ced2;
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-reservation-details > li:last-of-type, .appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-reservation-details > li:last-of-type {
  border: none;
  margin-right: 0;
  padding-right: 0;
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-reservation-details > li > .mpa-label, .appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-reservation-details > li > .mpa-label {
  display: block;
  font-size: 0.85em;
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-reservation-details > li > .mpa-value, .appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-reservation-details > li > .mpa-value {
  font-weight: bold;
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-reservation-details > li > .mpa-capacity, .appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-reservation-details > li > .mpa-capacity {
  display: block;
  font-size: x-small;
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-reservation-capacity, .appointment-form-widget > .widget-body .mpa-booking-step-checkout .mpa-reservation-capacity {
  display: block;
}
.appointment-form-shortcode .mpa-booking-step-payment .mpa-billing-details .mpa-payment-gateways, .appointment-form-widget > .widget-body .mpa-booking-step-payment .mpa-billing-details .mpa-payment-gateways {
  padding: 0;
  margin: 0;
  list-style: none;
}
.appointment-form-shortcode .mpa-booking-step-payment .mpa-billing-details .mpa-payment-gateways > li, .appointment-form-widget > .widget-body .mpa-booking-step-payment .mpa-billing-details .mpa-payment-gateways > li {
  margin-top: 1em;
}
.appointment-form-shortcode .mpa-booking-step-payment .mpa-billing-details .mpa-payment-gateways label, .appointment-form-widget > .widget-body .mpa-booking-step-payment .mpa-billing-details .mpa-payment-gateways label {
  display: inline;
}
.appointment-form-shortcode .mpa-booking-step-payment .mpa-billing-details .mpa-payment-gateway-title, .appointment-form-widget > .widget-body .mpa-booking-step-payment .mpa-billing-details .mpa-payment-gateway-title {
  font-weight: bold;
}
.appointment-form-shortcode .mpa-booking-step-payment .mpa-billing-details .mpa-payment-gateway-description, .appointment-form-widget > .widget-body .mpa-booking-step-payment .mpa-billing-details .mpa-payment-gateway-description {
  margin: 0;
}
.appointment-form-shortcode .mpa-booking-step-payment .mpa-billing-details .mpa-billing-fields, .appointment-form-widget > .widget-body .mpa-booking-step-payment .mpa-billing-details .mpa-billing-fields {
  margin-top: 0.5em;
}
.appointment-form-shortcode .mpa-booking-step-payment .mpa-reservation-capacity, .appointment-form-widget > .widget-body .mpa-booking-step-payment .mpa-reservation-capacity {
  display: block;
}
.appointment-form-shortcode .mpa-booking-step-booking, .appointment-form-widget > .widget-body .mpa-booking-step-booking {
  flex-grow: 2;
}
.appointment-form-shortcode .mpa-booking-step-booking .mpa-reservation-capacity, .appointment-form-widget > .widget-body .mpa-booking-step-booking .mpa-reservation-capacity {
  display: block;
  font-weight: normal;
}

.mpa-service-employees {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mpa-service-employees img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  margin-left: -15px;
}
.mpa-service-employees img:first-child {
  margin-left: 0;
}
.mpa-service-employees img:first-child {
  z-index: 5;
}
.mpa-service-employees img:nth-child(2) {
  z-index: 4;
}
.mpa-service-employees img:nth-child(3) {
  z-index: 3;
}
.mpa-service-employees img:nth-child(4) {
  z-index: 2;
}
.mpa-service-employees img:nth-child(5) {
  z-index: 1;
}
.mpa-service-employees .more-employees,
.mpa-service-employees .employee-name {
  margin-left: 5px;
}

.mpa-booking-details .mpa-booking-details-section {
  margin-bottom: 1.5em;
  border: 1px solid #eeeeee;
  padding: 0.75em 0;
}
.mpa-booking-details .mpa-booking-details-section:last-child {
  margin-bottom: 0;
}
.mpa-booking-details .mpa-booking-details-section-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.mpa-booking-details .mpa-booking-details-section-row .cell {
  box-sizing: border-box;
  width: 100%;
  padding: 0.25em 1em;
}
@media (min-width: 768px) {
  .mpa-booking-details .mpa-booking-details-section-row .cell {
    width: 50%;
  }
}
.mpa-booking-details .booking-reservations,
.mpa-booking-details .booking-payments {
  padding: 0;
}
.mpa-booking-details .reservation {
  border-bottom: 1px solid #eeeeee;
  padding: 0.75em 0;
  margin-bottom: 0;
}
.mpa-booking-details .reservation:last-child {
  border: 0;
}
.mpa-booking-details .reservation .reservation-calendar-links {
  display: flex;
  width: 100%;
}
.mpa-booking-details .reservation-title,
.mpa-booking-details .reservation-full-date {
  font-weight: 700;
}
.mpa-booking-details .mpa-reservation-capacity {
  display: block;
  font-weight: normal;
}
.mpa-booking-details .payment {
  border-bottom: 1px solid #eeeeee;
  padding: 0.75em 0;
}
.mpa-booking-details .payment:last-child {
  border: 0;
}

.mpa-booking-details-shortcode + .mpa-direct-link-booking-cancellation-link-shortcode {
  margin-top: 1.5em;
}

.mpa-account-menu {
  margin-bottom: 1.5em;
}
.mpa-account-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mpa-account-menu li {
  display: inline-block;
  padding: 0;
  margin: 0 0.5em 0 0;
}
.mpa-account-menu li:last-child {
  margin-right: 0;
}
.mpa-account-menu li::after, .mpa-account-menu li::before {
  display: none;
}

.mpa-account-bookings {
  table-layout: auto;
  font-size: 0.85em;
}
@media screen and (max-width: 767px) {
  .mpa-account-bookings thead {
    display: none;
  }
  .mpa-account-bookings tr {
    display: block;
  }
  .mpa-account-bookings td {
    display: flex;
  }
  .mpa-account-bookings td:before {
    content: attr(data-title) " ";
    width: 50%;
  }
}
.mpa-account-bookings .booking-number {
  justify-content: center;
  gap: 0.25em;
}
.mpa-account-bookings .booking-number:before {
  width: auto;
}
.mpa-account-bookings .booking-reservations {
  flex-direction: column;
}
.mpa-account-bookings .booking-reservations:before {
  display: none;
}
.mpa-account-bookings .booking-reservation {
  margin-bottom: 0.5em;
}
.mpa-account-bookings .booking-reservation:last-child {
  margin-bottom: 0;
}
.mpa-account-bookings .reservation-title {
  display: block;
}

.mpa-account-details .mpa-customer-details {
  border: 1px solid #eeeeee;
  padding: 0.75em 0;
}
.mpa-account-details .mpa-customer-details-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.mpa-account-details .mpa-customer-details-row .cell {
  box-sizing: border-box;
  width: 100%;
  padding: 0.25em 1em;
}
@media (min-width: 768px) {
  .mpa-account-details .mpa-customer-details-row .cell {
    width: 50%;
  }
}

@media screen and (min-width: 992px) {
  .appointment-form-widget > .widget-body .mpa-booking-step-service-form {
    width: 100%;
  }
  .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-input-container {
    flex-wrap: wrap;
  }
  .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-date-wrapper {
    margin-bottom: 20px;
  }
  .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper {
    flex: 1 0 100%;
  }
  .appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-times {
    position: relative;
  }
}
.appointment-form-widget > .widget-body .mpa-booking-step-period .mpa-time-wrapper .mpa-times {
  max-height: 300px;
}

.mpa-stripe-payment-container {
  margin-bottom: 1em;
}
.mpa-stripe-payment-container .mpa-stripe-payment-methods > ul {
  cursor: pointer;
  margin: 0 0 0.5em 0;
  padding: 0;
  list-style: none;
}
.mpa-stripe-payment-container .mpa-stripe-payment-methods .mpa-stripe-payment-method {
  display: inline-block;
  margin: 0 1.5em 0 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.mpa-stripe-payment-container .mpa-stripe-payment-methods .mpa-stripe-payment-method:last-of-type {
  margin-right: 0;
}
.mpa-stripe-payment-container .mpa-stripe-payment-methods .mpa-stripe-payment-method.active label {
  box-shadow: 0 2px currentColor;
}
.mpa-stripe-payment-container .mpa-stripe-payment-methods .mpa-stripe-payment-method label {
  cursor: pointer;
}
.mpa-stripe-payment-container .mpa-stripe-payment-methods .mpa-stripe-payment-method input[type=radio] {
  display: none;
}
.mpa-stripe-payment-container .mpa-stripe-payment-fields fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.mpa-stripe-payment-container .mpa-stripe-payment-fields .StripeElement {
  box-sizing: border-box;
  padding: 15px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 1px 6px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.mpa-stripe-payment-container .mpa-stripe-payment-fields .StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}
.mpa-stripe-payment-container .mpa-stripe-payment-fields .StripeElement--invalid {
  border-color: #fa755a;
}
.mpa-stripe-payment-container .mpa-stripe-payment-fields .StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}
.mpa-stripe-payment-container .mpa-stripe-payment-fields .mpa-stripe-payment-request-button-element.StripeElement {
  padding: 0;
}
.mpa-stripe-payment-container .mpa-stripe-payment-fields .mpa-stripe-payment-request-button-separator {
  text-transform: uppercase;
  text-align: center;
}
.mpa-stripe-payment-container .mpa-stripe-payment-fields .mpa-stripe-payment-request-button-separator:before, .mpa-stripe-payment-container .mpa-stripe-payment-fields .mpa-stripe-payment-request-button-separator:after {
  content: " - ";
}
.mpa-stripe-payment-container .mpa-errors {
  color: #e25950;
}

.mpa-paypal-error {
  margin: 5px 0;
  color: #e25950;
}


/* ============================================================
   BOOKFLOW DESIGN SYSTEM — Complete Restyle
   Matches docs/booking_block.html
   All rules scoped to .appointment-form-shortcode
   MotoPress core CSS above this line is untouched.
   ============================================================ */

/* ── 1. CSS Variables ─────────────────────────────────────── */
.appointment-form-shortcode {
  --bf-primary:         #8b5cf6;
  /* Derived tones — update automatically when --bf-primary is overridden */
  --bf-primary-hover:   color-mix(in srgb, var(--bf-primary) 85%, #000000);
  --bf-primary-light:   color-mix(in srgb, var(--bf-primary) 12%, #ffffff);
  --bf-primary-shadow:  color-mix(in srgb, var(--bf-primary) 30%, transparent);
  --bf-primary-text:    #ffffff;   /* text on primary-coloured surfaces (buttons, selected slots) */
  --bf-secondary-bg:    #f0edf8;
  --bf-secondary-text:  #3c315c;
  --bf-radius-card:     2rem;
  --bf-radius-input:    1.2rem;
  --bf-radius-btn:      3rem;
  --bf-shadow:          0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --bf-border:          #e8e4f0;
  --bf-text-dark:       #1f1a2e;
  --bf-text-mid:        #4b3b6e;
  --bf-text-muted:      #6c5b7b;
  --bf-font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bf-form-max-width:  700px;     /* overridden via shortcode form_width attribute */
  --bf-btn-padding:     0.85rem 1.5rem; /* overridden via shortcode buttons_padding attribute */
}

/* Lock BookFlow selection controls to plugin-owned colors so theme button
   hover styles cannot repaint service cards or pills. */
.appointment-form-shortcode button.bf-service-card,
.appointment-form-shortcode button.bf-service-card:hover,
.appointment-form-shortcode button.bf-service-card:focus,
.appointment-form-shortcode button.bf-service-card:active,
.appointment-form-shortcode button.bf-pill-btn,
.appointment-form-shortcode button.bf-pill-btn:hover,
.appointment-form-shortcode button.bf-pill-btn:focus,
.appointment-form-shortcode button.bf-pill-btn:active {
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* ── 2. Font ──────────────────────────────────────────────── */
/* NOTE: Inter is imported at the very top of this file (line 1). */
/* A second @import here is invalid CSS (must precede all rules) and is silently ignored. */

/* Double-class selector raises specificity to (0,2,0,0), beating Astro/Tailwind
   scoped attribute selectors [data-astro-cid-*] which sit at (0,1,0,0).
   Both sides use !important so specificity breaks the tie — higher wins. */
.appointment-form-shortcode.appointment-form-shortcode,
.appointment-form-shortcode.appointment-form-shortcode *:not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa) {
  font-family: var(--bf-font) !important;
  box-sizing: border-box;
}
/* Explicit font lock on form elements — browsers don't auto-inherit font-family on
   input/select/textarea/button; this prevents any theme reset from sneaking through */
.appointment-form-shortcode.appointment-form-shortcode input,
.appointment-form-shortcode.appointment-form-shortcode select,
.appointment-form-shortcode.appointment-form-shortcode textarea,
.appointment-form-shortcode.appointment-form-shortcode button {
  font-family: var(--bf-font) !important;
}
/* Restore Font Awesome font-family after the wildcard above */
.appointment-form-shortcode .fas,
.appointment-form-shortcode .far,
.appointment-form-shortcode .fa {
  font-family: "Font Awesome 6 Free" !important;
}
.appointment-form-shortcode .fab {
  font-family: "Font Awesome 6 Brands" !important;
}

/* ── 3. Card wrapper ──────────────────────────────────────── */
/* Override MotoPress's flex-wrap: wrap + add card chrome */
.appointment-form-shortcode {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  background: #ffffff;
  border-radius: var(--bf-radius-card);
  box-shadow: var(--bf-shadow);
  overflow: visible; /* must NOT be hidden — overflow:hidden clips the intl-tel-input country dropdown */
  max-width: var(--bf-form-max-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 !important; /* padding lives on each step, not the card */
}

/* ── 4. Progress bar ──────────────────────────────────────── */
.appointment-form-shortcode .bf-step-progress {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem 0.75rem;
  background: #fff;
  border-bottom: 1px solid #f0eef3;
  margin: 0 !important;
  width: 100%;
  list-style: none;
  flex-shrink: 0;
  /* The card uses overflow:visible (needed for phone dropdown), so the progress
     bar must round its own top corners to match the card — otherwise its white
     background bleeds past the card's border-radius into the page background */
  border-radius: var(--bf-radius-card) var(--bf-radius-card) 0 0;
}

.appointment-form-shortcode .bf-step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #a0a0b0;
  text-align: center;
  cursor: default;
}

.appointment-form-shortcode .bf-step-icon {
  width: 44px;
  height: 44px;
  background: #f2f0f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #6c5b7b;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.appointment-form-shortcode .bf-step-item.active .bf-step-icon {
  background: var(--bf-primary);
  color: var(--bf-primary-text);
  box-shadow: 0 6px 16px var(--bf-primary-shadow);
  transform: scale(1.07);
}
.appointment-form-shortcode .bf-step-item.active { color: var(--bf-primary); }

.appointment-form-shortcode .bf-step-item.completed .bf-step-icon {
  background: #10b981;
  color: #fff;
}
.appointment-form-shortcode .bf-step-item.completed { color: #10b981; }

.appointment-form-shortcode .bf-step-label {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
}

/* ── 5. Step base ─────────────────────────────────────────── */
.appointment-form-shortcode .mpa-booking-step {
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
}

/* Service form: wizard provides own padding; override 50% desktop width */
.appointment-form-shortcode .mpa-booking-step-service-form {
  padding: 0 !important;
}
@media screen and (min-width: 992px) {
  .appointment-form-shortcode .mpa-booking-step-service-form {
    width: 100% !important;
  }
}

/* Content steps: padded content area */
.appointment-form-shortcode .mpa-booking-step-period,
.appointment-form-shortcode .mpa-booking-step-cart,
.appointment-form-shortcode .mpa-booking-step-checkout,
.appointment-form-shortcode .mpa-booking-step-booking {
  padding: 1.8rem 1.8rem 0 !important;
}

/* Section titles */
.appointment-form-shortcode .mpa-shortcode-title {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--bf-text-dark) !important;
  margin: 0 0 1.2rem !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.appointment-form-shortcode .bf-service-composite > .mpa-shortcode-title {
  margin: 0 0 1.25rem !important;
}

.appointment-form-shortcode .mpa-booking-step-service-form .mpa-service-form > .mpa-shortcode-title {
  display: none !important;
}

/* ── 6. Actions bar ───────────────────────────────────────── */
/* Full-bleed border-top bar at bottom of each step */
.appointment-form-shortcode .mpa-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0.8rem;
  margin: 1.5rem -1.8rem 0 !important;
  padding: 1rem 1.8rem 1.5rem !important;
  border-top: 1px solid #f0eef5 !important;
  flex-wrap: nowrap !important;
}

/* Service form actions: always hidden (wizard handles flow) */
.appointment-form-shortcode .mpa-booking-step-service-form .mpa-actions {
  display: none !important;
}

/* ── 7. Buttons ───────────────────────────────────────────── */
.appointment-form-shortcode .button.mpa-button-next,
.appointment-form-shortcode .button.mpa-button-reset,
.appointment-form-shortcode .button.bf-wizard-next {
  background: var(--bf-primary) !important;
  border: none !important;
  border-radius: var(--bf-radius-btn) !important;
  color: var(--bf-primary-text) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: var(--bf-btn-padding) !important;
  min-width: 120px;
  height: auto !important;
  line-height: 1.5 !important;
  box-shadow: 0 4px 12px var(--bf-primary-shadow) !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease !important;
  text-shadow: none !important;
}
.appointment-form-shortcode .button.mpa-button-next:hover,
.appointment-form-shortcode .button.mpa-button-reset:hover,
.appointment-form-shortcode .button.bf-wizard-next:hover {
  background: var(--bf-primary-hover) !important;
  color: var(--bf-primary-text) !important;
}
.appointment-form-shortcode .button.mpa-button-next:active,
.appointment-form-shortcode .button.mpa-button-reset:active {
  transform: scale(0.97);
}

.appointment-form-shortcode .button.mpa-button-back,
.appointment-form-shortcode .button.mpa-button-new,
.appointment-form-shortcode .button.mpa-button-edit-or-remove,
.appointment-form-shortcode .button.bf-wizard-back {
  background: var(--bf-secondary-bg) !important;
  border: none !important;
  border-radius: var(--bf-radius-btn) !important;
  color: var(--bf-secondary-text) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: var(--bf-btn-padding) !important;
  min-width: 0;
  height: auto !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease !important;
  text-shadow: none !important;
}
.appointment-form-shortcode .button.mpa-button-back:hover,
.appointment-form-shortcode .button.mpa-button-new:hover,
.appointment-form-shortcode .button.mpa-button-edit-or-remove:hover,
.appointment-form-shortcode .button.bf-wizard-back:hover {
  background: #e4dff4 !important;
  color: var(--bf-secondary-text) !important;
}
.appointment-form-shortcode .button.mpa-button-back:active,
.appointment-form-shortcode .button.mpa-button-new:active,
.appointment-form-shortcode .button.mpa-button-edit-or-remove:active {
  transform: scale(0.97);
}

/* ── 8. Form inputs (checkout) ────────────────────────────── */
.appointment-form-shortcode input[type="text"],
.appointment-form-shortcode input[type="email"] {
  border: 1.5px solid var(--bf-border) !important;
  border-radius: var(--bf-radius-input) !important;
  padding: 0.9rem 1rem !important;
  font-size: 1rem !important;
  font-family: var(--bf-font) !important;
  font-weight: 400 !important;
  color: var(--bf-text-dark) !important;
  background: #ffffff !important;
  height: auto !important;
  line-height: 1.5 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: none !important;
  width: 100%;
}
/* Phone input: no padding !important so intlTelInput (separateDialCode:true)
   can set padding-left via its own inline style to match the flag+dialcode width */
.appointment-form-shortcode input[type="tel"] {
  border: 1.5px solid var(--bf-border) !important;
  border-radius: var(--bf-radius-input) !important;
  padding-top: 0.9rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0.9rem !important;
  font-size: 1rem !important;
  font-family: var(--bf-font) !important;
  font-weight: 400 !important;
  color: var(--bf-text-dark) !important;
  background: #ffffff !important;
  height: auto !important;
  line-height: 1.5 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: none !important;
  width: 100%;
  /* padding-left intentionally NOT set — intlTelInput sets it via inline style */
}
.appointment-form-shortcode input[type="text"]:focus,
.appointment-form-shortcode input[type="email"]:focus,
.appointment-form-shortcode input[type="tel"]:focus {
  outline: none !important;
  border-color: var(--bf-primary) !important;
  box-shadow: 0 0 0 3px var(--bf-primary-light) !important;
}

.appointment-form-shortcode label {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  font-family: var(--bf-font) !important;
  color: var(--bf-text-mid) !important;
  margin-bottom: 0.4rem !important;
  display: block;
}
.appointment-form-shortcode label input[type="radio"],
.appointment-form-shortcode label input[type="checkbox"] {
  display: inline-block;
  width: auto !important;
  accent-color: var(--bf-primary);
  margin-right: 0.4rem;
}

.appointment-form-shortcode .mpa-input-wrapper {
  margin-bottom: 1.1rem;
}
.appointment-form-shortcode .mpa-input-wrapper:last-of-type {
  margin-bottom: 0;
}

/* ── 9. Errors ────────────────────────────────────────────── */
.appointment-form-shortcode .mpa-error,
.appointment-form-shortcode .mpa-message.mpa-error {
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: #dc2626 !important;
  background: #fef2f2;
  border-radius: 0.8rem;
  padding: 0.75rem 1rem;
  margin: 0.8rem 0;
  border: none;
}

/* ── 10. Period step — calendar + time ────────────────────── */

/* Container context: layout responds to form width, not viewport */
.appointment-form-shortcode .mpa-booking-step-period {
  container-type: inline-size;
  container-name: bf-period;
}

/* Default: stacked (narrow form) */
.appointment-form-shortcode .mpa-booking-step-period .mpa-input-container {
  display: block !important;
  margin: 0;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-input-container .mpa-input-wrapper {
  padding: 0;
  width: 100% !important;
}

/* Wide form (≥440px): calendar left, time slots right */
@container bf-period (min-width: 440px) {
  .appointment-form-shortcode .mpa-booking-step-period .mpa-input-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
  .appointment-form-shortcode .mpa-booking-step-period .mpa-input-container .mpa-input-wrapper {
    width: auto !important;
  }
}

/* Calendar */
.appointment-form-shortcode .mpa-booking-step-period .mpa-date-wrapper {
  margin-bottom: 1.5rem;
  width: 100%;
}
@container bf-period (min-width: 440px) {
  .appointment-form-shortcode .mpa-booking-step-period .mpa-date-wrapper {
    flex: 0 0 min(310px, 48%) !important;
    max-width: min(310px, 48%) !important;
    margin-bottom: 0 !important;
  }
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-date-wrapper:not(.mpa-loaded) {
  min-height: 52px;
  position: relative;
}

/* Time wrapper: fills remaining space when side-by-side */
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper {
  container-type: inline-size;
  container-name: bf-timewrapper;
  display: block !important;
  width: 100% !important;
}
@container bf-period (min-width: 440px) {
  .appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-times-container {
  position: static !important;
  width: 100%;
  height: auto !important;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper .mpa-times {
  position: static !important;
  max-height: none !important;
  overflow: visible !important;
}

/* "Select Date & Time" title — hide, progress bar provides context */
.appointment-form-shortcode .mpa-booking-step-period .mpa-shortcode-title {
  display: none !important;
}

/* ── 11. Time slot pills ──────────────────────────────────── */

/* Default: 3 columns */
.appointment-form-shortcode .mpa-booking-step-period .mpa-times {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.4rem !important;
}
/* Narrow time column (≤260px): 2 columns */
@container bf-timewrapper (max-width: 260px) {
  .appointment-form-shortcode .mpa-booking-step-period .mpa-times {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.35rem !important;
  }
}
/* Very narrow (≤130px): 1 column */
@container bf-timewrapper (max-width: 130px) {
  .appointment-form-shortcode .mpa-booking-step-period .mpa-times {
    grid-template-columns: 1fr !important;
  }
}

.appointment-form-shortcode .mpa-booking-step-period .mpa-time-period {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Reset MotoPress float-based margin that creates gaps in grid */
  margin: 0 !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0.5rem 0.4rem !important;
  border-radius: 0.8rem !important;
  border: 1.5px solid #eae6f5 !important;
  background: #f9f8fe !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #2d2a3e !important;
  cursor: pointer;
  transition: all 0.18s ease !important;
  text-align: center !important;
  height: auto !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-period:hover {
  background: #ede9fe !important;
  border-color: var(--bf-primary) !important;
  transform: translateY(-1px);
  color: var(--bf-primary) !important;
}
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-period-selected {
  background: var(--bf-primary) !important;
  border-color: var(--bf-primary) !important;
  color: var(--bf-primary-text) !important;
  box-shadow: 0 4px 12px var(--bf-primary-shadow) !important;
}

/* ── 12. Flatpickr calendar restyle ──────────────────────── */
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-calendar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  border-radius: 1.2rem;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  font-family: var(--bf-font) !important;
}
/* (desktop calendar width is handled in section 10 flex layout) */
/* Mobile: bigger day tap targets */
@media (max-width: 540px) {
  .appointment-form-shortcode .mpa-booking-step-period .flatpickr-day {
    min-height: 42px !important;
    font-size: 0.95rem !important;
  }
  .appointment-form-shortcode .mpa-booking-step-period .dayContainer,
  .appointment-form-shortcode .mpa-booking-step-period .flatpickr-days {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
}

/* Remove the default box-shadow border from MotoPress */
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-calendar {
  box-shadow: none !important;
}

.appointment-form-shortcode .mpa-booking-step-period .flatpickr-months {
  padding: 0 0 0.8rem;
  align-items: center;
}

.appointment-form-shortcode .mpa-booking-step-period .flatpickr-current-month {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--bf-text-dark);
}
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-current-month .cur-month,
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-current-month .numInputWrapper {
  pointer-events: none;
}

/* Nav arrows — circular buttons */
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-prev-month,
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-next-month {
  background: #f3f0fa !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 4px !important;
  transition: background 0.18s ease;
}
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-prev-month:hover,
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-next-month:hover {
  background: var(--bf-primary-light) !important;
}
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-prev-month svg,
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-next-month svg {
  fill: var(--bf-text-mid) !important;
}

/* Weekday labels */
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-weekday {
  font-size: 0.7rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Day grid full-width */
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-days,
.appointment-form-shortcode .mpa-booking-step-period .dayContainer {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Day cells — circular */
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day {
  aspect-ratio: 1 / 1;
  max-width: none;
  height: auto;
  line-height: 1;
  border-radius: 50% !important;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bf-text-dark);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
  background: var(--bf-primary-light);
  color: var(--bf-primary);
}

/* Selected day */
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day.selected,
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day.selected:hover {
  background: var(--bf-primary) !important;
  border-color: var(--bf-primary) !important;
  color: var(--bf-primary-text) !important;
  box-shadow: 0 4px 12px var(--bf-primary-shadow);
}

/* Today */
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day.today:not(.selected) {
  background: var(--bf-primary-light);
  color: var(--bf-primary);
  font-weight: 800;
}
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day.today:not(.selected)::after {
  display: none;
}

/* Disabled days */
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day.flatpickr-disabled,
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day.flatpickr-disabled:hover {
  color: #d1d5db !important;
  background: transparent !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.5;
}

/* Ghost days (prev/next month) */
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day.prevMonthDay,
.appointment-form-shortcode .mpa-booking-step-period .flatpickr-day.nextMonthDay {
  color: #d1d5db;
}

/* ── 13. Cart / Confirmation step ────────────────────────── */
.appointment-form-shortcode .mpa-booking-step-cart .mpa-cart {
  margin-bottom: 0;
}

.appointment-form-shortcode .mpa-booking-step-cart .mpa-cart-item {
  background: #faf9fe;
  border-radius: 1.5rem;
  border: 1.5px solid #edeaf5;
  margin-bottom: 0;
  overflow: hidden;
}

/* Item header: service + date/time */
.appointment-form-shortcode .mpa-booking-step-cart .item-header {
  width: 100% !important;
  padding: 1.2rem 1.5rem !important;
  border-bottom: 1px solid #edeaf5 !important;
  background: var(--bf-primary-light);
  display: block !important;
  font-weight: 700 !important;
}
.appointment-form-shortcode .mpa-booking-step-cart .item-header .cell {
  width: 100% !important;
  padding: 0 !important;
  margin-bottom: 0.2rem;
}
.appointment-form-shortcode .mpa-booking-step-cart .item-header .cell-service .cell-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--bf-text-dark);
}
.appointment-form-shortcode .mpa-booking-step-cart .item-header .cell-date .cell-value {
  font-size: 0.9rem;
  color: var(--bf-primary);
  font-weight: 600;
}

/* Item body: details grid */
.appointment-form-shortcode .mpa-booking-step-cart .item-body {
  width: 100% !important;
  padding: 1.2rem 1.5rem !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  border-bottom: 1px solid #edeaf5 !important;
}
.appointment-form-shortcode .mpa-booking-step-cart .item-body .cell {
  width: 100% !important;
  padding: 0 !important;
}
.appointment-form-shortcode .mpa-booking-step-cart .cell-people {
  display: none; /* hide the "Clients" capacity field */
}
.appointment-form-shortcode .mpa-booking-step-cart .cell-title {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bf-text-muted) !important;
  margin-bottom: 0.25rem !important;
}
.appointment-form-shortcode .mpa-booking-step-cart .cell-value {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--bf-text-dark) !important;
}
.appointment-form-shortcode .mpa-booking-step-cart .cell-price .cell-value {
  color: var(--bf-primary) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
}

/* Item footer: only shown for multibooking (Remove button) */
.appointment-form-shortcode .mpa-booking-step-cart .item-footer {
  width: 100% !important;
  padding: 0.75rem 1.5rem !important;
  border-top: 1px solid #edeaf5 !important;
  background: transparent;
  display: block !important;
}
.appointment-form-shortcode .mpa-booking-step-cart .item-footer .cell {
  width: 100% !important;
  padding: 0 !important;
}

/* Cart total */
.appointment-form-shortcode .mpa-cart-total {
  display: none; /* price already shown in the card body */
}

/* ── 14. Checkout step ────────────────────────────────────── */
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-checkout-form {
  width: 100%;
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-customer-details {
  /* no extra styles needed */
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-checkout-section + .mpa-checkout-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0eef5;
}
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-required-tip {
  font-size: 0.8rem;
  color: var(--bf-text-muted);
  margin-bottom: 1.2rem;
}

/* ── 14b. GDPR consent section ───────────────────────────── */
.appointment-form-shortcode .mpa-gdpr-consent {
  background: var(--bf-primary-light);
  border-radius: var(--bf-radius-input);
  padding: 0.7rem 0.9rem;
  margin: 0.8rem 0 0;
}
.appointment-form-shortcode .mpa-gdpr-consent .mpa-input-wrapper {
  margin-bottom: 0.35rem;
}
.appointment-form-shortcode .mpa-gdpr-consent .mpa-input-wrapper:last-of-type {
  margin-bottom: 0;
}
.appointment-form-shortcode .mpa-gdpr-consent label,
.appointment-form-shortcode .mpa-gdpr-consent .mpa-consent-label {
  font-weight: 400 !important;
  font-size: 0.78rem !important;
  color: var(--bf-text-mid) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem;
  line-height: 1.4;
  margin-bottom: 0 !important;
}
.appointment-form-shortcode .mpa-gdpr-consent label input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0;
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--bf-primary);
}
.appointment-form-shortcode .mpa-gdpr-consent a {
  color: var(--bf-primary) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}
.appointment-form-shortcode .mpa-gdpr-consent .mpa-gdpr-note {
  font-size: 0.72rem;
  color: var(--bf-text-muted);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* ── 15. Booking (success) step ──────────────────────────── */
.appointment-form-shortcode .mpa-booking-step-booking .mpa-message {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bf-text-mid);
  text-align: center;
  padding: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

/* Booking details (success card) */
.appointment-form-shortcode .mpa-booking-step-booking .mpa-booking-details-section {
  background: var(--bf-primary-light);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin-bottom: 0;
}

/* ── 16. Service wizard (sub-step card UI) ────────────────── */
/* Hide native selects / labels — MotoPress keeps them in DOM */
.appointment-form-shortcode .mpa-booking-step-service-form .mpa-input-wrapper label,
.appointment-form-shortcode .mpa-booking-step-service-form .mpa-input-wrapper select {
  display: none;
}
.appointment-form-shortcode .mpa-booking-step-service-form .mpa-input-wrapper {
  margin: 0;
  padding: 0;
  border: none;
}

/* Wizard shell */
.bf-service-wizard { padding: 1.8rem; }

/* Sub-step panels */
.bf-sub-step { display: none; }
.bf-sub-step.bf-active {
  display: block;
  animation: bfFadeIn 0.22s ease;
}

@keyframes bfFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Wizard actions row — same spacing as MotoPress .mpa-actions */
.bf-wizard-actions {
  margin-top: 1.2rem !important;
  margin-bottom: 0 !important;
  display: flex !important;
  gap: 0.75rem !important;
  align-items: center !important;
}
/* bf-wizard-back visibility is controlled entirely by inline style set in JS */
/* Wizard Next — disabled until a card is picked */
.appointment-form-shortcode .bf-wizard-next:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Sub-step title */
.bf-wizard-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--bf-text-dark);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Service cards */
.bf-service-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bf-service-card {
  background: #faf9fe;
  border-radius: 1.5rem;
  padding: 0;
  cursor: pointer;
  border: 1.5px solid #edeaf5;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.bf-service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--bf-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--bf-primary) 55%, #ffffff);
}
.bf-service-card.bf-selected {
  border-color: var(--bf-primary);
  background: #faf9fe;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bf-primary) 18%, transparent);
}
.bf-service-card-header {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid #edeaf5;
  background: var(--bf-primary-light);
}
.bf-service-card.bf-selected .bf-service-card-header {
  background: var(--bf-primary-light);
}
.bf-service-card.bf-selected .bf-service-card-body {
  background: #ffffff;
}
.bf-service-card-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--bf-text-dark);
}
.bf-service-card-body {
  padding: 1.2rem 1.5rem;
}
.bf-service-card-description {
  margin-top: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--bf-text-muted);
}
.bf-service-card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-top: 0.85rem;
}
.bf-service-detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bf-text-muted);
  margin-bottom: 0.25rem;
}
.bf-service-detail-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bf-text-dark);
}
.bf-service-detail-price .bf-service-detail-value {
  color: var(--bf-primary);
  font-weight: 800;
  font-size: 1.05rem;
}

/* Pill buttons (category / location / employee) */
.bf-pill-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bf-pill-btn {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 1.2rem;
  border: 2px solid #edeaf5;
  background: #faf9ff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bf-text-dark);
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.bf-pill-btn:hover {
  border-color: color-mix(in srgb, var(--bf-primary) 55%, #ffffff);
  background: var(--bf-primary-light);
  transform: translateY(-1px);
}
.bf-pill-btn.bf-selected {
  border-color: var(--bf-primary);
  background: var(--bf-primary-light);
  color: var(--bf-primary);
}

.appointment-form-shortcode button.bf-service-card {
  background: #faf9fe !important;
  border: 1.5px solid #edeaf5 !important;
}

.appointment-form-shortcode button.bf-service-card:hover,
.appointment-form-shortcode button.bf-service-card:focus,
.appointment-form-shortcode button.bf-service-card:active {
  background: #faf9fe !important;
  border-color: color-mix(in srgb, var(--bf-primary) 55%, #ffffff) !important;
  color: var(--bf-text-dark) !important;
}

.appointment-form-shortcode button.bf-service-card.bf-selected,
.appointment-form-shortcode button.bf-service-card.bf-selected:hover,
.appointment-form-shortcode button.bf-service-card.bf-selected:focus,
.appointment-form-shortcode button.bf-service-card.bf-selected:active {
  background: #faf9fe !important;
  border-color: var(--bf-primary) !important;
  color: var(--bf-text-dark) !important;
}

.appointment-form-shortcode button.bf-pill-btn {
  background: #faf9ff !important;
  border: 2px solid #edeaf5 !important;
  color: var(--bf-text-dark) !important;
}

.appointment-form-shortcode button.bf-pill-btn:hover,
.appointment-form-shortcode button.bf-pill-btn:focus,
.appointment-form-shortcode button.bf-pill-btn:active {
  background: var(--bf-primary-light) !important;
  border-color: color-mix(in srgb, var(--bf-primary) 55%, #ffffff) !important;
  color: var(--bf-text-dark) !important;
}

.appointment-form-shortcode button.bf-pill-btn.bf-selected,
.appointment-form-shortcode button.bf-pill-btn.bf-selected:hover,
.appointment-form-shortcode button.bf-pill-btn.bf-selected:focus,
.appointment-form-shortcode button.bf-pill-btn.bf-selected:active {
  background: var(--bf-primary-light) !important;
  border-color: var(--bf-primary) !important;
  color: var(--bf-primary) !important;
}

/* ── 17. Mobile ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .appointment-form-shortcode {
    border-radius: 1rem;
  }
  .appointment-form-shortcode .bf-step-progress {
    padding: 1rem 0.75rem 0.6rem;
    gap: 0.1rem;
  }
  .appointment-form-shortcode .bf-step-icon {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  .appointment-form-shortcode .bf-step-label { font-size: 0.6rem; }

  .appointment-form-shortcode .mpa-booking-step-period,
  .appointment-form-shortcode .mpa-booking-step-cart,
  .appointment-form-shortcode .mpa-booking-step-checkout,
  .appointment-form-shortcode .mpa-booking-step-booking {
    padding: 1.2rem 1.2rem 0 !important;
  }
  .appointment-form-shortcode .mpa-actions {
    margin: 1.2rem -1.2rem 0 !important;
    padding: 0.8rem 1.2rem 1.2rem !important;
  }

  .appointment-form-shortcode .button.mpa-button-next,
  .appointment-form-shortcode .button.mpa-button-back,
  .appointment-form-shortcode .button.mpa-button-reset {
    padding: 0.75rem 1.4rem !important;
    font-size: 0.9rem !important;
    min-width: 90px;
  }

  .bf-service-wizard { padding: 1.2rem; }
  .bf-wizard-title   { font-size: 1.1rem; }
  .bf-service-card   { padding: 1.2rem; border-radius: 1.2rem; }
  .bf-service-card-name { font-size: 1rem; }

  .appointment-form-shortcode .mpa-booking-step-cart .item-body {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   END BOOKFLOW DESIGN SYSTEM
   ============================================================ */

/* ============================================================
   BOOKFLOW — Targeted Fixes
   ============================================================ */


/* ── Checkout "Your Information" — consistent font & sizing ── */

/* Section title styling */
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-shortcode-title {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--bf-text-dark) !important;
  margin-bottom: 1.4rem !important;
}

/* "Your Order" sub-title */
.appointment-form-shortcode .mpa-order-details .mpa-shortcode-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.9rem !important;
}

/* Required tip */
.appointment-form-shortcode .mpa-required-tip {
  font-size: 0.85rem !important;
  color: var(--bf-text-muted) !important;
  margin: -0.6rem 0 1.2rem !important;
}
/* Required asterisk — red, slightly larger */
.appointment-form-shortcode abbr[title="Required"],
.appointment-form-shortcode .mpa-required-tip abbr {
  color: #dc2626 !important;
  font-size: 1.1em !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-style: normal !important;
}

/* Input wrapper spacing inside checkout */
.appointment-form-shortcode .mpa-booking-step-checkout .mpa-input-wrapper {
  margin-bottom: 1.2rem !important;
}

/* Labels in checkout — larger, clearer */
.appointment-form-shortcode .mpa-booking-step-checkout label {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--bf-text-mid) !important;
  margin-bottom: 0.45rem !important;
  display: block;
  font-family: var(--bf-font) !important;
}

/* intlTelInput phone wrapper — make full width */
.appointment-form-shortcode .iti {
  width: 100%;
  display: block !important;
  overflow: visible !important; /* never clip the flag dropdown */
  position: relative !important;
}
/* Country-code dropdown must float above any Astro/theme stacking contexts */
.appointment-form-shortcode .iti__country-list {
  z-index: 99999 !important;
  position: absolute !important;
}
/* intlTelInput uses .iti__hide (display:none) to close the dropdown.
   Without !important, Astro/Tailwind ul resets can override it and keep
   the dropdown permanently open — causing the "always visible, can't select"
   symptom. Lock these so only the JS toggle controls visibility. */
.appointment-form-shortcode .iti__hide {
  display: none !important;
}
.appointment-form-shortcode .iti__v-hide {
  visibility: hidden !important;
}

/* ── Notes textarea — fixed height, no resize ─────────────── */
.appointment-form-shortcode textarea.mpa-customer-notes,
.appointment-form-shortcode .mpa-customer-notes-wrapper textarea {
  resize: none !important;
  font-family: var(--bf-font) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--bf-text-dark) !important;
  border: 1.5px solid var(--bf-border) !important;
  border-radius: var(--bf-radius-input) !important;
  padding: 0.9rem 1rem !important;
  width: 100% !important;
  height: 110px !important;
  display: block;
  line-height: 1.5 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: none !important;
  background: #ffffff !important;
}
.appointment-form-shortcode textarea.mpa-customer-notes:focus,
.appointment-form-shortcode .mpa-customer-notes-wrapper textarea:focus {
  outline: none !important;
  border-color: var(--bf-primary) !important;
  box-shadow: 0 0 0 3px var(--bf-primary-light) !important;
}

/* "Your Order" section separator */
.appointment-form-shortcode .mpa-order-details {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0eef5;
}
/* "Your Order" content — match form font */
.appointment-form-shortcode .mpa-order,
.appointment-form-shortcode .mpa-order *,
.appointment-form-shortcode .mpa-reservation-details,
.appointment-form-shortcode .mpa-reservation-details * {
  font-family: var(--bf-font) !important;
  font-size: 1rem !important;
}
.appointment-form-shortcode .mpa-reservation-details .mpa-label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--bf-text-mid) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.appointment-form-shortcode .mpa-reservation-details .mpa-value {
  font-weight: 600 !important;
  color: var(--bf-text-dark) !important;
}

/* ── Period step validation hint ──────────────────────────── */
.bf-period-hint {
  display: none;
  margin-top: 0.75rem;
  padding: 0.6rem 1rem;
  background: #fff4f4;
  border: 1.5px solid #f5a5a5;
  border-radius: 0.75rem;
  color: #c0392b;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--bf-font);
  text-align: center;
}
.bf-period-hint.bf-visible {
  display: block;
  animation: bf-shake 0.35s ease;
}
@keyframes bf-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px); }
}

/* ============================================================
   END BOOKFLOW — Targeted Fixes
   ============================================================ */

/* ============================================================
   SERVICE CATEGORY ARCHIVE GRID
   All selectors scoped under .bf-service-grid-wrap to override
   theme styles without leaking to the rest of the page.
   ============================================================ */

/* ── Page wrapper ────────────────────────────────────────────── */
.bf-tax-page {
  width: 100%;
  background: var(--bf-sg-page-bg, #f7f5f2);
}

/* ── Grid wrapper + color tokens ─────────────────────────────── */
.bf-service-grid-wrap {
  /* Defaults are overridden by the global Service Category Styles settings. */
  --bf-sg-page-bg:      #f7f5f2;
  --bf-sg-card-bg:      #ffffff;
  --bf-sg-card-bg-image: none;
  --bf-sg-card-bg-overlay-opacity: 1;
  --bf-sg-accent:       #b45f3b;
  --bf-sg-accent-light: color-mix(in srgb, var(--bf-sg-accent) 15%, #ffffff);
  --bf-sg-accent-hover: color-mix(in srgb, var(--bf-sg-accent) 82%, #000000);
  --bf-sg-accent-text:  #ffffff;
  --bf-sg-muted-bg:     #f3f1ef;
  --bf-sg-muted-text:   #5f5c59;

  max-width: 1280px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
  background: var(--bf-sg-page-bg) !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Category header ─────────────────────────────────────────── */
.bf-service-grid-wrap .bf-category-header {
  margin-bottom: 2.5rem !important;
}

.bf-service-grid-wrap .bf-category-header--left   { text-align: left !important; }
.bf-service-grid-wrap .bf-category-header--center { text-align: center !important; }
.bf-service-grid-wrap .bf-category-header--right  { text-align: right !important; }

.bf-service-grid-wrap .bf-category-overline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--bf-sg-accent) !important;
  margin-bottom: 0.65rem !important;
}

.bf-service-grid-wrap .bf-category-overline::before,
.bf-service-grid-wrap .bf-category-overline::after {
  content: '' !important;
  display: block !important;
  height: 1px !important;
  width: 28px !important;
  background: currentColor !important;
  opacity: 0.45 !important;
}

.bf-service-grid-wrap .bf-category-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  color: #1e1b1a !important;
  line-height: 1.15 !important;
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.bf-service-grid-wrap .bf-category-desc {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #6b6460 !important;
  max-width: 560px !important;
  margin-top: 0 !important;
}

.bf-service-grid-wrap .bf-category-header--center .bf-category-desc {
  margin-left: auto !important;
  margin-right: auto !important;
}
.bf-service-grid-wrap .bf-category-header--right .bf-category-desc {
  margin-left: auto !important;
}

/* ── Card grid ───────────────────────────────────────────────── */
.bf-service-grid-wrap .bf-service-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 1.75rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Individual card ─────────────────────────────────────────── */
.bf-service-grid-wrap .bf-service-card {
  background: var(--bf-sg-card-bg) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.045) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.22s cubic-bezier(.25,.46,.45,.94),
              box-shadow 0.28s cubic-bezier(.25,.46,.45,.94) !important;
  text-decoration: none !important;
  color: inherit !important;
}

.bf-service-grid-wrap .bf-service-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.05),
              0 20px 40px -10px rgba(0,0,0,0.10) !important;
}

/* ── Thumbnail ───────────────────────────────────────────────── */
.bf-service-grid-wrap .bf-card-thumb {
  width: 100% !important;
  height: 210px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #f0ebe4 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  display: block !important;
}

.bf-service-grid-wrap .bf-card-thumb::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.06), transparent 50%) !important;
  pointer-events: none !important;
}

.bf-service-grid-wrap .bf-card-thumb--placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f0ebe4 !important;
  color: #c5b8ae !important;
}

.bf-service-grid-wrap .bf-card-thumb--placeholder::after {
  display: none !important;
}

/* ── Card body ───────────────────────────────────────────────── */
.bf-service-grid-wrap .bf-card-body {
  padding: 1.35rem 1.4rem 1.5rem !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
}

.bf-service-grid-wrap .bf-card-body::before,
.bf-service-grid-wrap .bf-card-body::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.bf-service-grid-wrap .bf-card-body::before {
  background-image: var(--bf-sg-card-bg-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: -2 !important;
}

.bf-service-grid-wrap .bf-card-body::after {
  background: var(--bf-sg-card-bg) !important;
  opacity: var(--bf-sg-card-bg-overlay-opacity) !important;
  z-index: -1 !important;
}

.bf-service-grid-wrap .bf-card-body > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Title + price row ───────────────────────────────────────── */
.bf-service-grid-wrap .bf-card-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
  flex-wrap: nowrap !important;
  margin-bottom: 0.55rem !important;
}

.bf-service-grid-wrap .bf-card-name {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  color: #2c2a29 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-decoration: none !important;
}

.bf-service-grid-wrap .bf-card-price {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--bf-sg-accent) !important;
  background: var(--bf-sg-accent-light) !important;
  padding: 0.18rem 0.65rem !important;
  border-radius: 60px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: -0.1px !important;
  line-height: 1.5 !important;
  border: none !important;
}

/* ── Meta row ────────────────────────────────────────────────── */
.bf-service-grid-wrap .bf-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  margin-bottom: 0.85rem !important;
  padding-bottom: 0.85rem !important;
  border-bottom: 1px solid #f0ece8 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.bf-service-grid-wrap .bf-meta-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--bf-sg-muted-text) !important;
  background: var(--bf-sg-muted-bg) !important;
  padding: 0.22rem 0.62rem !important;
  border-radius: 40px !important;
  line-height: 1.4 !important;
  border: none !important;
  text-decoration: none !important;
}

.bf-service-grid-wrap .bf-meta-icon {
  flex-shrink: 0 !important;
  opacity: 0.65 !important;
  display: inline-block !important;
}

/* ── Description ─────────────────────────────────────────────── */
.bf-service-grid-wrap .bf-card-desc {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  color: #4a4643 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  min-height: calc(1.6em * 3) !important;
}

.bf-service-grid-wrap .bf-card-therapists {
  margin-top: 0.9rem !important;
  padding-top: 0.85rem !important;
  border-top: 1px solid #f0ece8 !important;
  color: #4a4643 !important;
}

.bf-service-grid-wrap .bf-card-therapists-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  margin-bottom: 0.35rem !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--bf-sg-muted-text) !important;
}

.bf-service-grid-wrap .bf-card-therapists-list,
.bf-service-grid-wrap .bf-card-therapists-extra {
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  color: #4a4643 !important;
}

.bf-service-grid-wrap .bf-card-therapists-more {
  margin-top: 0.35rem !important;
}

.bf-service-grid-wrap .bf-card-therapists-more summary {
  cursor: pointer !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--bf-sg-accent) !important;
  list-style: none !important;
}

.bf-service-grid-wrap .bf-card-therapists-more summary::-webkit-details-marker {
  display: none !important;
}

.bf-service-grid-wrap .bf-card-therapists-more[open] summary {
  margin-bottom: 0.3rem !important;
}

/* ── Icons — force consistent size regardless of theme ──────── */
.bf-service-grid-wrap .bf-meta-icon {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  flex-shrink: 0 !important;
  opacity: 0.65 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* ── Book Now button ─────────────────────────────────────────── */
.bf-service-grid-wrap .bf-card-cta {
  display: inline-block !important;
  margin-top: 1.1rem !important;
  padding: 0.58rem 1.25rem !important;
  background: var(--bf-sg-accent) !important;
  color: var(--bf-sg-accent-text) !important;
  border-radius: 10px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  text-align: center !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
  align-self: flex-start !important;
}

.bf-service-grid-wrap .bf-card-cta:hover {
  background: var(--bf-sg-accent-hover) !important;
  color: var(--bf-sg-accent-text) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* ── Empty state ─────────────────────────────────────────────── */
.bf-service-grid-wrap .bf-no-services {
  color: #888 !important;
  font-style: italic !important;
  padding: 1rem 0 !important;
}

/* ── Special Offer — card badge & price display ──────────────── */

/* Subtle accent border on the whole card */
.bf-service-grid-wrap .bf-service-card--special {
  border-color: color-mix(in srgb, var(--bf-sg-accent) 28%, transparent) !important;
}

/* Coloured strip at the very top of the card (flex-column first child) */
.bf-service-grid-wrap .bf-special-badge {
  background: var(--bf-sg-accent) !important;
  color: var(--bf-sg-accent-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.42rem 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4em !important;
  flex-shrink: 0 !important;
}

.bf-service-grid-wrap .bf-special-badge__icon {
  flex-shrink: 0 !important;
}

/* Before / after price stack (replaces the single bf-card-price pill) */
.bf-service-grid-wrap .bf-special-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.05rem !important;
  flex-shrink: 0 !important;
}

/* Crossed-out original price */
.bf-service-grid-wrap .bf-price-was {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  color: var(--bf-sg-muted-text) !important;
  text-decoration: line-through !important;
  text-decoration-color: var(--bf-sg-muted-text) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Highlighted discounted price — same visual weight as bf-card-price */
.bf-service-grid-wrap .bf-price-now {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--bf-sg-accent) !important;
  background: var(--bf-sg-accent-light) !important;
  padding: 0.18rem 0.65rem !important;
  border-radius: 60px !important;
  white-space: nowrap !important;
  letter-spacing: -0.1px !important;
  line-height: 1.5 !important;
  border: none !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bf-service-grid-wrap {
    padding: 1.75rem 1.1rem 2.5rem !important;
  }
  .bf-service-grid-wrap .bf-service-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
  .bf-service-grid-wrap .bf-card-thumb {
    height: 185px !important;
  }
}

@media (min-width: 1200px) {
  .bf-service-grid-wrap .bf-card-thumb {
    height: 225px !important;
  }
}

/* ============================================================
   END SERVICE CATEGORY ARCHIVE GRID
   ============================================================ */

/* ============================================================
   SINGLE SERVICE PAGE
   ============================================================ */

body.single-mpa_service .entry-meta,
body.single-mpa_service .byline,
body.single-mpa_service .posted-on,
body.single-mpa_service .post-thumb,
body.single-mpa_service .post-thumb-img-content,
body.single-mpa_service .ast-single-post-featured-section {
  display: none !important;
}

/* ── Special offer banner (single service page) ──────────────── */
.bf-service-special-banner {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  background: color-mix(in srgb, var(--bf-primary, #b45f3b) 8%, #fff) !important;
  border: 1.5px solid color-mix(in srgb, var(--bf-primary, #b45f3b) 25%, transparent) !important;
  border-radius: 14px !important;
  padding: 0.7rem 1.1rem !important;
  margin-bottom: 1rem !important;
  flex-wrap: wrap !important;
}

.bf-service-special-banner__label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--bf-primary, #b45f3b) !important;
  background: color-mix(in srgb, var(--bf-primary, #b45f3b) 12%, #fff) !important;
  padding: 0.28rem 0.75rem !important;
  border-radius: 30px !important;
  white-space: nowrap !important;
}

.bf-service-special-banner__pricing {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  flex-wrap: wrap !important;
}

.bf-service-special-banner .bf-price-was {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #999 !important;
  text-decoration: line-through !important;
  text-decoration-color: #bbb !important;
}

.bf-service-special-banner .bf-price-arrow {
  font-size: 1rem !important;
  color: var(--bf-primary, #b45f3b) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.bf-service-special-banner .bf-price-now {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--bf-primary, #b45f3b) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  letter-spacing: -0.1px !important;
}

.bf-service-single-hero {
  margin: 1.5rem 0 2rem !important;
}

.bf-service-single-hero__booking {
  min-width: 0 !important;
}

.bf-service-single-form {
  padding: 1.4rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.18) !important;
}

.bf-service-single-image {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.18) !important;
}

.bf-service-single-image--placeholder {
  background: linear-gradient(135deg, #f0ebe4, #e7ddd3) !important;
}

.bf-service-single-form .appointment-form-shortcode {
  max-width: 100% !important;
  margin: 0 !important;
}

.bf-service-single-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  gap: 2rem !important;
  align-items: center !important;
  margin: 2rem 0 0 !important;
  padding: 1.6rem !important;
  background: #f7f5f2 !important;
  border-radius: 24px !important;
}

.bf-service-single-summary__media,
.bf-service-single-summary__content {
  min-width: 0 !important;
}

.bf-service-single-summary__subtitle {
  margin: 0 0 0.9rem !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #1e1b1a !important;
}

.bf-service-single-summary__body {
  font-size: 0.98rem !important;
  line-height: 1.75 !important;
  color: #4a4643 !important;
}

.bf-service-single-summary__body > *:first-child {
  margin-top: 0 !important;
}

.bf-service-single-summary__body > *:last-child {
  margin-bottom: 0 !important;
}

.bf-service-single-summary__body ul,
.bf-service-single-summary__body ol {
  padding-left: 1.2rem !important;
}

.bf-service-single-summary__body li {
  margin: 0 0 0.55rem !important;
  line-height: 1.6 !important;
}

.bf-service-single-details {
  margin: 2rem 0 0 !important;
  padding: 1.4rem 1.5rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.18) !important;
}

.bf-service-single-details__title {
  margin: 0 0 1rem !important;
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
}

.bf-service-single-details__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.9rem 1rem !important;
}

.bf-service-single-detail {
  padding: 0.9rem 1rem !important;
  border-radius: 16px !important;
  background: #f7f5f2 !important;
}

.bf-service-single-detail--wide {
  grid-column: 1 / -1 !important;
}

.bf-service-single-detail__label {
  margin-bottom: 0.3rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #6b6460 !important;
}

.bf-service-single-detail__value {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #1e1b1a !important;
}

@media (max-width: 920px) {
  .bf-service-single-summary {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .bf-service-single-details__grid {
    grid-template-columns: 1fr !important;
  }
}