/* Shipment journey: decorative motion never implies live GPS positioning. */
.freight-route { min-height: 230px; border: 1px solid #244453; border-radius: 20px; background: radial-gradient(ellipse at 50% 110%, #124c50 0%, transparent 65%), linear-gradient(120deg, #101e31, #0b1728); box-shadow: 0 12px 28px #0f172a12; }
.freight-route::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#a5d8d81c 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; }
.route-title, .route-live { top: 22px; font-family: 'Inter', sans-serif; }
.route-title { left: 24px; font-size: 12px; font-weight: 600; color: #c6d7e5; }
.route-live { right: 24px; border: 1px solid #5eead430; border-radius: 999px; padding: 6px 10px; top: 16px; font-size: 10px; color: #99f6e4; background: #2dd4bf0c; }
.route-live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; }
.route-caption { position: absolute; bottom: 17px; left: 24px; right: 24px; text-align: center; font-size: 10px; color: #91a9be; letter-spacing: .03em; }
.freight-route svg { top: 64px; height: 106px; overflow: visible; }
.route-track, .route-fill, .route-flow { vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; }
.route-track { stroke: #698197; stroke-width: 2; stroke-dasharray: 3 7; opacity: .5; }
.route-fill { stroke: #2dd4bf; stroke-width: 3; }
.route-flow { stroke: #ccfbf1; stroke-width: 2; stroke-dasharray: 1 12; animation: freight-flow 4s linear infinite; }
.route-origin, .route-destination { top: 118px; }
.route-origin { left: 10%; }
.route-destination { left: 90%; }
.route-mid { left: 50%; top: 78px; }
.route-node { gap: 10px; }
.route-node > span:first-child { width: 34px; height: 34px; border-width: 2px; background: #13273a; box-shadow: 0 0 0 6px #102234; }
.route-node.current > span:first-child { width: 42px; height: 42px; margin-top: -4px; background: #0d9488; border-color: #5eead4; box-shadow: 0 0 0 6px #2dd4bf20; animation: freight-beacon 2.8s ease-out infinite; }
.route-node > span:last-child { max-width: 160px; overflow: hidden; text-overflow: ellipsis; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; }
.journey-timeline { margin: 0 0 24px; padding: 22px 8px 19px; border: 1px solid #e5edf1; border-radius: 16px; background: #f8fafcb3; }
.shipment-steps { margin-inline: 0; }
.shipment-steps::before, .shipment-steps::after { left: 10%; right: auto; top: 18px; height: 3px; width: 80%; max-width: none; }
.shipment-steps::after { width: calc(var(--timeline-progress, 0%) * .8); background: linear-gradient(90deg, #0d9488, #34d399); transform-origin: left; animation: freight-reveal .8s ease-out both; }
.shipment-step .dot { width: 38px; height: 38px; border-width: 2px; font-size: 12px; background: #fff; }
.shipment-step.done .dot { background: #0d9488; border-color: #0d9488; box-shadow: 0 0 0 5px #f8fafc; }
.shipment-step.current .dot { background: #fff7ed; border-color: #f59e0b; color: #b45309; box-shadow: 0 0 0 5px #ffedd5; }
.shipment-step span:last-child { margin-top: 11px; font-size: 11px; font-weight: 600; }
.shipment-step.current span:last-child { color: #b45309; }
.shipment-step.complete .dot { background: #0d9488; border-color: #0d9488; color: white; box-shadow: 0 0 0 5px #ccfbf1; }
.shipment-step.complete span:last-child { color: #0f766e; }
html.dark .journey-timeline { background: #111e30; border-color: #293a50; }
html.dark .shipment-step .dot { background: #17263b; }
html.dark .shipment-step.done .dot, html.dark .shipment-step.complete .dot { background: #0d9488; box-shadow: 0 0 0 5px #111e30; }
html.dark .shipment-step.current .dot { background: #422d15; }
html.dark .shipment-step.done span:last-child, html.dark .shipment-step.complete span:last-child { color: #5eead4; }
html.dark .shipment-step.current span:last-child { color: #fbbf24; }
@keyframes freight-flow { to { stroke-dashoffset: -26; } }
@keyframes freight-beacon { 0%, 100% { box-shadow: 0 0 0 6px #2dd4bf20; } 60% { box-shadow: 0 0 0 12px #2dd4bf00; } }
@keyframes freight-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 640px) {
    .freight-route { min-height: 216px; border-radius: 16px; }
    .route-title { top: 17px; left: 14px; font-size: 10px; max-width: none; }
    .route-live { top: 41px; left: 14px; right: auto; font-size: 9px; max-width: calc(100% - 28px); }
    .freight-route svg { top: 77px; height: 90px; }
    .route-origin, .route-destination { top: 124px; }
    .route-origin { left: 10%; }
    .route-destination { left: 90%; }
    .route-mid { top: 90px; }
    .route-node > span:first-child { width: 28px; height: 28px; font-size: 11px; }
    .route-node.current > span:first-child { width: 36px; height: 36px; }
    .route-node > span:last-child { font-size: 9px; max-width: 76px; }
    .route-caption { bottom: 13px; font-size: 9px; }
    .journey-timeline { padding: 18px 0; margin-bottom: 20px; }
    .shipment-step .dot { width: 28px; height: 28px; font-size: 10px; }
    .shipment-steps::before, .shipment-steps::after { top: 13px; }
    .shipment-step span:last-child { font-size: 9px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
    .route-flow, .route-node.current > span:first-child, .shipment-steps::after, .action-required-alert::before { animation: none; }
}