/* V10.0.0 — Free In-App Navigation Test */
.v100-nav-screen{
  position:fixed;
  inset:0;
  z-index:100200;
  overflow:hidden;
  background:#020617;
  color:#f8fafc;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.v100-nav-screen[hidden]{display:none!important}
.v100-map{position:absolute;inset:0;background:#08111f}
.v100-map .leaflet-control-attribution{font-size:8px}
.v100-nav-header{
  position:absolute;z-index:600;top:max(13px,env(safe-area-inset-top));left:12px;right:12px;
  display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:10px;align-items:center;
  pointer-events:none
}
.v100-nav-header>*{pointer-events:auto}
.v100-round-btn{
  width:48px;height:48px;border:1px solid rgba(255,255,255,.16);border-radius:16px;
  color:#fff;background:rgba(2,6,23,.86);backdrop-filter:blur(15px);
  box-shadow:0 12px 30px rgba(0,0,0,.3);font-size:24px;font-weight:850
}
.v100-header-copy{
  min-height:48px;padding:8px 13px;border-radius:16px;
  background:rgba(2,6,23,.86);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(15px);box-shadow:0 12px 30px rgba(0,0,0,.3)
}
.v100-header-copy span{display:block;color:#7dd3fc;font-size:10px;font-weight:900;letter-spacing:.08em}
.v100-header-copy strong{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.v100-turn-card{
  position:absolute;z-index:600;top:calc(max(13px,env(safe-area-inset-top)) + 61px);left:12px;right:12px;
  display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;
  padding:12px;border-radius:21px;background:rgba(3,10,24,.93);
  border:1px solid rgba(56,189,248,.24);backdrop-filter:blur(16px);
  box-shadow:0 18px 44px rgba(0,0,0,.36)
}
.v100-turn-icon{
  display:grid;place-items:center;width:58px;height:58px;border-radius:17px;
  background:linear-gradient(145deg,#2388ff,#135de6);font-size:34px;font-weight:950;
  box-shadow:0 11px 27px rgba(35,136,255,.34)
}
.v100-turn-copy strong{display:block;font-size:17px;line-height:1.25}
.v100-turn-copy span{display:block;margin-top:5px;color:#93c5fd;font-size:12px;font-weight:750}
.v100-stop-card{
  position:absolute;z-index:600;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
  padding:15px;border-radius:27px;background:linear-gradient(160deg,rgba(14,27,46,.98),rgba(5,12,22,.99));
  border:1px solid rgba(56,189,248,.19);box-shadow:0 30px 75px rgba(0,0,0,.53)
}
.v100-stop-top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.v100-label{display:block;color:#38bdf8;font-size:9px;font-weight:950;letter-spacing:.14em}
#v100StopNumber{display:block;margin-top:3px;font-size:23px}
.v100-eta{text-align:right}
.v100-eta span{display:block;color:#94a3b8;font-size:9px;font-weight:900}
.v100-eta strong{display:block;margin-top:2px;font-size:21px}
.v100-stop-address{margin-top:11px;color:#e2e8f0;font-size:13px;line-height:1.4;font-weight:720}
.v100-trip-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.v100-trip-metrics div{padding:9px 6px;border-radius:14px;background:#081525;text-align:center;border:1px solid rgba(148,163,184,.11)}
.v100-trip-metrics span{display:block;color:#94a3b8;font-size:9px}
.v100-trip-metrics strong{display:block;margin-top:3px;font-size:13px}
.v100-actions{display:grid;grid-template-columns:.75fr .95fr 1.35fr;gap:8px;margin-top:12px}
.v100-action{min-height:52px;border:0;border-radius:16px;color:#fff;font-weight:900}
.v100-action.secondary{background:#14253c;border:1px solid rgba(148,163,184,.17)}
.v100-action.primary{background:linear-gradient(135deg,#10b981,#047857);box-shadow:0 13px 28px rgba(16,185,129,.25)}
.v100-nav-message{
  position:absolute;z-index:700;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(88%,420px);padding:18px;border-radius:20px;text-align:center;
  background:rgba(2,6,23,.94);border:1px solid rgba(248,113,113,.26);
  box-shadow:0 26px 70px rgba(0,0,0,.52);font-weight:800
}
.v100-driver-marker{
  width:26px;height:26px;border:4px solid #fff;border-radius:50%;
  background:#2388ff;box-shadow:0 0 0 7px rgba(35,136,255,.20),0 7px 18px rgba(0,0,0,.42)
}
@media(max-height:700px){
  .v100-turn-card{padding:9px}
  .v100-turn-icon{width:49px;height:49px;font-size:28px}
  .v100-stop-card{padding:12px}
  .v100-trip-metrics{margin-top:8px}
}


/* V10.0.1 — primary in-app navigation entry inside existing route UI */
.v100-current-nav-button{
  min-height:48px!important;
  margin:0 8px 8px 0!important;
  padding:10px 16px!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#2388ff,#135de6)!important;
  color:#fff!important;
  border:1px solid rgba(125,211,252,.28)!important;
  box-shadow:0 13px 30px rgba(35,136,255,.28)!important;
}
#v70Navigate,#v67NavigateCurrent{
  background:linear-gradient(135deg,#2388ff,#135de6)!important;
  color:#fff!important;
}


/* =========================================================
   V10.1.0 — Driver-focused full-screen navigation UI
   ========================================================= */

/* Hide every legacy app layer while in-app navigation is active. */
body.v101-navigation-active{
  overflow:hidden!important;
  background:#020617!important;
}

body.v101-navigation-active > .v66-appbar,
body.v101-navigation-active > header,
body.v101-navigation-active > #v66ContinueRoute,
body.v101-navigation-active #v71ContinueCard,
body.v101-navigation-active .v6-bottom-nav,
body.v101-navigation-active .v70-driver-entry,
body.v101-navigation-active .v71-continue-card{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Guarantee navigation owns the complete viewport. */
body.v101-navigation-active #v100NavigationScreen{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
}

body.v101-navigation-active #v100NavigationMap{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}

/* Compact top controls. */
.v100-nav-header{
  top:max(10px,env(safe-area-inset-top))!important;
  left:10px!important;
  right:10px!important;
  grid-template-columns:42px minmax(0,1fr) 48px!important;
  gap:8px!important;
}

.v100-round-btn{
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  background:rgba(2,6,23,.88)!important;
  border:1px solid rgba(125,211,252,.20)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.36)!important;
}

#v100Recenter{
  position:fixed!important;
  z-index:850!important;
  right:14px!important;
  top:auto!important;
  bottom:calc(176px + env(safe-area-inset-bottom))!important;
  width:52px!important;
  height:52px!important;
  border-radius:50%!important;
  color:#fff!important;
  background:linear-gradient(145deg,#2388ff,#135de6)!important;
  border:2px solid rgba(255,255,255,.82)!important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 0 0 5px rgba(35,136,255,.20)!important;
  font-size:25px!important;
}

#v100Recenter.v101-following{
  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 0 0 6px rgba(35,136,255,.25),
    0 0 24px rgba(56,189,248,.45)!important;
}

.v100-header-copy{
  min-height:42px!important;
  padding:6px 11px!important;
  border-radius:14px!important;
}

.v100-header-copy span{
  font-size:9px!important;
}

.v100-header-copy strong{
  font-size:13px!important;
}

/* Turn card occupies less map space. */
.v100-turn-card{
  top:calc(max(10px,env(safe-area-inset-top)) + 51px)!important;
  left:10px!important;
  right:10px!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:10px!important;
  padding:9px 11px!important;
  border-radius:18px!important;
}

.v100-turn-icon{
  width:48px!important;
  height:48px!important;
  border-radius:15px!important;
  font-size:29px!important;
}

.v100-turn-copy strong{
  font-size:15px!important;
  line-height:1.2!important;
}

.v100-turn-copy span{
  margin-top:3px!important;
  font-size:11px!important;
}

/* Compact delivery strip — maximum map visibility. */
.v100-stop-card{
  left:10px!important;
  right:10px!important;
  bottom:calc(10px + env(safe-area-inset-bottom))!important;
  padding:12px 13px!important;
  border-radius:22px!important;
  max-height:160px!important;
  overflow:hidden!important;
}

.v100-stop-top{
  align-items:center!important;
}

.v100-label{
  font-size:8px!important;
}

#v100StopNumber{
  display:inline!important;
  margin-top:2px!important;
  font-size:19px!important;
}

.v100-eta strong{
  font-size:17px!important;
}

.v100-stop-address{
  margin-top:6px!important;
  max-width:70%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:12px!important;
}

.v100-trip-metrics{
  position:absolute!important;
  right:12px!important;
  bottom:69px!important;
  display:flex!important;
  gap:6px!important;
  margin:0!important;
}

.v100-trip-metrics div{
  min-width:67px!important;
  padding:6px 7px!important;
  border-radius:11px!important;
}

.v100-trip-metrics div:nth-child(3){
  display:none!important;
}

.v100-trip-metrics span{
  font-size:8px!important;
}

.v100-trip-metrics strong{
  font-size:11px!important;
}

.v100-actions{
  grid-template-columns:.75fr .85fr 1.3fr!important;
  gap:7px!important;
  margin-top:10px!important;
}

.v100-action{
  min-height:45px!important;
  border-radius:14px!important;
  font-size:12px!important;
}

/* Map attribution remains available but unobtrusive. */
.v100-map .leaflet-control-attribution{
  margin-bottom:2px!important;
  opacity:.62;
}

/* Do not let legacy fixed layers capture touches. */
body.v101-navigation-active main,
body.v101-navigation-active .v67-page{
  pointer-events:none!important;
}

body.v101-navigation-active #v100NavigationScreen,
body.v101-navigation-active #v100NavigationScreen *{
  pointer-events:auto;
}

@media(max-height:700px){
  #v100Recenter{
    bottom:calc(155px + env(safe-area-inset-bottom))!important;
  }

  .v100-stop-card{
    max-height:142px!important;
    padding:10px 11px!important;
  }

  .v100-actions{
    margin-top:7px!important;
  }

  .v100-action{
    min-height:41px!important;
  }
}

#v100CloseNavigation{display:grid!important;place-items:center!important;z-index:900!important}
#v100Recenter{display:grid!important;place-items:center!important;z-index:900!important;font-size:0!important}
#v100Recenter::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18)}


/* =========================================================
   V10.2.0 — Heading-up compass navigation
   ========================================================= */

#v100NavigationMap{
  --v102-map-rotation:0deg;
  transform-origin:50% 50%;
  transition:transform .32s linear;
}

#v100NavigationMap.v102-heading-up{
  transform:rotate(var(--v102-map-rotation)) scale(1.42);
}

/* Keep map attribution readable while map rotates. */
#v100NavigationMap.v102-heading-up .leaflet-control-container{
  transform:rotate(calc(-1 * var(--v102-map-rotation))) scale(.704);
  transform-origin:center;
}

/* Direction arrow; parent map rotates opposite to travel direction,
   so matching arrow rotation leaves the arrow pointing toward the road ahead. */
.v102-driver-arrow{
  --v102-arrow-heading:0deg;
  position:relative;
  width:38px;
  height:38px;
  transform:rotate(var(--v102-arrow-heading));
  transition:transform .25s linear;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.42));
}

.v102-driver-arrow span{
  position:absolute;
  inset:4px 8px 7px;
  clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);
  border:3px solid #fff;
  border-radius:7px;
  background:linear-gradient(180deg,#60a5fa,#1465e8);
  box-shadow:
    0 0 0 5px rgba(35,136,255,.18),
    0 0 20px rgba(35,136,255,.42);
}

/* Always-visible relocate/follow control. */
#v100Recenter{
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:2147483500!important;
  width:58px!important;
  height:58px!important;
  right:16px!important;
  bottom:calc(174px + env(safe-area-inset-bottom))!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#2563eb,#0ea5e9)!important;
  border:3px solid #fff!important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.50),
    0 0 0 7px rgba(37,99,235,.20)!important;
}

#v100Recenter::before{
  content:"⌖"!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:28px!important;
  line-height:1!important;
}

#v100Recenter.v102-heading-active{
  animation:v102FollowPulse 1.8s ease-in-out infinite;
}

@keyframes v102FollowPulse{
  0%,100%{
    box-shadow:
      0 16px 38px rgba(0,0,0,.50),
      0 0 0 5px rgba(37,99,235,.18);
  }
  50%{
    box-shadow:
      0 16px 38px rgba(0,0,0,.50),
      0 0 0 10px rgba(56,189,248,.28),
      0 0 26px rgba(56,189,248,.38);
  }
}

@media(max-height:700px){
  #v100Recenter{
    bottom:calc(156px + env(safe-area-inset-bottom))!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #v100NavigationMap,
  .v102-driver-arrow{
    transition:none!important;
  }
  #v100Recenter.v102-heading-active{
    animation:none!important;
  }
}


/* =========================================================
   V10.2.1 — actual Leaflet pane rotation + visible Follow
   ========================================================= */

/* Undo V10.2 container rotation. Rotating the complete container could cover
   the UI and did not reliably rotate Leaflet's internally transformed panes. */
#v100NavigationMap,
#v100NavigationMap.v102-heading-up{
  transform:none!important;
  scale:none!important;
  overflow:hidden!important;
}

/* `rotate` and `scale` are independent transform properties, so Leaflet may
   continue writing its own inline `transform: translate3d(...)` for panning. */
#v100NavigationMap .leaflet-map-pane{
  transform-origin:50% 50%!important;
  rotate:0deg;
  scale:1;
  transition:rotate .28s linear,scale .22s ease!important;
}

#v100NavigationMap.v102-heading-up .leaflet-map-pane{
  rotate:var(--v102-map-rotation)!important;
  scale:1.42!important;
}

/* Leaflet controls are siblings of map-pane and therefore stay upright. */
#v100NavigationMap.v102-heading-up .leaflet-control-container{
  transform:none!important;
  scale:none!important;
}

.v100-nav-header{
  grid-template-columns:42px minmax(0,1fr)!important;
  z-index:2147483450!important;
}

#v100CloseNavigation{
  position:relative!important;
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:2147483500!important;
}

/* Direct child of navigation screen, no longer trapped inside header's
   stacking context. JS sets bottom from the real delivery-card height. */
#v100Recenter.v1021-floating-follow{
  position:fixed!important;
  top:auto!important;
  right:16px!important;
  left:auto!important;
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:2147483600!important;
  width:58px!important;
  height:58px!important;
  margin:0!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#2563eb,#0ea5e9)!important;
  border:3px solid #fff!important;
  box-shadow:0 16px 38px rgba(0,0,0,.52),0 0 0 7px rgba(37,99,235,.22)!important;
  color:transparent!important;
}

#v100Recenter.v1021-floating-follow::before{
  content:"⌖"!important;
  display:block!important;
  position:static!important;
  width:auto!important;
  height:auto!important;
  background:none!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:29px!important;
  line-height:1!important;
}

@media(prefers-reduced-motion:reduce){
  #v100NavigationMap .leaflet-map-pane{
    transition:none!important;
  }
}


/* =========================================================
   V10.2.2 — Relocate centring and rotated-map coverage fix
   ========================================================= */

/* Never rotate the entire map element; doing so exposes the page background. */
#v100NavigationMap,
#v100NavigationMap.v102-heading-up{
  transform:none!important;
  scale:none!important;
  rotate:0deg!important;
  overflow:hidden!important;
  background:#dbeafe!important;
}

/* Preserve Leaflet's translate transform and apply rotation through the
   independent CSS rotate/scale properties. */
#v100NavigationMap .leaflet-map-pane{
  transform-origin:50% 50%!important;
  rotate:0deg;
  scale:1;
  transition:rotate .24s linear,scale .18s ease!important;
  will-change:rotate,scale;
}

#v100NavigationMap.v102-heading-up .leaflet-map-pane{
  rotate:var(--v102-map-rotation)!important;
  scale:1.58!important;
}

/* Controls stay upright and outside the rotating pane. */
#v100NavigationMap .leaflet-control-container,
#v100NavigationMap.v102-heading-up .leaflet-control-container{
  transform:none!important;
  rotate:0deg!important;
  scale:1!important;
}

/* Compensate the arrow so it points toward the top of the screen. */
#v100NavigationMap.v102-heading-up .v102-driver-arrow{
  transform:rotate(
    calc(var(--v102-arrow-heading) + var(--v102-map-rotation))
  )!important;
}


/* V10.2.3 — stable heading and follow rendering */
#v100NavigationMap .leaflet-map-pane{
  transition:rotate .30s cubic-bezier(.2,.7,.2,1),scale .18s ease!important;
}
#v100NavigationMap.v102-heading-up .leaflet-map-pane{
  scale:1.48!important;
}
.v102-driver-arrow{
  transition:transform .30s cubic-bezier(.2,.7,.2,1)!important;
}


/* =========================================================
   V10.3.0 — Apple-style fixed anchor and premium controls
   ========================================================= */

.v103-nav-controls{
  position:fixed;
  z-index:2147483550;
  right:15px;
  top:calc(max(14px,env(safe-area-inset-top)) + 155px);
  display:grid;
  gap:11px;
}

.v103-control-btn{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.28);
  color:#fff;
  background:
    linear-gradient(145deg,rgba(28,43,63,.94),rgba(10,19,32,.96));
  box-shadow:
    0 14px 32px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  font-size:22px;
  font-weight:950;
}

.v103-control-btn.active{
  color:#7dd3fc;
  border-color:rgba(56,189,248,.48);
  box-shadow:
    0 14px 32px rgba(0,0,0,.38),
    0 0 0 5px rgba(35,136,255,.13),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.v103-route-icon{
  display:block;
  font-size:31px;
  line-height:1;
  transform:rotate(-18deg);
}

/* Premium translucent bottom navigation card. */
.v100-stop-card{
  background:
    linear-gradient(
      155deg,
      rgba(9,28,43,.94),
      rgba(8,18,32,.96) 55%,
      rgba(10,40,42,.92)
    )!important;
  border:1px solid rgba(125,211,252,.20)!important;
  box-shadow:
    0 28px 75px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(25px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(25px) saturate(145%)!important;
}

.v100-stop-card::before{
  content:"";
  display:block;
  width:72px;
  height:5px;
  margin:-3px auto 10px;
  border-radius:999px;
  background:rgba(203,213,225,.44);
}

.v100-trip-metrics div{
  background:rgba(4,13,24,.46)!important;
  border-color:rgba(148,163,184,.15)!important;
}

.v100-action{
  background:rgba(16,34,54,.80)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.v100-action.primary{
  background:
    linear-gradient(135deg,#4f46e5,#1499e8)!important;
  border-color:rgba(147,197,253,.34)!important;
  box-shadow:
    0 12px 30px rgba(37,99,235,.30),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.v103-report-sheet{
  position:fixed;
  inset:0;
  z-index:2147483640;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  background:rgba(1,4,10,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.v103-report-card{
  width:min(520px,100%);
  padding:12px;
  border-radius:26px;
  background:
    linear-gradient(160deg,rgba(18,32,50,.98),rgba(6,14,25,.99));
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 30px 90px rgba(0,0,0,.62);
}

.v103-report-handle{
  width:58px;
  height:5px;
  margin:0 auto 14px;
  border-radius:999px;
  background:rgba(203,213,225,.40);
}

.v103-report-card strong{
  display:block;
  padding:4px 8px 11px;
  font-size:19px;
}

.v103-report-card button{
  display:block;
  width:100%;
  min-height:53px;
  margin-top:7px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.14);
  color:#fff;
  background:#102036;
  text-align:left;
  padding:0 16px;
  font-weight:800;
}

.v103-report-card button.cancel{
  color:#fda4af;
  text-align:center;
  background:#1d1720;
}

@media(max-height:700px){
  .v103-nav-controls{
    top:calc(max(10px,env(safe-area-inset-top)) + 124px);
  }
  .v103-control-btn{
    width:48px;
    height:48px;
  }
}