html {
  height: 100%;
}

body {
  min-height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  font-family: "Open Sans", "arial", "sans-serif";
  font-size: 14px;
}

.lddfw_back_to_login_link svg,
#lddfw_new_password_reset_link svg,
#lddfw_back_to_forgot_password_link svg {
  width: 12px;
  top: -1px;
}

#lddfw_driver_delivered_note_wrap,
#lddfw_driver_note_wrap {
  margin-bottom: 10px;
}

.lddfw_date_range {
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 12px;
}

#lddfw_orders_table .lddfw_box {
  min-height: 122px;
}

.lddfw_box .lddfw_counter {
  border-width: 1px;
  border-style: solid;
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  border-radius: 100px;
  font-size: 12px;
  line-height: 29px;
  position: absolute;
  top: 50%;
  margin-top: -15px;
}

.lddfw_order_view {
  padding: 4px 8px;
  position: absolute;
  right: 13px;
}

.lddfw_multi_checkbox {
  cursor: pointer;
  position: relative;
}

.lddfw_multi_checkbox .lddfw_order_checkbox {
  position: absolute;
  top: 0;
  margin-top: -15px;
}

.lddfw_multi_checkbox .custom-control-label {
  cursor: pointer;
}

.lddfw_multi_checkbox .custom-control-label::before,
.lddfw_multi_checkbox .custom-control-label::after {
  width: 20px;
  height: 20px;
}

#lddfw_plain_route_note_alert {
  padding-right: 24px;
}

.lddfw_handle_column {
  position: absolute;
  top: 0px;
  right: 13px;
  top: 0px;
  margin-top: 0px;
  z-index: 0;
  height: 100%;
  border-radius: 0.25rem;
  padding: 5px;
  padding-top: 15px;
}

.lddfw_dashboard .lddfw_box a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

#lddfw_next_delivery .btn,
.lddfw_order_alert .btn {
  margin-top: 10px;
}

.lddfw_order_alert h2 {
  font-size: 24px;
}

#lddfw_next_delivery,
.lddfw_order_alert h2 {
  margin-bottom: 15px;
}

.lddfw_handle_column .lddfw_sort-up {
  clear: both;
  display: block;
  margin-bottom: 15px;
}

.lddfw_handle_column .lddfw_fas {
  font-size: 20px;
}

#lddfw_order {
  margin-top: 15px;
}
.lddfw_no_map#lddfw_order {
  margin-top: 85px;
}

.lddfw_box .lddfw_order_number {
  display: block;
}

.lddfw_box .lddfw_order_notes,
.lddfw_box .lddfw_order_address {
  display: block;
  padding-left: 45px;
}

.lddfw_box .lddfw_order_custom {
  display: block;
  padding-left: 0;
}

/* Order list cards -> custom field rows (shared across all list screens). */
.lddfw_order_custom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  color: inherit;
}

a.lddfw_order_custom:hover {
  text-decoration: none;
  color: inherit;
}

.lddfw_order_list_custom_field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.55rem 0 0.55rem 1.55rem;
  border-bottom: 1px dashed #eef1f7;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #475569;
  position: relative;
  word-break: break-word;
}

.lddfw_order_list_custom_field::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 1.1rem;
  height: 1.1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.75;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'><path d='M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z'/></svg>");
}

a.lddfw_order_custom:hover .lddfw_order_list_custom_field {
  color: #0f172a;
}

.dark .lddfw_order_list_custom_field {
  color: #cbd5e1;
  border-bottom-color: #334155;
}

.dark a.lddfw_order_custom:hover .lddfw_order_list_custom_field {
  color: #f1f5f9;
}

.dark .lddfw_order_list_custom_field::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8' d='M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z'/></svg>");
}

.lddfw_box .lddfw_order_distance {
  display: block;
  padding-left: 45px;
}

.lddfw_box .lddfw_order_notes {
  padding: 10px 15px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.5;
}

.lddfw_box .lddfw_line {
  display: block;
  padding-left: 45px;
}

.lddfw_order_total_tbl i {
  font-weight: normal;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif;
}

.lddfw_table thead th {
  vertical-align: bottom;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  margin-top: 0px;
  padding-top: 0px;
}

.lddfw_table td,
.lddfw_table th {
  border-top: 0px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.lddfw_title {
  font-size: 20px;
  margin-bottom: 15px;
  margin-top: 15px;
}

#lddfw_calldispatch i {
  font-size: 17px;
  margin-bottom: 4px;
}

#lddfw_calldispatch {
  position: fixed;
  bottom: 96px;
  border-width: 1px;
  border-style: solid;
  z-index: 1;
  width: 100px;
  border-radius: 65px;
  height: 60px;
  width: 60px;
  font-size: 12px;
  right: 10px;
  text-align: center;
  line-height: 11px;
}

#lddfw_plain_route_row {
  line-height: 28px;
}

.lddfw_box p,
#lddfw_claim_order_button_loading,
.lddfw_footer_buttons.driver_assigned .lddfw_loading_btn {
  margin: 0px;
}

.lddfw_box {
  border-width: 1px;
  border-style: solid;
  width: 100%;
  border-radius: 4px;
  text-align: left;
  padding: 15px;
  margin-bottom: 1rem;
}

.lddfw_box.lddfw_min {
  min-height: 155px;
  margin-bottom: 15px;
}

.lddfw_box .lddfw_title {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  width: 100%;
  display: block;
  padding-bottom: 10px;
  font-size: 16px;
  margin: 0px;
  margin-bottom: 10px;
}

.lddfw_dashboard .lddfw_box .lddfw_number {
  font-size: 50px;
  display: block;
}

#lddfw_plainroute {
  font-size: 28px;
}

#lddfw_home .lddfw_cover {
  padding: 0px;
  height: 50%;
  text-align: center;
  min-height: auto;
  position: relative;
}

body::after {
  content: "";
  display: block;
}

.lddfw_cover {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.lddfw_helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.lddfw_date_range {
  line-height: 21px;
}

.lddfw_dashboard .lddfw_box.min.text-center {
  min-height: 157px;
  display: flex;
  align-items: center;
  justify-content: center;
}

span.driver_photo_wrap {
  border-radius: 100px;
  width: 70px;
  height: 70px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  text-align: center;
  position: relative;
  margin-bottom: 6px;
}

img.driver_photo {
  width: auto;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100px;
}

#lddfw_home {
  text-align: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
}

.lddfw_cover img {
  max-height: 100%;
  max-width: 100%;
}

#lddfw_home .lddfw_cover img {
  height: auto;
  width: auto;
}

#lddfw_page h1 {
  font-size: 26px;
}

#lddfw_home h1 {
  font-size: 30px;
  font-weight: bold;
}

label.error {
  margin-top: -15px;
}

#lddfw_application_thankyou .lddfw_back_to_login_link {
  margin-top: 50px;
}

#lddfw_application_link {
  margin-top: 0px;
  display: inline-block;
  font-size: 14px;
}

#lddfw_view_assigned_orders_button,
#lddfw_view_out_of_delivery_orders_button {
  margin-top: 15px;
}

#lddfw_page {
  padding-bottom: 15px;
  width: 100%;
  display: inline-block;
}
#lddfw_page.out_for_delivery {
  padding-bottom: 90px;
}
.lddfw_page .lddfw_signup_button {
  margin-top: 20px;
  margin-bottom: 20px;
}

#lddfw_forgot_password_link,
.lddfw_back_to_login_link {
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}

#lddfw_orders_table .pagination {
  margin: 0px;
  margin-bottom: 7px;
}

#lddfw_delivered_btn,
.lddfw_date_range,
.lddfw_page form input,
.lddfw_page form textarea,
.lddfw_submit_btn,
.lddfw_loading_btn,
#lddfw_resend_button,
.lddfw_delivery_form .lddfw_btn,
.lddfw_plain_route_wrap {
  margin-bottom: 15px;
}

.spinner-border-sm {
  top: -5px;
  position: relative;
}

#lddfw_login,
#lddfw_forgot_password {
  text-align: left;
}

.alert {
  text-align: left;
  margin-bottom: 15px;
}

.alert ul {
  list-style: none;
  margin: 0px;
}

#lddfw_logout {
  font-size: 32px;
}

#lddfw_thankyou,
.lddfw_order_alert {
  text-align: center;
  padding-top: 100px;
}

.lddfw_delivery_form .lddfw_lightbox_wrap {
  top: 0;
  margin-top: 10px;
  position: absolute;
  width: 100%;
}

.lddfw_delivery_form #lddfw_driver_comment_label {
  margin-top: 40px;
}

.billing_phone {
  margin-top: 10px;
}

#lddfw_thankyou .lddfw_btn,
.lddfw_order_alert .lddfw_btn {
  margin-top: 20px;
}

#lddfw_start_delivery_btn,
#lddfw_start_delivery_loading_btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
  background-image: linear-gradient(
    135deg,
    #1d4ed8 0%,
    #3b82f6 100%
  ) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.28) !important;
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_start_delivery_loading_btn {
  margin: 0px;
  min-height: 48px;
}

#lddfw_start_delivery_btn:hover,
#lddfw_start_delivery_btn:focus {
  filter: brightness(1.07) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35) !important;
  color: #fff !important;
}

#lddfw_start_delivery_loading_btn .spinner-border-sm {
  top: 0px;
}

#lddfw_thankyou .fa-check-circle,
.lddfw_order_alert svg {
  font-size: 75px;
  margin-bottom: 20px;
  margin-top: 20px;
  width: 100px;
}

#lddfw_thankyou .lddfw_lightbox_wrap,
.lddfw_order_alert .lddfw_lightbox_wrap {
  top: 50%;
  margin-top: -150px;
  position: absolute;
  width: 100%;
}

.delivered-report .lddfw_box b.lddfw_text {
  font-size: 21px;
}

.lddfw_break {
  flex-basis: 100%;
  height: 0;
}

.delivered-report .lddfw_box {
  min-height: 111px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.delivery_header svg.fa-plus {
  width: 15px;
  top: -1px;
}

svg.fa-signature {
  width: 32px;
}

.lddfw_lightbox_wrap .btn {
  margin-bottom: 0px;
}

.lddfw_lightbox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  padding-top: 20px;
}

/* Set on html/body via JS while modals like directions lightbox are open. */
html.lddfw-scroll-lock,
body.lddfw-scroll-lock {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

.lddfw_footer_buttons {
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding: 12px 0px;
  border-top-width: 1px;
  border-top-style: solid;
  z-index: 99;
}

.lddfw_page_content {
  margin-top: 70px;
}

div#signature-image {
  width: 100%;
  height: 100%;
  text-align: center;
}

#lddfw_delivery_screen .screen_wrap {
  margin-top: 50px;
}

#lddfw_driver_add_signature_btn {
  white-space: nowrap;
}

.lddfw_lightbox_close {
  font-size: 58px;
  right: 30px;
  position: fixed;
  top: -11px;
  text-decoration: none;
  z-index: 99999;
  width: auto !important;
  height: auto !important;
}

.lddfw_logout-col {
  margin-top: 10px;
}

.lddfw_header_title {
  font-size: 20px;
}

#lddfw_header {
  height: 70px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-top: 9px;
  margin-bottom: 0px;
  padding-top: 17px;
  line-height: 32px;
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0px;
}

#lddfw_header .lddfw_col-8.lddfw_text-center,
#lddfw_hide_map .lddfw_col-8.lddfw_text-center {
  font-size: 20px;
}

#lddfw_orders_table .lddfw_fa-sort {
  font-size: 22px;
}

#lddfw_sort_orders a {
  font-size: 20px;
  border-width: 1px;
  border-style: solid;
  padding: 5px 10px;
  display: inline-block;
  margin-bottom: 10px;
  border-radius: 4px;
}

#lddfw_order #order_number {
  font-size: 20px;
  font-weight: bold;
  margin: 0px;
  margin-top: 10px;
}

#lddfw_navigation_buttons {
  margin-bottom: 10px;
}

#lddfw_order p,
#lddfw_out_for_delivery_button_loading,
#lddfw_claim_orders_button_loading,
#lddfw_claim_order_button_loading,
#lddfw_order_unassign_button_loading,
#lddfw_order_out_for_delivery_button_loading {
  margin: 0px;
}

#view_out_of_delivery_orders_button {
  margin-bottom: 15px;
}

.lddfw_map_buttons {
  margin-top: 15px;
}

#lddfw_order #lddfw_customer {
  line-height: 19px;
}

#lddfw_menu {
  position: relative;
}

#lddfw_availability {
  font-size: 28px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

#lddfw_availability .fa-toggle-off,
#lddfw_trackme .lddfw_trackme_off,
.lddfw_order_alert .fa-times-circle {
}

#lddfw_availability .fa-toggle-on,
#lddfw_trackme .lddfw_trackme_on {
}

#lddfw_customer .whatsapp_phone {
  margin-top: 10px;
}

.lddfw_order_alert .lddfw_notice {
  margin-top: 30px;
  margin-bottom: 30px;
}

.lddfw_cover i {
  font-size: 100px;
  padding-top: 30px;
  padding-bottom: 30px;
}

svg {
  width: 20px;
  vertical-align: middle;
  position: relative;
}

#lddfw_mySidenav svg,
.lddfw_navigation svg {
  top: -2px;
}

.lddfw_box .lddfw_text {
  font-size: 21px;
}

.lddfw_cover svg {
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100px;
}

.lddfw_content-subtitle {
  font-weight: bold;
  margin-bottom: 15px !important;
}

.lddfw_subtitle {
  margin-bottom: 15px;
}

.lddfw_premium-feature {
  text-align: left;
}

.lddfw_premium-feature .btn svg {
  margin-top: -4px;
}

.premium_feature_title {
  margin-bottom: 20px !important;
  text-align: center;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  font-size: 20px !important;
  padding-bottom: 15px !important;
}

.premium_feature_title p {
  margin: 0px;
}

div#lddfw_directions {
  margin-top: 48px;
}

.lddfw_premium-feature-content {
  margin-top: 35px;
}

#google_map {
  margin-top: -15px;
}

#lddfw_delivery_screen .screen_wrap .lddfw_premium-feature-content {
  margin-top: -15px;
}

/* Photo & Signature sub-screens - locked-state card on free plan */
#lddfw_delivery_photo .lddfw_premium-feature-content,
#lddfw_delivery_signature .lddfw_premium-feature-content {
  margin: 2rem auto;
  max-width: 26rem;
  padding: 1.5rem 1.25rem 1.35rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 8px 24px -4px rgba(15, 23, 42, 0.1);
  text-align: left;
}

#lddfw_delivery_photo .lddfw_premium-feature-content .premium_feature_title,
#lddfw_delivery_signature
  .lddfw_premium-feature-content
  .premium_feature_title {
  border-bottom-color: #e9ecef !important;
  font-size: 1rem !important;
  text-align: center;
}

#lddfw_delivery_photo .lddfw_premium-feature-content .premium_feature_title h2,
#lddfw_delivery_signature
  .lddfw_premium-feature-content
  .premium_feature_title
  h2 {
  font-size: 1.3rem !important;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.15rem !important;
}

#lddfw_delivery_photo .lddfw_premium-feature-content .premium_feature_title p,
#lddfw_delivery_signature
  .lddfw_premium-feature-content
  .premium_feature_title
  p {
  font-size: 0.8rem;
  color: #64748b;
}

/* Dark mode */
.dark #lddfw_delivery_photo .lddfw_premium-feature-content,
.dark #lddfw_delivery_signature .lddfw_premium-feature-content {
  background: #111a2e;
  border-color: #334155;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 8px 24px -4px rgba(0, 0, 0, 0.35);
}

.dark
  #lddfw_delivery_photo
  .lddfw_premium-feature-content
  .premium_feature_title
  h2,
.dark
  #lddfw_delivery_signature
  .lddfw_premium-feature-content
  .premium_feature_title
  h2 {
  color: #f1f5f9;
}

.dark
  #lddfw_delivery_photo
  .lddfw_premium-feature-content
  .premium_feature_title
  p,
.dark
  #lddfw_delivery_signature
  .lddfw_premium-feature-content
  .premium_feature_title
  p {
  color: #94a3b8;
}

.lddfw_premium-feature-content svg {
  top: -3px;
}

.lddfw_premium-feature.lddfw_inline {
  display: inline-block;
  margin-bottom: 15px;
}

/* ==========================================================================
   Premium Feature - Modern centred modal (matches lddfw_delivered_confirmation pattern)
   ========================================================================== */

/* Trigger pill - replaces the old grey Bootstrap btn-secondary btn-sm */
.lddfw_premium-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 193, 6, 0.12);
  border: 1px solid rgba(255, 193, 6, 0.45);
  color: #92640a;
  border-radius: 20px;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.lddfw_premium-trigger-btn:hover,
.lddfw_premium-trigger-btn:focus {
  background: rgba(255, 193, 6, 0.22);
  box-shadow: 0 0 0 3px rgba(255, 193, 6, 0.2);
  transform: translateY(-1px);
  outline: none;
}

.lddfw_premium-trigger-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Scrim - base styles always present so the dark background is set before .show() */
.lddfw_premium-modal.lddfw_lightbox {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 1rem;
}

/* Flex centring: triggered when the element is no longer display:none (after jQuery .show()) */
.lddfw_premium-modal.lddfw_lightbox:not([style*="display:none"]):not(
    [style*="display: none"]
  ) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Wrap - the flex child that sizes the card */
.lddfw_premium-modal .lddfw_lightbox_wrap {
  display: block;
  flex: 0 1 auto;
  height: auto;
  width: min(100%, 28rem);
  max-width: 28rem;
  margin: 0;
  position: relative;
  top: auto !important;
  padding: 0;
  animation: lddfw-pm-slide-up 0.25s ease both;
}

/* Card */
.lddfw_premium-modal .lddfw_lightbox_wrap .container {
  max-width: none;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 24px 48px -12px rgba(15, 23, 42, 0.28);
  position: relative;
}

/* Close button - absolute inside the card */
.lddfw_premium-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f5f9;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #475569;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  /* Override the old fixed-position rule from .lddfw_lightbox_close */
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  font-size: inherit !important;
  width: 30px !important;
  height: 30px !important;
  z-index: 1;
}

.lddfw_premium-modal__close:hover,
.lddfw_premium-modal__close:focus {
  background: #e2e8f0;
  color: #0f172a;
  outline: none;
}

.lddfw_premium-modal__close svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Reset content top margin - the card padding handles spacing */
.lddfw_premium-modal .lddfw_premium-feature-content {
  margin-top: 0;
  font-weight: normal;
  font-size: 14px;
}

/* Title inside card - explicitly centred */
.lddfw_premium-modal .premium_feature_title {
  font-size: 1rem !important;
  margin-bottom: 0.85rem !important;
  padding-bottom: 0.75rem !important;
  text-align: center !important;
}

.lddfw_premium-modal .premium_feature_title h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.15rem !important;
  text-align: center;
}

.lddfw_premium-modal .premium_feature_title p {
  font-size: 0.8rem;
  color: #64748b;
  text-align: center;
}

/* "Got it" close button - reset all lddfw_lightbox_close baggage, styled as amber CTA */
.lddfw_premium-godit-btn {
  /* Reset the inherited lddfw_lightbox_close positioning/sizing */
  position: static !important;
  top: auto !important;
  right: auto !important;
  font-size: 0.925rem !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  text-decoration: none !important;
  /* Button appearance - amber premium */
  display: block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #ffc106, #ff8f00) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 143, 0, 0.3);
  transition:
    filter 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.lddfw_premium-godit-btn:hover,
.lddfw_premium-godit-btn:focus {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px rgba(255, 143, 0, 0.4) !important;
  transform: translateY(-1px);
  outline: none;
}

.dark .lddfw_premium-godit-btn {
  box-shadow: 0 2px 8px rgba(255, 143, 0, 0.2);
}

/* Slide-up entry animation */
@keyframes lddfw-pm-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode */
.dark .lddfw_premium-modal .lddfw_lightbox_wrap .container {
  background: #111a2e;
  border-color: #334155;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 24px 48px -12px rgba(0, 0, 0, 0.55);
}

.dark .lddfw_premium-modal .premium_feature_title h2 {
  color: #f1f5f9;
}

.dark .lddfw_premium-modal .premium_feature_title p {
  color: #94a3b8;
}

.dark .lddfw_premium-modal__close {
  background: #1e293b;
  color: #94a3b8;
}

.dark .lddfw_premium-modal__close:hover,
.dark .lddfw_premium-modal__close:focus {
  background: #334155;
  color: #f1f5f9;
}

.lddfw_items img {
  float: left;
  margin-right: 10px;
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
  margin-top: 6px;
}

.lddfw_back_link svg,
#lddfw_menu .fa-bars,
#lddfw_availability svg,
#lddfw_hide_map_btn .fa-arrow-left,
#lddfw_trackme svg {
  width: 34px;
}

#lddfw_claim_orders_button svg,
#lddfw_claim_order_button svg,
#lddfw_order_out_for_delivery_button svg,
#lddfw_out_for_delivery_button svg {
  top: -1px;
}

#lddfw_order svg,
.lddfw_done_btn svg {
  top: -2px;
  width: 16px;
}

#lddfw_plainroute_btn svg {
  top: -3px;
}

#lddfw_plain_route_row .lddfw_loading_btn,
#lddfw_plain_route_row .lddfw_done_btn {
  margin: 0px;
}

#lddfw_sortroute_btn svg {
  height: 20px;
}

#lddfw_plainroute_btn .fa-lock {
  width: 16px;
}

.availability-text {
  line-height: 42px;
}

.lddfw_table td.lddfw_space_col {
  width: 70%;
  border: none;
}

.lddfw_total_col {
  width: 100px;
  text-align: center;
}

#lddfw_footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
}

#lddfw_user_avatar {
  border-radius: 100px;
  width: 100px;
  height: 100px;
  border-width: 1px;
  border-style: solid;
}

.lddfw_avatar-col {
  text-align: right;
  margin-top: 10px;
}

#lddfw_menu .lddfw_availability {
  position: absolute;
  font-size: 0;
  right: 5px;
  bottom: 5px;
  top: auto;
  left: auto;
  border-radius: 50%;
  padding: 0;
  width: 9px;
  height: 9px;
  line-height: 0;
  display: block;
}

.lddfw_sidenav h3 {
  font-size: 20px;
  margin: 5px;
  margin-top: 0px;
}

.lddfw_sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 16px;
  text-align: left;
}

#lddfw_directions-panel-listing {
  padding-top: 0;
  height: 36%;
  overflow-y: auto;
  font-size: 14px;
  bottom: 0px;
}

#lddfw_directions-panel-listing .fa-map-marker,
#lddfw_directions-panel-lightbox .fa-map-marker {
  font-size: 26px;
  position: absolute;
  top: 50%;
  margin-top: -13px;
  left: 11%;
  margin-left: -9px;
  z-index: 0;
}

#lddfw_directions-panel-listing .lddfw_text-center {
  position: relative;
}

#lddfw_directions-panel-listing .lddfw_point,
#lddfw_directions-panel-lightbox .lddfw_point {
  position: absolute;
  margin-left: -14px;
  margin-top: 0px;
  z-index: 1;
  top: 50%;
  left: 12%;
  margin-top: -12px;
  margin-left: -4px;
}

#lddfw_directions-panel-lightbox .adp-placemark {
  display: none;
}

#lddfw_directions-panel-listing .lddfw_address {
  padding-top: 5px;
  padding-bottom: 5px;
}

#lddfw_directions-panel-listing .lddfw_drive {
  margin-bottom: 5px;
  margin-top: 5px;
}

.lddfw_order_products_tbl td,
.lddfw_order_products_tbl .table th {
  border-top-width: 1px;
  border-top-style: solid;
}

tr:first-child td,
tr:first-child th {
  border: none;
}

a.lddfw_closebtn {
  font-size: 58px !important;
  right: 1px !important;
  top: 10px !important;
}

#lddfw_hide_map {
  height: 70px;
  padding-top: 9px;
  margin-bottom: 0px;
  padding-top: 19px;
  line-height: 32px;
  margin-top: -70px;
}

.lddfw_dropdown-divider {
  border-top-width: 1px;
  border-top-style: solid;
}

.lddfw_sidenav .dropdown-header {
  text-align: center;
}

#lddfw_header .lddfw_sidenav a {
  padding: 6px 8px 6px 32px;
  text-decoration: none;
  font-size: 0.95rem !important;
  display: block;
  transition: 0.3s;
}

.lddfw_sidenav .lddfw_closebtn {
  position: absolute;
  right: 10px !important;
  margin-left: 0px;
  padding: 0px !important;
  top: 18px !important;
  z-index: 9999;
}

#lddfw_main {
  transition: margin-left 0.5s;
  padding: 16px;
}

.lddfw_map-main-outer {
  height: 577px;
  border-width: 1px;
  border-style: solid;
  padding: 5px;
  width: 100% !important;
  margin-top: 0 !important;
}

#lddfw_directions-panel td {
  padding: 5px 0px;
}

#lddfw_directions-panel tr {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

#lddfw_directions-panel tr:last-child {
  border-bottom: none;
}

.lddfw_list-section {
  height: 190px;
  border-width: 1px;
  border-style: solid;
  padding: 10px;
  overflow: auto;
  margin-top: 10px;
  direction: rtl;
  text-align: right;
}

.lddfw_box.lddfw_no_orders {
  text-align: center;
  padding-top: 63px;
  padding-bottom: 63px;
}

.lddfw_confirmation .lddfw_lightbox_close,
.lddfw_alert_screen .lddfw_lightbox_close {
  display: none;
}

.lddfw_confirmation h2,
.lddfw_alert_screen h2 {
  text-align: center;
  margin-bottom: 50px;
}

.lddfw_confirmation svg,
.lddfw_alert_screen svg {
  width: 100px;
  margin-bottom: 50px;
}

#lddfw_total_route b {
  display: inline-block;
}

#lddfw_total_route {
  margin-top: 5px;
  margin-bottom: 5px;
}

#lddfw_map123 {
  height: 55%;
}

.lddfw_tracking_content,
#lddfw_tracking_page {
  height: 100%;
}

#lddfw_right-panel {
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#lddfw_right-panel select,
#lddfw_right-panel input {
  font-size: 15px;
}

#lddfw_right-panel select {
  width: 100%;
}

#lddfw_right-panel i {
  font-size: 12px;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#lddfw_map {
  height: 100%;
  width: 100%;
}

#lddfw_right-panel {
  margin: 20px;
  border-width: 2px;
  width: 20%;
  height: 400px;
  float: left;
  text-align: left;
  padding-top: 0;
}

#lddfw_directions-panel {
  margin-top: 10px;
  padding: 10px;
  overflow: scroll;
  height: 174px;
}

.lddfw_delivery_form .custom-control {
  border-width: 1px;
  border-style: solid;
  margin-bottom: 6px;
  padding: 0px;
  border-radius: 4px;
  cursor: pointer;
}

.lddfw_delivery_form .custom-control-label {
  cursor: pointer;
  padding: 10px;
  width: 100%;
  padding-left: 40px;
}

.lddfw_delivery_form .custom-radio .custom-control-label::before {
  left: 12px;
  top: 14px;
}

.lddfw_delivery_form h1 {
  font-size: 22px;
}

.delivery_header {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-bottom: 0px;
  position: fixed;
  width: 100%;
  top: 0px;
  line-height: 36px;
  left: 0px;
  padding-top: 8px;
  z-index: 999;
  height: 57px;
}

.delivery_header h4 {
  line-height: 40px;
}

.table.lddfw_order_total_tbl tr:last-child td {
  border-top-width: 1px;
  border-top-style: solid;
}

#lddfw_delivery_screen .lddfw_lightbox_close {
  display: none;
}

#lddfw_driver_cancel_btn {
  margin-top: 8px;
}

#signature-line {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  width: 90%;
  margin: 0 auto;
  position: absolute;
  top: 65%;
  left: 5%;
}

.signature-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 9999;
  top: 0px;
  left: 0px;
  padding-bottom: 100px;
}

.signature-pad {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#signature-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

#signature-line svg {
  position: absolute;
  bottom: 10px;
  font-size: small;
}

.lddfw_lightbox.lddfw_confirmation,
.lddfw_lightbox.lddfw_alert_screen {
  padding-top: 0px;
}

.lddfw_lightbox.lddfw_confirmation .lddfw_lightbox_wrap,
.lddfw_lightbox.lddfw_alert_screen .lddfw_lightbox_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#signature-header {
  height: 57px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-top: 7px;
  margin-bottom: 0px;
  line-height: 39px;
}

.delivery_proof_bar {
  text-align: center;
}

.delivery_proof_bar a {
  display: block;
}

#lddfw_driver_complete_btn {
  margin-top: 8px;
}

#delivery_image_wrap {
  height: 100%;
  text-align: center;
  vertical-align: middle;
  min-height: 300px;
}

.delivery_proof_photo svg.fa-camera {
  width: 27px;
}

#lddfw_driver_add_photo_btn .custom-file-label {
  text-align: center;
  cursor: pointer;
  border-radius: 0.3rem;
  height: auto;
  margin: 0px;
}

#lddfw_driver_add_photo_btn .custom-file {
  margin-bottom: 10px;
}

#lddfw_driver_add_photo_btn .custom-file-label::after {
  display: none;
}

.form-control,
.custom-file-label {
  border-width: 1px;
  border-style: solid;
  font-size: 14px;
}

#delivery_image_wrap img {
  max-width: 100%;
  max-height: 100%;
}

#lddfw_driver_note,
#lddfw_driver_delivered_note {
  height: 100px;
}

#lddfw_delivery_screen.lddfw_lightbox {
  height: 100%;
  overflow-y: scroll;
  padding-bottom: 147px;
}

#driver_form {
  margin-top: 70px;
}

#driver_form .upload_image_wrap {
  height: 100px;
  width: 100px;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#driver_form .upload_image_wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}

#driver_form .custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#driver_form .custom-file-label {
  text-align: center;
  cursor: pointer;
  border-radius: 0.3rem;
  height: auto;
  margin: 0px;
}

#lddfw_page.driver {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#lddfw_password_holder {
  margin-top: 20px;
}

#driver_form .custom-file-label::after {
  display: none;
}

#driver_form .col-form-label {
  font-size: 14px;
}

#driver_form .photo_upload {
  max-width: 100px;
  margin-top: 10px;
}

#lddfw_start_delivery_notice_duration {
  display: block;
  font-size: 36px;
}

#lddfw_start_delivery_notice_distance {
  display: block;
  font-size: 22px;
}

#lddfw_start_delivery_notice {
  margin-bottom: 15px;
}

#lddfw_start_delivery_notice_duration {
  display: block;
  font-size: 36px;
}

#lddfw_page.settings {
  padding-bottom: 70px;
}

#lddfw_page.settings .lddfw_footer_buttons .btn {
  margin: 0px auto;
}

@media screen and (max-height: 731px) {
  #lddfw_driver_note,
  #lddfw_driver_delivered_note {
    height: 70px;
  }
}

@media screen and (max-height: 568px) {
  .lddfw_delivery_form h4 {
    margin: 0px;
  }
}

@media screen and (max-height: 450px) {
  .lddfw_sidenav {
    padding-top: 15px;
  }
  .lddfw_sidenav a {
    font-size: 18px;
  }
}

@media screen and (max-height: 414px) {
  .delivery_proof_bar {
    margin-bottom: 2px;
  }
  #lddfw_order_unassign_button,
  #lddfw_order_out_for_delivery_button,
  #lddfw_delivered_screen_btn,
  #lddfw_failed_delivered_screen_btn {
    margin-bottom: 0px;
  }
  #lddfw_failed_delivery_confirmation,
  #lddfw_thankyou,
  .lddfw_order_alert {
    height: 100%;
  }
}

.lddfw_footer_buttons .btn {
  white-space: nowrap;
  border-radius: 10px;
  padding: 11px !important;
}

#lddfw_page.dashboard {
  padding-bottom: 0px;
}

.lddfw_box.availability {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Driver dashboard - greeting strip (avatar + hello + date) */
.lddfw_dashboard .lddfw-greeting {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.25rem 0.15rem 1rem;
  margin-bottom: 0.25rem;
  margin-top: 15px;
}

.lddfw_dashboard .lddfw-greeting__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background-color: #e9ecef;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  color: #6c757d;
  box-shadow: 0 2px 6px rgba(1, 22, 39, 0.08);
}

.lddfw_dashboard .lddfw-greeting__avatar--fallback svg {
  width: 1.75rem;
  height: 1.75rem;
}

.lddfw_dashboard .lddfw-greeting__text {
  min-width: 0;
  line-height: 1.2;
}

.lddfw_dashboard .lddfw-greeting__hello {
  font-size: 1.15rem;
  font-weight: 700;
  color: #011627;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lddfw_dashboard .lddfw-greeting__date {
  font-size: 0.8125rem;
  color: #6c757d;
  margin-top: 0.15rem;
}

/* Driver dashboard - primary CTA (promoted Out for delivery) */
.lddfw_dashboard .lddfw-primary-cta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  color: #343a40;
  background: #fff9f3;
  border: 1px solid #ffe8cc;
  border-left: 4px solid #fd7e14;
  box-shadow: 0 2px 10px rgba(202, 101, 16, 0.08);
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.lddfw_dashboard .lddfw-primary-cta:hover,
.lddfw_dashboard .lddfw-primary-cta:focus {
  color: #212529;
  background: #fff4e6;
  border-color: #ffd8a8;
  border-left-color: #ca6510;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(202, 101, 16, 0.12);
}

.lddfw_dashboard .lddfw-primary-cta--empty {
  color: #495057;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-left: 4px solid #ffc078;
  box-shadow: 0 2px 10px rgba(1, 22, 39, 0.07);
}

.lddfw_dashboard .lddfw-primary-cta--empty:hover,
.lddfw_dashboard .lddfw-primary-cta--empty:focus {
  color: #343a40;
  background: #fff9f3;
  border-color: #ffe8cc;
  border-left-color: #fd7e14;
  box-shadow: 0 4px 14px rgba(202, 101, 16, 0.1);
  transform: translateY(-1px);
}

.lddfw_dashboard .lddfw-primary-cta--empty .lddfw-primary-cta__icon {
  background: rgba(253, 126, 20, 0.12);
  color: #ca6510;
}

.lddfw_dashboard .lddfw-primary-cta--empty .lddfw-primary-cta__label {
  color: #343a40;
}

.lddfw_dashboard .lddfw-primary-cta--empty .lddfw-primary-cta__sub {
  color: #868e96;
  opacity: 1;
}

.lddfw_dashboard .lddfw-primary-cta--empty .lddfw-primary-cta__count {
  background: rgba(253, 126, 20, 0.1);
  color: #ca6510;
}

.lddfw_dashboard .lddfw-primary-cta--empty .lddfw-primary-cta__chevron {
  color: #adb5bd;
  opacity: 1;
}

.lddfw_dashboard .lddfw-primary-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: rgba(253, 126, 20, 0.16);
  color: #ca6510;
  flex-shrink: 0;
}

.lddfw_dashboard .lddfw-primary-cta__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.lddfw_dashboard .lddfw-primary-cta__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.lddfw_dashboard .lddfw-primary-cta__label {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lddfw_dashboard .lddfw-primary-cta__sub {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #9a4a0a;
  opacity: 0.9;
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lddfw_dashboard .lddfw-primary-cta__count {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: rgba(253, 126, 20, 0.14);
  color: #ca6510;
  min-width: 2.2rem;
  text-align: center;
  flex-shrink: 0;
}

.lddfw_dashboard .lddfw-primary-cta__chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #ca6510;
  opacity: 0.85;
}

.lddfw_dashboard .lddfw-primary-cta__chevron svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* Driver dashboard - status / tracking / rating / earnings KPI strip */
.lddfw_dashboard .lddfw-dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.lddfw_dashboard .lddfw-dashboard-kpi-grid > .lddfw_box {
  margin-bottom: 0;
  height: 100%;
  border-radius: 12px;

  padding: 1rem 1.15rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0.75rem;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.lddfw-kpi-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.lddfw-kpi-card__icon-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.lddfw_dashboard .lddfw-dashboard-kpi-grid > .lddfw_box.min {
  min-height: 0;
}

.lddfw-kpi-card__header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.lddfw-kpi-card__header .lddfw-kpi-card__eyebrow,
.lddfw-kpi-card__header .lddfw-kpi-card__title {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
}

.lddfw-kpi-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;
  background: rgba(108, 117, 125, 0.12);
  color: #5c636a;
}

.lddfw-kpi-card__icon-svg {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

.lddfw-kpi-card--availability .lddfw-kpi-card__icon {
  background: rgba(108, 117, 125, 0.14);
  color: #6c757d;
}

.lddfw-kpi-card--availability:has(#lddfw_availability.lddfw_active)
  .lddfw-kpi-card__icon {
  background: rgba(25, 135, 84, 0.15);
  color: #198754;
}

.lddfw-kpi-card--tracking .lddfw-kpi-card__icon {
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
}

.lddfw-kpi-card--rating .lddfw-kpi-card__icon {
  background: rgba(233, 161, 0, 0.15);
  color: #c28800;
}

.lddfw-kpi-card--earnings .lddfw-kpi-card__icon {
  background: rgba(15, 81, 50, 0.12);
  color: #0f5132;
}

.lddfw-kpi-card__eyebrow,
.lddfw-kpi-card__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c757d;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.25;
}

.lddfw-kpi-card__title {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.8125rem;
}

.lddfw-kpi-card__value {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  color: #011627;
}

.lddfw-kpi-card__value--rating {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.lddfw-kpi-card--availability {
  border-left-color: #adb5bd;
}

.lddfw-kpi-card--availability .availability-text {
  line-height: 1.35;
}

.lddfw-kpi-card--availability #lddfw_availability_status {
  display: contents;
  margin-top: 0.2rem;
  font-weight: 700;
  font-size: 14px;
}

.lddfw-kpi-card--tracking {
  border-left-color: #0d6efd;
}

.lddfw-kpi-card--rating {
  border-left-color: #e9a100;
}

.lddfw-kpi-card--earnings {
  border-left-color: #0f5132;
}

.lddfw_dashboard .lddfw-dashboard-kpi-grid .lddfw-kpi-card .row {
  align-items: center;
}

.lddfw_dashboard .lddfw-dashboard-kpi-grid .lddfw-kpi-card .col-9 {
  font-weight: 600;
  font-size: 14px;
}

/* Driver dashboard - order count tiles (grid below KPI strip) */
.lddfw_dashboard .lddfw-order-stat-card {
  border-radius: 12px;
  border-left-width: 4px;
  border-left-style: solid;
  box-shadow: 0 2px 10px rgba(1, 22, 39, 0.07);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.lddfw_dashboard .lddfw-order-stat-card:hover {
  box-shadow: 0 4px 18px rgba(1, 22, 39, 0.1);
  transform: translateY(-1px);
}

.lddfw_dashboard .lddfw-order-stat-card {
  display: flex;
  padding: 1rem 1.15rem;
}

.lddfw_dashboard .lddfw-order-stat-card a.lddfw-order-stat-card__link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}

.lddfw_dashboard .lddfw-order-stat-card .lddfw_number {
  font-size: 1.45rem;
  display: block;
}

.lddfw_dashboard .lddfw-order-stat-card__link:hover,
.lddfw_dashboard .lddfw-order-stat-card__link:focus {
  text-decoration: none;
  color: inherit;
}

.lddfw_dashboard .lddfw-order-stat-card__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
}

.lddfw_dashboard .lddfw-order-stat-card__label {
  margin: 0;
}

.lddfw_dashboard .lddfw-order-stat-card__icon-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.lddfw_dashboard .lddfw-order-stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;
  margin: 0;
  background: rgba(108, 117, 125, 0.12);
  color: #5c636a;
}

.lddfw_dashboard .lddfw-order-stat-card__icon-svg {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

.lddfw_dashboard .lddfw-order-stat-card .lddfw_number {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #011627;
  margin: 0;
  text-align: left;
}

.lddfw_dashboard .lddfw-order-stat-card .lddfw_label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.lddfw_dashboard .lddfw-order-stat-card--claim {
  border-left-color: #0d6efd;
}

.lddfw_dashboard .lddfw-order-stat-card--claim .lddfw-order-stat-card__icon {
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
}

.lddfw_dashboard .lddfw-order-stat-card--assign {
  border-left-color: #6f42c1;
}

.lddfw_dashboard .lddfw-order-stat-card--assign .lddfw-order-stat-card__icon {
  background: rgba(111, 66, 193, 0.12);
  color: #6f42c1;
}

.lddfw_dashboard .lddfw-order-stat-card--out {
  border-left-color: #ca6510;
}

.lddfw_dashboard .lddfw-order-stat-card--out .lddfw-order-stat-card__icon {
  background: rgba(253, 126, 20, 0.14);
  color: #ca6510;
}

.lddfw_dashboard .lddfw-order-stat-card--failed {
  border-left-color: #dc3545;
}

.lddfw_dashboard .lddfw-order-stat-card--failed .lddfw-order-stat-card__icon {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

.lddfw_dashboard .lddfw-order-stat-card--delivered {
  border-left-color: #198754;
}

.lddfw_dashboard
  .lddfw-order-stat-card--delivered
  .lddfw-order-stat-card__icon {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
}

.lddfw_submenu {
  display: none;
}

.lddfw_submenu.active {
  display: block;
}

.lddfw_submenu a {
  white-space: normal;
}

.lddfw_submenu svg {
  margin-right: 5px;
}

.submenu-item.active .fa-chevron-up,
.submenu-item .fa-chevron-down {
  display: inline-block;
}

.submenu-item.active .fa-chevron-down,
.submenu-item .fa-chevron-up {
  display: none;
}

#lddfw_mySidenav .submenu-item svg.fa-chevron-down,
#lddfw_mySidenav .submenu-item svg.fa-chevron-up {
  margin-left: 7px;
  margin-top: 4px;
}

#lddfw_mySidenav .submenu-item svg.fa-chevron-down {
  margin-left: 3px;
}

.item-variation p {
  display: inline-block;
}

.item-variation {
  display: block;
  margin-left: 60px;
}

.route_title span {
  font-size: 14px;
  font-weight: bold;
}

.lddfw_order_coordinates {
  display: block;
  font-size: 12px;
}

.lddfw_order_coordinates svg {
  width: 14px;
  height: 14px;
  top: -2px;
}



@media screen and (max-width: 320px) {
  #lddfw_page.dashboard span.lddfw_label {
    font-size: 17px;
  }
  #lddfw_order_unassign_button,
  #lddfw_order_out_for_delivery_button,
  #lddfw_delivered_screen_btn {
    margin-bottom: 10px;
  }
}

/* Legacy selectors - kept for backward compat with driver app */
#lddfw_tracking_driver_name {
  font-size: 16px;
  font-weight: bold;
}

#lddfw_tracking_driver_image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 65px;
  height: 65px;
  border-radius: 100px;
  float: left;
  margin-right: 5px;
  word-break: normal;
  font-size: 16px;
}

#lddfw_page.order .base-timer {
  height: 50px;
  margin-top: 9px;
}

#lddfw_delivery_counter svg {
  height: 32px;
  margin: 0px;
  width: 32px;
  margin-top: 3px;
}

#lddfw_delivery_counter {
  text-align: center;
}

#lddfw_page.order .base-timer__svg {
  height: 100%;
  width: 100%;
  margin-top: 0px;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background: none;
}

#lddfw_directions-panel-direction img.adp-marker2 {
  width: 27px;
  height: 27px;
  margin-right: 8px;
  margin-left: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}

#lddfw-panel-listing-toggle {
  display: inline-block;
  margin-left: 10px;
  border-radius: 4px;
  padding: 0px 6px;
  line-height: 22px;
  padding-bottom: 2px;
}

#lddfw_directions-panel-lightbox {
  overflow-y: auto;
  padding-bottom: 15px;
}

#lddfw_directions-panel-lightbox h2 {
  margin-bottom: 30px;
}

#lddfw_directions-panel-direction {
  margin-top: 15px;
  margin-bottom: 15px;
}

.adp-directions {
  width: 100%;
}

#google_map_direction {
  margin-top: 16px;
}

.adp-placemark {
  border: none !important;
}

/* light colors */

body,
.lddfw_box .lddfw_counter,
a,
.lddfw_table,
.lddfw_box .lddfw_title,
.lddfw_cover,
span.driver_photo_wrap,
#lddfw_home,
#lddfw_page h1,
#lddfw_home h1,
#lddfw_logout,
.lddfw_lightbox_close,
#lddfw_header,
#lddfw_header a,
#lddfw_header .lddfw_dropdown-item,
#lddfw_hide_map,
.lddfw_sidenav .dropdown-header,
#lddfw_header .lddfw_sidenav a,
#signature-header,
.delivery_proof_bar a,
.lddfw_sidenav {
  color: #011627;
}

body,
.lddfw_box .lddfw_counter {
  background-color: #f5f7fb;
}

.lddfw_cover,
span.driver_photo_wrap,
.lddfw_sidenav,
.lddfw_cover,
span.driver_photo_wrap,
.lddfw_lightbox,
.lddfw_footer_buttons,
#lddfw_header,
#lddfw_menu .lddfw_availability,
#lddfw_hide_map,
.delivery_header,
.signature-wrapper,
#signature-header,
.lddfw_tracking_page,
#lddfw_counter,
.lddfw_box {
  background-color: #ffffff;
}

#lddfw_sort_orders a:focus,
#lddfw_directions-panel-listing .lddfw_point,
#lddfw_directions-panel-lightbox .lddfw_point,
#lddfw_driver_add_photo_btn .custom-file-label,
#driver_form .custom-file-label {
  color: #fff;
}

.lddfw_delivery_form .custom-control,
.delivery_header,
.form-control,
.custom-file-label,
#signature-header,
.lddfw_box .lddfw_counter {
  border-color: #f1f0f0;
}

.adp-step,
.adp-substep {
  border-top: 1px solid #ededed !important;
}

.multi_checkbox.lddfw_active {
  background-color: #007bff;
}

#lddfw_header .lddfw_sidenav a.active,
#lddfw_header .lddfw_sidenav a:active,
.lddfw_box.lddfw_active {
  background-color: #cce5ff;
}

.lddfw_table thead th,
.lddfw_table td,
.lddfw_table th {
  border-color: #f5f5f5;
}

#lddfw_calldispatch {
  border-color: #f2f9ff;
  background-color: #d0e6fd;
  color: #131313;
}

.table.lddfw_order_total_tbl tr:last-child td,
.lddfw_dropdown-divider,
.lddfw_footer_buttons,
.lddfw_box,
#lddfw_header,
#lddfw_sort_orders a {
  border-color: #dee2e6;
}

.lddfw_box,
.table {
  color: #4c4c4c;
}

.lddfw_box .lddfw_title,
.lddfw_order_products_tbl td,
.lddfw_order_products_tbl .table th {
  border-color: whitesmoke;
}

.lddfw_dashboard .lddfw_box a:hover {
  color: #000;
}

#lddfw_home .lddfw_cover,
#lddfw_home {
  background-color: #fed14c;
}

label.error {
  color: #ce0404;
}

#lddfw_thankyou .fa-check-circle,
.lddfw_order_alert svg {
  color: #51b951;
}

#lddfw_order_claim_failed svg {
  color: #dc3545;
}

#lddfw_application_thankyou .fa-check-circle {
  color: #51b951;
}

.lddfw_footer_buttons {
  box-shadow: 0px 0 10px rgba(216, 216, 216, 0.6);
}

#lddfw_sort_orders a:focus {
  background-color: #295d8d;
}

#lddfw_availability .fa-toggle-off,
#lddfw_trackme .lddfw_trackme_off,
.lddfw_order_alert .fa-times-circle {
  color: #dc3545;
}

#lddfw_availability .fa-toggle-on,
#lddfw_trackme .lddfw_trackme_on {
  color: #28a745;
}

.whatsapp_phone {
  background-color: #25d366;
  border-color: #25d366;
}

hr {
  border-color: #f1f0f0;
}

.premium_feature_title {
  border-color: #f1f0f0 !important;
}

.lddfw_home #lddfw_content {
  background-color: transparent;
}

#lddfw_user_avatar {
  border-color: silver;
}

#lddfw_directions-panel-listing .fa-map-marker,
#lddfw_directions-panel-lightbox .fa-map-marker {
  color: #eb4335;
}

#lddfw_directions-panel-listing .lddfw_address {
  background-color: #f7f7f7;
}

.lddfw_sidenav .lddfw_dropdown-item:focus,
.lddfw_sidenav .lddfw_dropdown-item:hover {
  background-color: rgba(0, 0, 0, #075);
}

.lddfw_sidenav a:hover {
  color: #f1f1f1;
}

.lddfw_map-main-outer {
  border-color: #ccc;
}

#lddfw_directions-panel tr {
  border-color: silver;
}

.lddfw_list-section {
  border-color: silver;
}

#signature-line {
  border-color: #000;
}

.customer_email,
.delivery_proof_bar a.active {
  color: #007bff;
}

#driver_form .custom-file-label,
#lddfw_driver_add_photo_btn .custom-file-label {
  background-color: #6c757d;
  border-color: #6c757d;
}

#driver_form .upload_image_wrap {
  border-color: #ced4da;
}

.lddfw_tracking_page .lddfw_box {
  background-color: transparent;
}

.lddfw_tracking_svg {
  color: #6c757d;
}

.lddfw_tracking_svg.fa-times {
  color: #c30214;
}

.lddfw_tracking_svg.fa-box {
  color: #795548;
}

.lddfw_tracking_svg.fa-check-circle {
  color: #22c55e;
}

.base-timer__path-elapsed {
  stroke: grey;
}

.base-timer__path-remaining.green {
  color: #22c55e;
}

.base-timer__path-remaining.orange {
  color: #f59e0b;
}

.base-timer__path-remaining.red {
  color: #ef4444;
}

#lddfw_loader {
  border-radius: 50px;
  position: fixed;
  z-index: 9999;
  top: 11px;
  left: 10px;
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 45px;
}

#lddfw_loader .spinner-border {
  color: #007bff;
  width: 30px;
  height: 30px;
  top: 6px;
  font-size: 20px;
}

.lddfw_back_column #lddfw_loader {
  position: relative;
  top: -7px;
  left: -7px;
}

/* light colors */

/* dark colors */

body.dark,
.dark .lddfw_box .lddfw_counter,
.dark a,
.dark .lddfw_table,
.dark .lddfw_box .lddfw_title,
.dark .lddfw_cover,
.dark span.driver_photo_wrap,
.dark #lddfw_home,
.dark #lddfw_page h1,
.dark #lddfw_home h1,
.dark #lddfw_logout,
.dark .lddfw_lightbox_close,
.dark #lddfw_header,
.dark #lddfw_header a,
.dark #lddfw_header .lddfw_dropdown-item,
.dark #lddfw_hide_map,
.dark .lddfw_sidenav .dropdown-header,
.dark #lddfw_header .lddfw_sidenav a,
.dark #signature-header,
.dark .delivery_proof_bar a,
.dark .lddfw_sidenav,
.dark .lddfw-title,
.dark #lddfw_page h1,
.dark #lddfw_page h2,
.dark #lddfw_page h3,
.dark #lddfw_tracking_page h1,
.dark #lddfw_tracking_page h2,
.dark #lddfw_tracking_page h3,
.dark .lddfw-rating-stars__value {
  color: #fff;
}

.dark #lddfw_home h1,
.dark #lddfw_home {
  color: #011627;
}

body.dark,
.dark .lddfw_box .lddfw_counter {
  background-color: #121212;
}

.dark .lddfw_cover,
.dark span.driver_photo_wrap,
.dark .lddfw_sidenav,
.dark span.driver_photo_wrap,
.dark .lddfw_lightbox,
.dark .lddfw_footer_buttons,
.dark #lddfw_header,
.dark #lddfw_menu .lddfw_availability,
.dark #lddfw_hide_map,
.dark .delivery_header,
.dark .signature-wrapper,
.dark #signature-header,
.dark .lddfw_tracking_page,
.dark #lddfw_counter,
.dark .lddfw_box {
  background-color: #1e1e1e;
}

.dark #lddfw_sort_orders a:focus,
.dark #lddfw_directions-panel-listing .lddfw_point,
.dark #lddfw_driver_add_photo_btn .custom-file-label,
.dark #driver_form .custom-file-label {
  color: #fff;
}

.dark .lddfw_delivery_form .custom-control,
.dark .delivery_header,
.dark .form-control,
.dark .custom-file-label,
.dark #signature-header,
.dark .lddfw_box .lddfw_counter {
  border-color: #2a2a2a;
}

.dark .text-muted {
  color: #ababab !important;
}

.dark .form-control {
  background-color: #181818;
  color: #ffffff;
}

.dark .lddfw_multi_checkbox.lddfw_active {
  background-color: #007bff;
}

.dark #lddfw_header .lddfw_sidenav a.active,
.dark #lddfw_header .lddfw_sidenav a:active,
.dark .lddfw_box.lddfw_active {
  background-color: #2d2d2d;
}

.dark .lddfw_table thead th,
.dark .lddfw_table td,
.dark .lddfw_table th {
  border-color: #f5f5f5;
}

.dark #lddfw_calldispatch {
  border-color: #f2f9ff;
  background-color: #d0e6fd;
  color: #131313;
}

.dark .dropdown-divider {
  border-color: #010101;
}

.dark .table.lddfw_order_total_tbl tr:last-child td,
.dark .lddfw_dropdown-divider,
.dark .lddfw_footer_buttons,
.dark .lddfw_box,
.dark #lddfw_header,
.dark #lddfw_sort_orders a {
  border-color: #010101;
}

.dark .lddfw_box,
.dark .table {
  color: #fff;
}

.dark .lddfw-kpi-card__eyebrow,
.dark .lddfw-kpi-card__title {
  color: #a8b0ba;
}

.dark .lddfw-kpi-card__value {
  color: #f1f3f5;
}

.dark .lddfw-kpi-card--availability .lddfw-kpi-card__icon {
  background: rgba(255, 255, 255, 0.08);
  color: #adb5bd;
}

.dark
  .lddfw-kpi-card--availability:has(#lddfw_availability.lddfw_active)
  .lddfw-kpi-card__icon {
  background: rgba(25, 135, 84, 0.25);
  color: #75b798;
}

.dark .lddfw-kpi-card--tracking .lddfw-kpi-card__icon {
  background: rgba(13, 110, 253, 0.22);
  color: #9ec5fe;
}

.dark .lddfw-kpi-card--rating .lddfw-kpi-card__icon {
  background: rgba(233, 161, 0, 0.2);
  color: #ffda6a;
}

.dark .lddfw-kpi-card--earnings .lddfw-kpi-card__icon {
  background: rgba(117, 183, 152, 0.18);
  color: #75b798;
}

.dark
  .lddfw_dashboard
  .lddfw-order-stat-card--claim
  .lddfw-order-stat-card__icon {
  background: rgba(13, 110, 253, 0.25);
  color: #9ec5fe;
}

.dark
  .lddfw_dashboard
  .lddfw-order-stat-card--assign
  .lddfw-order-stat-card__icon {
  background: rgba(171, 136, 233, 0.22);
  color: #d4b5ff;
}

.dark
  .lddfw_dashboard
  .lddfw-order-stat-card--out
  .lddfw-order-stat-card__icon {
  background: rgba(253, 126, 20, 0.22);
  color: #ffc078;
}

.dark
  .lddfw_dashboard
  .lddfw-order-stat-card--failed
  .lddfw-order-stat-card__icon {
  background: rgba(220, 53, 69, 0.22);
  color: #ffa8a8;
}

.dark
  .lddfw_dashboard
  .lddfw-order-stat-card--delivered
  .lddfw-order-stat-card__icon {
  background: rgba(25, 135, 84, 0.25);
  color: #75b798;
}

.dark .lddfw_dashboard .lddfw-order-stat-card {
  border-color: #2a2a2a;
}

.dark .lddfw_dashboard .lddfw-order-stat-card--claim {
  border-left-color: #0d6efd;
}

.dark .lddfw_dashboard .lddfw-order-stat-card--assign {
  border-left-color: #6f42c1;
}

.dark .lddfw_dashboard .lddfw-order-stat-card--out {
  border-left-color: #ca6510;
}

.dark .lddfw_dashboard .lddfw-order-stat-card--failed {
  border-left-color: #dc3545;
}

.dark .lddfw_dashboard .lddfw-order-stat-card--delivered {
  border-left-color: #198754;
}

.dark .lddfw_dashboard .lddfw-order-stat-card .lddfw_label {
  color: #a8b0ba;
}

.dark .lddfw_dashboard .lddfw-order-stat-card .lddfw_number {
  color: #f1f3f5;
}

.dark .lddfw_dashboard .lddfw-greeting__hello {
  color: #f1f3f5;
}

.dark .lddfw_dashboard .lddfw-greeting__date {
  color: #a8b0ba;
}

.dark .lddfw_dashboard .lddfw-greeting__avatar {
  background-color: #2a2a2a;
  color: #a8b0ba;
}

body.dark .lddfw_dashboard .lddfw-primary-cta {
  background: #2a2118;
  border: 1px solid rgba(253, 126, 20, 0.35);
  border-left: 4px solid #fd7e14;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

body.dark .lddfw_dashboard .lddfw-primary-cta:hover,
body.dark .lddfw_dashboard .lddfw-primary-cta:focus {
  color: #ffffff;
  background: #352818;
  border-color: rgba(253, 126, 20, 0.5);
  border-left-color: #ffa94d;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

body.dark
  .lddfw_dashboard
  .lddfw-primary-cta:not(.lddfw-primary-cta--empty)
  .lddfw-primary-cta__icon {
  background: rgba(253, 126, 20, 0.22);
  color: #ffc078;
}

body.dark
  .lddfw_dashboard
  .lddfw-primary-cta:not(.lddfw-primary-cta--empty)
  .lddfw-primary-cta__count {
  background: rgba(253, 126, 20, 0.28);
  color: #ffe8cc;
}

body.dark
  .lddfw_dashboard
  .lddfw-primary-cta:not(.lddfw-primary-cta--empty)
  .lddfw-primary-cta__sub {
  color: #ffc078;
  opacity: 1;
}

body.dark .lddfw_dashboard .lddfw-primary-cta .lddfw-primary-cta__label {
  color: #ffffff;
}

body.dark .lddfw_dashboard .lddfw-primary-cta--empty {
  background: #1e1e1e;
  border: 1px solid #3a3a3f;
  border-left: 4px solid #525860;
  box-shadow: none;
}

body.dark .lddfw_dashboard .lddfw-primary-cta--empty:hover,
body.dark .lddfw_dashboard .lddfw-primary-cta--empty:focus {
  color: #e9ecef;
  background: #252525;
  border-color: #45454b;
  border-left-color: #6c757d;
  box-shadow: none;
}

body.dark .lddfw_dashboard .lddfw-primary-cta--empty .lddfw-primary-cta__icon {
  background: rgba(255, 255, 255, 0.06);
  color: #868e96;
}

body.dark .lddfw_dashboard .lddfw-primary-cta--empty .lddfw-primary-cta__sub {
  color: #868e96;
  opacity: 1;
}

body.dark .lddfw_dashboard .lddfw-primary-cta--empty .lddfw-primary-cta__count {
  background: rgba(255, 255, 255, 0.08);
  color: #adb5bd;
}

body.dark
  .lddfw_dashboard
  .lddfw-primary-cta--empty
  .lddfw-primary-cta__chevron {
  color: #868e96;
  opacity: 1;
}

.dark .lddfw_box .lddfw_title,
.dark .lddfw_order_products_tbl td,
.dark .lddfw_order_products_tbl .table th,
.dark .table td,
.dark .table th {
  border-color: #010101;
}

.dark .lddfw_dashboard .lddfw_box a:hover {
  color: #d4d4d4;
}

.dark label.error {
  color: #e96e6e;
}

.dark #lddfw_thankyou .fa-check-circle,
.dark .lddfw_order_alert svg {
  color: #51b951;
}

.dark #lddfw_order_claim_failed svg {
  color: #dc3545;
}

.dark #lddfw_application_thankyou .fa-check-circle {
  color: #51b951;
}

.dark .lddfw_footer_buttons {
  box-shadow: 0px 0 10px rgba(96, 96, 96, 0.6);
}

.dark #lddfw_sort_orders a:focus {
  background-color: #295d8d;
}

.dark #lddfw_availability .fa-toggle-off,
.dark #lddfw_trackme .lddfw_trackme_off,
.dark .lddfw_order_alert .fa-times-circle {
  color: #dc3545;
}

.dark #lddfw_availability .fa-toggle-on,
.dark #lddfw_trackme .lddfw_trackme_on {
  color: #28a745;
}

.dark .whatsapp_phone {
  background-color: #25d366;
  border-color: #25d366;
}

.dark .premium_feature_title {
  border-color: #e5e5e5 !important;
}

.dark .lddfw_home #lddfw_content {
  background-color: transparent;
}

.dark #lddfw_user_avatar {
  border-color: silver;
}

.dark #lddfw_directions-panel-listing .fa-map-marker {
  color: #eb4335;
}

.dark #lddfw_directions-panel-listing .lddfw_address {
  background-color: #282828;
}

.dark::-webkit-scrollbar-thumb {
  height: 50px;
  border-radius: 3px;
}

.dark::-webkit-scrollbar {
  width: 8px;
  height: 3px;
}

.dark::-webkit-scrollbar-button {
  background-color: #666;
}

.dark::-webkit-scrollbar-track {
  background-color: #646464;
}

.dark::-webkit-scrollbar-track-piece {
  background-color: #000;
}

.dark::-webkit-scrollbar-thumb {
  background-color: #666;
}

.dark::-webkit-scrollbar-corner {
  background-color: #646464;
}

.dark::-webkit-resizer {
  background-color: #666;
}

.dark .lddfw_sidenav .lddfw_dropdown-item:focus,
.dark .lddfw_sidenav .lddfw_dropdown-item:hover {
  background-color: rgba(0, 0, 0, #075);
}

.dark .lddfw_sidenav a:hover {
  color: #f1f1f1;
}

.dark .lddfw_map-main-outer {
  border-color: #2e2e2e;
}

.dark .dropdown-item:focus,
.dark .dropdown-item:hover {
  background-color: #1b1b1b;
}

.dark #lddfw_directions-panel tr {
  border-color: silver;
}

.dark .lddfw_list-section {
  border-color: silver;
}

.dark #signature-line {
  border-color: #000;
}

.dark .customer_email,
.dark .delivery_proof_bar a.active {
  color: #007bff;
}

.dark #driver_form .custom-file-label,
.dark #lddfw_driver_add_photo_btn .custom-file-label {
  background-color: #6c757d;
  border-color: #6c757d;
}

.dark #driver_form .upload_image_wrap {
  border-color: #ced4da;
}

.dark .lddfw_tracking_page .lddfw_box {
  background-color: transparent;
}

.dark .lddfw_tracking_svg {
  color: #6c757d;
}

.dark .lddfw_tracking_svg.fa-times {
  color: #ef4444;
}

.dark .lddfw_tracking_svg.fa-box {
  color: #795548;
}

.dark .lddfw_tracking_svg.fa-check-circle {
  color: #22c55e;
}

.dark .base-timer__path-elapsed {
  stroke: grey;
}

.dark .base-timer__path-remaining.green {
  color: #22c55e;
}

.dark .base-timer__path-remaining.orange {
  color: #f59e0b;
}

.dark .base-timer__path-remaining.red {
  color: #ef4444;
}

.dark .adp-placemark {
  background: #000;
  color: #fff;
}

#lddfw-panel-listing-toggle {
  background: #fff;
  border: 1px solid #dee2e6;
}

.dark #lddfw-panel-listing-toggle {
  background-color: #fff;
}

.dark .adp-directions {
  color: #fff;
}

.dark .adp-stepicon {
  background-color: #fff;
  border-radius: 3px;
}

.dark .adp-step,
.dark .adp-substep {
  border-top: 1px solid #323232 !important;
}

.dark .adp-summary {
  color: #fff;
}

/* dark colors */

/* New styles for delivery image wrap and image items */
#delivery_image_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 100px;
  margin-bottom: 15px;
}

.lddfw_image_item {
  position: relative;
  width: 110px;
  height: 110px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
}

.lddfw_image_item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* Corner Delete Button */
.lddfw_delete_image {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: rgba(30, 30, 30, 0.7);
  color: white;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease;
  z-index: 10;
  border-radius: 4px;
  /* Button is always visible */
}

.lddfw_delete_image:hover {
  background-color: rgba(220, 53, 69, 0.9); /* Red on hover */
}

/* Centered Status Indicator */
.lddfw_image_status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; /* Larger circle for status */
  height: 44px;
  background-color: rgba(30, 30, 30, 0.7); /* Semi-transparent background */
  color: white;
  border-radius: 50%; /* Make it round */
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s ease,
    opacity 0.3s ease;
  z-index: 5;
  opacity: 0.9; /* Slightly transparent */
}

.lddfw_image_item:hover .lddfw_image_status {
  opacity: 1; /* Fully opaque on hover */
}
.lddfw_delete_image svg {
  width: 16px;
  height: 16px;
}
.lddfw_image_status svg {
  width: 42px; /* Larger icon for status */
  height: 42px;
  color: white;
}

.lddfw_image_status svg.lddfw_loader_icon {
  width: 30px;
  height: 30px;
}

/* Status-specific background colors using :has() */
.lddfw_image_status:has(.lddfw_uploading_icon) {
  background-color: rgba(90, 187, 241, 0.7); /* Blue for uploading */
}

.lddfw_image_status:has(.lddfw_success_icon) {
  background-color: rgba(40, 167, 69, 0.7); /* Green for success */
}

.lddfw_image_status:has(.lddfw_failure_icon) {
  background-color: rgba(255, 165, 0, 0.7); /* Orange for failure/error */
}

#lddfw_driver_add_photo_btn .custom-file-label:hover {
  background-color: #5a6268;
}

/* Dark mode adjustments */
.dark .lddfw_image_item {
  border-color: #444;
  background-color: #2d2d2d;
}

.dark .lddfw_delete_image {
  background-color: rgba(220, 53, 69, 0.85);
}

.dark .lddfw_delete_image:hover {
  background-color: rgba(220, 53, 69, 1);
}

/* dark colors */

/* Additional mobile improvements */
@media screen and (max-width: 576px) {
  #delivery_image_wrap {
    justify-content: center;
  }

  .lddfw_image_item {
    width: 100px;
    height: 100px;
    margin-right: 5px;
    margin-bottom: 5px;
  }

  .lddfw_delete_image {
    width: 28px;
    height: 28px;
  }
}

/* Animation for newly added images */
.lddfw_image_item {
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Fix for helper span to not interfere with image display */
.lddfw_helper {
  display: none;
}

/* Improve upload button styling - keeping original size */
#upload_image {
  cursor: pointer;
}

/* Make delete icon responsive to touch */
.lddfw_delete_image {
  touch-action: manipulation;
}

/* ============================
   Driver Review Widget
   ============================ */

.lddfw_review_widget {
  text-align: center;
  padding: 24px 12px 48px;
  max-width: 520px;
  margin: 0 auto;
}

.lddfw_review_card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.06);
  padding: 28px 24px 32px;
  position: relative;
}

.lddfw_review_skip {
  text-align: end;
  padding: 0 0 12px;
}

.lddfw_review_skip a {
  color: #8a909a;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.lddfw_review_skip a:hover,
.lddfw_review_skip a:focus-visible {
  color: #202125;
}

.lddfw_review_store_name {
  font-size: 22px;
  font-weight: 700;
  color: #202125;
  margin-bottom: 4px;
  line-height: 1.25;
}

.lddfw_review_subtext {
  font-size: 13px;
  color: #8a909a;
  margin-bottom: 24px;
}

.lddfw_review_form h2 {
  font-size: 20px;
  font-weight: 700;
  color: #202125;
  margin: 0 0 6px;
  line-height: 1.3;
}

.lddfw_review_driver_name {
  color: #43a047;
  white-space: nowrap;
}

.lddfw_review_subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 24px;
}

.lddfw_review_emojis {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
  flex-wrap: nowrap;
}

.lddfw_review_emoji_option {
  cursor: pointer;
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 68px;
  padding: 6px 0;
  border-radius: 10px;
  transition:
    transform 0.2s ease,
    background 0.15s ease;
  outline: none;
}

.lddfw_review_emoji_option:hover {
  transform: scale(1.08);
}

.lddfw_review_emoji_option:focus-visible {
  box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.35);
}

.lddfw_review_emoji_option.lddfw_review_emoji_selected {
  transform: scale(1.15);
}

.lddfw_review_emoji_option.lddfw_review_emoji_selected
  .lddfw_review_emoji_icon
  svg {
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2));
}

.lddfw_review_emoji_icon {
  width: 100%;
  max-width: 48px;
  aspect-ratio: 1;
  margin: 0 auto 4px;
}

.lddfw_review_emoji_icon svg {
  width: 100%;
  height: 100%;
  filter: grayscale(0.85);
  opacity: 0.55;
  transition:
    filter 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.lddfw_review_emoji_option:hover .lddfw_review_emoji_icon svg,
.lddfw_review_emoji_option:focus-visible .lddfw_review_emoji_icon svg,
.lddfw_review_emoji_option.lddfw_review_emoji_selected
  .lddfw_review_emoji_icon
  svg {
  filter: grayscale(0);
  opacity: 1;
}

.lddfw_review_emoji_label {
  font-size: 11px;
  color: #9aa0a6;
  font-weight: 500;
  transition: color 0.15s ease;
}

.lddfw_review_emoji_option:hover .lddfw_review_emoji_label {
  color: #4b5563;
}

.lddfw_review_emoji_selected .lddfw_review_emoji_label {
  color: #202125;
  font-weight: 700;
}

.lddfw_review_comment_wrap {
  margin-bottom: 20px;
  padding: 0 4px;
}

.lddfw_review_comment {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  border: 1px solid #e3e5e8;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  background: #fafbfc;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.lddfw_review_comment:focus {
  border-color: #43a047;
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.15);
  background: #ffffff;
}

.lddfw_review_counter {
  font-size: 11px;
  color: #9aa0a6;
  text-align: end;
  margin-top: 6px;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

.lddfw_review_counter.is-near-limit {
  color: #ef5350;
}

.lddfw_review_btn {
  display: block;
  width: calc(100% - 8px);
  margin: 4px auto 0;
  padding: 15px;
  background: #43a047;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition:
    background 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.lddfw_review_btn:hover {
  background: #388e3c;
  box-shadow: 0 4px 12px rgba(67, 160, 71, 0.25);
}

.lddfw_review_btn:active {
  transform: translateY(1px);
}

.lddfw_review_btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.35);
}

.lddfw_review_btn:disabled {
  background: #e0e3e7;
  color: #9aa0a6;
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}

.lddfw_review_cancel_edit {
  text-align: center;
  margin: 14px 0 0;
}

.lddfw_review_cancel_edit a {
  color: #8a909a;
  font-size: 13px;
  text-decoration: none;
}

.lddfw_review_cancel_edit a:hover {
  color: #202125;
}

/* Thank You State */
.lddfw_review_thankyou {
  padding: 28px 8px 12px;
  text-align: center;
}

.lddfw_review_thankyou h2 {
  font-size: 20px;
  font-weight: 700;
  color: #202125;
  margin: 0 0 12px;
}

.lddfw_review_submitted_rating {
  margin: 8px 0 12px;
  display: flex;
  justify-content: center;
}

.lddfw_review_edit_link {
  margin-top: 18px;
}

.lddfw_review_edit_link a {
  display: inline-block;
  color: #4b5563;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid #e3e5e8;
  border-radius: 999px;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.lddfw_review_edit_link a:hover {
  color: #202125;
  border-color: #c6cacf;
  background: #f7f8fa;
}

/* Single chosen emoji (thank-you state) */
.lddfw-review-single {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: lddfw_review_single_in 0.4s ease-out;
}

@keyframes lddfw_review_single_in {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.lddfw-review-single__icon {
  line-height: 0;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.12));
}

.lddfw-review-single__icon svg {
  width: 100%;
  height: 100%;
}

.lddfw-review-single__label {
  font-size: 14px;
  font-weight: 600;
  color: #202125;
  letter-spacing: 0.01em;
}

/* Review comment quote bubble - base (rating-neutral) */
.lddfw-review-comment-bubble {
  box-sizing: border-box;
  margin-top: 10px;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f8fa;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-inline-start: 4px solid #9aa0a6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  color: #2e3338;
  font-size: 14px;
  line-height: 1.55;
  font-style: normal;
  text-align: start;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.lddfw-review-comment-bubble__text {
  display: block;
  font-style: normal;
  font-weight: 400;
  text-align: start;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Rating-aware color variants - match the emoji face colors. */
.lddfw-review-comment-bubble--r1 {
  background: linear-gradient(180deg, #fff5f5 0%, #ffe8e8 100%);
  border-color: rgba(239, 83, 80, 0.28);
  border-inline-start-color: #ef5350;
}

.lddfw-review-comment-bubble--r2 {
  background: linear-gradient(180deg, #fff8ef 0%, #ffecd2 100%);
  border-color: rgba(255, 152, 0, 0.3);
  border-inline-start-color: #ff9800;
}

.lddfw-review-comment-bubble--r3 {
  background: linear-gradient(180deg, #fffbea 0%, #fff2c4 100%);
  border-color: rgba(253, 216, 53, 0.5);
  border-inline-start-color: #fdd835;
}

.lddfw-review-comment-bubble--r4 {
  background: linear-gradient(180deg, #f4faef 0%, #e6f3dc 100%);
  border-color: rgba(102, 187, 106, 0.32);
  border-inline-start-color: #66bb6a;
}

.lddfw-review-comment-bubble--r5 {
  background: linear-gradient(180deg, #f0f7f1 0%, #dfeede 100%);
  border-color: rgba(67, 160, 71, 0.32);
  border-inline-start-color: #43a047;
}

/* Rating Display (read-only) */
.lddfw-review-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lddfw-emoji {
  display: inline-block;
  line-height: 0;
}

.lddfw-review-rating--sm .lddfw-emoji {
  width: 20px;
  height: 20px;
}

.lddfw-review-rating--sm .lddfw-emoji svg {
  width: 20px;
  height: 20px;
}

.lddfw-review-rating--md .lddfw-emoji {
  width: 32px;
  height: 32px;
}

.lddfw-review-rating--md .lddfw-emoji svg {
  width: 32px;
  height: 32px;
}

.lddfw-review-rating--lg .lddfw-emoji {
  width: 44px;
  height: 44px;
}

.lddfw-review-rating--lg .lddfw-emoji svg {
  width: 44px;
  height: 44px;
}

.lddfw-emoji--inactive {
  opacity: 0.25;
}

.lddfw-emoji--active {
  opacity: 1;
}

.lddfw-review-label {
  font-size: 13px;
  color: #666;
  margin-left: 8px;
}

.lddfw-auth-card {
  max-width: 420px;
  margin: 24px auto;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

#lddfw_page h1,
#lddfw_tracking_page h1 {
  font-size: 24px;
}

#lddfw_page h1,
#lddfw_page h2,
#lddfw_page h3,
#lddfw_tracking_page h1,
#lddfw_tracking_page h2,
#lddfw_tracking_page h3 {
  color: #0f172a;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.select2-container {
  margin-bottom: 15px !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #f1f0f0 !important;
  padding: 9px !important;
  height: 45px !important;
}
.select2-dropdown {
  border: 1px solid #f1f0f0 !important;
}

/* Tracking / generic toast notifications - anchored below the fixed 70px header. */
.lddfw-toast {
  position: fixed;
  top: calc(70px + 0.75rem);
  right: 0.75rem;
  left: 0.75rem;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  color: #011627;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(1, 22, 39, 0.18);
  border-left: 4px solid #dc3545;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  pointer-events: auto;
  font-size: 0.9rem;
  line-height: 1.35;
}

@media (min-width: 576px) {
  .lddfw-toast {
    left: auto;
    right: 1rem;
    max-width: 22rem;
  }
}

.lddfw-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.lddfw-toast__icon {
  flex-shrink: 0;
  color: #dc3545;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Toast variants - recolor left accent + icon. */
.lddfw-toast--success {
  border-left-color: #198754;
}
.lddfw-toast--success .lddfw-toast__icon {
  color: #198754;
}

.lddfw-toast--warning {
  border-left-color: #f0ad4e;
}
.lddfw-toast--warning .lddfw-toast__icon {
  color: #f0ad4e;
}

.lddfw-toast--info {
  border-left-color: #0d6efd;
}
.lddfw-toast--info .lddfw-toast__icon {
  color: #0d6efd;
}

.lddfw-toast__message {
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
}

.lddfw-toast__close {
  background: transparent;
  border: 0;
  padding: 2px;
  margin: -2px;
  color: #6c757d;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

.lddfw-toast__close:hover,
.lddfw-toast__close:focus {
  color: #011627;
  background: rgba(1, 22, 39, 0.06);
  outline: none;
}

.dark .lddfw-toast {
  background: #1f2a36;
  color: #f1f3f5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.dark .lddfw-toast__close {
  color: #a8b0ba;
}

.dark .lddfw-toast__close:hover,
.dark .lddfw-toast__close:focus {
  color: #f1f3f5;
  background: rgba(255, 255, 255, 0.08);
}

/* ===== Driver header - back button + theme toggle ===== */

.lddfw-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 50%;
  color: #011627;
  background: rgba(1, 22, 39, 0.04);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.lddfw-back-btn:hover,
.lddfw-back-btn:focus {
  background: rgba(1, 22, 39, 0.08);
  color: #0d6efd;
  text-decoration: none;
  transform: translateX(-2px);
}

.lddfw-back-btn__icon {
  display: block;
}

.dark .lddfw-back-btn {
  color: #f1f3f5;
  background: rgba(255, 255, 255, 0.06);
}

.dark .lddfw-back-btn:hover,
.dark .lddfw-back-btn:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #7cb4ff;
}

/* The header row holds back (col-2) + title (col-8) + actions (col-2).
   On narrow screens Bootstrap's fixed column widths wrap the actions below.
   Force the row to never wrap and let the three columns auto-size around
   the fixed-width back + actions buttons. */
#lddfw_header .row {
  flex-wrap: nowrap;
  align-items: center;
}

#lddfw_header .lddfw_back_column {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-left: 0.5rem;
  padding-right: 0;
}

#lddfw_header .lddfw_header_title {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lddfw-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  flex-wrap: nowrap;
  padding-left: 0;
  padding-right: 0.5rem;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin-left: auto;
}

.lddfw-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 50%;
  color: #011627;
  background: rgba(1, 22, 39, 0.04);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.lddfw-theme-toggle:hover,
.lddfw-theme-toggle:focus {
  background: rgba(1, 22, 39, 0.06);
  color: #0d6efd;
  text-decoration: none;
}

.lddfw-theme-toggle__icon {
  display: none;
}

/* Light mode → show moon (tap to go dark). */
body:not(.dark) .lddfw-theme-toggle__icon--moon {
  display: block;
}

/* Dark mode → show sun (tap to go light). */
body.dark .lddfw-theme-toggle__icon--sun {
  display: block;
}

.dark .lddfw-theme-toggle {
  color: #ffd66b;
}

.dark .lddfw-theme-toggle:hover,
.dark .lddfw-theme-toggle:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #ffe598;
}

/* ===== Driver side menu redesign ===== */

.lddfw-menu-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  color: #011627;
  background: rgba(1, 22, 39, 0.04);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.lddfw-menu-trigger:hover,
.lddfw-menu-trigger:focus {
  background: rgba(1, 22, 39, 0.08);
  color: #0d6efd;
  text-decoration: none;
}

.lddfw-menu-trigger__icon {
  width: 24px;
  height: 24px;
  display: block;
}

.lddfw-menu-trigger__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #dc3545;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

.lddfw-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1, 22, 39, 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  z-index: 998;
}

.lddfw-menu-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

body.lddfw-menu-open {
  overflow: hidden;
}

/* Sidenav container (scoped to .lddfw-menu to avoid conflicts) */
#lddfw_header .lddfw_sidenav.lddfw-menu {
  padding-top: 0;
  background: #fff;
  box-shadow: -2px 0 20px rgba(1, 22, 39, 0.1);
  overflow-y: auto;
  transition: width 0.25s ease;
}

.lddfw-menu__close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0 !important;
  color: #6c757d !important;
  background: transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  z-index: 10;
}

.lddfw-menu__close:hover,
.lddfw-menu__close:focus {
  background: rgba(1, 22, 39, 0.06);
  color: #011627 !important;
}

.lddfw-menu__header {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem 1.25rem !important;
  border-bottom: 1px solid rgba(1, 22, 39, 0.08);
  text-align: left !important;
}

.lddfw-menu__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lddfw-menu__avatar .driver_photo_wrap {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.lddfw-menu__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.lddfw-menu__name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #011627;
  line-height: 1.2 !important;
}

.lddfw-menu__role {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

.lddfw-menu__section {
  padding: 0.5rem 0.75rem;
}

.lddfw-menu__section + .lddfw-menu__section {
  border-top: 1px solid rgba(1, 22, 39, 0.06);
}

.lddfw-menu__section-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a94a1;
  padding: 0.5rem 0.75rem 0.25rem;
}

#lddfw_header .lddfw_sidenav.lddfw-menu a.lddfw-menu__item {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem !important;
  margin: 0.1rem 0;
  border-radius: 10px;
  font-size: 0.95rem !important;
  font-weight: 500;
  color: #011627;
  border-left: 3px solid transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  text-decoration: none;
}

#lddfw_header .lddfw_sidenav.lddfw-menu a.lddfw-menu__item:hover,
#lddfw_header .lddfw_sidenav.lddfw-menu a.lddfw-menu__item:focus {
  background: rgba(1, 22, 39, 0.04);
  color: #011627;
  text-decoration: none;
}

#lddfw_header .lddfw_sidenav.lddfw-menu a.lddfw-menu__item.is-active {
  background: rgba(13, 110, 253, 0.08);
  color: #0d6efd;
  border-left-color: #0d6efd;
  font-weight: 600;
}

.lddfw-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(108, 117, 125, 0.1);
  color: #5c636a;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.lddfw-menu__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.lddfw-menu__icon--dashboard,
.lddfw-menu__item.is-active .lddfw-menu__icon {
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
}

.lddfw-menu__icon--claim {
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
}

.lddfw-menu__icon--assign {
  background: rgba(111, 66, 193, 0.12);
  color: #6f42c1;
}

.lddfw-menu__icon--out {
  background: rgba(253, 126, 20, 0.14);
  color: #ca6510;
}

.lddfw-menu__icon--failed {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

.lddfw-menu__icon--delivered {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
}

/* Trophy - same gold treatment as dashboard "My Rating" KPI card */
.lddfw-menu__icon--rating {
  background: rgba(233, 161, 0, 0.15);
  color: #c28800;
}

/* Payments / wallet / money-related menu items (used by payments addon). */
.lddfw-menu__icon--payments {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
}

.dark .lddfw-menu__icon--payments {
  background: rgba(52, 211, 153, 0.16);
  color: #34d399;
}

.dark .lddfw-menu__icon--rating {
  background: rgba(233, 161, 0, 0.2);
  color: #ffda6a;
}

.lddfw-menu__icon--settings,
.lddfw-menu__icon--info,
.lddfw-menu__icon--dot {
  background: rgba(108, 117, 125, 0.12);
  color: #5c636a;
}

.lddfw-menu__icon--logout {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.lddfw-menu__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lddfw-menu__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  background: rgba(108, 117, 125, 0.14);
  color: #5c636a;
}

.lddfw-menu__count--claim {
  background: rgba(13, 110, 253, 0.14);
  color: #0d6efd;
}

.lddfw-menu__count--assign {
  background: rgba(111, 66, 193, 0.14);
  color: #6f42c1;
}

.lddfw-menu__count--out {
  background: rgba(253, 126, 20, 0.18);
  color: #ca6510;
}

.lddfw-menu__count--failed {
  background: rgba(220, 53, 69, 0.14);
  color: #dc3545;
}

.lddfw-menu__count--delivered {
  background: rgba(25, 135, 84, 0.14);
  color: #198754;
}

/* Submenu (Information) */
.lddfw-menu__submenu-trigger .lddfw-menu__chevron {
  flex-shrink: 0;
  color: #8a94a1;
  transition: transform 0.2s ease;
}

.lddfw-menu__submenu {
  padding-left: 2.5rem;
  padding-top: 0.15rem;
}

#lddfw_header .lddfw_sidenav.lddfw-menu a.lddfw-menu__subitem {
  padding: 0.45rem 0.75rem !important;
  font-size: 0.9rem !important;
}

.lddfw-menu__icon--dot {
  width: 28px;
  height: 28px;
  background: rgba(108, 117, 125, 0.1);
}

.lddfw-menu__icon--dot svg {
  width: 10px;
  height: 10px;
}

/* Logout section gets a top spacer */
.lddfw-menu__section--logout {
  margin-top: 0.25rem;
}

/* Dark mode */
.dark #lddfw_header .lddfw_sidenav.lddfw-menu {
  background: #000a14;
  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.45);
}

.dark .lddfw-menu__header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .lddfw-menu__name {
  color: #f1f3f5;
}

.dark .lddfw-menu__role,
.dark .lddfw-menu__section-title {
  color: #a8b0ba;
}

.dark .lddfw-menu__section + .lddfw-menu__section {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.dark #lddfw_header .lddfw_sidenav.lddfw-menu a.lddfw-menu__item {
  color: #f1f3f5;
}

.dark #lddfw_header .lddfw_sidenav.lddfw-menu a.lddfw-menu__item:hover,
.dark #lddfw_header .lddfw_sidenav.lddfw-menu a.lddfw-menu__item:focus {
  background: rgba(255, 255, 255, 0.05);
  color: #f1f3f5;
}

.dark #lddfw_header .lddfw_sidenav.lddfw-menu a.lddfw-menu__item.is-active {
  background: rgba(13, 110, 253, 0.18);
  color: #7cb4ff;
  border-left-color: #7cb4ff;
}

.dark .lddfw-menu__close {
  color: #a8b0ba !important;
}

.dark .lddfw-menu__close:hover,
.dark .lddfw-menu__close:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f3f5 !important;
}

.dark .lddfw-menu-trigger {
  color: #f1f3f5;
  background: rgba(255, 255, 255, 0.06);
}

.dark .lddfw-menu-trigger:hover,
.dark .lddfw-menu-trigger:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #7cb4ff;
}

.dark .lddfw-menu-trigger__badge {
  box-shadow: 0 0 0 2px #1f2a36;
}

.dark #lddfw_menu .lddfw_availability {
  background-color: transparent;
}

/* ===== Settings page redesign ===== */

.lddfw-settings {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

/* Hero */
.lddfw-settings-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1rem;
  margin: 0 -1rem 1.5rem;
  background: linear-gradient(135deg, #0d6efd 0%, #4a90e2 100%);
  color: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.18);
}

.lddfw-settings-hero__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.lddfw-settings-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lddfw-settings-hero__identity {
  min-width: 0;
}

.lddfw-settings-hero__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  font-weight: 600;
}

.lddfw-settings-hero__name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0.15rem;
  word-break: break-word;
}

.lddfw-settings-hero__role {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.15rem 0.6rem;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Layout - TOC + body */
.lddfw-settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .lddfw-settings-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 2rem;
  }
}

/* Sticky TOC */
.lddfw-settings-toc {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  position: sticky;
  top: 90px;
  align-self: start;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.04);
}

@media (min-width: 900px) {
  .lddfw-settings-toc {
    display: flex;
  }
}

.lddfw-settings-toc__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: #495057;
  font-weight: 500;
  font-size: 0.925rem;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.lddfw-settings-toc__item:hover,
.lddfw-settings-toc__item:focus {
  background: rgba(13, 110, 253, 0.06);
  color: #0d6efd;
  text-decoration: none;
}

.lddfw-settings-toc__item.is-active {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
  font-weight: 600;
}

.lddfw-settings-toc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex-shrink: 0;
}

/* Section cards */
.lddfw-settings-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.lddfw-settings-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.04);
  overflow: hidden;
  scroll-margin-top: 90px;
}

.lddfw-settings-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f3f5;
  background: #fafbfc;
}

.lddfw-settings-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
  flex-shrink: 0;
}

.lddfw-settings-card__icon--delivery {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
}

.lddfw-settings-card__icon--contact {
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
}

.lddfw-settings-card__icon--account {
  background: rgba(108, 117, 125, 0.14);
  color: #495057;
}

.lddfw-settings-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #011627;
}

.lddfw-settings-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Switch rows (availability, track me) */
.lddfw-settings-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #f1f3f5;
}

.lddfw-settings-switch-row__text {
  min-width: 0;
  flex: 1;
}

.lddfw-settings-switch-row__label {
  font-weight: 600;
  color: #011627;
  font-size: 0.95rem;
}

.lddfw-settings-switch-row__label #lddfw_availability_status {
  margin-left: 0.3rem;
  color: #0d6efd;
}

.lddfw-settings-switch-row__hint {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.15rem;
}

/* Pill toggle */
.lddfw-pill-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #ced4da;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.lddfw-pill-toggle:hover,
.lddfw-pill-toggle:focus {
  text-decoration: none;
}

.lddfw-pill-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.lddfw-pill-toggle.is-on,
.lddfw-pill-toggle.lddfw_active {
  background: #198754;
}

.lddfw-pill-toggle.is-on .lddfw-pill-toggle__knob,
.lddfw-pill-toggle.lddfw_active .lddfw-pill-toggle__knob {
  transform: translateX(22px);
}

/* Field grids */
.lddfw-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 600px) {
  .lddfw-field-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.lddfw-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.lddfw-field__label {
  font-weight: 600;
  color: #011627;
  font-size: 0.875rem;
  margin: 0;
}

.lddfw-field .form-control {
  border-radius: 8px;
  border: 1px solid #ced4da;

  font-size: 0.95rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.lddfw-field .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
  outline: none;
}

.lddfw-field__hint {
  color: #6c757d;
  font-size: 0.8rem;
  line-height: 1.35;
}

/* Avatar uploader */
.lddfw-avatar-upload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #f1f3f5;
  box-sizing: border-box;
  max-width: 100%;
}

.lddfw-avatar-upload__preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #e9ecef;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(1, 22, 39, 0.08);
}

.lddfw-avatar-upload__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lddfw-avatar-upload__controls {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

.lddfw-avatar-upload__title {
  font-weight: 600;
  color: #011627;
  font-size: 0.95rem;
}

.lddfw-avatar-upload__hint {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.lddfw-avatar-upload__btn.custom-file,
.lddfw-avatar-upload__btn {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  max-width: 100%;
  cursor: pointer;
}

.lddfw-avatar-upload__btn input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.lddfw-avatar-upload__btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease;
}

.lddfw-avatar-upload__btn:hover .lddfw-avatar-upload__btn-inner {
  border-color: #0d6efd;
  color: #0d6efd;
  background: rgba(13, 110, 253, 0.04);
}

/* Password field */
.lddfw-btn-ghost {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #ced4da;
  color: #495057;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.lddfw-btn-ghost:hover,
.lddfw-btn-ghost:focus {
  border-color: #0d6efd;
  color: #0d6efd;
  background: rgba(13, 110, 253, 0.04);
}

.lddfw-password-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.lddfw-password-input {
  position: relative;
}

.lddfw-password-input .form-control {
  padding-right: 2.75rem;
}

.lddfw-password-eye {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 0.35rem;
  color: #6c757d;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lddfw-password-eye:hover,
.lddfw-password-eye:focus {
  color: #011627;
  background: rgba(1, 22, 39, 0.06);
  outline: none;
}

.lddfw-password-strength {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.lddfw-password-strength__bar {
  flex: 1;
  height: 6px;
  background: #e9ecef;
  border-radius: 999px;
  overflow: hidden;
}

.lddfw-password-strength__fill {
  display: block;
  height: 100%;
  width: 0;
  background: transparent;
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
}

.lddfw-password-strength__label {
  font-weight: 600;
  min-width: 3rem;
  text-align: right;
}

.lddfw-password-cancel {
  font-size: 0.875rem;
  color: #6c757d;
  align-self: flex-start;
}

.lddfw-password-cancel:hover,
.lddfw-password-cancel:focus {
  color: #dc3545;
  text-decoration: underline;
}

/* Save bar - pinned to the viewport bottom at all breakpoints (same pattern as
   claim/assign/out-for-delivery footers). */
.lddfw-settings-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #e9ecef;
  box-shadow: 0 -4px 16px rgba(1, 22, 39, 0.06);
}

/* Reserve space at the bottom of the form body so the last field
   isn't hidden behind the fixed footer. */
.lddfw-settings .lddfw_form,
.lddfw-settings-body {
  /* padding-bottom: 96px;*/
}

.lddfw-settings-footer .lddfw_submit_btn,
.lddfw-settings-footer .lddfw_loading_btn {
  border-radius: 10px;
  font-weight: 600;
  padding: 0.75rem 1rem;
  width: 100%;
}

/* ===== Settings dark mode ===== */

.dark .lddfw-settings-toc {
  background: #1f2a36;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.dark .lddfw-settings-toc__item {
  color: #a8b0ba;
}

.dark .lddfw-settings-toc__item:hover,
.dark .lddfw-settings-toc__item:focus {
  background: rgba(124, 180, 255, 0.1);
  color: #7cb4ff;
}

.dark .lddfw-settings-toc__item.is-active {
  background: rgba(124, 180, 255, 0.18);
  color: #7cb4ff;
}

.dark .lddfw-settings-card {
  background: #1f2a36;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.dark .lddfw-settings-card__header {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark .lddfw-settings-card__title,
.dark .lddfw-settings-switch-row__label,
.dark .lddfw-field__label,
.dark .lddfw-avatar-upload__title {
  color: #f1f3f5;
}

.dark .lddfw-settings-switch-row,
.dark .lddfw-avatar-upload {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.dark .lddfw-settings-switch-row__hint,
.dark .lddfw-field__hint,
.dark .lddfw-avatar-upload__hint,
.dark .lddfw-password-cancel {
  color: #a8b0ba;
}

.dark .lddfw-field .form-control,
.dark .lddfw-avatar-upload__btn-inner,
.dark .lddfw-btn-ghost {
  background: #2b3743;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f1f3f5;
}

.dark .lddfw-field .form-control:focus {
  border-color: #7cb4ff;
  box-shadow: 0 0 0 3px rgba(124, 180, 255, 0.18);
}

.dark .lddfw-avatar-upload__btn:hover .lddfw-avatar-upload__btn-inner,
.dark .lddfw-btn-ghost:hover,
.dark .lddfw-btn-ghost:focus {
  border-color: #7cb4ff;
  color: #7cb4ff;
  background: rgba(124, 180, 255, 0.08);
}

.dark .lddfw-pill-toggle {
  background: #3a4756;
}

.dark .lddfw-pill-toggle.is-on,
.dark .lddfw-pill-toggle.lddfw_active {
  background: #3ddc97;
}

.dark .lddfw-password-strength__bar {
  background: rgba(255, 255, 255, 0.08);
}

.dark .lddfw-password-eye {
  color: #a8b0ba;
}

.dark .lddfw-password-eye:hover,
.dark .lddfw-password-eye:focus {
  color: #f1f3f5;
  background: rgba(255, 255, 255, 0.08);
}

.dark .lddfw-settings-footer {
  background: rgba(31, 42, 54, 0.97);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   My Reviews - driver panel
   ========================================================= */

/* Hero */
.lddfw-reviews-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1rem;
  margin: 0 -1rem 1.25rem;
  background: linear-gradient(135deg, #f5a623 0%, #ffb84d 100%);
  color: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.2);
}

.lddfw-reviews-hero__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.45);
}

.lddfw-reviews-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lddfw-reviews-hero__identity {
  min-width: 0;
  flex: 1 1 auto;
}

.lddfw-reviews-hero__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
  font-weight: 600;
}

.lddfw-reviews-hero__name {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0.15rem;
  word-break: break-word;
}

.lddfw-reviews-hero__role {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.15rem 0.6rem;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.lddfw-reviews-hero__score {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.lddfw-reviews-hero__score-number {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

.lddfw-reviews-hero__score-stars .lddfw-rating-stars__bg {
  color: rgba(255, 255, 255, 0.35) !important;
}

.lddfw-reviews-hero__score-stars .lddfw-rating-stars__fg {
  color: #fff !important;
}

.lddfw-reviews-hero__count-pill {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.65rem;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Breakdown card (matches .lddfw-settings-card tokens) */
.lddfw-reviews-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.04);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.lddfw-reviews-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid #f1f3f5;
  background: #fafbfc;
}

.lddfw-reviews-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(245, 166, 35, 0.14);
  color: #f5a623;
  flex-shrink: 0;
}

.lddfw-reviews-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #011627;
}

.lddfw-reviews-card__body {
  padding: 1rem 1.25rem;
}

.lddfw-reviews-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lddfw-reviews-breakdown__row {
  display: grid;
  grid-template-columns: 36px 1fr 44px;
  align-items: center;
  gap: 0.65rem;
}

.lddfw-reviews-breakdown__label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
  color: #f5a623;
}

.lddfw-reviews-breakdown__track {
  display: block;
  height: 10px;
  background: #eef1f4;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.lddfw-reviews-breakdown__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.lddfw-reviews-breakdown__count {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: #6b7280;
  text-align: right;
  font-weight: 600;
}

/* Filter chips */
.lddfw-reviews-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.lddfw-reviews-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid #e3e6ea;
  background: #fff;
  color: #495057;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
  line-height: 1.4;
}

.lddfw-reviews-chip:hover,
.lddfw-reviews-chip:focus {
  background: #f8f9fa;
  color: #0d6efd;
  border-color: #c7d6ff;
  text-decoration: none;
}

.lddfw-reviews-chip.is-active {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.lddfw-reviews-chip.is-active:hover,
.lddfw-reviews-chip.is-active:focus {
  background: #0b5ed7;
  border-color: #0b5ed7;
  color: #fff;
}

.lddfw-reviews-chip.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.lddfw-reviews-chip__count {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}

.lddfw-reviews-chip.is-active .lddfw-reviews-chip__count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.lddfw-reviews-chip--r5 {
  color: #2e7d32;
}
.lddfw-reviews-chip--r4 {
  color: #43a047;
}
.lddfw-reviews-chip--r3 {
  color: #c29400;
}
.lddfw-reviews-chip--r2 {
  color: #e68900;
}
.lddfw-reviews-chip--r1 {
  color: #d32f2f;
}

/* Review list */
.lddfw-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.lddfw-review-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-left: 4px solid #e9ecef;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.04);
  transition:
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.lddfw-review-card:hover {
  box-shadow: 0 4px 14px rgba(1, 22, 39, 0.08);
}

.lddfw-review-card--r5 {
  border-left-color: #43a047;
}
.lddfw-review-card--r4 {
  border-left-color: #66bb6a;
}
.lddfw-review-card--r3 {
  border-left-color: #fdd835;
}
.lddfw-review-card--r2 {
  border-left-color: #ff9800;
}
.lddfw-review-card--r1 {
  border-left-color: #ef5350;
}

.lddfw-review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lddfw-review-card__rating {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.lddfw-review-card__emoji {
  display: inline-flex;
  width: 40px;
  height: 40px;
  line-height: 0;
  flex-shrink: 0;
}

.lddfw-review-card__emoji svg {
  width: 40px;
  height: 40px;
}

.lddfw-review-card__rating-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lddfw-review-card__label {
  font-weight: 700;
  color: #011627;
  font-size: 0.95rem;
  line-height: 1.2;
}

.lddfw-review-card__order {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #f1f3f5;
  color: #495057;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  flex-shrink: 0;
}

.lddfw-review-card__order:hover,
.lddfw-review-card__order:focus {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
  text-decoration: none;
}

.lddfw-review-card .lddfw-review-comment-bubble {
  margin-top: 0.7rem;
}

.lddfw-review-card__date {
  margin-top: 0.65rem;
  font-size: 0.78rem;
  color: #8a909a;
  font-weight: 500;
}

/* Pagination */
.lddfw-reviews-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0.5rem;
}

.lddfw-reviews-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e3e6ea;
  color: #495057;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.lddfw-reviews-pagination__btn:hover,
.lddfw-reviews-pagination__btn:focus {
  background: rgba(13, 110, 253, 0.08);
  border-color: #c7d6ff;
  color: #0d6efd;
  text-decoration: none;
  transform: translateY(-1px);
}

.lddfw-reviews-pagination__btn.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.lddfw-reviews-pagination__status {
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* Empty state */
.lddfw-reviews-empty {
  background: #fff;
  border: 1px dashed #d9dde2;
  border-radius: 12px;
  padding: 2.25rem 1.25rem;
  text-align: center;
  margin-top: 0.5rem;
}

.lddfw-reviews-empty--small {
  padding: 1.5rem 1rem;
}

.lddfw-reviews-empty__icon {
  color: #ffc24d;
  margin-bottom: 0.75rem;
  opacity: 0.85;
}

.lddfw-reviews-empty__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #011627;
  margin-bottom: 0.35rem;
}

.lddfw-reviews-empty__text {
  color: #6b7280;
  font-size: 0.92rem;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.45;
}

.lddfw-reviews-empty__text a {
  color: #0d6efd;
  font-weight: 600;
}

/* ===== My Reviews dark mode ===== */

.dark .lddfw-reviews-card {
  background: #1f2a36;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.dark .lddfw-reviews-card__header {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark .lddfw-reviews-card__title {
  color: #f1f3f5;
}

.dark .lddfw-reviews-card__icon {
  background: rgba(245, 166, 35, 0.18);
  color: #ffcc66;
}

.dark .lddfw-reviews-breakdown__label {
  color: #ffcc66;
}

.dark .lddfw-reviews-breakdown__track {
  background: rgba(255, 255, 255, 0.08);
}

.dark .lddfw-reviews-breakdown__count {
  color: #a8b0ba;
}

.dark .lddfw-reviews-chip {
  background: #1f2a36;
  border-color: rgba(255, 255, 255, 0.1);
  color: #cdd3db;
}

.dark .lddfw-reviews-chip:hover,
.dark .lddfw-reviews-chip:focus {
  background: rgba(124, 180, 255, 0.08);
  border-color: rgba(124, 180, 255, 0.4);
  color: #7cb4ff;
}

.dark .lddfw-reviews-chip.is-active {
  background: #7cb4ff;
  border-color: #7cb4ff;
  color: #0b1220;
}

.dark .lddfw-reviews-chip.is-active:hover,
.dark .lddfw-reviews-chip.is-active:focus {
  background: #9cc6ff;
  border-color: #9cc6ff;
  color: #0b1220;
}

.dark .lddfw-reviews-chip__count {
  background: rgba(255, 255, 255, 0.08);
}

.dark .lddfw-reviews-chip.is-active .lddfw-reviews-chip__count {
  background: rgba(0, 0, 0, 0.18);
  color: #0b1220;
}

.dark .lddfw-review-card {
  background: #1f2a36;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.dark .lddfw-review-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.dark .lddfw-review-card__label {
  color: #f1f3f5;
}

.dark .lddfw-review-card__order {
  background: rgba(255, 255, 255, 0.06);
  color: #cdd3db;
}

.dark .lddfw-review-card__order:hover,
.dark .lddfw-review-card__order:focus {
  background: rgba(124, 180, 255, 0.15);
  color: #7cb4ff;
}

.dark .lddfw-review-card__date {
  color: #8a909a;
}

.dark .lddfw-reviews-pagination__btn {
  background: #1f2a36;
  border-color: rgba(255, 255, 255, 0.1);
  color: #cdd3db;
}

.dark .lddfw-reviews-pagination__btn:hover,
.dark .lddfw-reviews-pagination__btn:focus {
  background: rgba(124, 180, 255, 0.1);
  border-color: rgba(124, 180, 255, 0.45);
  color: #7cb4ff;
}

.dark .lddfw-reviews-pagination__status {
  color: #cdd3db;
}

.dark .lddfw-reviews-empty {
  background: #1f2a36;
  border-color: rgba(255, 255, 255, 0.12);
}

.dark .lddfw-reviews-empty__title {
  color: #f1f3f5;
}

.dark .lddfw-reviews-empty__text {
  color: #a8b0ba;
}

/* =========================================================
   Information page - driver panel
   ========================================================= */

.lddfw-info-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1rem;
  margin: 0 -1rem 1.25rem;
  background: linear-gradient(135deg, #0d6efd 0%, #4a90e2 100%);
  color: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.2);
}

.lddfw-info-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  color: #fff;
}

.lddfw-info-hero__identity {
  min-width: 0;
  flex: 1 1 auto;
}

.lddfw-info-hero__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
  font-weight: 600;
}

.lddfw-info-hero__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0.15rem 0 0;
  color: #fff;
  word-break: break-word;
}

.lddfw-info-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.04);
  overflow: hidden;
}

.lddfw-info-card__body {
  padding: 1.25rem 1.35rem;
  color: #334155;
  font-size: 0.975rem;
  line-height: 1.65;
}

/* Typography reset for admin-authored WYSIWYG content inside the card.
   Scoped to .lddfw-info-card__body so we don't leak into other screens. */
.lddfw-info-card__body > :first-child {
  margin-top: 0;
}

.lddfw-info-card__body > :last-child {
  margin-bottom: 0;
}

.lddfw-info-card__body h1,
.lddfw-info-card__body h2,
.lddfw-info-card__body h3,
.lddfw-info-card__body h4,
.lddfw-info-card__body h5,
.lddfw-info-card__body h6 {
  color: #011627;
  font-weight: 700;
  line-height: 1.3;
  margin: 1.35em 0 0.55em;
}

.lddfw-info-card__body h1 {
  font-size: 1.4rem;
}
.lddfw-info-card__body h2 {
  font-size: 1.2rem;
}
.lddfw-info-card__body h3 {
  font-size: 1.075rem;
}
.lddfw-info-card__body h4 {
  font-size: 1rem;
}
.lddfw-info-card__body h5,
.lddfw-info-card__body h6 {
  font-size: 0.925rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #495057;
}

.lddfw-info-card__body p {
  margin: 0 0 1em;
}

.lddfw-info-card__body a {
  color: #0d6efd;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lddfw-info-card__body a:hover,
.lddfw-info-card__body a:focus {
  color: #0b5ed7;
}

.lddfw-info-card__body ul,
.lddfw-info-card__body ol {
  margin: 0 0 1em;
  padding-left: 1.4rem;
}

.lddfw-info-card__body li + li {
  margin-top: 0.3em;
}

.lddfw-info-card__body blockquote {
  margin: 1em 0;
  padding: 0.65rem 1rem;
  border-left: 3px solid #0d6efd;
  background: #f5f9ff;
  border-radius: 0 10px 10px 0;
  color: #334155;
}

.lddfw-info-card__body code,
.lddfw-info-card__body kbd,
.lddfw-info-card__body samp {
  background: #f1f3f5;
  padding: 0.08em 0.35em;
  border-radius: 5px;
  font-size: 0.88em;
  color: #c2185b;
}

.lddfw-info-card__body pre {
  background: #0b1220;
  color: #e5e7eb;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  overflow: auto;
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0 0 1em;
}

.lddfw-info-card__body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.lddfw-info-card__body hr {
  border: 0;
  border-top: 1px solid #e9ecef;
  margin: 1.5em 0;
}

.lddfw-info-card__body img,
.lddfw-info-card__body video,
.lddfw-info-card__body iframe {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0.5em auto;
}

.lddfw-info-card__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1em;
  font-size: 0.92rem;
}

.lddfw-info-card__body th,
.lddfw-info-card__body td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #f1f3f5;
  text-align: left;
}

.lddfw-info-card__body th {
  background: #fafbfc;
  font-weight: 700;
  color: #011627;
}

/* ===== Information page dark mode ===== */

.dark .lddfw-info-card {
  background: #1f2a36;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.dark .lddfw-info-card__body {
  color: #cdd3db;
}

.dark .lddfw-info-card__body h1,
.dark .lddfw-info-card__body h2,
.dark .lddfw-info-card__body h3,
.dark .lddfw-info-card__body h4 {
  color: #f1f3f5;
}

.dark .lddfw-info-card__body h5,
.dark .lddfw-info-card__body h6 {
  color: #a8b0ba;
}

.dark .lddfw-info-card__body a {
  color: #7cb4ff;
}

.dark .lddfw-info-card__body a:hover,
.dark .lddfw-info-card__body a:focus {
  color: #9cc6ff;
}

.dark .lddfw-info-card__body blockquote {
  background: rgba(124, 180, 255, 0.08);
  border-left-color: #7cb4ff;
  color: #cdd3db;
}

.dark .lddfw-info-card__body code,
.dark .lddfw-info-card__body kbd,
.dark .lddfw-info-card__body samp {
  background: rgba(255, 255, 255, 0.08);
  color: #f5a4c4;
}

.dark .lddfw-info-card__body hr {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.dark .lddfw-info-card__body th,
.dark .lddfw-info-card__body td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark .lddfw-info-card__body th {
  background: rgba(255, 255, 255, 0.03);
  color: #f1f3f5;
}

/* =========================================================================
 * Reviews-hero color variants
 *
 * Shared hero structure (.lddfw-reviews-hero) with alternate gradients so
 * it can be reused across screens (payments, wallet, earnings, etc.)
 * without duplicating the hero markup.
 * =======================================================================*/
.lddfw-reviews-hero--payments {
  background: linear-gradient(135deg, #059669 0%, #10b981 55%, #34d399 100%);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.22);
}

.lddfw-reviews-hero--payments .lddfw-reviews-hero__count-pill {
  background: #fff;
  color: #059669;
}

/* The avatar slot can be used as an icon badge when there is no avatar image. */
.lddfw-reviews-hero__avatar--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* =========================================================================
 * Generic "list row" component
 *
 * Reusable row with a leading icon badge, a title + meta block, and a
 * trailing value (amount / status / chevron). Currently used by the
 * payments addon Payment History screen, but kept screen-agnostic.
 * =======================================================================*/
.lddfw-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0 0 1rem;
}

.lddfw-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.15s ease;
}

.lddfw-list-row:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.lddfw-list-row__main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.lddfw-list-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  flex: 0 0 auto;
}

/* Icon tone variants - keep screen-agnostic, add more as needed. */
.lddfw-list-row__icon--success {
  background: #ecfdf5;
  color: #059669;
}

.lddfw-list-row__body {
  min-width: 0;
  flex: 1 1 auto;
}

.lddfw-list-row__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lddfw-list-row__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
}

.lddfw-list-row__meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.7rem;
  font-weight: 500;
}

.lddfw-list-row__value {
  flex: 0 0 auto;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  text-align: right;
}

.lddfw-list-row__value--success,
.lddfw-list-row__value--success .woocommerce-Price-amount,
.lddfw-list-row__value--success bdi {
  color: #059669 !important;
}

/* Dark-mode variants. */
.dark .lddfw-list-row {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .lddfw-list-row:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.dark .lddfw-list-row__icon {
  background: #334155;
  color: #cbd5e1;
}

.dark .lddfw-list-row__icon--success {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.dark .lddfw-list-row__title {
  color: #f1f5f9;
}

.dark .lddfw-list-row__meta {
  color: #94a3b8;
}

.dark .lddfw-list-row__meta-pill {
  background: #334155;
  color: #e2e8f0;
}

.dark .lddfw-list-row__value {
  color: #f1f5f9;
}

.dark .lddfw-list-row__value--success,
.dark .lddfw-list-row__value--success .woocommerce-Price-amount,
.dark .lddfw-list-row__value--success bdi {
  color: #34d399 !important;
}

@media (max-width: 480px) {
  .lddfw-list-row {
    padding: 0.75rem 0.875rem;
  }
  .lddfw-list-row__value {
    font-size: 1rem;
  }
}

/* =========================================================================
 * Delivered screen
 *
 * Redesigned wrapper (hero + filter + stats grid) around the existing
 * #lddfw_orders_table output from LDDFW_Orders::lddfw_delivered(). The
 * orders table itself is left untouched so the "no orders" state and
 * order-card markup stay consistent with the other delivery screens.
 * =======================================================================*/

/* Green "delivered" hero - reuses the reviews-hero structure with a new variant. */
.lddfw-reviews-hero--delivered {
  background: linear-gradient(135deg, #198754 0%, #20a66a 55%, #34d399 100%);
  box-shadow: 0 4px 16px rgba(25, 135, 84, 0.22);
}

.lddfw-reviews-hero--delivered .lddfw-reviews-hero__count-pill {
  background: #fff;
  color: #198754;
}

/* Date-range filter bar. */
.lddfw-delivered-filter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.lddfw-delivered-filter__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  flex: 0 0 auto;
}

.lddfw-delivered-filter__label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

.lddfw-delivered-filter__select {
  flex: 1 1 200px;
  min-width: 160px;
}

/* Style the native select inside the filter bar. */
.lddfw-delivered-filter__select .custom-select,
.lddfw-delivered-filter__select select {
  width: 100%;
  height: auto;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #0f172a;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 18px 18px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.lddfw-delivered-filter__select .custom-select:focus,
.lddfw-delivered-filter__select select:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
  background-color: #fff;
}

.lddfw-delivered-filter__current {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  flex: 0 0 auto;
}

/* Stats grid (orders / orders total / shipping total / commission). */
.lddfw-delivered-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

@media (min-width: 768px) {
  .lddfw-delivered-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lddfw-delivered-stat {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  min-width: 0;
}

.lddfw-delivered-stat__text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.lddfw-delivered-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;
  background: #f1f5f9;
  color: #475569;
  flex-shrink: 0;
}

.lddfw-delivered-stat__icon svg {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

.lddfw-delivered-stat__icon--success {
  background: #ecfdf5;
  color: #059669;
}

.lddfw-delivered-stat__icon--money {
  background: rgba(245, 166, 35, 0.14);
  color: #b8860b;
}

.lddfw-delivered-stat__icon--shipping {
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
}

.lddfw-delivered-stat__icon--commission {
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
}

.lddfw-delivered-stat__value {
  font-size: 0.94rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  word-break: break-word;
}

/* wc_price() wraps amounts in .woocommerce-Price-amount - make sure the
   colour/weight carries through without overriding the currency symbol. */
.lddfw-delivered-stat__value .woocommerce-Price-amount,
.lddfw-delivered-stat__value bdi {
  font-weight: 700;
}

.lddfw-delivered-stat__label {
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.3;
}

/* Dark-mode variants. */
.dark .lddfw-delivered-filter {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .lddfw-delivered-filter__label,
.dark .lddfw-delivered-filter__label-icon {
  color: #cbd5e1;
}

.dark .lddfw-delivered-filter__select .custom-select,
.dark .lddfw-delivered-filter__select select {
  background-color: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'><path d='M7 10l5 5 5-5z'/></svg>");
}

.dark .lddfw-delivered-filter__select .custom-select:focus,
.dark .lddfw-delivered-filter__select select:focus {
  background-color: #1e293b;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.dark .lddfw-delivered-filter__current {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.dark .lddfw-delivered-stat {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .lddfw-delivered-stat__icon {
  background: #334155;
  color: #cbd5e1;
}

.dark .lddfw-delivered-stat__icon--success {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

.dark .lddfw-delivered-stat__icon--money {
  background: rgba(245, 166, 35, 0.18);
  color: #f5c16c;
}

.dark .lddfw-delivered-stat__icon--shipping {
  background: rgba(96, 165, 250, 0.16);
  color: #60a5fa;
}

.dark .lddfw-delivered-stat__icon--commission {
  background: rgba(167, 139, 250, 0.16);
  color: #a78bfa;
}

.dark .lddfw-delivered-stat__value {
  color: #f1f5f9;
}

.dark .lddfw-delivered-stat__label {
  color: #94a3b8;
}

/* ==========================================================================
   Delivered screen - order card redesign (scoped to .lddfw-delivered-screen)
   The underlying markup (.lddfw_box > .row > .col-12) is shared across
   multiple order-list screens, so styling is intentionally scoped here to
   avoid affecting other screens.
   ========================================================================== */
.lddfw-delivered-screen #lddfw_orders_table {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lddfw-delivered-screen .lddfw_box {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 0.9rem 1.1rem;
  margin: 0;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}

.lddfw-delivered-screen .lddfw_box:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.lddfw-delivered-screen .lddfw_box > .row,
.lddfw-delivered-screen .lddfw_box > .row > .col-12 {
  margin: 0;
  padding: 0;
}

/* Header row: counter + order number on the left, Order details button on the
   right, all vertically centered. Flex layout lets the title flex and keeps
   the button glued to the right without a float. */
.lddfw-delivered-screen #lddfw_orders_table {
  counter-reset: lddfw-delivered-order;
}

.lddfw-delivered-screen .lddfw_box {
  counter-increment: lddfw-delivered-order;
}

.lddfw-delivered-screen .lddfw_box > .row > .col-12 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.25rem;
  column-gap: 0.6rem;
}

/* Hide the stray PHP-rendered counter - we inject a new one via ::before on
   the order-number so it sits immediately to the left of "Order #430". */
.lddfw-delivered-screen .lddfw_counter {
  display: none;
}

.lddfw-delivered-screen .lddfw_order_number {
  order: 2;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  min-width: 0;
  word-break: break-word;
  margin-bottom: 10px;
}

.lddfw-delivered-screen .lddfw_order_number::before {
  content: counter(lddfw-delivered-order);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(16, 185, 129, 0.25);
  flex-shrink: 0;
}

.lddfw-delivered-screen .lddfw_order_number b {
  font-weight: 700;
}

.lddfw-delivered-screen .lddfw_order_view.btn {
  /* Override global .lddfw_order_view { position: absolute; right: 13px }
     so the button obeys our flex header layout (order, margin-left:auto)
     and its click area is reliable. */
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  order: 3;
  float: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #198754 0%, #20a66a 100%);
  border: 0;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(25, 135, 84, 0.25);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
  flex-shrink: 0;
  z-index: 1;
  margin-bottom: 10px;
}

.lddfw-delivered-screen .lddfw_order_view.btn:hover,
.lddfw-delivered-screen .lddfw_order_view.btn:focus {
  filter: brightness(1.05);
  box-shadow: 0 3px 8px rgba(25, 135, 84, 0.32);
  color: #fff;
  transform: translateY(-1px);
}

/* Meta rows below the header. Each row takes full card width (flex-basis 100%)
   so rows stack vertically beneath the header, aligned to the card's left edge
   via an indent that leaves room for the leading SVG glyph. The top margin on
   the first meta row creates the gap between the header (button) and content. */
.lddfw-delivered-screen .lddfw_order_address,
.lddfw-delivered-screen .lddfw_order_distance,
.lddfw-delivered-screen .lddfw_order_delivered_date,
.lddfw-delivered-screen .lddfw_order_custom,
.lddfw-delivered-screen .lddfw_delivery_date {
  order: 4;
  flex: 1 1 100%;
  display: block;
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.4rem 0 0.4rem 1.55rem;
  margin: 0;
  text-decoration: none;
  position: relative;
  border-top: 1px dashed #eef2f7;
}

.lddfw-delivered-screen .lddfw_order_custom {
  padding: 0;
  border-top: 0;
}

.lddfw-delivered-screen .lddfw_order_address:first-of-type,
.lddfw-delivered-screen .lddfw_order_distance:first-of-type,
.lddfw-delivered-screen .lddfw_order_delivered_date:first-of-type,
.lddfw-delivered-screen .lddfw_delivery_date:first-of-type {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
}

.lddfw-delivered-screen .lddfw_order_address:hover,
.lddfw-delivered-screen .lddfw_order_distance:hover,
.lddfw-delivered-screen .lddfw_order_delivered_date:hover,
.lddfw-delivered-screen .lddfw_delivery_date:hover {
  color: #0f172a;
  text-decoration: none;
}

/* Leading icon glyphs for each row type. */
.lddfw-delivered-screen .lddfw_order_address::before,
.lddfw-delivered-screen .lddfw_order_distance::before,
.lddfw-delivered-screen .lddfw_order_delivered_date::before,
.lddfw-delivered-screen .lddfw_delivery_date::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.1rem;
  height: 1.1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.75;
}

.lddfw-delivered-screen .lddfw_order_address:first-of-type::before,
.lddfw-delivered-screen .lddfw_order_distance:first-of-type::before,
.lddfw-delivered-screen .lddfw_order_delivered_date:first-of-type::before,
.lddfw-delivered-screen .lddfw_delivery_date:first-of-type::before {
  top: 0.75rem;
}

.lddfw-delivered-screen .lddfw_order_address::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d6efd'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

.lddfw-delivered-screen .lddfw_order_distance::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c4dff'><path d='M12 2a7 7 0 0 0-7 7c0 1.6.5 3.1 1.4 4.4L12 22l5.6-8.6A7.8 7.8 0 0 0 19 9a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

.lddfw-delivered-screen .lddfw_order_delivered_date::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23059669'><path d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/></svg>");
}

.lddfw-delivered-screen .lddfw_order_custom:first-of-type {
  margin-top: 0.65rem;
}

/* Delivery-date row (usually injected by the scheduling-deliveries
   add-on). Calendar glyph + solid top separator that spans the full
   .col-12 width. The row keeps its icon indent via padding-left; the
   border is drawn on the row itself, which by default respects the
   padding but since the row is a block element that fills .col-12
   horizontally, its border-top automatically spans the full width. */
.lddfw-delivered-screen .lddfw_delivery_date {
  order: 9;
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #eef2f7;
}

.lddfw-delivered-screen .lddfw_delivery_date::before {
  top: 0.95rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23059669'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H5V8h14v13zM7 10h5v5H7z'/></svg>");
}

.dark .lddfw-delivered-screen .lddfw_delivery_date {
  border-top-color: #475569;
}

/* Empty state styling. */
.lddfw-delivered-screen .lddfw_no_orders {
  text-align: center;
  padding: 2.25rem 1rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  box-shadow: none;
}

.lddfw-delivered-screen .lddfw_no_orders p {
  margin: 0;
  font-size: 0.95rem;
}

/* Pagination. */
.lddfw-delivered-screen .pagination {
  margin: 1rem 0 0;
}

.lddfw-delivered-screen .pagination .page-item .page-link {
  color: #475569;
  border-color: #e5e7eb;
  border-radius: 8px;
  margin: 0 2px;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  background: #fff;
}

.lddfw-delivered-screen .pagination .page-item .page-link:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #c7d2fe;
}

.lddfw-delivered-screen .pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #198754 0%, #20a66a 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 2px rgba(25, 135, 84, 0.3);
}

/* Dark-mode variants. */
.dark .lddfw-delivered-screen .lddfw_box {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .lddfw-delivered-screen .lddfw_box:hover {
  border-color: #475569;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark .lddfw-delivered-screen .lddfw_order_number::before {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

.dark .lddfw-delivered-screen .lddfw_order_number {
  color: #f1f5f9;
}

.dark .lddfw-delivered-screen .lddfw_order_address,
.dark .lddfw-delivered-screen .lddfw_order_distance,
.dark .lddfw-delivered-screen .lddfw_order_delivered_date,
.dark .lddfw-delivered-screen .lddfw_delivery_date {
  color: #cbd5e1;
  border-top-color: #334155;
}

.dark .lddfw-delivered-screen .lddfw_order_address:hover,
.dark .lddfw-delivered-screen .lddfw_order_distance:hover,
.dark .lddfw-delivered-screen .lddfw_order_delivered_date:hover,
.dark .lddfw-delivered-screen .lddfw_delivery_date:hover {
  color: #f1f5f9;
}

.dark .lddfw-delivered-screen .lddfw_no_orders {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}

.dark .lddfw-delivered-screen .pagination .page-item .page-link {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

.dark .lddfw-delivered-screen .pagination .page-item .page-link:hover {
  background: #334155;
  color: #f1f5f9;
  border-color: #475569;
}

/* ==========================================================================
   Failed-delivery screen - red/warning variant of the Delivered design.
   Shares the same layout; overrides just the accent color.
   ========================================================================== */
.lddfw-reviews-hero--failed {
  background: linear-gradient(135deg, #dc3545 0%, #e35d6a 55%, #fb7185 100%);
  box-shadow: 0 4px 16px rgba(220, 53, 69, 0.25);
}

.lddfw-reviews-hero--failed .lddfw-reviews-hero__count-pill {
  background: #fff;
  color: #dc3545;
}

/* Reuse the order-card layout/typography from .lddfw-delivered-screen,
   overriding only the accent colours. */
.lddfw-failed-screen #lddfw_orders_table {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  counter-reset: lddfw-failed-order;
}

.lddfw-failed-screen .lddfw_box {
  counter-increment: lddfw-failed-order;
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 0.9rem 1.1rem;
  margin: 0;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}

.lddfw-failed-screen .lddfw_box:hover {
  border-color: #fecaca;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.lddfw-failed-screen .lddfw_box > .row,
.lddfw-failed-screen .lddfw_box > .row > .col-12 {
  margin: 0;
  padding: 0;
}

.lddfw-failed-screen .lddfw_box > .row > .col-12 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.25rem;
  column-gap: 0.6rem;
}

.lddfw-failed-screen .lddfw_counter {
  display: none;
}

.lddfw-failed-screen .lddfw_order_number {
  order: 2;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  min-width: 0;
  word-break: break-word;
}

.lddfw-failed-screen .lddfw_order_number::before {
  content: counter(lddfw-failed-order);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #fef2f2;
  color: #dc3545;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(220, 53, 69, 0.25);
  flex-shrink: 0;
}

.lddfw-failed-screen .lddfw_order_view.btn {
  /* Override global .lddfw_order_view { position: absolute; right: 13px }
     so the button obeys our flex header layout (order, margin-left:auto)
     and its click area is reliable. */
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  order: 3;
  float: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #dc3545 0%, #e35d6a 100%);
  border: 0;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(220, 53, 69, 0.25);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
  flex-shrink: 0;
  z-index: 1;
}

.lddfw-failed-screen .lddfw_order_view.btn:hover,
.lddfw-failed-screen .lddfw_order_view.btn:focus {
  filter: brightness(1.05);
  box-shadow: 0 3px 8px rgba(220, 53, 69, 0.32);
  color: #fff;
  transform: translateY(-1px);
}

.lddfw-failed-screen .lddfw_order_address,
.lddfw-failed-screen .lddfw_order_distance,
.lddfw-failed-screen .lddfw_order_failed_date,
.lddfw-failed-screen .lddfw_delivery_date,
.lddfw-failed-screen .lddfw_order_custom {
  order: 4;
  flex: 1 1 100%;
  display: block;
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.4rem 0 0.4rem 1.55rem;
  margin: 0;
  text-decoration: none;
  position: relative;
  border-top: 1px dashed #eef2f7;
}

.lddfw-failed-screen .lddfw_order_custom {
  order: 5;
  padding: 0;
  border-top: 0;
}

.lddfw-failed-screen .lddfw_order_custom:first-of-type {
  margin-top: 0.65rem;
}

.lddfw-failed-screen .lddfw_order_failed_date,
.lddfw-failed-screen .lddfw_delivery_date {
  order: 9;
}

.lddfw-failed-screen .lddfw_order_address {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
}

.lddfw-failed-screen .lddfw_order_address:hover,
.lddfw-failed-screen .lddfw_order_distance:hover,
.lddfw-failed-screen .lddfw_order_failed_date:hover,
.lddfw-failed-screen .lddfw_delivery_date:hover {
  color: #0f172a;
  text-decoration: none;
}

.lddfw-failed-screen .lddfw_order_address::before,
.lddfw-failed-screen .lddfw_order_distance::before,
.lddfw-failed-screen .lddfw_order_failed_date::before,
.lddfw-failed-screen .lddfw_delivery_date::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.1rem;
  height: 1.1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.75;
}

.lddfw-failed-screen .lddfw_order_address::before {
  top: 0.75rem;
}

.lddfw-failed-screen .lddfw_order_address::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d6efd'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

.lddfw-failed-screen .lddfw_order_distance::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c4dff'><path d='M12 2a7 7 0 0 0-7 7c0 1.6.5 3.1 1.4 4.4L12 22l5.6-8.6A7.8 7.8 0 0 0 19 9a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

.lddfw-failed-screen .lddfw_order_failed_date::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc3545'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/></svg>");
}

.lddfw-failed-screen .lddfw_delivery_date::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23059669'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H5V8h14v13zM7 10h5v5H7z'/></svg>");
}

.lddfw-failed-screen .lddfw_no_orders {
  text-align: center;
  padding: 2.25rem 1rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  box-shadow: none;
}

.lddfw-failed-screen .lddfw_no_orders p {
  margin: 0;
  font-size: 0.95rem;
}

.lddfw-failed-screen .pagination {
  margin: 1rem 0 0;
}

.lddfw-failed-screen .pagination .page-item .page-link {
  color: #475569;
  border-color: #e5e7eb;
  border-radius: 8px;
  margin: 0 2px;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  background: #fff;
}

.lddfw-failed-screen .pagination .page-item .page-link:hover {
  background: #fef2f2;
  color: #0f172a;
  border-color: #fecaca;
}

.lddfw-failed-screen .pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #dc3545 0%, #e35d6a 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 2px rgba(220, 53, 69, 0.3);
}

/* Dark-mode variants. */
.dark .lddfw-failed-screen .lddfw_box {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .lddfw-failed-screen .lddfw_box:hover {
  border-color: #7f1d1d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark .lddfw-failed-screen .lddfw_order_number::before {
  background: rgba(220, 53, 69, 0.15);
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.3);
}

.dark .lddfw-failed-screen .lddfw_order_number {
  color: #f1f5f9;
}

.dark .lddfw-failed-screen .lddfw_order_address,
.dark .lddfw-failed-screen .lddfw_order_distance,
.dark .lddfw-failed-screen .lddfw_order_failed_date,
.dark .lddfw-failed-screen .lddfw_delivery_date {
  color: #cbd5e1;
  border-top-color: #334155;
}

.dark .lddfw-failed-screen .lddfw_order_address:hover,
.dark .lddfw-failed-screen .lddfw_order_distance:hover,
.dark .lddfw-failed-screen .lddfw_order_failed_date:hover,
.dark .lddfw-failed-screen .lddfw_delivery_date:hover {
  color: #f1f5f9;
}

.dark .lddfw-failed-screen .lddfw_no_orders {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}

.dark .lddfw-failed-screen .pagination .page-item .page-link {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

.dark .lddfw-failed-screen .pagination .page-item .page-link:hover {
  background: #334155;
  color: #f1f5f9;
  border-color: #475569;
}

/* ==========================================================================
   Claim-orders screen - blue variant with multi-select cards.
   The underlying markup (.lddfw_box.lddfw_multi_checkbox > .row > .col-12 >
   button + .lddfw_order_number + .lddfw_wrap > .custom-checkbox + .lddfw_order)
   is defined in class-lddfw-orders.php::lddfw_claim_orders__premium_only and
   is shared; styling is scoped to .lddfw-claim-screen to avoid regressions.
   ========================================================================== */
.lddfw-reviews-hero--claim {
  background: linear-gradient(135deg, #0d6efd 0%, #3b82f6 55%, #60a5fa 100%);
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.25);
}

.lddfw-reviews-hero--claim .lddfw-reviews-hero__count-pill {
  background: #fff;
  color: #0d6efd;
}

.lddfw-reviews-hero__subtitle {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
  line-height: 1.3;
}

.lddfw-claim-screen #lddfw_alert {
  border-radius: 10px;
  /* `!important` is needed because the PHP markup for #lddfw_alert carries
     inline `style="margin-top: 17px; display: none;"` which would otherwise
     win the cascade over our vertical rhythm. */
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

/* Order cards (multi-checkbox). */
.lddfw-claim-screen {
  counter-reset: lddfw-claim-order;
}

.lddfw-claim-screen .lddfw_box.lddfw_multi_checkbox {
  counter-increment: lddfw-claim-order;
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1rem;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.lddfw-claim-screen .lddfw_box.lddfw_multi_checkbox:hover {
  border-color: #bfdbfe;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* Selected state: card highlights when its checkbox is checked. */
.lddfw-claim-screen
  .lddfw_box.lddfw_multi_checkbox:has(.custom-control-input:checked) {
  border-color: #3b82f6;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 70%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.18);
}

.lddfw-claim-screen .lddfw_box.lddfw_multi_checkbox > .row,
.lddfw-claim-screen .lddfw_box.lddfw_multi_checkbox > .row > .col-12 {
  margin: 0;
  padding: 0;
}

/* Header: title + "Order details" button, aligned on one row. */
.lddfw-claim-screen .lddfw_box.lddfw_multi_checkbox > .row > .col-12 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.25rem;
  column-gap: 0.6rem;
}

.lddfw-claim-screen .lddfw_order_number {
  order: 1;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  min-width: 0;
  word-break: break-word;
}

.lddfw-claim-screen .lddfw_order_number::before {
  content: counter(lddfw-claim-order);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #0d6efd;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(13, 110, 253, 0.25);
  flex-shrink: 0;
}

.lddfw-claim-screen .lddfw_order_view.btn {
  /* Override global .lddfw_order_view { position: absolute; right: 13px }
     so the button participates in the flex header row and sits on top
     of the card (otherwise the absolutely-positioned button ignores
     order / margin-left:auto and overlaps the card body, making its
     click area unreliable). */
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  order: 2;
  float: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #0d6efd 0%, #3b82f6 100%);
  border: 0;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(13, 110, 253, 0.25);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
  flex-shrink: 0;
  z-index: 1;
}

.lddfw-claim-screen .lddfw_order_view.btn:hover,
.lddfw-claim-screen .lddfw_order_view.btn:focus {
  filter: brightness(1.05);
  box-shadow: 0 3px 8px rgba(13, 110, 253, 0.32);
  color: #fff;
  transform: translateY(-1px);
}

/* Body wrapper: hosts the grid layout for the checkbox + meta rows.
   .lddfw_order uses `display: contents` below, so its children promote
   to direct grid items of .lddfw_wrap. That lets us place
   .lddfw_delivery_date visually OUTSIDE .lddfw_order (as a full-width
   row spanning both grid columns, below the meta rows), even though
   the DOM keeps it wrapped inside .lddfw_order. */
.lddfw-claim-screen .lddfw_wrap {
  order: 3;
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  column-gap: 0.85rem;
  row-gap: 0.35rem;
  align-items: start;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed #eef2f7;
}

/* Constrain the Bootstrap .custom-control wrapper to a fixed 1.5rem square
   so its clickable surface (the absolute-positioned label) doesn't overflow
   onto neighbouring elements (e.g. the card body or the Order details
   button). Visual checkbox is drawn via the label ::before / ::after. */
.lddfw-claim-screen .lddfw_order_checkbox {
  position: relative !important;
  display: inline-block !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.lddfw-claim-screen .lddfw_order_checkbox .custom-control-input {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin: 0 !important;
  opacity: 0 !important;
  z-index: 2 !important;
  cursor: pointer;
}

.lddfw-claim-screen .lddfw_order_checkbox .custom-control-label {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5rem !important;
  cursor: pointer;
  vertical-align: top;
}

.lddfw-claim-screen .lddfw_order_checkbox .custom-control-label::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  background: #fff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04) !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
  pointer-events: none;
}

.lddfw-claim-screen .lddfw_order_checkbox .custom-control-label::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1rem 1rem !important;
  pointer-events: none;
}

.lddfw-claim-screen
  .lddfw_order_checkbox
  .custom-control-input:hover
  ~ .custom-control-label::before {
  border-color: #93c5fd !important;
}

.lddfw-claim-screen
  .lddfw_order_checkbox
  .custom-control-input:focus
  ~ .custom-control-label::before {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2) !important;
}

.lddfw-claim-screen
  .lddfw_order_checkbox
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

.lddfw-claim-screen
  .lddfw_order_checkbox
  .custom-control-input:checked
  ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>") !important;
}

/* `display: contents` makes .lddfw_order transparent for layout - its
   children participate directly in the .lddfw_wrap grid. That's what
   lets .lddfw_delivery_date visually escape the .lddfw_order column. */
.lddfw-claim-screen .lddfw_order {
  display: contents;
}

.lddfw-claim-screen .lddfw_wrap > .lddfw_order_checkbox,
.lddfw-claim-screen .lddfw_order > .lddfw_order_checkbox {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0.1rem !important;
}

/* All meta rows (address, custom fields, notes...) that come through
   .lddfw_order sit in the right column. */
.lddfw-claim-screen
  .lddfw_order
  > *:not(.lddfw_order_checkbox):not(.lddfw_delivery_date) {
  grid-column: 2;
}

/* Delivery-date row is pulled out of .lddfw_order's column: it spans
   the full width of .lddfw_wrap (both columns) so it visually sits as
   a standalone row under the meta column - outside .lddfw_order. */
.lddfw-claim-screen .lddfw_order > .lddfw_delivery_date,
.lddfw-claim-screen .lddfw_wrap > .lddfw_delivery_date {
  grid-column: 1 / -1;
}

.lddfw-claim-screen .lddfw_order .lddfw_order_address,
.lddfw-claim-screen .lddfw_order .lddfw_delivery_date,
.lddfw-claim-screen .lddfw_order .lddfw_order_custom,
.lddfw-assign-screen .lddfw_order .lddfw_order_address,
.lddfw-assign-screen .lddfw_order .lddfw_delivery_date,
.lddfw-assign-screen .lddfw_order .lddfw_order_custom {
  display: block;
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.15rem 0 0.15rem 1.55rem;
  text-decoration: none;
  position: relative;
  word-break: break-word;
}

.lddfw-claim-screen .lddfw_order .lddfw_order_custom,
.lddfw-assign-screen .lddfw_order .lddfw_order_custom {
  padding: 0;
}

.lddfw-claim-screen .lddfw_order .lddfw_order_custom:first-of-type,
.lddfw-assign-screen .lddfw_order .lddfw_order_custom:first-of-type {
  margin-top: 0.15rem;
}

.lddfw-claim-screen .lddfw_order .lddfw_order_address::before,
.lddfw-claim-screen .lddfw_order .lddfw_delivery_date::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.8;
}

.lddfw-claim-screen .lddfw_order .lddfw_order_address::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d6efd'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

/* Delivery-date row (injected by the scheduling-deliveries add-on).
   Visually escapes .lddfw_order: it's promoted via .lddfw_order's
   `display: contents` and placed on the full-width grid track of
   .lddfw_wrap (grid-column: 1 / -1). Keeps its own calendar glyph and
   spans the entire card body width for a clean section separator. */
.lddfw-claim-screen .lddfw_order .lddfw_delivery_date {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid #e2e8f0;
}

.lddfw-claim-screen .lddfw_order .lddfw_delivery_date::before {
  top: 0.75rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d6efd'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H5V8h14v13zM7 10h5v5H7z'/></svg>");
}

.lddfw-claim-screen .lddfw_order .lddfw_order_notes {
  margin: 0.35rem 0 0;
  padding: 0.55rem 0.75rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1d4ed8;
  font-size: 0.825rem;
  line-height: 1.45;
}

/* ==========================================================================
   Claim-orders - unified success + CTA card
   --------------------------------------------------------------------------
   Rendered after a successful claim. Lives either in the fixed footer
   (`.lddfw-claim-footer`) or - as a fallback - inside `#lddfw_alert`.
   One set of rules for both locations so the look is identical.

   Structure:
     .lddfw-claim-cta                    (card, vertical flex)
       .lddfw-claim-cta__body            (horizontal: icon + title)
         .lddfw-claim-cta__icon          (circular green checkmark)
         .lddfw-claim-cta__text
           .lddfw-claim-cta__title
       .lddfw-claim-cta__actions         (horizontal: 1-2 buttons, equal size)
         .lddfw-claim-cta__btn.--primary ("View assigned orders")
         .lddfw-claim-cta__btn.--secondary ("Claim more orders", optional)

   All internal selectors use `.lddfw-claim-cta` as the anchor - NOT scoped
   to a parent container - so the card renders identically in either slot.
   High specificity + explicit `!important` on display/layout props guards
   against Bootstrap's `.btn`, `.btn-primary`, `.btn-block` classes that may
   still be on the server-rendered <a>.
   ========================================================================== */
.lddfw-claim-screen .lddfw_footer_buttons.lddfw-claim-footer--cta {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

/* When the CTA card lives in the footer slot, drop Bootstrap's default
   gutters (15px each side from both `.container` AND `.col-12`) -
   they eat width the action buttons need, and the card already has
   its own internal padding so the gutter is redundant.
   `!important` is required because Bootstrap's own rules use the same
   specificity and load after custom CSS in some setups. */
.lddfw-claim-screen .lddfw_footer_buttons.lddfw-claim-footer--cta > .container,
.lddfw-claim-screen .lddfw_footer_buttons.lddfw-claim-footer--cta .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

.lddfw-claim-screen .lddfw_footer_buttons.lddfw-claim-footer--cta .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.lddfw-claim-screen
  .lddfw_footer_buttons.lddfw-claim-footer--cta
  .row
  > .col-12,
.lddfw-claim-screen
  .lddfw_footer_buttons.lddfw-claim-footer--cta
  [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   Claim-orders screen - List / Map view switcher.

   Markup source: class-lddfw-screens.php::lddfw_claim_orders_screen__premium_only
   emits the `.lddfw-claim-viewswitch` pill beneath the hero when the map
   feature is enabled. The map pane itself (`#lddfw_claim_map_container`) is
   rendered adjacent to `#lddfw_claim_list_container`; the JS flips the
   `is-map-view` modifier on `.lddfw-claim-screen` to swap panes.

   Pane visibility is driven *only* by this modifier - the hidden pane stays
   in the DOM so the claim button's checkbox reader never loses track of
   selections when the driver toggles views mid-task.
   ========================================================================== */

/* Segmented pill container. Pill-shaped, blue-tinted to match the
   `.lddfw-reviews-hero--claim` palette. Full-width on mobile, content
   width above ~480px so it sits neatly next to the hero on wider panels. */
.lddfw-claim-viewswitch {
  display: inline-flex;
  width: 100%;
  padding: 0.25rem;
  margin: 0 0 1rem;
  background: #eef2ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(13, 110, 253, 0.06);
}

.lddfw-claim-viewswitch__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 38px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.lddfw-claim-viewswitch__btn:hover,
.lddfw-claim-viewswitch__btn:focus {
  color: #0d6efd;
  outline: none;
}

/* Active pill - mirrors the gradient of the claim hero so the segmented
   control reads as "part of the screen's identity" rather than a generic tab. */
.lddfw-claim-viewswitch__btn.is-active {
  background: linear-gradient(135deg, #0d6efd 0%, #3b82f6 55%, #60a5fa 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25);
}

.lddfw-claim-viewswitch__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lddfw-claim-viewswitch__icon svg {
  width: 16px;
  height: 16px;
}

/* Pane switching. List is the default; Map only shows when the `is-map-view`
   modifier is set on the screen container. Visibility (not display:none) is
   used on the List pane in map mode so its measured layout stays intact if
   the driver switches back - prevents a visual jump. */
.lddfw-claim-view-pane {
  /* Tabpanels are always block-level; explicit to beat the
     browser's default "display:revert" for role="tabpanel". */
  display: block;
}

.lddfw-claim-view-pane[hidden] {
  display: none;
}

.lddfw-claim-screen.is-map-view #lddfw_claim_list_container {
  display: none;
}

.lddfw-claim-screen.is-map-view #lddfw_claim_map_container {
  display: block;
}

/* Map pane - rounded card, prominent but not full-bleed, legend strip above. */
.lddfw-claim-view-pane--map {
  margin: 0 0 1rem;
}

.lddfw-claim-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.lddfw-claim-map-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.lddfw-claim-map-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #0d6efd;
  background: #fff;
}

.lddfw-claim-map-legend__item--selected .lddfw-claim-map-legend__dot {
  background: #0d6efd;
}

.lddfw-claim-map-legend__item--driver .lddfw-claim-map-legend__dot {
  background: #16a34a;
  border-color: #16a34a;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px #16a34a;
}

.lddfw-claim-map {
  position: relative;
  width: 100%;
  min-height: 360px;
  height: 60vh;
  max-height: 640px;
  border-radius: 14px;
  overflow: hidden;
  background: #eef2ff;
  border: 1px solid #dbeafe;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.lddfw-claim-map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Tighten on small phones so the map doesn't crowd the claim button. */
@media (max-width: 420px) {
  .lddfw-claim-map {
    min-height: 300px;
    height: 55vh;
  }

  .lddfw-claim-viewswitch__label {
    /* Keep the labels even at narrow widths - icon + word fits. */
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   Claim-orders map view - dark mode overrides.

   Mirrors the rest of the driver UI's `.dark` body-class strategy. The active
   segmented-control pill keeps its blue gradient (it's a brand state, readable
   on any background); only the inactive chrome, legend card, map frame, and
   placeholder are re-tinted so they sit naturally on the dark canvas.
   ========================================================================== */
.dark .lddfw-claim-viewswitch {
  background: rgba(13, 110, 253, 0.12);
  border-color: rgba(96, 165, 250, 0.22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dark .lddfw-claim-viewswitch__btn {
  color: #cbd5e1;
}

.dark .lddfw-claim-viewswitch__btn:hover,
.dark .lddfw-claim-viewswitch__btn:focus {
  color: #9ec5fe;
}

.dark .lddfw-claim-viewswitch__btn.is-active {
  /* Same gradient, slightly stronger shadow so it pops on the dark surface. */
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.45);
}

.dark .lddfw-claim-map-legend {
  background: #1e1e1e;
  border-color: #010101;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.dark .lddfw-claim-map-legend__item {
  color: #cbd5e1;
}

/* "Available" pin is a hollow blue ring - the inner fill must match the
   legend card's background, not stay #fff, otherwise the dot reads as a
   solid white circle in dark mode and contradicts the actual map marker. */
.dark .lddfw-claim-map-legend__dot {
  background: #1e1e1e;
}

.dark .lddfw-claim-map-legend__item--selected .lddfw-claim-map-legend__dot {
  background: #0d6efd;
}

/* Driver dot keeps its green core; the white "halo" ring is swapped for the
   dark surface so it visually behaves like a punched-out separator instead
   of a glowing white spot on a dark card. */
.dark .lddfw-claim-map-legend__item--driver .lddfw-claim-map-legend__dot {
  background: #16a34a;
  border-color: #16a34a;
  box-shadow:
    0 0 0 2px #1e1e1e,
    0 0 0 3px #16a34a;
}

.dark .lddfw-claim-map {
  background: #1e1e1e;
  border-color: #010101;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark .lddfw-claim-map__placeholder {
  color: #a8b0ba;
}

/* ==========================================================================
   Assigned-orders map view (Phase 1).

   The assign screen reuses the entire `.lddfw-claim-viewswitch*`,
   `.lddfw-claim-view-pane*`, `.lddfw-claim-map-legend*`, and `.lddfw-claim-map*`
   chrome (same shape, same spacing, same dark-mode tints) - we only need:

   1. Per-screen show/hide rules tied to the assign screen's wrapper class
      (`.lddfw-assign-screen.is-map-view` toggles the assign-specific
      list/map container ids).
   2. Purple recolour of the segmented-control pill + legend dots + map
      placeholder so every chrome surface on this screen ties into the same
      purple identity (purple pins, purple checkbox ring, purple hero). A
      blue active pill on a purple screen read as a theming bug during QA,
      so the entire segmented control recolours to violet-600 `#7c3aed` on
      this screen only - the claim screen stays blue.

   The "Preview route" lightbox (`#lddfw_preview_directions`) is intentionally
   not styled here - Phase 1 keeps it as a separate, untouched UI surface.
   ========================================================================== */
.lddfw-assign-screen.is-map-view #lddfw_assign_list_container {
  display: none;
}

.lddfw-assign-screen.is-map-view #lddfw_assign_map_container {
  display: block;
}

/* Segmented-control container - swap the blue tint for the same soft-violet
   palette already used by the map placeholder. Inset shadow opacity stays
   low so the pill doesn't feel "heavier" than the claim version - only the
   hue moves. */
.lddfw-assign-screen .lddfw-claim-viewswitch {
  background: #f5f3ff;
  border-color: #ddd6fe;
  box-shadow: inset 0 1px 2px rgba(124, 58, 237, 0.06);
}

.lddfw-assign-screen .lddfw-claim-viewswitch__btn:hover,
.lddfw-assign-screen .lddfw-claim-viewswitch__btn:focus {
  color: #7c3aed;
}

/* Active pill - violet gradient, same 135° angle and opacity ramp as the
   claim version so the two screens feel like siblings (same structure, each
   tuned to its own hue). */
.lddfw-assign-screen .lddfw-claim-viewswitch__btn.is-active {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 55%, #a78bfa 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.25);
}

.lddfw-assign-screen .lddfw-claim-map-legend__dot {
  border-color: #7c3aed;
}

.lddfw-assign-screen
  .lddfw-claim-map-legend__item--selected
  .lddfw-claim-map-legend__dot {
  background: #7c3aed;
}

/* Soft purple tint for the empty/loading state so the placeholder background
   ties into the purple hero rather than the blue claim-screen palette. */
.lddfw-assign-screen .lddfw-claim-map {
  background: #f5f3ff;
  border-color: #ede9fe;
}

/* Dark-mode parity - swap the blue claim tints for the same violet accent
   everywhere the assign screen already uses it. Container background uses a
   blue-free translucent violet so it reads as "purple chrome" rather than
   the generic blue chip the claim screen shows. */
.dark .lddfw-assign-screen .lddfw-claim-viewswitch {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.32);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dark .lddfw-assign-screen .lddfw-claim-viewswitch__btn:hover,
.dark .lddfw-assign-screen .lddfw-claim-viewswitch__btn:focus {
  color: #c4b5fd;
}

.dark .lddfw-assign-screen .lddfw-claim-viewswitch__btn.is-active {
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.45);
}

.dark .lddfw-assign-screen .lddfw-claim-map-legend__dot {
  border-color: #a78bfa;
}

.dark
  .lddfw-assign-screen
  .lddfw-claim-map-legend__item--selected
  .lddfw-claim-map-legend__dot {
  background: #7c3aed;
}

.lddfw-claim-cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Body row: icon + title side by side, vertically centered. */
.lddfw-claim-cta__body {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.7rem;
  width: 100%;
  padding-left: 0.25rem;
}

.lddfw-claim-cta__icon {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

.lddfw-claim-cta__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.lddfw-claim-cta__text {
  flex: 1 1 auto;
  min-width: 0;
}

.lddfw-claim-cta__title {
  color: #065f46;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  word-break: break-word;
}

/* Actions row: 1 or 2 buttons, equal width, side by side. On very narrow
   screens they wrap to a 2nd row keeping their equal-width ratio. */
.lddfw-claim-cta__actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

/* Unified button baseline. Targets <a> and <button> identically so the
   server-rendered <a class="btn ..."> and our own <button> look the same.
   Overrides Bootstrap via high-specificity + !important on the core layout
   properties; colors/borders are strong enough without !important. */
.lddfw-claim-cta .lddfw-claim-cta__btn,
.lddfw-claim-cta a.lddfw-claim-cta__btn,
.lddfw-claim-cta button.lddfw-claim-cta__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  max-width: none;
  height: 42px;
  margin: 0;
  padding: 0 0.75rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  text-align: center;
  /* Labels are short ("View orders" / "Claim more") so one line is
     always enough - nowrap keeps the row visually balanced. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    background-color 0.15s ease;
}

.lddfw-claim-cta .lddfw-claim-cta__btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lddfw-claim-cta .lddfw-claim-cta__btn svg {
  flex-shrink: 0;
}

/* Primary "View assigned orders" - filled gradient. */
.lddfw-claim-cta .lddfw-claim-cta__btn--primary,
.lddfw-claim-cta a.lddfw-claim-cta__btn--primary,
.lddfw-claim-cta button.lddfw-claim-cta__btn--primary {
  background: linear-gradient(135deg, #0d6efd 0%, #3b82f6 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.28);
}

.lddfw-claim-cta .lddfw-claim-cta__btn--primary:hover,
.lddfw-claim-cta .lddfw-claim-cta__btn--primary:focus {
  filter: brightness(1.06);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.38);
  color: #fff !important;
  transform: translateY(-1px);
}

/* Secondary "Claim more orders" - filled light blue, same size as primary. */
.lddfw-claim-cta .lddfw-claim-cta__btn--secondary,
.lddfw-claim-cta a.lddfw-claim-cta__btn--secondary,
.lddfw-claim-cta button.lddfw-claim-cta__btn--secondary {
  background: #ffffff !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
  box-shadow: 0 1px 3px rgba(29, 78, 216, 0.1);
}

.lddfw-claim-cta .lddfw-claim-cta__btn--secondary:hover,
.lddfw-claim-cta .lddfw-claim-cta__btn--secondary:focus {
  background: #eff6ff !important;
  color: #1e3a8a !important;
  border-color: #60a5fa !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.16);
  transform: translateY(-1px);
}

/* Dark-mode variants. */
.dark .lddfw-claim-cta {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dark .lddfw-claim-cta__icon {
  background: #10b981;
  color: #0f172a;
}

.dark .lddfw-claim-cta__title {
  color: #d1fae5;
}

.dark .lddfw-claim-cta .lddfw-claim-cta__btn--secondary,
.dark .lddfw-claim-cta a.lddfw-claim-cta__btn--secondary,
.dark .lddfw-claim-cta button.lddfw-claim-cta__btn--secondary {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #bfdbfe !important;
  border-color: rgba(96, 165, 250, 0.55) !important;
}

.dark .lddfw-claim-cta .lddfw-claim-cta__btn--secondary:hover,
.dark .lddfw-claim-cta .lddfw-claim-cta__btn--secondary:focus {
  background: rgba(30, 58, 138, 0.55) !important;
  color: #dbeafe !important;
  border-color: rgba(96, 165, 250, 0.75) !important;
}

/* Empty state. */
.lddfw-claim-screen .lddfw_no_orders {
  text-align: center;
  padding: 2.25rem 1rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  box-shadow: none;
  margin: 0;
}

.lddfw-claim-screen .lddfw_no_orders p {
  margin: 0;
  font-size: 0.95rem;
}

/* Footer "Claim Orders" action bar - matches the Settings "Save changes"
   sticky footer (.lddfw-settings-footer + .lddfw_submit_btn). */
.lddfw_footer_buttons.lddfw-claim-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #e9ecef;
  box-shadow: 0 -4px 16px rgba(1, 22, 39, 0.06);
}

body.lddfw_page:has(.lddfw-claim-screen) {
  /* reserve breathing room below the last card so it's not hidden
     behind the fixed footer */
  padding-bottom: 0;
}

.lddfw-claim-screen {
  padding-bottom: 63px;
}

#lddfw_claim_orders_button,
#lddfw_claim_orders_button_loading,
#lddfw_claim_order_button,
#lddfw_claim_order_button_loading {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
  background-image: linear-gradient(
    135deg,
    #1d4ed8 0%,
    #3b82f6 100%
  ) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.28) !important;
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_claim_orders_button:hover,
#lddfw_claim_orders_button:focus,
#lddfw_claim_order_button:hover,
#lddfw_claim_order_button:focus {
  filter: brightness(1.07) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35) !important;
  color: #fff !important;
}

#lddfw_claim_orders_button .svg-inline--fa,
#lddfw_claim_order_button .svg-inline--fa {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35rem;
  fill: currentColor;
}

/* Hide/pad the Bootstrap alert that JS injects into #lddfw_alert on success
   so it still works, but nicer visually. */
.lddfw-claim-screen #lddfw_alert .alert {
  border-radius: 10px;
  border: 1px solid transparent;
}

/* Dark-mode variants. */
.dark .lddfw-claim-screen .lddfw_box.lddfw_multi_checkbox {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .lddfw-claim-screen .lddfw_box.lddfw_multi_checkbox:hover {
  border-color: #1e40af;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark
  .lddfw-claim-screen
  .lddfw_box.lddfw_multi_checkbox:has(.custom-control-input:checked) {
  border-color: #3b82f6;
  background: linear-gradient(180deg, #1e3a8a 0%, #1e293b 70%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.dark .lddfw-claim-screen .lddfw_order_number {
  color: #f1f5f9;
}

.dark .lddfw-claim-screen .lddfw_order_number::before {
  background: rgba(13, 110, 253, 0.18);
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.3);
}

.dark .lddfw-claim-screen .lddfw_wrap {
  border-top-color: #334155;
}

.dark .lddfw-claim-screen .lddfw_order_checkbox .custom-control-label::before {
  background: #0f172a !important;
  border-color: #475569 !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}

.dark
  .lddfw-claim-screen
  .lddfw_order_checkbox
  .custom-control-input:hover
  ~ .custom-control-label::before {
  border-color: #60a5fa !important;
}

.dark
  .lddfw-claim-screen
  .lddfw_order_checkbox
  .custom-control-input:focus
  ~ .custom-control-label::before {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
}

.dark
  .lddfw-claim-screen
  .lddfw_order_checkbox
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

.dark .lddfw-claim-screen .lddfw_order .lddfw_order_address,
.dark .lddfw-claim-screen .lddfw_order .lddfw_delivery_date {
  color: #cbd5e1;
}

.dark .lddfw-claim-screen .lddfw_order .lddfw_delivery_date {
  border-top-color: #475569;
}

.dark .lddfw-claim-screen .lddfw_order .lddfw_order_notes {
  background: rgba(13, 110, 253, 0.14);
  border-color: rgba(147, 197, 253, 0.3);
  color: #bfdbfe;
}

.dark .lddfw-claim-screen .lddfw_no_orders {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}

.dark .lddfw_footer_buttons.lddfw-claim-footer {
  background: rgba(15, 23, 42, 0.97);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Claim-orders - "Choose a Delivery Date" filter (from scheduling addon)
   --------------------------------------------------------------------------
   The addon renders a plain <div class="col-12"> containing the label text,
   a <select id="lddfw_delivery_dates_range"> and a hidden
   <div id="lddfw_delivery_dates_custom"> with From/To inputs + Send button.
   We pick up that wrapper via :has() and paint it as a filter card that
   matches the Delivered screen's filter bar.
   ========================================================================== */
.lddfw-claim-screen .col-12:has(> #lddfw_delivery_dates_range) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 0.6rem;
  align-items: center;
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.4;
}

/* Leading calendar icon sits inline with the "Choose a Delivery Date:"
   label text node (both live in the first grid row). */
.lddfw-claim-screen .col-12:has(> #lddfw_delivery_dates_range)::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: center/contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/></svg>");
  grid-column: 1;
  grid-row: 1;
}

/* Select + custom sub-panel span the full filter-card width (both columns). */
.lddfw-claim-screen #lddfw_delivery_dates_range,
.lddfw-claim-screen #lddfw_delivery_dates_custom {
  grid-column: 1 / -1;
}

/* Restyle the native select to match the Delivered filter select. */
.lddfw-claim-screen #lddfw_delivery_dates_range {
  width: 100%;
  height: auto;
  margin: 0 !important;
  padding: 0.55rem 2rem 0.55rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #0f172a;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 18px 18px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.lddfw-claim-screen #lddfw_delivery_dates_range:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background-color: #fff;
}

/* Custom "Date range" sub-panel: shows when the user picks "Date range".
   Scope the reset inside the filter wrapper so we don't accidentally
   touch other .form-group rows on the page. */
.lddfw-claim-screen #lddfw_delivery_dates_custom {
  padding: 0.75rem;
  margin-top: 0.25rem;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
}

/* Stack the three rows (From, To, Send) with consistent vertical spacing.
   We use margin (not flex gap) because the addon's JS toggles the panel
   with jQuery .show() which sets inline display:block and would wipe
   out any flex layout we set here. */
.lddfw-claim-screen #lddfw_delivery_dates_custom .form-group {
  margin: 0 0 0.6rem;
}

.lddfw-claim-screen #lddfw_delivery_dates_custom .form-group:last-child {
  margin-bottom: 0;
}

.lddfw-claim-screen #lddfw_delivery_dates_custom .form-group .col-12 {
  padding: 0;
}

.lddfw-claim-screen #lddfw_delivery_from_date,
.lddfw-claim-screen #lddfw_delivery_to_date {
  width: 100%;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  color: #0f172a;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.lddfw-claim-screen #lddfw_delivery_from_date:focus,
.lddfw-claim-screen #lddfw_delivery_to_date:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.lddfw-claim-screen #lddfw_delivery_dates_custom #filter_button {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
}

/* "Delivery Date: April 20, 2026 - April 26, 2026" summary pill.
   The addon renders it as a bare <div class="col-12"> right after the
   filter wrapper, so we pick it up via the adjacent-sibling selector. */
.lddfw-claim-screen .col-12:has(> #lddfw_delivery_dates_range) + .col-12 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  max-width: 100%;
  padding: 0.4rem 0.85rem;
  margin: 0 0 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}

.lddfw-claim-screen
  .col-12:has(> #lddfw_delivery_dates_range)
  + .col-12::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: center/contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231d4ed8'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/></svg>");
}

/* Dark-mode variants. */
.dark .lddfw-claim-screen .col-12:has(> #lddfw_delivery_dates_range) {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .lddfw-claim-screen #lddfw_delivery_dates_range {
  color: #e2e8f0;
  background-color: #0f172a;
  border-color: #334155;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'><path d='M7 10l5 5 5-5z'/></svg>");
}

.dark .lddfw-claim-screen #lddfw_delivery_dates_range:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  background-color: #0b1220;
}

.dark .lddfw-claim-screen #lddfw_delivery_dates_custom {
  background: #0f172a;
  border-color: #334155;
}

.dark .lddfw-claim-screen #lddfw_delivery_from_date,
.dark .lddfw-claim-screen #lddfw_delivery_to_date {
  color: #e2e8f0;
  background-color: #1e293b;
  border-color: #334155;
}

.dark .lddfw-claim-screen #lddfw_delivery_from_date:focus,
.dark .lddfw-claim-screen #lddfw_delivery_to_date:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.dark .lddfw-claim-screen .col-12:has(> #lddfw_delivery_dates_range) + .col-12 {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.45);
  color: #bfdbfe;
}

.dark
  .lddfw-claim-screen
  .col-12:has(> #lddfw_delivery_dates_range)
  + .col-12::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bfdbfe'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/></svg>");
}

/* ==========================================================================
   Assign-to-driver screen - purple variant with multi-select cards.
   Mirrors the .lddfw-claim-screen block (blue) but with the success/green
   palette (#6f42c1 / #8b5cf6 / #a78bfa) to match the "Out for delivery"
   submit button. The underlying card markup is identical (shared with the
   claim screen) - this block only overrides colors / scoping; layout rules
   are duplicated per-selector so neither screen affects the other.
   ========================================================================== */
.lddfw-reviews-hero--assign {
  background: linear-gradient(135deg, #6f42c1 0%, #8b5cf6 55%, #a78bfa 100%);
  box-shadow: 0 4px 16px rgba(111, 66, 193, 0.25);
}

.lddfw-reviews-hero--assign .lddfw-reviews-hero__count-pill {
  background: #fff;
  color: #6f42c1;
}

.lddfw-assign-screen #lddfw_alert {
  border-radius: 10px;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.lddfw-assign-screen {
  counter-reset: lddfw-assign-order;
}

.lddfw-assign-screen .lddfw_box.lddfw_multi_checkbox {
  counter-increment: lddfw-assign-order;
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1rem;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.lddfw-assign-screen .lddfw_box.lddfw_multi_checkbox:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.lddfw-assign-screen
  .lddfw_box.lddfw_multi_checkbox:has(.custom-control-input:checked) {
  border-color: #7c3aed;
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 70%);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.18);
}

.lddfw-assign-screen .lddfw_box.lddfw_multi_checkbox > .row,
.lddfw-assign-screen .lddfw_box.lddfw_multi_checkbox > .row > .col-12 {
  margin: 0;
  padding: 0;
}

.lddfw-assign-screen .lddfw_box.lddfw_multi_checkbox > .row > .col-12 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.25rem;
  column-gap: 0.6rem;
}

.lddfw-assign-screen .lddfw_order_number {
  order: 1;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  min-width: 0;
  word-break: break-word;
}

.lddfw-assign-screen .lddfw_order_number::before {
  content: counter(lddfw-assign-order);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #ede9fe;
  color: #6f42c1;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(111, 66, 193, 0.25);
  flex-shrink: 0;
}

.lddfw-assign-screen .lddfw_order_view.btn {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  order: 2;
  float: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #6f42c1 0%, #8b5cf6 100%);
  border: 0;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(111, 66, 193, 0.25);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
  flex-shrink: 0;
  z-index: 1;
}

.lddfw-assign-screen .lddfw_order_view.btn:hover,
.lddfw-assign-screen .lddfw_order_view.btn:focus {
  filter: brightness(1.05);
  box-shadow: 0 3px 8px rgba(111, 66, 193, 0.32);
  color: #fff;
  transform: translateY(-1px);
}

.lddfw-assign-screen .lddfw_wrap {
  order: 3;
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  column-gap: 0.85rem;
  row-gap: 0.35rem;
  align-items: start;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed #eef2f7;
}

.lddfw-assign-screen .lddfw_order_checkbox {
  position: relative !important;
  display: inline-block !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.lddfw-assign-screen .lddfw_order_checkbox .custom-control-input {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin: 0 !important;
  opacity: 0 !important;
  z-index: 2 !important;
  cursor: pointer;
}

.lddfw-assign-screen .lddfw_order_checkbox .custom-control-label {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5rem !important;
  cursor: pointer;
  vertical-align: top;
}

.lddfw-assign-screen .lddfw_order_checkbox .custom-control-label::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  background: #fff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04) !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
  pointer-events: none;
}

.lddfw-assign-screen .lddfw_order_checkbox .custom-control-label::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1rem 1rem !important;
  pointer-events: none;
}

.lddfw-assign-screen
  .lddfw_order_checkbox
  .custom-control-input:hover
  ~ .custom-control-label::before {
  border-color: #ddd6fe !important;
}

.lddfw-assign-screen
  .lddfw_order_checkbox
  .custom-control-input:focus
  ~ .custom-control-label::before {
  border-color: #6f42c1 !important;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.2) !important;
}

.lddfw-assign-screen
  .lddfw_order_checkbox
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background-color: #6f42c1 !important;
  border-color: #6f42c1 !important;
}

.lddfw-assign-screen
  .lddfw_order_checkbox
  .custom-control-input:checked
  ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>") !important;
}

.lddfw-assign-screen .lddfw_order {
  display: contents;
}

.lddfw-assign-screen .lddfw_wrap > .lddfw_order_checkbox,
.lddfw-assign-screen .lddfw_order > .lddfw_order_checkbox {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0.1rem !important;
}

.lddfw-assign-screen
  .lddfw_order
  > *:not(.lddfw_order_checkbox):not(.lddfw_delivery_date) {
  grid-column: 2;
}

.lddfw-assign-screen .lddfw_order > .lddfw_delivery_date,
.lddfw-assign-screen .lddfw_wrap > .lddfw_delivery_date {
  grid-column: 1 / -1;
}

.lddfw-assign-screen .lddfw_order .lddfw_order_address::before,
.lddfw-assign-screen .lddfw_order .lddfw_delivery_date::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
}

.lddfw-assign-screen .lddfw_order .lddfw_order_address::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236f42c1'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

.lddfw-assign-screen .lddfw_order .lddfw_delivery_date {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid #e2e8f0;
}

.lddfw-assign-screen .lddfw_order .lddfw_delivery_date::before {
  top: 0.75rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236f42c1'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H5V8h14v13zM7 10h5v5H7z'/></svg>");
}

.lddfw-assign-screen .lddfw_order .lddfw_order_notes {
  margin: 0.35rem 0 0;
  padding: 0.55rem 0.75rem;
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  color: #4c1d95;
  font-size: 0.825rem;
  line-height: 1.45;
}

/* Assign-screen success CTA footer tweaks - mirror the claim-screen pattern. */
.lddfw-assign-screen .lddfw_footer_buttons.lddfw-assign-footer--cta {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.lddfw-assign-screen
  .lddfw_footer_buttons.lddfw-assign-footer--cta
  > .container,
.lddfw-assign-screen .lddfw_footer_buttons.lddfw-assign-footer--cta .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

.lddfw-assign-screen .lddfw_footer_buttons.lddfw-assign-footer--cta .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.lddfw-assign-screen
  .lddfw_footer_buttons.lddfw-assign-footer--cta
  .row
  > .col-12,
.lddfw-assign-screen
  .lddfw_footer_buttons.lddfw-assign-footer--cta
  [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Purple CTA-card variant. Reuses the .lddfw-claim-cta layout (flex column,
   flat outer shell, equal-width buttons) but repaints the primary button
   with the purple gradient and the secondary with a light-purple outline. */
.lddfw-assign-cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lddfw-assign-cta__body {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.7rem;
  width: 100%;
  padding-left: 0.25rem;
}

.lddfw-assign-cta__icon {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.35);
}

.lddfw-assign-cta__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.lddfw-assign-cta__text {
  flex: 1 1 auto;
  min-width: 0;
}

.lddfw-assign-cta__title {
  color: #4c1d95;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  word-break: break-word;
}

.lddfw-assign-cta__actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.lddfw-assign-cta .lddfw-assign-cta__btn,
.lddfw-assign-cta a.lddfw-assign-cta__btn,
.lddfw-assign-cta button.lddfw-assign-cta__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  max-width: none;
  height: 42px;
  margin: 0;
  padding: 0 0.75rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    background-color 0.15s ease;
}

.lddfw-assign-cta .lddfw-assign-cta__btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lddfw-assign-cta .lddfw-assign-cta__btn svg {
  flex-shrink: 0;
}

.lddfw-assign-cta .lddfw-assign-cta__btn--primary,
.lddfw-assign-cta a.lddfw-assign-cta__btn--primary,
.lddfw-assign-cta button.lddfw-assign-cta__btn--primary {
  background: linear-gradient(135deg, #6f42c1 0%, #8b5cf6 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(111, 66, 193, 0.28);
}

.lddfw-assign-cta .lddfw-assign-cta__btn--primary:hover,
.lddfw-assign-cta .lddfw-assign-cta__btn--primary:focus {
  filter: brightness(1.06);
  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.38);
  color: #fff !important;
  transform: translateY(-1px);
}

.lddfw-assign-cta .lddfw-assign-cta__btn--secondary,
.lddfw-assign-cta a.lddfw-assign-cta__btn--secondary,
.lddfw-assign-cta button.lddfw-assign-cta__btn--secondary {
  background: #ffffff !important;
  color: #5b21b6 !important;
  border: 1px solid #ddd6fe !important;
  box-shadow: 0 1px 3px rgba(76, 29, 149, 0.1);
}

.lddfw-assign-cta .lddfw-assign-cta__btn--secondary:hover,
.lddfw-assign-cta .lddfw-assign-cta__btn--secondary:focus {
  background: #f5f3ff !important;
  color: #3b0764 !important;
  border-color: #a78bfa !important;
  box-shadow: 0 4px 12px rgba(76, 29, 149, 0.16);
  transform: translateY(-1px);
}

.dark .lddfw-assign-cta {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dark .lddfw-assign-cta__icon {
  background: #7c3aed;
  color: #0f172a;
}

.dark .lddfw-assign-cta__title {
  color: #ede9fe;
}

.dark .lddfw-assign-cta .lddfw-assign-cta__btn--secondary,
.dark .lddfw-assign-cta a.lddfw-assign-cta__btn--secondary,
.dark .lddfw-assign-cta button.lddfw-assign-cta__btn--secondary {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #c4b5fd !important;
  border-color: rgba(167, 139, 250, 0.55) !important;
}

.dark .lddfw-assign-cta .lddfw-assign-cta__btn--secondary:hover,
.dark .lddfw-assign-cta .lddfw-assign-cta__btn--secondary:focus {
  background: rgba(59, 7, 100, 0.55) !important;
  color: #ede9fe !important;
  border-color: rgba(167, 139, 250, 0.75) !important;
}

.lddfw-assign-screen .lddfw_no_orders {
  text-align: center;
  padding: 2.25rem 1rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  box-shadow: none;
  margin: 0;
}

.lddfw-assign-screen .lddfw_no_orders p {
  margin: 0;
  font-size: 0.95rem;
}

/* Sticky footer - same spec as the claim footer, scoped to lddfw-assign-footer. */
.lddfw_footer_buttons.lddfw-assign-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #e9ecef;
  box-shadow: 0 -4px 16px rgba(1, 22, 39, 0.06);
}

body.lddfw_page:has(.lddfw-assign-screen) {
  padding-bottom: 0;
}

.lddfw-assign-screen {
  padding-bottom: 73px;
}

/* The button markup is `<a class="btn btn-lg btn-block btn-success">` so
   Bootstrap's `.btn-success` paints it green by default and green-darker on
   hover/focus/active. We override all four states with equal-or-higher
   specificity (id + class) and `!important`.
   The sticky footer is rendered *after* the closing `</div>` of
   `#lddfw_content.lddfw-assign-screen`, so `.lddfw-assign-screen #...` does not
   match it - we must also scope
   `.lddfw_footer_buttons.lddfw-assign-footer` (same idea as
   `#lddfw_claim_orders_button`). */
/* Out for delivery button on the assign screen - purple gradient, ID-scoped. */
#lddfw_out_for_delivery_button,
#lddfw_out_for_delivery_button_loading {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%) !important;
  background-image: linear-gradient(
    135deg,
    #5b21b6 0%,
    #7c3aed 100%
  ) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(91, 33, 182, 0.28) !important;
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_out_for_delivery_button:hover,
#lddfw_out_for_delivery_button:focus,
#lddfw_out_for_delivery_button:active {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(91, 33, 182, 0.35) !important;
  color: #fff !important;
}

#lddfw_out_for_delivery_button .svg-inline--fa {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35rem;
  fill: currentColor;
}

.lddfw-assign-screen #lddfw_alert .alert {
  border-radius: 10px;
  border: 1px solid transparent;
}

/* Dark-mode variants. */
.dark .lddfw-assign-screen .lddfw_box.lddfw_multi_checkbox {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .lddfw-assign-screen .lddfw_box.lddfw_multi_checkbox:hover {
  border-color: #3b0764;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark
  .lddfw-assign-screen
  .lddfw_box.lddfw_multi_checkbox:has(.custom-control-input:checked) {
  border-color: #7c3aed;
  background: linear-gradient(180deg, #3b0764 0%, #1e293b 70%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.dark .lddfw-assign-screen .lddfw_order_number {
  color: #f1f5f9;
}

.dark .lddfw-assign-screen .lddfw_order_number::before {
  background: rgba(124, 58, 237, 0.18);
  color: #ddd6fe;
  border-color: rgba(196, 181, 253, 0.3);
}

.dark .lddfw-assign-screen .lddfw_wrap {
  border-top-color: #334155;
}

.dark .lddfw-assign-screen .lddfw_order_checkbox .custom-control-label::before {
  background: #0f172a !important;
  border-color: #475569 !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}

.dark
  .lddfw-assign-screen
  .lddfw_order_checkbox
  .custom-control-input:hover
  ~ .custom-control-label::before {
  border-color: #a78bfa !important;
}

.dark
  .lddfw-assign-screen
  .lddfw_order_checkbox
  .custom-control-input:focus
  ~ .custom-control-label::before {
  border-color: #a78bfa !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25) !important;
}

.dark
  .lddfw-assign-screen
  .lddfw_order_checkbox
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background-color: #6f42c1 !important;
  border-color: #6f42c1 !important;
}

.dark .lddfw-assign-screen .lddfw_order .lddfw_order_address,
.dark .lddfw-assign-screen .lddfw_order .lddfw_delivery_date {
  color: #cbd5e1;
}

.dark .lddfw-assign-screen .lddfw_order .lddfw_delivery_date {
  border-top-color: #475569;
}

.dark .lddfw-assign-screen .lddfw_order .lddfw_order_notes {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(196, 181, 253, 0.3);
  color: #c4b5fd;
}

.dark .lddfw-assign-screen .lddfw_no_orders {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}

.dark .lddfw_footer_buttons.lddfw-assign-footer {
  background: rgba(15, 23, 42, 0.97);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Assign screen - "Choose a Delivery Date" filter (from scheduling addon)
   --------------------------------------------------------------------------
   Same markup as on the claim screen; picked up via the exact same :has()
   selector strategy, scoped to .lddfw-assign-screen with a purple accent.
   ========================================================================== */
.lddfw-assign-screen .col-12:has(> #lddfw_delivery_dates_range) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 0.6rem;
  align-items: center;
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.4;
}

.lddfw-assign-screen .col-12:has(> #lddfw_delivery_dates_range)::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: center/contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b5cf6'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/></svg>");
  grid-column: 1;
  grid-row: 1;
}

.lddfw-assign-screen #lddfw_delivery_dates_range,
.lddfw-assign-screen #lddfw_delivery_dates_custom {
  grid-column: 1 / -1;
}

.lddfw-assign-screen #lddfw_delivery_dates_range {
  width: 100%;
  height: auto;
  margin: 0 !important;
  padding: 0.55rem 2rem 0.55rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #0f172a;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 18px 18px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.lddfw-assign-screen #lddfw_delivery_dates_range:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
  background-color: #fff;
}

.lddfw-assign-screen #lddfw_delivery_dates_custom {
  padding: 0.75rem;
  margin-top: 0.25rem;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
}

.lddfw-assign-screen #lddfw_delivery_dates_custom .form-group {
  margin: 0 0 0.6rem;
}

.lddfw-assign-screen #lddfw_delivery_dates_custom .form-group:last-child {
  margin-bottom: 0;
}

.lddfw-assign-screen #lddfw_delivery_dates_custom .form-group .col-12 {
  padding: 0;
}

.lddfw-assign-screen #lddfw_delivery_from_date,
.lddfw-assign-screen #lddfw_delivery_to_date {
  width: 100%;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  color: #0f172a;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.lddfw-assign-screen #lddfw_delivery_from_date:focus,
.lddfw-assign-screen #lddfw_delivery_to_date:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.lddfw-assign-screen #lddfw_delivery_dates_custom #filter_button {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
  background-color: #6f42c1;
  border-color: #6f42c1;
  color: #fff;
}

.lddfw-assign-screen #lddfw_delivery_dates_custom #filter_button:hover,
.lddfw-assign-screen #lddfw_delivery_dates_custom #filter_button:focus {
  background-color: #5a2fa4;
  border-color: #4c1d95;
}

.lddfw-assign-screen .col-12:has(> #lddfw_delivery_dates_range) + .col-12 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  max-width: 100%;
  padding: 0.4rem 0.85rem;
  margin: 0 0 1rem;
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  border-radius: 999px;
  color: #5b21b6;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}

.lddfw-assign-screen
  .col-12:has(> #lddfw_delivery_dates_range)
  + .col-12::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: center/contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b21b6'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/></svg>");
}

.dark .lddfw-assign-screen .col-12:has(> #lddfw_delivery_dates_range) {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .lddfw-assign-screen #lddfw_delivery_dates_range {
  color: #e2e8f0;
  background-color: #0f172a;
  border-color: #334155;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'><path d='M7 10l5 5 5-5z'/></svg>");
}

.dark .lddfw-assign-screen #lddfw_delivery_dates_range:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
  background-color: #0b1220;
}

.dark .lddfw-assign-screen #lddfw_delivery_dates_custom {
  background: #0f172a;
  border-color: #334155;
}

.dark .lddfw-assign-screen #lddfw_delivery_from_date,
.dark .lddfw-assign-screen #lddfw_delivery_to_date {
  color: #e2e8f0;
  background-color: #1e293b;
  border-color: #334155;
}

.dark .lddfw-assign-screen #lddfw_delivery_from_date:focus,
.dark .lddfw-assign-screen #lddfw_delivery_to_date:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
}

.dark
  .lddfw-assign-screen
  .col-12:has(> #lddfw_delivery_dates_range)
  + .col-12 {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(167, 139, 250, 0.45);
  color: #c4b5fd;
}

.dark
  .lddfw-assign-screen
  .col-12:has(> #lddfw_delivery_dates_range)
  + .col-12::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4b5fd'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/></svg>");
}

/* ==========================================================================
   Out-for-delivery screen - orange variant with route toolbar, origin card,
   sortable order list, and map-lightbox.
   Scoped to .lddfw-out-screen on #lddfw_content; plus companion scopes for
   .lddfw-out-footer (sticky footer) and .lddfw-out-map (full-screen map
   lightbox body class added by JS - we also target #lddfw_directions
   directly so the redesign applies without JS cooperation).
   Palette: orange primary (#ca6510 / #fd7e14 / #ffa94d), neutral card
   surfaces, slate text, matching the rest of the driver UI.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.lddfw-reviews-hero--out {
  background: linear-gradient(135deg, #ca6510 0%, #fd7e14 55%, #ffa94d 100%);
  box-shadow: 0 4px 16px rgba(202, 101, 16, 0.25);
}

.lddfw-reviews-hero--out .lddfw-reviews-hero__count-pill {
  background: #fff;
  color: #9a4a0a;
}

/* --- Route toolbar (Optimize / Sort) ------------------------------------- */
.lddfw-out-screen .lddfw_plain_route_wrap {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  margin: 0 0 0.85rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.lddfw-out-screen #lddfw_plain_route_row {
  margin: 0;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.lddfw-out-screen #lddfw_plain_route_row > .col-9,
.lddfw-out-screen #lddfw_plain_route_row > .col-3 {
  padding: 0;
  flex: 0 0 auto;
  max-width: none;
}

.lddfw-out-screen #lddfw_plain_route_row > .col-9 {
  flex: 1 1 auto;
  min-width: 0;
}

.lddfw-out-screen #lddfw_plain_route_row > .col-3 {
  width: 56px;
}

/* Primary "Optimize route" button - orange gradient, full width of its column.
   Overrides Bootstrap btn-secondary / btn-primary so all three state buttons
   (idle / loading / done) look consistent when JS swaps visibility between
   them. IMPORTANT: we DO NOT override `display` here - the buttons are
   toggled via inline `style="display:none/block"` by the PHP + jQuery
   `.show()/.hide()`, and using `!important` on `display` would force all
   three to render simultaneously. Bootstrap gives these buttons
   `.btn-block { display: block }` which is exactly what `.show()` restores,
   so inheriting the shown/hidden inline style is the correct behavior. */
.lddfw-out-screen #lddfw_plainroute_btn,
.lddfw-out-screen #lddfw_plain_route_row .lddfw_loading_btn,
.lddfw-out-screen #lddfw_plain_route_row .lddfw_done_btn {
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  height: 46px;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ca6510 0%, #fd7e14 100%) !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 1rem;
  box-shadow: 0 2px 6px rgba(202, 101, 16, 0.28);
  margin: 0 !important;
  line-height: 1;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* When these buttons ARE visible (Bootstrap `.btn-block` renders them as
   `display: block`), upgrade to flex for proper icon+label centering. The
   selector :not([style*="display: none"]) makes sure we only apply the
   flex layout to the currently-visible button so the hidden ones remain
   hidden per their inline style. */
.lddfw-out-screen #lddfw_plainroute_btn:not([style*="display: none"]),
.lddfw-out-screen
  #lddfw_plain_route_row
  .lddfw_loading_btn:not([style*="display: none"]),
.lddfw-out-screen
  #lddfw_plain_route_row
  .lddfw_done_btn:not([style*="display: none"]) {
  display: inline-flex;
}

.lddfw-out-screen #lddfw_plainroute_btn:hover,
.lddfw-out-screen #lddfw_plainroute_btn:focus {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(202, 101, 16, 0.35);
  color: #fff !important;
  transform: translateY(-1px);
}

.lddfw-out-screen #lddfw_plainroute_btn svg,
.lddfw-out-screen #lddfw_plain_route_row .lddfw_done_btn svg,
.lddfw-out-screen #lddfw_plainroute_btn .fa-lock,
.lddfw-out-screen #lddfw_plainroute_btn .fa-edit {
  width: 16px;
  height: 16px;
  display: inline-block;
  fill: #fff;
  color: #fff;
  top: auto;
}

/* Loading spinner button - dim amber, spinner color inherits white. */
.lddfw-out-screen #lddfw_plain_route_row .lddfw_loading_btn {
  background: linear-gradient(135deg, #9a4a0a 0%, #ca6510 100%) !important;
  cursor: progress;
}

.lddfw-out-screen #lddfw_plain_route_row .lddfw_loading_btn .spinner-border {
  color: #fff;
  border-right-color: transparent;
  width: 1.1rem;
  height: 1.1rem;
}

/* ---- Sort-route toggle button ---------------------------------------- */
/* The PHP renders this with `btn btn-secondary btn-block`. Bootstrap's
   `.btn-block { display: block; width: 100% }` wins specificity against
   a bare `#lddfw_sortroute_btn` rule because btn-block has !important in
   some builds. We boost specificity with `button#lddfw_sortroute_btn` and
   use !important on properties that compete with .btn / .btn-secondary /
   .btn-block defaults. We DO NOT force `display: inline-flex !important`
   because that would defeat hide/show toggles; .btn-block sets it to
   block by default and we upgrade to flex via a more specific selector. */
.lddfw-out-screen button#lddfw_sortroute_btn.btn,
.lddfw-out-screen #lddfw_sortroute_btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: #fff7ed !important;
  background-image: none !important;
  border: 1px solid #fed7aa !important;
  color: #c2410c !important;
  box-shadow: 0 1px 3px rgba(202, 101, 16, 0.1) !important;
  font-size: 1rem;
  line-height: 1;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.lddfw-out-screen #lddfw_sortroute_btn.btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor;
  color: currentColor;
  display: inline-block;
  top: auto;
  margin: 0;
}

.lddfw-out-screen #lddfw_sortroute_btn.btn:hover,
.lddfw-out-screen #lddfw_sortroute_btn.btn:focus {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border-color: #fb923c !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(202, 101, 16, 0.18) !important;
  outline: none;
}

/* Active sort mode - amber-tinted, signals "reorder" state clearly. */
.lddfw-out-screen #lddfw_sortroute_btn.btn.lddfw_active {
  background: linear-gradient(135deg, #ca6510 0%, #fd7e14 100%) !important;
  background-image: linear-gradient(
    135deg,
    #ca6510 0%,
    #fd7e14 100%
  ) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 6px rgba(202, 101, 16, 0.3) !important;
}

.lddfw-out-screen #lddfw_sortroute_btn.btn.lddfw_active:hover,
.lddfw-out-screen #lddfw_sortroute_btn.btn.lddfw_active:focus {
  filter: brightness(1.05);
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(202, 101, 16, 0.38) !important;
}

/* Info/wait alerts directly below the toolbar - pill-shaped, orange accent. */
.lddfw-out-screen #lddfw_plain_route_note_wait,
.lddfw-out-screen #lddfw_plain_route_note_info {
  margin-top: 0.65rem !important;
}

.lddfw-out-screen #lddfw_plain_route_note_wait .alert,
.lddfw-out-screen #lddfw_plain_route_note_info .alert,
.lddfw-out-screen #lddfw_plain_route_note_alert {
  background: #fff4e6;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 10px;
  padding: 0.6rem 0.85rem 0.6rem 2.25rem;
  font-size: 0.85rem;
  line-height: 1.4;
  position: relative;
  box-shadow: 0 1px 2px rgba(202, 101, 16, 0.06);
}

.lddfw-out-screen #lddfw_plain_route_note_wait .alert::before,
.lddfw-out-screen #lddfw_plain_route_note_info .alert::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.lddfw-out-screen #lddfw_plain_route_note_wait .alert::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ca6510'><path d='M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2z'/></svg>");
  animation: lddfw-out-spin 1s linear infinite;
}

.lddfw-out-screen #lddfw_plain_route_note_info .alert::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ca6510'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/></svg>");
}

.lddfw-out-screen #lddfw_plain_route_note_info .close {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  color: #9a3412;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
}

.lddfw-out-screen #lddfw_plain_route_note_info .close:hover {
  opacity: 1;
}

@keyframes lddfw-out-spin {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* --- Origin / Destination card ------------------------------------------ */
.lddfw-out-screen #lddfw_orders_table {
  counter-reset: lddfw-out-order;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* The origin/destination control block is the FIRST .lddfw_box inside the
   orders container (PHP prepends it via $origin_html . $html). Target it
   with :first-child + :has() so we don't style regular order cards. */
.lddfw-out-screen #lddfw_orders_table > .lddfw_box:has(#route_origin_title) {
  counter-increment: none;
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, #fff 0%, #fffaf2 100%);
  border: 1px solid #ffd8a8;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.lddfw-out-screen
  #lddfw_orders_table
  > .lddfw_box:has(#route_origin_title):hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  border-color: #ffd8a8;
}

.lddfw-out-screen .route_title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  padding: 0.4rem 0 0.4rem 1.6rem;
  margin: 0;
  position: relative;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #475569;
}

.lddfw-out-screen #route_origin_title {
  border-bottom: 1px dashed #ffd8a8;
}

.lddfw-out-screen .route_title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.15rem;
  height: 1.15rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.lddfw-out-screen #route_origin_title::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ca6510'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

.lddfw-out-screen #route_destination_title::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239a4a0a'><path d='M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z'/></svg>");
}

.lddfw-out-screen .route_title > span {
  font-weight: 600;
  color: #334155;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.lddfw-out-screen .route_title > p {
  margin: 0;
  color: #0f172a;
  font-weight: 500;
  font-size: 0.9rem;
  word-break: break-word;
  flex: 1 1 auto;
  min-width: 0;
}

/* Selects revealed in sort mode. */
.lddfw-out-screen #route_origin_div,
.lddfw-out-screen #route_destination_div {
  margin-top: 0.4rem;
}

.lddfw-out-screen #route_origin_div .row,
.lddfw-out-screen #route_destination_div .row {
  margin: 0;
}

.lddfw-out-screen #route_origin_div .col-12,
.lddfw-out-screen #route_destination_div .col-12 {
  padding: 0;
}

.lddfw-out-screen #route_origin,
.lddfw-out-screen #route_destination {
  background: #fff;
  border: 1px solid #ffd8a8;
  border-radius: 10px;
  padding: 0.55rem 2rem 0.55rem 0.75rem;
  color: #0f172a;
  font-size: 0.9rem;
  height: auto;
  box-shadow: 0 1px 2px rgba(202, 101, 16, 0.05);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ca6510'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 14px 14px;
}

.lddfw-out-screen #route_origin:focus,
.lddfw-out-screen #route_destination:focus {
  outline: none;
  border-color: #fd7e14;
  box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.18);
}

/* --- Order cards --------------------------------------------------------- */
.lddfw-out-screen #lddfw_orders_table > .lddfw_box {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 0.9rem 1.1rem;
  margin: 0;
  min-height: 0;
  counter-increment: lddfw-out-order;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}

.lddfw-out-screen #lddfw_orders_table > .lddfw_box:has(#route_origin_title) {
  counter-increment: none;
}

.lddfw-out-screen #lddfw_orders_table > .lddfw_box:hover {
  border-color: #ffd8a8;
  box-shadow: 0 4px 12px rgba(202, 101, 16, 0.08);
}

/* Pulsing highlight applied by JS for ~2s after a manual reorder. */
.lddfw-out-screen #lddfw_orders_table > .lddfw_box.lddfw_active {
  border-color: #fd7e14;
  box-shadow:
    0 0 0 3px rgba(253, 126, 20, 0.22),
    0 4px 12px rgba(202, 101, 16, 0.18);
  animation: lddfw-out-pulse 1s ease-in-out 2;
}

@keyframes lddfw-out-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(253, 126, 20, 0.22),
      0 4px 12px rgba(202, 101, 16, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(253, 126, 20, 0.1),
      0 6px 18px rgba(202, 101, 16, 0.28);
  }
}

.lddfw-out-screen .lddfw_box > .row,
.lddfw-out-screen .lddfw_box > .row > .col-12 {
  margin: 0;
  padding: 0;
}

/* Header row - flex layout: [number badge] [Order #] [spacer] [Details btn].
   Apply only to actual order cards, not the origin control card. */
.lddfw-out-screen
  #lddfw_orders_table
  > .lddfw_box:not(:has(#route_origin_title))
  > .row
  > .col-12 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.25rem;
  column-gap: 0.6rem;
}

/* Hide PHP-rendered `.lddfw_index.lddfw_counter` - we render our own via
   ::before on `.lddfw_order_number`. We keep the element in the DOM because
   the sort-route JS rewrites its innerHTML after reorders. */
.lddfw-out-screen .lddfw_box .lddfw_index.lddfw_counter {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.lddfw-out-screen .lddfw_order_number {
  order: 2;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  min-width: 0;
  word-break: break-word;
  margin-bottom: 10px;
}

.lddfw-out-screen .lddfw_order_number::before {
  content: counter(lddfw-out-order);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #fff4e6;
  color: #9a4a0a;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(253, 126, 20, 0.3);
  flex-shrink: 0;
}

.lddfw-out-screen .lddfw_order_number b {
  font-weight: 700;
}

/* Order details button - orange gradient, glued to the right edge of the
   header row. */
.lddfw-out-screen .lddfw_order_view.btn {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  order: 3;
  float: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #ca6510 0%, #fd7e14 100%);
  border: 0;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(202, 101, 16, 0.25);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
  flex-shrink: 0;
  z-index: 1;
  margin-bottom: 10px;
}

.lddfw-out-screen .lddfw_order_view.btn:hover,
.lddfw-out-screen .lddfw_order_view.btn:focus {
  filter: brightness(1.05);
  box-shadow: 0 3px 8px rgba(202, 101, 16, 0.32);
  color: #fff;
  transform: translateY(-1px);
}

/* Meta rows below the header (address, distance, coordinates, custom). */
.lddfw-out-screen .lddfw_order_address,
.lddfw-out-screen .lddfw_order_distance,
.lddfw-out-screen .lddfw_order_coordinates,
.lddfw-out-screen .lddfw_order_custom,
.lddfw-out-screen .lddfw_delivery_date {
  order: 4;
  flex: 1 1 100%;
  display: block;
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.4rem 0 0.4rem 1.55rem;
  margin: 0;
  text-decoration: none;
  position: relative;
  border-top: 1px dashed #eef2f7;
}

.lddfw-out-screen .lddfw_order_custom {
  padding: 0;
  border-top: 0;
}

.lddfw-out-screen .lddfw_order_custom:first-of-type {
  margin-top: 0.65rem;
}
.lddfw-out-screen .lddfw_order_address {
  min-height: 115px;
}

.lddfw-out-screen .lddfw_order_address.lddfw_order_coordinates {
  min-height: auto;
}

.lddfw-out-screen .lddfw_order_address:first-of-type,
.lddfw-out-screen .lddfw_order_distance:first-of-type,
.lddfw-out-screen .lddfw_order_coordinates:first-of-type,
.lddfw-out-screen .lddfw_delivery_date:first-of-type {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
}

.lddfw-out-screen .lddfw_order_address:hover,
.lddfw-out-screen .lddfw_order_distance:hover,
.lddfw-out-screen .lddfw_order_coordinates:hover {
  color: #0f172a;
  text-decoration: none;
}

.lddfw-out-screen .lddfw_order_address::before,
.lddfw-out-screen .lddfw_order_distance::before,
.lddfw-out-screen .lddfw_delivery_date::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.1rem;
  height: 1.1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.8;
}

.lddfw-out-screen .lddfw_order_address:first-of-type::before,
.lddfw-out-screen .lddfw_order_distance:first-of-type::before,
.lddfw-out-screen .lddfw_delivery_date:first-of-type::before {
  top: 0.75rem;
}

.lddfw-out-screen .lddfw_order_address::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d6efd'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

.lddfw-out-screen .lddfw_order_distance::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c4dff'><path d='M12 2a7 7 0 0 0-7 7c0 1.6.5 3.1 1.4 4.4L12 22l5.6-8.6A7.8 7.8 0 0 0 19 9a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

.lddfw-out-screen .lddfw_order_coordinates::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ca6510'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

/* Delivery-date row (scheduling addon). */
.lddfw-out-screen .lddfw_delivery_date {
  order: 9;
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #eef2f7;
}

.lddfw-out-screen .lddfw_delivery_date::before {
  top: 0.95rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ca6510'><path d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H5V8h14v13zM7 10h5v5H7z'/></svg>");
}

/* --- Sort-mode handles (up/down buttons) --------------------------------- */
/* Align the up/down stack to the same visual line across ALL cards: the
   right edge of the first meta row (the address). Cards have variable
   height because some have distance / coordinates / custom-fields rows
   and others don't - centering against the whole card would jump the
   handles up and down per card, which is exactly what the user saw.
   We pin the stack with a fixed `top` that places it next to the address
   row, regardless of how many meta rows follow it. The stack is 34+34+6
   = 74 px tall; we anchor via translateY(-50%) against a fixed top that
   equals the header-row height (2.3rem) + 0.65rem gap + half of the
   address-row height (~0.9rem). */
.lddfw-out-screen .lddfw_handle_column {
  position: absolute;
  top: 105px;
  right: 0.85rem;
  bottom: auto;
  left: auto;
  height: auto;
  padding: 0;
  margin: 0;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.35rem;
  border-radius: 0;
  background: transparent;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: auto;
}

/* When sort mode is active, JS removes the inline `display:none` via
   .show() which sets it to `block`. We upgrade that to flex (column
   layout) with !important so the stacked icon-button layout wins over
   the jQuery-injected `display: block`. */
.lddfw-out-screen .lddfw_handle_column[style*="display: block"],
.lddfw-out-screen .lddfw_handle_column[style*="display:block"] {
  display: flex !important;
}

.lddfw-out-screen .lddfw_handle_column .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ffd8a8;
  color: #9a4a0a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}

.lddfw-out-screen .lddfw_handle_column .btn:hover,
.lddfw-out-screen .lddfw_handle_column .btn:focus {
  background: linear-gradient(135deg, #ca6510 0%, #fd7e14 100%);
  color: #fff;
  border-color: transparent;
}

.lddfw-out-screen .lddfw_handle_column .btn:active {
  transform: translateY(1px);
}

.lddfw-out-screen .lddfw_handle_column .btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* In sort mode, hide the "Order details" button (JS also toggles it, but
   this scope makes the transition cleaner). */
.lddfw-out-screen #lddfw_sortroute_btn.lddfw_active ~ div .lddfw_order_view,
.lddfw-out-screen
  #lddfw_plain_route_wrap:has(#lddfw_sortroute_btn.lddfw_active)
  ~ #lddfw_plain_route_container
  .lddfw_order_view {
  /* fallback: JS hides via jQuery; this pseudo-selector is a defensive
     tweak for browsers that re-run selector matching on class change */
}

/* Empty state. */
.lddfw-out-screen .lddfw_no_orders {
  text-align: center;
  padding: 2.25rem 1rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  box-shadow: none;
}

.lddfw-out-screen .lddfw_no_orders p {
  margin: 0;
}

/* --- Sticky footer: "View Route" ----------------------------------------- */
.lddfw-out-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #e9ecef;
  box-shadow: 0 -4px 16px rgba(1, 22, 39, 0.06);
}

/* Secondary CTA: outlined so "Optimize route" (toolbar) stays the single solid
   primary; avoids two identical orange gradient buttons on the same view. */
.lddfw-out-footer #lddfw_route_btn.btn {
  padding: 0.75rem 1rem !important;
  width: 100%;
  border-radius: 10px !important;
  background: #fff !important;
  background-image: none !important;
  border: 2px solid #f97316 !important;
  color: #9a3412 !important;
  height: 50px;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.lddfw-out-footer #lddfw_route_btn.btn:hover,
.lddfw-out-footer #lddfw_route_btn.btn:focus {
  background: #fff7ed !important;
  background-image: none !important;
  border-color: #ea580c !important;
  color: #7c2d12 !important;
  box-shadow: 0 2px 10px rgba(234, 88, 12, 0.18);
  filter: none;
  transform: translateY(-1px);
}

.lddfw-out-footer #lddfw_route_btn.btn:active {
  background: #ffedd5 !important;
  background-image: none !important;
  border-color: #c2410c !important;
  color: #7c2d12 !important;
}

.lddfw-out-footer #lddfw_route_btn.btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  color: inherit;
}

/* --- Map lightbox (#lddfw_directions) ------------------------------------
   This lightbox lives outside #lddfw_content (appended to body by PHP) so
   we can't scope it with .lddfw-out-screen. It's ONLY opened from the
   out-for-delivery screen via #lddfw_route_btn.click so a global restyle
   is safe.

   Structure (from class-lddfw-route.php::lddfw_route_screen__premium_only):
     #lddfw_directions.lddfw_lightbox
       .lddfw_lightbox_wrap
         #lddfw_hide_map.container  (top bar: back btn + title)
         #lddfw_map123              (google map canvas, 55% height)
         #lddfw_directions-panel-listing
           #lddfw_total_route       (JS injects total time+distance pill)
           .row.lddfw_address       (start/end address rows, letter markers)
           .row.lddfw_drive         (leg rows: car icon + duration+distance)

   The lightbox has `margin-top:48px` globally (line ~710) to clear the
   site's top nav - we preserve that but override the rest for a clean
   full-bleed map + listing layout.
   ========================================================================== */
/* Modal layout strategy - ABSOLUTE positioning, not flex.
   The DOM structure (from lddfw_route_screen__premium_only) is:
     #lddfw_directions
       .lddfw_lightbox_wrap     ← contains ONLY the header bar
         #lddfw_hide_map.container
       #lddfw_map123             ← sibling of .lddfw_lightbox_wrap
       #lddfw_directions-panel-listing  ← sibling
   Using flex-column with mixed wrappers and Bootstrap `.container`
   (which has responsive max-widths) was producing broken layouts. We
   instead pin each of the three visible zones with absolute positioning
   inside a position:fixed modal, giving a rock-solid:
     top 0..60 px     → header bar
     60..55%          → map
     55%..bottom      → directions panel (scrollable)
   This also guarantees the panel is full viewport width regardless of
   the `.container` class it carries. */
#lddfw_directions.lddfw_lightbox {
  margin-top: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: #f8fafc;
  overflow: hidden;
  z-index: 999;
}

/* Header wrapper pinned to the very top, 60 px tall. */
#lddfw_directions .lddfw_lightbox_wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  min-height: 60px;
  padding: 0;
  margin: 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  z-index: 3;
  overflow: visible;
}

/* Header bar itself - we override Bootstrap `.container` constraints
   (max-width, auto margins) so the bar truly spans edge-to-edge. */
#lddfw_directions #lddfw_hide_map {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 60px;
  margin: 0 !important;
  padding: 0.65rem 0.75rem !important;
  background: transparent;
  border: 0;
  box-shadow: none;
  position: relative;
  box-sizing: border-box;
}

#lddfw_directions #lddfw_hide_map .row {
  display: flex;
  align-items: center;
  margin: 0;
  height: 100%;
  flex-wrap: nowrap;
}

#lddfw_directions #lddfw_hide_map .col-2,
#lddfw_directions #lddfw_hide_map .col-8 {
  padding: 0;
}

#lddfw_directions #lddfw_hide_map_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff4e6;
  color: #9a4a0a;
  border: 1px solid #ffd8a8;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}

#lddfw_directions #lddfw_hide_map_btn:hover,
#lddfw_directions #lddfw_hide_map_btn:focus {
  background: linear-gradient(135deg, #ca6510 0%, #fd7e14 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(202, 101, 16, 0.28);
  transform: translateY(-1px);
  outline: none;
}

#lddfw_directions #lddfw_hide_map_btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

#lddfw_directions .lddfw_header_title {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 40px;
}

/* Map canvas - pinned below the 60 px header, fills 55 % of viewport
   height minus the header. Using absolute positioning (not flex) makes
   this deterministic regardless of Bootstrap container constraints. */
#lddfw_directions #lddfw_map123 {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(55vh - 60px);
  min-height: 220px;
  background: #e5e7eb;
  z-index: 1;
}

/* Google Map internals - kill the default focus ring on the canvas. */
#lddfw_directions #lddfw_map123 > div {
  outline: none !important;
}

/* --- Directions panel (bottom half of the modal) -------------------------
   `flex: 1 1 0` lets the panel fill all remaining vertical space below
   the map AND triggers correct overflow behavior: the panel's content
   height is independent of its allocated box, so `overflow-y: auto`
   produces a real scroll all the way to the last item. The previous
   `max-height: 45%` approach made the panel a shrink-wrap container
   which, combined with padding and safe-area insets, cut the last rows
   off the bottom on phones. */
#lddfw_directions #lddfw_directions-panel-listing {
  position: absolute;
  top: 55vh;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  max-width: none !important;
  height: auto;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem 0.85rem 1.25rem !important;
  margin: 0 !important;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  z-index: 2;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #0f172a;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

#lddfw_directions #lddfw_directions-panel-listing::-webkit-scrollbar {
  width: 6px;
}

#lddfw_directions #lddfw_directions-panel-listing::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* Total-route summary pill - sits at the very top of the listing. JS
   injects content like: "<b>1 h 23 min</b> <span>(18.4 mi)</span>". The
   adjacent #lddfw-panel-listing-toggle anchor (injected by tracking JS,
   not on this screen) is kept aligned right if it appears. */
#lddfw_directions #lddfw_total_route {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.9rem;
  background: linear-gradient(135deg, #fff4e6 0%, #ffedd5 100%);
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  font-size: 0.85rem;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(202, 101, 16, 0.08);
}

#lddfw_directions #lddfw_total_route::before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ca6510'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.2 14.2L11 13V7h1.5v5.25l4.5 2.67z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

#lddfw_directions #lddfw_total_route b {
  font-weight: 700;
  color: #7c2d12;
  display: inline-block;
}

#lddfw_directions #lddfw_total_route span {
  color: #9a4a0a;
  font-weight: 500;
}

/* Address rows: each order's start/end address. JS renders them as
   `.row.lddfw_address` with a col-2 containing an SVG pin + .lddfw_point
   letter marker, and a col-10 with the address text. */
#lddfw_directions .lddfw_address,
#lddfw_directions .lddfw_drive {
  margin: 0;
  padding: 0.5rem 0;
  border-top: 1px solid #eef2f7;
  align-items: center;
  flex-wrap: nowrap;
}

#lddfw_directions .lddfw_address:first-of-type,
#lddfw_directions .lddfw_drive:first-of-type {
  border-top: 0;
}

#lddfw_directions .lddfw_address > .col-2,
#lddfw_directions .lddfw_drive > .col-2 {
  flex: 0 0 48px;
  max-width: 48px;
  padding: 0;
  position: relative;
  min-height: 32px;
}

#lddfw_directions .lddfw_address > .col-10,
#lddfw_directions .lddfw_drive > .col-10 {
  flex: 1 1 auto;
  max-width: none;
  padding: 0 0 0 0.25rem;
  min-width: 0;
  word-break: break-word;
}

/* Letter-marker pins (A, B, C, ...) - replace the legacy fa-map-marker
   absolute-centering hack with a single visible pin badge. We hide the
   inline FontAwesome SVG (`.fa-map-marker`) and re-render the letter in
   `.lddfw_point` as a filled orange circle, so the layout isn't dependent
   on two overlapping absolute positions. */
#lddfw_directions .lddfw_address .fa-map-marker,
#lddfw_directions .lddfw_address svg.svg-inline--fa.fa-map-marker {
  display: none;
}

#lddfw_directions .lddfw_address > .col-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

#lddfw_directions .lddfw_address > .col-10 {
  color: #0f172a;
  font-weight: 500;
  font-size: 0.9rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  padding-left: 0.5rem;
}

/* Drive-leg rows: between two address rows, shows "[dots] [car icon]
   [dots]" in the col-2 and "<b>duration</b><br>distance" in the col-10.
   The PHP/JS-injected `.up` / `.down` ellipsis icons are vertical
   connectors - we hide them in favour of a single CSS vertical line, and
   render the car icon as a small framed chip. */
#lddfw_directions .lddfw_drive {
  padding: 0.45rem 0;
}

#lddfw_directions .lddfw_drive > .col-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
}

#lddfw_directions .lddfw_drive > .col-2 svg.up,
#lddfw_directions .lddfw_drive > .col-2 svg.down {
  flex: 1;
  width: 6px !important;
  fill: #94a3b8;
}

#lddfw_directions .lddfw_drive > .col-2 br {
  display: none;
}

#lddfw_directions .lddfw_drive > .col-2 svg.fa-car {
  position: relative;
  z-index: 1;
  width: 22px !important;
  height: 22px !important;
  padding: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  fill: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  box-sizing: content-box;
}

#lddfw_directions .lddfw_drive > .col-10 {
  color: #475569;
  font-size: 0.85rem;
  line-height: 1.35;
  padding-left: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#lddfw_directions .lddfw_drive > .col-10 b {
  display: block;
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

/* Safety: kill the legacy absolute positioning on any residual
   `.fa-map-marker` copies that appear inside the panel. */
#lddfw_directions-panel-listing .fa-map-marker {
  display: none;
}

#lddfw_directions-panel-listing .lddfw_point {
  position: static;
  margin: 0 auto;
  top: auto;
  left: auto;
}

/* --- Dark mode ----------------------------------------------------------- */
.dark .lddfw-out-screen .lddfw_plain_route_wrap {
  background: #1e293b;
  border-color: #334155;
}

.dark .lddfw-out-screen #lddfw_sortroute_btn {
  background: rgba(202, 101, 16, 0.12) !important;
  border-color: rgba(202, 101, 16, 0.35) !important;
  color: #fed7aa !important;
}

.dark .lddfw-out-screen #lddfw_sortroute_btn:hover {
  background: rgba(202, 101, 16, 0.22) !important;
  border-color: rgba(253, 126, 20, 0.55) !important;
  color: #ffedd5 !important;
}

.dark .lddfw-out-screen #lddfw_plain_route_note_wait .alert,
.dark .lddfw-out-screen #lddfw_plain_route_note_info .alert,
.dark .lddfw-out-screen #lddfw_plain_route_note_alert {
  background: rgba(202, 101, 16, 0.12);
  border-color: rgba(202, 101, 16, 0.4);
  color: #fed7aa;
}

.dark .lddfw-out-screen #lddfw_orders_table > .lddfw_box {
  background: #1e293b;
  border-color: #334155;
}

.dark .lddfw-out-screen #lddfw_orders_table > .lddfw_box:hover {
  border-color: rgba(202, 101, 16, 0.5);
}

.dark
  .lddfw-out-screen
  #lddfw_orders_table
  > .lddfw_box:has(#route_origin_title) {
  background: linear-gradient(180deg, #1e293b 0%, #2a1f10 100%);
  border-color: rgba(202, 101, 16, 0.45);
}

.dark .lddfw-out-screen .route_title {
  color: #cbd5e1;
}

.dark .lddfw-out-screen .route_title > span {
  color: #f1f5f9;
}

.dark .lddfw-out-screen .route_title > p {
  color: #f8fafc;
}

.dark .lddfw-out-screen #route_origin_title {
  border-bottom-color: rgba(202, 101, 16, 0.3);
}

.dark .lddfw-out-screen #route_origin,
.dark .lddfw-out-screen #route_destination {
  background: #0f172a;
  border-color: rgba(202, 101, 16, 0.4);
  color: #f1f5f9;
}

.dark .lddfw-out-screen .lddfw_order_number {
  color: #f1f5f9;
}

.dark .lddfw-out-screen .lddfw_order_number::before {
  background: rgba(202, 101, 16, 0.2);
  color: #fed7aa;
  border-color: rgba(253, 126, 20, 0.45);
}

.dark .lddfw-out-screen .lddfw_order_address,
.dark .lddfw-out-screen .lddfw_order_distance,
.dark .lddfw-out-screen .lddfw_order_coordinates,
.dark .lddfw-out-screen .lddfw_delivery_date {
  color: #cbd5e1;
  border-top-color: #334155;
}

.dark .lddfw-out-screen .lddfw_order_address:hover,
.dark .lddfw-out-screen .lddfw_order_distance:hover,
.dark .lddfw-out-screen .lddfw_order_coordinates:hover {
  color: #f1f5f9;
}

.dark .lddfw-out-screen .lddfw_handle_column .btn {
  background: #1e293b;
  border-color: rgba(202, 101, 16, 0.4);
  color: #fed7aa;
}

.dark .lddfw-out-screen .lddfw_no_orders {
  background: #1e293b;
  border-color: #475569;
  color: #94a3b8;
}

.dark .lddfw-out-footer {
  background: #1e293b;
  border-top-color: #334155;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.dark .lddfw-out-footer #lddfw_route_btn.btn {
  background: #0f172a !important;
  background-image: none !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
  color: #fed7aa !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark .lddfw-out-footer #lddfw_route_btn.btn:hover,
.dark .lddfw-out-footer #lddfw_route_btn.btn:focus {
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: #fb923c !important;
  color: #ffedd5 !important;
}

.dark .lddfw-out-footer #lddfw_route_btn.btn:active {
  background: rgba(249, 115, 22, 0.2) !important;
  border-color: #fb923c !important;
  color: #ffedd5 !important;
}

.dark #lddfw_directions.lddfw_lightbox {
  background: #0f172a;
}

.dark #lddfw_directions #lddfw_hide_map {
  background: #1e293b;
  border-bottom-color: #334155;
}

.dark #lddfw_directions #lddfw_hide_map_btn {
  background: rgba(202, 101, 16, 0.18);
  border-color: rgba(202, 101, 16, 0.45);
  color: #fed7aa;
}

.dark #lddfw_directions .lddfw_header_title {
  color: #f1f5f9;
}

.dark #lddfw_directions #lddfw_directions-panel-listing {
  background: #1e293b;
  border-top-color: #334155;
  color: #f1f5f9;
  scrollbar-color: #475569 transparent;
}

.dark
  #lddfw_directions
  #lddfw_directions-panel-listing::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark #lddfw_directions #lddfw_total_route {
  background: linear-gradient(
    135deg,
    rgba(202, 101, 16, 0.18) 0%,
    rgba(253, 126, 20, 0.22) 100%
  );
  border-color: rgba(202, 101, 16, 0.45);
  color: #fed7aa;
}

.dark #lddfw_directions #lddfw_total_route b {
  color: #ffedd5;
}

.dark #lddfw_directions #lddfw_total_route span {
  color: #fdba74;
}

.dark #lddfw_directions .lddfw_address,
.dark #lddfw_directions .lddfw_drive {
  border-top-color: #334155;
}

.dark #lddfw_directions .lddfw_address > .col-10 {
  color: #f1f5f9;
}

.dark #lddfw_directions .lddfw_drive > .col-10 {
  color: #cbd5e1;
}

.dark #lddfw_directions .lddfw_drive > .col-10 b {
  color: #f8fafc;
}

.dark #lddfw_directions .lddfw_drive > .col-2 svg.up,
.dark #lddfw_directions .lddfw_drive > .col-2 svg.down {
  fill: #64748b;
}

.dark #lddfw_directions .lddfw_drive > .col-2 svg.fa-car {
  background: #0f172a;
  border-color: #475569;
  fill: #cbd5e1;
}

.dark #lddfw_directions #lddfw_map123 {
  background: #0f172a;
}

.custom-select {
  font-size: 14px;
}

/* ==========================================================================
   Order screen 
   Scoped to .lddfw-order-screen so the rest of the driver panel is not
   affected. Includes ETA strip + `#lddfw-panel-listing-toggle` and the
   directions steps lightbox `#lddfw_directions-panel-lightbox`.
   ========================================================================== */

/* Overall page padding + vertical rhythm between cards. */
.lddfw-order-screen {
  padding: 0 0 73px;
  background: #f4f6fb;
  /* One shared scale for all action buttons on this screen (nav, contact, pickup, footer). */
  --lddfw-order-btn-h: 44px;
  --lddfw-order-btn-radius: 0.75rem;
  --lddfw-order-btn-px: 0.75rem;
  --lddfw-order-btn-fs: 0.875rem;
  --lddfw-order-btn-fw: 600;
  --lddfw-order-btn-gap: 0.4rem;
}

/* Content column: centered cap so desktop matches mobile side inset (was full-bleed). */
.lddfw-order-screen > .container,
.lddfw-order-screen #lddfw_order {
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* --- 1. Map + ETA overlay ------------------------------------------------ */

.lddfw-order-screen #google_map {
  position: relative;
  height: 280px !important;
  width: 100%;
  margin: 0 0 1rem;

  overflow: hidden;
  box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.35);
}

/* Raise the map above the directions lightbox scrim so the InfoWindow
   bubble is visible when a direction step is tapped. */
.lddfw-order-screen #google_map.lddfw-map-above-lightbox {
  z-index: 1000;
}

/* ETA / route counter - rendered OUTSIDE #lddfw_order as `.container`, but
   we want it to look and size exactly like an Info card (.lddfw_box inside
   #lddfw_order > .row > .col-12). Neutralize Bootstrap's .container
   max-width, then copy the Info-card shell rules. */
.lddfw-order-screen #google_map_direction.container {
  width: auto;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  padding: 1.1rem 1.15rem;
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 1rem;
  box-shadow: 0 8px 20px -18px rgba(15, 23, 42, 0.35);
  box-sizing: border-box;
}

.lddfw-order-screen #google_map_direction .row {
  align-items: center;
  justify-content: center;
  margin: 0;
  flex-wrap: nowrap;
}

.lddfw-order-screen #google_map_direction .col-2 {
  padding: 0;
  max-width: 56px !important;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lddfw-order-screen #google_map_direction .col-10 {
  padding: 0 0 0 0.75rem;
  flex: 1 1 auto;
  max-width: none;
}

.lddfw-order-screen #lddfw_delivery_counter {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.6);
  margin: 0;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* Clock (PHP + JS): centered in badge; sits above the countdown ring when active */
.lddfw-order-screen #lddfw_delivery_counter .lddfw_delivery_counter_clock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  display: block;
  color: #fff;
  fill: #fff;
  pointer-events: none;
}

/* Fill badge: undo global .base-timer / .base-timer__svg % heights and #lddfw_page.order offsets */
.lddfw-order-screen #lddfw_delivery_counter .base-timer {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lddfw-order-screen #lddfw_delivery_counter .base-timer__svg {
  width: 100%;
  height: 100%;
  margin: 0;
  flex-shrink: 0;
  display: block;
  color: #fff;
}

.lddfw-order-screen #lddfw_total_route {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}

.lddfw-order-screen #lddfw_total_route b {
  color: #2563eb;
}

.lddfw-order-screen #lddfw_delivery_counter_text {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.15rem;
}

/* Route summary row: time + distance (JS) + directions toggle (JS append). */
.lddfw-order-screen #lddfw_total_route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
}

.lddfw-order-screen #lddfw_total_route_icon #lddfw-panel-listing-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 11px !important;
  border: 1px solid rgba(202, 101, 16, 0.38) !important;
  background: linear-gradient(135deg, #fff4e6 0%, #ffedd5 100%) !important;
  box-shadow: 0 2px 8px rgba(202, 101, 16, 0.18);
  line-height: 1 !important;
  text-decoration: none !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.lddfw-order-screen #lddfw_total_route_icon #lddfw-panel-listing-toggle:hover,
.lddfw-order-screen #lddfw_total_route_icon #lddfw-panel-listing-toggle:focus {
  filter: brightness(1.04);
  box-shadow: 0 4px 14px rgba(202, 101, 16, 0.32);
  transform: translateY(-1px);
  outline: none;
}

.lddfw-order-screen
  #lddfw_total_route
  #lddfw-panel-listing-toggle:focus-visible {
  outline: 2px solid #ca6510;
  outline-offset: 3px;
}

.lddfw-order-screen #lddfw_total_route_icon #lddfw-panel-listing-toggle svg {
  width: 18px;
  height: 18px;
  fill: #ca6510;
  display: block;
}

/* Step-by-step directions modal (opens from toggle). Bottom-anchored sheet. */
.lddfw-order-screen #lddfw_directions-panel-lightbox.lddfw_lightbox {
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem;
  padding-bottom: 0.75rem;
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  /* Flat scrim (no backdrop blur - clearer, less “glass”). */
  background: rgba(15, 23, 42, 0.58);
  overscroll-behavior: none;
}

/* jQuery .show() sets display:block - flex keeps bottom sheet centered. */
.lddfw-order-screen
  #lddfw_directions-panel-lightbox.lddfw_lightbox[style*="display: block"],
.lddfw-order-screen
  #lddfw_directions-panel-lightbox.lddfw_lightbox[style*="display:block"] {
  display: flex !important;
}

.lddfw-order-screen #lddfw_directions-panel-lightbox.lddfw_lightbox {
  /* Sheet content must sit above the map (which is raised to z-index 1000
     so InfoWindow bubbles are visible behind the scrim). */
  z-index: 1001;
}

.lddfw-order-screen #lddfw_directions-panel-lightbox .lddfw_lightbox_wrap {
  position: relative;
  width: 100%;
  max-width: 42rem;
  max-height: min(88vh, 640px);
  margin: 0 auto;
  background: #fff;
  border-radius: 1.1rem;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  z-index: 1002;
}

.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .lddfw_lightbox_wrap
  .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.lddfw-order-screen #lddfw_directions-panel-lightbox .lddfw_lightbox_wrap .row {
  margin: 0;
}

.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .lddfw_lightbox_wrap
  .col-12 {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: min(82vh, 600px);
}

.lddfw-order-screen #lddfw_directions-panel-lightbox h2 {
  margin: 0;
  padding: 1rem 3rem 0.85rem 1.15rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  border-bottom: 1px solid #eef1f7;
  flex-shrink: 0;
}

.lddfw-order-screen #lddfw_directions-panel-lightbox .lddfw_lightbox_close {
  position: absolute;
  top: 0.45rem;
  right: 0.65rem;
  z-index: 5;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  border-radius: 10px;
  color: #64748b;
  text-decoration: none !important;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .lddfw_lightbox_close:hover,
.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .lddfw_lightbox_close:focus {
  background: #f1f5f9;
  color: #0f172a;
  outline: none;
}

/* Origin / destination address rows */
.lddfw-order-screen #lddfw_directions-panel-lightbox #lddfw_directions-origin,
.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-destination {
  padding: 0.65rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.45;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  background: #f7f7f7;
  border-bottom: 1px solid #eef2f7;
}

.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-destination {
  border-bottom: none;
  border-top: 1px solid #eef2f7;
}

/* Pin container: override inline styles, use flexbox */
.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-origin
  > div:first-child,
.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-destination
  > div:first-child {
  width: 40px !important;
  min-width: 40px;
  bottom: 0 !important;
  position: relative !important;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Hide legacy pin SVG, show orange letter badge */
.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-origin
  .fa-map-marker,
.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-destination
  .fa-map-marker {
  display: none;
}

.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-origin
  .lddfw_point,
.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-destination
  .lddfw_point {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ea4335;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  top: auto;
  left: auto;
}

/* Address text */
.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-origin
  > div:last-child,
.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-destination
  > div:last-child {
  padding-left: 0.5rem !important;
  flex: 1;
}

/* Scrollable directions panel */
.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-panel-direction {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 1rem 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-panel-direction::-webkit-scrollbar {
  width: 6px;
}

.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-panel-direction::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* Summary pill (e.g. "1.9 mi · About 10 mins") */
.lddfw-order-screen #lddfw_directions-panel-lightbox .adp-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0;
  padding: 0.45rem 0.85rem;
  background: linear-gradient(135deg, #fff4e6 0%, #ffedd5 100%);
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(202, 101, 16, 0.08);
}

.lddfw-order-screen #lddfw_directions-panel-lightbox .adp-legal {
  font-size: 0.72rem;
  color: #94a3b8;
  text-align: center;
  padding-top: 0.5rem;
}

/* Hide Google's own A/B placemark rows since we have our own */
.lddfw-order-screen #lddfw_directions-panel-lightbox .adp-placemark {
  display: none;
}

/* Steps table */
.lddfw-order-screen #lddfw_directions-panel-lightbox .adp-directions {
  width: 100%;
  border-spacing: 0;
  border-radius: 0.65rem;
  overflow: hidden;
  background: #fafbfc;
  border: 1px solid #eef2f7;
}

.lddfw-order-screen #lddfw_directions-panel-lightbox .adp-step,
.lddfw-order-screen #lddfw_directions-panel-lightbox .adp-substep {
  font-size: 0.84rem;
  color: #334155;
  line-height: 1.45;
  padding: 0.55rem 0.5rem;
  border-top: 1px solid #eef2f7 !important;
  vertical-align: middle;
}

.lddfw-order-screen
  #lddfw_directions-panel-lightbox
  tr:first-child
  .adp-substep {
  border-top: none !important;
}

.lddfw-order-screen #lddfw_directions-panel-lightbox .adp-distance {
  font-size: 0.78rem;
  color: #64748b;
  white-space: nowrap;
  text-align: right;
}

.lddfw-order-screen #lddfw_directions-panel-lightbox .adp-maneuver {
  width: 18px;
  height: 18px;
}

/* --- 2. Order Info card -------------------------------------------------- */

/* The Info card is the first .lddfw_box inside #lddfw_order. */
.lddfw-order-screen #lddfw_order .lddfw_box {
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 1rem;
  padding: 1.1rem 1.15rem;
  margin: 0 0 1rem;
  box-shadow: 0 8px 20px -18px rgba(15, 23, 42, 0.35);
}

.lddfw-order-screen #lddfw_order .lddfw_box .lddfw_title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.85rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid #eef1f7;
  text-transform: none;
  letter-spacing: 0;
}

/* Info card: title icon - same soft badge shell as other section headers. */
.lddfw-order-screen #lddfw_order .lddfw_title svg.fa-info-circle {
  width: 16px;
  height: 16px;
  padding: 7px;
  box-sizing: content-box;
  border-radius: 0.55rem;
  flex-shrink: 0;
  color: #2563eb;
  fill: #2563eb;
  background: #dbeafe;
}

/* All other section cards: title icon in a soft rounded square (former Info row badge style). */
.lddfw-order-screen #lddfw_order .lddfw_title svg:not(.fa-info-circle) {
  width: 16px;
  height: 16px;
  padding: 7px;
  box-sizing: content-box;
  border-radius: 0.55rem;
  flex-shrink: 0;
}

/* Info card -> key/value rows (Date, Status, Payment, Total...). */
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_date,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_delivery_date,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_status,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_status_date,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_payment_method,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.65rem 0;
  border-bottom: 1px dashed #eef1f7;
  font-size: 0.875rem;
  color: #475569;
}

/* Each Info row: inline SVG via ::before, no soft colored badge (badges are on other section headers). */
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_date::before,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_delivery_date::before,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_status::before,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_status_date::before,
.lddfw-order-screen
  #lddfw_order
  .lddfw_box
  p#lddfw_order_payment_method::before,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* Calendar icon for Date. */
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_date::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%232563eb' d='M152 64h144V24a24 24 0 0 1 48 0v40h40a40 40 0 0 1 40 40v56H32v-56a40 40 0 0 1 40-40h40V24a24 24 0 0 1 48 0v40zM32 192h384v232a40 40 0 0 1-40 40H72a40 40 0 0 1-40-40V192z'/></svg>");
}

/* Scheduled delivery date (scheduling addon) - calendar icon, route orange accent. */
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_delivery_date::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%23ca6510' d='M152 64h144V24a24 24 0 0 1 48 0v40h40a40 40 0 0 1 40 40v56H32v-56a40 40 0 0 1 40-40h40V24a24 24 0 0 1 48 0v40zM32 192h384v232a40 40 0 0 1-40 40H72a40 40 0 0 1-40-40V192z'/></svg>");
}

/* Check-circle icon for Status. */
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_status::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%2316a34a' d='M256 8a248 248 0 1 0 0 496 248 248 0 0 0 0-496zm140 181L228 357a17 17 0 0 1-24 0l-91-92a17 17 0 0 1 0-24l22-22a17 17 0 0 1 24 0l58 58 134-134a17 17 0 0 1 24 0l22 23a17 17 0 0 1 0 24z'/></svg>");
}

/* Clock icon for status-date (delivered/failed date). */
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_status_date::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23d97706' d='M256 8a248 248 0 1 0 0 496 248 248 0 0 0 0-496zm0 448a200 200 0 1 1 0-400 200 200 0 0 1 0 400zm62-104-85-62a12 12 0 0 1-5-10V116a12 12 0 0 1 12-12h32a12 12 0 0 1 12 12v142l67 49a12 12 0 0 1 2 17l-19 26a12 12 0 0 1-17 2z'/></svg>");
}

/* Credit-card icon for Payment method. */
.lddfw-order-screen
  #lddfw_order
  .lddfw_box
  p#lddfw_order_payment_method::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='%237c3aed' d='M0 432a48 48 0 0 0 48 48h480a48 48 0 0 0 48-48V256H0v176zm192-68a12 12 0 0 1 12-12h136a12 12 0 0 1 12 12v40a12 12 0 0 1-12 12H204a12 12 0 0 1-12-12v-40zm-128 0a12 12 0 0 1 12-12h72a12 12 0 0 1 12 12v40a12 12 0 0 1-12 12H76a12 12 0 0 1-12-12v-40zM576 80v48H0V80a48 48 0 0 1 48-48h480a48 48 0 0 1 48 48z'/></svg>");
}

/* Dollar icon for Total. */
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 512'><path fill='%2316a34a' d='M209 233 72 193a21 21 0 0 1-14-20c0-12 10-22 23-22h86c10 0 19 3 27 8 7 4 16 3 22-3l22-21c8-8 7-21-2-28-22-17-50-26-79-27V32a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v48h-3C49 80 3 124 0 178c-2 38 21 73 58 83l137 40a21 21 0 0 1 14 20c0 12-10 22-23 22h-86c-10 0-19-3-27-8-7-4-16-3-22 3l-22 21c-8 8-7 21 2 28 22 17 50 26 79 27V480a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-48h3c52 0 97-33 108-83 10-50-19-100-66-116z'/></svg>");
}

/* The label-value text of each row fills the rest of the row. */
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_date,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_delivery_date,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_status,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_status_date,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_payment_method {
  justify-content: flex-start;
}

/* Total row: icon + label + value aligned left like other Info rows. */
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total {
  border-bottom: 1px dashed #eef1f7;
  padding-bottom: 0.65rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  justify-content: flex-start;
}

.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total::before {
  margin-right: 0;
}

/* Order detail -> custom fields (all sections: Info, Shipping, Customer, Billing, Pickup). */
.lddfw-order-screen #lddfw_order .lddfw_order_detail_custom {
  margin-top: 0.65rem;
  padding-top: 0;
  border-top: 0;
}

/* Info card rows already stack — no extra top gap. */
.lddfw-order-screen #lddfw_order .lddfw_box > .row .lddfw_order_detail_custom {
  margin-top: 0;
}

.lddfw-order-screen #lddfw_order .lddfw_order_detail_custom_field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.65rem 0;
  border-bottom: 1px dashed #eef1f7;
  font-size: 0.875rem;
  color: #475569;
}

.lddfw-order-screen #lddfw_order .lddfw_order_detail_custom_field::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2364748b' d='M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z'/></svg>");
}

.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total .amount,
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total bdi {
  color: #16a34a;
}

/* Store note alert (premium) -> soft blue callout instead of bootstrap alert. */
.lddfw-order-screen #lddfw_order .alert.alert-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.lddfw-order-screen #lddfw_order .alert.alert-info strong {
  display: block;
  color: #1e40af;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.lddfw-order-screen #lddfw_order .alert.alert-info p {
  margin: 0.15rem 0;
  color: #1e3a8a;
}

/* --- Dark mode ----------------------------------------------------------- */

.dark .lddfw-order-screen {
  background: #121212;
}

.dark .lddfw-order-screen #google_map {
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.8);
}

.dark .lddfw-order-screen #google_map_direction {
  background: #111a2e;
  border-color: #1f2a44;
  box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.65);
}

.dark .lddfw-order-screen #lddfw_total_route {
  color: #f1f5f9;
}

.dark .lddfw-order-screen #lddfw_total_route b {
  color: #60a5fa;
}

.dark .lddfw-order-screen #lddfw_delivery_counter_text {
  color: #94a3b8;
}

.dark .lddfw-order-screen #lddfw_total_route_icon #lddfw-panel-listing-toggle {
  background: linear-gradient(
    135deg,
    rgba(202, 101, 16, 0.28) 0%,
    rgba(253, 126, 20, 0.2) 100%
  ) !important;
  border-color: rgba(253, 186, 116, 0.42) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.dark
  .lddfw-order-screen
  #lddfw_total_route_icon
  #lddfw-panel-listing-toggle
  svg {
  fill: #fdba74;
}

.dark .lddfw-order-screen #lddfw_directions-panel-lightbox.lddfw_lightbox {
  background: rgba(0, 0, 0, 0.62);
}

.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .lddfw_lightbox_wrap {
  background: #111a2e;
  border: 1px solid #1f2a44;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
}

.dark .lddfw-order-screen #lddfw_directions-panel-lightbox h2 {
  color: #f1f5f9;
  border-bottom-color: #1f2a44;
}

.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .lddfw_lightbox_close {
  color: #94a3b8;
}

.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .lddfw_lightbox_close:hover,
.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .lddfw_lightbox_close:focus {
  background: #1f2a44;
  color: #f1f5f9;
}

.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-origin,
.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-destination {
  color: #cbd5e1;
}

.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-origin,
.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  #lddfw_directions-destination {
  background: rgba(30, 41, 59, 0.5);
  border-color: #1f2a44;
  color: #f1f5f9;
}

.dark .lddfw-order-screen #lddfw_directions-panel-lightbox .adp-summary {
  background: linear-gradient(
    135deg,
    rgba(202, 101, 16, 0.18) 0%,
    rgba(253, 126, 20, 0.22) 100%
  );
  border-color: rgba(202, 101, 16, 0.45);
  color: #fed7aa;
}

.dark .lddfw-order-screen #lddfw_directions-panel-lightbox .adp-legal {
  color: #64748b;
}

.dark .lddfw-order-screen #lddfw_directions-panel-lightbox .adp-directions {
  background: #0f172a;
  border-color: #1f2a44;
}

.dark .lddfw-order-screen #lddfw_directions-panel-lightbox .adp-step,
.dark .lddfw-order-screen #lddfw_directions-panel-lightbox .adp-substep {
  color: #e2e8f0;
  border-top-color: #1f2a44 !important;
}

.dark .lddfw-order-screen #lddfw_directions-panel-lightbox .adp-distance {
  color: #94a3b8;
}

/* Fix 1: Override Google Maps' inline highlight on selected direction row in
   dark mode. Google sets inline background on the <tr> AND on its <td>
   children; without overriding both, the row paints white-on-white. */
.dark .lddfw-order-screen #lddfw_directions-panel-lightbox .adp-step,
.dark .lddfw-order-screen #lddfw_directions-panel-lightbox .adp-substep,
.dark .lddfw-order-screen #lddfw_directions-panel-lightbox tr.adp-step,
.dark .lddfw-order-screen #lddfw_directions-panel-lightbox tr.adp-substep,
.dark .lddfw-order-screen #lddfw_directions-panel-lightbox .adp-step[style],
.dark .lddfw-order-screen #lddfw_directions-panel-lightbox .adp-substep[style],
.dark .lddfw-order-screen #lddfw_directions-panel-lightbox tr.adp-step[style],
.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  tr.adp-substep[style] {
  background: transparent !important;
  background-color: transparent !important;
  color: #e2e8f0 !important;
}

.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .adp-step[style*="background"],
.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .adp-substep[style*="background"],
.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  tr.adp-step[style*="background"],
.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  tr.adp-substep[style*="background"] {
  background-color: rgba(59, 130, 246, 0.28) !important;
  background: rgba(59, 130, 246, 0.28) !important;
  color: #e2e8f0 !important;
}

.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .adp-step[style*="background"]
  td,
.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  .adp-substep[style*="background"]
  td,
.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  tr.adp-step[style*="background"]
  td,
.dark
  .lddfw-order-screen
  #lddfw_directions-panel-lightbox
  tr.adp-substep[style*="background"]
  td {
  background: transparent !important;
  background-color: transparent !important;
  color: #e2e8f0 !important;
}

.dark .lddfw-order-screen #lddfw_order .lddfw_box {
  background: #111a2e;
  border-color: #1f2a44;
  box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.65);
}

.dark .lddfw-order-screen #lddfw_order .lddfw_box .lddfw_title {
  color: #f1f5f9;
  border-bottom-color: #1f2a44;
}

.dark .lddfw-order-screen #lddfw_order .lddfw_title svg.fa-info-circle {
  color: #60a5fa;
  fill: #60a5fa;
  background: rgba(59, 130, 246, 0.22);
}

.dark .lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_date,
.dark .lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_delivery_date,
.dark .lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_status,
.dark .lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_status_date,
.dark .lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_payment_method {
  color: #cbd5e1;
  border-bottom-color: #1f2a44;
}

.dark .lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total {
  color: #f1f5f9;
  border-bottom-color: #1f2a44;
}

.dark .lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total .amount,
.dark .lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total bdi {
  color: #4ade80;
}

.dark .lddfw-order-screen #lddfw_order .lddfw_order_detail_custom_field {
  color: #cbd5e1;
  border-bottom-color: #1f2a44;
}

.dark
  .lddfw-order-screen
  #lddfw_order
  .lddfw_order_detail_custom_field::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2394a3b8' d='M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z'/></svg>");
}

.dark .lddfw-order-screen #lddfw_order .alert.alert-info {
  background: #0f1e3a;
  border-color: #1e3a8a;
  color: #bfdbfe;
}

.dark .lddfw-order-screen #lddfw_order .alert.alert-info strong {
  color: #93c5fd;
}

.dark .lddfw-order-screen #lddfw_order .alert.alert-info p {
  color: #bfdbfe;
}

/* --- 3. Shipping Address card ------------------------------------------- */

/* Accent color: green (delivery / route destination). */
.lddfw-order-screen #lddfw_shipping_address.lddfw_box .lddfw_title svg {
  color: #16a34a;
  fill: #16a34a;
  background: #ecfdf5;
}

.lddfw-order-screen #lddfw_shipping_address {
  position: relative;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #334155;
}

.lddfw-order-screen #lddfw_shipping_address .lddfw_label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 0.25rem;
}

/* Shared button shell: same height, radius, padding, and type for every CTA on this page. */
.lddfw-order-screen .lddfw_map_buttons .lddfw_navigation.btn,
.lddfw-order-screen .shipping_phone.btn,
.lddfw-order-screen .billing_phone.btn,
.lddfw-order-screen #lddfw_shipping_address .row .btn.whatsapp_phone,
.lddfw-order-screen #lddfw_shipping_address .btn.whatsapp_phone,
.lddfw-order-screen #lddfw_customer .btn.whatsapp_phone,
.lddfw-order-screen #lddfw_pickup_address .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lddfw-order-btn-gap);
  min-height: var(--lddfw-order-btn-h);
  height: var(--lddfw-order-btn-h);
  padding: 0 var(--lddfw-order-btn-px);
  margin: 0;
  font-size: var(--lddfw-order-btn-fs);
  font-weight: var(--lddfw-order-btn-fw);
  border-radius: var(--lddfw-order-btn-radius);
  line-height: 1.2;
  box-sizing: border-box;
  box-shadow: none;
}

.lddfw-order-screen .lddfw_map_buttons .lddfw_navigation.btn svg,
.lddfw-order-screen .shipping_phone.btn svg,
.lddfw-order-screen .billing_phone.btn svg,
.lddfw-order-screen .whatsapp_phone.btn svg,
.lddfw-order-screen #lddfw_pickup_address .btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
  color: currentColor;
}

/* Nav buttons grid (Waze / Apple / Google navigate buttons). */
.lddfw-order-screen .lddfw_map_buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.lddfw-order-screen .lddfw_map_buttons .lddfw_navigation.btn {
  flex: 1 1 0;
  min-width: 120px;
  width: auto;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #166534;
}

.lddfw-order-screen .lddfw_map_buttons .lddfw_navigation.btn:hover,
.lddfw-order-screen .lddfw_map_buttons .lddfw_navigation.btn:focus {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}

/* Call / WhatsApp pair under Shipping. */
.lddfw-order-screen #lddfw_shipping_address .row {
  margin: 0.75rem 0 0;
  gap: 0.5rem;
}

.lddfw-order-screen #lddfw_shipping_address .row > [class*="col-"] {
  padding: 0;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.lddfw-order-screen .shipping_phone.btn,
.lddfw-order-screen .billing_phone.btn,
.lddfw-order-screen #lddfw_shipping_address .btn.whatsapp_phone,
.lddfw-order-screen #lddfw_customer .btn.whatsapp_phone {
  width: 100%;
}

.lddfw-order-screen .shipping_phone.btn,
.lddfw-order-screen .billing_phone.btn {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}

.lddfw-order-screen .shipping_phone.btn:hover,
.lddfw-order-screen .billing_phone.btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e3a8a;
}

.lddfw-order-screen .whatsapp_phone.btn {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #15803d;
}

.lddfw-order-screen .whatsapp_phone.btn:hover {
  background: #bbf7d0;
  border-color: #4ade80;
  color: #14532d;
}

/* --- 4. Pickup Address card --------------------------------------------- */

.lddfw-order-screen #lddfw_pickup_address.lddfw_box .lddfw_title svg {
  color: #7c3aed;
  fill: #7c3aed;
  background: #f5f3ff;
}

.lddfw-order-screen #lddfw_pickup_address {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #334155;
}

.lddfw-order-screen #lddfw_pickup_address .row {
  margin: 0.75rem 0 0;
  gap: 0.5rem;
}

.lddfw-order-screen #lddfw_pickup_address .row > .col {
  padding: 0;
  flex: 1 1 0;
  min-width: 0;
}

.lddfw-order-screen #lddfw_pickup_address .btn {
  width: 100%;
}

.lddfw-order-screen #lddfw_pickup_address .lddfw_navigation.btn {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #5b21b6;
}

.lddfw-order-screen #lddfw_pickup_address .lddfw_navigation.btn:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #4c1d95;
}

/* --- 5. Customer card --------------------------------------------------- */

.lddfw-order-screen #lddfw_customer {
  margin: 0;
  align-items: stretch;
}

.lddfw-order-screen .lddfw_box:has(> #lddfw_customer) .lddfw_title svg,
.lddfw-order-screen #lddfw_customer .lddfw_title svg {
  color: #0ea5e9;
  fill: #0ea5e9;
  background: #e0f2fe;
}

.lddfw-order-screen #lddfw_customer .lddfw_label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #64748b;
}

/* Customer Call / WhatsApp button pair - use a two-column grid so the two
   bootstrap col-6 siblings always sit side-by-side without breaking out of
   the row or shrinking to zero width. */
.lddfw-order-screen #lddfw_customer > [class*="col-"]:has(> .btn) {
  margin-top: 0.75rem;
}

.lddfw-order-screen #lddfw_customer > .col-6.mt-2 {
  flex: 1 1 50%;
  max-width: 50%;
}

.lddfw-order-screen #lddfw_customer > .col-12:has(> .btn) {
  flex: 1 1 100%;
  max-width: 100%;
}

.lddfw-order-screen #lddfw_customer > .col-6.mt-2 .btn,
.lddfw-order-screen #lddfw_customer > .col-12 .btn.billing_phone,
.lddfw-order-screen #lddfw_customer > .col-12 .btn.whatsapp_phone {
  width: 100%;
}

/* Single card shell - drop Bootstrap col gutters on full-width cols only.
   Keep horizontal inset on `.col-6` pairs so Call / WhatsApp keep a gap. */
.lddfw-order-screen
  .lddfw_box:has(> #lddfw_customer)
  > #lddfw_customer.row
  > [class*="col-"]:not(.col-6) {
  padding-left: 0;
  padding-right: 0;
}

.lddfw-order-screen
  .lddfw_box:has(> #lddfw_customer)
  > #lddfw_customer.row
  > .col-6.mt-2 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

/* --- 6. Customer Note callout ------------------------------------------- */

.lddfw-order-screen
  #lddfw_order
  .alert.alert-info:has(> span > .fa-sticky-note),
.lddfw-order-screen #lddfw_order .alert.alert-info:has(.fa-sticky-note) {
  background: #fefce8;
  border: 1px solid #fde68a;
  color: #713f12;
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.lddfw-order-screen #lddfw_order .alert.alert-info:has(.fa-sticky-note) > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #854d0e;
  margin-bottom: 0.25rem;
}

.lddfw-order-screen #lddfw_order .alert.alert-info:has(.fa-sticky-note) svg {
  width: 16px;
  height: 16px;
  color: #a16207;
  fill: #a16207;
}

.lddfw-order-screen #lddfw_order .alert.alert-info:has(.fa-sticky-note) p {
  margin: 0.25rem 0 0;
  color: #713f12;
  line-height: 1.5;
}

/* --- 7. Billing Address card -------------------------------------------- */

/* The billing-address card is the second .lddfw_box with an address-card
   icon in its title. We can't select it by id (no id), but we can style
   its title SVG accent uniformly with a sibling rule. Instead we target it
   positionally: the .lddfw_box that contains an address-card title. */

.lddfw-order-screen #lddfw_order .lddfw_box .lddfw_title svg.fa-address-card {
  color: #f97316;
  fill: #f97316;
  background: #ffedd5;
}

/* --- 8. Products card --------------------------------------------------- */

/* The products card contains a shopping-cart icon. */
.lddfw-order-screen #lddfw_order .lddfw_box .lddfw_title svg.fa-shopping-cart {
  color: #db2777;
  fill: #db2777;
  background: #fce7f3;
}

.lddfw-order-screen .lddfw_order_products_tbl {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
}

.lddfw-order-screen .lddfw_order_products_tbl tr:first-child th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  padding: 0 0 0.5rem;
  border: 0;
  background: transparent;
}

.lddfw-order-screen
  .lddfw_order_products_tbl
  tr:first-child
  th.lddfw_total_col {
  text-align: right;
}

.lddfw-order-screen .lddfw_order_products_tbl tr.lddfw_items {
  border-top: 1px solid #eef1f7;
}

.lddfw-order-screen .lddfw_order_products_tbl tr.lddfw_items td {
  padding: 0.75rem 0.25rem 0.75rem 0;
  vertical-align: top;
  border: 0;
  font-size: 0.875rem;
  color: #334155;
}

.lddfw-order-screen
  .lddfw_order_products_tbl
  tr.lddfw_items
  td.lddfw_total_col {
  font-weight: 700;
  color: #0f172a;
  text-align: right;
  white-space: nowrap;
  padding-right: 0;
  padding-left: 0.5rem;
  vertical-align: middle;
}

.lddfw-order-screen .lddfw_product_line {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.45;
}

.lddfw-order-screen .lddfw_product_line img {
  width: 56px;
  height: 56px;
  border-radius: 0.55rem;
  object-fit: cover;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.lddfw-order-screen .lddfw_product_line .item-variation {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.45;
}

/* Totals summary table below products. */
.lddfw-order-screen .lddfw_order_total_tbl {
  width: 100%;
  margin: 1rem 0 0;
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 1rem;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 8px 20px -18px rgba(15, 23, 42, 0.35);
  border-collapse: separate;
  border-spacing: 0;
}

.lddfw-order-screen .lddfw_order_total_tbl tr th {
  padding: 0.5rem 0;
  font-weight: 500;
  color: #64748b;
  border: 0;
  background: transparent;
  font-size: 0.85rem;
  text-align: left;
}

.lddfw-order-screen .lddfw_order_total_tbl tr td.lddfw_total_col {
  padding: 0.5rem 0;
  text-align: right;
  font-weight: 600;
  color: #0f172a;
  border: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}

.lddfw-order-screen .lddfw_order_total_tbl tr:last-child th,
.lddfw-order-screen .lddfw_order_total_tbl tr:last-child td {
  padding-top: 0.75rem;
  border-top: 1px solid #eef1f7;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.lddfw-order-screen .lddfw_order_total_tbl tr:last-child td.lddfw_total_col {
  color: #16a34a;
}

.lddfw-order-screen .lddfw_order_total_tbl tr[style*="#ca0303"] {
  color: #dc2626 !important;
}

.lddfw-order-screen
  .lddfw_order_total_tbl
  tr[style*="#ca0303"]
  td.lddfw_total_col {
  color: #dc2626 !important;
}

/* --- 9. Driver card ----------------------------------------------------- */

/* The driver card uses a user-outline icon. It is the last .lddfw_box in
   #lddfw_order - give it a bit more breathing room on top. */
.lddfw-order-screen
  #lddfw_order
  .lddfw_box:has(.lddfw_title svg.fa-user.fa-w-14) {
  margin-top: 1.25rem;
}

.lddfw-order-screen #lddfw_order .lddfw_box .lddfw_title svg.fa-user.fa-w-14 {
  color: #0891b2;
  fill: #0891b2;
  background: #ecfeff;
}

.lddfw-order-screen #lddfw_order .lddfw_box .lddfw_label {
  color: #64748b;
  font-size: 0.85rem;
}

/* Signature / Photos inside Driver card. */
.lddfw-order-screen #lddfw_order .lddfw_box img[src*="signature"],
.lddfw-order-screen #lddfw_order .lddfw_box img[alt*="Delivery"] {
  display: block;
  max-width: 100%;
  margin: 0.5rem auto !important;
  border-radius: 0.7rem;
  border: 1px solid #e6eaf2;
  background: #f8fafc;
  padding: 0.25rem;
}

/* --- 10. Sticky action footer -------------------------------------------
   Same strip + buttons as claim orders (`.lddfw_footer_buttons.lddfw-claim-footer`,
   `#lddfw_claim_orders_button` ~7607). */

.lddfw-order-screen .lddfw_footer_buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #e9ecef;
  box-shadow: 0 -4px 16px rgba(1, 22, 39, 0.06);
}

.lddfw-order-screen .lddfw_footer_buttons .container {
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
  max-width: none;
  width: 100%;
}

.lddfw-order-screen .lddfw_footer_buttons .row {
  margin: 0 !important;
  gap: 0.5rem;
  flex-wrap: nowrap;
  width: 100%;
}

.lddfw-order-screen .lddfw_footer_buttons .row > [class*="col"] {
  padding: 0 !important;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  margin: 0 !important;
}

.lddfw-order-screen .lddfw_footer_buttons .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 1rem;
  padding: 0.75rem 1rem !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-image: none !important;
  box-shadow: none !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.lddfw-order-screen .lddfw_footer_buttons .btn svg {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35rem;
  flex-shrink: 0;
  fill: currentColor;
}

.lddfw-order-screen .lddfw_footer_buttons .btn.btn-primary {
  background-color: #0d6efd !important;
  border: 1px solid #0d6efd !important;
  color: #fff !important;
}

.lddfw-order-screen .lddfw_footer_buttons .btn.btn-primary:hover,
.lddfw-order-screen .lddfw_footer_buttons .btn.btn-primary:focus {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2) !important;
  color: #fff !important;
}

.lddfw-order-screen .lddfw_footer_buttons .btn.btn-success {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
  background-image: linear-gradient(
    135deg,
    #16a34a 0%,
    #22c55e 100%
  ) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3) !important;
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease !important;
}

.lddfw-order-screen .lddfw_footer_buttons .btn.btn-success:hover,
.lddfw-order-screen .lddfw_footer_buttons .btn.btn-success:focus {
  filter: brightness(1.07) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.38) !important;
  color: #fff !important;
}

.lddfw-order-screen .lddfw_footer_buttons .btn.btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  background-image: linear-gradient(
    135deg,
    #dc2626 0%,
    #ef4444 100%
  ) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28) !important;
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease !important;
}

.lddfw-order-screen .lddfw_footer_buttons .btn.btn-danger:hover,
.lddfw-order-screen .lddfw_footer_buttons .btn.btn-danger:focus {
  filter: brightness(1.07) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.36) !important;
  color: #fff !important;
}

/* Delivered / Not Delivered buttons - scoped by ID so the gradient styles
   land regardless of what ancestor class is on the page wrapper. */
#lddfw_delivered_screen_btn.btn {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
  background-image: linear-gradient(
    135deg,
    #15803d 0%,
    #16a34a 100%
  ) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.28) !important;
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_delivered_screen_btn.btn:hover,
#lddfw_delivered_screen_btn.btn:focus {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.35) !important;
  color: #fff !important;
}

#lddfw_failed_delivered_screen_btn.btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  background-image: linear-gradient(
    135deg,
    #dc2626 0%,
    #ef4444 100%
  ) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28) !important;
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_failed_delivered_screen_btn.btn:hover,
#lddfw_failed_delivered_screen_btn.btn:focus {
  filter: brightness(1.07) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.36) !important;
  color: #fff !important;
}

.lddfw-order-screen .lddfw_footer_buttons .btn.btn-secondary {
  background-color: #fff !important;
  border: 1px solid #dee2e6 !important;
  color: #212529 !important;
}

.lddfw-order-screen .lddfw_footer_buttons .btn.btn-secondary:hover,
.lddfw-order-screen .lddfw_footer_buttons .btn.btn-secondary:focus {
  background-color: #f8f9fa !important;
  border-color: #ced4da !important;
  color: #212529 !important;
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.15) !important;
}

/* Assigned-driver footer - Unassign + Out for delivery.
   ID-scoped so they land regardless of ancestor class. */

/* Unassign - soft slate secondary */
#lddfw_order_unassign_button,
#lddfw_order_unassign_button_loading {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: none !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_order_unassign_button:hover,
#lddfw_order_unassign_button:focus {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

/* Out for delivery - deep green gradient */
#lddfw_order_out_for_delivery_button,
#lddfw_order_out_for_delivery_button_loading {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
  background-image: linear-gradient(
    135deg,
    #15803d 0%,
    #16a34a 100%
  ) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.28) !important;
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_order_out_for_delivery_button:hover,
#lddfw_order_out_for_delivery_button:focus {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.35) !important;
  color: #fff !important;
}

#lddfw_order_out_for_delivery_button .svg-inline--fa {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35rem;
  fill: currentColor;
}

@media (min-width: 900px) {
  .lddfw-order-screen .lddfw_footer_buttons {
    position: static;
    padding: 0.75rem 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid #e9ecef;
    box-shadow: none;
    margin-top: 1.5rem;
  }

  .lddfw-order-screen {
    padding-bottom: 2rem;
  }
}

/* Start-delivery notice strip. */
.lddfw-order-screen #lddfw_start_delivery_notice {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #64748b;
  text-align: center;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Dark mode for sections 3-10 ---------------------------------------- */

.dark .lddfw-order-screen #lddfw_shipping_address,
.dark .lddfw-order-screen #lddfw_pickup_address {
  color: #cbd5e1;
}

.dark .lddfw-order-screen #lddfw_shipping_address .lddfw_label,
.dark .lddfw-order-screen #lddfw_customer .lddfw_label,
.dark .lddfw-order-screen #lddfw_order .lddfw_box .lddfw_label {
  color: #94a3b8;
}

.dark .lddfw-order-screen #lddfw_shipping_address.lddfw_box .lddfw_title svg {
  color: #4ade80;
  fill: #4ade80;
  background: rgba(22, 101, 52, 0.28);
}

.dark .lddfw-order-screen #lddfw_pickup_address.lddfw_box .lddfw_title svg {
  color: #a78bfa;
  fill: #a78bfa;
  background: rgba(91, 33, 182, 0.28);
}

.dark .lddfw-order-screen #lddfw_customer .lddfw_title svg,
.dark .lddfw-order-screen .lddfw_box:has(> #lddfw_customer) .lddfw_title svg {
  color: #38bdf8;
  fill: #38bdf8;
  background: rgba(14, 165, 233, 0.2);
}

.dark
  .lddfw-order-screen
  #lddfw_order
  .lddfw_box
  .lddfw_title
  svg.fa-address-card {
  color: #fb923c;
  fill: #fb923c;
  background: rgba(234, 88, 12, 0.22);
}

.dark
  .lddfw-order-screen
  #lddfw_order
  .lddfw_box
  .lddfw_title
  svg.fa-shopping-cart {
  color: #f472b6;
  fill: #f472b6;
  background: rgba(219, 39, 119, 0.2);
}

.dark
  .lddfw-order-screen
  #lddfw_order
  .lddfw_box
  .lddfw_title
  svg.fa-user.fa-w-14 {
  color: #22d3ee;
  fill: #22d3ee;
  background: rgba(8, 145, 178, 0.22);
}

.dark .lddfw-order-screen .lddfw_map_buttons .lddfw_navigation.btn {
  background: rgba(22, 101, 52, 0.2);
  border-color: #166534;
  color: #86efac;
}

.dark .lddfw-order-screen .lddfw_map_buttons .lddfw_navigation.btn:hover {
  background: rgba(22, 101, 52, 0.35);
  border-color: #22c55e;
  color: #bbf7d0;
}

.dark .lddfw-order-screen #lddfw_pickup_address .lddfw_navigation.btn {
  background: rgba(91, 33, 182, 0.25);
  border-color: #5b21b6;
  color: #c4b5fd;
}

.dark .lddfw-order-screen #lddfw_pickup_address .lddfw_navigation.btn:hover {
  background: rgba(91, 33, 182, 0.4);
  border-color: #7c3aed;
  color: #ddd6fe;
}

.dark .lddfw-order-screen .shipping_phone.btn,
.dark .lddfw-order-screen .billing_phone.btn {
  background: rgba(29, 78, 216, 0.2);
  border-color: #1e3a8a;
  color: #93c5fd;
}

.dark .lddfw-order-screen .shipping_phone.btn:hover,
.dark .lddfw-order-screen .billing_phone.btn:hover {
  background: rgba(29, 78, 216, 0.35);
  border-color: #2563eb;
  color: #bfdbfe;
}

.dark .lddfw-order-screen .whatsapp_phone.btn {
  background: rgba(21, 128, 61, 0.25);
  border-color: #166534;
  color: #86efac;
}

.dark .lddfw-order-screen .whatsapp_phone.btn:hover {
  background: rgba(21, 128, 61, 0.4);
  border-color: #22c55e;
  color: #bbf7d0;
}

.dark .lddfw-order-screen #lddfw_order .alert.alert-info:has(.fa-sticky-note) {
  background: #1c1917;
  border-color: #78350f;
  color: #fde68a;
}

.dark
  .lddfw-order-screen
  #lddfw_order
  .alert.alert-info:has(.fa-sticky-note)
  > span {
  color: #fcd34d;
}

.dark
  .lddfw-order-screen
  #lddfw_order
  .alert.alert-info:has(.fa-sticky-note)
  svg {
  color: #fbbf24;
  fill: #fbbf24;
}

.dark
  .lddfw-order-screen
  #lddfw_order
  .alert.alert-info:has(.fa-sticky-note)
  p {
  color: #fde68a;
}

.dark .lddfw-order-screen .lddfw_order_products_tbl tr:first-child th {
  color: #64748b;
}

.dark
  .lddfw-order-screen
  .lddfw_order_products_tbl
  tr:first-child
  th.lddfw_total_col {
  text-align: right;
}

.dark .lddfw-order-screen .lddfw_order_products_tbl tr.lddfw_items {
  border-top-color: #1f2a44;
}

.dark .lddfw-order-screen .lddfw_order_products_tbl tr.lddfw_items td {
  color: #cbd5e1;
}

.dark
  .lddfw-order-screen
  .lddfw_order_products_tbl
  tr.lddfw_items
  td.lddfw_total_col {
  color: #f1f5f9;
}

.dark .lddfw-order-screen .lddfw_product_line img {
  background: #0f172a;
  border-color: #1f2a44;
}

.dark .lddfw-order-screen .lddfw_product_line .item-variation {
  color: #94a3b8;
}

.dark .lddfw-order-screen .lddfw_order_total_tbl {
  background: #111a2e;
  border-color: #1f2a44;
  box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.65);
}

.dark .lddfw-order-screen .lddfw_order_total_tbl tr th {
  color: #94a3b8;
}

.dark .lddfw-order-screen .lddfw_order_total_tbl tr td.lddfw_total_col {
  color: #f1f5f9;
}

.dark .lddfw-order-screen .lddfw_order_total_tbl tr:last-child th,
.dark .lddfw-order-screen .lddfw_order_total_tbl tr:last-child td {
  border-top-color: #1f2a44;
  color: #f1f5f9;
}

.dark
  .lddfw-order-screen
  .lddfw_order_total_tbl
  tr:last-child
  td.lddfw_total_col {
  color: #4ade80;
}

.dark .lddfw-order-screen #lddfw_order .lddfw_box img[src*="signature"],
.dark .lddfw-order-screen #lddfw_order .lddfw_box img[alt*="Delivery"] {
  background: #0f172a;
  border-color: #1f2a44;
}

.dark .lddfw-order-screen .lddfw_footer_buttons {
  background: rgba(15, 23, 42, 0.97);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

.dark .lddfw-order-screen .lddfw_footer_buttons .btn.btn-primary:hover,
.dark .lddfw-order-screen .lddfw_footer_buttons .btn.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
}

.dark .lddfw-order-screen .lddfw_footer_buttons .btn.btn-success:hover,
.dark .lddfw-order-screen .lddfw_footer_buttons .btn.btn-success:focus {
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.32) !important;
}

.dark .lddfw-order-screen .lddfw_footer_buttons .btn.btn-danger:hover,
.dark .lddfw-order-screen .lddfw_footer_buttons .btn.btn-danger:focus {
  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.32) !important;
}

.dark .lddfw-order-screen .lddfw_footer_buttons .btn.btn-secondary {
  background-color: #111a2e !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
}

.dark .lddfw-order-screen .lddfw_footer_buttons .btn.btn-secondary:hover,
.dark .lddfw-order-screen .lddfw_footer_buttons .btn.btn-secondary:focus {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2) !important;
}

.dark #lddfw_order_unassign_button,
.dark #lddfw_order_unassign_button_loading {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

.dark #lddfw_order_unassign_button:hover,
.dark #lddfw_order_unassign_button:focus {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.dark #lddfw_order_out_for_delivery_button:hover,
.dark #lddfw_order_out_for_delivery_button:focus {
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.32) !important;
}

@media (min-width: 900px) {
  .dark .lddfw-order-screen .lddfw_footer_buttons {
    background: transparent;
    border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }
}

.dark .lddfw-order-screen #lddfw_start_delivery_notice {
  color: #94a3b8;
}

/* =========================================================
   Delivery lightbox (#lddfw_delivery_screen) - delivered / failed
   note forms, proof tabs, Done/Cancel (order-screen tokens)
   ========================================================= */

#lddfw_delivery_screen.lddfw_lightbox {
  background: #f5f7fb;
}

#lddfw_delivery_screen .lddfw_lightbox_wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#lddfw_delivery_screen .lddfw_lightbox_wrap > .container {
  flex: 1 1 auto;
}

/* Fixed strip headers (Signature / Photos / Note ...) */
#lddfw_delivery_screen .delivery_header {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

#lddfw_delivery_screen .delivery_header h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Note screens: delivered + failed (shared .lddfw_delivery_form.screen_wrap) */
#lddfw_delivery_screen .lddfw_delivery_form.screen_wrap > .row {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 1.25rem;
}

/* Zero out Bootstrap's col-12 side padding inside these rows - the row's
   own margin-left/-right already sit at 0 so there is nothing to cancel,
   and keeping the col gutter would just recreate the double-inset. */
#lddfw_delivery_screen .lddfw_delivery_form.screen_wrap > .row > .col-12 {
  padding-left: 0;
  padding-right: 0;
}

#lddfw_delivery_screen .lddfw_delivery_form.screen_wrap > .row > .col-12 > p {
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

#lddfw_delivery_screen .lddfw_delivery_form .custom-control.custom-radio {
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 0.5rem;
  padding: 0;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_delivery_screen .lddfw_delivery_form .custom-control.custom-radio:hover {
  border-color: #cbd5e1;
}

#lddfw_delivery_screen
  .lddfw_delivery_form
  .custom-control.custom-radio:has(.custom-control-input:checked) {
  border-color: #0d6efd;
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.15);
}

#lddfw_delivery_screen .lddfw_delivery_form .custom-control-label {
  padding: 0.85rem 1rem 0.85rem 2.65rem;
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.4;
}

#lddfw_delivery_screen
  .lddfw_delivery_form
  .custom-radio
  .custom-control-label::before {
  left: 1rem;
  top: 0.95rem;
}

#lddfw_delivery_screen
  .lddfw_delivery_form
  .custom-radio
  .custom-control-label::after {
  left: 1rem;
  top: 0.95rem;
}

#lddfw_delivery_screen
  .lddfw_delivery_form
  .custom-control-input:focus
  ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}

#lddfw_delivery_screen #lddfw_driver_delivered_note,
#lddfw_delivery_screen #lddfw_driver_note {
  width: 100%;
  min-height: 120px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 0.75rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #0f172a;
  background: #fff;
  resize: vertical;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_delivery_screen #lddfw_driver_delivered_note:focus,
#lddfw_delivery_screen #lddfw_driver_note:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
  outline: none;
}

#lddfw_delivery_screen #lddfw_driver_delivered_note_wrap,
#lddfw_delivery_screen #lddfw_driver_note_wrap {
  margin-top: 0.75rem;
}

/* Proof mode tabs (Note / Signature / Photos) */
#lddfw_delivery_screen .delivery_proof_bar .row {
  margin: 0;
  align-items: stretch;
}

#lddfw_delivery_screen .delivery_proof_bar [class*="col-"] {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

#lddfw_delivery_screen .delivery_proof_bar a {
  border-radius: 10px;
  padding: 0.55rem 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  line-height: 1.25;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

#lddfw_delivery_screen .delivery_proof_bar a svg {
  width: 1.35rem;
  height: 1.35rem;
  margin-bottom: 0.2rem;
  opacity: 0.85;
}

#lddfw_delivery_screen .delivery_proof_bar a.active {
  color: #0d6efd;
  background: #eff6ff;
  border-color: #93c5fd;
}

#lddfw_delivery_screen .delivery_proof_bar a.active svg {
  opacity: 1;
  color: #0d6efd;
}

/* Sticky footer inside delivery sheet */
#lddfw_delivery_screen .lddfw_footer_buttons.delivery_proof_buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #e9ecef;
  box-shadow: 0 -4px 16px rgba(1, 22, 39, 0.06);
}

#lddfw_delivery_screen .delivery_proof_buttons .container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

#lddfw_delivery_screen .delivery_proof_buttons .row {
  row-gap: 0.5rem;
}

#lddfw_delivery_screen .delivery_proof_buttons .row > [class*="col"] {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

#lddfw_delivery_screen .delivery_proof_buttons .btn.lddfw_btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem;
  border: 0 !important;
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* Default primary (no delivery attribute yet) */
#lddfw_delivery_screen .delivery_proof_buttons .btn-primary.lddfw_btn {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
  background-image: linear-gradient(
    135deg,
    #1d4ed8 0%,
    #3b82f6 100%
  ) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.28) !important;
}

#lddfw_delivery_screen .delivery_proof_buttons .btn-primary.lddfw_btn:hover,
#lddfw_delivery_screen .delivery_proof_buttons .btn-primary.lddfw_btn:focus {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35) !important;
  color: #fff !important;
}

/* Cancel button */
#lddfw_delivery_screen .delivery_proof_buttons .btn-secondary.lddfw_btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: none !important;
}

#lddfw_delivery_screen .delivery_proof_buttons .btn-secondary.lddfw_btn:hover,
#lddfw_delivery_screen .delivery_proof_buttons .btn-secondary.lddfw_btn:focus {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

/* ---------- Dark ---------- */
.dark #lddfw_delivery_screen.lddfw_lightbox {
  background: #0f172a;
}

.dark #lddfw_delivery_screen .delivery_header {
  background: rgba(15, 23, 42, 0.96);
  border-bottom-color: #1f2a44;
  box-shadow: none;
}

.dark #lddfw_delivery_screen .delivery_header h4 {
  color: #f1f5f9;
}

.dark
  #lddfw_delivery_screen
  .lddfw_delivery_form.screen_wrap
  > .row
  > .col-12
  > p {
  color: #94a3b8;
}

.dark #lddfw_delivery_screen .lddfw_delivery_form .custom-control.custom-radio {
  background: #111a2e;
  border-color: #1f2a44;
}

.dark
  #lddfw_delivery_screen
  .lddfw_delivery_form
  .custom-control.custom-radio:hover {
  border-color: #334155;
}

.dark
  #lddfw_delivery_screen
  .lddfw_delivery_form
  .custom-control.custom-radio:has(.custom-control-input:checked) {
  border-color: #3b82f6;
  background: rgba(30, 58, 138, 0.35);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}

.dark #lddfw_delivery_screen .lddfw_delivery_form .custom-control-label {
  color: #e2e8f0;
}

.dark #lddfw_delivery_screen #lddfw_driver_delivered_note,
.dark #lddfw_delivery_screen #lddfw_driver_note {
  background: #111a2e;
  border-color: #334155;
  color: #f1f5f9;
}

.dark #lddfw_delivery_screen #lddfw_driver_delivered_note:focus,
.dark #lddfw_delivery_screen #lddfw_driver_note:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.dark #lddfw_delivery_screen .delivery_proof_bar a {
  background: #111a2e;
  border-color: #334155;
  color: #94a3b8;
}

.dark #lddfw_delivery_screen .delivery_proof_bar a.active {
  color: #93c5fd;
  background: rgba(30, 58, 138, 0.4);
  border-color: rgba(59, 130, 246, 0.45);
}

.dark #lddfw_delivery_screen .delivery_proof_bar a.active svg {
  color: #93c5fd;
}

.dark #lddfw_delivery_screen .lddfw_footer_buttons.delivery_proof_buttons {
  background: rgba(15, 23, 42, 0.97);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

.dark
  #lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn:hover,
.dark
  #lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
}

.dark #lddfw_delivery_screen .delivery_proof_buttons .btn-secondary.lddfw_btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

.dark
  #lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-secondary.lddfw_btn:hover,
.dark
  #lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-secondary.lddfw_btn:focus {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ---------- Signature step (#lddfw_delivery_signature) ---------- */

#lddfw_delivery_screen #lddfw_delivery_signature.lddfw_signature_wrap > .row {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 1.25rem;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature.lddfw_signature_wrap
  > .row
  > .col-12 {
  padding-left: 0;
  padding-right: 0;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  > .row
  > .col-12
  > p:first-of-type {
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

#lddfw_delivery_screen #lddfw_delivery_signature .form-group {
  margin-bottom: 0.85rem;
}

#lddfw_delivery_screen #lddfw_delivery_signature .signature_name.form-control,
#lddfw_delivery_screen #lddfw_delivery_signature #signature_name {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  color: #0f172a;
  background: #fff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature_name.form-control:focus,
#lddfw_delivery_screen #lddfw_delivery_signature #signature_name:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
  outline: none;
}

#lddfw_delivery_screen #lddfw_delivery_signature .delivery_header .container,
#lddfw_delivery_screen #lddfw_delivery_photo .delivery_header .container {
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
  max-width: 100%;
}

#lddfw_delivery_screen #lddfw_delivery_signature .delivery_header .row {
  align-items: center;
  min-height: 2.75rem;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear:hover,
#lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear:focus {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #0f172a;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.5rem 0.85rem !important;
  font-size: 0.875rem !important;
  border: 1px solid #dee2e6 !important;
  background: #fff !important;
  color: #212529 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn:hover,
#lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn:focus {
  background: #f8f9fa !important;
  border-color: #ced4da !important;
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.12) !important;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn
  svg {
  width: 0.85em;
  height: 0.85em;
}

#lddfw_delivery_screen #lddfw_delivery_signature #signature-image {
  margin-top: 1rem;
  padding: 0.85rem;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}

#lddfw_delivery_screen #lddfw_delivery_signature #signature-image img {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

/* Full-screen signature pad (.signature-wrapper) - sheet + centered canvas “card” */
#lddfw_delivery_screen #lddfw_delivery_signature .signature-wrapper {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: 100px;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background: linear-gradient(165deg, #eef2f9 0%, #e4e9f2 42%, #d8dfea 100%);
  overscroll-behavior: none;
  touch-action: manipulation;
  z-index: 10050;
  isolation: isolate;
}

#lddfw_delivery_screen #lddfw_delivery_signature .signature-wrapper::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 110% 65% at 50% -15%,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 52%
  );
  z-index: 0;
}

#lddfw_delivery_screen #lddfw_delivery_signature .signature-wrapper > * {
  position: relative;
  z-index: 1;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header {
  flex: 0 0 auto;
  height: auto;
  min-height: 3.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  /* Wrapper already applies horizontal safe-area; use content inset only */
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 0;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header.container {
  max-width: 100%;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header
  .row {
  align-items: center;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header
  .col-6:first-child {
  font-weight: 600;
  font-size: 0.95rem;
  color: #0f172a;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header
  .signature-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header
  .signature-clear:hover,
#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header
  .signature-clear:focus {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #0f172a;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-done.btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.875rem !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  box-shadow: none !important;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-done.btn:hover,
#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-done.btn:focus {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2) !important;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  .signature-pad {
  flex: 1 1 auto;
  min-height: 11rem;
  min-width: 0;
  width: calc(100% - 1.5rem) !important;
  max-width: 42rem;
  margin: 0.65rem auto 0;
  height: auto !important;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 14px 44px -14px rgba(15, 23, 42, 0.2);
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-line {
  border-bottom-color: #94a3b8;
  z-index: 2;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-line
  svg {
  color: #64748b;
  opacity: 0.75;
}

/* Dark - main signature step */
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  > .row
  > .col-12
  > p:first-of-type {
  color: #94a3b8;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature_name.form-control,
.dark #lddfw_delivery_screen #lddfw_delivery_signature #signature_name {
  background: #111a2e;
  border-color: #334155;
  color: #f1f5f9;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature_name.form-control:focus,
.dark #lddfw_delivery_screen #lddfw_delivery_signature #signature_name:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear {
  background: #111a2e;
  border-color: #334155;
  color: #94a3b8;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear:hover,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear:focus {
  background: #1e293b;
  border-color: #475569;
  color: #f1f5f9;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn {
  background: #111a2e !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn:hover,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn:focus {
  background: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15) !important;
}

.dark #lddfw_delivery_screen #lddfw_delivery_signature #signature-image {
  background: #111a2e;
  border-color: #334155;
}

.dark #lddfw_delivery_screen #lddfw_delivery_signature .signature-wrapper {
  background: linear-gradient(165deg, #0f172a 0%, #0b1222 45%, #020617 100%);
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper::before {
  background: radial-gradient(
    ellipse 110% 60% at 50% -10%,
    rgba(59, 130, 246, 0.14) 0%,
    transparent 55%
  );
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header {
  background: rgba(15, 23, 42, 0.96);
  border-bottom-color: #1f2a44;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header
  .col-6:first-child {
  color: #f1f5f9;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header
  .signature-clear {
  background: #111a2e;
  border-color: #334155;
  color: #94a3b8;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header
  .signature-clear:hover,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-header
  .signature-clear:focus {
  background: #1e293b;
  border-color: #475569;
  color: #f1f5f9;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  .signature-pad {
  background: #fff;
  border-color: #334155;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 48px -18px rgba(0, 0, 0, 0.65);
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-done.btn:hover,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-done.btn:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-line {
  border-bottom-color: #64748b;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .signature-wrapper
  #signature-line
  svg {
  color: #94a3b8;
  opacity: 0.85;
}

/* ---------- Photos step (#lddfw_delivery_photo) ---------- */

#lddfw_delivery_screen #lddfw_delivery_photo.lddfw_photo_wrap {
  position: relative;
}

#lddfw_delivery_screen #lddfw_delivery_photo > .row {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 1.25rem;
}

#lddfw_delivery_screen #lddfw_delivery_photo > .row > .col-12 {
  padding-left: 0;
  padding-right: 0;
}

#lddfw_delivery_screen #lddfw_delivery_photo .delivery_header .row {
  align-items: center;
  min-height: 2.75rem;
}

#lddfw_delivery_screen #lddfw_delivery_photo .delivery_header h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.02em;
}

#lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

#lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear:hover,
#lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear:focus {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #0f172a;
}

#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file {
  margin-bottom: 0;
}

#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label {
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.5rem 0.85rem !important;
  font-size: 0.875rem !important;
  border: 1px solid #dee2e6 !important;
  background: #fff !important;
  color: #212529 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: auto !important;
  line-height: 1.2 !important;
}

#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label:hover,
#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label:focus {
  background: #f8f9fa !important;
  border-color: #ced4da !important;
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.12) !important;
}

#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label
  svg {
  width: 0.85em;
  height: 0.85em;
}

#lddfw_delivery_screen #lddfw_delivery_photo #delivery_image_wrap {
  width: 100%;
  height: auto;
  min-height: 12rem;
  padding: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-content: flex-start;
}

#lddfw_delivery_screen #lddfw_delivery_photo .lddfw_image_item {
  width: 7.5rem;
  height: 7.5rem;
  margin-right: 0;
  margin-bottom: 0;
  border-radius: 12px;
  border-color: #e2e8f0;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 4px 14px -4px rgba(15, 23, 42, 0.12);
}

#lddfw_delivery_screen #lddfw_delivery_photo .lddfw_delete_image {
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background-color: rgba(15, 23, 42, 0.72);
}

#lddfw_delivery_screen #lddfw_delivery_photo .lddfw_delete_image:hover {
  background-color: rgba(220, 53, 69, 0.95);
}

/* ---------- Dark - Photos step ---------- */

.dark #lddfw_delivery_screen #lddfw_delivery_photo .delivery_header h4 {
  color: #f1f5f9;
}

.dark #lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear {
  background: #111a2e;
  border-color: #334155;
  color: #94a3b8;
}

.dark #lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear:hover,
.dark #lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear:focus {
  background: #1e293b;
  border-color: #475569;
  color: #f1f5f9;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label {
  background: #111a2e !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label:hover,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label:focus {
  background: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15) !important;
}

.dark #lddfw_delivery_screen #lddfw_delivery_photo #delivery_image_wrap {
  background: #111a2e;
  border-color: #334155;
}

.dark #lddfw_delivery_screen #lddfw_delivery_photo .lddfw_image_item {
  border-color: #334155;
  background: #0f172a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ---------- Delivery PoD confirmations (#lddfw_delivered_confirmation, failed) ---------- */

/* Base: scrim + padding only - never force display here (breaks inline display:none). */
#lddfw_delivered_confirmation.lddfw_lightbox,
#lddfw_failed_delivery_confirmation.lddfw_lightbox {
  padding: 1rem;
  background: rgba(15, 23, 42, 0.58);
}

/* Visible only: center card (when style no longer contains display:none - after .show()). */
#lddfw_delivered_confirmation.lddfw_lightbox:not([style*="display:none"]):not(
    [style*="display: none"]
  ),
#lddfw_failed_delivery_confirmation.lddfw_lightbox:not(
    [style*="display:none"]
  ):not([style*="display: none"]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#lddfw_delivered_confirmation .lddfw_lightbox_wrap,
#lddfw_failed_delivery_confirmation .lddfw_lightbox_wrap {
  display: block;
  flex: 0 1 auto;
  height: auto;
  width: min(100%, 22rem);
  max-width: 22rem;
  margin: 0;
  position: relative;
  top: auto !important;
  padding: 0;
}

#lddfw_delivered_confirmation .lddfw_lightbox_wrap .container,
#lddfw_failed_delivery_confirmation .lddfw_lightbox_wrap .container {
  max-width: none;
  padding: 1.5rem 1.25rem 1.35rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 24px 48px -12px rgba(15, 23, 42, 0.28);
}

#lddfw_delivered_confirmation.lddfw_confirmation h2,
#lddfw_failed_delivery_confirmation.lddfw_confirmation h2 {
  margin-bottom: 1.35rem !important;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

#lddfw_delivered_confirmation .row,
#lddfw_failed_delivery_confirmation .row {
  margin-left: -0.35rem;
  margin-right: -0.35rem;
  row-gap: 0.65rem;
}

#lddfw_delivered_confirmation .row > [class*="col"],
#lddfw_failed_delivery_confirmation .row > [class*="col"] {
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

#lddfw_delivered_confirmation .lddfw_ok.btn,
#lddfw_delivered_confirmation .lddfw_cancel.btn,
#lddfw_failed_delivery_confirmation .lddfw_ok.btn,
#lddfw_failed_delivery_confirmation .lddfw_cancel.btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Ok button - green gradient for the "Delivered" confirmation */
#lddfw_delivered_confirmation .lddfw_ok.btn-primary {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
  background-image: linear-gradient(
    135deg,
    #15803d 0%,
    #16a34a 100%
  ) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.28) !important;
}

#lddfw_delivered_confirmation .lddfw_ok.btn-primary:hover,
#lddfw_delivered_confirmation .lddfw_ok.btn-primary:focus {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.35) !important;
  color: #fff !important;
}

/* Ok button - red gradient for the "Not Delivered" confirmation */
#lddfw_failed_delivery_confirmation .lddfw_ok.btn-primary {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  background-image: linear-gradient(
    135deg,
    #dc2626 0%,
    #ef4444 100%
  ) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28) !important;
}

#lddfw_failed_delivery_confirmation .lddfw_ok.btn-primary:hover,
#lddfw_failed_delivery_confirmation .lddfw_ok.btn-primary:focus {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.36) !important;
  color: #fff !important;
}

/* Cancel button - consistent light slate style */
#lddfw_delivered_confirmation .lddfw_cancel.btn-secondary,
#lddfw_failed_delivery_confirmation .lddfw_cancel.btn-secondary {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: none !important;
}

#lddfw_delivered_confirmation .lddfw_cancel.btn-secondary:hover,
#lddfw_delivered_confirmation .lddfw_cancel.btn-secondary:focus,
#lddfw_failed_delivery_confirmation .lddfw_cancel.btn-secondary:hover,
#lddfw_failed_delivery_confirmation .lddfw_cancel.btn-secondary:focus {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

.dark #lddfw_delivered_confirmation .lddfw_lightbox_wrap .container,
.dark #lddfw_failed_delivery_confirmation .lddfw_lightbox_wrap .container {
  background: #111a2e;
  border-color: #334155;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 48px -12px rgba(0, 0, 0, 0.55);
}

.dark #lddfw_delivered_confirmation.lddfw_confirmation h2,
.dark #lddfw_failed_delivery_confirmation.lddfw_confirmation h2 {
  color: #f1f5f9;
}

.dark #lddfw_delivered_confirmation .lddfw_ok.btn-primary:hover,
.dark #lddfw_delivered_confirmation .lddfw_ok.btn-primary:focus {
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.32) !important;
}

.dark #lddfw_failed_delivery_confirmation .lddfw_ok.btn-primary:hover,
.dark #lddfw_failed_delivery_confirmation .lddfw_ok.btn-primary:focus {
  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.32) !important;
}

.dark #lddfw_delivered_confirmation .lddfw_cancel.btn-secondary,
.dark #lddfw_failed_delivery_confirmation .lddfw_cancel.btn-secondary {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

.dark #lddfw_delivered_confirmation .lddfw_cancel.btn-secondary:hover,
.dark #lddfw_delivered_confirmation .lddfw_cancel.btn-secondary:focus,
.dark #lddfw_failed_delivery_confirmation .lddfw_cancel.btn-secondary:hover,
.dark #lddfw_failed_delivery_confirmation .lddfw_cancel.btn-secondary:focus {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ---------- Thank you (#lddfw_thankyou) - delivery complete ---------- */

#lddfw_thankyou.lddfw_lightbox {
  text-align: left;
  padding-top: 0;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.58);
}

#lddfw_thankyou.lddfw_lightbox:not([style*="display:none"]):not(
    [style*="display: none"]
  ) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#lddfw_thankyou .lddfw_lightbox_wrap {
  top: auto !important;
  margin-top: 0 !important;
  position: relative !important;
  width: min(100%, 22rem);
  max-width: 22rem;
  padding: 0;
}

#lddfw_thankyou .lddfw_lightbox_wrap .container {
  max-width: none;
  padding: 0;
}

#lddfw_thankyou .lddfw_lightbox_wrap form .row {
  margin: 0;
}

#lddfw_thankyou .lddfw_lightbox_wrap .col-12 {
  text-align: center;
  padding: 2rem 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 24px 48px -12px rgba(15, 23, 42, 0.28);
}

#lddfw_thankyou .col-12 > svg.fa-check-circle {
  display: block;
  margin: 0 auto 1.15rem;
  width: 3.75rem !important;
  height: 3.75rem !important;
  max-width: none;
  padding: 0.65rem;
  box-sizing: content-box;
  border-radius: 50%;
  background: #d1fae5;
  color: #059669;
  font-size: inherit !important;
}

#lddfw_thankyou .col-12 > svg.fa-check-circle path {
  fill: currentColor;
}

#lddfw_thankyou h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

#lddfw_thankyou #lddfw_next_delivery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: #64748b;
  margin: 0 0 1.35rem;
  line-height: 1.45;
  text-align: center;
}

#lddfw_thankyou #lddfw_next_delivery .spinner-border-sm {
  position: static;
  top: auto;
}

/* Once the AJAX swaps in the "Drive to the next delivery" CTA markup
   ("Your next delivery:<br><b>address</b><br><a class=btn-primary ...>"),
   stack the message + address + button vertically with comfortable spacing. */
#lddfw_thankyou #lddfw_next_delivery:has(.btn-primary) {
  display: block;
  padding: 0;
}

#lddfw_thankyou #lddfw_next_delivery b {
  display: inline-block;
  margin: 0.15rem 0 0.85rem;
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1.4;
}

.dark #lddfw_thankyou #lddfw_next_delivery b {
  color: #f1f5f9;
}

/* The injected anchor inherits the .col-12 .btn-primary tokens below, but
   reset Bootstrap margin overrides for reliable spacing inside the flex row. */
#lddfw_thankyou #lddfw_next_delivery .btn,
#lddfw_thankyou #lddfw_next_delivery a.btn {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

/* Match every button-flavored anchor/button inside the thank-you card
   to the flat panel style (same tokens as the delivery footer buttons):
   10px radius, 600 weight, 0.75rem 1rem padding, no Bootstrap gradient. */
#lddfw_thankyou .col-12 .btn,
#lddfw_thankyou .col-12 a.btn,
#lddfw_thankyou .col-12 .lddfw_btn,
#lddfw_thankyou .col-12 .btn-lg,
#lddfw_thankyou .col-12 .btn-block,
#lddfw_thankyou .col-12 .btn-secondary,
#lddfw_thankyou .col-12 .lddfw_loader {
  display: block !important;
  width: 100% !important;
  margin-top: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  background-image: none !important;
  box-shadow: none !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

/* Secondary (default View deliveries CTA) - outlined neutral. */
#lddfw_thankyou .col-12 .btn-secondary,
#lddfw_thankyou .col-12 .btn-secondary.lddfw_loader {
  background: #fff !important;
  border: 1px solid #dee2e6 !important;
  color: #212529 !important;
}

#lddfw_thankyou .col-12 .btn-secondary:hover,
#lddfw_thankyou .col-12 .btn-secondary:focus,
#lddfw_thankyou .col-12 .btn-secondary.lddfw_loader:hover,
#lddfw_thankyou .col-12 .btn-secondary.lddfw_loader:focus {
  background: #f8f9fa !important;
  border-color: #ced4da !important;
  color: #212529 !important;
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.15) !important;
}

/* Primary fallback - in case a variant swaps the class to btn-primary. */
#lddfw_thankyou .col-12 .btn-primary {
  background-color: #0d6efd !important;
  border: 1px solid #0d6efd !important;
  color: #fff !important;
}

#lddfw_thankyou .col-12 .btn-primary:hover,
#lddfw_thankyou .col-12 .btn-primary:focus {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2) !important;
}

.dark #lddfw_thankyou.lddfw_lightbox {
  background: rgba(15, 23, 42, 0.72);
}

.dark #lddfw_thankyou .lddfw_lightbox_wrap .col-12 {
  background: #111a2e;
  border-color: #334155;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 48px -12px rgba(0, 0, 0, 0.55);
}

.dark #lddfw_thankyou .col-12 > svg.fa-check-circle {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.dark #lddfw_thankyou h1 {
  color: #f1f5f9;
}

.dark #lddfw_thankyou #lddfw_next_delivery {
  color: #94a3b8;
}

.dark #lddfw_thankyou .col-12 .btn-secondary,
.dark #lddfw_thankyou .col-12 .btn-secondary.lddfw_loader {
  background: #111a2e !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

.dark #lddfw_thankyou .col-12 .btn-secondary:hover,
.dark #lddfw_thankyou .col-12 .btn-secondary:focus,
.dark #lddfw_thankyou .col-12 .btn-secondary.lddfw_loader:hover,
.dark #lddfw_thankyou .col-12 .btn-secondary.lddfw_loader:focus {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2) !important;
}

.dark #lddfw_thankyou .col-12 .btn-primary:hover,
.dark #lddfw_thankyou .col-12 .btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
}

/* Subtle scale-in + glow pulse on the success check when the overlay becomes visible. */
#lddfw_thankyou.lddfw_lightbox:not([style*="display:none"]):not(
    [style*="display: none"]
  )
  .col-12
  > svg.fa-check-circle {
  animation: lddfw_thankyou_pop 0.55s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

#lddfw_thankyou.lddfw_lightbox:not([style*="display:none"]):not(
    [style*="display: none"]
  )
  h1 {
  animation: lddfw_thankyou_rise 0.45s ease 0.15s both;
}

@keyframes lddfw_thankyou_pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes lddfw_thankyou_rise {
  0% {
    transform: translateY(6px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  #lddfw_thankyou.lddfw_lightbox:not([style*="display:none"]):not(
      [style*="display: none"]
    )
    .col-12
    > svg.fa-check-circle,
  #lddfw_thankyou.lddfw_lightbox:not([style*="display:none"]):not(
      [style*="display: none"]
    )
    h1 {
    animation: none !important;
  }
}

/* ---------- Out-for-delivery alert (#lddfw_order_out_for_delivery_alert) ---------- */

#lddfw_order_out_for_delivery_alert.lddfw_lightbox {
  text-align: left;
  padding-top: 0;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.58);
}

#lddfw_order_out_for_delivery_alert.lddfw_lightbox:not(
    [style*="display:none"]
  ):not([style*="display: none"]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#lddfw_order_out_for_delivery_alert .lddfw_lightbox_wrap {
  top: auto !important;
  margin-top: 0 !important;
  position: relative !important;
  width: min(100%, 22rem);
  max-width: 22rem;
  padding: 0;
}

#lddfw_order_out_for_delivery_alert .lddfw_lightbox_wrap .container {
  padding: 0;
  max-width: none;
}

#lddfw_order_out_for_delivery_alert .row {
  margin-left: 0;
  margin-right: 0;
}

#lddfw_order_out_for_delivery_alert .col-12 {
  text-align: center;
  padding: 2rem 1.5rem 1.5rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 24px 48px -12px rgba(15, 23, 42, 0.28);
}

#lddfw_order_out_for_delivery_alert
  #lddfw_order_out_for_delivery_success
  svg.fa-check-circle {
  display: block;
  margin: 0 auto 1.15rem;
  width: 3.75rem !important;
  height: 3.75rem !important;
  max-width: none;
  padding: 0.65rem;
  box-sizing: content-box;
  border-radius: 50%;
  background: #d1fae5;
  color: #059669;
  font-size: inherit !important;
}

#lddfw_order_out_for_delivery_alert
  #lddfw_order_out_for_delivery_failed
  svg.fa-times-circle {
  display: block;
  margin: 0 auto 1.15rem;
  width: 3.75rem !important;
  height: 3.75rem !important;
  max-width: none;
  padding: 0.65rem;
  box-sizing: content-box;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  font-size: inherit !important;
}

#lddfw_order_out_for_delivery_alert h2.lddfw_notice {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1.25rem;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

#lddfw_order_out_for_delivery_alert #lddfw_order_out_for_delivery_failed_alert {
  margin: 0 0 1.25rem;
  text-align: left;
  font-size: 0.9rem;
  color: #475569;
}

#lddfw_order_out_for_delivery_alert
  #lddfw_order_out_for_delivery_failed_alert
  .alert {
  margin-bottom: 0;
  border-radius: 10px;
  text-align: left;
}

#lddfw_order_out_for_delivery_alert .btn {
  margin-top: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_order_out_for_delivery_alert .btn + .btn {
  margin-top: 0.65rem !important;
}

#lddfw_order_out_for_delivery_alert .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

#lddfw_order_out_for_delivery_alert .btn-primary:hover,
#lddfw_order_out_for_delivery_alert .btn-primary:focus {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
}

#lddfw_order_out_for_delivery_alert .btn-secondary {
  background-color: #fff !important;
  border: 1px solid #dee2e6 !important;
  color: #212529 !important;
}

#lddfw_order_out_for_delivery_alert .btn-secondary:hover,
#lddfw_order_out_for_delivery_alert .btn-secondary:focus {
  background-color: #f8f9fa !important;
  border-color: #ced4da !important;
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.15) !important;
}

.dark #lddfw_order_out_for_delivery_alert.lddfw_lightbox {
  background: rgba(15, 23, 42, 0.72);
}

.dark #lddfw_order_out_for_delivery_alert .col-12 {
  background: #111a2e;
  border-color: #334155;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 48px -12px rgba(0, 0, 0, 0.55);
}

.dark
  #lddfw_order_out_for_delivery_alert
  #lddfw_order_out_for_delivery_success
  svg.fa-check-circle {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.dark
  #lddfw_order_out_for_delivery_alert
  #lddfw_order_out_for_delivery_failed
  svg.fa-times-circle {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.dark #lddfw_order_out_for_delivery_alert h2.lddfw_notice {
  color: #f1f5f9;
}

.dark
  #lddfw_order_out_for_delivery_alert
  #lddfw_order_out_for_delivery_failed_alert {
  color: #cbd5e1;
}

.dark #lddfw_order_out_for_delivery_alert .btn-primary:hover,
.dark #lddfw_order_out_for_delivery_alert .btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
}

.dark #lddfw_order_out_for_delivery_alert .btn-secondary {
  background-color: #111a2e !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

.dark #lddfw_order_out_for_delivery_alert .btn-secondary:hover,
.dark #lddfw_order_out_for_delivery_alert .btn-secondary:focus {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2) !important;
}

/* ---------- Unassign alert (#lddfw_unassign_alert) ---------- */

#lddfw_unassign_alert.lddfw_lightbox {
  text-align: left;
  padding-top: 0;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.58);
}

#lddfw_unassign_alert.lddfw_lightbox:not([style*="display:none"]):not(
    [style*="display: none"]
  ) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#lddfw_unassign_alert .lddfw_lightbox_wrap {
  top: auto !important;
  margin-top: 0 !important;
  position: relative !important;
  width: min(100%, 22rem);
  max-width: 22rem;
  padding: 0;
}

#lddfw_unassign_alert .lddfw_lightbox_wrap .container {
  padding: 0;
  max-width: none;
}

#lddfw_unassign_alert .row {
  margin-left: 0;
  margin-right: 0;
}

#lddfw_unassign_alert .col-12 {
  text-align: center;
  padding: 2rem 1.5rem 1.5rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 24px 48px -12px rgba(15, 23, 42, 0.28);
}

#lddfw_unassign_alert #lddfw_unassign_success svg.fa-check-circle {
  display: block;
  margin: 0 auto 1.15rem;
  width: 3.75rem !important;
  height: 3.75rem !important;
  max-width: none;
  padding: 0.65rem;
  box-sizing: content-box;
  border-radius: 50%;
  background: #d1fae5;
  color: #059669;
  font-size: inherit !important;
}

#lddfw_unassign_alert #lddfw_unassign_failed svg.fa-times-circle {
  display: block;
  margin: 0 auto 1.15rem;
  width: 3.75rem !important;
  height: 3.75rem !important;
  max-width: none;
  padding: 0.65rem;
  box-sizing: content-box;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  font-size: inherit !important;
}

#lddfw_unassign_alert #lddfw_unassign_success .lddfw_notice {
  margin: 0 0 1.25rem;
  text-align: center;
}

#lddfw_unassign_alert #lddfw_unassign_success .lddfw_notice h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

#lddfw_unassign_alert #lddfw_unassign_failed .lddfw_notice {
  margin: 0 0 1.25rem;
  text-align: left;
  font-size: 0.9rem;
  color: #475569;
}

#lddfw_unassign_alert #lddfw_unassign_failed .lddfw_notice .alert {
  margin-bottom: 0;
  border-radius: 10px;
  text-align: left;
}

#lddfw_unassign_alert .btn {
  margin-top: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_unassign_alert .btn + .btn {
  margin-top: 0.65rem !important;
}

#lddfw_unassign_alert .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

#lddfw_unassign_alert .btn-primary:hover,
#lddfw_unassign_alert .btn-primary:focus {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
}

#lddfw_unassign_alert .btn-secondary {
  background-color: #fff !important;
  border: 1px solid #dee2e6 !important;
  color: #212529 !important;
}

#lddfw_unassign_alert .btn-secondary:hover,
#lddfw_unassign_alert .btn-secondary:focus {
  background-color: #f8f9fa !important;
  border-color: #ced4da !important;
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.15) !important;
}

.dark #lddfw_unassign_alert.lddfw_lightbox {
  background: rgba(15, 23, 42, 0.72);
}

.dark #lddfw_unassign_alert .col-12 {
  background: #111a2e;
  border-color: #334155;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 48px -12px rgba(0, 0, 0, 0.55);
}

.dark #lddfw_unassign_alert #lddfw_unassign_success svg.fa-check-circle {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.dark #lddfw_unassign_alert #lddfw_unassign_failed svg.fa-times-circle {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.dark #lddfw_unassign_alert #lddfw_unassign_success .lddfw_notice h2 {
  color: #f1f5f9;
}

.dark #lddfw_unassign_alert #lddfw_unassign_failed .lddfw_notice {
  color: #cbd5e1;
}

.dark #lddfw_unassign_alert .btn-primary:hover,
.dark #lddfw_unassign_alert .btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
}

.dark #lddfw_unassign_alert .btn-secondary {
  background-color: #111a2e !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

.dark #lddfw_unassign_alert .btn-secondary:hover,
.dark #lddfw_unassign_alert .btn-secondary:focus {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2) !important;
}

/* ---------- Claim order alert (#lddfw_order_claim_alert) ---------- */

#lddfw_order_claim_alert.lddfw_lightbox {
  text-align: left;
  padding-top: 0;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.58);
}

#lddfw_order_claim_alert.lddfw_lightbox:not([style*="display:none"]):not(
    [style*="display: none"]
  ) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#lddfw_order_claim_alert .lddfw_lightbox_wrap {
  top: auto !important;
  margin-top: 0 !important;
  position: relative !important;
  width: min(100%, 22rem);
  max-width: 22rem;
  padding: 0;
}

#lddfw_order_claim_alert .lddfw_lightbox_wrap .container {
  padding: 0;
  max-width: none;
}

#lddfw_order_claim_alert .row {
  margin-left: 0;
  margin-right: 0;
}

#lddfw_order_claim_alert .col-12 {
  text-align: center;
  padding: 2rem 1.5rem 1.5rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 24px 48px -12px rgba(15, 23, 42, 0.28);
}

#lddfw_order_claim_alert #lddfw_order_claim_success svg.fa-check-circle {
  display: block;
  margin: 0 auto 1.15rem;
  width: 3.75rem !important;
  height: 3.75rem !important;
  max-width: none;
  padding: 0.65rem;
  box-sizing: content-box;
  border-radius: 50%;
  background: #d1fae5;
  color: #059669;
  font-size: inherit !important;
}

#lddfw_order_claim_alert #lddfw_order_claim_failed svg.fa-times-circle {
  display: block;
  margin: 0 auto 1.15rem;
  width: 3.75rem !important;
  height: 3.75rem !important;
  max-width: none;
  padding: 0.65rem;
  box-sizing: content-box;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  font-size: inherit !important;
}

#lddfw_order_claim_alert #lddfw_order_claim_success .lddfw_notice {
  margin: 0 0 1.25rem;
  text-align: center;
}

#lddfw_order_claim_alert #lddfw_order_claim_success .lddfw_notice h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

#lddfw_order_claim_alert #lddfw_order_claim_failed_alert {
  margin: 0 0 1.25rem;
  text-align: left;
  font-size: 0.9rem;
  color: #475569;
}

#lddfw_order_claim_alert #lddfw_order_claim_failed_alert .alert {
  margin-bottom: 0;
  border-radius: 10px;
  text-align: left;
}

#lddfw_order_claim_alert .btn {
  margin-top: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_order_claim_alert .btn + .btn {
  margin-top: 0.65rem !important;
}

#lddfw_order_claim_alert .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

#lddfw_order_claim_alert .btn-primary:hover,
#lddfw_order_claim_alert .btn-primary:focus {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
}

#lddfw_order_claim_alert .btn-secondary {
  background-color: #fff !important;
  border: 1px solid #dee2e6 !important;
  color: #212529 !important;
}

#lddfw_order_claim_alert .btn-secondary:hover,
#lddfw_order_claim_alert .btn-secondary:focus {
  background-color: #f8f9fa !important;
  border-color: #ced4da !important;
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.15) !important;
}

.dark #lddfw_order_claim_alert.lddfw_lightbox {
  background: rgba(15, 23, 42, 0.72);
}

.dark #lddfw_order_claim_alert .col-12 {
  background: #111a2e;
  border-color: #334155;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 48px -12px rgba(0, 0, 0, 0.55);
}

.dark #lddfw_order_claim_alert #lddfw_order_claim_success svg.fa-check-circle {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.dark #lddfw_order_claim_alert #lddfw_order_claim_failed svg.fa-times-circle {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.dark #lddfw_order_claim_alert #lddfw_order_claim_success .lddfw_notice h2 {
  color: #f1f5f9;
}

.dark #lddfw_order_claim_alert #lddfw_order_claim_failed_alert {
  color: #cbd5e1;
}

.dark #lddfw_order_claim_alert .btn-primary:hover,
.dark #lddfw_order_claim_alert .btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
}

.dark #lddfw_order_claim_alert .btn-secondary {
  background-color: #111a2e !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

.dark #lddfw_order_claim_alert .btn-secondary:hover,
.dark #lddfw_order_claim_alert .btn-secondary:focus {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2) !important;
}

/* ============================================================
   Delivery lightbox - polish pass (2026-04-24)
   - Proof-bar: completion check badges + required dots
   - Status-colored Done button (success=green, failed=red)
   - Alert screens: modern card look
   ============================================================ */

/* Proof tab tile needs positioning context for badge/dot overlays */
#lddfw_delivery_screen .delivery_proof_bar a {
  position: relative;
  overflow: visible;
}

/* Hide the inline check icon by default; show only on .lddfw_proof_done */
#lddfw_delivery_screen .delivery_proof_bar a .lddfw_proof_done_badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 1.1rem !important;
  height: 1.1rem !important;
  margin: 0;
  padding: 0.18rem;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  box-shadow:
    0 0 0 2px #fff,
    0 2px 6px rgba(16, 185, 129, 0.35);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  pointer-events: none;
}

#lddfw_delivery_screen
  .delivery_proof_bar
  a.lddfw_proof_done
  .lddfw_proof_done_badge {
  opacity: 1;
  transform: scale(1);
}

/* Completed tab gets a subtle green tint even when not active */
#lddfw_delivery_screen .delivery_proof_bar a.lddfw_proof_done:not(.active) {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

#lddfw_delivery_screen
  .delivery_proof_bar
  a.lddfw_proof_done:not(.active)
  svg:not(.lddfw_proof_done_badge) {
  color: #059669;
  opacity: 1;
}

/* Required dot - upper-left pulse until the field is filled */
#lddfw_delivery_screen .delivery_proof_bar a.lddfw_proof_required::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #ef4444;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(239, 68, 68, 0.25);
  animation: lddfw_proof_pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lddfw_proof_pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 4px rgba(239, 68, 68, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 7px rgba(239, 68, 68, 0.12);
  }
}

/* Dark variants for badge / required / completed */
.dark #lddfw_delivery_screen .delivery_proof_bar a .lddfw_proof_done_badge {
  box-shadow:
    0 0 0 2px #0f172a,
    0 2px 6px rgba(16, 185, 129, 0.45);
}

.dark
  #lddfw_delivery_screen
  .delivery_proof_bar
  a.lddfw_proof_done:not(.active) {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.dark
  #lddfw_delivery_screen
  .delivery_proof_bar
  a.lddfw_proof_done:not(.active)
  svg:not(.lddfw_proof_done_badge) {
  color: #6ee7b7;
}

.dark #lddfw_delivery_screen .delivery_proof_bar a.lddfw_proof_required::after {
  box-shadow:
    0 0 0 2px #0f172a,
    0 0 0 4px rgba(239, 68, 68, 0.3);
}

/* --------- Status-colored Done button ---------
   Paints the footer primary button according to which sub-form is active:
   green for "Delivered", red for "Failed attempt". Falls back to the
   existing flat blue primary for any other state. */
/* Done button - green when confirming a successful delivery */
#lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn[delivery="success"] {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
  background-image: linear-gradient(
    135deg,
    #15803d 0%,
    #16a34a 100%
  ) !important;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.28) !important;
}

#lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn[delivery="success"]:hover,
#lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn[delivery="success"]:focus {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.35) !important;
}

/* Done button - red when confirming a failed delivery */
#lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn[delivery="failed"] {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  background-image: linear-gradient(
    135deg,
    #dc2626 0%,
    #ef4444 100%
  ) !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28) !important;
}

#lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn[delivery="failed"]:hover,
#lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn[delivery="failed"]:focus {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.36) !important;
}

.dark
  #lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn[delivery="success"]:hover,
.dark
  #lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn[delivery="success"]:focus {
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.32) !important;
}

.dark
  #lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn[delivery="failed"]:hover,
.dark
  #lddfw_delivery_screen
  .delivery_proof_buttons
  .btn-primary.lddfw_btn[delivery="failed"]:focus {
  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.32) !important;
}

/* --------- Alert screens (signature/photo/pod mandatory) ---------
   Scoped modernization so the warning dialogs match the refreshed
   delivery lightbox & PoD confirmations. */
.lddfw_lightbox.lddfw_alert_screen:not([style*="display:none"]):not(
    [style*="display: none"]
  ) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.58);
  padding: 1rem;
  z-index: 10040;
}

.lddfw_lightbox.lddfw_alert_screen .lddfw_lightbox_wrap {
  width: min(100%, 22rem);
  max-width: 22rem;
  flex: 0 1 auto;
  position: relative;
  padding: 0;
  top: auto;
  left: auto;
  transform: none;
}

.lddfw_lightbox.lddfw_alert_screen .lddfw_lightbox_wrap > .container {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
  max-width: none;
}

.lddfw_lightbox.lddfw_alert_screen .lddfw_lightbox_close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  color: #94a3b8;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  z-index: 2;
}

.lddfw_lightbox.lddfw_alert_screen .lddfw_lightbox_close:hover,
.lddfw_lightbox.lddfw_alert_screen .lddfw_lightbox_close:focus {
  color: #475569;
  background: #f1f5f9;
}

.lddfw_lightbox.lddfw_alert_screen .row {
  margin: 0;
  row-gap: 0.75rem;
}

.lddfw_lightbox.lddfw_alert_screen .col-12 {
  padding-left: 0;
  padding-right: 0;
}

.lddfw_lightbox.lddfw_alert_screen svg {
  width: 2.25rem;
  height: 2.25rem;
  color: #f59e0b;
  margin: 0.25rem auto 0.25rem;
  display: inline-block;
}

.lddfw_lightbox.lddfw_alert_screen h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0.25rem 0 0.5rem;
  line-height: 1.4;
  text-align: center;
}

.lddfw_lightbox.lddfw_alert_screen .btn-primary {
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  box-shadow: none !important;
}

.lddfw_lightbox.lddfw_alert_screen .btn-primary:hover,
.lddfw_lightbox.lddfw_alert_screen .btn-primary:focus {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2) !important;
}

/* Dark variant for alert screens */
.dark .lddfw_lightbox.lddfw_alert_screen .lddfw_lightbox_wrap > .container {
  background: #111a2e;
  border-color: #1f2a44;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.dark .lddfw_lightbox.lddfw_alert_screen h2 {
  color: #f1f5f9;
}

.dark .lddfw_lightbox.lddfw_alert_screen svg {
  color: #fbbf24;
}

.dark .lddfw_lightbox.lddfw_alert_screen .lddfw_lightbox_close {
  color: #64748b;
}

.dark .lddfw_lightbox.lddfw_alert_screen .lddfw_lightbox_close:hover,
.dark .lddfw_lightbox.lddfw_alert_screen .lddfw_lightbox_close:focus {
  color: #e2e8f0;
  background: #1e293b;
}
.btn-group-lg > .btn,
.btn-lg {
  font-size: 16px;
  font-weight: 600 !important;
}
.btn-danger {
  color: #fff;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}
.btn-success {
  color: #fff;
  background-color: #157347 !important;
  border-color: #146c43 !important;
}

/* =========================================================
   Proof-step headers - Note / Signature / Photos
   Scoped to #lddfw_delivery_screen. Layout:
     [icon badge] [title]                    [trash] [Add]
   Single row, vertically centered. Trash chip and Add button
   are identical in size + style across Signature and Photos.
   ========================================================= */

/* --- Shared header shell ---
   IMPORTANT: override the LEGACY global `.delivery_header` rule that sets
   `height: 57px; padding-top: 8px; padding-bottom: 0; line-height: 36px;`.
   That rule creates an asymmetric ~36px content box which is smaller than
   the row's min-height → the row overflows downward and the content sticks
   to the bottom border. Here we turn the header into a flex container that
   truly centers its inner `.row` regardless of the inner row height. */
#lddfw_delivery_screen .delivery_header {
  height: auto !important;
  min-height: 3.5rem;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal;
  display: flex;
  align-items: center;
}

/* Ensure the Bootstrap container fills the flex header and its row can
   grow/center in the full width. */
#lddfw_delivery_screen .delivery_header > .container {
  width: 100%;
}

/* Match Signature/Photo header container: fluid-width and safe-area aware.
   This fixes the Note header appearing narrower than the others. */
#lddfw_delivery_screen #lddfw_delivered_form .delivery_header .container,
#lddfw_delivery_screen #lddfw_failed_delivery_form .delivery_header .container {
  max-width: 100%;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

/* Unify inner row height across Note / Signature / Photos so every header
   looks identical. Double-ID selector beats the earlier Signature/Photo
   `min-height: 2.75rem` rules (which would otherwise make Note taller). */
#lddfw_delivery_screen #lddfw_delivered_form .delivery_header .row,
#lddfw_delivery_screen #lddfw_failed_delivery_form .delivery_header .row,
#lddfw_delivery_screen #lddfw_delivery_signature .delivery_header .row,
#lddfw_delivery_screen #lddfw_delivery_photo .delivery_header .row {
  align-items: center;
  min-height: 2.75rem;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin: 0;
}

/* Override Bootstrap col widths so title flexes and actions hug content */
#lddfw_delivery_screen .delivery_header .lddfw_column:first-child {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}
#lddfw_delivery_screen .delivery_header .col-2,
#lddfw_delivery_screen .delivery_header .col-5.text-right {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-left: 0.25rem;
  padding-right: 0;
}

/* --- Title column: icon badge + title on one vertically-centered line --- */
#lddfw_delivery_screen .delivery_header .lddfw_column:first-child {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* ::before = the badge (tinted rounded square, no mask) */
#lddfw_delivery_screen .delivery_header .lddfw_column:first-child::before {
  content: "";
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background-color: #e2e8f0;
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.04),
    0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ::after = the glyph, absolutely centered over the badge.
   Because the column is the positioning parent and the badge always sits
   at left:0 of the column's flex content, we anchor ::after to the SAME
   2.25rem box. Using 100% mask-size + center mask-position guarantees the
   glyph is centered inside that 2.25rem box on every step header. */
#lddfw_delivery_screen .delivery_header .lddfw_column:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  pointer-events: none;
  background-color: #0f172a;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem 1rem;
  mask-size: 1rem 1rem;
}

/* Per-step badge tint + glyph (Note / Signature / Photos) */
#lddfw_delivered_form .delivery_header .lddfw_column:first-child::before,
#lddfw_failed_delivery_form .delivery_header .lddfw_column:first-child::before {
  background-color: #eef2ff;
  box-shadow: inset 0 0 0 1px rgba(67, 56, 202, 0.12);
}
#lddfw_delivered_form .delivery_header .lddfw_column:first-child::after,
#lddfw_failed_delivery_form .delivery_header .lddfw_column:first-child::after {
  background-color: #4338ca;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z'/></svg>");
}

#lddfw_delivery_signature .delivery_header .lddfw_column:first-child::before {
  background-color: #eff6ff;
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.14);
}
#lddfw_delivery_signature .delivery_header .lddfw_column:first-child::after {
  background-color: #0d6efd;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path d='M623.2 192c-51.8 3.5-125.7 54.7-163.1 71.5-29.1 13.1-54.2 24.4-76.1 24.4-22.6 0-26-16.2-21.3-51.9 1.1-8 11.7-79.2-42.7-76.1-25.1 1.5-64.3 24.8-169.5 126L192 182.2c30.4-75.9-53.2-151.5-129.7-102.8L7.4 116.3C0 121-2.2 130.9 2.5 138.4l17.2 27c4.7 7.5 14.6 9.7 22.1 4.9l58-38.9c18.4-11.7 40.7 7.2 32.7 27.1L34.3 404.1C27.5 421 37 448 64 448c8.3 0 16.5-3.2 22.6-9.4 42.2-42.2 154.7-150.7 211.2-195.8-2.2 28.5-2.1 58.9 20.6 83.8 15.3 16.8 37.3 25.3 65.5 25.3 35.6 0 68-14.6 102.3-30 33-14.8 99-62.6 138.4-65.8 8.5-.7 15.2-7.3 15.2-15.8v-32.1c.2-9.1-7.5-16.8-16.6-16.2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path d='M623.2 192c-51.8 3.5-125.7 54.7-163.1 71.5-29.1 13.1-54.2 24.4-76.1 24.4-22.6 0-26-16.2-21.3-51.9 1.1-8 11.7-79.2-42.7-76.1-25.1 1.5-64.3 24.8-169.5 126L192 182.2c30.4-75.9-53.2-151.5-129.7-102.8L7.4 116.3C0 121-2.2 130.9 2.5 138.4l17.2 27c4.7 7.5 14.6 9.7 22.1 4.9l58-38.9c18.4-11.7 40.7 7.2 32.7 27.1L34.3 404.1C27.5 421 37 448 64 448c8.3 0 16.5-3.2 22.6-9.4 42.2-42.2 154.7-150.7 211.2-195.8-2.2 28.5-2.1 58.9 20.6 83.8 15.3 16.8 37.3 25.3 65.5 25.3 35.6 0 68-14.6 102.3-30 33-14.8 99-62.6 138.4-65.8 8.5-.7 15.2-7.3 15.2-15.8v-32.1c.2-9.1-7.5-16.8-16.6-16.2z'/></svg>");
}

#lddfw_delivery_photo .delivery_header .lddfw_column:first-child::before {
  background-color: #ecfdf5;
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.16);
}
#lddfw_delivery_photo .delivery_header .lddfw_column:first-child::after {
  background-color: #059669;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z'/></svg>");
}

/* Title only, single line, vertically centered.
   `line-height: 1.2 !important` neutralizes the legacy global
   `.delivery_header h4 { line-height: 40px }` which would otherwise push
   the title baseline down and make the header look bottom-aligned. */
#lddfw_delivery_screen .delivery_header .lddfw_column:first-child h4 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0;
  letter-spacing: -0.02em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
}

/* --- Identical trash chip (Signature + Photos) --- */
#lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear,
#lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear:hover,
#lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear:focus,
#lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear:hover,
#lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear:focus {
  background: #fff1f2;
  border-color: #fecaca;
  color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear
  svg,
#lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear svg {
  width: 1rem;
  height: 1rem;
}

/* --- Identical "Add" button (Signature + Photos) --- */
#lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn,
#lddfw_delivery_screen #lddfw_delivery_photo #lddfw_driver_add_photo_btn,
#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file,
#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label {
  width: 6.5rem !important;
  min-width: 6.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 0 0.85rem !important;
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
  background: #0d6efd !important;
  border: 1px solid #0d6efd !important;
  color: #fff !important;
  box-shadow:
    0 1px 2px rgba(13, 110, 253, 0.2),
    0 8px 20px -10px rgba(13, 110, 253, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  white-space: nowrap;
}

/* Reset Bootstrap custom-file-label pseudo + wrapper fills so only the label paints the button */
#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label::after {
  content: none !important;
  display: none !important;
}

/* Constrain the wrapper and the hidden file input so nothing overflows the
   header. The `input.custom-file-input` is absolutely positioned by Bootstrap
   and can spill below the label, causing the "Add" button to look like it
   overlaps the bottom of the header. Pin it to the same 2.5rem box. */
#lddfw_delivery_screen #lddfw_delivery_photo #lddfw_driver_add_photo_btn {
  overflow: hidden !important;
  align-self: center;
  top: 2px;
}

#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn {
  align-self: center;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn:hover,
#lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn:focus,
#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label:hover,
#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label:focus {
  background: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow:
    0 1px 2px rgba(13, 110, 253, 0.25),
    0 0 0 3px rgba(13, 110, 253, 0.2) !important;
}

#lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn
  svg,
#lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label
  svg {
  width: 0.9em;
  height: 0.9em;
  color: currentColor;
}

/* --- Dark mode parity --- */
.dark #lddfw_delivered_form .delivery_header .lddfw_column:first-child::before,
.dark
  #lddfw_failed_delivery_form
  .delivery_header
  .lddfw_column:first-child::before {
  background-color: rgba(99, 102, 241, 0.14);
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.25);
}
.dark #lddfw_delivered_form .delivery_header .lddfw_column:first-child::after,
.dark
  #lddfw_failed_delivery_form
  .delivery_header
  .lddfw_column:first-child::after {
  background-color: #a5b4fc;
}

.dark
  #lddfw_delivery_signature
  .delivery_header
  .lddfw_column:first-child::before {
  background-color: rgba(59, 130, 246, 0.16);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
}
.dark
  #lddfw_delivery_signature
  .delivery_header
  .lddfw_column:first-child::after {
  background-color: #60a5fa;
}

.dark #lddfw_delivery_photo .delivery_header .lddfw_column:first-child::before {
  background-color: rgba(16, 185, 129, 0.14);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.28);
}
.dark #lddfw_delivery_photo .delivery_header .lddfw_column:first-child::after {
  background-color: #34d399;
}

/* Title color in dark mode.
   NOTE: the selector MUST include `.lddfw_column:first-child` so its
   specificity (1,3,1) matches/beats the light-mode rule; otherwise the
   title stays dark on a dark header and becomes invisible. */
.dark #lddfw_delivery_screen .delivery_header .lddfw_column:first-child h4 {
  color: #f1f5f9 !important;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear,
.dark #lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear {
  background: #111a2e;
  border-color: #334155;
  color: #94a3b8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear:hover,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  .delivery_header
  .signature-clear:focus,
.dark #lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear:hover,
.dark #lddfw_delivery_screen #lddfw_delivery_photo #delivery-image-clear:focus {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(248, 113, 113, 0.5);
  color: #fca5a5;
}

/* Dark-mode "Add" buttons - keep brand-blue pill on BOTH Signature and
   Photos so they look identical. We must paint every wrapper layer of the
   Photos button (outer div, .custom-file, .custom-file-label); otherwise
   the legacy blue-corner bleed returns or the legacy dark-slate override
   kicks in and makes Photos look different from Signature. */
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn,
.dark #lddfw_delivery_screen #lddfw_delivery_photo #lddfw_driver_add_photo_btn,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label {
  background: #0d6efd !important;
  background-color: #0d6efd !important;
  border: 1px solid #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
  box-shadow:
    0 1px 2px rgba(13, 110, 253, 0.35),
    0 8px 20px -10px rgba(13, 110, 253, 0.6) !important;
}

.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn:hover,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_signature
  #lddfw_driver_add_signature_btn:focus,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label:hover,
.dark
  #lddfw_delivery_screen
  #lddfw_delivery_photo
  #lddfw_driver_add_photo_btn
  .custom-file-label:focus {
  background: #0b5ed7 !important;
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow:
    0 1px 2px rgba(13, 110, 253, 0.3),
    0 0 0 3px rgba(13, 110, 253, 0.25) !important;
}

.lddfw_proof_done_badge {
  display: none;
}
.lddfw_proof_done .lddfw_proof_done_badge {
  display: block;
}

/* ---------------------------------------------------------------------------
 * Preview route (assign-to-driver screen)
 *
 * Read-only route preview that lets drivers visualize an optimized
 * sequence for the orders they've selected BEFORE committing to Out
 * for delivery. The preview is purely client-side (Google Maps
 * DirectionsService) - no WC statuses change, no customers are
 * notified. The button sits on top of the existing primary
 * "Out for delivery" CTA inside .lddfw-assign-footer, styled as a
 * secondary action so the visual hierarchy stays Preview → Commit.
 * --------------------------------------------------------------------------- */

/* Dedicated row wrapping the preview button so it always stacks on its
   own line above the primary "Out for delivery" CTA - independent of
   any Bootstrap .btn-block width rules inside .col-12. Force full width
   with !important to defeat any stray rule further down the cascade. */
.lddfw-assign-screen .lddfw-preview-route-row,
.lddfw_footer_buttons.lddfw-assign-footer .lddfw-preview-route-row {
  display: block !important;
  width: 100% !important;
  margin: 0 0 0.6rem 0 !important;
  padding: 0 !important;
  clear: both !important;
}

/* Collapse the bottom margin when every button inside is hidden so the row
   does not create a phantom gap above the "Out for delivery" CTA. */
.lddfw-assign-screen
  .lddfw-preview-route-row:not(:has(a:not([style*="display:none"]))),
.lddfw_footer_buttons.lddfw-assign-footer
  .lddfw-preview-route-row:not(:has(a:not([style*="display:none"]))) {
  margin-bottom: 0 !important;
}

.lddfw-assign-screen .lddfw-preview-route-row a.lddfw-preview-route-btn,
.lddfw_footer_buttons.lddfw-assign-footer
  .lddfw-preview-route-row
  a.lddfw-preview-route-btn,
.lddfw-assign-screen a#lddfw_preview_route_button.lddfw-preview-route-btn,
.lddfw-assign-screen
  a#lddfw_preview_route_button_loading.lddfw-preview-route-btn {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  text-align: center !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid #6f42c1 !important;
  color: #6f42c1 !important;
  box-shadow: none !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.lddfw-assign-screen a#lddfw_preview_route_button.lddfw-preview-route-btn:hover,
.lddfw-assign-screen a#lddfw_preview_route_button.lddfw-preview-route-btn:focus,
.lddfw-assign-screen
  a#lddfw_preview_route_button.lddfw-preview-route-btn:active,
.lddfw_footer_buttons.lddfw-assign-footer
  a#lddfw_preview_route_button.lddfw-preview-route-btn:hover,
.lddfw_footer_buttons.lddfw-assign-footer
  a#lddfw_preview_route_button.lddfw-preview-route-btn:focus,
.lddfw_footer_buttons.lddfw-assign-footer
  a#lddfw_preview_route_button.lddfw-preview-route-btn:active {
  background-color: #f3eefb !important;
  border-color: #5a2fa4 !important;
  color: #5a2fa4 !important;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.2) !important;
}

.lddfw-assign-screen .lddfw-preview-route-btn .svg-inline--fa,
.lddfw-assign-screen .lddfw-preview-route-btn .spinner-border {
  width: 0.9em !important;
  height: 0.9em !important;
  margin-right: 0.35rem !important;
  vertical-align: middle !important;
}

.dark .lddfw-assign-screen a#lddfw_preview_route_button.lddfw-preview-route-btn,
.dark
  .lddfw-assign-screen
  a#lddfw_preview_route_button_loading.lddfw-preview-route-btn,
.dark
  .lddfw_footer_buttons.lddfw-assign-footer
  a#lddfw_preview_route_button.lddfw-preview-route-btn,
.dark
  .lddfw_footer_buttons.lddfw-assign-footer
  a#lddfw_preview_route_button_loading.lddfw-preview-route-btn {
  background-color: #1e293b !important;
  border-color: #a78bfa !important;
  color: #c4b5fd !important;
}

.dark
  .lddfw-assign-screen
  a#lddfw_preview_route_button.lddfw-preview-route-btn:hover,
.dark
  .lddfw-assign-screen
  a#lddfw_preview_route_button.lddfw-preview-route-btn:focus {
  background-color: #312e81 !important;
  border-color: #c4b5fd !important;
  color: #ede9fe !important;
}

.lddfw_footer_buttons.lddfw-assign-footer a#lddfw_preview_route_button:hover,
.lddfw_footer_buttons.lddfw-assign-footer a#lddfw_preview_route_button:focus,
.lddfw_footer_buttons.lddfw-assign-footer a#lddfw_preview_route_button:active,
.lddfw-assign-screen a#lddfw_preview_route_button:hover,
.lddfw-assign-screen a#lddfw_preview_route_button:focus,
.lddfw-assign-screen a#lddfw_preview_route_button:active {
  background-color: #f3eefb !important;
  border-color: #5a2fa4 !important;
  color: #5a2fa4 !important;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.2) !important;
}

.lddfw_footer_buttons.lddfw-assign-footer
  #lddfw_preview_route_button
  .svg-inline--fa,
.lddfw_footer_buttons.lddfw-assign-footer
  #lddfw_preview_route_button_loading
  .spinner-border,
.lddfw-assign-screen #lddfw_preview_route_button .svg-inline--fa,
.lddfw-assign-screen #lddfw_preview_route_button_loading .spinner-border {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.dark .lddfw_footer_buttons.lddfw-assign-footer a#lddfw_preview_route_button,
.dark
  .lddfw_footer_buttons.lddfw-assign-footer
  a#lddfw_preview_route_button_loading,
.dark .lddfw-assign-screen a#lddfw_preview_route_button,
.dark .lddfw-assign-screen a#lddfw_preview_route_button_loading {
  background-color: #1e293b !important;
  border-color: #a78bfa !important;
  color: #c4b5fd !important;
}

.dark
  .lddfw_footer_buttons.lddfw-assign-footer
  a#lddfw_preview_route_button:hover,
.dark
  .lddfw_footer_buttons.lddfw-assign-footer
  a#lddfw_preview_route_button:focus,
.dark .lddfw-assign-screen a#lddfw_preview_route_button:hover,
.dark .lddfw-assign-screen a#lddfw_preview_route_button:focus {
  background-color: #312e81 !important;
  border-color: #c4b5fd !important;
  color: #ede9fe !important;
}

/* Preview lightbox - ABSOLUTE-POSITIONED layout that mirrors the OFD
   modal (#lddfw_directions) spec exactly.

   DOM structure (from class-lddfw-screens.php):
     #lddfw_preview_directions.lddfw_lightbox
       .lddfw_lightbox_wrap           ← ONLY the header bar
         #lddfw_preview_hide_map.container
       #lddfw_preview_map              ← sibling of .lddfw_lightbox_wrap
       #lddfw_preview_panel-listing    ← sibling

   Zones (same as OFD):
     top 0..60px        → header bar (.lddfw_lightbox_wrap)
     top 60px..55vh     → map (#lddfw_preview_map)
     top 55vh..bottom   → listing (#lddfw_preview_panel-listing, scroll) */

#lddfw_preview_directions.lddfw_lightbox {
  display: none;
  margin-top: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: #f8fafc;
  overflow: hidden;
  z-index: 999;
}

.dark #lddfw_preview_directions.lddfw_lightbox {
  background: #0f172a;
}

/* Header wrapper - pinned to the very top, 60px tall, above the map. */
#lddfw_preview_directions .lddfw_lightbox_wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  min-height: 60px;
  padding: 0;
  margin: 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  z-index: 3;
  overflow: visible;
}

.dark #lddfw_preview_directions .lddfw_lightbox_wrap {
  background: #111a2e;
  border-bottom-color: #1f2a44;
}

/* Header bar - full width, no Bootstrap container constraints. */
#lddfw_preview_directions #lddfw_preview_hide_map {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 60px;
  margin: 0 !important;
  padding: 0.65rem 0.75rem !important;
  background: transparent;
  border: 0;
  box-shadow: none;
  position: relative;
  box-sizing: border-box;
}

#lddfw_preview_directions #lddfw_preview_hide_map .row {
  display: flex;
  align-items: center;
  margin: 0;
  height: 100%;
  flex-wrap: nowrap;
}

#lddfw_preview_directions #lddfw_preview_hide_map .col-2,
#lddfw_preview_directions #lddfw_preview_hide_map .col-8 {
  padding: 0;
}

#lddfw_preview_directions #lddfw_preview_hide_map_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ede9fe;
  color: #5a2fa4;
  border: 1px solid #d8c7ff;
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}

#lddfw_preview_directions #lddfw_preview_hide_map_btn:hover,
#lddfw_preview_directions #lddfw_preview_hide_map_btn:focus {
  background: linear-gradient(135deg, #6f42c1 0%, #8b5cf6 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(111, 66, 193, 0.3);
  transform: translateY(-1px);
  outline: none;
}

#lddfw_preview_directions #lddfw_preview_hide_map_btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

#lddfw_preview_directions .lddfw_header_title {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 40px;
}

.dark #lddfw_preview_directions .lddfw_header_title {
  color: #f1f5f9;
}

.dark #lddfw_preview_directions #lddfw_preview_hide_map_btn {
  background: #1e1b4b;
  color: #c4b5fd;
  border-color: #4338ca;
}

/* Map canvas - pinned below the 60px header, fills 55vh minus header. */
#lddfw_preview_directions #lddfw_preview_map {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(55vh - 60px);
  min-height: 220px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #e5e7eb;
  z-index: 1;
}

.dark #lddfw_preview_directions #lddfw_preview_map {
  background: #0f172a;
}

#lddfw_preview_directions #lddfw_preview_map > div {
  outline: none !important;
}

/* Listing panel - fills the remaining vertical space below the map. */
#lddfw_preview_directions #lddfw_preview_panel-listing {
  position: absolute;
  top: 55vh;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  max-width: none !important;
  height: auto;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem 0.85rem 1.25rem !important;
  margin: 0 !important;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  z-index: 2;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #0f172a;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.dark #lddfw_preview_directions #lddfw_preview_panel-listing {
  background: #111a2e;
  border-top-color: #1f2a44;
  color: #e2e8f0;
}

#lddfw_preview_directions #lddfw_preview_panel-listing::-webkit-scrollbar {
  width: 6px;
}

#lddfw_preview_directions
  #lddfw_preview_panel-listing::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* Route listing rows - mirrors #lddfw_directions styling. */
#lddfw_preview_directions .lddfw_address,
#lddfw_preview_directions .lddfw_drive {
  margin: 0;
  padding: 0.5rem 0;
  border-top: 1px solid #eef2f7;
  display: flex;
  flex-wrap: nowrap;
}

#lddfw_preview_directions .lddfw_address:first-of-type,
#lddfw_preview_directions .lddfw_drive:first-of-type {
  border-top: 0;
}

#lddfw_preview_directions .lddfw_address > .col-2,
#lddfw_preview_directions .lddfw_drive > .col-2 {
  flex: 0 0 48px;
  max-width: 48px;
  padding: 0;
  text-align: center;
  min-height: 32px;
}

#lddfw_preview_directions .lddfw_address > .col-10 {
  flex: 1 1 auto;
  max-width: none;
  padding: 0 0 0 0.25rem;
  display: flex;
  align-items: center;
}

#lddfw_preview_directions .lddfw_drive > .col-10 {
  flex: 1 1 auto;
  max-width: none;
  padding: 0 0 0 0.25rem;
}

/* Hide legacy pin SVG, show letter badge instead. */
#lddfw_preview_directions .lddfw_address .fa-map-marker,
#lddfw_preview_directions .lddfw_address svg.svg-inline--fa.fa-map-marker {
  display: none;
}

#lddfw_preview_directions .lddfw_address .lddfw_point,
#lddfw_directions .lddfw_address .lddfw_point {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ea4335;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin: 0 auto;
  top: auto;
  left: auto;
}

#lddfw_preview_directions .lddfw_address > .col-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

#lddfw_preview_directions .lddfw_address > .col-10 {
  color: #0f172a;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.35;
}

/* Drive-leg rows: dots + car + dots */
#lddfw_preview_directions .lddfw_drive {
  padding: 0.45rem 0;
}

#lddfw_preview_directions .lddfw_drive > .col-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
}

#lddfw_preview_directions .lddfw_drive > .col-2 svg.up,
#lddfw_preview_directions .lddfw_drive > .col-2 svg.down {
  flex: 1;
  width: 6px !important;
  fill: #94a3b8;
}

#lddfw_preview_directions .lddfw_drive > .col-2 br {
  display: none;
}

#lddfw_preview_directions .lddfw_drive > .col-2 svg.fa-car {
  position: relative;
  z-index: 1;
  width: 22px !important;
  height: 22px !important;
  padding: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  fill: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  box-sizing: content-box;
}

#lddfw_preview_directions .lddfw_drive > .col-10 {
  color: #475569;
  font-size: 0.85rem;
  line-height: 1.35;
  padding-left: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#lddfw_preview_directions .lddfw_drive > .col-10 b {
  display: block;
  color: #0f172a;
  font-size: 0.92rem;
}

/* Total-route badge - mirrors #lddfw_directions pill */
#lddfw_preview_directions #lddfw_total_route {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.9rem;
  background: linear-gradient(135deg, #fff4e6 0%, #ffedd5 100%);
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  font-size: 0.85rem;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(202, 101, 16, 0.08);
}

#lddfw_preview_directions #lddfw_total_route::before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ca6510'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.2 14.2L11 13V7h1.5v5.25l4.5 2.67z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

#lddfw_preview_directions #lddfw_total_route b {
  font-weight: 700;
  color: #7c2d12;
  display: inline-block;
}

#lddfw_preview_directions #lddfw_total_route span {
  color: #9a4a0a;
  font-weight: 500;
}

/* Address row background */
#lddfw_preview_directions .lddfw_address {
  background-color: #f7f7f7;
}

/* Dark mode */
.dark #lddfw_preview_directions #lddfw_total_route {
  background: linear-gradient(
    135deg,
    rgba(202, 101, 16, 0.18) 0%,
    rgba(253, 126, 20, 0.22) 100%
  );
  border-color: rgba(202, 101, 16, 0.45);
  color: #fed7aa;
}

.dark #lddfw_preview_directions #lddfw_total_route b {
  color: #ffedd5;
}

.dark #lddfw_preview_directions #lddfw_total_route span {
  color: #fdba74;
}

.dark #lddfw_preview_directions .lddfw_address {
  background-color: rgba(30, 41, 59, 0.5);
}

.dark #lddfw_preview_directions .lddfw_address,
.dark #lddfw_preview_directions .lddfw_drive {
  border-top-color: #334155;
}

.dark #lddfw_preview_directions .lddfw_address > .col-10 {
  color: #f1f5f9;
}

.dark #lddfw_preview_directions .lddfw_drive > .col-10 {
  color: #cbd5e1;
}

.dark #lddfw_preview_directions .lddfw_drive > .col-10 b {
  color: #f8fafc;
}

.dark #lddfw_preview_directions .lddfw_drive > .col-2 svg.up,
.dark #lddfw_preview_directions .lddfw_drive > .col-2 svg.down {
  fill: #64748b;
}

.dark #lddfw_preview_directions .lddfw_drive > .col-2 svg.fa-car {
  background: #0f172a;
  border-color: #475569;
  fill: #cbd5e1;
}

#lddfw_preview_directions .lddfw_preview_hint {
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 0.75rem 0;
  padding: 0.65rem 0.85rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.dark #lddfw_preview_directions .lddfw_preview_hint {
  background: rgba(30, 64, 175, 0.15);
  border-color: rgba(191, 219, 254, 0.25);
  color: #bfdbfe;
}
.dark .adp-listsel {
  background: #283c69;
}
.container {
  max-width: 42rem !important;
}
#lddfw_page.info h1.lddfw-info-hero__title {
  color: #fff;
}

/* ==========================================================================
   2026 redesign - Driver panel initial (home) screen
   Scoped to #lddfw_home only. Login / Password / Application screens
   share .lddfw_cover but are intentionally not touched here.

   Branding-aware: respects the merchant's Settings → Branding options
   (background / text / button colors). Those are exposed as CSS custom
   properties from index.php. Defaults below match the original brand amber.
   ========================================================================== */

#lddfw_home {
  --lddfw-home-bg: #fed14c;
  --lddfw-home-bg-soft: #fff7df;
  --lddfw-home-text: #1a1300;
  --lddfw-home-text-muted: rgba(26, 19, 0, 0.72);
  --lddfw-home-tile-bg: rgba(255, 255, 255, 0.7);
  --lddfw-home-tile-border: rgba(255, 255, 255, 0.6);
  --lddfw-home-cta-bg-1: #1a1300;
  --lddfw-home-cta-bg-2: #2a2102;
  --lddfw-home-cta-text: #ffffff;
  --lddfw-home-cta-shadow: rgba(20, 20, 30, 0.22);

  background:
    radial-gradient(
      1200px 800px at 80% -10%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      900px 700px at -10% 110%,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(
      180deg,
      var(--lddfw-home-bg-soft) 0%,
      var(--lddfw-home-bg) 100%
    );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 22px 28px;
  overflow: hidden;
}

#lddfw_home::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70vmin;
  height: 70vmin;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0)
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

#lddfw_home .lddfw_cover {
  background: transparent;
  height: auto;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh 0 6vh;
  position: relative;
  z-index: 1;
}

#lddfw_home .lddfw_cover .lddfw_helper {
  display: none;
}

/*
 * Logo tile - translucent rounded card behind the image.
 * The wrapper (.lddfw-home__logo-tile) paints the tile, and the inner <img>
 * has its OWN smaller rounded corners (border-radius: 18px) so opaque or
 * photographic logos still look clean inside the rounded card.
 */
#lddfw_home .lddfw-home__logo-tile {
  display: inline-block;
  padding: 14px;
  border-radius: 28px;
  background: var(--lddfw-home-tile-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 12px 30px rgba(20, 20, 30, 0.12),
    0 2px 6px rgba(20, 20, 30, 0.06),
    inset 0 0 0 1px var(--lddfw-home-tile-border);
  animation: lddfw-home-float 6s ease-in-out infinite;
  line-height: 0;
  max-width: calc(min(220px, 56vw) + 28px);
}

#lddfw_home .lddfw-home__logo-tile img,
#lddfw_home .lddfw_cover img {
  max-width: min(220px, 56vw);
  max-height: 36vh;
  height: auto;
  width: auto;
  border-radius: 18px;
  display: block;
  object-fit: contain;
  /* Tile no longer lives on the image - clear any old per-img tile styles. */
  background: transparent;
  padding: 0;
  box-shadow: none;
  animation: none;
}

#lddfw_home > .container {
  position: relative;
  z-index: 1;
  padding-bottom: 8px;
}

#lddfw_home h1 {
  font-size: clamp(28px, 7.5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
  color: var(--lddfw-home-text);
}

#lddfw_home p {
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.45;
  color: var(--lddfw-home-text-muted);
  margin: 0 auto 22px;
  max-width: 28ch;
}

#lddfw_start.btn.btn-primary.btn-lg.btn-block {
  border: 0;
  border-radius: 16px;
  padding: 16px 22px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(
    180deg,
    var(--lddfw-home-cta-bg-1) 0%,
    var(--lddfw-home-cta-bg-2) 100%
  );
  color: var(--lddfw-home-cta-text);
  box-shadow:
    0 10px 24px var(--lddfw-home-cta-shadow),
    0 2px 4px rgba(20, 20, 30, 0.12);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

#lddfw_start.btn.btn-primary.btn-lg.btn-block:hover,
#lddfw_start.btn.btn-primary.btn-lg.btn-block:focus {
  background: linear-gradient(
    180deg,
    var(--lddfw-home-cta-bg-1) 0%,
    var(--lddfw-home-cta-bg-2) 100%
  );
  color: var(--lddfw-home-cta-text);
  box-shadow:
    0 14px 30px var(--lddfw-home-cta-shadow),
    0 2px 6px rgba(20, 20, 30, 0.14);
  outline: none;
}

#lddfw_start.btn.btn-primary.btn-lg.btn-block:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 6px 16px var(--lddfw-home-cta-shadow);
}

@keyframes lddfw-home-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #lddfw_home .lddfw_cover img {
    animation: none;
  }
}

@media (min-width: 900px) {
  #lddfw_home > .container {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* Dark mode - only redefine the variables (so any explicit branding overrides
   from index.php still win because they use a higher-specificity selector). */
.dark #lddfw_home {
  --lddfw-home-bg: #1f1a07;
  --lddfw-home-bg-soft: #161616;
  --lddfw-home-text: #ffd86a;
  --lddfw-home-text-muted: rgba(255, 255, 255, 0.72);
  --lddfw-home-tile-bg: rgba(255, 255, 255, 0.06);
  --lddfw-home-tile-border: rgba(255, 255, 255, 0.08);
  --lddfw-home-cta-bg-1: #ffd86a;
  --lddfw-home-cta-bg-2: #f4b400;
  --lddfw-home-cta-text: #1a1300;
  --lddfw-home-cta-shadow: rgba(244, 180, 0, 0.35);
  color: #fff;
}

/* ==========================================================================
   2026 redesign - Driver auth screens (login + 4 password / reset screens)
   Scoped to:
     #lddfw_login
     #lddfw_forgot_password
     #lddfw_forgot_password_email_sent
     #lddfw_new_password_created
     #lddfw_create_new_password
   Uses the SAME --lddfw-home-* custom properties so merchant branding (set
   in Settings → Branding and pushed via index.php) automatically themes
   these screens too. Defaults match the home redesign for a cohesive look.
   ========================================================================== */

#lddfw_login,
#lddfw_forgot_password,
#lddfw_forgot_password_email_sent,
#lddfw_new_password_created,
#lddfw_create_new_password,
#lddfw_application,
#lddfw_application_thankyou {
  --lddfw-home-bg: #fed14c;
  --lddfw-home-bg-soft: #fff7df;
  --lddfw-home-text: #1a1300;
  --lddfw-home-text-muted: rgba(26, 19, 0, 0.72);
  --lddfw-home-tile-bg: rgba(255, 255, 255, 0.7);
  --lddfw-home-tile-border: rgba(255, 255, 255, 0.6);
  --lddfw-home-cta-bg-1: #1a1300;
  --lddfw-home-cta-bg-2: #2a2102;
  --lddfw-home-cta-text: #ffffff;
  --lddfw-home-cta-shadow: rgba(20, 20, 30, 0.22);

  background:
    radial-gradient(
      1200px 800px at 80% -10%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      900px 700px at -10% 110%,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(
      180deg,
      var(--lddfw-home-bg-soft) 0%,
      var(--lddfw-home-bg) 100%
    );
  min-height: 100vh;
  text-align: center;
  padding: 20px 16px 24px;
  box-sizing: border-box;
}

/* Hide the legacy amber "cover" strip with the SVG decorative icon - the new
   design uses a centered glass-tile icon inside the auth-card area instead. */
#lddfw_login > .lddfw_cover,
#lddfw_forgot_password > .lddfw_cover,
#lddfw_forgot_password_email_sent > .lddfw_cover,
#lddfw_new_password_created > .lddfw_cover,
#lddfw_create_new_password > .lddfw_cover,
#lddfw_application > .lddfw_cover,
#lddfw_application_thankyou > .lddfw_cover {
  display: none !important;
}

/* Auth card - upgraded version of the existing .lddfw-auth-card pattern. */
#lddfw_login .lddfw-auth-card,
#lddfw_forgot_password .lddfw-auth-card,
#lddfw_forgot_password_email_sent .lddfw-auth-card,
#lddfw_new_password_created .lddfw-auth-card,
#lddfw_create_new_password .lddfw-auth-card,
#lddfw_application .lddfw-auth-card,
#lddfw_application_thankyou .lddfw-auth-card {
  max-width: 440px;
  margin: 8vh auto 24px;
  padding: 28px 24px 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 22px;
  box-shadow:
    0 14px 40px rgba(20, 20, 30, 0.12),
    0 2px 6px rgba(20, 20, 30, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: left;
  position: relative;
}

/* Centered glass icon-tile that floats above the auth card, replacing
   the old amber cover strip. The decorative SVG used to live inside
   .lddfw_cover; we now slot it via ::before so PHP markup stays untouched. */
/* Application form has more fields → wider card. */
#lddfw_application .lddfw-auth-card {
  max-width: 560px;
}

#lddfw_login .lddfw-auth-card::before,
#lddfw_forgot_password .lddfw-auth-card::before,
#lddfw_forgot_password_email_sent .lddfw-auth-card::before,
#lddfw_new_password_created .lddfw-auth-card::before,
#lddfw_create_new_password .lddfw-auth-card::before,
#lddfw_application .lddfw-auth-card::before,
#lddfw_application_thankyou .lddfw-auth-card::before {
  content: "";
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--lddfw-home-tile-bg) center/26px 26px no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%231a1300' d='M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z'/></svg>");
  box-shadow:
    0 10px 24px rgba(20, 20, 30, 0.18),
    inset 0 0 0 1px var(--lddfw-home-tile-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#lddfw_forgot_password .lddfw-auth-card::before,
#lddfw_create_new_password .lddfw-auth-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%231a1300' d='M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z'/></svg>");
}

#lddfw_forgot_password_email_sent .lddfw-auth-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%231a1300' d='M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z'/></svg>");
}

#lddfw_new_password_created .lddfw-auth-card::before,
#lddfw_application_thankyou .lddfw-auth-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%231a1300' d='M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z'/></svg>");
}

/* Driver application form - envelope icon. */
#lddfw_application .lddfw-auth-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%231a1300' d='M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z'/></svg>");
}

/* Add room above the card's content for the floating tile. */
#lddfw_login .lddfw-auth-card,
#lddfw_forgot_password .lddfw-auth-card,
#lddfw_forgot_password_email_sent .lddfw-auth-card,
#lddfw_new_password_created .lddfw-auth-card,
#lddfw_create_new_password .lddfw-auth-card,
#lddfw_application .lddfw-auth-card,
#lddfw_application_thankyou .lddfw-auth-card {
  padding-top: 50px;
}

/* Heading + lead paragraph inside the card. */
#lddfw_login .lddfw-auth-card h1,
#lddfw_forgot_password .lddfw-auth-card h1,
#lddfw_forgot_password_email_sent .lddfw-auth-card h1,
#lddfw_new_password_created .lddfw-auth-card h1,
#lddfw_create_new_password .lddfw-auth-card h1,
#lddfw_application .lddfw-auth-card h1,
#lddfw_application_thankyou .lddfw-auth-card h1 {
  font-size: clamp(20px, 5.2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 8px;
  color: var(--lddfw-home-text);
}

#lddfw_login .lddfw-auth-card > p,
#lddfw_forgot_password .lddfw-auth-card > p,
#lddfw_forgot_password_email_sent .lddfw-auth-card > p,
#lddfw_new_password_created .lddfw-auth-card > p,
#lddfw_create_new_password .lddfw-auth-card > p,
#lddfw_application .lddfw-auth-card > p,
#lddfw_application .lddfw-auth-card form > p,
#lddfw_application_thankyou .lddfw-auth-card > p {
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lddfw-home-text-muted);
  margin: 0 auto 18px;
  max-width: 32ch;
}

/* Inputs - modern rounded with focus ring. */
#lddfw_login .lddfw-auth-card .form-control-lg,
#lddfw_forgot_password .lddfw-auth-card .form-control-lg,
#lddfw_forgot_password_email_sent .lddfw-auth-card .form-control-lg,
#lddfw_new_password_created .lddfw-auth-card .form-control-lg,
#lddfw_create_new_password .lddfw-auth-card .form-control-lg,
#lddfw_application .lddfw-auth-card .form-control,
#lddfw_application .lddfw-auth-card .form-control-lg {
  height: auto;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Textareas need auto height (the rule above sets min-height which is fine). */
#lddfw_application .lddfw-auth-card textarea.form-control,
#lddfw_application .lddfw-auth-card textarea.form-control-lg {
  min-height: 96px;
  resize: vertical;
}

#lddfw_login .lddfw-auth-card .form-control-lg:focus,
#lddfw_forgot_password .lddfw-auth-card .form-control-lg:focus,
#lddfw_forgot_password_email_sent .lddfw-auth-card .form-control-lg:focus,
#lddfw_new_password_created .lddfw-auth-card .form-control-lg:focus,
#lddfw_create_new_password .lddfw-auth-card .form-control-lg:focus,
#lddfw_application .lddfw-auth-card .form-control:focus,
#lddfw_application .lddfw-auth-card .form-control-lg:focus {
  border-color: var(--lddfw-home-cta-bg-1);
  box-shadow: 0 0 0 3px rgba(26, 19, 0, 0.12);
  outline: none;
}

/* Application form field wrapper, label, help text, fieldsets. */
#lddfw_application .lddfw-auth-card .lddfw-field {
  margin-bottom: 0px;
  text-align: left;
}

#lddfw_application .lddfw-auth-card .lddfw-field > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--lddfw-home-text);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

#lddfw_application .lddfw-auth-card .lddfw-req {
  color: #dc3545;
  margin-left: 2px;
}

#lddfw_application .lddfw-auth-card .lddfw-help,
#lddfw_application .lddfw-auth-card .form-text.text-muted {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--lddfw-home-text-muted);
}

#lddfw_application .lddfw-auth-card .lddfw-section-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lddfw-home-text-muted);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(20, 20, 30, 0.08);
}

#lddfw_application .lddfw-auth-card .lddfw-html-block {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lddfw-home-text-muted);
  margin-bottom: 12px;
}

#lddfw_application .lddfw-auth-card .lddfw-check-group,
#lddfw_application .lddfw-auth-card .lddfw-radio-group {
  border: 0;
  margin: 0 0 4px;
  padding: 0;
}

#lddfw_application .lddfw-auth-card .lddfw-check-group > legend,
#lddfw_application .lddfw-auth-card .lddfw-radio-group > legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--lddfw-home-text);
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  width: auto;
  letter-spacing: 0.01em;
}

#lddfw_application .lddfw-auth-card .lddfw-check,
#lddfw_application .lddfw-auth-card .lddfw-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(20, 20, 30, 0.03);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease;
}

#lddfw_application .lddfw-auth-card .lddfw-check:hover,
#lddfw_application .lddfw-auth-card .lddfw-radio:hover {
  background: rgba(20, 20, 30, 0.06);
}

#lddfw_application .lddfw-auth-card .lddfw-check input[type="checkbox"],
#lddfw_application .lddfw-auth-card .lddfw-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--lddfw-home-cta-bg-1);
}

#lddfw_application .lddfw-auth-card input[type="file"].form-control,
#lddfw_application .lddfw-auth-card input[type="file"].form-control-lg {
  padding: 10px 12px;
  font-size: 14px;
  background: rgba(20, 20, 30, 0.03);
  cursor: pointer;
}

/* Primary action buttons - same charcoal pill as the home CTA, branding-aware. */
#lddfw_login .lddfw-auth-card .btn.btn-primary,
#lddfw_forgot_password .lddfw-auth-card .btn.btn-primary,
#lddfw_forgot_password_email_sent .lddfw-auth-card .btn.btn-primary,
#lddfw_new_password_created .lddfw-auth-card .btn.btn-primary,
#lddfw_create_new_password .lddfw-auth-card .btn.btn-primary,
#lddfw_application .lddfw-auth-card .btn.btn-primary {
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(
    180deg,
    var(--lddfw-home-cta-bg-1) 0%,
    var(--lddfw-home-cta-bg-2) 100%
  );
  color: var(--lddfw-home-cta-text);
  box-shadow:
    0 8px 20px var(--lddfw-home-cta-shadow),
    0 2px 4px rgba(20, 20, 30, 0.1);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

#lddfw_login .lddfw-auth-card .btn.btn-primary:hover,
#lddfw_login .lddfw-auth-card .btn.btn-primary:focus,
#lddfw_forgot_password .lddfw-auth-card .btn.btn-primary:hover,
#lddfw_forgot_password .lddfw-auth-card .btn.btn-primary:focus,
#lddfw_forgot_password_email_sent .lddfw-auth-card .btn.btn-primary:hover,
#lddfw_forgot_password_email_sent .lddfw-auth-card .btn.btn-primary:focus,
#lddfw_new_password_created .lddfw-auth-card .btn.btn-primary:hover,
#lddfw_new_password_created .lddfw-auth-card .btn.btn-primary:focus,
#lddfw_create_new_password .lddfw-auth-card .btn.btn-primary:hover,
#lddfw_create_new_password .lddfw-auth-card .btn.btn-primary:focus,
#lddfw_application .lddfw-auth-card .btn.btn-primary:hover,
#lddfw_application .lddfw-auth-card .btn.btn-primary:focus {
  background: linear-gradient(
    180deg,
    var(--lddfw-home-cta-bg-1) 0%,
    var(--lddfw-home-cta-bg-2) 100%
  );
  color: var(--lddfw-home-cta-text);
  box-shadow:
    0 12px 26px var(--lddfw-home-cta-shadow),
    0 2px 6px rgba(20, 20, 30, 0.14);
  outline: none;
}

#lddfw_login .lddfw-auth-card .btn.btn-primary:active,
#lddfw_forgot_password .lddfw-auth-card .btn.btn-primary:active,
#lddfw_forgot_password_email_sent .lddfw-auth-card .btn.btn-primary:active,
#lddfw_new_password_created .lddfw-auth-card .btn.btn-primary:active,
#lddfw_create_new_password .lddfw-auth-card .btn.btn-primary:active,
#lddfw_application .lddfw-auth-card .btn.btn-primary:active {
  transform: translateY(1px) scale(0.99);
}

/* Secondary links: "Forgot password?", "Back to login", "Back to forgot password",
   and the application link below the login card. */
#lddfw_login #lddfw_forgot_password_link,
#lddfw_forgot_password .lddfw_back_to_login_link,
#lddfw_forgot_password_email_sent #lddfw_back_to_forgot_password_link,
#lddfw_create_new_password #lddfw_new_password_reset_link,
#lddfw_application .lddfw_back_to_login_link,
#lddfw_application_thankyou .lddfw_back_to_login_link {
  display: inline-block;
  margin-top: 14px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--lddfw-home-text-muted);
  transition: color 0.15s ease;
}

#lddfw_login #lddfw_forgot_password_link:hover,
#lddfw_forgot_password .lddfw_back_to_login_link:hover,
#lddfw_forgot_password_email_sent #lddfw_back_to_forgot_password_link:hover,
#lddfw_create_new_password #lddfw_new_password_reset_link:hover,
#lddfw_application .lddfw_back_to_login_link:hover,
#lddfw_application_thankyou .lddfw_back_to_login_link:hover {
  color: var(--lddfw-home-text);
  text-decoration: underline;
}

/* "Apply to be a driver" link sits OUTSIDE the white auth-card, directly on
   the page background (which can be any merchant brand color). Style it as a
   self-contained glass pill so it has its own readable surface on any color,
   matching the floating glass icon-tile above the login card. */
#lddfw_login #lddfw_application_link {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--lddfw-home-tile-bg);
  box-shadow:
    inset 0 0 0 1px var(--lddfw-home-tile-border),
    0 4px 12px rgba(20, 20, 30, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--lddfw-home-text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

#lddfw_login #lddfw_application_link:hover,
#lddfw_login #lddfw_application_link:focus {
  background: rgba(255, 255, 255, 0.92);
  color: var(--lddfw-home-text);
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px var(--lddfw-home-tile-border),
    0 6px 16px rgba(20, 20, 30, 0.12);
  outline: none;
}

#lddfw_login #lddfw_application_link:active {
  transform: translateY(1px) scale(0.99);
}

.dark #lddfw_login #lddfw_application_link {
  color: var(--lddfw-home-text);
}

.dark #lddfw_login #lddfw_application_link:hover,
.dark #lddfw_login #lddfw_application_link:focus {
  background: rgba(255, 255, 255, 0.12);
}

/* Center the application's back-to-login link below the form. */
#lddfw_application .lddfw-auth-card .lddfw_back_to_login_link,
#lddfw_application_thankyou .lddfw-auth-card .lddfw_back_to_login_link {
  display: block;
  text-align: center;
}

/* "Forgot password?" right-aligned under the password input. */
#lddfw_login #lddfw_forgot_password_link {
  display: block;
  text-align: right;
  margin: -6px 0 14px;
}

/* Application link container below the auth card. */
#lddfw_login .col-12.text-center {
  margin-top: 16px;
}

/* Alert wrap polish - a bit tighter inside the new card. */
#lddfw_login .lddfw_alert_wrap .alert,
#lddfw_forgot_password .lddfw_alert_wrap .alert,
#lddfw_create_new_password .lddfw_alert_wrap .alert,
#lddfw_application .lddfw_alert_wrap .alert {
  border-radius: 12px;
  font-size: 14px;
}

/* Dark mode - just remap variables; everything else inherits. */
.dark #lddfw_login,
.dark #lddfw_forgot_password,
.dark #lddfw_forgot_password_email_sent,
.dark #lddfw_new_password_created,
.dark #lddfw_create_new_password,
.dark #lddfw_application,
.dark #lddfw_application_thankyou {
  --lddfw-home-bg: #1f1a07;
  --lddfw-home-bg-soft: #161616;
  --lddfw-home-text: #ffd86a;
  --lddfw-home-text-muted: rgba(255, 255, 255, 0.72);
  --lddfw-home-tile-bg: rgba(255, 255, 255, 0.06);
  --lddfw-home-tile-border: rgba(255, 255, 255, 0.08);
  --lddfw-home-cta-bg-1: #ffd86a;
  --lddfw-home-cta-bg-2: #f4b400;
  --lddfw-home-cta-text: #1a1300;
  --lddfw-home-cta-shadow: rgba(244, 180, 0, 0.35);
}

.dark #lddfw_login .lddfw-auth-card,
.dark #lddfw_forgot_password .lddfw-auth-card,
.dark #lddfw_forgot_password_email_sent .lddfw-auth-card,
.dark #lddfw_new_password_created .lddfw-auth-card,
.dark #lddfw_create_new_password .lddfw-auth-card,
.dark #lddfw_application .lddfw-auth-card,
.dark #lddfw_application_thankyou .lddfw-auth-card {
  background: rgba(30, 30, 30, 0.85);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dark #lddfw_login .lddfw-auth-card .form-control-lg,
.dark #lddfw_forgot_password .lddfw-auth-card .form-control-lg,
.dark #lddfw_forgot_password_email_sent .lddfw-auth-card .form-control-lg,
.dark #lddfw_new_password_created .lddfw-auth-card .form-control-lg,
.dark #lddfw_create_new_password .lddfw-auth-card .form-control-lg,
.dark #lddfw_application .lddfw-auth-card .form-control,
.dark #lddfw_application .lddfw-auth-card .form-control-lg {
  background: #2a2a2a;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}

.dark #lddfw_login .lddfw-auth-card .form-control-lg:focus,
.dark #lddfw_forgot_password .lddfw-auth-card .form-control-lg:focus,
.dark #lddfw_forgot_password_email_sent .lddfw-auth-card .form-control-lg:focus,
.dark #lddfw_new_password_created .lddfw-auth-card .form-control-lg:focus,
.dark #lddfw_create_new_password .lddfw-auth-card .form-control-lg:focus,
.dark #lddfw_application .lddfw-auth-card .form-control:focus,
.dark #lddfw_application .lddfw-auth-card .form-control-lg:focus {
  border-color: var(--lddfw-home-cta-bg-1);
  box-shadow: 0 0 0 3px rgba(255, 216, 106, 0.2);
}

/* Dark-mode application form polish. */
.dark #lddfw_application .lddfw-auth-card .lddfw-check,
.dark #lddfw_application .lddfw-auth-card .lddfw-radio {
  background: rgba(255, 255, 255, 0.04);
}
.dark #lddfw_application .lddfw-auth-card .lddfw-check:hover,
.dark #lddfw_application .lddfw-auth-card .lddfw-radio:hover {
  background: rgba(255, 255, 255, 0.08);
}
.dark #lddfw_application .lddfw-auth-card .lddfw-section-heading {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Dark-mode tile icons - re-emit the SVG with an amber fill so the icon
   remains readable on the dark glass tile. (background-color stays as the
   variable `--lddfw-home-tile-bg` which is already remapped above.) */
.dark #lddfw_login .lddfw-auth-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23ffd86a' d='M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z'/></svg>");
}
.dark #lddfw_forgot_password .lddfw-auth-card::before,
.dark #lddfw_create_new_password .lddfw-auth-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23ffd86a' d='M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z'/></svg>");
}
.dark #lddfw_forgot_password_email_sent .lddfw-auth-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23ffd86a' d='M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z'/></svg>");
}
.dark #lddfw_new_password_created .lddfw-auth-card::before,
.dark #lddfw_application_thankyou .lddfw-auth-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23ffd86a' d='M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z'/></svg>");
}
.dark #lddfw_application .lddfw-auth-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23ffd86a' d='M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z'/></svg>");
}

#lddfw_application .lddfw-field-file,
#lddfw_application .lddfw-field-checkbox,
#lddfw_application .lddfw-field-radio,
#lddfw_application .lddfw-field-select {
  margin-bottom: 15px !important;
}