/* =============================================================
   مستر اير — Mobile Premium Layer (إضافية / قابلة للإزالة)
   -------------------------------------------------------------
   • طبقة تحسين موبايل تُحمَّل آخر ملف CSS في الهيدر.
   • كل القواعد داخل media queries للموبايل/التابلت فقط
     → الديسكتوب لا يتأثر إطلاقًا.
   • لا تلمس أي منطق PHP/JS — تحسينات عرض بحتة.
   • للتراجع الكامل: احذف سطر <link> الخاص بها من includes/header.php
   ============================================================= */

/* =============================================================
   1) تثبيت العرض الأفقي — علاج "اهتزاز الصفحة واضطرار التصغير"
   السبب: عنصر أعرض من الشاشة يكسر overflow:hidden.
   نستخدم clip (لا ينشئ حاوية تمرير فلا يكسر position:sticky).
   ============================================================= */
@media (max-width: 991px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden; /* fallback للأجهزة القديمة */
        overflow-x: clip;
        /* منع الـrubber-band (الارتداد) الذي يرفع الشريط الثابت السفلي
           أثناء التمرير على iOS — في السفاري والتطبيق المثبّت معًا */
        overscroll-behavior-y: none;
    }

    /* أي وسائط/إطارات/أكواد لا تتعدى عرض الشاشة */
    img, svg, video, iframe, canvas, table, pre, code {
        max-width: 100%;
    }

    /* الحاوية لا تتجاوز عرض الشاشة مهما حصل */
    .container { width: 100%; }
}

/* =============================================================
   2) طي شبكات الأعمدة الـ inline على الموبايل
   حقول الإدخال داخل grid عمودين تفرض عرضًا أكبر من الشاشة
   (صفحة "اتصل بنا" والعناوين في "حسابي"). نطيّها لعمود واحد.
   مقيّدة داخل #mainContent فقط حتى لا تمس الهيدر/الفوتر/الأدراج.
   ============================================================= */
@media (max-width: 600px) {
    #mainContent [style*="grid-template-columns:1fr 1fr"],
    #mainContent [style*="grid-template-columns: 1fr 1fr"],
    #mainContent [style*="grid-template-columns:repeat(2"],
    #mainContent [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================================
   3) درج السلة (Cart Drawer) — علاج اختفاء الأزرار أسفل الشاشة
   السبب: height:100vh على iOS يمتد خلف شريط المتصفح فتختفي
   منطقة الأزرار. نستخدم 100dvh + مساحة آمنة سفلية.
   ============================================================= */
@media (max-width: 991px) {
    .cart-drawer {
        height: 100vh;        /* fallback */
        height: 100dvh;
    }
    .cart-drawer__body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* ضمان ظهور الفوتر كاملًا فوق مؤشر الهوم */
    .cart-drawer__footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* نفس المعالجة لدرج التصنيفات/الماركات الجانبي */
    .mobile-drawer,
    .brand-drawer {
        height: 100vh;
        height: 100dvh;
        -webkit-overflow-scrolling: touch;
    }
}

/* =============================================================
   4) الشريط السفلي + المساحة الآمنة (notch / home indicator)
   ============================================================= */
@media (max-width: 991px) {
    /* مسافة سفلية للجسم تحسب الشريط + المساحة الآمنة */
    body {
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav {
        height: auto;
        min-height: var(--bottom-nav-height);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* تثبيت العنصر على طبقة عرض مستقلة لتقليل الاهتزاز أثناء التمرير */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* رفع الأزرار العائمة فوق المساحة الآمنة */
    .whatsapp-float { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    .scroll-top     { bottom: calc(145px + env(safe-area-inset-bottom, 0px)); }

    /* شارة عدّاد السلة في هيدر الموبايل كانت تُقصّ من أعلى (top:-6px فوق حافة الشاشة)
       — ننزّلها قليلًا لتظهر كاملة داخل الأيقونة */
    .mobile-cart-btn .action-count { top: 2px; right: -2px; }
}

/* =============================================================
   5) منع تكبير iOS التلقائي عند لمس حقل إدخال
   (Safari يكبّر الصفحة تلقائيًا إذا كان خط الحقل < 16px).
   ============================================================= */
@media (max-width: 991px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* =============================================================
   6) لمسات بريميوم للمس — أهداف لمس مريحة وتمرير سلس
   ============================================================= */
@media (max-width: 991px) {
    /* تمرير لمسي سلس داخل أي منطقة قابلة للتمرير أفقيًا */
    .account-nav,
    .compare-table-wrapper,
    .shop-toolbar,
    [class*="-scroll"],
    [class*="-tabs"] {
        -webkit-overflow-scrolling: touch;
    }

    /* إزالة وميض اللمس الأزرق الافتراضي للروابط/الأزرار */
    a, button, .btn, .header-action, .bottom-nav-item,
    .pc-cart-btn, .add-to-cart-btn, .qty-btn, .cd-qty-btn {
        -webkit-tap-highlight-color: transparent;
    }

    /* حد أدنى لأهداف اللمس في الشريط السفلي وأزرار الكمية */
    .bottom-nav-item { min-height: var(--bottom-nav-height); }

    /* منع كسر الأسعار/الأرقام الطويلة لسطرين */
    .pc-price-current, .price-current, .cart-drawer__total strong { white-space: nowrap; }
}

/* =============================================================
   7) ارتفاعات ديناميكية للأقسام البطلة (hero) و auth
   100vh → 100dvh لتفادي قفز التخطيط مع شريط المتصفح.
   ============================================================= */
@media (max-width: 991px) {
    .auth-page { min-height: 100vh; min-height: 100dvh; }
}

/* =============================================================
   8) قائمة الموبايل (Drawer) — إعادة تصميم بريميوم
   تُحمَّل بعد layout.css فتتغلّب عليه. الدرج عنصر موبايل فقط.
   ============================================================= */
@media (max-width: 991px) {
    .mobile-drawer {
        width: 86vw;
        max-width: 330px;
        right: -340px;
        display: flex;
        flex-direction: column;
        background: #fff;
        box-shadow: -10px 0 44px rgba(8,42,74,0.20);
    }
    .mobile-drawer.active { right: 0; }
    .drawer-overlay { backdrop-filter: blur(2px); background: rgba(8,42,74,0.45); }

    /* ── الهيدر: شريط متدرّج + تبويبات حبوب + زر إغلاق دائري ── */
    .mobile-drawer .drawer-header {
        padding: 0.85rem 0.9rem;
        background: linear-gradient(135deg, var(--primary-dark), var(--primary));
        border-bottom: none;
        flex-shrink: 0;
    }
    .mobile-drawer .drawer-tabs {
        gap: 0.25rem;
        background: rgba(255,255,255,0.16);
        padding: 4px;
        border-radius: 11px;
    }
    .mobile-drawer .drawer-tab {
        color: rgba(255,255,255,0.9);
        font-weight: 700;
        font-size: 0.84rem;
        padding: 0.42rem 0.85rem;
        border-radius: 8px;
        border-bottom: none !important;
        transition: background .2s, color .2s;
    }
    .mobile-drawer .drawer-tab.active {
        background: #fff;
        color: var(--primary);
        border-bottom: none !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }
    .mobile-drawer .drawer-close {
        width: 34px; height: 34px;
        border-radius: 50%;
        background: rgba(255,255,255,0.18);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem;
        transition: background .2s;
    }
    .mobile-drawer .drawer-close:hover { background: rgba(255,255,255,0.30); }

    /* ── البحث: حقل ناعم مدمج ── */
    .mobile-drawer .drawer-search { padding: 0.85rem 0.85rem 0.3rem; border-bottom: none; flex-shrink: 0; }
    .mobile-drawer .drawer-search form {
        border: 1px solid #e8edf2;
        background: #f4f7fb;
        border-radius: 12px;
        overflow: hidden;
        padding: 3px;
    }
    .mobile-drawer .drawer-search input {
        background: transparent;
        padding: 0.55rem 0.7rem;
        font-size: 0.9rem;
    }
    .mobile-drawer .drawer-search button {
        background: var(--primary);
        border-radius: 9px;
        padding: 0.5rem 0.85rem;
    }

    /* ── منطقة التمرير ── */
    .mobile-drawer .drawer-content { padding: 0.35rem 0.6rem; }

    /* ── عناصر القائمة: أيقونة في مربّع + تسمية + hover ناعم ── */
    .mobile-drawer .drawer-menu li a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.7rem;
        padding: 0.6rem 0.6rem;
        margin-bottom: 2px;
        border: none;
        border-bottom: none;
        border-radius: 12px;
        color: var(--text-dark);
        font-weight: 600;
        font-size: 0.92rem;
        transition: background .15s, color .15s;
    }
    .mobile-drawer .drawer-menu li a:hover,
    .mobile-drawer .drawer-menu li a:active {
        background: var(--primary-light);
        color: var(--primary);
    }
    /* الأيقونة القائدة → مربّع ملوّن */
    .mobile-drawer .drawer-menu li a i:first-child {
        margin: 0;
        flex-shrink: 0;
        width: 34px; height: 34px;
        border-radius: 10px;
        background: var(--primary-light);
        color: var(--primary);
        display: flex; align-items: center; justify-content: center;
        font-size: 0.95rem;
        transition: background .15s, color .15s;
    }
    .mobile-drawer .drawer-menu li a:hover i:first-child {
        background: var(--primary);
        color: #fff;
    }

    /* ── تبويب التصنيفات: السهم + القائمة الفرعية ── */
    .mobile-drawer .drawer-menu .submenu-arrow {
        margin-inline-start: auto;
        color: #c2cedb;
        font-size: 0.75rem;
        transition: transform .2s;
    }
    .mobile-drawer .has-submenu.open .submenu-arrow { transform: rotate(-90deg); color: var(--primary); }
    .mobile-drawer .drawer-submenu {
        background: #f7fafd;
        border-radius: 10px;
        margin: 0 0 4px;
        padding: 2px 0;
    }
    .mobile-drawer .drawer-submenu a {
        padding: 0.5rem 0.9rem 0.5rem 1rem !important;
        font-size: 0.85rem !important;
        color: var(--text-body);
        border-radius: 8px;
    }

    /* ── قسم العميل: كارت بروفايل بريميوم ── */
    .mobile-drawer .drawer-auth {
        margin-top: auto;
        padding: 0.85rem;
        border-top: 1px solid #eef2f6;
        background: linear-gradient(180deg, #ffffff, #f5faff);
        flex-shrink: 0;
    }
    .mobile-drawer .drawer-user-info {
        background: var(--primary-light);
        border-radius: 14px;
        padding: 0.7rem 0.85rem;
        margin-bottom: 0.7rem;
        gap: 0.7rem;
        font-size: 0.92rem;
    }
    .mobile-drawer .drawer-user-info i {
        flex-shrink: 0;
        width: 40px; height: 40px;
        border-radius: 50%;
        background: var(--gradient-primary);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.05rem;
    }
    /* رابط الخروج: مربّع أيقونته أحمر */
    .mobile-drawer .drawer-auth .logout-link:hover { background: #fef2f2; color: var(--danger); }
    .mobile-drawer .drawer-auth .logout-link i:first-child { background: #fee2e2; color: var(--danger); }
    .mobile-drawer .drawer-auth .logout-link:hover i:first-child { background: var(--danger); color: #fff; }

    /* أزرار الدخول/التسجيل */
    .mobile-drawer .drawer-login-btn { border-radius: 12px; padding: 0.8rem 1rem; font-size: 0.9rem; }
}