/* ========================================= */
/* كود الموبايل الشامل (ترويق الهيدر + منع كسر الشاشة) */
/* ========================================= */

@media (max-width: 768px) {
    
    /* 1. قفل الشاشة بالعرض تماماً (منع السكرول المزعج يمين وشمال) */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. إخفاء الزيادات في الهيدر (السوشيال، زرار الدخول، الروابط المفرودة) */
    /* ملحوظة: لو عندك كلاسات بأسماء تانية ضيفها هنا */
    .social-icons, .login-btn, .desktop-nav, .top-links, .social-media, .auth-buttons, .desktop-menu {
        display: none !important;
    }

    /* 3. تظبيط الهيدر عشان يكون صف واحد (أفقي) بستايل FilGoal */
    header, .navbar, .top-bar, .header {
        display: flex !important;
        flex-direction: row !important; /* جنب بعض مش تحت بعض */
        justify-content: space-between !important; /* توزيع: يمين، نص، شمال */
        align-items: center !important; /* توسيط عمودي */
        width: 100% !important;
        height: 60px !important; /* ارتفاع ثابت وشيك */
        padding: 0 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 4. تظبيط اللوجو عشان يكون مقاسه مناسب ومايكسرش الهيدر */
    header .logo img, .navbar-brand img, .header-logo img {
        max-height: 40px !important; 
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* 5. إظهار وتظبيط أيقونة البحث والقائمة (الهامبرجر) */
    .search-icon-mobile, .hamburger-menu, .mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 24px !important;
    }

    /* 6. إجبار التقسيمات الأساسية للموقع إنها تنزل تحت بعض (عمود واحد) */
    .sidebar, .main-content, aside, .content-area, .row, .container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 auto 15px auto !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* 7. تظبيط شريط البحث الداخلي (لو موجود) عشان مايخرجش برا الشاشة */
    input[type="text"], input[type="search"], .search-bar, .search-container {
        width: 95% !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        box-sizing: border-box !important;
    }
    
    /* 8. تظبيط الصور والفيديوهات والجداول عشان متكسرش التصميم */
    img, iframe, video, table {
        max-width: 100% !important;
        height: auto !important;
    }
}