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,
");
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,
");
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
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,
");
}
/* 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,
");
}
.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,
");
}
/* ==========================================================================
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,
") !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,
");
}
.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,
");
}
.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 `
` 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 `` 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,
");
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,
");
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,
");
}
.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,
");
}
.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,
");
}
/* ==========================================================================
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,
");
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,
");
}
.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,
");
}
.lddfw-out-screen #route_destination_title::before {
background-image: url("data:image/svg+xml;utf8,
");
}
.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,
");
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,
");
}
.lddfw-out-screen .lddfw_order_distance::before {
background-image: url("data:image/svg+xml;utf8,
");
}
.lddfw-out-screen .lddfw_order_coordinates::before {
background-image: url("data:image/svg+xml;utf8,
");
}
/* 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,
");
}
/* --- 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: "
1 h 23 min (18.4 mi)". 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,
");
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 "
durationdistance" 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,
");
}
/* 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,
");
}
/* 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,
");
}
/* 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,
");
}
/* 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,
");
}
/* Dollar icon for Total. */
.lddfw-order-screen #lddfw_order .lddfw_box p#lddfw_order_total::before {
background-image: url("data:image/svg+xml;utf8,
");
}
/* 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,
");
}
.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
AND on its
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,");
}
.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:
address
"),
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,");
mask-image: url("data:image/svg+xml;utf8,");
}
#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,");
mask-image: url("data:image/svg+xml;utf8,");
}
#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,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* 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,");
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 ![]()
* 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,");
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,");
}
#lddfw_forgot_password_email_sent .lddfw-auth-card::before {
background-image: url("data:image/svg+xml;utf8,");
}
#lddfw_new_password_created .lddfw-auth-card::before,
#lddfw_application_thankyou .lddfw-auth-card::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Driver application form - envelope icon. */
#lddfw_application .lddfw-auth-card::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* 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,");
}
.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,");
}
.dark #lddfw_forgot_password_email_sent .lddfw-auth-card::before {
background-image: url("data:image/svg+xml;utf8,");
}
.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,");
}
.dark #lddfw_application .lddfw-auth-card::before {
background-image: url("data:image/svg+xml;utf8,");
}
#lddfw_application .lddfw-field-file,
#lddfw_application .lddfw-field-checkbox,
#lddfw_application .lddfw-field-radio,
#lddfw_application .lddfw-field-select {
margin-bottom: 15px !important;
}
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;margin:0 0 -4px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left;padding:0}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin:0;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:var(--wc-form-color-background,#fff);color:var(--wc-form-color-text,#000);border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected],.select2-results__option[data-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#444}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none;margin:5px 5px 0 0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li:before{content:"";display:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#444;margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid #000 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:0 0;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option[data-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected]{background-color:var(--wp-admin-theme-color,#0073aa);color:#fff}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single:focus{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#444}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:0 0;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:linear-gradient(to bottom,#fff 0,#eee 50%);background-repeat:repeat-x}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{float:right}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected],.select2-container--classic .select2-results__option--highlighted[data-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:var(--wp-admin-theme-color,#0073aa)}
/**
* Driver application form - visual polish.
*
* Applies to both the /driver/ page form (#lddfw_application_frm) and the
* shortcode form (.lddfw-sc-form). Styles are scoped so they can't bleed
* into the rest of the site.
*/
/* Field spacing */
.lddfw_application_frm .lddfw-field,
.lddfw-sc-form .lddfw-field {
margin-bottom: 18px;
}
/* Labels */
.lddfw_application_frm .lddfw-field > label,
.lddfw-sc-form .lddfw-field > label {
display: block;
font-weight: 600;
font-size: 14px;
color: #1f2937;
margin-bottom: 6px;
}
.lddfw_application_frm .lddfw-req,
.lddfw-sc-form .lddfw-req {
color: #dc2626;
margin-left: 2px;
}
/* Inputs, textarea, select - consistent, modern look */
.lddfw_application_frm .lddfw-field input[type="text"],
.lddfw_application_frm .lddfw-field input[type="email"],
.lddfw_application_frm .lddfw-field input[type="tel"],
.lddfw_application_frm .lddfw-field input[type="url"],
.lddfw_application_frm .lddfw-field input[type="number"],
.lddfw_application_frm .lddfw-field input[type="date"],
.lddfw_application_frm .lddfw-field input[type="file"],
.lddfw_application_frm .lddfw-field textarea,
.lddfw_application_frm .lddfw-field select,
.lddfw-sc-form .lddfw-field input[type="text"],
.lddfw-sc-form .lddfw-field input[type="email"],
.lddfw-sc-form .lddfw-field input[type="tel"],
.lddfw-sc-form .lddfw-field input[type="url"],
.lddfw-sc-form .lddfw-field input[type="number"],
.lddfw-sc-form .lddfw-field input[type="date"],
.lddfw-sc-form .lddfw-field input[type="file"],
.lddfw-sc-form .lddfw-field textarea,
.lddfw-sc-form .lddfw-field select {
width: 100%;
padding: 10px 12px;
font-size: 15px;
line-height: 1.4;
color: #111827;
background-color: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background-color 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
.lddfw_application_frm .lddfw-field textarea,
.lddfw-sc-form .lddfw-field textarea {
min-height: 96px;
resize: vertical;
}
.lddfw_application_frm .lddfw-field input:focus,
.lddfw_application_frm .lddfw-field textarea:focus,
.lddfw_application_frm .lddfw-field select:focus,
.lddfw-sc-form .lddfw-field input:focus,
.lddfw-sc-form .lddfw-field textarea:focus,
.lddfw-sc-form .lddfw-field select:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
/* Help text */
.lddfw_application_frm .lddfw-help,
.lddfw-sc-form .lddfw-help {
display: block;
font-size: 12px;
color: #6b7280;
margin-top: 6px;
}
/* Section heading + html block */
.lddfw_application_frm .lddfw-section-heading,
.lddfw-sc-form .lddfw-section-heading {
font-size: 18px;
font-weight: 700;
color: #111827;
margin: 24px 0 8px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
/* Checkbox / radio groups */
.lddfw_application_frm .lddfw-check-group,
.lddfw_application_frm .lddfw-radio-group,
.lddfw-sc-form .lddfw-check-group,
.lddfw-sc-form .lddfw-radio-group {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px 12px;
margin: 0;
background: #f9fafb;
}
.lddfw_application_frm .lddfw-check-group legend,
.lddfw_application_frm .lddfw-radio-group legend,
.lddfw-sc-form .lddfw-check-group legend,
.lddfw-sc-form .lddfw-radio-group legend {
padding: 0 4px;
font-size: 14px;
font-weight: 600;
color: #1f2937;
}
.lddfw_application_frm .lddfw-check,
.lddfw_application_frm .lddfw-radio,
.lddfw-sc-form .lddfw-check,
.lddfw-sc-form .lddfw-radio {
display: block;
padding: 4px 0;
font-size: 14px;
color: #374151;
cursor: pointer;
}
/* ----- Select2 integration -----
* Match the SIBLING / |