/* ===========================================================
   BargainX V4 Final Mobile Header
   MOBILE ONLY.
   Desktop gets zero layout changes from this file.
   =========================================================== */


/* -----------------------------------------------------------
   MOBILE TOP ROW:
   [ MENU TOGGLE ] [ SEARCH BAR ]
   ----------------------------------------------------------- */

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

    z-index:15520 !important;

    top:calc(
        env(safe-area-inset-top, 0px) +
        9px
    ) !important;

    left:calc(
        env(safe-area-inset-left, 0px) +
        9px
    ) !important;

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

    margin:0 !important;

    border-radius:17px !important;
}


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

    z-index:15510 !important;

    top:calc(
        env(safe-area-inset-top, 0px) +
        9px
    ) !important;

    left:calc(
        env(safe-area-inset-left, 0px) +
        72px
    ) !important;

    right:calc(
        env(safe-area-inset-right, 0px) +
        9px
    ) !important;

    width:auto !important;

    transform:none !important;
}


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

    min-height:54px !important;
    height:54px !important;

    margin:0 !important;

    padding:
        0 42px
        0 46px !important;

    box-sizing:border-box !important;

    border-radius:18px !important;
}


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

    height:52px !important;

    line-height:52px !important;

    font-size:15px !important;
}


/* Native suggestions stay directly below the mobile search. */
html.bx-v4-phone
body.bx-v4-phone
#bxV4SearchDock #searchResults {
    top:61px !important;

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

    width:100% !important;

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

    border-radius:18px !important;
}


/* -----------------------------------------------------------
   MOBILE WEATHER:
   UNDER SEARCH BAR, NOT BESIDE/ABOVE IT.
   Compact numeric strip.
   ----------------------------------------------------------- */

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

    z-index:15500 !important;

    top:calc(
        env(safe-area-inset-top, 0px) +
        70px
    ) !important;

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

    width:auto !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;

    padding:6px 9px !important;

    display:flex !important;
    align-items:center !important;

    gap:7px !important;

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

    background:rgba(4,17,29,.74) !important;

    box-shadow:
        0 5px 16px
        rgba(0,0,0,.20) !important;

    backdrop-filter:blur(8px) !important;

    pointer-events:none !important;
}


html.bx-v4-phone
body.bx-v4-phone
#bxV4WeatherClock {
    font-size:16px !important;
    font-weight:800 !important;
    line-height:1 !important;
}


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


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


html.bx-v4-phone
body.bx-v4-phone
#bxV4WeatherTemp {
    font-size:18px !important;
    font-weight:850 !important;
}


/* -----------------------------------------------------------
   MOBILE DRAWER STARTS BELOW HEADER + WEATHER
   ----------------------------------------------------------- */

html.bx-v4-phone
body.bx-v4-phone
#bxV4SidePanel {
    top:calc(
        env(safe-area-inset-top, 0px) +
        112px
    ) !important;
}


/* Search lives on map header only, never duplicated in drawer. */
html.bx-v4-phone
body.bx-v4-phone
#bxV4SidePanel #searchForm,
html.bx-v4-phone
body.bx-v4-phone
#bxV4SidePanel #searchResults,
html.bx-v4-phone
body.bx-v4-phone
#bxV4SearchItem {
    display:none !important;
}


/* -----------------------------------------------------------
   MOBILE ROUTE MODE
   Existing route layer owns hide/show.
   Keep weather hidden while route is active.
   ----------------------------------------------------------- */

html.bx-v4-phone
body.bx-v4-phone.bx-v4-mobile-route-active
#bxV4WeatherHud {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}


html.bx-v4-phone
body.bx-v4-phone.bx-v4-stable-route-active
#bxV4SearchDock,
html.bx-v4-phone
body.bx-v4-phone.routeActive
#bxV4SearchDock,
html.bx-v4-phone
body.bx-v4-phone.route-active
#bxV4SearchDock {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}


/* -----------------------------------------------------------
   SMALL PHONES
   ----------------------------------------------------------- */

@media (max-width:390px) {

    html.bx-v4-phone
    body.bx-v4-phone
    #bxV4MenuButton {
        width:50px !important;
        height:50px !important;
    }


    html.bx-v4-phone
    body.bx-v4-phone
    #bxV4SearchDock {
        left:calc(
            env(safe-area-inset-left, 0px) +
            66px
        ) !important;
    }


    html.bx-v4-phone
    body.bx-v4-phone
    #bxV4SearchDock #searchForm {
        min-height:50px !important;
        height:50px !important;
    }


    html.bx-v4-phone
    body.bx-v4-phone
    #bxV4SearchDock #searchInput {
        height:48px !important;
        line-height:48px !important;
        font-size:14px !important;
    }


    html.bx-v4-phone
    body.bx-v4-phone
    #bxV4SearchDock #searchResults {
        top:57px !important;
    }


    html.bx-v4-phone
    body.bx-v4-phone
    #bxV4WeatherHud {
        top:calc(
            env(safe-area-inset-top, 0px) +
            64px
        ) !important;
    }


    html.bx-v4-phone
    body.bx-v4-phone
    #bxV4SidePanel {
        top:calc(
            env(safe-area-inset-top, 0px) +
            105px
        ) !important;
    }
}


/* -----------------------------------------------------------
   PHONE LANDSCAPE
   ----------------------------------------------------------- */

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

    html.bx-v4-phone
    body.bx-v4-phone
    #bxV4MenuButton {
        top:calc(
            env(safe-area-inset-top, 0px) +
            5px
        ) !important;
    }


    html.bx-v4-phone
    body.bx-v4-phone
    #bxV4SearchDock {
        top:calc(
            env(safe-area-inset-top, 0px) +
            5px
        ) !important;
    }


    html.bx-v4-phone
    body.bx-v4-phone
    #bxV4WeatherHud {
        top:calc(
            env(safe-area-inset-top, 0px) +
            62px
        ) !important;
    }
}