/**
 * EXIM ↔ DHL Integration — Frontend styles
 *
 * Scoped under `.exim-dhl-*` class names so no selectors leak into the
 * rest of the theme. Only loaded on checkout + My Account view-order
 * pages (see Exim_Dhl_Frontend::enqueue_assets).
 */

/* ------------------------------------------------------------------------
 * Shared tokens
 * ---------------------------------------------------------------------- */
.exim-dhl-track,
.exim-dhl-cpt-notice-row .exim-dhl-cpt-notice {
    --edhl-red:        #D40511;
    --edhl-yellow:     #FFCC00;
    --edhl-text:       #1f2937;
    --edhl-text-muted: #6b7280;
    --edhl-border:     #e5e7eb;
    --edhl-card-bg:    #ffffff;
    --edhl-success:    #10b981;
    --edhl-warning:    #f59e0b;
    --edhl-danger:     #ef4444;
    --edhl-info:       #3b82f6;
    --edhl-radius:     10px;
    --edhl-shadow:     0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
}

/* ------------------------------------------------------------------------
 * Checkout CPT Incoterms notice
 *
 * Small, non-intrusive notice under the shipping options row. Uses the
 * review-order table's rhythm so it doesn't break the existing layout.
 * ---------------------------------------------------------------------- */
.exim-dhl-cpt-notice-row td {
    border-top: none !important;
    padding: 8px 0 16px !important;
    text-align: left !important; /* override WC's right-align on tfoot td */
}
.exim-dhl-cpt-notice {
    margin: 0;
    padding: 10px 14px;
    background: #fff8e1;
    border: 1px solid #ffe49a;
    border-left: 3px solid var(--edhl-yellow);
    border-radius: 6px;
    color: #5b3e00;
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.exim-dhl-cpt-notice .dashicons {
    flex: 0 0 auto;
    color: #b45309;
    margin-top: 1px;
}

/* ------------------------------------------------------------------------
 * Checkout shipping-fee disclaimer (PM brief)
 *
 * Visually distinct from the CPT Incoterms notice (yellow) — uses an
 * info-blue palette so customers see two separate messages, not one
 * accidentally-merged block. Sits ABOVE the CPT notice in the table
 * (priority 5 vs 10).
 * ---------------------------------------------------------------------- */
.exim-dhl-disclaimer-row td {
    border-top: none !important;
    padding: 8px 0 8px !important;
    text-align: left !important; /* override WC's right-align on tfoot td */
}
.exim-dhl-disclaimer {
    margin: 0;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.exim-dhl-disclaimer .dashicons {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}
.exim-dhl-disclaimer strong { color: #1e40af; }

/* ------------------------------------------------------------------------
 * My Account — Shipment tracking block
 * ---------------------------------------------------------------------- */
.exim-dhl-track {
    margin: 24px 0 32px;
    padding: 22px 24px;
    background: var(--edhl-card-bg);
    border: 1px solid var(--edhl-border);
    border-radius: var(--edhl-radius);
    box-shadow: var(--edhl-shadow);
    color: var(--edhl-text);
    font-size: 14px;
}
.exim-dhl-track__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px 0;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--edhl-text);
    border: none;
}
.exim-dhl-track__heading .dashicons {
    color: var(--edhl-red);
}

/* Summary (tracking number + status) ------------------------------------- */
.exim-dhl-track__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--edhl-border);
    margin-bottom: 16px;
}
.exim-dhl-track__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.exim-dhl-track__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--edhl-text-muted);
    text-transform: uppercase;
}
.exim-dhl-track__tracking-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--edhl-red);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.exim-dhl-track__tracking-number:hover { text-decoration: underline; }
.exim-dhl-track__tracking-number .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    opacity: 0.55;
}

/* Status pill ------------------------------------------------------------ */
.exim-dhl-track__status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    width: fit-content;
}
.exim-dhl-track__status--success { background: rgba(16, 185, 129, 0.12); color: #065f46; }
.exim-dhl-track__status--active  { background: rgba(59, 130, 246, 0.12); color: #1e40af; }
.exim-dhl-track__status--pending { background: rgba(245, 158, 11, 0.12); color: #92400e; }
.exim-dhl-track__status--failed  { background: rgba(239, 68, 68, 0.12);  color: #991b1b; }

/* Event timeline --------------------------------------------------------- */
.exim-dhl-track__timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.exim-dhl-track__timeline::before {
    /* Vertical line linking the event dots. */
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--edhl-border);
}
.exim-dhl-track__event {
    position: relative;
    padding: 0 0 14px 22px;
}
.exim-dhl-track__event:last-child { padding-bottom: 0; }
.exim-dhl-track__event-dot {
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--edhl-border);
    box-shadow: 0 0 0 3px #fff;
}
.exim-dhl-track__event:first-child .exim-dhl-track__event-dot {
    background: var(--edhl-red);
}
.exim-dhl-track__event-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}
.exim-dhl-track__event-meta {
    font-size: 12px;
    color: var(--edhl-text-muted);
}

.exim-dhl-track__pending {
    padding: 12px 0;
    color: var(--edhl-text-muted);
    font-style: italic;
    font-size: 13px;
}
.exim-dhl-track__updated {
    margin: 14px 0 0 0;
    font-size: 11px;
    color: var(--edhl-text-muted);
    text-align: right;
}

/* ------------------------------------------------------------------------
 * Checkout shipping-method rate cards
 *
 * WC's default `<ul#shipping_method>` is a plain unstyled list — each row
 * is a radio + label + ": $price" on one line. We wrap every label with
 * our own `.exim-dhl-rate` grid so customers see a proper product card
 * (logo · name+ETA · price), and tighten the parent <ul> so the rows
 * line up with the rest of the EXIM checkout cards.
 *
 * Scoped aggressively with `ul#shipping_method` + `.exim-dhl-rate` to
 * avoid bleeding into other plugins' shipping tables.
 * ---------------------------------------------------------------------- */

/* Kill the default bullets/margins so the rows look like cards, not a list. */
ul#shipping_method,
ul.woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One row = one card. Radio is WC's; we only style the wrapper label. */
ul#shipping_method li,
ul.woocommerce-shipping-methods li {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin: 0 0 5px;
    padding: 0;
    background: transparent;
}
ul#shipping_method li:last-child,
ul.woocommerce-shipping-methods li:last-child { margin-bottom: 0; }

/* Put the radio in a tidy vertical-centered lane. */
ul#shipping_method li > input[type="radio"],
ul.woocommerce-shipping-methods li > input[type="radio"] {
    flex: 0 0 auto;
    margin: auto 0 auto 6px;
    accent-color: var(--edhl-red, #D40511);
    transform: scale(1);
}

/* The label wraps our card — but the theme's checkout CSS uses
 * `!important` on label padding/border/background, so we don't fight
 * it. The rate card's visual chrome (border, bg) lives on the LI
 * instead (theme already styles it that way). The badge positioning
 * context moves DOWN to `.exim-dhl-rate` (see below) which we own. */
ul#shipping_method li > label,
ul.woocommerce-shipping-methods li > label {
    flex: 1 1 auto;
    cursor: pointer;
}
/* Selected state: highlight with DHL yellow accent + primary shadow. */
ul#shipping_method li > input[type="radio"]:checked + label,
ul.woocommerce-shipping-methods li > input[type="radio"]:checked + label {
    border-color: #D40511;
    background: #fffaf5;
    box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.08);
}
ul#shipping_method li > label:hover,
ul.woocommerce-shipping-methods li > label:hover {
    border-color: #D40511;
    background: #fffaf5;
}

/* The custom card contents (emitted from render_rate_card())
 *
 * Clean 2-row × 3-column grid:
 *   ┌─────────────────────────────┐
 *   │ [LOGO] [NAME + ?]   [BADGE] │  row 1
 *   │ [LOGO] [📅 ETA  ]   [PRICE] │  row 2
 *   └─────────────────────────────┘
 *
 * Logo spans both rows (vertically centered); body has name on top and
 * ETA below; badge sits top-right; price sits bottom-right. Each item
 * has its own grid-row so heights stay aligned across One/Two Shipment
 * cards (regardless of how many ETA legs are below the name). */
.exim-dhl-rate {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    color: #1f2937;
    font-size: 12.5px;
}
.exim-dhl-rate__logo {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
}
.exim-dhl-rate__body {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

/* DHL red logo badge — smaller still. */
.exim-dhl-rate__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 22px;
    background: #FFCC00;
    color: #D40511;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.4px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Head row inside body: service name + (?) info icon side-by-side.
 * `overflow: visible` is essential — it lets the (?) tooltip ::after
 * extend ABOVE the button without being clipped by the name's
 * overflow:hidden (needed for ellipsis). */
.exim-dhl-rate__head {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: visible;
}

/* Service name — bold, ellipsis if long. Lives inside __head as a
 * SIBLING of the (?) button so its overflow:hidden (required by
 * text-overflow:ellipsis) doesn't clip the tooltip. */
.exim-dhl-rate__name {
    font-weight: 700;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ONE SHIPMENT / TWO SHIPMENTS pill — PROMINENT top-right.
 * Lives as a grid item (column 3, row 1) — so the column width adjusts
 * to the badge's natural size, and there's no absolute-positioning
 * collision with the price (which sits in column 3, row 2). */
.exim-dhl-rate__badge {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
.exim-dhl-rate__badge--one {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid rgba(14, 116, 144, 0.25);
}
.exim-dhl-rate__badge--two {
    background: #FFCC00;
    color: #78350f;
    border: 1px solid rgba(180, 83, 9, 0.25);
}

/* (?) info button — small subtle helper INLINE next to the service
 * name. Now that the badge owns the prominent top-right corner, the
 * "?" plays a supporting role: just a tiny grey circle that reveals
 * the service description on hover / focus / click. */
.exim-dhl-rate__info {
    position: relative; /* anchor for the tooltip ::after */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #475569;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.exim-dhl-rate__info:hover,
.exim-dhl-rate__info:focus {
    background: #005daa;
    color: #ffffff;
    outline: none;
}
.exim-dhl-rate__info[data-tooltip]:hover::after,
.exim-dhl-rate__info[data-tooltip]:focus::after,
.exim-dhl-rate__info[data-tooltip]:hover::before,
.exim-dhl-rate__info[data-tooltip]:focus::before {
    pointer-events: none;
}
.exim-dhl-rate__info[data-tooltip]:hover::after,
.exim-dhl-rate__info[data-tooltip]:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a2533;
    color: #ffffff;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    width: max-content;
    max-width: 240px;
    white-space: normal;
    text-align: left;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.exim-dhl-rate__info[data-tooltip]:hover::before,
.exim-dhl-rate__info[data-tooltip]:focus::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a2533;
    z-index: 100;
}

/* Allow tooltip to escape the parent label/li (which often have
 * overflow:hidden by default in WC themes). */
.exim-shipping-target ul#shipping_method li,
.exim-shipping-target ul#shipping_method li > label,
ul#shipping_method li,
ul#shipping_method li > label {
    overflow: visible;
}

/* ETA block — single-date layout. */
.exim-dhl-rate__eta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #475569;
    line-height: 1.3;
}
.exim-dhl-rate__eta .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
    color: #64748b;
}
/* Two Shipment ETA — two legs on one line if space allows, stack on narrow. */
.exim-dhl-rate__eta--two {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 11.5px;
}
.exim-dhl-rate__eta-leg {
    display: inline-flex;
    gap: 3px;
}
.exim-dhl-rate__eta-leg .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}
.exim-dhl-rate__eta-leg .dashicons-yes {
    color: #10b981;
}
.exim-dhl-rate__eta-leg .dashicons-clock {
    color: #f59e0b;
}
/* Admin-authored delivery description (the "Customer-facing description"
 * template with the [DATE] token substituted). Sentences run longer than
 * a bare date, so top-align the icon for clean multi-line wrap — for both
 * the single-line variant and each leg of the Two Shipment variant. */
.exim-dhl-rate__eta--custom {
    align-items: flex-start;
}
.exim-dhl-rate__eta--custom .dashicons {
    margin-top: 1px;
    flex-shrink: 0;
}
.exim-dhl-rate__eta--custom .exim-dhl-rate__eta-leg {
    align-items: flex-start;
}

/* Two Shipment selected card accent. */
ul#shipping_method li > input[type="radio"]:checked + label:has(.exim-dhl-rate--two),
ul.woocommerce-shipping-methods li > input[type="radio"]:checked + label:has(.exim-dhl-rate--two) {
    border-color: #FFCC00;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.18);
}

/* Price — bold, brand red. */
/* Price — bottom-right grid cell (column 3, row 2). Aligned with the
 * ETA row vertically so the customer's eye sweeps name→price→ETA in a
 * natural Z-pattern. */
.exim-dhl-rate__price {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    font-weight: 700;
    font-size: 15px;
    color: #D40511;
    white-space: nowrap;
}
.exim-dhl-rate__price .woocommerce-Price-amount { color: inherit; }

/* "Estimated" / mixed-cart note — appears under the ETA row when a
 * Tier B / mixed-Tier rate is in play. Subtle warning tone. */
.exim-dhl-rate__estimated-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fff8e1;
    border-left: 2px solid #FFCC00;
    color: #78350f;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    align-self: flex-start;
}
.exim-dhl-rate__estimated-note .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    color: #b45309;
}

/* Manual-quote rate variant — full Tier-C cart fallback. No badge,
 * no price; uses an info-styled body to communicate "we'll follow
 * up" rather than "free shipping". Body spans the full width since
 * there's no price column to reserve space for. */
.exim-dhl-rate--manual {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
}
.exim-dhl-rate--manual .exim-dhl-rate__logo {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}
.exim-dhl-rate--manual .exim-dhl-rate__body {
    grid-column: 2;
    grid-row: 1;
}
.exim-dhl-rate--manual .exim-dhl-rate__name {
    color: #b45309;
    font-weight: 700;
}
.exim-dhl-rate__manual-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    color: #5b3e00;
    font-size: 12px;
    line-height: 1.5;
}
.exim-dhl-rate__manual-note .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #b45309;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Manual-quote rate selected state — different accent (yellow) so it
 * doesn't look identical to a normal "in-spec" selection. */
ul#shipping_method li > input[type="radio"]:checked + label:has(.exim-dhl-rate--manual),
ul.woocommerce-shipping-methods li > input[type="radio"]:checked + label:has(.exim-dhl-rate--manual) {
    border-color: #FFCC00;
    background: #fffbeb;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.18);
}

/* Mobile stack — 2-col layout (logo + body), badge + price stack at bottom. */
@media (max-width: 600px) {
    .exim-dhl-rate {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 8px;
        row-gap: 4px;
    }
    .exim-dhl-rate__logo {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }
    .exim-dhl-rate__badge {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    .exim-dhl-rate__body {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .exim-dhl-rate__price {
        grid-column: 1 / -1;
        grid-row: 3;
        text-align: right;
        font-size: 14px;
    }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 600px) {
    .exim-dhl-track { padding: 18px; }
    .exim-dhl-track__summary { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------------
 * Hide "Ship to a different address?" toggle + the alternate shipping
 * fields it would unlock. PM removed this feature — billing address is
 * always used as shipping (also enforced server-side via the
 * `woocommerce_ship_to_different_address_checked` filter).
 * ---------------------------------------------------------------------- */
.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .shipping_address {
    display: none !important;
}

/* ------------------------------------------------------------------------
 * Cart page: hide the entire Shipping section + change-address calculator.
 *
 * Rationale: PM wants the customer to pick their shipping option ONLY at
 * checkout, not on the cart page. The PHP filter
 * `woocommerce_cart_ready_to_calc_shipping` already makes WC skip the
 * calculation, but Elementor's cart-totals widget still emits empty
 * shipping markup + the calculator form. CSS hides those visually
 * without affecting checkout (which uses .woocommerce-checkout body class).
 * ---------------------------------------------------------------------- */
body.woocommerce-cart .cart_totals .shipping,
body.woocommerce-cart .cart-collaterals .shipping,
body.woocommerce-cart .woocommerce-shipping-totals,
body.woocommerce-cart .woocommerce-shipping-calculator,
body.woocommerce-cart .shipping-calculator-form,
body.woocommerce-cart .shipping-calculator-button,
body.woocommerce-cart .e-shop-shipping-calculator,
body.woocommerce-cart [class*="shipping-calculator"] {
    display: none !important;
}

/* ========================================================================
 * Multi-step checkout (DigiKey-style — A1 / A2 reference)
 *
 * 3-step flow:
 *   Step 1 — Address (billing fields)
 *   Step 2 — Shipping options (LEFT: warehouse card with rates, RIGHT: summary)
 *   Step 3 — Payment + Place Order
 *
 * Body class `exim-checkout-step-N` (N = 1/2/3) drives show/hide.
 * Brand colors: primary blue #005daa, light grey background.
 * ====================================================================== */

/* Variables — easier to tweak later */
.woocommerce-checkout {
    --exim-co-bg:        #f4f6f8;
    --exim-co-card-bg:   #ffffff;
    --exim-co-border:    #e1e7ed;
    --exim-co-border-strong: #c5cdd6;
    --exim-co-text:      #1a2533;
    --exim-co-muted:     #5e6b7c;
    --exim-co-primary:   #005daa;
    --exim-co-primary-hover: #004884;
    --exim-co-radius:    4px;
    --exim-co-radius-lg: 6px;
    --exim-co-warning-bg:   #fff8e1;
    --exim-co-warning-bd:   #ffe49a;
    --exim-co-warning-fg:   #5b3e00;
}

/* Global page background — softer like DigiKey */
body.woocommerce-checkout {
    background: var(--exim-co-bg);
}

/* Right column stays WC default ("Your order" heading + items table +
 * totals). Per-step adjustments:
 *
 *  - tr.shipping (Shipment row) — visibility owned by JS
 *      (syncShippingSummaryRow). Shows whenever a rate is selected,
 *      hides only when no selection exists. So in step 1 — even on
 *      first paint — WC's auto-selected first rate already populates
 *      the row, and after the user actively picks in step 2 then goes
 *      back to step 1 (Edit Address), the chosen rate stays visible.
 *  - tr.shipping-options-row — hidden in all steps (the UL was moved
 *      to the LEFT-column warehouse card).
 *  - #payment block in #order_review — hidden in all steps (moved to
 *      LEFT in step 3 via JS; step 1/2 it's just hidden).
 *
 * Note: Elementor's checkout widget puts #payment in a separate
 * `.e-checkout__order_review-2` wrapper (sibling of #order_review),
 * so we need to target that wrapper too. */

/* Always hide the empty options-row + payment block in #order_review */
#order_review tr.shipping-options-row,
.e-checkout__order_review #payment,
.e-checkout__order_review-2 #payment,
.e-checkout__order_review .woocommerce-checkout-payment,
.e-checkout__order_review-2 .woocommerce-checkout-payment {
    display: none !important;
}

/* Style the injected "Shipment" summary content (name + price). */
.exim-summary-ship-name {
    color: #1a2533;
}
/* Pending variant — when manual-quote rate selected. Italic + warning
 * tone so customer registers it's not a normal "$X" value. */
.exim-summary-ship-name--pending {
    color: #b45309 !important;
    font-style: italic;
    font-weight: 600;
}
.exim-summary-ship-price {
    color: #475569;
    font-weight: 600;
    margin-left: 6px;
    white-space: nowrap;
}

/* ---- Step bars (Address / Shipping) ----
 * Thin pills above the step content. Click Edit → navigate back to
 * source step. CSS visibility controlled by body class.
 */
.exim-step-bar {
    background: var(--exim-co-card-bg);
    border: 1px solid var(--exim-co-border);
    border-radius: var(--exim-co-radius);
    padding: 14px 18px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.exim-step-bar__label {
    font-weight: 600;
    color: var(--exim-co-text);
    font-size: 15px;
}
.exim-step-edit {
    background: transparent;
    border: 0;
    color: var(--exim-co-primary);
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: var(--exim-co-radius);
}
.exim-step-edit:hover,
.exim-step-edit:focus {
    color: var(--exim-co-primary-hover);
    text-decoration: underline;
    outline: none;
}

/* Step toggle: hide the bars / step content per body class */
body.exim-checkout-step-1 .exim-step-bar,
body.exim-checkout-step-2 .exim-step-bar--shipping {
    display: none !important;
}
body.exim-checkout-step-1 .exim-step2-content,
body.exim-checkout-step-1 .exim-step3-content,
body.exim-checkout-step-2 .exim-step3-content,
body.exim-checkout-step-3 .exim-step2-content {
    display: none !important;
}

/* Hide billing fields + Step 1 actions on step 2/3 */
body.exim-checkout-step-2 #customer_details,
body.exim-checkout-step-3 #customer_details,
body.exim-checkout-step-2 .exim-step1-actions,
body.exim-checkout-step-3 .exim-step1-actions {
    display: none !important;
}

/* ---- Step 1 actions (Continue button to advance to Step 2) ---- */
.exim-step1-actions {
    margin-top: 24px;
}

/* Continue / primary CTA */
.exim-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--exim-co-primary);
    color: #ffffff !important;
    border: 0;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: var(--exim-co-radius);
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
    line-height: 1.2;
    min-width: 180px;
}
.exim-continue:hover,
.exim-continue:focus {
    background: var(--exim-co-primary-hover);
    color: #ffffff !important;
    text-decoration: none;
    outline: none;
}

.exim-step2-actions {
    margin-top: 8px;
}

/* ---- Step 2 content: Shipping section ---- */
.exim-step2-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.exim-shipping-heading,
.exim-payment-heading {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--exim-co-text);
    line-height: 1.3;
}

/* Yellow alert (only renders if cart has backorder items) */
.exim-alert--backorder {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--exim-co-warning-bg);
    border: 1px solid var(--exim-co-warning-bd);
    border-radius: var(--exim-co-radius);
    color: var(--exim-co-warning-fg);
    font-size: 14px;
    line-height: 1.5;
}
.exim-alert--backorder .dashicons {
    color: #b45309;
    flex: 0 0 auto;
    margin-top: 2px;
}

/* Warehouse card — 2 columns: info on left, rate methods on right */
.exim-warehouse-card {
    background: var(--exim-co-card-bg);
    border: 1px solid var(--exim-co-border);
    border-radius: var(--exim-co-radius);
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
}
/* Notice blocks inside the warehouse card info column.
 *
 *   - Disclaimer (blue accent) — provisional shipping fee notice.
 *   - CPT (yellow accent) — international duties / Incoterms warning.
 *
 * Same shape (rounded box with left-color stripe + bold lead-in) so
 * the two paragraphs read as a paired info/warning stack. */
.exim-warehouse-card__disclaimer,
.exim-warehouse-card__cpt {
    margin: 0;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.55;
}
.exim-warehouse-card__disclaimer strong,
.exim-warehouse-card__cpt strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
}
/* Disclaimer — info blue */
.exim-warehouse-card__disclaimer {
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-left: 3px solid #3b82f6;
    color: #1e3a8a;
}
.exim-warehouse-card__disclaimer strong { color: #1e3a8a; }

/* CPT (international duties) — warning yellow */
.exim-warehouse-card__cpt {
    margin-top: 10px;
    background: #fff8e1;
    border: 1px solid #ffe49a;
    border-left: 3px solid #FFCC00;
    color: #5b3e00;
}
.exim-warehouse-card__cpt strong { color: #5b3e00; }

/* The shipping target receives WC's #shipping_method UL. Strip default
 * bullet styling so the rate cards we already render look clean. */
.exim-shipping-target #shipping_method,
.exim-shipping-target ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
}
.exim-shipping-target #shipping_method li {
    margin: 0 0 10px;
    list-style: none;
}
.exim-shipping-target #shipping_method li:last-child { margin-bottom: 0; }

/* ---- Step 3 content: Payment section ---- */
.exim-step3-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.exim-payment-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--exim-co-border);
    padding: 0;
    margin: 0;
}
.exim-payment-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--exim-co-card-bg);
    border: 1px solid var(--exim-co-border);
    border-bottom: none;
    border-radius: var(--exim-co-radius) var(--exim-co-radius) 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--exim-co-text);
    cursor: default; /* not switchable yet — only 1 gateway */
    margin-bottom: -1px;
}
.exim-payment-tab--active {
    color: var(--exim-co-primary);
    border-color: var(--exim-co-border);
    border-bottom: 2px solid var(--exim-co-card-bg);
    box-shadow: 0 -2px 0 var(--exim-co-primary) inset;
}
.exim-payment-tab .dashicons {
    color: var(--exim-co-primary);
}

/* The payment target receives WC's #payment block (incl. Place Order).
 * Style its inner pieces to fit DigiKey card aesthetic. */
.exim-payment-target {
    background: var(--exim-co-card-bg);
    border: 1px solid var(--exim-co-border);
    border-top: none;
    border-radius: 0 0 var(--exim-co-radius) var(--exim-co-radius);
    padding: 20px 24px;
    margin-top: 0;
}
.exim-payment-target #payment {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.exim-payment-target ul.wc_payment_methods,
.exim-payment-target ul.payment_methods {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: transparent;
}
.exim-payment-target ul.wc_payment_methods li,
.exim-payment-target ul.payment_methods li {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    list-style: none;
}
.exim-payment-target .payment_box {
    background: #f8fafb !important;
    border: 1px solid var(--exim-co-border) !important;
    border-radius: var(--exim-co-radius);
    padding: 12px 14px !important;
    margin: 8px 0 !important;
    color: var(--exim-co-muted);
    font-size: 13px;
    line-height: 1.5;
}
.exim-payment-target .payment_box:before {
    display: none !important;
}
.exim-payment-target .form-row.place-order {
    margin: 0;
    padding: 0;
    background: transparent;
}
.exim-payment-target #place_order {
    width: auto !important;
    min-width: 200px;
    padding: 12px 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--exim-co-primary) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: var(--exim-co-radius) !important;
    cursor: pointer;
    transition: background 0.15s ease;
}
.exim-payment-target #place_order:hover,
.exim-payment-target #place_order:focus {
    background: var(--exim-co-primary-hover) !important;
}

/* Disabled Place Order — when the disclaimer checkbox isn't ticked.
 * `disabled` attr prevents form submit; the visual styling tells the
 * customer why. We use a dedicated `.exim-place-order-locked` class
 * alongside `:disabled` so themes that style native disabled elements
 * heavily can't override us. */
.exim-payment-target #place_order:disabled,
.exim-payment-target #place_order.exim-place-order-locked,
#place_order:disabled,
#place_order.exim-place-order-locked {
    background: #cbd5e1 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 1 !important; /* override any default browser disabled opacity */
    box-shadow: none !important;
}

/* Step 3 disclaimer-agreement checkbox block (renders just above the
 * Place Order button, inside the moved #payment block). Same yellow
 * accent as the warehouse-card CPT notice for a familiar warning vibe. */
.exim-checkout-disclaimer-agree {
    margin: 8px 0 14px;
    padding: 12px 14px;
    background: #fff8e1;
    border: 1px solid #ffe49a;
    border-left: 3px solid #FFCC00;
    border-radius: 6px;
}
.exim-checkout-disclaimer-agree__label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
    font-size: 13px;
    color: #5b3e00;
    line-height: 1.55;
}
.exim-checkout-disclaimer-agree__cb {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: #005daa;
    cursor: pointer;
}
.exim-checkout-disclaimer-agree__text strong {
    color: #5b3e00;
    font-weight: 700;
    margin-right: 4px;
}

/* Right-column "Disclaimer" + "CPT Incoterms" rows — these were
 * appended via woocommerce_review_order_after_shipping. Since
 * tr.shipping is hidden (rates moved to LEFT), these notice rows look
 * orphaned in the right column. Hide them — the notices already live
 * in the warehouse card / step 2 content on the LEFT. */
#order_review .exim-dhl-disclaimer-row,
#order_review .exim-dhl-cpt-notice-row {
    display: none !important;
}

/* ========================================================================
 * Inline field error (Step 1 validation flag)
 * ====================================================================== */
.exim-field-error {
    display: block;
    color: #b32d2e;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 4px;
}
.exim-field-invalid input,
.exim-field-invalid select,
.exim-field-invalid textarea,
.exim-field-invalid .select2-selection {
    border-color: #b32d2e !important;
    box-shadow: 0 0 0 1px rgba(179, 45, 46, 0.15);
}

/* In Step 2, the rate-row disclaimer + CPT notice should still appear
 * inside the warehouse card. Style as compact rows below rates. */
.exim-shipping-target .exim-dhl-disclaimer-row,
.exim-shipping-target .exim-dhl-cpt-notice-row {
    /* Note: those rows live inside <table>; only matters if they
     * actually got moved with #shipping_method, which they don't.
     * Leave a placeholder rule for future use. */
}

/* ========================================================================
 * Mobile
 * ====================================================================== */
@media (max-width: 768px) {
    .exim-warehouse-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px 18px;
    }
    .exim-continue {
        width: 100%;
    }
    .exim-payment-target #place_order {
        width: 100% !important;
    }
}

/* ===========================================================
 * Shipment Strategy chooser (Step 2 — above DHL rate list)
 *
 * Two radio cards customer picks between BEFORE selecting a DHL
 * service. Always rendered server-side; JS hides when no Two-shipment
 * options exist for the cart.
 * =========================================================== */

/* The chooser is rendered as a single <tr> with <th> (label) + <td>
 * (fieldset). We override the table-cell layout so the label sits on
 * its own row above the radio cards — gives the cards full width to
 * breathe, especially in the narrow right-column Order Summary where
 * the table-cell layout would squeeze the radios into a strip. */

.exim-dhl-strategy-row th {
    width: 100% !important;
    text-align: left !important;
    padding: 12px 0 6px !important;
    font-weight: 600;
    color: #1a2533;
    border: 0 !important;
    max-width: 20%;
}
.exim-dhl-strategy-row td {
    width: 100% !important;
    padding: 0 0 14px !important;
    border: 0 !important;
}
.exim-dhl-strategy__label{
    text-align: left;
}
/* Strategy is decided at Step 1 only. After advancing to Step 2 the
 * chooser is hidden — going back to Step 1 (Edit Address) is the way
 * to change strategy. Kept in DOM (not removed) so the saved value +
 * filter logic continues to drive rate visibility on Step 2. */
body.exim-checkout-step-2 .exim-dhl-strategy-row,
body.exim-checkout-step-3 .exim-dhl-strategy-row {
    display: none !important;
}

.exim-dhl-strategy {
    border: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Each option on its own row — gives full column width to the
     * radio + label + description so descriptions don't wrap into a
     * narrow strip in the right-column Order Summary. */
    grid-template-columns: 1fr;
    gap: 8px;
}

.exim-dhl-strategy__option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    margin: 0;
}
.exim-dhl-strategy__option:hover {
    border-color: #005daa;
    background: #f0f9ff;
}
.exim-dhl-strategy__option input[type="radio"] {
    margin: 2px 0 0;
    flex-shrink: 0;
}
.exim-dhl-strategy__option input[type="radio"]:checked ~ .exim-dhl-strategy__label .exim-dhl-strategy__title {
    color: #005daa;
}
.exim-dhl-strategy__option:has(input:checked) {
    border-color: #005daa;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(0, 93, 170, 0.15);
}

.exim-dhl-strategy__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.exim-dhl-strategy__title {
    font-size: 13px;
    font-weight: 600;
    color: #1a2533;
}

.exim-dhl-strategy__desc {
    font-size: 11.5px;
    color: #5e6b7c;
    font-weight: 400;
}

/* (Mobile-stack media query removed — chooser is single-column at all
 * widths now since it lives in the narrow right-column Order Summary.) */

/* Strategy filter — JS toggles this class on shipping <li> based on the
 * selected radio. Marked !important so the theme's
 * `.woocommerce-shipping-methods li { display: flex !important }`
 * doesn't keep filtered-out rows visible. */
.woocommerce-shipping-methods li.exim-dhl-rate-hidden,
ul.shipping_method li.exim-dhl-rate-hidden,
li.exim-dhl-rate-hidden {
    display: none !important;
}

/* ===========================================================
 * Split-group banner (order-received page)
 *
 * Rendered ABOVE the standard WC order details when the order is
 * part of a Two-Shipment split group. Vertical card stack — readable
 * on mobile too.
 * =========================================================== */

.exim-split-banner {
    margin: 0 0 28px;
    padding: 20px 22px;
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
    border: 1px solid #bae6fd;
    border-radius: 8px;
}

.exim-split-banner__header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e0f2fe;
}
.exim-split-banner__header .dashicons {
    color: #15803d;
    font-size: 24px;
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
}
.exim-split-banner__title {
    font-size: 18px;
    font-weight: 700;
    color: #1a2533;
    margin: 0;
    line-height: 1.3;
}
.exim-split-banner__subtitle {
    font-size: 13px;
    color: #5e6b7c;
    margin: 4px 0 0;
    line-height: 1.5;
}

.exim-split-banner__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exim-split-banner__leg {
    background: #fff;
    border: 1px solid #e0f2fe;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0;
}

.exim-split-banner__leg-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.exim-split-banner__leg-title {
    font-size: 13px;
    font-weight: 700;
    color: #075985;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.exim-split-banner__leg-id {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 600;
    color: #005daa;
    text-decoration: none;
    line-height: 1;
}
.exim-split-banner__leg-id:hover {
    color: #003560;
    text-decoration: underline;
}
.exim-split-banner__leg-id .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}

.exim-split-banner__leg-desc {
    font-size: 13px;
    color: #5e6b7c;
    margin-bottom: 8px;
    line-height: 1.5;
}

.exim-split-banner__leg-stats {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #1a2533;
    flex-wrap: wrap;
}
.exim-split-banner__leg-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
}

.exim-split-banner__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e0f2fe;
}
.exim-split-banner__total-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5e6b7c;
    font-weight: 600;
}
.exim-split-banner__total-value {
    font-size: 22px;
    font-weight: 700;
    color: #005daa;
}

/* ===========================================================
 * Sibling link banner (My Orders → View order page)
 * =========================================================== */

.exim-split-sibling-link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 18px;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 3px solid #005daa;
    border-radius: 4px;
    font-size: 13px;
    color: #1e3a8a;
    line-height: 1.5;
}
.exim-split-sibling-link .dashicons {
    color: #005daa;
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}
.exim-split-sibling-link a {
    color: #005daa;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}
.exim-split-sibling-link a:hover {
    text-decoration: underline;
}