/* تحسينات أزرار التنقل في عناصر العرض للأجهزة المحمولة */
.carousel-control {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10; /* ضمان أن أزرار التحكم فوق العناصر الأخرى */
    position: absolute; /* تغيير من relative إلى absolute للتموضع على الشريط */
    top: 50%; /* وضع الأزرار في منتصف الشريط عمودياً */
    transform: translateY(-50%); /* ضبط المحاذاة العمودية */
    pointer-events: auto !important; /* فرض تمكين أحداث المؤشر */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* إضافة ظل للتحسين البصري */
    opacity: 0.9; /* جعل الأزرار شبه شفافة */
}

.carousel-control:hover {
    background-color: var(--hover-color);
    opacity: 1; /* جعل الأزرار معتمة عند التحويم */
    transform: translateY(-50%) scale(1.1); /* تأثير تكبير عند التحويم */
}

/* تحديد مواضع الأزرار */
.carousel-prev {
    right: 10px; /* للغة العربية (RTL)، الزر السابق على اليمين */
}

.carousel-next {
    left: 10px; /* للغة العربية (RTL)، الزر التالي على اليسار */
}

/* تعديل للغة الإنجليزية (LTR) */
[dir="ltr"] .carousel-prev {
    left: 10px;
    right: auto;
}

[dir="ltr"] .carousel-next {
    right: 10px;
    left: auto;
}

/* إزالة هوامش الأزرار لأنها الآن مطلقة الموضع */
.carousel-container {
    position: relative; /* ضروري للأزرار ذات الموضع المطلق */
    padding: 0 50px; /* إضافة تباعد جانبي لإفساح المجال للأزرار */
}

/* تحسينات للأجهزة المحمولة */
@media (max-width: 768px) {
    .carousel-control {
        width: 35px;
        height: 35px;
    }
    
    .carousel-control i {
        font-size: 1rem;
    }
    
    .carousel-container {
        padding: 0 40px; /* تقليل التباعد الجانبي للشاشات الصغيرة */
    }
}

@media (max-width: 576px) {
    .carousel-control {
        width: 30px;
        height: 30px;
    }
    
    .carousel-prev {
        right: 5px;
    }
    
    .carousel-next {
        left: 5px;
    }
    
    [dir="ltr"] .carousel-prev {
        left: 5px;
    }
    
    [dir="ltr"] .carousel-next {
        right: 5px;
    }
    
    .carousel-container {
        padding: 0 35px; /* تقليل التباعد الجانبي للشاشات الصغيرة جداً */
    }
}

/* تحسينات لدعم اللمس على الأجهزة المحمولة */
@media (hover: none) {
    .carousel-control {
        opacity: 0.9; /* زيادة الوضوح على الأجهزة اللمسية */
    }
    
    .carousel-control:active {
        transform: translateY(-50%) scale(0.95); /* تأثير الضغط مع الحفاظ على المحاذاة العمودية */
    }
}

/* إخفاء قسم التحكم القديم الذي كان أسفل الشريط */
.carousel-controls {
    display: none !important;
}