/* ==========================================================
   DESKTOP NAVBAR & BANNER RESTORATION (Screen Width >= 992px)
   ========================================================== */
@media (min-width: 992px) {

    /* 1. Hamburger button desktop par 100% hide rahega */
    .hamburger,
    #hamburger {
        display: none !important;
    }

    /* 2. Desktop Navigation Menu (Home, About, Shop, etc.) ko visible karein */
    .navbar-expand-lg .navbar-collapse,
    #navbarCollapse {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    .top_menue_bar {
        min-height: 55px !important;
        line-height: 1.5 !important;
    }

    .top_menue_bar .navbar-nav .nav-link {
        display: inline-block !important;
        line-height: 1.5 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #333333 !important;
        padding: 15px 12px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .top_menue_bar .navbar-nav .nav-link:hover,
    .top_menue_bar .navbar-nav .nav-link.active {
        color: #d4af37 !important; /* Gold / Brand Color */
    }

    /* 3. Categories Dropdown on Desktop */
    .col-lg-3 .btn-menu {
        display: flex !important;
        line-height: 1.5 !important;
        height: 100% !important;
    }

    /* 4. Desktop Banner (Home - About / Scheme breadcrumb banner) */
    .breadcrumb-section,
    .container-fluid.bg-secondary.breadcrumb-section {
        display: block !important;
        visibility: visible !important;
        padding: 60px 0 30px 0 !important;
        margin-bottom: 30px !important;
        min-height: 120px !important;
    }

    .breadcrumb-section h3,
    .breadcrumb-section p,
    .breadcrumb-section a {
        visibility: visible !important;
        opacity: 1 !important;
        color: #ffffff !important;
    }
}

@media screen and (max-width: 768px) {

    .logo_image {
        height: 45px;
        /* margin-right: 100px; */
    }

    .navbar .input-group {

        margin-bottom: 10px;

    }
/* Drawer ko top parent ke upar laane ke liye */
#mobileMenu.mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 320px !important;
    max-width: 86vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 999999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.22) !important;
}

#mobileMenu.mobile-menu.open {
    transform: translateX(0) !important;
}

/* Fix line-height inheritance and prevent text overlapping inside mobile drawer */
#mobileMenu,
#mobileMenu.mobile-menu,
.mg-app-drawer {
    line-height: 1.4 !important;
}

#mobileMenu span,
#mobileMenu a,
#mobileMenu p,
#mobileMenu h5,
#mobileMenu div,
.mg-app-drawer span,
.mg-app-drawer a,
.mg-app-drawer p,
.mg-app-drawer h5,
.mg-app-drawer div {
    line-height: 1.35 !important;
}

#mobileMenu i.fa,
#mobileMenu i.fas,
.mg-app-drawer i.fa,
.mg-app-drawer i.fas {
    line-height: 1 !important;
}

/* Drawer Body & Sections (Clean list without bulky card boxes) */
.mg-drawer-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 35px 0 !important;
    background: #ffffff !important;
}

.mg-drawer-group-title {
    display: block !important;
    padding: 10px 18px 6px 18px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: #9d7b32 !important;
    background: #faf7f2 !important;
    border-top: 1px solid #f1eae0 !important;
    border-bottom: 1px solid #f1eae0 !important;
    line-height: 1.3 !important;
}

.mg-drawer-group-title:first-child {
    border-top: none !important;
}

.mg-drawer-card,
.mg-drawer-list {
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.mg-drawer-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 46px !important;
    padding: 11px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f4ede3 !important;
    color: #2b2118 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    cursor: pointer !important;
}

.mg-drawer-row:hover,
.mg-drawer-row:active {
    background: #fbf7ee !important;
    color: #a8802a !important;
    text-decoration: none !important;
}

.mg-drawer-row > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.mg-drawer-row > div:first-child span.mg-drawer-label {
    white-space: nowrap !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #2b2118 !important;
}

.mg-drawer-row:hover span.mg-drawer-label {
    color: #a8802a !important;
}

.mg-drawer-row > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
}

.mg-drawer-icon-wrap {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    background: rgba(168, 128, 42, 0.08) !important;
    color: #a8802a !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.mg-drawer-row:hover .mg-drawer-icon-wrap {
    background: #a8802a !important;
    color: #ffffff !important;
    transform: scale(1.05);
}

.mg-drawer-pill-count {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #9d7b32 !important;
    background: rgba(168, 128, 42, 0.12) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    line-height: 1.2 !important;
    display: inline-block !important;
}

.mg-arrow-sm {
    font-size: 11px !important;
    color: #b0a89d !important;
    transition: transform 0.2s ease !important;
}

.mg-drawer-row:hover .mg-arrow-sm {
    transform: translateX(3px);
    color: #a8802a !important;
}

.mg-drawer-chevron {
    font-size: 11px !important;
    color: #b0a89d !important;
    transition: transform 0.25s ease !important;
}

.mg-drawer-row-toggle.active .mg-drawer-chevron {
    transform: rotate(180deg) !important;
    color: #a8802a !important;
}

.mg-drawer-collapse-content {
    display: none;
    background: #fbf9f4 !important;
    border-bottom: 1px solid #ebd9b8 !important;
    border-top: 1px solid #f2e9dc !important;
}

.mg-drawer-collapse-content.show {
    display: block !important;
    opacity: 1 !important;
}

.mg-drawer-subrow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 18px 9px 44px !important;
    font-size: 13px !important;
    color: #433930 !important;
    border-bottom: 1px solid #f3ece1 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    line-height: 1.35 !important;
}

.mg-drawer-subrow:last-child {
    border-bottom: none !important;
}

.mg-drawer-subrow:hover,
.mg-drawer-subrow:active {
    background: #f4ecdf !important;
    color: #a8802a !important;
    padding-left: 48px !important;
    text-decoration: none !important;
}

.mg-drawer-footer {
    display: none !important;
}

/* Hide floating elements while drawer is open */
body.mg-drawer-open #help-widget,
body.mg-drawer-open .today_rate_block,
body.mg-drawer-open #mg_today_rate_wrapper,
.mg-hidden-by-drawer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Backdrop jab close ho to screen se poora hat jaye */
#menuBackdrop,
.menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 99990 !important;
    display: none !important; /* Close par 100% remove */
    pointer-events: none !important;
}

/* Jab open ho tabhi screen cover kare */
#menuBackdrop.visible,
.menu-backdrop.visible {
    display: block !important;
    pointer-events: auto !important;
}

/* Hamburger button ko hamesha clickable rakhein */
.hamburger {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1050 !important;
}


    .category_drop_btn_mob {

        margin-top: -1px;
        padding: 0 30px;
        /*margin-bottom: 10px;*/
        border-radius: 10px;

    }

    .navbar-nav .nav-link {
        color: #6f6f6f !important;
    }

    #header-carousel .carousel-item {

        height: 60vh;

    }

    .carousel-caption .btn {

        color: #FFF;
        border-radius: 10px;

    }

    .btn {

        border-radius: 10px;

    }

    .mb-5,
    .my-5 {
        margin-bottom: 1rem !important;
    }

    .product-item .card-body {

        margin-bottom: 0px !important;
        padding: 0% !important;

    }

    .text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 10px;
        margin-bottom: 5px !important;
    }

    .btn-outline-primary {
        color: #FFF;
        border-color: lightgray;
    }

    a.nav-link.active {
        text-shadow: 1px 2px 3px white;
        color: #000 !important;
    }

    .carousel-control-prev>.btn.btn-dark,
    .carousel-control-next>.btn.btn-dark {
        display: none !important;
        background: transparent !important;
    }

    div:has(ul.mob_breadcrumb)

    /*,div:has(div#header-carousel)*/
        {
        margin-top: 10px !important;
    }

    nav.top_menue_bar {
        padding: 0 10px;
    }

    #filter_side_bar {
        position: static !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
    }
}

.mg-rate-ticker {
    border-top: none !important;
    max-height: 60px;
    overflow: hidden;
    opacity: 1;
}

/* ========================================================
   MODERN MOBILE HEADER & APP SEARCH BAR (Phone View)
   ======================================================== */
@media (max-width: 991.98px) {
    /* Mobile Top Bar Polish - Compact */
    .top_header .mob-header-bar {
        padding: 3px 8px !important;
        background: #ffffff !important;
        min-height: 40px !important;
    }
    .top_header {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .top_menue_bar {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Clean Hamburger button - Compact */
    button.hamburger#hamburger {
        width: 35px !important;
        height: 35px !important;
        border-radius: 8px !important;
        background: #fbf9f5 !important;
        border: 1.5px solid #ebd9b8 !important;
        color: #1b2a41 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    button.hamburger#hamburger:active {
        transform: scale(0.92) !important;
        background: #f5eedf !important;
    }
    button.hamburger#hamburger i {
        font-size: 14.5px !important;
        color: #1b2a41 !important;
    }

    /* Clean Luxury Action Buttons in Top Bar (Search, Wishlist, Cart) - Compact */
    #mob_search_btn a,
    #head_shop_list.mbl .card-wish-mbl,
    .mob-custo-circle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        border-radius: 50% !important;
        background: #fbf9f5 !important;
        border: 1.5px solid #ebd9b8 !important;
        color: #8c6d28 !important;
        box-shadow: 0 1px 4px rgba(180, 130, 40, 0.06) !important;
        margin: 0 !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        position: relative !important;
    }

    #mob_search_btn a i,
    #head_shop_list.mbl .card-wish-mbl i {
        color: #8c6d28 !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    #mob_search_btn a:active,
    #head_shop_list.mbl .card-wish-mbl:active {
        transform: scale(0.92) !important;
        background: #f3ebd9 !important;
        border-color: #d4af37 !important;
    }

    /* Badges for Wishlist and Cart */
    #head_shop_list.mbl .card-wish-mbl .badge {
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 3px !important;
        border-radius: 8px !important;
        background: #1b2a41 !important;
        color: #e6ca65 !important;
        border: 1.5px solid #ffffff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    }

    /* Modern Mobile App Search Bar Component - Compact & Tight */
    .mg-mob-app-search-wrap {
        display: block !important;
        background: #ffffff !important;
        padding: 3px 10px 5px 10px !important;
        border-bottom: 1px solid #ebd9b8 !important;
        box-shadow: 0 2px 6px rgba(180, 130, 40, 0.04) !important;
        position: relative !important;
        z-index: 99 !important;
        max-height: 120px;
        opacity: 1;
        overflow: hidden;
        transform: translateY(0);
        pointer-events: auto !important;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.22s ease,
                    transform 0.28s ease,
                    padding 0.28s ease !important;
    }

    /* Dismissed / Closed state */
    .mg-mob-app-search-wrap.mob_disappear:not(.mob_appear):not(.mg-search-expanded) {
        max-height: 0 !important;
        opacity: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: translateY(-8px) !important;
        pointer-events: none !important;
        border-bottom-color: transparent !important;
        visibility: hidden !important;
    }

    /* Open / Active state */
    .mg-mob-app-search-wrap.mob_appear,
    .mg-mob-app-search-wrap.mg-search-expanded {
        max-height: 120px !important;
        opacity: 1 !important;
        padding: 3px 10px 5px 10px !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
        visibility: visible !important;
        border-bottom-color: #ebd9b8 !important;
    }

    #mob_search_btn.active a,
    #mob_search_btn a.active,
    #mob_search_toggle_btn.active,
    #mob_search_toggle_btn.mg-search-active {
        background: #fdf6e9 !important;
        border-color: #d4af37 !important;
        color: #b45309 !important;
        box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25) !important;
    }
    #mob_search_btn.active a i,
    #mob_search_btn a.active i,
    #mob_search_toggle_btn.active i,
    #mob_search_toggle_btn.mg-search-active i {
        color: #b45309 !important;
        transform: rotate(90deg);
        transition: transform 0.25s ease !important;
    }

    /* Search Pill - Compact & Fully Interactive */
    .mg-mob-search-input-pill {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        background: #fbf9f5 !important;
        border: 1.5px solid #e5d8c3 !important;
        border-radius: 20px !important;
        padding: 1px 4px 1px 10px !important;
        height: 36px !important;
        min-height: 36px !important;
        transition: all 0.25s ease !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
        pointer-events: auto !important;
        cursor: text !important;
        z-index: 2 !important;
    }

    .mg-mob-search-input-pill:focus-within {
        background: #ffffff !important;
        border-color: #d4af37 !important;
        box-shadow: 0 0 0 2.5px rgba(212, 175, 55, 0.2), inset 0 1px 2px rgba(0,0,0,0.02) !important;
    }

    .mg-mob-search-icon-wrap {
        color: #9d7b32 !important;
        font-size: 13px !important;
        margin-right: 7px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        pointer-events: none !important;
    }

    .mg-mob-search-input {
        flex: 1 1 auto !important;
        border: none !important;
        background: transparent !important;
        outline: none !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: #1b2a41 !important;
        padding: 4px 6px !important;
        height: 32px !important;
        line-height: normal !important;
        width: 100% !important;
        box-shadow: none !important;
        pointer-events: auto !important;
        cursor: text !important;
        -webkit-user-select: text !important;
        user-select: text !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        touch-action: manipulation !important;
    }

    .mg-mob-search-input::placeholder {
        color: #94a3b8 !important;
        font-weight: 400 !important;
        font-size: 12.5px !important;
    }

    .mg-mob-search-clear-btn {
        background: transparent !important;
        border: none !important;
        color: #94a3b8 !important;
        font-size: 13px !important;
        padding: 4px 6px !important;
        cursor: pointer !important;
        display: none;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        flex-shrink: 0 !important;
        z-index: 3 !important;
    }

    .mg-mob-search-action-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #b8912b 0%, #d4af37 100%) !important;
        color: #ffffff !important;
        border: none !important;
        padding: 0 !important;
        font-size: 11px !important;
        box-shadow: 0 1px 4px rgba(180, 130, 40, 0.2) !important;
        cursor: pointer !important;
        transition: transform 0.2s ease !important;
        flex-shrink: 0 !important;
        pointer-events: auto !important;
        z-index: 3 !important;
    }
    .mg-mob-search-action-btn:active {
        transform: scale(0.9) !important;
    }

    /* Popular Trending Chips - Compact */
    .mg-mob-trending-row {
        display: flex !important;
        align-items: center !important;
        margin-top: 4px !important;
        margin-bottom: 1px !important;
        overflow: hidden !important;
        gap: 5px !important;
    }

    .mg-mob-trending-label {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        color: #9d7b32 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    .mg-mob-trending-label i {
        color: #e53e3e !important;
        font-size: 10.5px !important;
    }

    .mg-mob-trending-scroll {
        display: flex !important;
        align-items: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 5px !important;
        padding-bottom: 1px !important;
        scrollbar-width: none !important;
    }
    .mg-mob-trending-scroll::-webkit-scrollbar {
        display: none !important;
    }

    .mg-mob-chip {
        display: inline-flex !important;
        align-items: center !important;
        padding: 2px 8px !important;
        border-radius: 10px !important;
        background: #fbf9f5 !important;
        border: 1px solid #ebd9b8 !important;
        color: #475569 !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        line-height: 1.2 !important;
    }
    .mg-mob-chip:hover,
    .mg-mob-chip:active {
        background: #d4af37 !important;
        color: #ffffff !important;
        border-color: #d4af37 !important;
        text-decoration: none !important;
    }

    @keyframes mgPillPulse {
        0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45); }
        70% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); }
        100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
    }
    .mg-pill-pulse {
        animation: mgPillPulse 1.2s ease-out !important;
        border-color: #d4af37 !important;
    }
}