/* ============================================================================
   شريط الموبايل الثابت - Mobile Fixed Top Bar
   تصميم احترافي شفاف مع Backdrop Blur
   يظهر فقط على الموبايل (max-width: 991px)
============================================================================ */

/* إخفاء الشريط على Desktop */
.mobile-top-bar {
    display: none;
}

/* إظهار الشريط على الموبايل فقط */
@media (max-width: 991px) {
    .mobile-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 60px;
        padding: 0 15px;

        /* خلفية شفافة برتقالية احترافية */
        background: rgba(235, 137, 57, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        /* ظل خفيف للتمييز */
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);

        /* فوق كل العناصر */
        z-index: 9999;

        /* انتقال سلس */
        transition: all 0.3s ease;
    }

    /* الجهة اليمنى: القائمة + البحث + اللغة */
    .mobile-top-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* الجهة اليسرى: العربة */
    .mobile-top-right {
        display: flex;
        align-items: center;
    }

    /* تنسيق الأزرار */
    .mobile-top-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    .mobile-top-btn:hover,
    .mobile-top-btn:active {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(1.05);
    }

    /* زر اللغة - تنسيق خاص */
    .mobile-lang-form {
        margin: 0;
        padding: 0;
    }

    .mobile-lang-form .mobile-top-btn {
        gap: 4px;
        padding: 0 8px;
        width: auto;
        min-width: 45px;
    }

    .mobile-lang-form .lang-text {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    /* زر العربة - تنسيق خاص */
    .mobile-cart-btn {
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.25);
        border-width: 2px;
    }

    /* Badge العربة */
    .mobile-cart-badge {
        position: absolute;
        top: -5px;
        left: -5px;
        background: #dc3545;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        min-width: 20px;
        height: 20px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
        border: 2px solid rgba(242, 129, 35, 1);
    }

    /* إضافة مسافة للمحتوى لتجنب التداخل مع الشريط الثابت */
    body {
        padding-top: 60px;
    }

    /* إخفاء الهيدر الأصلي على الموبايل */
    .top-header-area {
        display: none !important;
    }

    /* تعديل القائمة الجانبية لتتناسب مع الشريط الجديد */
    .sidebar-menu {
        top: 60px;
        height: calc(100vh - 60px);
    }

    /* تأثير عند التمرير - يصبح أكثر شفافية */
    .mobile-top-bar.scrolled {
        background: rgba(242, 129, 35, 0.95);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
}

/* تحسينات للشاشات الصغيرة جداً */
@media (max-width: 375px) {
    .mobile-top-bar {
        padding: 0 10px;
    }

    .mobile-top-left {
        gap: 6px;
    }

    .mobile-top-btn {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .mobile-cart-btn {
        width: 46px;
        height: 46px;
    }

    .mobile-lang-form .lang-text {
        font-size: 11px;
    }
}

/* تأثيرات إضافية للاحترافية */
@media (max-width: 991px) {

    /* تأثير النبض على Badge العربة عند وجود منتجات */
    .mobile-cart-badge {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }
    }

    /* تأثير الضغط على الأزرار */
    .mobile-top-btn:active {
        transform: scale(0.95);
    }
}