/* =============================================
   NEWSPACK CHILD — MOBILE ONLY STYLES
   ============================================= */

/* ─────────────────────────────────────────────
   1. SCROLL MENU — Header ke bilkul neeche
   ───────────────────────────────────────────── */

#mobile-scroll-menu {
    display: none;
}

@media (max-width: 767px) {

    #mobile-scroll-menu {
        display: block;
        width: 100%;
        background: #1a1a1a;
        border-bottom: 2px solid #e63946;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #mobile-scroll-menu::-webkit-scrollbar {
        display: none;
    }

    .mobile-scroll-menu-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    .mobile-scroll-menu-list li {
        flex-shrink: 0;
    }

    .mobile-scroll-menu-list li a {
        display: block;
        padding: 10px 14px;
        color: #ffffff !important;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none !important;
    }

    .mobile-scroll-menu-list li.current-menu-item > a,
    .mobile-scroll-menu-list li a:hover {
        background: #e63946;
    }

    /* ── Header ka upar-neeche white gap khatam ── */
    .middle-header-contain .wrapper {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* Logo ki min-height override — yahi gap ka asli kaaran tha */
    .site-header .custom-logo-link .custom-logo {
        min-height: 0 !important;
        max-height: 46px !important;
        height: auto !important;
        width: auto !important;
    }

    /* Body ko footer sticky bar ke liye jagah do */
    body {
        padding-bottom: 60px !important;
    }
}


/* ─────────────────────────────────────────────
   2. FOOTER STICKY MENU
   ───────────────────────────────────────────── */

#mobile-footer-sticky {
    display: none;
}

@media (max-width: 767px) {

    #mobile-footer-sticky {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background: #ffffff;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.12);
    }

    #mobile-footer-sticky ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 56px;
    }

    #mobile-footer-sticky ul li {
        flex: 1;
        display: flex;
    }

    #mobile-footer-sticky ul li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        color: #444444 !important;
        text-decoration: none !important;
        font-size: 10px;
        font-weight: 500;
        gap: 3px;
        padding: 4px 2px;
    }

    #mobile-footer-sticky ul li a:hover {
        color: #e63946 !important;
    }

    /* WhatsApp — green */
    #mobile-footer-sticky ul li:nth-child(4) a {
        color: #25D366 !important;
    }

    .mfs-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
    }

    .mfs-icon svg {
        width: 20px;
        height: 20px;
    }

    .mfs-label {
        font-size: 9.5px;
        line-height: 1;
    }

    /* ── Popup Menu ── */
    #mfs-popup-menu {
        display: none;
        position: fixed;
        bottom: 56px;
        left: 0;
        width: 100%;
        background: #1a1a1a;
        max-height: 60vh;
        overflow-y: auto;
        z-index: 9998;
        border-radius: 12px 12px 0 0;
        padding: 8px 0;
    }

    #mfs-popup-menu.open {
        display: block;
    }

    .mfs-popup-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mfs-popup-list li a {
        display: block;
        padding: 13px 20px;
        color: #ffffff !important;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .mfs-popup-list li a:hover {
        background: #e63946;
    }

    /* ── Overlay ── */
    #mfs-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 9997;
    }

    #mfs-overlay.open {
        display: block;
    }
}