/* ==========================================================================
   Media City — إصلاحات الريسبونسيف
   ==========================================================================
   ملف واحد يُحمَّل بعد ملفات الثيم (style.css / style-rtl.css) ويصلح مشاكل
   العرض على الموبايل والتابلت. وُضعت الإصلاحات هنا بدل التعديل داخل ملفات
   الثيم لأنها ملفات ضخمة ولها نسختان (LTR و RTL)، فيصبح التتبع والصيانة أسهل.

   الفهرس:
     1. قائمة الأقسام الجانبية على الموبايل
     2. أزرار وأيقونات تظهر بالـ hover فقط (لا تعمل باللمس)
     3. بطاقات الأقسام في الصفحة الرئيسية
     4. سلايدر الهيدر
     5. تداخل زر واتساب مع شريط التنقل السفلي
     6. القائمة المنسدلة الكبيرة على التابلت
     7. فلاتر المتجر
     8. صور المنتج المصغّرة
     9. أحجام اللمس والنصوص
   ========================================================================== */


/* 1 ─ قائمة الأقسام الجانبية على الموبايل ─────────────────────────────────
   المشكلة: قاعدة إلغاء الـ hover كانت تُطبَّق على شاشات اللمس أيضاً، فبمجرد
   لمس القائمة المفتوحة يلتقط العنصر الأب حالة hover فتختفي القائمة.
   الحل: تقتصر القاعدة على الأجهزة التي تدعم الـ hover فعلاً (الماوس). */
@media (hover: none), (pointer: coarse) {
    /* القائمة تُفتح بكلاس open-dropdown (زر الهيدر) أو show (شريط التنقل السفلي) */
    .header-2 .header-nav-left:hover .category-dropdown.open-dropdown,
    .header-2 .header-nav-left:hover .category-dropdown.show {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* تبقى مخفية ما لم تُفتح بالضغط */
    .header-2 .header-nav-left:hover .category-dropdown:not(.open-dropdown):not(.show) {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

@media (max-width: 767px) {
    /* المشكلة: ارتفاع 100vh بدون تمرير، فالأقسام تحت حافة الشاشة غير قابلة للوصول. */
    .header-2 .header-nav-left .category-dropdown {
        height: 100vh;
        height: 100dvh; /* يتفادى قفز شريط المتصفح على الموبايل */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .header-2 .header-nav-left .category-dropdown .category-list {
        overflow-y: visible;
        padding-bottom: 80px; /* مساحة أسفل آخر عنصر فوق شريط التنقل */
    }
}


/* 2 ─ أزرار وأيقونات تظهر بالـ hover فقط ──────────────────────────────────
   على شاشات اللمس لا توجد حالة hover، فتبقى هذه العناصر مخفية للأبد. */
@media (hover: none), (pointer: coarse) {

    /* زر "تسوق الآن" داخل بطاقات الأقسام */
    .category-section-3 .category-box-list .category-box-view .shop-button {
        position: static;
        transform: none;
        opacity: 1;
        bottom: auto;
        left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }

    /* أيقونات المنتج (المفضلة، العرض السريع، المقارنة) */
    .product-box-3 .product-header .product-image .product-option,
    .product-box-3 .product-option {
        opacity: 1 !important;
        visibility: visible !important;
        max-width: 100% !important;
    }
}


/* 3 ─ بطاقات الأقسام في الصفحة الرئيسية ───────────────────────────────────
   المشكلة: ارتفاع ثابت 215px وصورة ثابتة 125×125 بدون أي media query،
   فالعناوين الطويلة تدفع الصورة خارج البطاقة وتُقص. */
@media (max-width: 767px) {
    .category-section-3 .category-box-list {
        height: auto;
        min-height: 200px;
        padding: 16px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .category-section-3 .category-box-list a img {
        height: auto;
        width: auto;
        max-width: 88px;
        max-height: 88px;
        object-fit: contain;
    }

    .category-section-3 .category-box-list .category-name h4 {
        font-size: 14px;
        line-height: 1.4;
        text-align: center;
        margin-bottom: 0;
        /* يسمح بسطرين ثم يقص بثلاث نقاط بدل كسر التخطيط */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .category-section-3 .category-box-list .category-box-view {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .category-section-3 .category-box-list .category-box-view .shop-button {
        font-size: 12px;
        padding: 8px 14px;
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    .category-section-3 .category-box-list a img {
        max-width: 72px;
        max-height: 72px;
    }
}

/* 14 ─ أسهم السلايدر كانت تتداخل مع عنوان القسم عند التفاف السطر */
@media (max-width: 767px) {
    .category-section-3 .title,
    .product-section .title {
        margin-bottom: 28px;
    }
}


/* 4 ─ سلايدر الهيدر ───────────────────────────────────────────────────────
   المشكلة: ارتفاع 70vh مع object-fit: cover يقص البانرات العريضة إلى
   شريط رأسي ضيق ويخفي معظم محتواها على الموبايل. */
@media (max-width: 767px) {
    .hero-slider .slider {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .hero-slider .slider img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: center;
    }
}


/* 5 ─ تداخل زر واتساب مع شريط التنقل السفلي ───────────────────────────────
   المشكلة: الزر (56px) ثابت أسفل يمين الشاشة فوق شريط التنقل (~66px)
   ويغطي آخر عنصر فيه بالكامل. */
@media (max-width: 767px) {
    .wa-fab {
        bottom: 84px;
        width: 50px;
        height: 50px;
    }

    /* شريط التنقل يجب أن يعلو أي عنصر عائم آخر */
    .mobile-menu,
    .mobile-menu.mobile-cart {
        z-index: 10;
    }
}


/* 5b ─ سطر "تطوير" في الفوتر ──────────────────────────────────────────────
   نُقل داخل .sub-footer ليستفيد من المساحة المحجوزة لشريط التنقل السفلي. */
.sub-footer .developed-by {
    text-align: center;
    padding: 10px 0;
    width: 100%;
}

.sub-footer .developed-by a {
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.sub-footer .developed-by a span {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .sub-footer {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}


/* 6 ─ القائمة المنسدلة الكبيرة على التابلت ────────────────────────────────
   المشكلة: عرض 520px مع left:100% يدفع القائمة خارج حافة الشاشة
   في النطاق 768px–991px، وهو أحد أسباب التمرير الأفقي المخفي. */
@media (min-width: 768px) and (max-width: 991px) {
    .onhover-category-box {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100%;
        box-shadow: none;
    }
}


/* 7 ─ فلاتر المتجر ────────────────────────────────────────────────────────
   المشكلة: overflow-x: scroll يفرض شريط تمرير أفقي دائم داخل لوحة 300px،
   والأسماء الطويلة تتمدد جانبياً بدل أن تلتف. */
@media (max-width: 991px) {
    .shop-section .left-box {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .shop-section .left-box .category-list-box li,
    .shop-section .left-box label,
    .shop-section .left-box .dept-subcategories a {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }
}


/* 8 ─ صور المنتج المصغّرة ─────────────────────────────────────────────────
   المشكلة: التنسيق يجعلها inline-block بعرض ثابت لكن بدون تمرير أفقي،
   فتلتف في صفوف غير منتظمة بدل أن تعمل كشريط قابل للسحب. */
@media (max-width: 768px) {
    .product-thumbnail-slider {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
    }

    .product-thumbnail-slider .thumbnail-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}


/* 8b ─ صف الإيجار وزر الإضافة للسلة في صفحة المنتج ────────────────────────
   المشكلة: حقل تاريخ الإيجار (172px) وزر الإضافة للسلة (162px) موضوعان
   جنباً إلى جنب، ومجموعهما يتجاوز عرض الشاشات الضيقة (≤360px) فيخرجان عنها.
   الحل: يتراصّان عمودياً بعرض كامل. */
@media (max-width: 400px) {
    .right-box-contain .input-wrapper-rent,
    .right-box-contain .rent-input,
    .right-box-contain .add-to-cart-box,
    .right-box-contain .cart_qty_cls,
    .right-box-contain .add-to-cart-box .btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .right-box-contain .add-to-cart-box .btn {
        white-space: normal;
    }

    /* الصف الحاوي يتحول لعمود واحد */
    .right-box-contain .note-box,
    .right-box-contain .rent-fields-row,
    .right-box-contain .d-flex.gap-2,
    .right-box-contain .d-flex.gap-3 {
        flex-wrap: wrap;
    }
}


/* 9 ─ أحجام اللمس والنصوص ─────────────────────────────────────────────────
   الحد الأدنى الموصى به لمساحة اللمس هو 44×44 بكسل. */
@media (max-width: 767px) {
    .btn-add-cart,
    .add-to-cart-box .btn-add-cart,
    .theme-btn,
    .btn-animation,
    .shop-button {
        min-height: 44px;
    }

    /* جداول السلة تُمرَّر أفقياً بدل أن تكسر الصفحة */
    .cart-table .table-responsive-xl,
    .table-responsive-xl {
        -webkit-overflow-scrolling: touch;
    }
}

/* 13 ─ بانر النشرة البريدية: خطأ في معادلة الحشو يترك شريطاً فارغاً ضخماً */
@media (max-width: 767px) {
    .newsletter-box,
    .newsletter-section .newsletter-detail {
        padding: 24px 16px;
    }
}


/* 9b ─ قائمة السلة المنسدلة في الهيدر ─────────────────────────────────────
   المشكلة: عرضها ثابت 320px ومحاذاة لحافة أيقونة صغيرة، فتخرج ~121px خارج
   الشاشة في نطاق 992px–1250px (حيث يظهر شريط الأيقونات لأول مرة) وتُنتج
   تمريراً أفقياً كان مخفياً بـ overflow-x: hidden.
   الحل: تُوسَّط فوق الأيقونة بدل محاذاتها للحافة، مع سقف لعرضها. */
@media (min-width: 992px) and (max-width: 1250px) {
    header .onhover-dropdown .onhover-div,
    header .onhover-dropdown .onhover-div-login {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 24px);
    }
}


/* 10b ─ لوحة السلة العائمة ────────────────────────────────────────────────
   المشكلة: تُركن خارج الشاشة بإزاحة سالبة (left/right: -130px .. -200px)،
   والإزاحة السالبة توسّع منطقة التمرير الأفقي للصفحة. الثيم كان يخفي الأثر
   بـ overflow-x: hidden على body بدل معالجة السبب.
   الحل: نثبّتها عند الحافة ونُخفيها بـ transform، لأن الـ transform لا يؤثر
   على تخطيط الصفحة ولا يُنشئ تمريراً. */
[dir="rtl"] .item-section {
    left: 0 !important;
    right: auto !important;
    transform: translateY(-50%) translateX(-100%);
}

[dir="ltr"] .item-section {
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) translateX(100%);
}

[dir="rtl"] .item-section.active,
[dir="ltr"] .item-section.active {
    transform: translateY(-50%) translateX(0);
}


/* عام ─ لا يجب أن تتسبب أي صورة في تمرير أفقي ──────────────────────────── */
img {
    max-width: 100%;
}