/* BARGAINX_V294_NEON_MAP_ACCURATE_PLACES_V23 */

/* -------------------- PROFESSIONAL SMOOTH DRAWER -------------------- */
#setupPanel.bx-drawer-v23 {
  display:block!important;
  position:fixed!important;
  z-index:22020!important;
  top:112px!important;
  left:18px!important;
  bottom:18px!important;
  right:auto!important;
  width:min(410px,calc(100vw - 36px))!important;
  margin:0!important;
  padding:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  color:#f3eee7!important;
  background:linear-gradient(155deg,rgba(13,25,31,.988),rgba(5,13,18,.995))!important;
  border:1px solid rgba(191,119,55,.48)!important;
  border-radius:20px!important;
  box-shadow:0 25px 80px rgba(0,0,0,.62),0 0 34px rgba(190,103,33,.10)!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(calc(-100% - 30px),0,0);
  transition:transform .16s cubic-bezier(.22,.75,.24,1),opacity .13s ease,visibility 0s linear .16s!important;
  will-change:transform,opacity;
}

#setupPanel.bx-drawer-v23:not([hidden]) {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,0,0);
  transition:transform .16s cubic-bezier(.22,.75,.24,1),opacity .13s ease,visibility 0s!important;
}

#setupPanel.bx-drawer-v23::-webkit-scrollbar { width:6px; }
#setupPanel.bx-drawer-v23::-webkit-scrollbar-thumb { background:rgba(197,122,57,.55);border-radius:20px; }

#setupPanel.bx-drawer-v23 .bx-drawer-head-v22,
#setupPanel.bx-drawer-v23 .bx-saved-row-v22,
#setupPanel.bx-drawer-v23 .bx-set-location-v22,
#setupPanel.bx-drawer-v23 .bx-recent-v22,
#setupPanel.bx-drawer-v23 .bx-drawer-tip-v22 {
  border-color:rgba(192,118,53,.28)!important;
}

#setupPanel.bx-drawer-v23 .bx-saved-row-v22 {
  background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.012))!important;
  border-radius:14px!important;
}

#setupPanel.bx-drawer-v23 .bx-saved-row-v22 small {
  max-width:205px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#setupPanel.bx-drawer-v23 button {
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease!important;
}
#setupPanel.bx-drawer-v23 button:hover { transform:translateY(-1px); }
#setupPanel.bx-drawer-v23 button:active { transform:translateY(0) scale(.985); }

/* -------------------- RECENT TRIPS -------------------- */
.bx-recent-row-v23 {
  width:100%;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 18px;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  color:#eee9e1;
  background:rgba(255,255,255,.018);
  border:1px solid rgba(255,255,255,.055);
  border-radius:11px;
  text-align:left;
  cursor:pointer;
}
.bx-recent-row-v23 + .bx-recent-row-v23 { margin-top:6px; }
.bx-recent-icon-v23 {
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  color:#ffb56f;border:1px solid currentColor;background:rgba(255,153,65,.08);
  box-shadow:0 0 14px color-mix(in srgb,currentColor 45%,transparent),inset 0 0 9px color-mix(in srgb,currentColor 15%,transparent);
}
.bx-recent-icon-v23 svg { width:18px;height:18px; }
.bx-recent-text-v23 { min-width:0; }
.bx-recent-text-v23 strong,.bx-recent-text-v23 small,.bx-recent-text-v23 em { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.bx-recent-text-v23 strong { font-size:11px;color:#f1ede6; }
.bx-recent-text-v23 small { margin-top:2px;font-size:8.5px;color:#999c98; }
.bx-recent-text-v23 em { margin-top:3px;font-size:8px;font-style:normal;color:#d88b46; }
.bx-recent-arrow-v23 { color:#dc944e;font-size:17px; }
.bx-recent-empty-v23 { padding:12px;text-align:center;color:#8d928d;border:1px dashed rgba(190,112,45,.27);border-radius:10px;font-size:9px; }

/* -------------------- CATEGORY COLORS -------------------- */
.bx-cat-hospital { color:#ff525f!important; }
.bx-cat-pharmacy { color:#8cff44!important; }
.bx-cat-embassy { color:#ff9f43!important; }
.bx-cat-restaurant,.bx-cat-cafe { color:#ff8b3d!important; }
.bx-cat-shopping { color:#ff4f9a!important; }
.bx-cat-market { color:#9bea52!important; }
.bx-cat-bank { color:#4e83ff!important; }
.bx-cat-cinema { color:#bb68ff!important; }
.bx-cat-office { color:#30ded8!important; }
.bx-cat-education { color:#9b6cff!important; }
.bx-cat-place { color:#f0b36f!important; }

/* -------------------- GLOWING POPULAR PLACE MARKERS -------------------- */
.bx-poi-marker-v23 {
  pointer-events:none!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transform:translateZ(0);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.72));
}
.bx-poi-bubble-v23 {
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  color:inherit;background:rgba(8,14,17,.88);border:2px solid currentColor;
  box-shadow:0 0 8px currentColor,0 0 19px color-mix(in srgb,currentColor 75%,transparent),inset 0 0 12px color-mix(in srgb,currentColor 22%,transparent);
}
.bx-poi-bubble-v23 svg { width:20px;height:20px; }
.bx-poi-label-v23 {
  max-width:132px;padding:2px 6px;border-radius:7px;
  color:#f6f1e9;background:rgba(6,10,12,.74);
  text-align:center;font:600 10px/1.15 Inter,system-ui,sans-serif;
  text-shadow:0 1px 3px #000;
  white-space:normal;
}

/* -------------------- WHITE TRANSPARENT NAV ROUTE -------------------- */
/* Route paint is set safely at runtime. Road layers are intentionally untouched. */

/* -------------------- NAVIGATION HUD -------------------- */
#driveHud.bx-hud-v23:not([hidden]) {
  display:grid!important;
  grid-template-columns:minmax(170px,1.3fr) repeat(4,minmax(105px,.82fr)) minmax(190px,1.15fr)!important;
  gap:0!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(8,15,19,.96),rgba(4,9,12,.985))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.55),0 0 20px rgba(255,244,224,.06)!important;
}
#driveHud.bx-hud-v23 > div { position:relative;min-width:0; }
#driveHud.bx-hud-v23 > div:not(.focus) { padding-left:42px!important; }
#driveHud .bx-hud-icon-v23 {
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:25px;height:25px;display:grid;place-items:center;border-radius:8px;
  color:#f6aa5b;background:rgba(205,125,54,.09);border:1px solid rgba(205,125,54,.23);
}
#driveHud .bx-hud-icon-v23 svg { width:16px;height:16px; }
#driveHud .bx-hud-eta-v23 { color:#62df85; }
#driveHud .bx-hud-arrival-v23 { color:#a775ff; }
#driveHud .bx-hud-road-v23 { color:#45cce5; }
#driveHud .bx-hud-destination-icon-v23 { color:#ff9f43; }
#driveHud .bx-hud-destination-v23 { border-left:1px solid rgba(255,255,255,.08); }
#driveHud .bx-hud-destination-v23 strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff!important; }
#driveHud .bx-hud-destination-v23 small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9ea29e!important; }

/* Keep the existing live navigation cursor/vehicle untouched and visible. */
.gps-marker,.bx-final-user-marker,.bx-pro-start,.bx-drive-chase-car,.bx-phase2b-cursor,.maplibregl-user-location-dot {
  opacity:1!important;
  visibility:visible!important;
}

/* -------------------- TABLET -------------------- */
@media (min-width:701px) and (max-width:1180px) {
  #setupPanel.bx-drawer-v23 { top:92px!important;left:14px!important;bottom:14px!important;width:min(390px,46vw)!important; }
  .bx-poi-bubble-v23 { width:34px;height:34px; }
  .bx-poi-label-v23 { max-width:110px;font-size:9px; }
  #driveHud.bx-hud-v23:not([hidden]) { grid-template-columns:1.2fr repeat(2,1fr)!important; }
  #driveHud.bx-hud-v23 .focus { grid-column:span 1; }
  #driveHud.bx-hud-v23 .bx-hud-destination-v23 { grid-column:span 2; }
}

/* -------------------- MOBILE -------------------- */
@media (max-width:700px) {
  #setupPanel.bx-drawer-v23 {
    top:112px!important;left:10px!important;bottom:10px!important;
    width:min(88vw,360px)!important;border-radius:18px!important;
    transform:translate3d(calc(-100% - 20px),0,0);
  }
  #setupPanel.bx-drawer-v23:not([hidden]) { transform:translate3d(0,0,0); }
  #setupPanel.bx-drawer-v23 .bx-saved-row-v22 small { max-width:150px; }
  .bx-poi-bubble-v23 { width:32px;height:32px;border-width:1.5px; }
  .bx-poi-bubble-v23 svg { width:17px;height:17px; }
  .bx-poi-label-v23 { max-width:92px;font-size:8.5px;padding:2px 4px; }

  #driveHud.bx-hud-v23:not([hidden]) {
    left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:auto!important;
    grid-template-columns:1fr 1fr!important;
    border-radius:16px!important;
  }
  #driveHud.bx-hud-v23 .focus { grid-column:1/-1; }
  #driveHud.bx-hud-v23 .road-cell { grid-column:1/-1; }
  #driveHud.bx-hud-v23 .bx-hud-destination-v23 { grid-column:1/-1; }
}


/* BARGAINX_V294_V231_INTERACTION_TRAFFIC_FIX */

#setupPanel.bx-drawer-v22.bx-drawer-v23 > header,
#setupPanel.bx-drawer-v22.bx-drawer-v23 > .setup-grid,
#setupPanel.bx-drawer-v22.bx-drawer-v23 > #buildButton,
#setupPanel.bx-drawer-v22.bx-drawer-v23 > #navigateButton,
#setupPanel.bx-drawer-v22.bx-drawer-v23 > #setupStatus {
  display:none!important;
}

#twoDButton.bx-drop-button-v23 svg,
#twoDButton.bx-drop-button-v22 svg {
  width:22px!important;
  height:22px!important;
  display:block!important;
  fill:none!important;
  stroke:#ffffff!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.28))!important;
}

.bx-poi-marker-v23 {
  pointer-events:auto!important;
  cursor:pointer!important;
  outline:none!important;
}

.bx-poi-marker-v23:focus-visible .bx-poi-bubble-v23 {
  box-shadow:0 0 0 2px #fff,0 0 13px currentColor,0 0 25px currentColor!important;
}

.bx-cat-traffic_signal { color:#65f39b!important; }
.bx-cat-speed_camera { color:#ff626a!important; }

.bx-traffic-marker-v231 {
  width:28px;
  height:28px;
  padding:0;
  display:grid;
  place-items:center;
  color:inherit;
  background:rgba(7,13,16,.94);
  border:1.7px solid currentColor;
  border-radius:50%;
  box-shadow:0 0 8px currentColor,0 0 16px color-mix(in srgb,currentColor 58%,transparent);
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}

.bx-traffic-marker-v231 svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bx-traffic-marker-v231:hover { transform:scale(1.08); }

@media(max-width:700px) {
  .bx-traffic-marker-v231 { width:25px;height:25px; }
  .bx-traffic-marker-v231 svg { width:14px;height:14px; }
}


/* ============================================================
   BARGAINX_V294_HUD_RESPONSIVE_V234
   Mobile + tablet HUD only.
   No navigation logic, route logic, map logic or desktop HUD changes.
   ============================================================ */

@media (max-width:1180px) {
  #driveHud.bx-hud-v23:not([hidden]) {
    box-sizing:border-box!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }

  #driveHud.bx-hud-v23 > div {
    min-width:0!important;
    min-height:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  #driveHud.bx-hud-v23 span,
  #driveHud.bx-hud-v23 strong,
  #driveHud.bx-hud-v23 small {
    min-width:0!important;
    max-width:100%!important;
  }

  #driveHud.bx-hud-v23 strong,
  #driveHud.bx-hud-v23 small {
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-icon-v23 {
    flex:0 0 auto!important;
  }
}

@media (min-width:701px) and (max-width:1180px) {
  #driveHud.bx-hud-v23:not([hidden]) {
    left:12px!important;
    right:12px!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    height:118px!important;
    min-height:118px!important;
    max-height:118px!important;
    padding:0 8px!important;
    border-radius:20px!important;
    grid-template-columns:
      minmax(190px,1.35fr)
      minmax(92px,.76fr)
      minmax(88px,.72fr)
      minmax(94px,.76fr)
      minmax(190px,1.45fr)!important;
    grid-template-rows:1fr!important;
    gap:0!important;
  }

  #driveHud.bx-hud-v23 > div {
    grid-column:auto!important;
    grid-row:auto!important;
    height:100%!important;
    padding:13px 14px!important;
    justify-content:center!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
  }

  #driveHud.bx-hud-v23 > div:last-child {
    border-right:0!important;
  }

  #driveHud.bx-hud-v23 .focus {
    grid-column:auto!important;
    padding-left:66px!important;
    position:relative!important;
  }

  #driveHud.bx-hud-v23 .road-cell {
    display:none!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 {
    display:flex!important;
    grid-column:auto!important;
    border-left:0!important;
    border-right:0!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-icon-v23 {
    width:27px!important;
    height:27px!important;
    margin-bottom:5px!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-icon-v23 svg {
    width:18px!important;
    height:18px!important;
  }

  #driveHud.bx-hud-v23 span {
    font-size:10px!important;
    line-height:1.15!important;
  }

  #driveHud.bx-hud-v23 strong {
    font-size:17px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }

  #driveHud.bx-hud-v23 small {
    font-size:9px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 strong {
    font-size:15px!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 small {
    font-size:8.5px!important;
  }

  #focusDistance {
    font-size:24px!important;
    white-space:nowrap!important;
  }

  #focusTurn {
    font-size:13px!important;
    white-space:nowrap!important;
  }

  #driveMetrics {
    bottom:calc(max(12px,env(safe-area-inset-bottom)) + 130px)!important;
  }
}

@media (max-width:700px) {
  #driveHud.bx-hud-v23:not([hidden]) {
    left:max(7px,env(safe-area-inset-left))!important;
    right:max(7px,env(safe-area-inset-right))!important;
    bottom:max(7px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    height:124px!important;
    min-height:124px!important;
    max-height:124px!important;
    padding:0!important;
    border-radius:18px!important;
    grid-template-columns:
      minmax(0,1.45fr)
      minmax(74px,.78fr)
      minmax(74px,.82fr)!important;
    grid-template-rows:72px 52px!important;
    gap:0!important;
  }

  #driveHud.bx-hud-v23 > div {
    height:auto!important;
    min-height:0!important;
    padding:8px 9px!important;
    justify-content:center!important;
    border-right:1px solid rgba(255,255,255,.075)!important;
    border-bottom:0!important;
  }

  #driveHud.bx-hud-v23 .focus {
    display:flex!important;
    grid-column:1!important;
    grid-row:1!important;
    padding-left:52px!important;
    position:relative!important;
  }

  #driveHud.bx-hud-v23 > div:nth-child(2) {
    display:flex!important;
    grid-column:3!important;
    grid-row:1!important;
  }

  #driveHud.bx-hud-v23 > div:nth-child(3) {
    display:flex!important;
    grid-column:2!important;
    grid-row:1!important;
  }

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

  #driveHud.bx-hud-v23 .road-cell {
    display:none!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 {
    display:grid!important;
    grid-column:1/-1!important;
    grid-row:2!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    grid-template-rows:16px 19px 14px!important;
    column-gap:8px!important;
    align-content:center!important;
    padding:4px 10px!important;
    border-left:0!important;
    border-top:1px solid rgba(255,255,255,.09)!important;
    border-right:0!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 .bx-hud-icon-v23 {
    grid-column:1!important;
    grid-row:1/4!important;
    align-self:center!important;
    margin:0!important;
    width:30px!important;
    height:30px!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 > span:not(.bx-hud-icon-v23),
  #driveHud.bx-hud-v23 .bx-hud-destination-v23 > strong,
  #driveHud.bx-hud-v23 .bx-hud-destination-v23 > small {
    grid-column:2!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 > span:not(.bx-hud-icon-v23) {
    grid-row:1!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 > strong {
    grid-row:2!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 > small {
    grid-row:3!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-icon-v23 {
    width:23px!important;
    height:23px!important;
    margin-bottom:2px!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-icon-v23 svg {
    width:15px!important;
    height:15px!important;
  }

  #driveHud.bx-hud-v23 span {
    font-size:8px!important;
    line-height:1.05!important;
  }

  #driveHud.bx-hud-v23 strong {
    font-size:13px!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }

  #driveHud.bx-hud-v23 small {
    font-size:7.5px!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 strong {
    font-size:13px!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 small {
    font-size:7.5px!important;
  }

  #focusDistance {
    font-size:18px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  #focusTurn {
    font-size:10px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }

  #driveMetrics {
    left:max(8px,env(safe-area-inset-left))!important;
    bottom:calc(max(7px,env(safe-area-inset-bottom)) + 134px)!important;
  }
}

@media (max-width:390px) {
  #driveHud.bx-hud-v23:not([hidden]) {
    grid-template-columns:
      minmax(0,1.36fr)
      minmax(66px,.76fr)
      minmax(66px,.78fr)!important;
  }

  #driveHud.bx-hud-v23 .focus {
    padding-left:45px!important;
  }

  #driveHud.bx-hud-v23 > div {
    padding-left:6px!important;
    padding-right:6px!important;
  }

  #driveHud.bx-hud-v23 strong {
    font-size:12px!important;
  }

  #focusDistance {
    font-size:17px!important;
  }

  #focusTurn {
    font-size:9px!important;
  }
}

@media (max-height:560px) and (max-width:1180px) {
  #driveHud.bx-hud-v23:not([hidden]) {
    bottom:6px!important;
  }

  #driveMetrics {
    bottom:136px!important;
  }
}

/* ============================================================
   BARGAINX_V294_MAPLIBRE_LOGO_INSIDE_HUD_V235

   Visual placement only.
   The MapLibre logo remains present and clickable.
   Desktop placement is untouched.
   ============================================================ */

/* Tablet: place logo inside the right side of the HUD row. */
@media (min-width:701px) and (max-width:1180px) {
  #driveHud.bx-hud-v23 .bx-hud-destination-v23 {
    padding-right:52px!important;
  }

  .maplibregl-ctrl-logo {
    position:fixed!important;

    left:auto!important;
    right:28px!important;

    bottom:
      calc(
        max(
          12px,
          env(safe-area-inset-bottom)
        )
        + 45px
      )!important;

    width:24px!important;
    height:24px!important;

    margin:0!important;

    opacity:.76!important;

    filter:
      brightness(0)
      invert(1)
      drop-shadow(
        0 0 5px
        rgba(255,255,255,.20)
      )!important;

    background-size:
      contain!important;

    z-index:21020!important;

    pointer-events:auto!important;
  }
}

/* Phone: logo sits inside the destination row, far right. */
@media (max-width:700px) {
  #driveHud.bx-hud-v23 .bx-hud-destination-v23 {
    padding-right:47px!important;
  }

  .maplibregl-ctrl-logo {
    position:fixed!important;

    left:auto!important;
    right:
      max(
        18px,
        calc(
          env(safe-area-inset-right)
          + 13px
        )
      )!important;

    bottom:
      calc(
        max(
          7px,
          env(safe-area-inset-bottom)
        )
        + 14px
      )!important;

    width:22px!important;
    height:22px!important;

    margin:0!important;

    opacity:.74!important;

    filter:
      brightness(0)
      invert(1)
      drop-shadow(
        0 0 5px
        rgba(255,255,255,.20)
      )!important;

    background-size:
      contain!important;

    z-index:21020!important;

    pointer-events:auto!important;
  }

  /* Prevent the original MapLibre control container from reserving
     or painting an extra bottom margin outside the HUD. */
  .maplibregl-ctrl-bottom-left {
    margin:0!important;
    padding:0!important;
  }

  .maplibregl-ctrl-bottom-left
  > .maplibregl-ctrl {
    margin:0!important;
  }
}

@media (max-width:390px) {
  #driveHud.bx-hud-v23 .bx-hud-destination-v23 {
    padding-right:42px!important;
  }

  .maplibregl-ctrl-logo {
    right:
      max(
        14px,
        calc(
          env(safe-area-inset-right)
          + 10px
        )
      )!important;

    width:20px!important;
    height:20px!important;
  }
}

/* ============================================================
   BARGAINX_V294_HUD_OVERLAP_V236
   Correct owners:
     #driveMetrics
     .maplibregl-ctrl-attrib
     .maplibregl-ctrl-attrib-button

   CSS only. Mobile/tablet only.
   ============================================================ */

/* Tablet: speed gauges clear the HUD by a real visual gap. */
@media (min-width:701px) and (max-width:1180px) {
  #driveMetrics {
    bottom:
      calc(
        max(12px, env(safe-area-inset-bottom))
        + 148px
      )!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 {
    padding-right:58px!important;
  }

  .maplibregl-ctrl-bottom-right >
  .maplibregl-ctrl-attrib {
    position:fixed!important;
    right:calc(max(12px, env(safe-area-inset-right)) + 10px)!important;
    bottom:
      calc(
        max(12px, env(safe-area-inset-bottom))
        + 44px
      )!important;

    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    max-width:30px!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:50%!important;

    background:transparent!important;
    box-shadow:none!important;

    overflow:visible!important;
    z-index:21030!important;
  }

  .maplibregl-ctrl-bottom-right >
  .maplibregl-ctrl-attrib
  > .maplibregl-ctrl-attrib-button {
    display:block!important;
    position:absolute!important;
    inset:0!important;

    width:30px!important;
    height:30px!important;

    margin:0!important;
    padding:0!important;

    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:50%!important;

    background-color:rgba(248,248,248,.96)!important;
    background-size:22px 22px!important;
    background-position:center!important;
    background-repeat:no-repeat!important;

    box-shadow:
      0 5px 18px rgba(0,0,0,.42),
      0 0 0 1px rgba(255,255,255,.04)!important;
  }

  .maplibregl-ctrl-bottom-right >
  .maplibregl-ctrl-attrib:not(.maplibregl-compact-show)
  > .maplibregl-ctrl-attrib-inner {
    display:none!important;
  }
}

/* Phone:
   HUD is 124px high. Put gauges far enough above its top edge
   to leave a clean ~20px visual gap.
*/
@media (max-width:700px) {
  #driveMetrics {
    left:max(8px, env(safe-area-inset-left))!important;
    bottom:
      calc(
        max(7px, env(safe-area-inset-bottom))
        + 154px
      )!important;

    margin:0!important;
    transform:none!important;
    z-index:21010!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 {
    padding-right:52px!important;
  }

  /* The visible white "i" is MapLibre attribution, not the logo. */
  .maplibregl-ctrl-bottom-right >
  .maplibregl-ctrl-attrib {
    position:fixed!important;

    right:
      calc(
        max(7px, env(safe-area-inset-right))
        + 10px
      )!important;

    bottom:
      calc(
        max(7px, env(safe-area-inset-bottom))
        + 11px
      )!important;

    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    max-width:30px!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:50%!important;

    background:transparent!important;
    box-shadow:none!important;

    overflow:visible!important;
    z-index:21030!important;
  }

  .maplibregl-ctrl-bottom-right >
  .maplibregl-ctrl-attrib
  > .maplibregl-ctrl-attrib-button {
    display:block!important;
    position:absolute!important;

    left:0!important;
    right:auto!important;
    top:0!important;
    bottom:auto!important;

    width:30px!important;
    height:30px!important;

    margin:0!important;
    padding:0!important;

    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:50%!important;

    background-color:rgba(248,248,248,.96)!important;
    background-size:22px 22px!important;
    background-position:center!important;
    background-repeat:no-repeat!important;

    box-shadow:
      0 5px 18px rgba(0,0,0,.42),
      0 0 0 1px rgba(255,255,255,.04)!important;
  }

  .maplibregl-ctrl-bottom-right >
  .maplibregl-ctrl-attrib:not(.maplibregl-compact-show)
  > .maplibregl-ctrl-attrib-inner {
    display:none!important;
  }

  /* Do not allow the old bottom-right control margins to move it
     back outside the destination row. */
  .maplibregl-ctrl-bottom-right >
  .maplibregl-ctrl-attrib.maplibregl-ctrl {
    float:none!important;
    clear:none!important;
    margin:0!important;
  }
}

/* Narrow iPhones / compact phones. */
@media (max-width:390px) {
  #driveMetrics {
    bottom:
      calc(
        max(7px, env(safe-area-inset-bottom))
        + 150px
      )!important;
  }

  #driveHud.bx-hud-v23 .bx-hud-destination-v23 {
    padding-right:48px!important;
  }

  .maplibregl-ctrl-bottom-right >
  .maplibregl-ctrl-attrib {
    right:
      calc(
        max(7px, env(safe-area-inset-right))
        + 8px
      )!important;

    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    max-width:28px!important;
  }

  .maplibregl-ctrl-bottom-right >
  .maplibregl-ctrl-attrib
  > .maplibregl-ctrl-attrib-button {
    width:28px!important;
    height:28px!important;
    background-size:20px 20px!important;
  }
}

/* ============================================================
   BARGAINX_V294_FINAL_HUD_INFO_SPEEDO_V237

   FINAL exact owners:
     #driveMetrics
     #attributionInfoButton.attribution-info-button
     #driveHud.bx-hud-v23 .bx-hud-destination-v23

   IMPORTANT:
   The large visible "i" is the BargainX custom map-information
   button. It is NOT a native MapLibre attribution control.

   CSS only. Phone/tablet only. Desktop untouched.
   ============================================================ */

/* -------------------- TABLET -------------------- */
@media (min-width:701px) and (max-width:1180px) {

  /* Raise both existing speed gauges clearly above the 118px HUD. */
  html body.navigation-active #driveMetrics {
    bottom:
      calc(
        max(12px, env(safe-area-inset-bottom))
        + 170px
      )!important;

    margin:0!important;
    z-index:21040!important;
  }

  /* Reserve the far-right portion of Destination for the info button. */
  html body.navigation-active
  #driveHud.bx-hud-v23
  .bx-hud-destination-v23 {
    padding-right:66px!important;
  }

  /* Put the REAL BargainX info button inside the Destination cell. */
  html body.navigation-active
  #attributionInfoButton.attribution-info-button {
    display:grid!important;
    place-items:center!important;

    position:fixed!important;
    left:auto!important;
    top:auto!important;

    right:
      calc(
        max(12px, env(safe-area-inset-right))
        + 15px
      )!important;

    bottom:
      calc(
        max(12px, env(safe-area-inset-bottom))
        + 41px
      )!important;

    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    max-width:36px!important;
    max-height:36px!important;

    margin:0!important;
    padding:0!important;

    border-radius:50%!important;
    transform:none!important;

    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;

    z-index:21080!important;
  }
}

/* -------------------- PHONE -------------------- */
@media (max-width:700px) {

  /* HUD is 124px high.
     This moves the existing speed + limit gauges noticeably higher
     and leaves a clean visual gap above the HUD.
  */
  html body.navigation-active #driveMetrics {
    left:max(8px, env(safe-area-inset-left))!important;

    bottom:
      calc(
        max(7px, env(safe-area-inset-bottom))
        + 178px
      )!important;

    margin:0!important;
    z-index:21040!important;
  }

  /* Keep SAMACO / destination text away from the info button. */
  html body.navigation-active
  #driveHud.bx-hud-v23
  .bx-hud-destination-v23 {
    padding-right:60px!important;
  }

  /* Exact final position:
     inside row 2 (Destination), far-right, vertically centered.
  */
  html body.navigation-active
  #attributionInfoButton.attribution-info-button {
    display:grid!important;
    place-items:center!important;

    position:fixed!important;
    left:auto!important;
    top:auto!important;

    right:
      calc(
        max(7px, env(safe-area-inset-right))
        + 15px
      )!important;

    bottom:
      calc(
        max(7px, env(safe-area-inset-bottom))
        + 9px
      )!important;

    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;

    margin:0!important;
    padding:0!important;

    border-radius:50%!important;
    transform:none!important;

    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;

    z-index:21080!important;
  }
}

/* Compact phones: keep the same clean relationship with slightly
   tighter dimensions, without changing the HUD structure. */
@media (max-width:390px) {

  html body.navigation-active #driveMetrics {
    bottom:
      calc(
        max(7px, env(safe-area-inset-bottom))
        + 174px
      )!important;
  }

  html body.navigation-active
  #driveHud.bx-hud-v23
  .bx-hud-destination-v23 {
    padding-right:56px!important;
  }

  html body.navigation-active
  #attributionInfoButton.attribution-info-button {
    right:
      calc(
        max(7px, env(safe-area-inset-right))
        + 12px
      )!important;

    bottom:
      calc(
        max(7px, env(safe-area-inset-bottom))
        + 10px
      )!important;

    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    max-width:32px!important;
    max-height:32px!important;
  }
}


/* ============================================================
   BARGAINX_V294_CATEGORY_DESTINATION_MARKER_V238
   Existing route destination owner only. No new MapLibre layer.
   ============================================================ */

.bx-pro-destination.bx-category-destination-v238 {
  --bx-destination-color:#f0b36f;
  width:46px!important;
  height:54px!important;
  display:grid!important;
  place-items:end center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--bx-destination-color)!important;
  overflow:visible!important;
  isolation:isolate;
  pointer-events:none!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.74));
}

.bx-pro-destination.bx-category-destination-v238 .bx-destination-pin-v238 {
  position:relative;
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:50% 50% 50% 9px;
  transform:rotate(-45deg);
  transform-origin:50% 50%;
  background:linear-gradient(145deg,rgba(17,20,22,.98),rgba(5,8,10,.98));
  border:2px solid rgba(255,255,255,.96);
  box-shadow:
    0 0 0 2px color-mix(in srgb,var(--bx-destination-color) 48%,transparent),
    0 0 10px var(--bx-destination-color),
    0 0 22px color-mix(in srgb,var(--bx-destination-color) 70%,transparent),
    inset 0 0 12px color-mix(in srgb,var(--bx-destination-color) 28%,transparent);
}

.bx-pro-destination.bx-category-destination-v238 .bx-destination-symbol-v238 {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  transform:rotate(45deg);
  color:var(--bx-destination-color);
}

.bx-pro-destination.bx-category-destination-v238 .bx-destination-symbol-v238 svg {
  width:23px;
  height:23px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

.bx-pro-destination.bx-category-destination-v238.bx-destination-hospital-v238 {
  --bx-destination-color:#ff5967;
}
.bx-pro-destination.bx-category-destination-v238.bx-destination-pharmacy-v238 {
  --bx-destination-color:#8cff44;
}
.bx-pro-destination.bx-category-destination-v238.bx-destination-market-v238 {
  --bx-destination-color:#9bea52;
}
.bx-pro-destination.bx-category-destination-v238.bx-destination-food-v238 {
  --bx-destination-color:#ff934a;
}
.bx-pro-destination.bx-category-destination-v238.bx-destination-fuel-v238 {
  --bx-destination-color:#6ea8ff;
}
.bx-pro-destination.bx-category-destination-v238.bx-destination-bank-v238 {
  --bx-destination-color:#5d8eff;
}
.bx-pro-destination.bx-category-destination-v238.bx-destination-shopping-v238 {
  --bx-destination-color:#ff5aa6;
}

/* SAMACO / automotive: proper automotive destination pin, not a round red dot. */
.bx-pro-destination.bx-category-destination-v238.bx-destination-auto-v238 {
  --bx-destination-color:#ff9a5c;
}

@media (max-width:700px) {
  .bx-pro-destination.bx-category-destination-v238 {
    width:43px!important;
    height:50px!important;
  }

  .bx-pro-destination.bx-category-destination-v238 .bx-destination-pin-v238 {
    width:37px;
    height:37px;
  }

  .bx-pro-destination.bx-category-destination-v238 .bx-destination-symbol-v238,
  .bx-pro-destination.bx-category-destination-v238 .bx-destination-symbol-v238 svg {
    width:22px;
    height:22px;
  }
}


/* ============================================================
   BARGAINX_V294_DESTINATION_BUILDING_GLOW_V239
   Soft destination marker bounce only.
   MapLibre positions the root marker; animate only its inner pin.
   ============================================================ */

@keyframes bxV239DestinationBounce {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-45deg);
  }

  45% {
    transform:
      translateY(-5px)
      rotate(-45deg);
  }

  62% {
    transform:
      translateY(-2px)
      rotate(-45deg);
  }
}

@keyframes bxV239DestinationPing {
  0% {
    opacity:.72;
    transform:
      translate(-50%,50%)
      scale(.55);
  }

  72% {
    opacity:0;
    transform:
      translate(-50%,50%)
      scale(1.45);
  }

  100% {
    opacity:0;
    transform:
      translate(-50%,50%)
      scale(1.45);
  }
}

.bx-pro-destination.bx-category-destination-v238
.bx-destination-pin-v238 {
  animation:
    bxV239DestinationBounce
    1.75s
    cubic-bezier(.28,.74,.34,1)
    infinite;
  will-change:transform;
}

.bx-pro-destination.bx-category-destination-v238::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:11px;

  width:25px;
  height:25px;

  border:
    1.5px
    solid
    var(--bx-destination-color);

  border-radius:50%;

  pointer-events:none;

  animation:
    bxV239DestinationPing
    1.9s
    ease-out
    infinite;

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--bx-destination-color)
      70%,
      transparent
    );
}

@media (prefers-reduced-motion:reduce) {
  .bx-pro-destination.bx-category-destination-v238
  .bx-destination-pin-v238,
  .bx-pro-destination.bx-category-destination-v238::before {
    animation:none!important;
  }
}


/* ============================================================
   BARGAINX_V294_EXACT_PLACE_FULL_RED_BUILDING_V241
   Exact physical destination = red alert marker.
   ============================================================ */

.bx-pro-destination.bx-category-destination-v238.bx-exact-building-v241 {
  --bx-destination-color:#ff3347!important;
  filter:
    drop-shadow(0 0 5px rgba(255,51,71,.95))
    drop-shadow(0 0 13px rgba(255,32,56,.72))
    drop-shadow(0 3px 5px rgba(0,0,0,.72))!important;
}

.bx-pro-destination.bx-category-destination-v238.bx-exact-building-v241
.bx-destination-pin-v238 {
  border-color:#fff!important;
  box-shadow:
    0 0 0 2px rgba(255,51,71,.82),
    0 0 12px rgba(255,32,56,.96),
    0 0 26px rgba(255,32,56,.72),
    inset 0 0 12px rgba(255,32,56,.30)!important;
}