/* Add custom CSS styles below */ 


/* لضمان عدم وجود طبقات تحجب اللون */
main#app-inner {
    background-color: transparent !important;
}

/* في حال وجود عناصر داخلية تغطي الخلفية */
.main-app-inner, .app-inner {
    background-color: transparent !important;
}
/* إزالة الظل والحدود من الهيدر */
#main-nav, 
.store-header, 
.main-nav {
    box-shadow: none !important;
    border-bottom: none !important;
    elevation: 0 !important; /* لبعض المتصفحات */
}

/* في حال كان الظل موجوداً في الحاوية الداخلية */
.inner.bg-inherit {
    box-shadow: none !important;
}

/* استهداف الوضع الداكن عبر كلاس .dark */
.dark #main-nav, 
.dark .store-header, 
.dark .main-nav,
.dark .inner.bg-inherit,
.dark .main-nav__content {
    background-color: #000000 !important; /* أسود خالص */
    background: #000000 !important;
    border: none !important;
    box-shadow: none !important;
}

/* لضمان عدم وجود أي خلفية موروثة من الثيم الأصلي */
.dark header {
    background-color: #000000 !important;
}

/* إذا أردت تغيير لون أيقونات الهيدر للأبيض لتبرز فوق الأسود */
.dark .header_icons i, 
.dark .header_icons svg,
.dark .side-panel-trigger i {
    color: #ffffff !important;
    fill: #ffffff !important;
}
















/* التأكد من أن الصور تتبع نفس الانحناء ولا تخرج عن الحدود */
.s-slider-slide img, 
.banner-fixed img,
.picture img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 20px !important;
}

/* إضافة هوامش بسيطة لبقية كتل المتجر (مثل ركن القهوة) ليتناسق التصميم */
.s-block {
    padding-left: 15px !important;
    padding-right: 15px !important;
}








/* ضبط الحاوية لضمان ظهور العناصر في المنتصف */
.s-block__title .right-side {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ضبط العنوان لإعطائه مساحة للزخرفة */
.s-block__title .right-side h2 {
    position: relative !important;
    margin-bottom: 25px !important; /* مسافة كافية للخط */
    padding: 0 !important;
    display: inline-block !important;
}

/* تصميم الخط الأفقي المتلاشي */
.s-block__title .right-side h2::after {
    content: "" !important;
    position: absolute !important;
    bottom: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 140px !important; /* طول الخط */
    height: 1px !important;
    background: linear-gradient(to right, transparent, #b8860b, #b8860b, transparent) !important;
}

/* تصميم المعين (الشكل الفخم) في المنتصف */
.s-block__title .right-side h2::before {
    content: "" !important;
    position: absolute !important;
    bottom: -19px !important; /* موازنة مع الخط */
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #fff !important; /* لون الخلفية لقطع الخط */
    border: 1px solid #b8860b !important; /* لون الإطار ذهبي فخم */
    z-index: 2 !important;
}










/* تنسيق الزر بألوان الشعار مع تقليل الارتفاع */
.s-button-element.s-button-btn {
    background-color: #7d204d !important; /* اللون العنابي */
    color: #fff !important;
    border: 1px solid #e5b95f !important; /* إطار ذهبي */
    border-radius: 8px !important;
    font-weight: bold !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(125, 32, 77, 0.2) !important;

    /* التعديل الجديد للارتفاع */
    height: 38px !important; /* ارتفاع نحيف مشابه للصورة */
    padding: 0 20px !important; /* تقليل الحشو الداخلي ليتناسب مع الارتفاع */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* تأثير اللمعة الضوئية */
.s-button-element.s-button-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(229, 185, 95, 0.3),
        transparent
    );
    transition: all 0.6s;
}

/* حركية الزر عند مرور الماوس */
.s-button-element.s-button-btn:hover {
    background-color: #5a1737 !important;
    border-color: #fff !important;
    transform: scale(1.02);
}

.s-button-element.s-button-btn:hover::before {
    left: 100%;
}

/* توحيد زخرفة العناوين */
.s-block__title .right-side h2::before, 
.s-block__title .right-side h2::after {
    background-color: #e5b95f !important;
}










/* استهداف الصور داخل السلايدر الذي يحمل هذا الـ ID فقط */
#section--slider .s-slider-container img,
#section--slider .swiper-slide img {
    border: 1px solid #000000 !important; /* إطار أسود رفيع */
    border-radius: 12px !important; /* زوايا منحنية تعطي لمسة فخامة */
    padding: 2px !important; /* مسافة بسيطة تجعل الصورة تتنفس داخل الإطار */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* ظل خفيف جداً */
    transition: border-color 0.3s ease !important;
}

/* عند تمرير الماوس يتغير لون الإطار للون شعارك (العنابي) */
#section--slider .swiper-slide img:hover {
    border-color: #7d204d !important;
}







/* تصغير دوائر التصنيفات للجوال فقط */
@media (max-width: 767px) {
    /* استهداف حاوية الصورة في قسم التصنيفات */
    .category-item-card .category-item-card__image, 
    .s-block--categories .s-category-card__image,
    [class*="category-item"] img {
        width: 75px !important;  /* القطر الجديد للدائرة */
        height: 75px !important;
        min-width: 75px !important;
        object-fit: cover !important;
        border-radius: 50% !important; /* لضمان بقائها دائرية */
    }

    /* تصغير حجم الخط للعناوين تحت الدوائر */
    .category-item-card__title, 
    .s-category-card__title {
        font-size: 11px !important;
        white-space: nowrap !important; /* لمنع انكسار النص */
    }

    /* تقليل المسافات الجانبية بين العناصر لتظهر متقاربة */
    .s-block--categories .slick-track, 
    .s-block--categories .s-grid {
        gap: 8px !important;
    }
}















/* تصميم هادئ وفخم يتناسب مع شعار المتجر */
.s-block--enhanced-features {
    background-color: #ffffff !important; /* خلفية بيضاء نقية للمنطقة */
    padding: 50px 0 !important;
}

.s-block--enhanced-features .s-block--features__item {
    background: #fcfaf7 !important; /* لون كريمي هادئ جداً للبطاقة */
    border-radius: 15px !important;
    padding: 35px 20px !important;
    border: 1px solid #f1ede8 !important; /* حدود ناعمة جداً */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; /* ظل خفيف جداً */
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* تأثير المرور (اختياري وهادئ) */
.s-block--enhanced-features .s-block--features__item:hover {
    background: #ffffff !important;
    border-color: #d4af37 !important; /* الحدود تتحول للذهبي عند التمرير */
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.1) !important;
}

/* تنسيق الأيقونات الدائرية */
.s-block--enhanced-features .s-block--features__item .s-block--features__item__icon {
    background: #ffffff !important;
    border: 1px solid #d4af37 !important; /* دائرة ذهبية نحيفة حول الأيقونة */
    border-radius: 50% !important;
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.s-block--enhanced-features .s-block--features__item__icon img {
    max-width: 35px !important;
    /* لجعل الأيقونات الملونة تميل للذهبي أو الأسود (اختياري) */
    filter: sepia(1) saturate(5) hue-rotate(10deg) brightness(0.7) !important; 
}

/* تنسيق النصوص بألوان هادئة ومقروءة */
.s-block--enhanced-features .s-block--features__item__title, 
.s-block--enhanced-features .s-block--features__item h4 {
    color: #1a1a1a !important; /* أسود هادئ للعناوين ليتماشى مع الشعار */
    font-size: 17px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.s-block--enhanced-features .s-block--features__item p {
    color: #666666 !important; /* رمادي متوسط للوصف (مريح للعين) */
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 0 !important;
}

/* تحسين المسافات للجوال */
@media (max-width: 767px) {
    .s-block--enhanced-features {
        padding: 30px 10px !important;
    }
    .s-block--enhanced-features .s-block--features__item {
        margin-bottom: 15px !important;
    }
}














/* تنسيق العناصر وإضافة انحناء الحواف */
.banner--fixed {

    border-radius: 20px !important; /* انحناء الحواف */
    overflow: hidden !important;    /* لضمان قص الصورة لتناسب الانحناء */
    transition: transform 0.2s ease, box-shadow 0.4s ease !important; /* نعومة الحركة */
}

/* تأثير الهوفر (عند مرور الماوس) */
/* تأثير الهوفر: تكبير ناعم في المركز بدلاً من الارتفاع */
.banner--fixed:hover {
    transform: scale(1.03) !important; /* تكبير بسيط بنسبة 3% */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important; /* ظل خفيف لإبراز التكبير */
    z-index: 20; /* لضمان ظهور العنصر فوق العناصر المجاورة عند التكبير */
}
/* تأكيد انحناء الصور داخل الرابط */
.banner--fixed img {
    border-radius: 20px !important;
}













/* 1. استهداف حاوية الأقسام وتحويلها لشريط ماركي */
.s-block--categories .swiper-wrapper {
    display: flex !important;
    flex-direction: row-reverse !important; /* للتحرك جهة اليمين */
    width: max-content !important; /* ضمان عدم انكسار العناصر */
    transform: none !important; /* تعطيل الحركة البرمجية لـ Swiper */
    transition: none !important;
    animation: marquee-fast 35s linear infinite !important; /* سرعة مناسبة */
    will-change: transform;
}

/* 2. ضبط العناصر الفردية (التصنيفات) */
.s-block--categories .swiper-slide {
    width: 130px !important; /* عرض ثابت للصورة */
    flex-shrink: 0 !important;
    margin-left: 15px !important;
    display: block !important;
}

/* 3. تعريف الحركة الدائرية المستمرة */
@keyframes marquee-fast {
    0% {
        transform: translateX(-50%) !important;
    }
    100% {
        transform: translateX(0%) !important;
    }
}

/* 4. إخفاء المشوشات (النقاط والأسهم) لضمان نظافة التصميم */
.s-block--categories .swiper-pagination,
.s-block--categories .swiper-button-next,
.s-block--categories .swiper-button-prev {
    display: none !important;
}

/* 5. توقف الحركة عند الوقوف بالماوس (اختياري) */
.s-block--categories .swiper-wrapper:hover {
    animation-play-state: paused !important;
}

/* 6. منع ظهور شريط تمرير أسفل الصفحة */
.s-block--categories {
    overflow: hidden !important;
}






/* استهداف مباشر لخلفية صور الأقسام في متجر فوق وصف */

/* الوضع العادي: خلفية بيضاء */
.slide--category-entry .image--aspect-ratio {
    background-color: #ffffff !important;
}

/* الوضع الداكن: تغيير الخلفية لتطابق لون الموقع */
[data-theme="dark"] .slide--category-entry .image--aspect-ratio,
[data-theme="dark"] .bg-gray-100 {
    background-color: #121212 !important; /* لون الخلفية الداكنة المعتمد في متجرك */
}

/* إزالة أي حدود أو ظلال قد تظهر باللون الأبيض */
[data-theme="dark"] .slide--category-entry .image--aspect-ratio img {
    background-color: transparent !important;
}