/* ============================================================
   NIJEE MOBILE V4
   Clean responsive marketplace mobile interface
   ============================================================ */

@media (min-width: 1200px) {

    .nijee-mobile-v4,
    .nijee-v4-drawer,
    .nijee-v4-drawer-backdrop,
    .nijee-v4-bottom-nav {
        display: none !important;
    }

}


@media (max-width: 1199px) {

    html.nijee-v4-drawer-open,
    html.nijee-v4-drawer-open body {
        overflow: hidden !important;
    }


    /* --------------------------------------------------------
       Remove legacy mobile systems from interaction layer
       -------------------------------------------------------- */

    .mobile-header-active,
    .mobile-header-wrapper-style,
    .search-section.nijee-search-panel {
        display: none !important;
        pointer-events: none !important;
    }


    /* --------------------------------------------------------
       Main mobile header
       -------------------------------------------------------- */

    .nijee-mobile-v4 {
        position: relative;

        z-index: 800;

        width: 100%;

        padding:
            10px
            14px
            11px;

        background:
            #ffffff;

        border-bottom:
            1px solid
            #f0edf5;

        box-shadow:
            0
            5px
            20px
            rgba(38, 27, 59, .055);
    }


    .nijee-v4-topbar {
        min-height:
            58px;

        display:
            grid;

        grid-template-columns:
            38px
            minmax(0, 1fr)
            auto;

        align-items:
            center;

        gap:
            10px;
    }


    /* Hamburger */

    .nijee-v4-menu-btn {
        width:
            36px;

        height:
            40px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            5px;

        padding:
            0;

        border:
            0;

        background:
            transparent;

        cursor:
            pointer;
    }


    .nijee-v4-menu-btn span {
        display:
            block;

        height:
            2.5px;

        border-radius:
            20px;

        background:
            #21183d;
    }


    .nijee-v4-menu-btn span:nth-child(1) {
        width:
            27px;
    }


    .nijee-v4-menu-btn span:nth-child(2) {
        width:
            22px;
    }


    .nijee-v4-menu-btn span:nth-child(3) {
        width:
            27px;
    }


    /* Logo */

    .nijee-v4-logo {
        display:
            flex;

        align-items:
            center;

        min-width:
            0;
    }


    .nijee-v4-logo img {
        display:
            block;

        width:
            auto;

        height:
            auto;

        max-width:
            152px;

        max-height:
            53px;

        object-fit:
            contain;
    }


    /* Right actions */

    .nijee-v4-top-actions {
        display:
            flex;

        align-items:
            center;

        gap:
            13px;
    }


    .nijee-v4-action {
        min-width:
            44px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            2px;

        color:
            #201733 !important;

        font-size:
            10px;

        font-weight:
            600;

        line-height:
            1.1;

        text-decoration:
            none !important;
    }


    .nijee-v4-action-icon {
        position:
            relative;

        width:
            34px;

        height:
            29px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        color:
            #c318d7;

        font-size:
            25px;
    }


    .nijee-v4-action:last-child
    .nijee-v4-action-icon {
        color:
            #ec168c;
    }


    .nijee-v4-badge {
        position:
            absolute;

        top:
            -7px;

        right:
            -6px;

        min-width:
            18px;

        height:
            18px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            0
            4px;

        border:
            2px solid
            #ffffff;

        border-radius:
            999px;

        background:
            #ff3b4f;

        color:
            #ffffff;

        font-size:
            10px;

        font-weight:
            800;

        line-height:
            1;
    }


    /* --------------------------------------------------------
       Search
       -------------------------------------------------------- */

    .nijee-v4-search {
        position:
            relative;

        width:
            100%;

        height:
            52px;

        display:
            flex;

        align-items:
            center;

        margin-top:
            7px;

        border:
            1px solid
            #ded8ea;

        border-radius:
            14px;

        background:
            #ffffff;

        overflow:
            hidden;

        box-shadow:
            0
            3px
            12px
            rgba(67, 35, 113, .04);
    }


    .nijee-v4-search >
    .fa-magnifying-glass {
        flex:
            0
            0
            49px;

        color:
            #64617a;

        font-size:
            20px;

        text-align:
            center;
    }


    .nijee-v4-search input[type="search"] {
        flex:
            1;

        width:
            100%;

        height:
            100%;

        min-width:
            0;

        padding:
            0
            8px
            0
            0;

        border:
            0 !important;

        background:
            transparent !important;

        color:
            #242039;

        font-size:
            14px;

        outline:
            0 !important;

        box-shadow:
            none !important;
    }


    .nijee-v4-search input::placeholder {
        color:
            #77738e;

        opacity:
            1;
    }


    .nijee-v4-image-input {
        position:
            absolute;

        width:
            1px;

        height:
            1px;

        opacity:
            0;

        pointer-events:
            none;
    }


    .nijee-v4-camera-btn {
        width:
            50px;

        height:
            100%;

        flex:
            0
            0
            50px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            0;

        border:
            0;

        background:
            transparent;

        color:
            #5e5a79;

        font-size:
            20px;

        cursor:
            pointer;
    }


    /* --------------------------------------------------------
       Delivery location strip
       -------------------------------------------------------- */

    .nijee-v4-location {
        width:
            calc(100% + 28px);

        min-height:
            55px;

        display:
            grid;

        grid-template-columns:
            38px
            minmax(0, 1fr)
            20px;

        align-items:
            center;

        gap:
            8px;

        margin:
            11px
            -14px
            -11px;

        padding:
            9px
            15px;

        border:
            0;

        background:
            linear-gradient(
                90deg,
                #faf3ff,
                #fff5fb
            );

        color:
            #221b36;

        text-align:
            left;

        cursor:
            pointer;
    }


    .nijee-v4-location-icon {
        width:
            34px;

        height:
            34px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            50%;

        background:
            #ffffff;

        color:
            #8a16e8;

        font-size:
            17px;
    }


    .nijee-v4-location-copy {
        min-width:
            0;

        display:
            flex;

        flex-direction:
            column;

        gap:
            1px;
    }


    .nijee-v4-location-copy strong {
        overflow:
            hidden;

        color:
            #201a32;

        font-size:
            13px;

        font-weight:
            700;

        white-space:
            nowrap;

        text-overflow:
            ellipsis;
    }


    .nijee-v4-location-copy small {
        overflow:
            hidden;

        color:
            #7b758a;

        font-size:
            10px;

        white-space:
            nowrap;

        text-overflow:
            ellipsis;
    }


    .nijee-v4-location >
    .fa-chevron-right {
        color:
            #8618d4;

        font-size:
            17px;
    }


    /* --------------------------------------------------------
       Drawer
       -------------------------------------------------------- */

    .nijee-v4-drawer-backdrop {
        position:
            fixed;

        inset:
            0;

        z-index:
            1998;

        display:
            none;

        background:
            rgba(19, 12, 32, .46);

        opacity:
            0;
    }


    .nijee-v4-drawer-backdrop.is-open {
        display:
            block;

        opacity:
            1;
    }


    .nijee-v4-drawer {
        position:
            fixed;

        top:
            0;

        bottom:
            0;

        left:
            0;

        z-index:
            1999;

        width:
            min(
                86vw,
                360px
            );

        display:
            flex;

        flex-direction:
            column;

        background:
            #ffffff;

        transform:
            translateX(-105%);

        transition:
            transform
            .24s
            ease;

        box-shadow:
            14px
            0
            40px
            rgba(23, 14, 38, .18);
    }


    .nijee-v4-drawer.is-open {
        transform:
            translateX(0);
    }


    .nijee-v4-drawer-head {
        min-height:
            70px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            15px;

        padding:
            12px
            16px;

        border-bottom:
            1px solid
            #eeeaf2;
    }


    .nijee-v4-drawer-head img {
        max-width:
            145px;

        max-height:
            48px;
    }


    .nijee-v4-drawer-close {
        width:
            38px;

        height:
            38px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border:
            0;

        border-radius:
            50%;

        background:
            #f6f1fb;

        color:
            #5f2294;

        font-size:
            19px;
    }


    .nijee-v4-drawer-scroll {
        flex:
            1;

        overflow-y:
            auto;

        padding:
            13px
            16px
            30px;

        -webkit-overflow-scrolling:
            touch;
    }


    .nijee-v4-drawer-title {
        margin:
            6px
            0
            12px;

        color:
            #211b31;

        font-size:
            16px;

        font-weight:
            800;
    }


    .nijee-v4-drawer-menu {
        display:
            grid;

        gap:
            2px;

        margin:
            0;

        padding:
            0;

        list-style:
            none;
    }


    .nijee-v4-drawer-menu a {
        min-height:
            43px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        padding:
            8px
            4px;

        border-bottom:
            1px solid
            #f2eef5;

        color:
            #312a41;

        font-size:
            13px;

        font-weight:
            600;

        text-decoration:
            none !important;
    }


    .nijee-v4-drawer-links {
        display:
            grid;

        gap:
            8px;

        margin-top:
            20px;
    }


    .nijee-v4-drawer-links a {
        min-height:
            44px;

        display:
            flex;

        align-items:
            center;

        gap:
            12px;

        padding:
            10px
            12px;

        border-radius:
            10px;

        background:
            #faf7fc;

        color:
            #352b46;

        font-size:
            13px;

        font-weight:
            600;

        text-decoration:
            none !important;
    }


    .nijee-v4-drawer-links i {
        width:
            20px;

        color:
            #8b1ad8;

        text-align:
            center;
    }


    /* --------------------------------------------------------
       Homepage polish
       -------------------------------------------------------- */

    .nijee-final-home-shell {
        padding-bottom:
            82px !important;

        overflow-x:
            hidden;
    }


    .nijee-final-category-zone {
        padding-top:
            15px !important;

        padding-bottom:
            13px !important;
    }


    .nijee-category-strip {
        gap:
            13px !important;
    }


    .nijee-category-item {
        width:
            72px !important;

        min-width:
            72px !important;
    }


    .nijee-category-icon {
        width:
            64px !important;

        height:
            64px !important;
    }


    .nijee-category-icon img {
        width:
            57px !important;

        height:
            57px !important;
    }


    .nijee-category-name {
        font-size:
            10.5px !important;

        line-height:
            1.25 !important;
    }


    .nijee-final-hero-zone {
        padding-top:
            10px !important;
    }


    .nijee-home-products-zone {
        padding-bottom:
            92px !important;
    }


    .nijee-products-header h2 {
        font-size:
            21px !important;
    }


    /* --------------------------------------------------------
       Bottom app navigation
       -------------------------------------------------------- */

    .nijee-v4-bottom-nav {
        position:
            fixed;

        right:
            0;

        bottom:
            0;

        left:
            0;

        z-index:
            1200;

        min-height:
            68px;

        display:
            grid;

        grid-template-columns:
            repeat(
                5,
                1fr
            );

        align-items:
            center;

        padding:
            6px
            5px
            max(
                6px,
                env(safe-area-inset-bottom)
            );

        border-top:
            1px solid
            #e8e3ed;

        background:
            rgba(
                255,
                255,
                255,
                .97
            );

        backdrop-filter:
            blur(12px);

        box-shadow:
            0
            -5px
            24px
            rgba(34, 24, 48, .07);
    }


    .nijee-v4-bottom-link {
        min-width:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            4px;

        color:
            #6d6680 !important;

        font-size:
            9.5px;

        font-weight:
            600;

        text-decoration:
            none !important;
    }


    .nijee-v4-bottom-link i {
        font-size:
            20px;
    }


    .nijee-v4-bottom-link.is-active {
        color:
            #8b16db !important;
    }


    .nijee-v4-bottom-mall {
        width:
            50px;

        height:
            50px;

        margin-top:
            -20px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border:
            3px solid
            #ffffff;

        border-radius:
            50%;

        background:
            linear-gradient(
                145deg,
                #8c19e2,
                #ec168c,
                #ff781f
            );

        color:
            #ffffff;

        box-shadow:
            0
            5px
            18px
            rgba(190, 28, 180, .28);
    }


    .nijee-v4-bottom-mall i {
        font-size:
            22px;
    }


}


@media (max-width: 390px) {

    .nijee-mobile-v4 {
        padding-left:
            10px;

        padding-right:
            10px;
    }


    .nijee-v4-location {
        width:
            calc(100% + 20px);

        margin-left:
            -10px;

        margin-right:
            -10px;
    }


    .nijee-v4-logo img {
        max-width:
            126px;
    }


    .nijee-v4-top-actions {
        gap:
            7px;
    }


    .nijee-v4-action {
        min-width:
            39px;
    }


    .nijee-v4-action span:last-child {
        font-size:
            9px;
    }

}