/* Public client tracking preview only. Internal TradeBridge layout is untouched. */
.client-reference-track{background:#fbfcfe;color:#12284a;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.client-reference-track .track-header{padding:10px max(30px,calc((100vw - 1450px)/2));min-height:68px;background:#fff;box-shadow:none;border-bottom:1px solid #e2e7ed}
.client-reference-track .track-header img{width:236px;height:44px;object-fit:contain;object-position:left center}
.client-reference-track .track-header>div{gap:20px}
.client-reference-track .track-header a,.client-reference-track .track-header button{font-size:14px;color:#12284a}
.track-header-divider{height:25px;border-left:1px solid #dce3ec}
.client-reference-track .track-main{max-width:1510px;display:grid;grid-template-columns:minmax(265px,346px) repeat(3,minmax(0,1fr));grid-template-areas:'intro intro intro intro' 'vehicle map map map' 'vehicle stages stages stages' 'vehicle current timeline arrival' 'vehicle current timeline last';gap:13px 17px;padding:18px 30px 40px}
.client-reference-track .track-main>*{min-width:0;margin:0}
.client-reference-track .track-intro{grid-area:intro;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:0 4px 4px}
.client-reference-track .track-intro h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(33px,3vw,48px);line-height:1.18;font-weight:500;color:#112c53;letter-spacing:-.03em;margin:0 0 6px}
.client-reference-track .track-intro p{font-size:18px;line-height:1.4;color:#647995;margin:0}
.client-reference-track .track-intro p span{color:#294367}
.client-reference-track .track-intro>small{flex:none;font-size:11px;letter-spacing:.13em;color:#60728e}
.client-reference-track .track-vehicle{grid-area:vehicle;display:block;align-self:stretch;border:1px solid #e1e7ee;border-radius:8px;background:#fff;overflow:hidden;padding:0}
.client-reference-track .track-vehicle-image{width:100%;height:244px;min-height:244px;background:#eff3f8;display:grid;place-items:center}
.client-reference-track .track-vehicle-image img{width:100%;height:100%;object-fit:contain}
.client-reference-track .track-vehicle-image:has(.track-reference-photo){background:#e9e5e2;display:block}
.track-reference-photo{position:relative;width:100%;max-width:346px;height:100%;margin:auto;background-image:url('/vehicle-images/deepal-s05-white-reference.png');background-repeat:no-repeat;background-position:-51px -185px;background-size:1536px 1024px}
.track-reference-photo span{position:absolute;bottom:7px;left:8px;border-radius:4px;background:#112e50de;color:#fff;padding:5px 7px;font-size:9px;letter-spacing:.06em}
.track-photo-missing{display:grid;justify-items:center;gap:8px;text-align:center;padding:20px;color:#6c8199}
.track-photo-missing svg{width:60px;height:60px;color:#8ca4bf}
.track-photo-missing span{font-size:13px}
.track-photo-missing small{font-size:11px;color:#74869c}
.client-reference-track .track-vehicle-body{padding:19px 21px 22px}
.client-reference-track .track-vehicle h2{font-size:23px;line-height:1.2;margin:0 0 6px;color:#142e52}
.client-reference-track .track-vehicle p{font-size:13px;color:#60728e;margin:0}
.client-reference-track .track-vin{margin:15px 0 18px;background:#f3f6fa;font-size:13px}
.client-reference-track .track-vehicle-facts{font-size:13px;gap:11px}
.client-reference-track .track-vehicle-facts>div{gap:7px}
.client-reference-track .track-vehicle-facts dt{flex:none}
.client-reference-track .track-vehicle-facts dd{overflow-wrap:anywhere}
.track-vehicle-disclaimer{display:flex;gap:10px;background:#f4f7fa;padding:13px;border-radius:6px;margin-top:20px;color:#53677f;font-size:12px;line-height:1.55}
.track-vehicle-disclaimer svg{width:16px;height:16px;flex:none}
.client-reference-track .track-map{grid-area:map;padding:0;border:0;background:transparent}
.track-map-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.client-reference-track .track-map-heading h2{font-size:16px;margin:0}
.track-map-preview-label{border:1px solid #d2e3fb;background:#eaf4ff;color:#1769bc;padding:6px 10px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.08em}
.client-reference-track .track-map-canvas{position:relative;height:345px;min-height:345px;padding:0;background:#e7eff5;border:1px solid #dce6f0;border-radius:7px;overflow:hidden;display:block}
.client-reference-track .track-map-canvas:before{display:none}
.client-reference-track .track-map-canvas iframe{display:block;border:0;width:100%;height:100%}
.client-reference-track .track-reference-map{background-image:url('/vehicle-images/deepal-s05-white-reference.png');background-repeat:no-repeat;background-size:1536px 1024px;background-position:-416px -185px}
.client-reference-track .track-reference-map iframe{visibility:hidden}
.track-map-live{position:absolute;inset:0;z-index:1;visibility:hidden}.track-map-live.loaded{visibility:visible}
.track-car-marker{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#0874e4;border:3px solid #fff;box-shadow:0 0 0 7px #2385ed55,0 4px 13px #1634518a;color:#fff;font-size:22px;line-height:1}
.track-car-marker span{filter:grayscale(1) brightness(0) invert(1)}
.client-reference-track .leaflet-container{font-family:inherit}.client-reference-track .leaflet-control-attribution{font-size:9px;background:#ffffffd9}
.track-map-caption{position:absolute;bottom:15px;left:15px;max-width:calc(100% - 30px);padding:8px 12px;border-radius:5px;background:#16375cd9;color:#fff;font-size:12px;pointer-events:none}
.client-reference-track .track-map-caption{z-index:2;background:#102b4be8;box-shadow:0 5px 20px #001d3e38}.track-map-caption-dot{color:#54a7ff;font-size:17px}.track-map-caption strong{font-weight:500;color:#c7e5ff}
.client-reference-track .track-map>p{font-size:12px;color:#5c7089;margin:8px 0 0;line-height:1.45}
.client-reference-track .track-journey{grid-area:stages;background:transparent;border:0;padding:4px 0 10px}
.client-reference-track .track-stages{display:flex;gap:0;align-items:start;justify-content:space-between}
.client-reference-track .track-stages>div{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;font-size:12px;color:#75859a}
.client-reference-track .track-stages>div:not(:last-child):after{content:"";position:absolute;left:calc(50% + 21px);top:16px;width:calc(100% - 42px);border-top:3px dashed #d2d8e1}
.client-reference-track .track-stages>div.complete:not(:last-child):after{border-top:3px solid #2185ed}
.client-reference-track .track-stages>div span{width:35px;height:35px;border:2px solid #bdc9d7;border-radius:50%;background:#fff;color:#7e90a4;display:grid;place-items:center;font-size:18px;z-index:1}
.client-reference-track .track-stages>div.complete span{background:#e9f4ff;border-color:#5699e0;color:#136ac3}
.client-reference-track .track-stages>div:nth-child(1).complete span{background:#fff0ed;border-color:#ed8271;color:#bb4737}.client-reference-track .track-stages>div:nth-child(2).complete span{background:#e5f7fb;border-color:#57bfce;color:#167d92}
.client-reference-track .track-stages>div.current span{background:#1778e2;border-color:#1778e2;color:#fff;box-shadow:0 0 0 5px #d8eaff}
.client-reference-track .track-stages>div.current strong{color:#176fc6}.client-reference-track .track-stages>div:last-child:not(.complete) span{background:#fff7eb;border-color:#e0b25c;color:#b27b22}
.client-reference-track .track-stages strong{font-size:12px;color:#254063;overflow-wrap:anywhere}
.client-reference-track .track-stages small{font-size:10px;line-height:1.3;color:#6e829b;max-width:115px}
.client-reference-track .track-current,.client-reference-track .track-history,.client-reference-track .track-arrival,.client-reference-track .track-last{border:1px solid #e0e7ee;border-radius:7px;background:#fff;padding:17px;min-width:0}
.client-reference-track .track-current{grid-area:current}.client-reference-track .track-history{grid-area:timeline}.client-reference-track .track-arrival{grid-area:arrival}.client-reference-track .track-last{grid-area:last}
.client-reference-track .track-main h2{font-size:15px;color:#162e51;margin:0 0 13px}
.track-section-head{display:flex;gap:10px;justify-content:space-between;align-items:center}.track-section-head span{font-size:11px;color:#2a72c6;white-space:nowrap}
.client-reference-track .track-current h3{font-size:17px;margin:0 0 9px;color:#162f52;overflow-wrap:anywhere}
.client-reference-track .track-current p,.client-reference-track .track-arrival p,.client-reference-track .track-last p{font-size:12px;line-height:1.55;color:#63758e;margin:6px 0}
.track-current-bar{height:7px;background:#e7edf4;border-radius:10px;margin:19px 0 7px}.track-current-bar i{display:block;height:100%;background:#2487f3;border-radius:10px}
.client-reference-track .track-current>small{font-size:11px;color:#387ac4}
.client-reference-track .track-next{display:grid;gap:7px;padding-top:17px;margin-top:20px;border-top:1px solid #e9edf2}
.client-reference-track .track-next small{color:#7b8da3}.client-reference-track .track-next strong{font-size:14px;color:#163354}
.client-reference-track .track-history>div{display:grid;grid-template-columns:16px 81px 1fr;gap:8px;border-left:2px solid #d9e3ed;margin:0 0 0 8px;padding:0 0 17px 12px;font-size:11px;align-items:start}
.client-reference-track .track-history>div span{color:#249564}.client-reference-track .track-history>div.current span{color:#2485ed}.client-reference-track .track-history>div.planned span{color:#a3afbf}
.client-reference-track .track-history time{color:#70839c}.client-reference-track .track-history strong{font-weight:550;color:#253d5b;overflow-wrap:anywhere}
.client-reference-track .track-history p{font-size:11px;color:#76889b;margin:0}
.client-reference-track .track-arrival>strong{display:block;font-size:19px;line-height:1.3;color:#142c4f;margin:8px 0}
.track-arrival-note{background:#f5f7fa;border-radius:5px;padding:11px;margin-top:17px;color:#708197;font-size:11px;line-height:1.55}
.client-reference-track .track-last>strong{display:block;font-size:15px;color:#203c60;margin:9px 0}
.client-reference-track .track-footer{margin-top:0}
@media(max-width:1000px){.client-reference-track .track-main{grid-template-columns:minmax(235px,290px) repeat(3,minmax(0,1fr));gap:12px;padding:20px}.client-reference-track .track-main h2{font-size:14px}.client-reference-track .track-vehicle-body{padding:15px}.client-reference-track .track-history>div{grid-template-columns:14px 1fr;gap:4px}.client-reference-track .track-history time{grid-column:2}.client-reference-track .track-history strong{grid-column:2}}
@media(max-width:730px){.client-reference-track .track-main{grid-template-columns:1fr;grid-template-areas:'intro' 'vehicle' 'map' 'stages' 'current' 'arrival' 'timeline' 'last';gap:12px;padding:18px 14px 28px}.client-reference-track .track-intro{display:block}.client-reference-track .track-intro>small{display:none}.client-reference-track .track-intro h1{font-size:clamp(30px,8vw,40px)}.client-reference-track .track-intro p{font-size:14px}.client-reference-track .track-vehicle-image{height:200px;min-height:200px}.client-reference-track .track-vehicle-body{padding:17px}.client-reference-track .track-map-canvas{height:310px;min-height:310px}.client-reference-track .track-reference-map{background-position:-805px -185px}.client-reference-track .track-stages{overflow-x:auto;padding-bottom:8px}.client-reference-track .track-stages>div{flex:0 0 70px}.client-reference-track .track-stages>div:not(:last-child):after{width:30px;left:calc(50% + 21px)}.client-reference-track .track-history>div{grid-template-columns:16px 92px 1fr}.client-reference-track .track-history time,.client-reference-track .track-history strong{grid-column:auto}.client-reference-track .track-header{padding:10px 13px}.client-reference-track .track-header img{width:140px;height:37px}.client-reference-track .track-header>div{gap:8px}.client-reference-track .track-header a,.client-reference-track .track-header button{font-size:11px}.track-header-divider{height:17px}}
@media(max-width:420px){.client-reference-track .track-header{align-items:center;gap:7px}.client-reference-track .track-header img{width:108px}.client-reference-track .track-header>div{gap:6px}.client-reference-track .track-header a,.client-reference-track .track-header button{font-size:10px}.client-reference-track .track-map-canvas{height:270px;min-height:270px}.client-reference-track .track-history>div{grid-template-columns:14px 75px 1fr;font-size:10px;gap:5px}.client-reference-track .track-main{padding-left:10px;padding-right:10px}}