/* حنين */



/* لون خلفيه المتجر */


.app-inner

{

background-color:#ededef;

}


/* الهيدر */

.top-navbar , .main-nav-container {

background-color:#D4D4D4;


}


.main-nav-container {

border-bottom-left-radius: 2rem;

border-bottom-right-radius: 2rem;


}


.main-menu {

color: #6C5E67;


}


/* تغيير لون خلفية الفوتر */

.store-footer {

background-color:#D4D4D4 !important; /* اللون الزيتي */

color: #6C5E67 !important; /* اللون البيج للنص */

}


/* تغيير لون الروابط داخل الفوتر */

.store-footer a {

color:#6C5E67 !important; /* لون بيج */

}


/* تغيير لون العناوين داخل الفوتر */

.store-footer h3 {

color:#6C5E67 !important; /* لون بيج */

}


/* تغيير لون النصوص الأخرى */

.store-footer p,

.store-footer span,

.store-footer .copyright-text {

color: #6C5E67 !important;

}


/* تغيير لون الأيقونات داخل الفوتر */

.store-footer svg path {

fill:#6C5E67 !important;

}


/* تغيير لون الروابط عند التمرير */

.store-footer a:hover {

color: #6C5E67 !important; /* لون ذهبي عند التمرير */

}

.store-footer__inner {

background-color: #D4D4D4!important; /* اللون الزيتي */

color: white !important; /* لجعل النص واضحًا */

padding: 20px; /* إضافة مسافة داخلية */

}


.store-footer__inner a {

color: #6C5E67!important; /* تغيير لون الروابط إلى ذهبي */

}


.store-footer__inner a:hover {

color: white !important; /* تغيير لون الروابط عند التمرير */

}



/* ---------------------توزيع المقاسات تحت ف الفوتر------ */


.store-footer__inner .container {

display: grid;

grid-template-columns: 1fr 1fr 1fr ; /* تقسيم الفوتر إلى 6 أعمدة */

gap: 30px;


}


.store-footer__inner .container .lg\:col-span-2 {

grid-column: span 2; /* هذا العمود سيأخذ عرض عمودين */

}


.store-footer__inner h3 {

font-size: 24px;

margin-bottom: 10px;

}


.store-footer__inner p {

font-size: 14px;

line-height: 1.6;

margin-bottom: 15px;

}


.s-social-list {

display: flex;

gap: 10px;

}


.s-social-list .s-social-link {

display: flex;

align-items: center;

}



.store-footer {

padding-top: 40px; /* زيادة المسافة فوق الفوتر */

margin-top: 40px; /* إذا أردتِ زيادة المسافة عبر استخدام margin */

border: 2px solid #940007;

border-radius: 0rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 4rem;

background-color: #a6a6a6; /* لون مختلف عند التمرير */

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9), 0 -8px 16px rgba(0, 0, 0, 0.9); /* الظل في الأعلى والأسفل */

}


/* --------------------اراء العملاء------------------ */



.s-reviews-header {

color: #710020;

font-size: 2rem;

text-shadow: 2px 2px 4px rgba(113, 32, 38, 1); /* ظل ناعم للكلمة */

}


/* -----------------تنسيق عرض المنتجات---------------- */


/* إعدادات مكون السلايدر العام */

salla-products-slider {

padding: 0 !important; /* إزالة أي حشو داخلي */

margin: 0 !important; /* إزالة أي هامش خارجي */

direction: rtl; /* ضبط الاتجاه ليكون من اليمين لليسار */

}


/* إعدادات العنصر الرئيسي للسلايدر (Swiper container) */

salla-products-slider .swiper {

padding-right: 0 !important; /* إزالة المسافة من جهة اليمين */

padding-left: 0 !important; /* إزالة المسافة من جهة اليسار */

margin: 0 !important; /* إزالة أي هامش خارجي */

}


/* إعدادات مجموعة الشرائح (العنصر الذي يحتوي على الشرائح) */

salla-products-slider .swiper-wrapper {

gap: 5px !important; /* تقليل المسافة بين الشرائح */

display: flex !important; /* التأكد من استخدام Flexbox لعرض الشرائح */

margin: 0 !important; /* إزالة الهامش */

padding-right: 0; /* إزالة أي حشو من اليمين */

}


/* إعدادات كل شريحة (منتج) داخل السلايدر */

salla-products-slider .swiper-slide {

margin: 0 !important; /* إزالة المسافات الجانبية تمامًا بين الشرائح */

}


/* ---------------كل ما يخص تنسيق شكل الاقسام ---------- */


/* إضافة إطار حول النص داخل العنصر */

.slide--cat-entry h2{

background-color: white;

display: inline-block; /* يجعل العنصر حول النص يمتد فقط حول النص */

border: 2px solid #940007; /* إطار أزرق داكن حول النص */

padding: 0rem 1rem; /* إضافة مساحة حول النص */

border-top-left-radius: 1.7rem;

border-bottom-right-radius: 1.7rem; /* جعل الحواف مقوسة

*/

margin-top: -35px;

margin-right: -19px;


}


.slide--cat-entry img {

width: 100%;

height: 70%; /* جعل الارتفاع مساوياً للعرض للحصول على شكل مربع */

object-fit: cover; /* التأكد من أن الصورة تملأ المساحة دون تشويه */

border-bottom: 2px solid #940007;

border-top: 2px solid #940007;

border-top-left-radius: 1.7rem;

border-bottom-right-radius: 1.7rem; /* جعل الحواف مقوسة */

margin-top: 0!important; /* إزالة أي فراغ علوي للصورة */

padding-top: 0 !important; /* إزالة أي حشو علوي للصورة */

display: block !important; /* يمنع الفراغ الذي يحدث أحيانًا بسبب inline images */

}




.rounded-full {


border-radius:0px;

}



.slide--cat-entry {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 13rem;

width: 13rem;

background-color: transparent !important; /* الخلفية شفافة */

border: 1px solid transparent; /* الحواف شفافة */

border-radius: 0; /* الزوايا غير مقوسة */

overflow: hidden;

margin: 1.5rem auto;

text-align: center;

padding-top: 0 !important; /* إزالة أي حشو علوي */

transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;

}


/* -------------جزء المميزات -------------- */


.s-block--features__item {



border: 2px solid #940007 ;

border-radius:0rem;

background-color: transparent !important;

border-top-left-radius: 4rem;

border-bottom-right-radius: 4rem;

}




.s-block--features__item {

transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

background-color: #a6a6a6f; /* اللون الأساسي */

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); /* ظل خفيف */

}


.s-block--features__item:hover {

transform: translateY(-20px); /* يتحرك للأعلى */

background-color: #a6a6a6; /* لون مختلف عند التمرير */

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9); /* ظل أقوى عند التمرير */

}




/* ----------------------تنسيق زر اضف للسله------ */



/* الحالة العادية */

.s-button-element {

position: relative;

background-color: #710020;

color: white;

border: 1px solid #710020;

transition: all 0.3s ease;

overflow: hidden; /* حتى لا يخرج الإطار الداخلي */

}


/* الإطار الداخلي - مخفي في البداية */

.s-button-element::after {

content: '';

position: absolute;

top: 5px;

left: 5px;

right: 5px;

bottom: 5px;

border: 1px solid #710020;

border-radius: 4px;

opacity: 0;

transition: all 0.3s ease;

z-index: 0;

}


/* عند التمرير */

.s-button-element:hover {

background-color: transparent;

color: #710020;

border: 1px solid #710020;

}


/* إظهار الإطار الثاني عند الهوفر */

.s-button-element:hover::after {

opacity: 1;

}


/* -------------العناوين في المنتجات ------------------ */

/* الحاوية الرئيسية لعنوان السلايدر */

.s-slider-block__title {

margin-bottom: 4rem;

background: none !important; /* تأكيد إزالة الخلفية */

border: none !important; /* تأكيد إزالة الحدود */

box-shadow: none !important; /* تأكيد إزالة الظل */

padding: 0 !important;

width: auto !important;

height: auto !important;

display: flex;

align-items: center;

justify-content: center;

position: relative;

}


/* عنصر العنوان */

.s-slider-block__title h2 {

margin: 0;

font-size: 1.5rem;

display: inline-block;

position: relative;

color: #940007;

background: transparent !important; /* إزالة أي خلفية للكلمة */

box-shadow: none !important; /* إزالة أي شادو افتراضي */

transition: transform 0.3s ease, box-shadow 0.3s ease;

z-index: 1;

}


/* الخط أسفل الكلمة */

.s-slider-block__title h2::after {

content: '';

position: absolute;

bottom: -7px;

left: 11px;

width: 100%;

height: 2px;

background-color: #940007;


transform-origin: left;

transition: transform 0.4s ease, background-color 0.3s ease;

}


/* تأثير الهوفر على الكلمة فقط */

.s-slider-block__title h2:hover {

transform: translateY(-7px);

box-shadow: 0 4px 10px rgba(113, 32, 38, 1);

}


/* تأثير الهوفر على الخط */

.s-slider-block__title h2:hover::after {

background-color: #710020;

transform: translateY(-3px);

box-shadow: 0 4px 10px rgba(113, 32, 38, 1);

}




/* ------------------------------------------- */



/* إخفاء أسهم التنقل (التحرك فوق المنتجات) */

.s-slider-nav-arrow {

display: none !important; /* إخفاء الأسهم تماما */

}


/* إضافة حدود حول كل بطاقة منتج عمودية */

.s-product-card-vertical {

border: 1px solid #940007; /* تحديد اللون والسمك للحدود */

}


/* إخفاء شريط التنقل الخاص بالعنوان */

.s-slider-block__title-nav {

display: none !important; /* إخفاء شريط التنقل تماما */

}




/* ---------------------------------------------- */


/* الحاوية الخاصة بالـ swiper */

.s-slider-swiper-wrapper {

position: relative; /* وضع الحاوية في موضع نسبي */

width: 100%; /* تحديد العرض بنسبة 100% */

height: 100%; /* تحديد الارتفاع بنسبة 100% */

z-index: 1; /* تعيين ترتيب الظهور بالنسبة للعناصر الأخرى */

display: flex; /* استخدام flexbox لتوزيع العناصر */

transition-property: transform, -webkit-transform; /* إضافة تأثيرات التحويل */

box-sizing: border-box; /* تأكد من حساب البُعد مع الحشو والحدود */

}


/* شاشة الموبايل */

@media (max-width: 767px) {

.s-slider-swiper-wrapper {

gap: 1px; /* تقليل المسافة بين العناصر إلى 1px */

padding-left: 0px; /* إزالة المسافة من اليسار */

padding-right: 0px; /* إزالة المسافة من اليمين */

}

}


/* شاشة التابلت واللابتوب */

@media (min-width: 768px) and (max-width: 1199px) {

.s-slider-swiper-wrapper{

gap: 20px; /* زيادة المسافة بين العناصر إلى 20px */

padding-left: 0px; /* إزالة المسافة من اليسار */

padding-right: 0px; /* إزالة المسافة من اليمين */

}

}


/* شاشة الكمبيوتر الكبيرة */

@media (min-width: 1200px) {

.s-slider-swiper-wrapper {

gap: 90px; /* زيادة المسافة بين العناصر إلى 90px */

padding-left: 100px; /* إضافة 100px مسافة من اليسار */

padding-right: 100px; /* إضافة 100px مسافة من اليمين */

}

}


/* تأثير الرسوم المتحركة للعرض */

@keyframes showAllSlides {

from {

transform: translateY(50px); /* تبدأ الحركة من أسفل */

opacity: 0; /* تبدأ العنصر شفاف */

}

to {

transform: translateY(0); /* الوصول إلى الموقع الأصلي */

opacity: 1; /* ظهور العنصر بالكامل */

}

}


/* عند شاشة الموبايل، إضافة تأثير الرسوم المتحركة */

@media (max-width: 767px) {

.s-slider-swiper-wrapper.animate-wrapper {

animation: showAllSlides 0.8s ease-out; /* تطبيق تأثير الأنميشن */

}

}


/* ---------------------------------------------- */