/* Add custom CSS styles below */ 

/* تحسين العرض والتباعد لعناصر السلايدر */
salla-slider.photos-slider .swiper-slide {
    margin-left: 1rem;
    margin-right: 1rem;
    width: calc(100% - 2rem); /* ضمان أن العنصر لا يتسبب في تجاوز عرض الحاوية */
}

/* تحسين تخطيط حاوية جهة الاتصال في الفوتر */
.store-footer__contacts-row {
    display: flex; /* استخدام Flexbox بدلاً من Ruby لتخطيط أكثر مرونة */
    align-items: center; /* محاذاة العناصر عموديًا في المنتصف */
    justify-content: center; /* محاذاة العناصر أفقيًا في المنتصف */
    flex-wrap: wrap; /* السماح للعناصر باللف إلى الأسطر التالية إذا لزم الأمر */
}

/* تحسين نمط عناصر المحتوى في الفوتر */
#app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG > footer > div > div.store-footer__contacts-row > div::before {
    content: '';
    display: inline-block;
    width: 55px; /* تحديد عرض ثابت */
    height: 55px; /* تحديد ارتفاع ثابت */
    background-image: url('https://i.ibb.co/ncbbFgL/image.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px; /* إزالة التكرار */
    cursor: pointer; /* تغيير مؤشر الفأرة عند التحويم */
}

/* تحسين التخطيط والهوامش في الشاشات الكبيرة */
@media (min-width: 1200px) {
    .store-footer__contacts-row {
        padding-right: 9%; /* تحسين الحشو ليتناسب مع الشاشات الكبيرة */
    }
    #app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG > footer > div > div.store-footer__contacts-row > div {
        padding-right: 20px !important; /* ضمان عدم وجود تداخل مع أنماط أخرى */
    }
    #app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG > footer > div > div.store-footer__contacts-row > div::before {
        margin-right: 200px !important; /* تحديد هامش ثابت لتجنب التغيرات المفاجئة */
        margin-bottom: 41px; /* تحسين الهامش السفلي */
    }
}