/* =========================================================
   /track/css/track.overrides.css
   Safe overrides only for /track/
   ========================================================= */

/* 1) Better focus rings (keyboard users) */
.section-tracking-results :focus-visible {
    outline: 2px solid #37409a;
    outline-offset: 3px;
}

/* 2) Muted ETA copy (used when we say “available after pickup”) */
.section-tracking-results .eta-muted {
    opacity: 0.75;
}

/* 3) “Scheduled” / “Estimated” badge styling */
.section-tracking-results .eta-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    font-size: 12px;
    line-height: 1.2;
    margin-left: 6px;
    vertical-align: middle;
}

/* 4) Prevent map from collapsing on slow loads (layout stability) */
.section-tracking-results .tracking-map {
    min-height: 320px;
}

/* 5) On small screens, give the map a bit more breathing room */
@media (max-width: 575px) {
    .section-tracking-results .tracking-map {
        min-height: 260px;
    }
}

/* =========================================================
   GPS Live badge (in Delivery Status tile)
   ========================================================= */

/* Keep the big status font intact */
#order_status strong .status-text {
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* GPS badge inside Delivery Status */
#order_status strong .gps-inline-badge {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2C347F;
    vertical-align: middle;
}

    #order_status strong .gps-inline-badge .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #40B418;
        display: inline-block;
    }

/* =========================================================
   Delivery ETA disclaimer (multi-stop note)
   ========================================================= */

/* Delivery tile: make it a clean vertical stack */
#eta_details .info-holder__item:last-child {
    display: flex; /* keep icon + content */
    align-items: flex-start;
}

    #eta_details .info-holder__item:last-child i {
        margin-top: 2px; /* aligns icon with first line */
    }

    /* Ensure the content column is left-aligned and stacks */
    #eta_details .info-holder__item:last-child .eta-deliver-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* <<<<<< key: prevents centered “floating” look */
    }

/* ETA line */
#eta_deliver {
    display: block;
}

/* keep "2d 4h" together */
#eta_details .info-holder__item:last-child b {
    white-space: nowrap;
}


/* Disclaimer pill under ETA (tighter + more native) */
#eta_disclaimer.eta-disclaimer {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 6px; /* was 999px */
    font-size: 12px;
    line-height: 1.2;
    background: rgba(0,0,0,.06);
    opacity: .9;
    max-width: 240px;
}

/*#order_status strong .gps-inline-badge.gps-stale {
    color: #6B7280;
}

#order_status strong .gps-inline-badge .dot.dot-stale {
    background: #F59E0B;
}*/

/* Small tooltip trigger icon */
#order_status .gps-tip {
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

    #order_status .gps-tip .tip-icon {
        width: 16px;
        height: 16px;
        border-radius: 4px; /* matches your site vs round pill */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        background: rgba(55,64,154,.10);
        color: #37409a;
        cursor: default;
    }

/*#order_status strong .gps-inline-badge.gps-stale {
    color: #6B7280;*/ /* softer gray */
/*}

#order_status strong .gps-inline-badge .dot.dot-stale {
    background: #9CA3AF;*/ /* gray dot */
/*}

#order_status strong .gps-inline-badge .dot.dot-stale {
    background: #F59E0B;*/ /* amber */
/*}*/

/* Base badge text */
#order_status strong .gps-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    /* Dot base */
    #order_status strong .gps-inline-badge .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    /* ===== GRAY "stale" state (GPS older / less fresh) ===== */
    #order_status strong .gps-inline-badge.gps-stale {
        color: #6B7280; /* softer gray */
    }

    #order_status strong .gps-inline-badge .dot.dot-stale {
        background: #9CA3AF; /* gray dot */
    }

    /* ===== AMBER "aging" state (older than badge window) ===== */
    #order_status strong .gps-inline-badge.gps-amber {
        color: #92400E; /* amber-ish text (optional); or keep gray text if you prefer */
    }

    #order_status strong .gps-inline-badge .dot.dot-amber {
        background: #F59E0B; /* amber dot */
    }

    /* ===== Optional: inconsistent GPS state (red) ===== */
    #order_status strong .gps-inline-badge.gps-warn {
        color: #B91C1C;
    }

    #order_status strong .gps-inline-badge .dot.dot-warn {
        background: #EF4444;
    }

    /* Only needed if a global rule is fading badges */
    #order_status strong .gps-inline-badge.gps-stale {
        opacity: 1;
    }