/* ===========================================================
   BargainX V4 Mobile Responsive
   iPhone + Android phone layout only.
   Desktop is untouched because every selector is phone-scoped.
   =========================================================== */

html.bx-v4-phone,
body.bx-v4-phone {
  --bx-safe-top: env(safe-area-inset-top, 0px);
  --bx-safe-right: env(safe-area-inset-right, 0px);
  --bx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bx-safe-left: env(safe-area-inset-left, 0px);

  overflow:hidden !important;
  overscroll-behavior:none;
}


/* ===========================================================
   TOP MENU
   =========================================================== */

body.bx-v4-phone #bxV4MenuButton {
  position:fixed !important;

  z-index:15420 !important;

  top:calc(
    var(--bx-safe-top) +
    10px
  ) !important;

  left:calc(
    var(--bx-safe-left) +
    10px
  ) !important;

  width:54px !important;
  height:54px !important;

  margin:0 !important;

  border-radius:17px !important;
}


/* ===========================================================
   WEATHER
   =========================================================== */

body.bx-v4-phone #bxV4WeatherHud {
  position:fixed !important;

  z-index:15410 !important;

  top:calc(
    var(--bx-safe-top) +
    10px
  ) !important;

  right:calc(
    var(--bx-safe-right) +
    10px
  ) !important;

  width:176px !important;
  height:58px !important;

  padding:0 11px !important;

  gap:7px !important;

  border-radius:17px !important;
}

body.bx-v4-phone #bxV4WeatherClock {
  font-size:17px !important;
}

body.bx-v4-phone #bxV4WeatherDate,
body.bx-v4-phone #bxV4WeatherPlace {
  font-size:10px !important;
}

body.bx-v4-phone #bxV4WeatherRight {
  gap:6px !important;
}

body.bx-v4-phone #bxV4WeatherIcon {
  width:27px !important;
  height:27px !important;
}

body.bx-v4-phone #bxV4WeatherTemp {
  font-size:17px !important;
}


/* ===========================================================
   SEARCH
   =========================================================== */

body.bx-v4-phone #bxV4SearchDock {
  position:fixed !important;

  z-index:15400 !important;

  top:calc(
    var(--bx-safe-top) +
    78px
  ) !important;

  left:calc(
    var(--bx-safe-left) +
    10px
  ) !important;

  right:calc(
    var(--bx-safe-right) +
    10px
  ) !important;

  width:auto !important;

  transform:none !important;
}

body.bx-v4-phone #bxV4SearchDock #searchForm {
  width:100% !important;

  min-height:52px !important;

  padding:
    0 45px
    0 47px !important;

  border-radius:18px !important;
}

body.bx-v4-phone #bxV4SearchDock #searchInput {
  height:50px !important;

  line-height:50px !important;

  font-size:16px !important;
}

body.bx-v4-phone #bxV4SearchClear {
  right:8px !important;
  top:7px !important;

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


/* Search results */
body.bx-v4-phone #bxV4SearchDock #searchResults {
  position:absolute !important;

  top:59px !important;

  left:0 !important;
  right:0 !important;

  width:100% !important;

  max-height:min(
    48dvh,
    430px
  ) !important;

  border-radius:18px !important;

  overflow-y:auto !important;

  -webkit-overflow-scrolling:touch;
}


/* ===========================================================
   SIDE PANEL
   =========================================================== */

body.bx-v4-phone #bxV4SidePanel {
  position:fixed !important;

  z-index:15350 !important;

  top:calc(
    var(--bx-safe-top) +
    142px
  ) !important;

  left:var(--bx-safe-left) !important;

  bottom:calc(
    var(--bx-safe-bottom) +
    10px
  ) !important;

  /*
    Leave a guaranteed strip of map visible on the right
    for GPS / compass / zoom controls.
  */
  width:min(
    calc(100vw - 68px),
    390px
  ) !important;

  height:auto !important;
  max-height:none !important;

  padding:
    14px 14px
    calc(
      18px +
      var(--bx-safe-bottom)
    ) !important;

  box-sizing:border-box !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  -webkit-overflow-scrolling:touch;

  scrollbar-width:none !important;

  border-radius:
    0 20px 20px 0 !important;

  box-shadow:
    10px 0 32px
    rgba(0,0,0,.30) !important;

  transform:
    translateX(
      calc(-100% - 16px)
    ) !important;

  transition:
    transform .24s
    cubic-bezier(.2,.82,.28,1) !important;
}

body.bx-v4-phone #bxV4SidePanel::-webkit-scrollbar {
  width:0 !important;
  height:0 !important;
  display:none !important;
}

body.bx-v4-phone.bx-v4-panel-open #bxV4SidePanel,
html.bx-v4-phone body.bx-v4-panel-open #bxV4SidePanel {
  transform:
    translateX(0)
    !important;
}


/* Drawer header */
body.bx-v4-phone #bxV4SidePanel .bx-v4-panel-header,
body.bx-v4-phone #bxV4SidePanel header {
  min-height:54px !important;
}


/*
  Search belongs to the MAP header on mobile.
  Never duplicate it inside the drawer.
*/
body.bx-v4-phone #bxV4SidePanel #searchForm,
body.bx-v4-phone #bxV4SidePanel #searchResults,
body.bx-v4-phone #bxV4SearchItem {
  display:none !important;
}


/* panel sections */
body.bx-v4-phone #bxV4SidePanel h2,
body.bx-v4-phone #bxV4SidePanel h3 {
  line-height:1.2 !important;
}

body.bx-v4-phone #bxV4SidePanel .bx-v4-panel-item {
  min-height:62px !important;
}


/* Quick-search grid stays 3 x 2 */
body.bx-v4-phone #bxV4SidePanel .quick-search,
body.bx-v4-phone #bxV4SidePanel [class*="quick"] {
  min-width:0;
}

body.bx-v4-phone #bxV4SidePanel .quick-search-grid,
body.bx-v4-phone #bxV4SidePanel [class*="quick-grid"] {
  display:grid !important;

  grid-template-columns:
    repeat(3, minmax(0,1fr))
    !important;

  gap:8px !important;
}


/* ===========================================================
   RIGHT CONTROL RAIL
   =========================================================== */

body.bx-v4-phone #bxV4CleanRail {
  position:fixed !important;

  z-index:15430 !important;

  top:calc(
    var(--bx-safe-top) +
    176px
  ) !important;

  right:calc(
    var(--bx-safe-right) +
    7px
  ) !important;

  width:52px !important;

  gap:7px !important;
}

body.bx-v4-phone #bxV4CleanRail button {
  width:52px !important;
  min-width:52px !important;
  height:52px !important;
  min-height:52px !important;

  padding:0 !important;

  border-radius:16px !important;
}


/* route cancel in rail */
body.bx-v4-phone #bxV4RailCancel {
  width:52px !important;
  height:66px !important;

  min-width:52px !important;
  min-height:66px !important;

  border-radius:16px !important;

  font-size:9px !important;
}


/* ===========================================================
   INFO
   =========================================================== */

body.bx-v4-phone #infoButton,
body.bx-v4-phone #bxInfoButton,
body.bx-v4-phone .map-info-button {
  right:calc(
    var(--bx-safe-right) +
    9px
  ) !important;

  bottom:calc(
    var(--bx-safe-bottom) +
    12px
  ) !important;

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


/* ===========================================================
   PLACE CARD = MOBILE BOTTOM SHEET
   =========================================================== */

body.bx-v4-phone #bxPlaceCardV273,
body.bx-v4-phone .bx-place-card-v273 {
  position:fixed !important;

  z-index:15550 !important;

  top:auto !important;

  left:calc(
    var(--bx-safe-left) +
    8px
  ) !important;

  right:calc(
    var(--bx-safe-right) +
    8px
  ) !important;

  bottom:calc(
    var(--bx-safe-bottom) +
    8px
  ) !important;

  width:auto !important;

  max-width:none !important;

  max-height:min(
    72dvh,
    680px
  ) !important;

  margin:0 !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  -webkit-overflow-scrolling:touch;

  scrollbar-width:none !important;

  border-radius:24px !important;

  box-shadow:
    0 -16px 42px
    rgba(0,0,0,.42) !important;
}

body.bx-v4-phone #bxPlaceCardV273::-webkit-scrollbar,
body.bx-v4-phone .bx-place-card-v273::-webkit-scrollbar {
  display:none !important;
}


/* compact mobile hero */
body.bx-v4-phone #bxPlaceCardV273 .bx-v273-hero,
body.bx-v4-phone .bx-place-card-v273 .bx-v273-hero {
  min-height:108px !important;
  height:108px !important;
}

body.bx-v4-phone #bxPlaceCardV273 .bx-v273-body,
body.bx-v4-phone .bx-place-card-v273 .bx-v273-body {
  padding:15px !important;
}

body.bx-v4-phone #bxPlaceCardV273 .bx-v273-title {
  font-size:21px !important;
  line-height:1.12 !important;
}

body.bx-v4-phone #bxPlaceCardV273 .bx-v273-actions {
  display:grid !important;

  grid-template-columns:
    repeat(2, minmax(0,1fr))
    !important;

  gap:8px !important;
}

body.bx-v4-phone #bxPlaceCardV273 .bx-v273-actions button {
  min-width:0 !important;

  min-height:44px !important;

  padding:9px 8px !important;
}


/* ===========================================================
   ROUTE HUD
   =========================================================== */

body.bx-v4-phone #bxV4ExactHud {
  position:fixed !important;

  z-index:15380 !important;

  left:8px !important;
  right:8px !important;

  bottom:calc(
    var(--bx-safe-bottom) +
    8px
  ) !important;

  width:auto !important;

  min-height:92px !important;

  grid-template-columns:
    1.45fr .82fr .82fr
    !important;

  border-radius:20px !important;
}

body.bx-v4-phone #bxV4ExactHud .bx-v4-hud-cell {
  min-width:0 !important;

  padding:10px 9px !important;

  gap:8px !important;
}

body.bx-v4-phone #bxV4ExactHud .bx-v4-hud-cell:nth-child(4),
body.bx-v4-phone #bxV4ExactHud .bx-v4-hud-cell:nth-child(5) {
  display:none !important;
}

body.bx-v4-phone #bxV4TurnCell .bx-v4-hud-icon {
  width:45px !important;
  height:45px !important;
}

body.bx-v4-phone #bxV4TurnDistance {
  font-size:19px !important;
}

body.bx-v4-phone #bxV4TurnInstruction {
  font-size:13px !important;
}

body.bx-v4-phone .bx-v4-hud-value {
  font-size:14px !important;
}

body.bx-v4-phone .bx-v4-hud-label,
body.bx-v4-phone .bx-v4-hud-sub,
body.bx-v4-phone #bxV4TurnRoad {
  font-size:9px !important;
}


/* ===========================================================
   RELOCATE
   =========================================================== */

body.bx-v4-phone #bxV4Relocate {
  z-index:15460 !important;

  left:50% !important;

  bottom:calc(
    var(--bx-safe-bottom) +
    112px
  ) !important;

  min-width:110px !important;
  height:40px !important;

  transform:
    translateX(-50%)
    !important;

  font-size:12px !important;
}


/* ===========================================================
   ROUTE MODE
   =========================================================== */

/*
  Existing lifecycle code hides Search during route.
  Keep weather + map controls visible.
*/
body.bx-v4-phone.bx-v4-stable-route-active #bxV4SearchDock,
body.bx-v4-phone.routeActive #bxV4SearchDock,
body.bx-v4-phone.route-active #bxV4SearchDock {
  pointer-events:none !important;
}


/* ===========================================================
   VERY SMALL PHONES
   =========================================================== */

@media (max-width:390px) {

  body.bx-v4-phone #bxV4WeatherHud {
    width:166px !important;
  }

  body.bx-v4-phone #bxV4SidePanel {
    width:
      calc(
        100vw -
        62px
      ) !important;
  }

  body.bx-v4-phone #bxV4CleanRail {
    width:48px !important;
    right:5px !important;
  }

  body.bx-v4-phone #bxV4CleanRail button {
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
  }

  body.bx-v4-phone #bxV4RailCancel {
    width:48px !important;
    height:62px !important;
    min-width:48px !important;
  }
}


/* ===========================================================
   LANDSCAPE PHONE
   =========================================================== */

@media (orientation:landscape) and (max-height:520px) {

  body.bx-v4-phone #bxV4WeatherHud {
    top:calc(
      var(--bx-safe-top) +
      6px
    ) !important;

    height:48px !important;
  }

  body.bx-v4-phone #bxV4MenuButton {
    top:calc(
      var(--bx-safe-top) +
      6px
    ) !important;

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

  body.bx-v4-phone #bxV4SearchDock {
    top:calc(
      var(--bx-safe-top) +
      60px
    ) !important;
  }

  body.bx-v4-phone #bxV4SidePanel {
    top:calc(
      var(--bx-safe-top) +
      118px
    ) !important;

    width:min(
      46vw,
      390px
    ) !important;
  }

  body.bx-v4-phone #bxV4CleanRail {
    top:calc(
      var(--bx-safe-top) +
      118px
    ) !important;
  }

  body.bx-v4-phone #bxPlaceCardV273,
  body.bx-v4-phone .bx-place-card-v273 {
    max-height:78dvh !important;
    width:min(52vw,520px) !important;
    right:auto !important;
  }
}