/*
 * 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);
}

/* Carrying-page actions match the user's reference version. */
body.loaders-page {
  --flexlast-booking-cta: #4fbd4f;
}

/* Conditions belong inside the price card so its overlapping outer margin
   cannot cover the arrival fee or the manual-quote contact link. */
#quickOrderWidget .loader-approach-notice {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  overflow-wrap: anywhere;
}
#quickOrderWidget .loader-approach-notice[hidden] { display: none; }
#quickOrderWidget .loader-approach-notice a { color: inherit; text-decoration: underline; }