/*
 * FlexLast booking CTA theme.
 *
 * Change --flexlast-booking-cta below to recolor every primary action in the
 * booking widget: booking, route/address confirmation, vehicle selection,
 * date/time confirmation and additional-options confirmation.
 */
:root {
  --flexlast-booking-cta: #4fbd4f;
  --flexlast-booking-cta-text: #ffffff;
  --home-booking-cta: var(--flexlast-booking-cta);
}

body.home-page :where(
  #quickOrderWidget .checkout-btn,
  #mapModal .btn-confirm,
  #addressDetailsModal .btn-confirm,
  #truckModal .truck-confirm-btn,
  #dateModal .date-confirm-btn,
  #dateModal .picker-popup-done-btn,
  #optionsModal .opt-confirm-btn,
  #serviceCommentModal .opt-confirm-btn
):not(:disabled):not([aria-disabled="true"]) {
  background: var(--flexlast-booking-cta) !important;
  background-image: none !important;
  color: var(--flexlast-booking-cta-text) !important;
}

body.home-page :where(
  #quickOrderWidget .checkout-btn,
  #mapModal .btn-confirm,
  #addressDetailsModal .btn-confirm,
  #truckModal .truck-confirm-btn,
  #dateModal .date-confirm-btn,
  #dateModal .picker-popup-done-btn,
  #optionsModal .opt-confirm-btn,
  #serviceCommentModal .opt-confirm-btn
):not(:disabled):not([aria-disabled="true"]):is(:hover, :active, :focus-visible) {
  background: var(--flexlast-booking-cta) !important;
  background-image: none !important;
}

body.home-page :where(
  #quickOrderWidget .checkout-btn,
  #mapModal .btn-confirm,
  #addressDetailsModal .btn-confirm,
  #truckModal .truck-confirm-btn,
  #dateModal .date-confirm-btn,
  #dateModal .picker-popup-done-btn,
  #optionsModal .opt-confirm-btn,
  #serviceCommentModal .opt-confirm-btn
):focus-visible {
  outline-color: color-mix(in srgb, var(--flexlast-booking-cta) 55%, transparent);
}