/* Mobile defaults; larger layouts are added at the end with min-width queries. */
.shipment-page,
.shipment-tracking {
    font-family: 'Raleway', sans-serif;
    color: #263342;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    overflow-wrap: anywhere;
}

.shipment-page { max-width: 900px; margin: 0 auto; padding: 24px 16px 36px; }
.shipment-back { display: inline-flex; align-items: center; min-height: 44px; color: #0066CC; font-size: 13px; text-decoration: none; }
.shipment-page-heading { display: block; margin: 24px 0 28px; text-align: center; }
.shipment-page h1 { font: 400 30px/1.3 'Anton', sans-serif; letter-spacing: 0; color: #0066CC; margin: 0 0 10px; text-align: center; }
.shipment-order-ref { margin: 0; color: #65717e; font-size: 13px; }
.shipment-order-ref strong { font-weight: 400; }
.shipment-order-ref span { display: block; margin-left: 0; }

.shipment-tracking { white-space: normal; }
.shipment-tracking h2,
.shipment-tracking h3 { font-family: 'Raleway', sans-serif; text-align: left; text-transform: none; letter-spacing: 0; color: #263342; }
.shipment-tracking-full { border: 1px solid #e0efff; border-radius: 12px; background: #fff; box-shadow: 0 4px 15px rgba(0,102,204,.15); overflow: hidden; }
.shipment-status-panel { padding: 20px; background: #fff; }
.shipment-status-topline { display: flex; align-items: center; gap: 8px; }
.shipment-tracking-full .shipment-status-topline:empty { display: none; }
.shipment-status-badge { display: inline-flex; align-items: center; gap: 7px; color: #364758; font-size: 13px; font-weight: 600; }
.shipment-status-dot { width: 6px; height: 6px; background: #71859a; border-radius: 50%; flex-shrink: 0; }
.shipment-test { font-size: 12px; color: #68717c; }
.shipment-hero { display: block; padding: 0; }
.shipment-hero h2 { font-size: 20px; font-weight: 800; line-height: 1.35; margin: 0 0 8px; }
.shipment-description { font-size: 14px; color: #65717e; line-height: 1.6; margin: 0; }
.shipment-eta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 16px; color: #65717e; font-size: 13px; }
.shipment-eta strong { font-size: 14px; font-weight: 600; color: #364758; }
.shipment-eta span:last-child { flex-basis: 100%; font-size: 13px; }
.shipment-alert { border-left: 2px solid #b47940; padding-left: 12px; margin: 16px 0 0; font-size: 13px; color: #81572f; }
.shipment-alert strong { display: block; font-weight: 600; }

.shipment-details { border-top: 1px solid #e8ecef; }
.shipment-details > summary { color: #0066CC; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.shipment-details > summary::-webkit-details-marker { display: none; }
.shipment-details-count { font-size: 12px; font-weight: 400; color: #77828e; white-space: nowrap; }
.shipment-chevron { display: inline-block; margin-left: 8px; }
.shipment-details[open] .shipment-chevron { transform: rotate(180deg); }
.shipment-details-content { padding: 0 20px 20px; }
.shipment-facts { display: block; margin: 0 0 16px; }
.shipment-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; }
.shipment-facts dt { margin: 0; font-size: 13px; color: #77828e; font-weight: 400; text-transform: none; letter-spacing: 0; }
.shipment-facts dd { margin: 0; font-size: 13px; color: #364758; font-weight: 400; }
.shipment-carrier-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; justify-content: center; padding: 10px 20px; border-radius: 32px; background: #0066CC; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; }
.shipment-tracking-full .shipment-carrier-link { display: flex; width: fit-content; margin-left: auto; }
.shipment-carrier-link span { margin-left: 4px; }
.shipment-carrier-link:hover { background: #0055aa; color: #fff; text-decoration: none; }
.shipment-back:hover { text-decoration: underline; }
.shipment-history-heading { border-top: 1px solid #e8ecef; margin: 24px 0 20px; padding-top: 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shipment-history-heading h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.6; }
.shipment-history-heading > span { font-size: 11px; color: #77828e; }
.shipment-timeline { list-style: none; padding: 0 0 0 5px; margin: 0; max-height: none; overflow: visible; }
.shipment-timeline li { position: relative; border-left: 1px solid #dce2e7; padding: 0 0 22px 20px; margin: 0; }
.shipment-timeline li:last-child { border-color: transparent; padding-bottom: 0; }
.shipment-timeline li:before { content: ""; position: absolute; top: 7px; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: #0066CC; }
.shipment-event-heading { display: block; }
.shipment-event-heading strong { font-size: 13px; font-weight: 600; color: #364758; }
.shipment-event-heading time { display: block; margin-top: 2px; font-size: 12px; color: #77828e; white-space: nowrap; }
.shipment-timeline p { margin: 4px 0 0; font-size: 13px; color: #65717e; }
.shipment-event-location { display: block; font-size: 12px; color: #77828e; margin-top: 4px; }
.shipment-event-alert { display: block; font-size: 13px; color: #81572f; margin-top: 4px; }
.shipment-empty { color: #65717e; font-size: 13px; margin: 0; }
.shipment-footnote { border-top: 1px solid #e8ecef; padding-top: 16px; margin-top: 24px; color: #77828e; font-size: 12px; }
.shipment-footnote span { display: block; }

/* Older rendered pages remain calm while the app reloads updated views. */
.shipment-eyebrow,
.shipment-carrier { display: none; }

.shipment-steps { display: flex; list-style: none; padding: 0; margin: 28px 0 4px; }
.shipment-steps li { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #7a8795; font-size: 11px; font-weight: 600; text-align: center; }
.shipment-steps li::before { content: ""; position: absolute; top: 17px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px; background: #e0e8f0; }
.shipment-steps li:first-child::before { display: none; }
.shipment-step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 2px solid #e0e8f0; border-radius: 50%; background: #fff; font-size: 12px; }
.shipment-steps .is-complete { color: #0066CC; }
.shipment-steps .is-complete::before { background: #0066CC; }
.shipment-steps .is-complete .shipment-step-dot { background: #0066CC; border-color: #0066CC; color: #fff; }
.shipment-steps .is-current .shipment-step-dot { box-shadow: 0 0 0 4px #e7f2ff; }

.shipment-tracking-compact { min-width: 0; max-width: 320px; margin-top: 8px; }
.shipment-tracking-compact .shipment-status-panel { padding: 0; }
.shipment-mini-eta { font-size: 12px; color: #77828e; margin: 5px 0; }
.shipment-mini-eta strong { font-weight: 400; color: #556575; }
.shipment-tracking-compact .shipment-details { border: 0; }
.shipment-tracking-compact .shipment-details { display: none; }
.shipment-tracking-compact .shipment-details > summary { padding: 8px 0; font-size: 12px; color: #1768a8; font-weight: 400; }
.shipment-tracking-compact .shipment-details-count { font-size: 11px; }
.shipment-tracking-compact .shipment-details-content { padding: 12px 0; }
.shipment-tracking-compact .shipment-facts > div { grid-template-columns: 1fr; gap: 2px; padding: 5px 0; }
.shipment-tracking-compact .shipment-event-heading { flex-direction: column; gap: 2px; }
.shipment-tracking-compact .shipment-history-heading { align-items: flex-start; }
.shipment-tracking-compact .shipment-timeline { max-height: 280px; }
.shipment-tracking-compact .shipment-description { font-size: 13px; }
.shipment-details > summary:focus-visible,
.shipment-back:focus-visible,
.shipment-carrier-link:focus-visible { outline: 2px solid #1768a8; outline-offset: 4px; }

@media (min-width: 400px) {
    .shipment-facts > div { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 6px 0; }
}
@media (min-width: 601px) {
    .shipment-page { padding: 32px 24px 48px; }
    .shipment-page h1 { font-size: 36px; }
    .shipment-order-ref span { display: inline; margin-left: 4px; }
    .shipment-status-panel { padding: 24px; }
    .shipment-hero h2 { font-size: 21px; }
    .shipment-details > summary { padding: 18px 24px; }
    .shipment-details-content { padding: 0 24px 20px; }
    .shipment-facts > div { grid-template-columns: 145px minmax(0, 1fr); gap: 16px; }
    .shipment-event-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .shipment-event-heading time { display: inline; margin-top: 0; }
    .shipment-history-heading > span { font-size: 12px; }
    .shipment-steps li { font-size: 12px; gap: 10px; }
}
.shipment-details-count { display: none; }

.shipment-info-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
}
.shipment-info-heading h3 {
    margin: 0;
    color: #0066CC;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}
.shipment-info-heading .shipment-carrier-link { flex-shrink: 0; }
@media (min-width: 481px) {
    .shipment-info-heading { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (min-width: 601px) {
    .shipment-info-heading { padding: 18px 24px; }
}