/* Quick Trip P2.4 QA — premium tracking motion and nonintrusive header.
   Presentation-only: verified GPS coordinates, route geometry, ETA and booking
   lifecycle are delegated unchanged to the existing engines. */

/* First 3.3s: addresses fully visible. Thereafter a compact, reachable
   disclosure gives back vertical space to the interactive map. */
#qt-focus[data-mode="tracking"] .qt-focus-tracking-route {
  transition:max-height .32s ease,padding .32s ease,background-color .32s ease;
}
#qt-focus[data-mode="tracking"] .qt-focus-route-toggle {
  display:flex;
  width:100%;
  min-height:29px;
  justify-content:flex-end;
  align-items:center;
  gap:5px;
  padding:3px 1px;
  color:#e8d6ac;
  font:700 11px/1.3 system-ui,sans-serif;
  letter-spacing:.015em;
  border:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
}
#qt-focus[data-mode="tracking"] .qt-focus-route-toggle:focus-visible {
  outline:2px solid #82e4ca;
  outline-offset:2px;
  border-radius:6px;
}
#qt-focus[data-mode="tracking"].qt-route-compact .qt-focus-tracking-route {
  display:flex!important;
  align-items:center!important;
  max-height:50px!important;
  min-height:50px!important;
  padding:7px 67px 7px 12px!important;
  gap:0!important;
  overflow:hidden!important;
  border-radius:16px!important;
  background:#0a343ce9;
}
#qt-focus[data-mode="tracking"].qt-route-compact .qt-focus-tracking-point {
  display:none!important;
}
#qt-focus[data-mode="tracking"].qt-route-compact .qt-focus-route-toggle {
  justify-content:flex-start;
  min-height:34px;
  font-size:12px;
  white-space:nowrap;
}
@media(max-width:365px){
  #qt-focus[data-mode="tracking"].qt-route-compact .qt-focus-tracking-route {
    padding-right:61px!important;
  }
}

/* Moving highlights run on the REAL route polyline, never on a simulated car.
   The solid green road remains underneath throughout the animation. */
#qt-focus[data-mode="tracking"][data-gps-verified="true"][data-follow-stage="pickup"]
  .qt-focus-map .premium-map-approach-flow {
  stroke:#dffcf1!important;
  stroke-width:2.6!important;
  stroke-dasharray:7 27;
  stroke-dashoffset:0;
  opacity:.94;
  filter:drop-shadow(0 0 3px #79ffe0);
  pointer-events:none;
  animation:qt-p24-flow 2.15s linear infinite;
}
@keyframes qt-p24-flow {
  to {stroke-dashoffset:-68;}
}
@media(prefers-reduced-motion:reduce){
  #qt-focus[data-mode="tracking"] .qt-focus-tracking-route {
    transition:none!important;
  }
  #qt-focus[data-mode="tracking"] .premium-map-approach-flow {
    animation:none!important;opacity:.65!important;
  }
}

/* Matching top-view vehicle in the trip panel, replacing the native emoji.
   The real GPS marker is rendered directly as SVG in premium-map.js. */
#qt-focus[data-mode="tracking"] .qt-focus-car {
  display:inline-block!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  flex:0 0 38px!important;
  font-size:0!important;
  color:transparent!important;
  background:transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2222%22%20fill%3D%22%2307353d%22%20stroke%3D%22%23eac98e%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2215%22%20width%3D%225%22%20height%3D%2220%22%20rx%3D%222%22%20fill%3D%22%23bfccd0%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2215%22%20width%3D%225%22%20height%3D%2220%22%20rx%3D%222%22%20fill%3D%22%23bfccd0%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%228%22%20width%3D%2216%22%20height%3D%2231%22%20rx%3D%227%22%20fill%3D%22%23f7ebd2%22%20stroke%3D%22%23123e48%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M18%2016%20Q24%2012%2030%2016%20L30%2023%20Q24%2025%2018%2023%20Z%22%20fill%3D%22%23388d91%22%2F%3E%3Cpath%20d%3D%22M18%2030H30L29%2034H19Z%22%20fill%3D%22%2376b9b1%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%223%22%20rx%3D%221%22%20fill%3D%22%23f4c980%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%223%22%20rx%3D%221%22%20fill%3D%22%23f4c980%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat!important;
}