/* ==========================================
   Mobile Menu - حل واضح وبسيط
   ========================================== */

/* على الكمبيوتر - إخفاء الزر */
@media (min-width: 992px) {
    #menu-btn {
        display: none !important;
    }
}

/* على الموبايل */
@media (max-width: 991px) {

    /* ===== زر القائمة (Hamburger) ===== */
    #menu-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 20px;
        cursor: pointer;
        z-index: 1001;
        margin-right: 15px;
    }

    #menu-btn span {
        display: block;
        width: 100%;
        height: 2.5px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* لون أسود عند scroll */
    #site-header.scrolled #menu-btn span {
        background: #333;
    }

    /* تحويل لـ X */
    #site-header.nav-open #menu-btn span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }

    #site-header.nav-open #menu-btn span:nth-child(2) {
        opacity: 0;
    }

    #site-header.nav-open #menu-btn span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }


    /* ===== إخفاء زر التبرع ===== */
    .donate-btn {
        display: none !important;
    }


    /* ===== المنيو المنسدل ===== */
    .header-col-mid {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #212529 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.4s ease !important;
        z-index: 1000 !important;
    }

    /* إظهار المنيو عند nav-open */
    #site-header.nav-open .header-col-mid {
        max-height: 700px !important;
        overflow-y: auto !important;
    }


    /* ===== عناصر المنيو ===== */
    #mainmenu {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 !important;
    }

    #mainmenu > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    #mainmenu > li > a {
        display: block !important;
        padding: 18px 25px !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: right !important;
    }

    #mainmenu > li > a:hover {
        background: rgba(255,255,255,0.08) !important;
    }


    /* ===== القوائم الفرعية ===== */
    #mainmenu > li > ul {
        position: static !important;
        background: rgba(0,0,0,0.3) !important;
        display: none !important;
    }

    #mainmenu > li.open-sub > ul {
        display: block !important;
    }

    #mainmenu > li > ul li a {
        display: block !important;
        padding: 14px 25px 14px 45px !important;
        color: rgba(255,255,255,0.85) !important;
        font-size: 15px !important;
        text-align: right !important;
    }
}