/* BargainX Navigation V22 - one UI owner, one camera owner */
:root{
  --bx-v22-bg:rgba(3,18,30,.96);
  --bx-v22-border:rgba(55,176,242,.58);
  --bx-v22-text:#f5fbff;
  --bx-v22-muted:#9eb4c5;
  --bx-v22-blue:#39bbff;
}

/* Retire old duplicate presentation surfaces. */
#bxR8BRightRail,
#bxSatelliteRail,
#bxV4CleanRail,
#bxV4WeatherHud,
#bxV4ExactHud,
#bxR10WeatherCard,
#bxProdR6CancelRoute,
#bxV19CancelX,
#bxV4RailCancel,
#bxV4CancelRoute{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* One permanent right-side control rail. */
#rightRail{
  position:fixed!important;
  right:18px!important;
  left:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  z-index:2147482500!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:8px!important;
  width:52px!important;
  height:auto!important;
  max-height:calc(100vh - 130px)!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#rightRail>button,
#rightRail>.bx-v22-control{
  box-sizing:border-box!important;
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  flex:0 0 52px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--bx-v22-border)!important;
  border-radius:15px!important;
  background:var(--bx-v22-bg)!important;
  color:var(--bx-v22-text)!important;
  box-shadow:0 7px 20px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04)!important;
  font:600 27px/1 Arial,sans-serif!important;
  cursor:pointer!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#rightRail>button:hover,
#rightRail>button:focus-visible{
  border-color:#56c8ff!important;
  background:rgba(5,34,51,.98)!important;
}

#rightRail>button.is-active,
#rightRail>button[aria-pressed="true"]{
  border-color:#4ac7ff!important;
  background:#0a3854!important;
  box-shadow:0 0 0 2px rgba(57,187,255,.15),0 7px 20px rgba(0,0,0,.26)!important;
}

#rightRail>button:disabled{
  opacity:.38!important;
  cursor:not-allowed!important;
}

#rightRail svg{
  width:23px!important;
  height:23px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* One weather surface, idle only. */
#bxV22Weather{
  position:fixed;
  z-index:2147481800;
  top:20px;
  right:20px;
  width:278px;
  height:76px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px;
  padding:0 16px;
  border:1px solid rgba(54,169,232,.48);
  border-radius:21px;
  background:linear-gradient(180deg,rgba(6,24,39,.94),rgba(3,15,25,.97));
  box-shadow:0 10px 30px rgba(0,0,0,.30);
  backdrop-filter:blur(12px) saturate(120%);
  color:var(--bx-v22-text);
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
}

.bx-v22-weather-time,
.bx-v22-weather-condition>div{
  display:flex;
  flex-direction:column;
  min-width:0;
}

#bxV22Clock{
  font-size:24px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}

#bxV22Date,
#bxV22Place{
  margin-top:5px;
  color:var(--bx-v22-muted);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

.bx-v22-weather-condition{
  display:flex;
  align-items:center;
  gap:10px;
}

#bxV22WeatherIcon{
  width:35px;
  text-align:center;
  color:#ffd04a;
  font-size:34px;
  line-height:1;
}

#bxV22Temp{
  font-size:21px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}

/* Route mode: unclutter the top. */
body.navigation-active #bxV290SearchDock,
body.bx-v22-route-active #bxV290SearchDock,
body.navigation-active #bxV22Weather,
body.bx-v22-route-active #bxV22Weather,
body.navigation-active #menuButton,
body.bx-v22-route-active #menuButton{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* One cancel button, top-left while routing. */
#bxRouteCancelX{
  position:fixed;
  z-index:2147483200;
  left:28px;
  top:18px;
  width:62px;
  height:62px;
  display:none;
  place-items:center;
  padding:0;
  border:1px solid rgba(68,184,246,.62);
  border-radius:18px;
  background:rgba(3,18,30,.96);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.30);
  font:300 40px/1 Arial,sans-serif;
  cursor:pointer;
}

body.navigation-active #bxRouteCancelX,
body.bx-v22-route-active #bxRouteCancelX{
  display:grid!important;
}

/* Native route HUD is the only route HUD. */
#driveHud{
  position:fixed!important;
  z-index:2147481900!important;
  left:50%!important;
  right:auto!important;
  bottom:18px!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  width:min(1440px,calc(100vw - 190px))!important;
  min-height:116px!important;
  height:auto!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(330px,1.55fr) .95fr .95fr .95fr 1.35fr!important;
  overflow:hidden!important;
  border:1px solid rgba(53,163,226,.45)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(4,18,31,.97),rgba(2,12,21,.99))!important;
  box-shadow:0 17px 40px rgba(0,0,0,.38)!important;
  backdrop-filter:blur(12px)!important;
  color:#f4f9fd!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#driveHud[hidden]{
  display:none!important;
}

#driveHud>div{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:4px!important;
  padding:17px 22px!important;
  box-sizing:border-box!important;
  border-left:1px solid rgba(84,132,165,.20)!important;
  background:transparent!important;
  opacity:1!important;
}

#driveHud>div:first-child{
  border-left:0!important;
}

#driveHud span,
#driveHud small{
  color:#9eb3c3!important;
  font:600 12px/1.2 "Segoe UI",Tahoma,Arial,sans-serif!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#driveHud strong{
  color:#f7fbff!important;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;
  font-size:21px!important;
  line-height:1.15!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#driveHud .focus strong{
  font-size:18px!important;
}

#driveHud .focus #focusDistance{
  color:#fff!important;
  font-size:29px!important;
  font-weight:850!important;
}

/* Re-center prompt appears only after a real user drag/rotate. */
#bxV22Relocate{
  position:fixed;
  z-index:2147482300;
  right:84px;
  bottom:156px;
  min-width:92px;
  height:42px;
  padding:0 14px;
  border:1px solid rgba(61,183,245,.60);
  border-radius:14px;
  background:rgba(3,18,30,.96);
  color:#fff;
  box-shadow:0 7px 20px rgba(0,0,0,.26);
  font:700 13px/1 "Segoe UI",Tahoma,Arial,sans-serif;
  cursor:pointer;
}

#bxV22Relocate[hidden]{
  display:none!important;
}

.bx-v22-drop-marker{
  width:30px;
  height:38px;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.45));
}

.bx-v22-drop-marker svg{
  width:30px;
  height:38px;
  display:block;
}

/* Mapbox attribution is shown only while satellite is actually in use. */
#bxV22MapboxAttribution{
  position:fixed;
  z-index:2147481750;
  right:82px;
  bottom:7px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 7px;
  border-radius:6px;
  background:rgba(3,12,20,.72);
  color:rgba(255,255,255,.72);
  font:500 10px/1.2 Arial,sans-serif;
  white-space:nowrap;
}

#bxV22MapboxAttribution[hidden]{
  display:none!important;
}

#bxV22MapboxAttribution a{
  color:#fff;
  text-decoration:none;
}

body.navigation-active #bxV22MapboxAttribution,
body.bx-v22-route-active #bxV22MapboxAttribution{
  bottom:145px;
}

/* Old standalone route-cancel buttons must never compete with V22. */
.bx-v21-old-cancel,
#bxV4RailCancel,
#bxV4CancelRoute{
  display:none!important;
}

/* Desktop search stays exactly one surface. */
#bxV290SearchDock{
  z-index:2147481000!important;
}

/* Phone layout: menu + search on top, weather below; all hidden in route mode. */
@media(max-width:760px){
  #rightRail{
    right:max(8px,env(safe-area-inset-right))!important;
    top:50%!important;
    gap:6px!important;
    width:44px!important;
    max-height:calc(100dvh - 150px)!important;
  }

  #rightRail>button,
  #rightRail>.bx-v22-control{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    flex-basis:44px!important;
    border-radius:13px!important;
    font-size:23px!important;
  }

  #rightRail svg{
    width:20px!important;
    height:20px!important;
  }

  #bxV22Weather{
    top:72px;
    right:max(10px,env(safe-area-inset-right));
    width:176px;
    height:54px;
    padding:0 10px;
    gap:8px;
    border-radius:16px;
  }

  #bxV22Clock{
    font-size:16px;
  }

  #bxV22Date,
  #bxV22Place{
    font-size:9px;
    margin-top:3px;
  }

  #bxV22WeatherIcon{
    width:27px;
    font-size:26px;
  }

  #bxV22Temp{
    font-size:15px;
  }

  #bxRouteCancelX{
    left:max(9px,env(safe-area-inset-left));
    top:max(9px,env(safe-area-inset-top));
    width:54px;
    height:54px;
    border-radius:16px;
    font-size:34px;
  }

  #driveHud{
    left:8px!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    transform:none!important;
    width:auto!important;
    min-height:92px!important;
    overflow:visible!important;
    grid-template-columns:1.55fr .82fr .82fr!important;
    border-radius:20px!important;
  }

  #driveHud>div{
    padding:10px 9px!important;
    gap:3px!important;
  }

  #driveHud>div:nth-child(4){
    display:none!important;
  }

  #driveHud .road-cell{
    position:absolute!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(100% + 6px)!important;
    min-height:30px!important;
    padding:5px 10px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    border:1px solid rgba(53,163,226,.35)!important;
    border-radius:11px!important;
    background:rgba(3,17,29,.94)!important;
  }

  #driveHud .road-cell span,
  #driveHud .road-cell small{
    display:none!important;
  }

  #driveHud .road-cell strong{
    max-width:100%!important;
    font-size:12px!important;
    text-align:center!important;
  }

  #driveHud strong{
    font-size:14px!important;
  }

  #driveHud .focus strong{
    font-size:13px!important;
  }

  #driveHud .focus #focusDistance{
    font-size:20px!important;
  }

  #driveHud span,
  #driveHud small{
    font-size:9px!important;
  }

  #bxV22Relocate{
    right:60px;
    bottom:116px;
    height:38px;
    min-width:82px;
    padding:0 11px;
    border-radius:13px;
    font-size:11px;
  }

  #bxV22MapboxAttribution{
    right:58px;
    bottom:5px;
    font-size:8px;
  }

  body.navigation-active #bxV22MapboxAttribution,
  body.bx-v22-route-active #bxV22MapboxAttribution{
    bottom:108px;
  }
}

@media(max-height:700px) and (min-width:761px){
  #rightRail{
    gap:5px!important;
  }
  #rightRail>button,
  #rightRail>.bx-v22-control{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    flex-basis:46px!important;
  }
}

/* V22C encoding-safe icon rendering */
#menuButton svg,
#bxV290SearchDock .search-icon svg,
#searchForm .search-icon svg {
  width:24px!important;
  height:24px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#menuButton svg { width:30px!important; height:30px!important; }
#bxV290SearchDock .search-icon { display:grid!important; place-items:center!important; color:#38b9ff!important; }