/* Add custom CSS styles below */ 
/* الألوان الجديدة */
:root {
    --color-mix-1: #dec3a9; /* لون فاتح كريمي */
    --color-mix-2: #FAE2CA; /* لون أخضر باهت */
}


/* الألوان الجديدة */
:root {
    --color-mix-1: #ABD4A8; /* لون فاتح كريمي */
    --color-mix-2: #242729; /* لون أخضر باهت */
}

/* ------------------------------------------- */
/* 1. تطبيق التدرج اللوني على العنصر الرئيسي للهيدر */
/* ------------------------------------------- */
.store-header {
    /* تطبيق التدرج الخطي: يبدأ من اللون الأخضر الفاتح (الأعلى) وينتهي بالكريمي (الأسفل) */
    background-image: linear-gradient(to bottom, var(--color-mix-2), var(--color-mix-1));
    
    /* مهم: لضمان أن التدرج يغطي كل أجزاء الهيدر إذا لم يكن هناك خلفيات أخرى */
    background-color: var(--color-mix-2); 
    
    /* لون النص الافتراضي ليكون مقروءًا على خلفية فاتحة */
    color: #333; 
}

/* ------------------------------------------- */
/* 2. إزالة الخلفيات البيضاء للعناصر الداخلية */
/* ------------------------------------------- */

/* إلغاء الخلفية البيضاء من الشريط الرئيسي لظهور التدرج من خلاله */
.store-header .main-nav-container {
    /* الكود يحتوي على `bg-white`، يجب إلغاؤها أو تجاوزها */
    background-color: transparent !important; 
    /* إزالة الظل إذا كان غير مرغوب فيه فوق التدرج */
    box-shadow: none !important; 
}

/* إلغاء الخلفية البيضاء من الشريط العلوي (إذا كانت موجودة) */
.store-header .top-navbar {
    background-color: transparent !important;
}

/* إذا كان هناك عناصر أخرى بالخلفية البيضاء مثل قائمة الاتصال (salla-contacts) */
.store-header salla-contacts {
    --s-contacts-bg: transparent; /* قد تحتاج هذه المتغيرات لتجاوز إعدادات المنصة */
    /* قم بتغيير لون الأيقونات لتكون مقروءة على التدرج */
    --s-contacts-icon-color: #333; 
}

/* لضمان أن شريط البحث يبدو جيدًا، قد تحتاج لتخصيصه إذا كانت خلفيته شفافة */
.store-header salla-search .s-search-container {
    background-color: rgba(255, 255, 255, 0.5); /* خلفية بيضاء نصف شفافة للمظهر الجيد */
}

/* ------------------------------------------- */
/* 3. تعديل ألوان أيقونات الهيدر الرئيسية (للتأكد من الوضوح) */
/* ------------------------------------------- */

/* أيقونة القائمة (إذا كانت بلون `primary`) */
.store-header .mburger i.sicon-menu {
    color: #333 !important; /* أو استخدم اللون الأخضر الباهت `var(--color-mix-2)` */
}


/* الألوان الجديدة */
:root {
    --color-mix-1: #b58250; /* لون فاتح كريمي */
    --color-mix-2: #ABD4A8; /* لون أخضر باهت */
}


/* ------------------------------------------- */
/* ملاحظة: إذا كان الفوتر يحتوي على عناصر داخلية */
/* بخلفية بيضاء، يجب جعلها شفافة لظهور التدرج   */
/* ------------------------------------------- */
/* مثال: إذا كان هناك div داخلي بخلفية بيضاء */
#footer > div, .store-footer > div {
    background-color: transparent !important;
}

:root {
    --color-mix-1: #FAE2CA; /* لون فاتح كريمي */
    --color-mix-2: #ABD4A8; /* لون أخضر باهت */
}




:root {
    --color-mix-1: #FAE2CA; /* لون فاتح كريمي */
    --color-mix-2: #ABD4A8; /* لون أخضر باهت */
    --icon-dark-color: #333; /* لون الأيقونات والنصوص الداكنة */
}

/* ======================================= */
/* 3. تلوين أيقونة القائمة الجانبية (Hamburger Menu) */
/* ======================================= */

/* استهداف أيقونة الهامبرجر وتلوينها بالتدرج */
.mburger .sicon-menu {
    /* تطبيق التدرج كخلفية نصية لتلوين الأيقونة */
    background: linear-gradient(to right, var(--color-mix-1), var(--color-mix-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

   
}








/* --- 3. توسيط الشريط السفلي (حقوق النشر وطرق الدفع) --- */

/* توسيط المحتوى الأفقي للشريط السفلي */
.store-footer .md\:flex {
    justify-content: center !important; 
    gap: 50px; 
    flex-wrap: wrap; 
}



/*المدونة

/* ==================================== */
/* 1. تعريف الألوان الأساسية والخطوط */
/* ==================================== */
:root {
    /* لون العلامة التجارية (أخضر/بيج فاتح) */
    --primary-color: #A5C198;

    /* لون العناوين والنصوص الداكنة */
    --dark-text: #333333;
    /* لون النصوص الثانوية */
    --light-text: #777777;
    /* لون الحدود والفواصل */
    --border-light: #eeeeee;
}

/* تطبيق الخط والاتجاه والخلفية على الجسم */
body {
    background-color: var(--accent-color) !important;
    font-family: 'Almarai', sans-serif !important;
    color: var(--dark-text);
    /* لزيادة الجمالية نرفع الظل قليلاً */
    box-shadow: none !important;
}

/
/* ==================================== */
/* 3. تنسيق المحتوى الرئيسي (مقالة المدونة) */
/* ==================================== */

/* تنسيق شريط التنقل (Breadcrumbs) */
.s-breadcrumb-wrapper a,
.s-breadcrumb-item {
    color: var(--light-text);
    font-size: 0.9rem;
}
.s-breadcrumb-wrapper a:hover {
    color: var(--primary-color);
}
.s-breadcrumb-arrow {
    color: var(--primary-color);
}


/* حاوية المقال الرئيسية (Main Content) */
/* عنوان المقال الرئيسي */
.main-content h1 {
    color: var(--dark-text);

    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* بيانات المقال (التاريخ، الكاتب) */
.main-content .text-gray-500 {
    color: var(--primary-color) !important;
    font-size: 1rem;
}
.main-content .text-gray-500 a {
    color: var(--primary-color);
    font-weight: 500;
}
.main-content .text-gray-500 a:hover {
    color: var(--primary-color) !important;
}

/* تنسيق محتوى المقالة (article) لتحسين القراءة */
.main-content article {
    line-height: 1.85; /* زيادة ارتفاع السطر */
    font-size: 1.15rem !important; /* تكبير الخط */
}

/* تنسيق العناوين داخل المقالة */
.main-content article h2 {
    color: var(--primary-color) !important;
    margin-top: 35px;
    margin-bottom: 15px;
    border-right: 5px solid var(--primary-color); /* شريط جانبي بلون العلامة التجارية */
    padding-right: 15px;
}

.main-content article h3 {
    color: var(--dark-text) !important;
    font-size: 1.3rem !important;
    font-weight: bold !important;
    margin-top: 25px;
    margin-bottom: 10px;
}

/* تنسيق زر الإعجاب */
#blog-like span {
    color: var(--dark-text);
    font-weight: 500;
}





/* remove all borders
/*
  =====================================
  CSS لإزالة جميع الإطارات والظلال من المتجر بالكامل
  =====================================
*/
* {
    /* 1. إزالة الإطارات الخارجية (مثل حول البطاقات والحاويات) */
    border: none !important;

    /* 2. إزالة الظلال (التي قد تعمل كإطار بصري) */
    box-shadow: none !important;

    /* 3. إزالة إطارات التركيز (التي تظهر عند النقر على الأزرار أو المدخلات) */
    outline: none !important;
}


 




  =====================================
  CSS البديل 1: استهداف العنصر الداخلي (أكثر فعالية)
  =====================================
*/






/*logo*/

/* تنسيق النص داخل الزر لمنع الاختفاء */
.s-product-card-content-footer .s-button-text {
    white-space: nowrap !important; /* يمنع النص من النزول لسطر جديد */
    overflow: visible !important;   /* يظهر النص بالكامل */
    text-overflow: clip !important; /* يلغي النقاط الثلاث */
    font-size: 16px !important;     /* حجم خط مناسب للجوال */
    display: flex !important;
    gap: 5px;                       /* مسافة بين الأيقونة والنص */
    align-items: center;
}

/* تخصيص للجوال فقط لضمان عدم خروج النص */
@media (max-width: 767px) {
    .s-product-card-content-footer .s-button-text {
        font-size: 14px !important; /* تصغير الخط قليلاً في الجوال ليظهر كاملاً */
    }
    
    .s-product-card-content-footer .s-button-element {
        width: 100% !important; /* التأكد من أن الزر يأخذ العرض المتاح */
    }
}
/* تنسيق أيقونة الهدية */
.gift-drop {
    position: fixed;
    top: -50px;
    font-size: 24px;
    z-index: 9999;
    pointer-events: none; /* لكي لا تعيق الضغط على الشاشة */
    animation: dropFall 2s linear forwards;
}

/* حركة السقوط مع دوران خفيف */
@keyframes dropFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* 1. جعل الحاوية الأم تشمل كامل العرض لتسمح بالتوسيط */
.flex.items-center {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center; /* توسيط العناصر داخلياً */
    align-items: center;
    min-height: 30px; /* يمكن تعديله حسب الرغبة */
}

/* 2. وضع الشعار في المنتصف تماماً بعيداً عن العناصر الأخرى */
.navbar-brand {
    position: absolute !important;
    left:9% !important;
    transform: translateX(-50%) !important;
    margin: 0 auto !important;
    z-index: 10;
}

/* 3. تنسيق إبداعي للشعار (حجم وظل ناعم) */
.navbar-brand img {
    max-width: 90px !important; /* تحكم في حجم الشعار من هنا */
    height: auto !important;
    transition: all 0.3s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.05));
}

/* 4. تأثير عند تمرير الماوس */
.navbar-brand:hover img {
    transform: scale(1.08); /* تكبير بسيط */
   filter: drop-shadow(0 6px 12px rgba(0,0,0,0.1));*/
}
.navbar-brand:hover img {
    filter: saturate(1.5) drop-shadow(0 8px 20px rgba(0,0,0,0.15));
    transform: translateY(-5px);
}
/* 5. ضمان بقاء زر القائمة (mburger) في مكانه على الطرف */
.mburger {
    position: absolute;
    right: 15px; /* يظهر على اليمين في الجوال */
    z-index: 11;
}

/* تعديل للمتصفحات التي تدعم اللغة العربية (RTL) */
[dir="rtl"] .mburger {
    left: auto;
    right: 15px;
}


/*change avatar*/
/* تغيير صورة الأيقونة في الهيدر (الزر الرئيسي) */
.s-user-menu-trigger-avatar {
    content: url('https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/rAmvRG/3SGRHjkmCHhmG2eVGxVzyI66BKiDIR6F0mkzfIZA.png') !important;
    object-fit: cover !important;
    width: 40px !important; /* يمكنك تعديل الحجم حسب الرغبة */
    height: 40px !important;
    border-radius: 100% !important;
}


/* Ensure the button doesn't disappear when images are hovered */
.s-product-card-image:hover .s-product-card-wishlist-btn {
    transform: scale(1.1); /* Slight pop for the button itself */
    z-index: 1000 !important;
}


/* 2. تصغير حجم الصورة (الشعار) */
.s-trust-badges-image {
  display: none !important;
    width: 25px !important;    /* تقليل العرض */
    height: 25px !important;   /* تقليل الارتفاع */
    margin: 0 4px !important;  /* تقليل الهوامش حول الشعار */
}

/* 3. تصغير حجم الخط للنص "السجل التجاري" والرقم */
.s-trust-badges-label, /* السجل التجاري */
.s-trust-badges-number { /* 7050159768 */
    font-size: 0.7rem !important; /* حجم خط صغير ومقروء */
    margin: 0 !important;         /* إزالة الهوامش */
    line-height: 1 !important;    /* تقليل التباعد بين السطور */
}








/* تنسيق الحاوية الرئيسية للمنتج لتصبح كأنها "عقدة" (Node) من التصميم */
custom-salla-product-card#462572459 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 20px; /* لتناسب زوايا تصميمك */
    padding: 20px;
    margin: 20px auto;
    max-width: 300px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* ظل ناعم */
    transition: all 0.3s ease;
}

/* تنسيق الصورة لتكون دائرية أو ناعمة الحواف مثل الأيقونات */
custom-salla-product-card#462572459 .s-product-card-image {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 15px;
}

custom-salla-product-card#462572459 .s-product-card-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* تنسيق النصوص (العنوان والسعر) */
custom-salla-product-card#462572459 .s-product-card-content-title {
    font-size: 1.2rem !important;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

custom-salla-product-card#462572459 .s-product-card-sale-price {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

custom-salla-product-card#462572459 .s-product-card-sale-price h4 {
    color: #d63384; /* لون وردي يناسب هوية عالم الأمومة */
    font-size: 1.3rem;
    margin: 0;
}

/* تنسيق زر الإضافة للسلة ليناسب "اكتشفي المجموعة" */
custom-salla-product-card#462572459 .s-button-element {
    background-color: #333 !important; /* لون داكن احترافي */
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important; /* زوايا دائرية بالكامل */
    padding: 10px 25px !important;
    font-weight: 500 !important;
    transition: transform 0.2s;
}

custom-salla-product-card#462572459 .s-button-element:hover {
    transform: scale(1.05);
    background-color: #d63384 !important; /* يتغير للوردي عند اللمس */
}

/* إخفاء العناصر الزائدة ليبقى التصميم بسيطاً ونظيفاً */
custom-salla-product-card#462572459 .s-product-card-wishlist-btn,
custom-salla-product-card#462572459 .s-product-card-rating {
    display: none !important;
}

/* تنسيق شارة الخصم */
custom-salla-product-card#462572459 .s-product-card-promotion-title {
    background: #ff5a5a;
    padding: 2px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
}














/* تبييض القسم بالكامل */
#about-1 {
    background-color: #ffffff !important;
    padding: 30px 0 !important;
}

/* حاوية الكتاب التفاعلي */
.full-page-book-viewer {
    width: 100%;
    background: #ffffff !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* إطار الكتاب بدون شعارات وبحجم كامل */
.no-logo-iframe {
    width: 100%;
    max-width: 1000px;
    height: 750px;
    border: none !important;
    background: #ffffff !important;
}

/* تنسيق منطقة السعر والأزرار المستوردة من سلة */
.custom-product-footer {
    width: 100%;
    max-width: 500px;
    background: #ffffff;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #f3f3f3;
}

/* تحسين شكل السعر */
.total-price {
    font-size: 24px !important;
    color: #d63031 !important;
}

.before-price {
    font-size: 16px !important;
    color: #999 !important;
}

/* زر الإضافة للسلة ليملأ العرض */
.custom-product-footer salla-add-product-button {
    margin-top: 15px;
    display: block;
    width: 100%;
}

/* للجوال */
@media (max-width: 768px) {
    .no-logo-iframe { height: 500px; }
    .custom-product-footer { width: 90%; }
}



/* إخفاء النص داخل الأزرار وإبقاء الأيقونة */
.enhanced-contact-item span { display: none; }


/* صف الأيقونات */
.icons-row {
    flex-direction: column; /* بجانب بعض */
    justify-content: center;
    gap: 15px; /* المسافة بين الايقونتين */
}




/* استهداف الزر وتغيير الخط والألوان */
.tab-trigger .s-button-text {
    font-size: 22px !important; /* تكبير الخط */
    font-weight: bold;
}


/* إلغاء الخلفية والحدود من قائمة الدفع */
.s-payments-list-wrap, 
.s-payments-list, 
.s-payments-list-item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* توسيط حاوية الروابط بالكامل */
.text-center.order-1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* التأكد من أن القائمة نفسها في المنتصف */
.footer-list.store-links-items {
    padding: 0 !important;
    margin: 0 auto !important;
    display: inline-block !important; /* لضمان استجابة التوسيط */
    text-align: center !important;
}

/* موازنة الروابط الفردية */
.footer-list.store-links-items li {
    display: block !important;
    text-align: center !important;
}

.footer-list.store-links-items li a {
    display: inline-block !important;
    width: auto !important;
}


/* 2. تغيير شكل الكيرف العلوي لشكل موجة انسيابية */
.store-footer__curve {
    color: #ffffff !important; /* لون الموجة أبيض ليفصل عن الصفحة */
    transform: scaleY(1.5); /* زيادة عمق المنحنى */
}




/* جعل الحاوية تعرض العناصر بجانب بعضها دائماً */
selia-contacts .flex {
    display: flex !important;
    flex-direction: row !important; /* صف أفقي */
    justify-content: center !important;
}

/* تنسيق الأيقونات لتكون دائرية وأنيقة */
.enhanced-contact-item {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important; /* شكل دائري */
    justify-content: center !important;
    padding: 0 !important;
       gap:0px !important; /* مسافة بين الأيقونتين */

}

/* توحيد المسافة بين جميع أيقونات التواصل في الفوتر */
selia-contacts .flex, 
.s-social-list {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important; /* نفس المسافة الافتراضية لأيقونات سلة الاجتماعية */
    padding: 0 !important;
    margin: 0 !important;
}

/* التأكد من حذف أي هوامش جانبية قديمة للأيقونات */
.s-social-link, 
.enhanced-contact-item {
    margin: 0 !important;
}

/* تنسيق إضافي للأيقونات لتظهر بصف واحد */
.s-social-list {
    list-style: none !important;
    flex-direction: row !important;
}



/* تنسيق الحاوية الرئيسية للسلايدر */
.creative-mom-slider {
    border-radius: 30px;
    overflow: hidden;
    margin: 20px 0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    background: #fff;
    transition: all 0.5s ease;
}


/* حركة ذكية للصورة عند التحميل */
.creative-mom-slider img {
    transition: transform 8s ease-out;
    filter: saturate(1.1); /* تعزيز الألوان بشكل طفيف */
}

.creative-mom-slider:hover img {
    transform: scale(1.08); /* زووم خفيف جداً عند الوقوف بالماوس */
}


/* إضافة لمسة "توهج" ناعمة خلف السلايدر */
.creative-mom-slider::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(220, 200, 182, 0.1) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 768px) {
    /* جعل السلايدر يمتد لملء العرض ومنع الفراغات الجانبية */
    .advanced-slider--5 {
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
    }


    /* إضافة لمسة ظل بسيطة تفصل السلايدر عن الفوتر */
    .advanced-slider--5::after {
        content: "";
        display: block;
        height: 15px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.03), transparent);
    }
}

/* تنسيق عام للسلايدر لجعله يبدو كقطعة واحدة ناعمة */
.advanced-slider--5 {
    background-color: #ffffff !important;
    border: none !important;
}



/* تنسيق الملاحظة اللطيفة */
.book-full-notice {
    background-color: #fdf8f3 !important; /* لون كريمي ناعم */
    border-right: 4px solid #dcc8b6 !important; /* لون المتجر */
    padding: 12px 18px;
    margin: 15px auto;
    border-radius: 8px;
    font-size: 14px;
    color: #8a7a6a;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 90%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

/* أيقونة القلب أو المعلومات */
.book-full-notice::before {
    content: "✨";
    font-size: 18px;
}

/* تنسيق الجوال */
@media (max-width: 768px) {
    .book-full-notice {
        font-size: 12px;
        padding: 10px;
        margin: 10px auto;
    }
}






/* الحاوية الأساسية */
.grid.grid-cols-5 {
    display: grid !important;
    gap: 10px !important;
    height: auto !important;
}

/* --- ضبط الجوال (تصميم مدمج لتقليل التمرير) --- */
@media (max-width: 767px) {
    .grid.grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important; /* توزيع 2x2 */
    }
    /* جعل العنصر الأول يغطي العرض كاملاً كعنوان للشبكة */
    .grid.grid-cols-5 > div:nth-child(1) { grid-column: span 2 !important; height: 180px !important; }
    /* باقي العناصر بجانب بعضها لتقليل طول الصفحة */
    .grid.grid-cols-5 > div:nth-child(2), 
    .grid.grid-cols-5 > div:nth-child(3) { grid-column: span 1 !important; height: 140px !important; }
    
    .anime-item h3 { font-size: 14px !important; padding: 8px !important; }
}

/* --- ضبط الشاشات الكبيرة (فخامة واستغلال مساحة) --- */
@media (min-width: 768px) {
    .grid.grid-cols-5 {
        grid-template-columns: repeat(5, 1fr) !important;
        grid-template-rows: repeat(2, 220px) !important; /* صفين بارتفاع ثابت */
    }
    /* توزيع احترافي (2-2-1) */
    .grid.grid-cols-5 > div:nth-child(1) { grid-column: span 2 !important; grid-row: span 2 !important; }
    .grid.grid-cols-5 > div:nth-child(2) { grid-column: span 2 !important; grid-row: span 1 !important; }
    .grid.grid-cols-5 > div:nth-child(3) { grid-column: span 1 !important; grid-row: span 2 !important; }
}














/* الحاوية الرئيسية */
.grid.grid-cols-5 {
    display: grid !important;
    gap: 8px !important;
    direction: rtl !important;
}

/* --- وضع الجوال (ظهور الكل في شاشة واحدة) --- */
@media (max-width: 767px) {
    .grid.grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important; /* عمودين فقط */
        height: 400px !important; /* تحديد ارتفاع ثابت لمنع التمدد الطولي */
    }
    /* العنصر الأول: يأخذ العرض كاملاً لكن بارتفاع قصير */
    .grid.grid-cols-5 > div:nth-child(1) { grid-column: span 2 !important; height: 140px !important; }
    
    /* بقية العناصر: تظهر كمربعات صغيرة بجانب بعضها */
    .grid.grid-cols-5 > div:nth-child(2) { grid-column: span 1 !important; height: 120px !important; }
    .grid.grid-cols-5 > div:nth-child(2) .grid { display: contents !important; } /* تفكيك الشبكة الداخلية */
    
    /* جعل ألعاب التسلية والشهور تظهر بجانب بعضها */
    .grid.grid-cols-5 .anime-item { height: 120px !important; margin-bottom: 0 !important; }
    
    .anime-item h3 { font-size: 13px !important; bottom: 5px !important; right: 5px !important; }
}

/* --- وضع الشاشات الكبيرة (فخامة واتساع) --- */
@media (min-width: 768px) {
    .grid.grid-cols-5 {
        grid-template-columns: repeat(5, 1fr) !important;
        height: 500px !important;
        gap: 15px !important;
    }
    /* توزيع (2 عريض - 2 وسط - 1 طولي) */
    .grid.grid-cols-5 > div:nth-child(1) { grid-column: span 2 !important; }
    .grid.grid-cols-5 > div:nth-child(2) { grid-column: span 2 !important; }
    .grid.grid-cols-5 > div:nth-child(3) { grid-column: span 1 !important; }
    
    .anime-item h3 { font-size: 1.5rem !important; }
}









/* تكبير الخط داخل الصور فقط */
.anime-item h3 {
    font-size: 22px !important; /* حجم كبير وواضح */
    font-weight: 800 !important; /* عريض جداً */
    width: 90% !important;
    line-height: 1.2 !important;
}













/* تأثير زر "إضافة للسلة" عند التحويم */
.s-button-element:hover {
    background-color: #dcc8b6 !important;
    color: white !important;
    border-color: #dcc8b6 !important;
}








/* كود التصميم الموحد لجميع أزرار التصفح */
.btn-custom-preview, .custom-preview-trigger {
    display: block !important;
    width: 85% !important; /* تقليل العرض ليكون أصغر وأرقى */
    margin: 8px auto !important; /* مسافات متوازنة */
    background-color: #ffffff !important;
    color: #dcc8b6 !important;
    border: 1.5px solid #dcc8b6 !important;
    border-radius: 50px !important; /* شكل كبسولة عصري */
    padding: 6px 12px !important; /* تقليل الحشو الداخلي لتصغير الحجم */
    font-size: 12px !important; /* خط أصغر وأوضح */
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    line-height: 1.5 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* تأثير عند تمرير الماوس */
.btn-custom-preview:hover, .custom-preview-trigger:hover {
    background-color: #dcc8b6 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(220, 200, 182, 0.2) !important;
}

/* توحيد شكل النافذة المنبثقة (المودال) للاثنين */
.preview-modal-overlay, .flipbook-overlay {
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(4px) !important;
}

.preview-modal-container, .flipbook-wrapper {
    width: 90% !important;
    max-width: 950px !important;
    height: 80vh !important;
    background: #fff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
}

.preview-modal-header, .flipbook-header {
    padding: 10px 15px !important;
    background: #fdfaf7 !important;
    display: flex !important;
    justify-content: flex-end !important;
    border-bottom: 1px solid #eee !important;
}

/* زر الإغلاق الموحد */
.preview-close-btn, .close-flipbook {
    background: #dcc8b6 !important;
    color: white !important;
    border: none !important;
    padding: 4px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

/* تحسين شكل الإطار الداخلي */
.preview-modal-container iframe, .flipbook-wrapper iframe {
    flex: 1 !important;
    width: 100% !important;
    border: none !important;
}

/* تحسينات الجوال */
@media (max-width: 768px) {
    .preview-modal-container, .flipbook-wrapper {
        width: 95% !important;
        height: 75vh !important;
    }
    .btn-custom-preview, .custom-preview-trigger {
        width: 90% !important;
        font-size: 11px !important;
    }
}






/* تصميم الزر المتوهج */
.glow-preview-btn {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(45deg, #dcc8b6, #eaddd0) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    margin-bottom: 15px !important; /* مسافة بينه وبين زر السلة */
    cursor: pointer !important;
    box-shadow: 0 0 10px rgba(220, 200, 182, 0.5) !important;
    animation: glow-animation 2s infinite !important;
    transition: 0.3s !important;
}

@keyframes glow-animation {
    0% { box-shadow: 0 0 5px rgba(220, 200, 182, 0.4); transform: scale(1); }
    50% { box-shadow: 0 0 20px rgba(220, 200, 182, 0.8); transform: scale(1.02); }
    100% { box-shadow: 0 0 5px rgba(220, 200, 182, 0.4); transform: scale(1); }
}

.glow-preview-btn:hover {
    transform: translateY(-3px) !important;
    background: #c9b4a1 !important;
}

/* تنسيق النافذة المنبثقة */
.custom-flip-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
}

.custom-flip-content {
    width: 90%; max-width: 1000px; height: 80vh;
    background: white; border-radius: 20px;
    position: relative; padding: 10px;
}

.close-flip {
    position: absolute; top: -40px; right: 0;
    color: white; font-weight: bold; cursor: pointer;
    font-size: 18px;
}