body:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 999999;
    background: #f5f5f5 url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/gZgKjb/SMEFddeGGaBuksWuQKBYeU3VD5q5bjKG4lu0uysl.png) center center /250px no-repeat;
    left: 0;
    animation-name: fade-in;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes fade-in {
    0%, 50% { opacity: 1 }
    100% { opacity: 0; visibility: hidden }
}
@keyframes fade-in {
    0%, 50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* 🔹 إخفاء الرقم داخل الفوتر */
.s-contacts-item .unicode {
    display: none !important;
}

/* 🔹 جعل الأيقونات بجانب بعضها في نفس السطر */
.s-contacts-list {
    display: flex;
    flex-direction: row; /* جعل العناصر في خط أفقي */
    justify-content: center; /* توسيط الأيقونات */
    align-items: center;
    gap: 15px; /* تحديد المسافة بين الأيقونات */
    flex-wrap: wrap; /* يسمح بانتقال الأيقونات إلى سطر جديد عند الحاجة */
}

/* ضبط أيقونات التواصل */
.s-contacts-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    direction: ltr;
    gap: 8px;
}

/* ضبط الأيقونة */
.s-contacts-icon {
    display: flex;
    align-items: center;
    font-size: 18px;
    width: 32px;
    height: 32px;
    justify-content: center;
}

/* 🔹 تحسين ترتيب الأيقونات عند تصغير الشاشة */
@media (max-width: 768px) {
    .s-contacts-list {
        justify-content: center; /* توسيط الأيقونات عند العرض على الجوال */
    }

--

/* جعل الأعمدة داخل الفوتر متساوية العرض */
.store-footer__inner .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* توزيع الأعمدة بالتساوي */
    gap: 20px; /* المسافات بين الأعمدة */
    align-items: start;
    padding: 20px 0;
    text-align: right; /* جعل النصوص والعناوين إلى اليمين */
}

/* جعل الشعار فقط في العمود الأول */
.store-footer__inner .grid > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* إضافة الشعار فوق اسم المتجر فقط في العمود الأول */
.store-footer__inner .grid > div:first-child::before {
    content: "";
    background: url("https://cdn.salla.sa/gZgKjb/m8KuSTWmXBl4UhIYYXct7HN57EpXozTqhXQa12DT.png") center center / contain no-repeat;
    display: block;
    width: 130px; /* حجم الشعار */
    height: 130px;
    margin-bottom: 10px; /* تقليل المسافة بين الشعار واسم المتجر */
}

/* تحسين العناوين لتكون بمحاذاة اليمين */
.store-footer__inner h3 {
    text-align: right;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

/* تحسين محاذاة النصوص */
.store-footer__inner p, 
.store-footer__inner ul, 
.store-footer__inner a {
    text-align: right;
    display: block;
}

/* تحسين المسافات بين النصوص */
.store-footer__inner p {
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.5;
}

/* تحسين عرض الروابط الاجتماعية */
.s-contacts-icon,
.store-footer .s-social-link a {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* تحسين التأثير عند تحريك الفأرة فوق الروابط الاجتماعية */
.s-contacts-icon:hover,
.store-footer .s-social-link a:hover {
    background-color: #fff;
    box-shadow: 0 0 0 1.5px #222251, 0 0 0 3px #ffffff;
    color: #222251;
    transform: rotate(360deg) scale(1.05);
}

/* تحسين مظهر الفوتر على الموبايل */
@media (max-width: 768px) {
    .store-footer__inner .grid {
        grid-template-columns: 1fr; /* تحويل الفوتر إلى عمود واحد */
        text-align: center;
    }

    /* توسيط العناوين والنصوص في الهاتف */
    .store-footer__inner h3,
    .store-footer__inner p,
    .store-footer__inner ul,
    .store-footer__inner a {
        text-align: center;
    }

    /* جعل الشعار يظهر فوق النصوص بشكل جيد */
    .store-footer__inner .grid > div:first-child::before {
        margin: 0 auto 10px;
    }
}

a:not(.s-contacts-item):hover, 
button:hover, 
.clickable:hover {
    background-color: #dd1f46 !important; /* تغيير لون الخلفية */
    color: #fff !important; /* تغيير لون النص إلى الأبيض */
    transform: scale(1.05); /* تكبير العنصر قليلاً عند التفاعل */
    box-shadow: 0px 4px 10px rgba(221, 31, 70, 0.4); /* إضافة ظل خفيف */
}

/* 🔹 تحسين تأثير الروابط */
a {
    text-decoration: none;
    color: inherit;
}

/* 🔹 تحسين شكل الأزرار */
button {
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px; /* إضافة زوايا دائرية */
}

/* 🔹 تحسين تأثير الهوفر على الأيقونات */
.clickable i {
    transition: color 0.3s ease-in-out;
}

.clickable:hover i {
    color: #fff !important;
}


/* 🔹 ضبط أيقونات التواصل */
.s-contacts-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 45px; /* حجم متناسق */
    height: 45px;
    border-radius: 50%; /* جعل الأيقونات دائرية بالكامل */
    border: 2px solid #fff; /* حدود بيضاء للأيقونة */
    background-color: transparent; /* جعل الخلفية شفافة افتراضيًا */
    transition: all 0.3s ease-in-out;
}

/* 🔹 تأثير الهوفر المحسن */
.s-contacts-icon:hover {
    background-color: #dd1f46 !important; /* تغيير لون الخلفية عند التفاعل */
    color: #fff !important; /* تغيير لون الأيقونة */
    border-color: #dd1f46 !important; /* تغيير لون الحدود لمطابقة التأثير */
    transform: scale(1.1); /* تكبير الأيقونة قليلاً */
    box-shadow: 0px 4px 10px rgba(221, 31, 70, 0.4); /* تأثير ظل ناعم */
}

/* 🔹 تحسين الهوفر على الروابط بداخل الأيقونة */
.s-contacts-item:hover .s-contacts-icon {
    background-color: #dd1f46 !important;
    border-color: #dd1f46 !important;
    color: #fff !important;
}


/* 🔹 تأثير الهوفر عند تمرير الفأرة على زر المنتج */
.home-page .product-button:hover, 
.home-page .btn-product:hover {
    background-color: #dd1f46 !important; /* تغيير لون الخلفية إلى اللون المطلوب */
    color: #fff !important; /* تغيير لون النص إلى الأبيض */
    transform: scale(1.05); /* تكبير الزر قليلاً عند التفاعل */
    box-shadow: 0px 4px 10px rgba(221, 31, 70, 0.4); /* إضافة ظل ناعم */
}

/* 🔹 تحسين مظهر الزر ليبدو أكثر احترافية */
.home-page .product-button, 
.home-page .btn-product {
    padding: 10px 15px;
    border-radius: 5px; /* إضافة زوايا دائرية */
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

/* 🔹 تحسين التأثير عند تصغير الشاشة */
@media (max-width: 768px) {
    .home-page .product-button, 
    .home-page .btn-product {
        width: 100%; /* جعل الأزرار تمتد بعرض كامل على الجوال */
        text-align: center;
    }
}
/* 🔹 تعطيل تأثير الهوفر على لوجو المتجر */
.navbar-brand img, 
.store-header img {
    pointer-events: none; /* يمنع التفاعل مع الهوفر */
    transition: none !important; /* إلغاء أي تأثيرات انتقال */
}

/* 🔹 إلغاء تغيير اللون أو الحجم عند تمرير الفأرة */
.navbar-brand:hover img, 
.store-header:hover img {
    background-color: transparent !important;
    color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
}
/* 🔹 إلغاء تأثير الهوفر من الهيدر لكن مع السماح بالنقر */
.inner.bg-inherit a {
    transition: none !important; /* إزالة تأثيرات الانتقال */
    background-color: inherit !important; /* عدم تغيير الخلفية */
    color: inherit !important; /* عدم تغيير لون النص */
    box-shadow: none !important; /* إزالة أي تأثير ظل */
    transform: none !important; /* عدم تكبير أو تصغير العنصر */
}

/* 🔹 السماح بالنقر دون أي تأثير عند تمرير الفأرة */
.inner.bg-inherit a:hover {
    background-color: inherit !important;
    color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
    text-decoration: none !important; /* منع أي تأثير على النص */
}
/* 🔹 تعطيل النقر على هذه الجزئية */
a.brand-item.sm\:row-span-2.sm\:h-auto {
    pointer-events: none !important; /* منع جميع التفاعلات */
    user-select: none !important; /* منع تحديد النصوص */
    cursor: default !important; /* تغيير المؤشر ليبدو كأنه غير قابل للنقر */
}
/* 🔹 تعطيل النقر على هذه الجزئية */
section.s-block.s-block--logos-slider {
    pointer-events: none !important; /* منع جميع التفاعلات */
    user-select: none !important; /* منع تحديد النصوص */
    cursor: default !important; /* تغيير المؤشر ليبدو كأنه غير قابل للنقر */