/*
 * Dispatch widget — compact "estimated delivery" notice.
 * Shown on the cart page, side cart drawer, first-party checkout, product page
 * and post-payment page. The arrival date leads; the operational reason
 * follows. Calm, no card fill — all colours use --ds-* tokens.
 */

.ds-dispatch {
    margin: 12px 0;
    padding-top: 10px;
    border-top: 1px solid var(--ds-border-color-light);
    line-height: 1.4;
}

.ds-dispatch p {
    margin: 0;
}

.ds-dispatch-delivery {
    font-size: 14px;
    color: var(--ds-dark-text-color);
}

.ds-dispatch-delivery strong {
    font-weight: 600;
}

.ds-dispatch-line {
    font-size: 13px;
    color: var(--ds-dark-text-color);
    margin-top: 3px;
}

.ds-dispatch-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--ds-interactive-color);
    vertical-align: middle;
}

.ds-dispatch-time {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ds-dispatch-sub {
    font-size: 12px;
    color: var(--ds-light-text-color-light);
    margin-top: 3px;
}

/* Cart and cart drawer: match the checkout's compact reassurance treatment. */
.ds-cart-dispatch {
    padding: 14px 0 16px;
    border-bottom: 1px solid var(--ds-border-color-light);
}

.ds-cart-dispatch:empty {
    display: none;
}

.ds-cart-dispatch > .ds-dispatch {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 1px 0 1px 14px;
    border-top: 0;
    border-left: 2px solid var(--ds-primary-color);
}

.ds-cart-dispatch .ds-dispatch-line,
.ds-cart-dispatch .ds-dispatch-sub {
    margin-top: 0;
}

#cartModal .ds-cart-dispatch {
    padding: 12px 0 0;
    border-bottom: 0;
}

#cartModal .ds-cart-dispatch > .ds-dispatch {
    gap: 2px;
}

#cartModal .modal-cart-bottom > .pb-4 {
    padding-bottom: 0 !important;
}

/* Shared reassurance panel on product and post-payment pages. Keep the outer
   geometry identical while the product slot is loading so option changes do
   not move the purchase controls below it. */
.ds-dispatch-panel {
    box-sizing: border-box;
    min-height: 97px;
    margin: 0;
    padding: 16px 0 18px;
    border-bottom: 1px solid var(--ds-border-color-light);
    background: var(--ds-white-color);
}

.ds-dispatch-panel:empty:not(.is-loading) {
    display: none;
}

.ds-dispatch-panel > .ds-dispatch {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 1px 0 1px 14px;
    border-top: 0;
    border-left: 2px solid var(--ds-primary-color);
}

.ds-dispatch-panel .ds-dispatch-delivery {
    color: var(--ds-dark-text-color);
    font-size: 14px;
    line-height: 1.45;
}

.ds-dispatch-panel .ds-dispatch-line {
    display: flex;
    align-items: center;
    margin-top: 0;
    color: var(--ds-secondary-text-color);
    font-size: 13px;
    line-height: 1.4;
}

.ds-dispatch-panel .ds-dispatch-dot {
    flex: 0 0 auto;
    margin-right: 8px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-interactive-color) 12%, transparent);
}

.ds-dispatch-panel .ds-dispatch-sub {
    margin-top: 0;
    color: var(--ds-light-text-color);
    font-size: 12px;
    line-height: 1.45;
}

/* --- product page: compact one-line variant in the sticky price block ---
   Same payload/markup as the full widget; CSS reduces it to a single line:
   in-stock states keep only the dot + "ships ..." line, made-to-order keeps
   only the "Estimated delivery ..." line. */
.ds-dispatch-compact .ds-dispatch {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}

.ds-dispatch-compact .ds-dispatch-sub {
    display: none;
}

.ds-dispatch-compact .ds-dispatch:not([data-mm-state="not_eligible"]) .ds-dispatch-delivery {
    display: none;
}

.ds-dispatch-compact .ds-dispatch-line {
    margin-top: 0;
}

.ds-dispatch-compact .ds-dispatch-delivery {
    font-size: 13px;
}

/* "Choose an option to check availability" prompt (no resolvable variant) */
.ds-dispatch-choose {
    font-size: 13px;
    color: var(--ds-blue-color);
}

/* Reserve the compact line's actual 13px × 1.4 line-height in both states.
   Loading previously forced 20px onto an approximately 18.2px loaded line,
   causing the price block below it to move by roughly two pixels. */
.ds-dispatch-slot.ds-dispatch-compact {
    min-height: 18.2px;
}

/* Three classes must out-rank the generic loading rule below. */
.ds-dispatch-slot.ds-dispatch-compact.is-loading {
    min-height: 18.2px;
    margin: 0;
    border-top: 0;
}

/* --- product page: placeholder slot, filled via AJAX on page load ------ */
.ds-dispatch-slot.is-loading {
    min-height: 48px;
    margin: 12px 0;
    border-top: 1px solid var(--ds-border-color-light);
    background: linear-gradient(90deg, transparent 25%, var(--ds-border-color-light) 50%, transparent 75%);
    background-size: 400% 100%;
    animation: ds-dispatch-shimmer 1.4s ease infinite;
}

/* The full product slot uses the same 97px panel in both states. The old
   generic loading rule changed its margins, padding and borders, which caused
   the option controls and buy buttons to jump on every AJAX refresh. */
.ds-dispatch-slot.ds-dispatch-panel.is-loading {
    min-height: 97px;
    margin: 0;
    padding: 16px 0 18px;
    border-top: 0;
    border-bottom: 1px solid var(--ds-border-color-light);
}

@keyframes ds-dispatch-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-dispatch-slot.is-loading {
        animation: none;
    }
}