/* BarghBazar header mobile CSS - extracted from uploaded style.css */

@media only screen and (max-width: 768px) {
    span.go-sub:before {
        content: "";
        display: block;
        transform: rotate(-180deg);
        width: 20px;
        height: 20px;
        background: url("data:image/svg+xml, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"%23000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4,3 12,8 4,13\" /></svg>");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .submenu-header .back-btn:before {
        content:"";
        display:block;
        background:url("data:image/svg+xml, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"%23007aff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"11,3 5,8 11,13\"/></svg>");
        transform: rotate(180deg);
        width: 20px!important;
        height: 16px!important
    }

    .mini-cart-dropdown-wrapper.display-block {
        left: 0
    }

    .userandlogin .bb-user-logged-in,
    .userandlogin .bb-user-logged-in.display-block {
        background: #fff;
        padding: 10px 20px;
        box-shadow: 0 3px 6px #00000066;
        top: 0;
        display: unset;
        transition: .6s;
        position: fixed;
        height: 100vh
    }

    .userandlogin .bb-user-logged-in {
        border-radius: 0;
        border: 1px solid #00000066;
        right: -100%;
        z-index: 100
    }

    .userandlogin .bb-user-logged-in.display-block {
        border-radius: 0;
        border: 1px solid #00000066;
        right: 0;
        z-index: 100000
    }

    .fix-menu-bottom .active .content>span p {
        margin: 0
    }

    .bb-mega-menu {
        display: none
    }

    .fix-menu-bottom .active .content>span p a {
        margin: 0 15px;
        display: flex;
        flex-direction: row-reverse
    }

    .fix-contact.active .company-num {
        background: #ffc122!important
    }

    .fix-contact.active .company-num a {
        background: #ffc122!important;
        margin: 0 15px;
        display: flex;
        flex-direction: row-reverse;
        padding: 5px 20px;
        font-size: 30px!important;
        font-weight: 600
    }

    .fix-contact.active .company-num svg {
        width: 50px;
        margin: 0 15px;
        height: 50px
    }

    .submenu-header .back-btn svg {
        stroke: #000;
        transform: rotate(180deg);
        width: 20px!important;
        height: 16px!important
    }

    .submenu-header a {
        color: #000!important
    }

    .bb-woo-main-list span.go-sub svg,
    span.go-sub svg {
        transform: rotate(-180deg);
        fill: #828181;
        width: 40px;
        height: 20px;
        stroke: #000
    }

    .bb-mobile-menu .hamber>svg,
    .fix-menu-bottom.row svg {
        width: 30px;
        height: 30px
    }

    .cart-bb-menu svg {
        width: 40px;
        height: 70px
    }

    .cart-bb-menu span {
        text-decoration: none;
        position: absolute;
        right: calc(100% - 2px);
        width: 20px;
        background: #ffc122;
        color: #000;
        border-radius: 100%;
        top: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        font-size: 14px
    }

    .top-menu>.row {
        padding: 0!important;
        margin: 0!important
    }

    .bb-mobile-menu .hamber,
    .bb-mobile-menu .logo,
    .bb-mobile-menu .sabad-mobile,
    .fix-menu-bottom.row>div {
        display: flex;
        justify-content: center;
        align-items: center
    }

    #bb-ajax-search-form:after {
        content: "";
        display: none!important;
        fill: #ffc122;
        content: "";
        width: 25px;
        height: 25px;
        fill: #ffc122;
        position: absolute;
        left: 10px;
        top: calc(50% - 12.5px);
        background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%20fill%3D%22%23ffc220%22%3E%3Cpath%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M36.978%2C33.335A20.756%2C20.756%2C0%2C0%2C0%2C20.612%2C0a20.764%2C20.764%2C0%2C0%2C0%2C0%2C41.526%2C20.394%2C20.394%2C0%2C0%2C0%2C12.483-4.277L44.778%2C49.021l3.886-3.915L36.978%2C33.335ZM20.612%2C35.99A15.227%2C15.227%2C0%2C1%2C1%2C35.728%2C20.763%2C15.189%2C15.189%2C0%2C0%2C1%2C20.612%2C35.99Z%22%20%2F%3E%3C%2Fsvg%3E) 0 0/contain no-repeat
    }

    .bb-mobile-menu .active .menu-mobile-page,
    .bb-mobile-menu .menu-mobile-page,
    .bb-mobile-menu.active .menu-mobile-page {
        background: #fff;
        height: 100%;
        z-index: 10;
        transition: .6s;
        position: fixed
    }

    .bb-mobile-menu svg {
        width: 50px;
        height: 60px
    }

    .bb-mobile-menu .menu-mobile-page {
        width: 100%;
        top: 60px;
        left: 100%
    }

    .bb-mobile-menu .active .menu-mobile-page {
        width: 100%;
        top: 60px;
        left: 0
    }

    .bb-mobile-menu.active .menu-mobile-page {
        width: 100%;
        top: 0;
        right: 0
    }

    .fix-menu-bottom .active .content,
    .fix-menu-bottom .content {
        position: fixed;
        top: 120px;
        width: 100%;
        bottom: 60px;
        transition: .6s
    }

    .top-menu {
        background: #0053e2
    }

    .bb-mobile-menu .middle-menu {
        background: #0053e2;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .bb-mobile-menu .middle-menu form {
        width: 80%
    }

    .bb-mobile-menu .middle-menu form input {
        width: 100%;
        padding: 5px;
        border-radius: 20px
    }

    .bb-mobile-menu {
        position: fixed;
        right: 0;
        top: 0;
        left: 0;
        z-index: 100;
        display: block
    }

    .bb-mobile-menu img {
        height: u
    }

    .menu-mobile-page ul {
        list-style: none;
        padding: 0
    }

    .menu-mobile-page li {
        padding: 5px 20px;
        margin: 10px 0;
        border-bottom: 1px solid #00000075
    }

    .fix-menu-bottom {
        position: fixed;
        z-index: 11;
        background: #f5f5f5;
        bottom: 0;
        right: 0;
        padding: 10px;
        width: 100%;
        margin: 0!important
    }

    .fix-menu-bottom .content {
        right: 100%;
        background: #fff
    }

    .fix-menu-bottom .active .content {
        right: 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .fix-menu-bottom .active .content>p a,
    .fix-menu-bottom .active .content>span a {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0053e2;
        border-radius: 20px;
        font-size: 16px;
        color: #fff;
        text-decoration: none
    }

    .fix-menu-bottom .active .content>p,
    .fix-menu-bottom .active .content>span {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0053e2;
        padding: 10px 20px;
        margin: 5px;
        border-radius: 20px;
        font-size: 16px;
        color: #fff;
        text-decoration: none
    }

    .bb-woo-digi-menu {
        position: relative;
        z-index: 10000;
        direction: rtl;
        font-family: iranyekan,sans-serif
    }

    .menu-icon {
        cursor: pointer;
        padding: 8px;
        border-radius: 8px
    }

    .menu-overlay {
        position: fixed;
        inset: 0;
        backdrop-filter: blur(2px);
        background: rgba(0,0,0,.4);
        display: none;
        z-index: 9999
    }

    .menu-panel {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 360px;
        height: 100vh;
        background: #fff;
        box-shadow: -3px 0 15px rgba(0,0,0,.15);
        border-radius: 12px 0 0 12px;
        transition: right .35s cubic-bezier(.4, 0, .2, 1);
        z-index: 10000;
        overflow: hidden
    }

    .main-level,
    .submenu-page {
        position: absolute;
        inset: 0
    }

    .main-level,
    .mini-cart-dropdown,
    .submenu-page {
        overflow-y: auto;
        background: #fff
    }

    .menu-panel.active {
        right: 0
    }

    .menu-overlay.active {
        display: block
    }

    .main-level {
        padding: 16px;
        z-index: 2
    }

    .main-level .title-mobile-menu {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .bb-woo-main-list,
    .submenu-page ul {
        list-style: none;
        padding: 0;
        margin: 0
    }

    .bb-woo-main-list li {
        padding: 12px 0;
        border-bottom: 1px solid #f3f3f3;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .go-sub,
    .submenu-header {
        align-items: center;
        display: flex
    }

    .bb-woo-main-list a,
    .submenu-page a {
        text-decoration: none;
        transition: color .2s;
        color: #333;
        font-size: 15px
    }

    .bb-woo-main-list a:hover,
    .submenu-page a:hover {
        color: #007aff
    }

    .go-sub {
        cursor: pointer;
        transition: transform .2s
    }

    .go-sub:hover {
        transform: translateX(-2px)
    }

    .submenu-page {
        right: 100%;
        width: 100%;
        height: 100%;
        transition: right .35s cubic-bezier(.4, 0, .2, 1);
        padding: 16px;
        z-index: 3
    }

    .submenu-page.active {
        right: 0;
        z-index: 4
    }

    .submenu-header {
        justify-content: flex-start;
        border-bottom: 1px solid #f1f1f1;
        padding-bottom: 10px;
        margin-bottom: 12px;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 10
    }

    .submenu-header span {
        font-size: 16px;
        margin: 0;
        color: #333
    }

    .submenu-header .back-btn {
        display: flex;
        align-items: center;
        background: 0 0;
        border: none;
        color: #007aff;
        font-weight: 500;
        margin-left: 10px;
        cursor: pointer;
        font-size: 14px
    }

    .submenu-page li {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .mini-cart-dropdown-wrapper {
        position: fixed;
        top: 70px;
        width: 100%;
        visibility: hidden;
        z-index: 999;
        left: -100%;
        transition: .6s
    }

    .mini-cart-dropdown {
        padding: 15px;
        height: calc(100vh - 140px);
        width: 100%;
        max-height: unset;
        border: 1px solid #ddd;
        border-radius: unset;
        box-shadow: unset
    }

    .mini-cart-dropdown-wrapper.display-block {
        visibility: visible;
        z-index: 999;
        transition: .6s
    }
}
