/* OVspot popup design V121: Option 4 + Option 1 timeline.
   Scoped to vehicle panel only. NO Leaflet or renderer selectors. */
#vehiclePanel.ov4-popup{
  --ov4-blue:#1460b3;
  --ov4-blue-bg:#eaf4ff;
  --ov4-amber:#f2b91a;
  --ov4-current:#fff8e5;
  --ov4-softline:var(--border,#dbe5ec);
  --ov4-green:#1d814c;
  border-radius:20px;
}
#vehiclePanel.ov4-popup #vehiclePanelBody{
  padding:10px 12px 11px!important;
  scroll-padding-bottom:70px;
  color:var(--ink,#163447);
}
#vehiclePanel.ov4-popup .vprHeader{
  display:grid;grid-template-columns:62px minmax(0,1fr);
  grid-template-rows:auto auto;column-gap:12px;row-gap:4px;
  align-items:center;margin:0;padding:16px 42px 14px 12px;
  border:1px solid var(--ov4-softline);border-bottom:0;
  border-radius:15px 15px 0 0;background:var(--surface,#fff);
  overflow:visible;
}
#vehiclePanel.ov4-popup .vprHero{display:contents!important;}
#vehiclePanel.ov4-popup .vprTopline{
  grid-column:2;grid-row:1;min-width:0;padding:0!important;border:0!important;
}
#vehiclePanel.ov4-popup .vprTopline h2{
  margin:0!important;max-height:none!important;display:block!important;
  white-space:normal!important;overflow-wrap:anywhere!important;overflow:visible!important;
  font-size:15px!important;line-height:1.28!important;letter-spacing:-.25px;font-weight:850;
}
#vehiclePanel.ov4-popup .vprHeroBadge{
  grid-column:1;grid-row:1 / span 2;align-self:center;
  min-width:61px;max-width:80px;height:59px;padding:0 7px;
  border-radius:13px;font-size:21px;line-height:1;
  box-shadow:inset 0 0 0 1px #00000012;
}
#vehiclePanel.ov4-popup .vprHeroStop{grid-column:2;grid-row:2;min-width:0;}
#vehiclePanel.ov4-popup .vprHeroStop>small,
#vehiclePanel.ov4-popup .vprHeroStop>b{display:none!important;}
#vehiclePanel.ov4-popup .vprHeroStatus{
  justify-content:flex-start;flex-wrap:wrap;gap:8px;min-height:22px;
  margin:0;padding:0;
}
#vehiclePanel.ov4-popup .vprHeroStatus .vprQuality{
  padding:5px 10px!important;min-height:24px;
  font-size:10.5px!important;font-weight:800;border-radius:999px;
}
#vehiclePanel.ov4-popup .vprHeroStatus .vprDelay{
  padding:5px 7px;border-radius:8px;font-size:10px;
}
#vehiclePanel.ov4-popup .vprEta{
  display:grid!important;
  grid-template-columns:23px minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  column-gap:10px!important;row-gap:2px!important;
  margin:0!important;padding:12px 13px!important;
  min-height:71px;border:1px solid #bbd9f5!important;border-radius:0!important;
  background:var(--ov4-blue-bg);color:#174e8c;
}
#vehiclePanel.ov4-popup .vprEtaIcon{grid-column:1;grid-row:1 / 3;align-self:center;}
#vehiclePanel.ov4-popup .vprEtaIcon svg{width:22px!important;height:22px!important;}
#vehiclePanel.ov4-popup .vprEta>div{grid-column:2;grid-row:1 / 3;min-width:0;align-self:center;}
#vehiclePanel.ov4-popup .vprEta b{
  display:block;font-size:10px!important;font-weight:800;line-height:1.2;
}
#vehiclePanel.ov4-popup .vprEta small{
  display:block;margin-top:4px!important;white-space:normal!important;
  overflow-wrap:anywhere!important;overflow:visible!important;
  font-size:12.5px!important;line-height:1.24;font-weight:800;
}
#vehiclePanel.ov4-popup .vprEta time{
  grid-column:3;grid-row:1;align-self:end;
  font-size:20px!important;font-weight:900;color:var(--ov4-blue);
  letter-spacing:-.3px;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums;
}
#vehiclePanel.ov4-popup .vprEta em{
  grid-column:3;grid-row:2;align-self:start;text-align:right;
  font-size:10.5px!important;color:#426fa2;font-weight:700;
  white-space:nowrap;font-style:normal;
}
#vehiclePanel.ov4-popup .vprSummary{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;margin:0 0 9px;border:1px solid var(--ov4-softline);
  border-top:0;border-radius:0 0 14px 14px;
  background:var(--surface,#fff);overflow:hidden;
}
#vehiclePanel.ov4-popup .vprSummaryCard{
  min-height:77px;padding:12px 10px;gap:3px;
  align-items:flex-start;justify-content:flex-start;
  border-radius:0!important;border:0!important;background:transparent!important;
}
#vehiclePanel.ov4-popup .vprSummaryCard + .vprSummaryCard{
  border-left:1px solid var(--ov4-softline)!important;
}
#vehiclePanel.ov4-popup .vprSummaryCard>small{
  font-size:9px!important;letter-spacing:.045em;font-weight:800;
}
#vehiclePanel.ov4-popup .vprSummaryCard>b{
  white-space:normal!important;overflow:visible!important;
  overflow-wrap:anywhere!important;max-height:none!important;
  font-size:11.5px!important;line-height:1.22!important;
}
#vehiclePanel.ov4-popup .vprSummaryCard time{font-size:12px!important;font-variant-numeric:tabular-nums;}
#vehiclePanel.ov4-popup .vprTripMeta{
  margin:0 2px 11px;padding:7px 4px 11px;
  border-bottom:1px solid var(--ov4-softline);color:var(--muted);
}
#vehiclePanel.ov4-popup .vprTripMeta>div{font-size:10.5px;line-height:1.4;}
#vehiclePanel.ov4-popup .vprTripMeta>small{font-size:10px;line-height:1.3;}
#vehiclePanel.ov4-popup .vprTimeline{
  --vpr-time:49px;--vpr-gap:9px;
  margin:0 0 9px!important;padding:0 0 2px!important;
  border:0!important;
}
#vehiclePanel.ov4-popup .vprTimeline .timeline-head{
  display:flex;align-items:center;justify-content:space-between;margin:0 4px 12px;
}
#vehiclePanel.ov4-popup .vprTimeline .timeline-head h3{
  font-size:11px!important;letter-spacing:.055em;font-weight:850;
}
#vehiclePanel.ov4-popup .vprTimeline li,
#vehiclePanel.ov4-popup .vprTimeline li[data-stop-name]{
  grid-template-columns:var(--vpr-time) 12px minmax(0,1fr);
  gap:var(--vpr-gap);align-items:center;
  min-height:40px;padding:5px 7px!important;margin:0!important;
  border-radius:9px!important;
}
#vehiclePanel.ov4-popup .vprTimeline li>time{
  font-size:10.5px!important;line-height:1.2;
}
#vehiclePanel.ov4-popup .vprTimeline li>div>b{
  font-size:11.5px!important;line-height:1.25;
  white-space:normal!important;overflow:visible!important;
  overflow-wrap:anywhere!important;
}
#vehiclePanel.ov4-popup .vprTimeline li.current{
  background:var(--ov4-current)!important;
  box-shadow:inset 3px 0 0 var(--ov4-amber)!important;
}
#vehiclePanel.ov4-popup .vprTimeline li.current .timeline-dot::before{
  background:var(--ov4-green)!important;border-color:var(--ov4-green)!important;
}
#vehiclePanel.ov4-popup .vprTimeline li.next{
  background:transparent!important;box-shadow:none!important;
}
#vehiclePanel.ov4-popup .vprTimeline li.next .timeline-dot::before{
  background:var(--ov4-blue)!important;border-color:var(--ov4-blue)!important;
}
#vehiclePanel.ov4-popup .vprTimeline li.passed{opacity:.55!important;}
#vehiclePanel.ov4-popup .vprTimeline .journey-sub{
  font-size:9px!important;line-height:1.3;
}
#vehiclePanel.ov4-popup .vprActions{
  display:grid!important;position:sticky;z-index:8;bottom:0;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) 37px 37px!important;
  gap:6px!important;margin:14px -2px 0!important;padding:10px 2px 2px!important;
  min-height:52px;background:var(--surface,#fff);
  border-top:1px solid var(--ov4-softline);
}
#vehiclePanel.ov4-popup .vprActions>#vpRoute{
  min-height:40px!important;padding:5px 8px;
  background:#087d80!important;color:#fff!important;
  font-size:11px!important;border-radius:11px!important;
}
#vehiclePanel.ov4-popup .vprActions>.ov4Follow{
  display:flex;align-items:center;justify-content:center;gap:5px;
  min-height:40px;min-width:0;padding:5px 7px;
  border:1px solid var(--ov4-softline);border-radius:11px;
  background:var(--surface,#fff);color:var(--ink,#163447);
  font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;
}
#vehiclePanel.ov4-popup .vprActions>.ov4Follow[aria-pressed="true"]{
  background:#e8f5ed;color:#146f45;border-color:#acd4ba;
}
#vehiclePanel.ov4-popup .vprActions .ov4Follow svg{width:16px;height:16px;flex:0 0 16px;}
#vehiclePanel.ov4-popup .vprActions #vpMore,
#vehiclePanel.ov4-popup .vprActions #vpShare{
  width:37px;min-width:37px;min-height:40px;
}
#vehiclePanel.ov4-popup .vprActions.noRoute{
  grid-template-columns:minmax(0,1fr) 37px 37px!important;
  justify-content:stretch!important;
}
#vehiclePanel.ov4-popup .vprActions.noRoute>#vpRoute{display:none!important;}
#vehiclePanel.ov4-popup .vprActions button:focus-visible,
#vehiclePanel.ov4-popup .vprActions summary:focus-visible,
#vehiclePanel.ov4-popup .vprSummaryCard:focus-visible,
#vehiclePanel.ov4-popup .vprTimeline li:focus-visible{
  outline:3px solid #428fe1!important;outline-offset:2px;
}
body.theme-night #vehiclePanel.ov4-popup{
  --ov4-blue-bg:#173c56;--ov4-blue:#a8d4ff;
  --ov4-current:#453a1f;--ov4-green:#8cdbac;
}
body.theme-night #vehiclePanel.ov4-popup .vprEta{
  color:#c8e5ff;border-color:#315a72!important;
}
body.theme-night #vehiclePanel.ov4-popup .vprEta em{color:#afd2f4;}
body.theme-night #vehiclePanel.ov4-popup .vprActions>.ov4Follow[aria-pressed="true"]{
  background:#1d3b2c;border-color:#416b4e;color:#b1ebbb;
}
@media(max-width:760px){
 #vehiclePanel.ov4-popup #vehiclePanelBody{padding:7px 9px 9px!important;}
 #vehiclePanel.ov4-popup .vprHeader{grid-template-columns:53px minmax(0,1fr);column-gap:10px;
   padding:12px 36px 12px 10px;}
 #vehiclePanel.ov4-popup .vprHeroBadge{min-width:52px;height:51px;font-size:18px;}
 #vehiclePanel.ov4-popup .vprTopline h2{font-size:13.5px!important;line-height:1.28!important;}
 #vehiclePanel.ov4-popup .vprEta{grid-template-columns:19px minmax(0,1fr) auto!important;
   padding:10px 9px!important;gap:5px!important;min-height:61px;}
 #vehiclePanel.ov4-popup .vprEtaIcon svg{width:18px!important;height:18px!important;}
 #vehiclePanel.ov4-popup .vprEta small{font-size:11px!important;}
 #vehiclePanel.ov4-popup .vprEta time{font-size:16.5px!important;}
 #vehiclePanel.ov4-popup .vprEta em{font-size:9.5px!important;}
 #vehiclePanel.ov4-popup .vprSummaryCard{padding:9px 8px;min-height:67px;}
 #vehiclePanel.ov4-popup .vprSummaryCard>b{font-size:10.5px!important;}
 #vehiclePanel.ov4-popup .vprTimeline{--vpr-time:44px;--vpr-gap:7px;}
 #vehiclePanel.ov4-popup .vprTimeline li,
 #vehiclePanel.ov4-popup .vprTimeline li[data-stop-name]{min-height:41px;padding:6px 5px!important;}
 #vehiclePanel.ov4-popup .vprActions{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 35px 35px!important;
   gap:5px!important;}
 #vehiclePanel.ov4-popup .vprActions #vpMore,
 #vehiclePanel.ov4-popup .vprActions #vpShare{width:35px;min-width:35px;}
}
@media(max-width:350px){
 #vehiclePanel.ov4-popup .vprEta time{font-size:15px!important;}
 #vehiclePanel.ov4-popup .vprActions>#vpRoute{font-size:9.5px!important;}
 #vehiclePanel.ov4-popup .vprActions>.ov4Follow{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){
 #vehiclePanel.ov4-popup .vprActions button{transition:none!important;}
}

#vehiclePanel.ov4-popup .vprActions>#vpRoute[hidden]{display:none!important;}
#vehiclePanel.ov4-popup .vprHeader:not(:has(.vprHeroBadge)){display:block;}
#vehiclePanel.ov4-popup .vprHeader:not(:has(.vprHeroBadge)) .vprHeroStop{margin-top:7px;}