/* BenTec appointment flow: scoped so WooCommerce and the active theme stay untouched. */
.appointment-form-shortcode {
  --bentec-red-dark: var(--bentec-red-hover);
  --bentec-surface-raised: #1b1b1b;

  box-sizing: border-box;
  width: 100%;
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--bentec-text);
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--bentec-border);
  border-radius: 0.75rem;
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.08), 0 1rem 2.5rem rgba(0, 0, 0, 0.4);
}

.appointment-form-shortcode,
.appointment-form-shortcode * {
  box-sizing: border-box;
}

.appointment-form-shortcode .mpa-booking-step,
.appointment-form-shortcode .mpa-booking-step-service-form,
.appointment-form-shortcode .mpa-time-wrapper,
.appointment-form-shortcode .mpa-times-container,
.appointment-form-shortcode .mpa-times {
  width: 100%;
}

.appointment-form-shortcode .mpa-shortcode-title {
  margin-top: 0;
  padding-bottom: 0.7rem;
  color: var(--bentec-red);
  font-weight: 700;
  border-bottom: 1px solid var(--bentec-border);
}

.appointment-form-shortcode label,
.appointment-form-shortcode .mpa-required-tip,
.appointment-form-shortcode .cell-title,
.appointment-form-shortcode .mpa-label,
.appointment-form-shortcode .mpa-payment-gateway-title {
  color: var(--bentec-red);
  font-weight: 650;
}

.appointment-form-shortcode .mpa-description,
.appointment-form-shortcode .mpa-small-description,
.appointment-form-shortcode .mpa-payment-gateway-description,
.appointment-form-shortcode .mpa-customer-create-account-description {
  color: var(--bentec-muted);
}

.appointment-form-shortcode select,
.appointment-form-shortcode textarea,
.appointment-form-shortcode input[type="text"],
.appointment-form-shortcode input[type="email"],
.appointment-form-shortcode input[type="tel"],
.appointment-form-shortcode input[type="number"] {
  min-height: 2.9rem;
  padding: 0.7rem 0.8rem;
  color: var(--bentec-text) !important;
  background: var(--bentec-black) !important;
  border: 1px solid var(--bentec-border) !important;
  border-radius: 0.4rem;
  box-shadow: none;
}

.appointment-form-shortcode textarea {
  min-height: 7rem;
  resize: vertical;
}

.appointment-form-shortcode select option {
  color: var(--bentec-text);
  background: var(--bentec-black);
}

.appointment-form-shortcode input::placeholder,
.appointment-form-shortcode textarea::placeholder {
  color: var(--bentec-muted);
  opacity: 1;
}

.appointment-form-shortcode select:focus,
.appointment-form-shortcode textarea:focus,
.appointment-form-shortcode input[type="text"]:focus,
.appointment-form-shortcode input[type="email"]:focus,
.appointment-form-shortcode input[type="tel"]:focus,
.appointment-form-shortcode input[type="number"]:focus {
  outline: 2px solid transparent;
  border-color: var(--bentec-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.22);
}

.appointment-form-shortcode input[type="checkbox"],
.appointment-form-shortcode input[type="radio"] {
  accent-color: var(--bentec-red);
}

.appointment-form-shortcode .button.button-primary,
.appointment-form-shortcode .mpa-time-period-selected {
  color: var(--bentec-black) !important;
  background: var(--bentec-red) !important;
  border: 1px solid var(--bentec-red) !important;
  border-radius: 0.4rem;
  font-weight: 750;
  text-decoration: none;
  box-shadow: none;
}

.appointment-form-shortcode .button.button-primary:hover,
.appointment-form-shortcode .button.button-primary:focus-visible,
.appointment-form-shortcode .mpa-time-period-selected:hover,
.appointment-form-shortcode .mpa-time-period-selected:focus-visible {
  color: var(--bentec-text) !important;
  background: var(--bentec-red-dark) !important;
  border-color: var(--bentec-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25);
}

.appointment-form-shortcode .button.button-secondary,
.appointment-form-shortcode .mpa-time-period:not(.mpa-time-period-selected) {
  color: var(--bentec-red) !important;
  background: var(--bentec-black) !important;
  border: 1px solid var(--bentec-red) !important;
  border-radius: 0.4rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}

.appointment-form-shortcode .button.button-secondary:hover,
.appointment-form-shortcode .button.button-secondary:focus-visible,
.appointment-form-shortcode .mpa-time-period:not(.mpa-time-period-selected):hover,
.appointment-form-shortcode .mpa-time-period:not(.mpa-time-period-selected):focus-visible {
  color: var(--bentec-text) !important;
  background: var(--bentec-red-dark) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.22);
}

.appointment-form-shortcode .button:disabled,
.appointment-form-shortcode .button[disabled],
.appointment-form-shortcode .mpa-time-period:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.appointment-form-shortcode .flatpickr-calendar {
  color: var(--bentec-text) !important;
  background: var(--bentec-surface) !important;
  border: 1px solid var(--bentec-border) !important;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.55) !important;
}

.appointment-form-shortcode .flatpickr-months,
.appointment-form-shortcode .flatpickr-weekdays,
.appointment-form-shortcode .flatpickr-days,
.appointment-form-shortcode .dayContainer {
  background: var(--bentec-surface) !important;
}

.appointment-form-shortcode .flatpickr-month,
.appointment-form-shortcode .flatpickr-current-month,
.appointment-form-shortcode .flatpickr-current-month input.cur-year,
.appointment-form-shortcode span.flatpickr-weekday {
  color: var(--bentec-red) !important;
  fill: var(--bentec-red) !important;
}

.appointment-form-shortcode .flatpickr-prev-month svg,
.appointment-form-shortcode .flatpickr-next-month svg {
  fill: var(--bentec-red) !important;
}

.appointment-form-shortcode .flatpickr-day {
  color: var(--bentec-text) !important;
  border-color: transparent !important;
}

.appointment-form-shortcode .flatpickr-day:hover,
.appointment-form-shortcode .flatpickr-day:focus {
  color: var(--bentec-text) !important;
  background: var(--bentec-red-dark) !important;
  border-color: var(--bentec-red) !important;
}

.appointment-form-shortcode .flatpickr-day.selected,
.appointment-form-shortcode .flatpickr-day.startRange,
.appointment-form-shortcode .flatpickr-day.endRange {
  color: var(--bentec-black) !important;
  background: var(--bentec-red) !important;
  border-color: var(--bentec-red) !important;
  font-weight: 750;
}

.appointment-form-shortcode .flatpickr-day.flatpickr-disabled,
.appointment-form-shortcode .flatpickr-day.prevMonthDay,
.appointment-form-shortcode .flatpickr-day.nextMonthDay {
  color: #777777 !important;
}

.appointment-form-shortcode .mpa-cart-item,
.appointment-form-shortcode .mpa-checkout-section,
.appointment-form-shortcode .mpa-booking-details-section {
  color: var(--bentec-text);
  background: var(--bentec-surface);
  border: 1px solid var(--bentec-border) !important;
  border-radius: 0.5rem;
}

.appointment-form-shortcode .mpa-checkout-section,
.appointment-form-shortcode .mpa-booking-details-section {
  margin-bottom: 1.25rem;
  padding: 1rem !important;
}

.appointment-form-shortcode .mpa-cart .item-header,
.appointment-form-shortcode .mpa-cart .item-footer,
.appointment-form-shortcode .mpa-reservation-details > li {
  border-color: var(--bentec-border) !important;
}

.appointment-form-shortcode .mpa-cart-total,
.appointment-form-shortcode .mpa-cart-total-price,
.appointment-form-shortcode .mpa-price,
.appointment-form-shortcode .mpa-value {
  color: var(--bentec-text);
  font-weight: 750;
}

.appointment-form-shortcode .mpa-payment-gateways > li,
.appointment-form-shortcode .mpa-billing-fields,
.appointment-form-shortcode .iti__country-list {
  color: var(--bentec-text);
  background: var(--bentec-black);
  border-color: var(--bentec-border);
}

.appointment-form-shortcode .mpa-message {
  padding: 0.8rem 1rem;
  color: var(--bentec-text);
  background: var(--bentec-surface-raised);
  border-left: 4px solid var(--bentec-red);
  border-radius: 0.25rem;
}

.appointment-form-shortcode .mpa-error,
.appointment-form-shortcode .mpa-phone-field-error {
  color: #ffffff;
  background: #640000;
  border-color: var(--bentec-red);
}

.appointment-form-shortcode .mpa-loading {
  background-color: rgba(0, 0, 0, 0.76);
}

.appointment-form-shortcode a {
  color: var(--bentec-red);
}

.appointment-form-shortcode a:hover,
.appointment-form-shortcode a:focus-visible {
  color: var(--bentec-text);
}

@media (max-width: 700px) {
  .appointment-form-shortcode {
    padding: 1rem;
    border-radius: 0.5rem;
  }

  .appointment-form-shortcode .mpa-booking-step-period .mpa-input-container {
    margin-right: 0;
    margin-left: 0;
  }

  .appointment-form-shortcode .mpa-booking-step-period .mpa-input-container .mpa-input-wrapper {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .appointment-form-shortcode .mpa-three-columns .mpa-time-period,
  .appointment-form-shortcode .mpa-four-columns .mpa-time-period,
  .appointment-form-shortcode .mpa-five-columns .mpa-time-period {
    width: calc(50% - 10px) !important;
  }

  .appointment-form-shortcode .mpa-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .appointment-form-shortcode .mpa-actions .button {
    width: 100%;
    margin: 0;
  }

  .appointment-form-shortcode .mpa-cart .cell,
  .appointment-form-shortcode .mpa-cart-item > * {
    width: 100% !important;
  }

  .appointment-form-shortcode .flatpickr-calendar {
    max-width: 100%;
  }
}

/* Flatpickr is compact; isolate its controls from the full-size form fields. */
.appointment-form-shortcode .flatpickr-months,
.appointment-form-shortcode .flatpickr-months .flatpickr-month,
.appointment-form-shortcode .flatpickr-weekdays,
.appointment-form-shortcode .flatpickr-weekdaycontainer,
.appointment-form-shortcode span.flatpickr-weekday,
.appointment-form-shortcode .flatpickr-days,
.appointment-form-shortcode .dayContainer {
  background: var(--bentec-black) !important;
}

.appointment-form-shortcode .flatpickr-months .flatpickr-month {
  height: 42px;
  min-height: 42px;
  overflow: hidden;
}

.appointment-form-shortcode .flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  box-sizing: border-box;
  width: 78%;
  height: 42px;
  min-height: 42px;
  left: 11%;
  padding: 0 0.25rem;
  color: var(--bentec-red) !important;
  background: transparent !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
}

.appointment-form-shortcode .flatpickr-current-month .flatpickr-monthDropdown-months,
.appointment-form-shortcode .flatpickr-current-month input.cur-year {
  min-width: 0;
  min-height: 1.6rem;
  height: 1.6rem !important;
  margin: 0;
  padding: 0 0.15rem !important;
  color: var(--bentec-red) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  line-height: 1.25 !important;
  box-shadow: none !important;
}

.appointment-form-shortcode .flatpickr-current-month .flatpickr-monthDropdown-months {
  flex: 1 1 auto;
  width: auto !important;
  max-width: calc(100% - 6.7ch);
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.appointment-form-shortcode .flatpickr-current-month .flatpickr-monthDropdown-month {
  color: var(--bentec-text);
  background: var(--bentec-black) !important;
}

.appointment-form-shortcode .flatpickr-current-month .numInputWrapper {
  flex: 0 0 6.5ch;
  width: 6.5ch;
  min-width: 0;
  background: transparent !important;
}

.appointment-form-shortcode .flatpickr-current-month input.cur-year {
  width: 100% !important;
}

.appointment-form-shortcode span.flatpickr-weekday {
  color: var(--bentec-red) !important;
}

/* Keep the side-by-side calendar and time panel inside the form at every width. */
.appointment-form-shortcode .mpa-booking-step-period .mpa-input-container,
.appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper,
.appointment-form-shortcode .mpa-booking-step-period .mpa-times-container,
.appointment-form-shortcode .mpa-booking-step-period .mpa-times {
  min-width: 0;
  max-width: 100%;
}

.appointment-form-shortcode .bentec-all-day-help {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.9rem;
  color: var(--bentec-text);
  background: var(--bentec-surface-raised);
  border-left: 4px solid var(--bentec-red);
  border-radius: 0.25rem;
  overflow-wrap: anywhere;
}

.appointment-form-shortcode .mpa-time-period.bentec-all-day-option {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: calc(100% - 10px) !important;
  max-width: calc(100% - 10px);
  min-height: 3.25rem;
  padding-right: 0.75rem !important;
  padding-left: 0.75rem !important;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.appointment-form-shortcode .bentec-all-day-option .mpa-slot-capacity {
  color: currentColor;
  font-size: 0.85em;
}

@media (min-width: 992px) {
  .appointment-form-shortcode .mpa-booking-step-period .mpa-time-wrapper {
    flex: 1 1 0;
    width: auto;
  }
}

/* A sole available slot is selected programmatically; no redundant choice is shown. */
.appointment-form-shortcode .mpa-time-wrapper.bentec-single-time-auto {
  display: none !important;
}

/* Expand and center the calendar when the sole time slot is auto-selected. */
.appointment-form-shortcode .mpa-input-container.bentec-single-time-layout {
  display: block;
  margin-right: 0;
  margin-left: 0;
}

.appointment-form-shortcode .bentec-single-time-layout .mpa-date-wrapper {
  display: flex;
  justify-content: center;
  width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.appointment-form-shortcode .bentec-single-time-layout .flatpickr-calendar {
  width: min(100%, 430px);
  margin: 0 auto;
}

.appointment-form-shortcode .bentec-single-time-layout .flatpickr-rContainer,
.appointment-form-shortcode .bentec-single-time-layout .flatpickr-days,
.appointment-form-shortcode .bentec-single-time-layout .dayContainer {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.appointment-form-shortcode .bentec-single-time-layout .flatpickr-day {
  flex-basis: 14.285714%;
  max-width: none;
  height: clamp(36px, 10vw, 48px);
  line-height: clamp(36px, 10vw, 48px);
}

/* Match Booking notes to the other fields while keeping it on its own row. */
.appointment-form-shortcode .mpa-customer-details .mpa-customer-notes-wrapper {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  clear: both;
}

.appointment-form-shortcode .mpa-customer-notes-wrapper label {
  display: block;
  width: 100%;
  margin-bottom: 0.4rem;
}

.appointment-form-shortcode .mpa-customer-notes-wrapper .mpa-customer-notes {
  display: block;
  width: 100% !important;
  max-width: none;
  margin: 0;
}