/* =========================================================
   NILEN - MOBILE (Suryan-like)
   - mobile header (cart + logo + round menu)
   - black pill search
   - bottom fixed nav
   - custom drawer (no offcanvas)
   ========================================================= */
/* keep things safe from horizontal white gaps */
html, body {
    overflow-x: hidden;
}

/* IMPORTANT: never show mobile drawer elements on desktop */
.mm-overlay,
.mm-drawer {
    display: none;
}

/* MOBILE ONLY */
@media (max-width: 767.98px) {

    /* header container */
    .nilen-mobile-header-wrap {
        position: sticky;
        top: 0;
        z-index: 5000;
        background: #fff;
    }

    /* top row */
    .mobile-header {
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px 6px;
    }

        .mobile-header .mh-icon {
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #111;
            text-decoration: none;
            position: relative;
        }

            .mobile-header .mh-icon .icon,
            .mobile-header .mh-icon .icon-menu {
                font-size: 22px;
                line-height: 1;
            }

        .mobile-header .mh-menu {
            background: #000;
            border-radius: 999px;
            color: #fff;
        }

            .mobile-header .mh-menu .icon-menu {
                color: #fff;
            }

        .mobile-header .mh-logo {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            padding: 0 8px;
        }

            .mobile-header .mh-logo img {
                height: 34px;
                max-width: 200px;
                width: auto;
                object-fit: contain;
                display: block;
            }

        /* cart badge */
        .mobile-header .mh-cart-count {
            position: absolute;
            top: 6px;
            right: 6px;
            min-width: 18px;
            height: 18px;
            line-height: 18px;
            padding: 0 5px;
            border-radius: 999px;
            background: #000;
            color: #fff;
            font-size: 11px;
            text-align: center;
        }

    /* black search bar under header */
    .mobile-search-wrap {
        background: #000;
        padding: 10px 10px 12px;
        border-radius: 16px;
        margin: 0 12px 10px;
    }

        .mobile-search-wrap .site-block-top-search {
            background: transparent;
            border: 1px solid rgba(255,255,255,.25);
            border-radius: 999px;
            padding: 6px 12px;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .mobile-search-wrap .site-block-top-search .icon-search2 {
                color: #fff !important;
            }

            .mobile-search-wrap .site-block-top-search input {
                background: transparent !important;
                color: #fff !important;
                text-align: right;
                border: 0 !important;
                outline: 0 !important;
                box-shadow: none !important;
            }

                .mobile-search-wrap .site-block-top-search input::placeholder {
                    color: rgba(255,255,255,.7);
                }

    /* bottom fixed navigation */
    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 66px;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.08);
        z-index: 6000;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-bottom: env(safe-area-inset-bottom);
    }

        .mobile-bottom-nav a {
            flex: 1;
            text-align: center;
            text-decoration: none;
            color: rgba(0,0,0,.75);
            font-size: 12px;
            padding: 8px 0;
            position: relative;
        }

        .mobile-bottom-nav .mbn-icon {
            display: block;
            font-size: 22px;
            line-height: 1;
            margin-bottom: 6px;
        }

        .mobile-bottom-nav a.active {
            color: #000;
        }

        .mobile-bottom-nav .mbn-badge {
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(14px);
            min-width: 18px;
            height: 18px;
            line-height: 18px;
            padding: 0 5px;
            border-radius: 999px;
            background: #000;
            color: #fff;
            font-size: 11px;
            text-align: center;
        }

    /* space for fixed bottom nav */
    body {
        padding-bottom: 76px;
    }
}

/* ================= MOBILE DRAWER MENU (custom, no theme offcanvas) ================= */
@media (max-width: 767.98px) {

    .mm-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 9000;
    }

    .mm-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0; /* RTL drawer */
        width: 84%;
        max-width: 360px;
        background: #fff;
        z-index: 9500;
        transform: translateX(105%);
        transition: transform .22s ease;
        box-shadow: -10px 0 30px rgba(0,0,0,.18);
        display: flex;
        flex-direction: column;
    }

        .mm-drawer.open {
            transform: translateX(0);
        }

    .mm-head {
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .mm-title {
        font-weight: 700;
    }

    .mm-close {
        border: 0;
        background: transparent;
        font-size: 28px;
        line-height: 1;
        padding: 0 6px;
        cursor: pointer;
    }

    .mm-nav {
        padding: 10px 12px;
        overflow: auto;
    }

        .mm-nav > a,
        .mm-nav summary {
            display: block;
            padding: 12px 10px;
            border-radius: 12px;
            color: #111;
            text-decoration: none;
        }

            .mm-nav > a:hover,
            .mm-nav summary:hover {
                background: rgba(0,0,0,.05);
            }

    .mm-sub a {
        display: block;
        padding: 10px 14px;
        margin: 6px 0;
        border-radius: 12px;
        text-decoration: none;
        color: #111;
        background: rgba(0,0,0,.03);
    }

    /* prevent background scroll when menu open */
    html.mm-lock, body.mm-lock {
        overflow: hidden !important;
        height: 100%;
    }
}