/* Add custom CSS styles below */ 
    .s-block--slider-with-bg .slider-with-bg-data {
        width: auto;
    }
 
    .s-block--slider-with-bg .slider-with-bg-data {
        margin-top: 0%;
    }
/* تطبيق التنسيقات على شاشات الموبايل فقط */
@media (max-width: 767px) {
    .s-block--slider-with-bg .slider-with-bg-data {
        width: auto;
        margin-top: 0%;
    }
}
.center-side {
    display: none;
}
.footer-is-light .store-footer {
  font-size: 18px;
    font-weight: bolder;
  color: white !important;
/* background: #0B6FB8 !important; */
background: linear-gradient(179deg,rgba(90, 159, 200, 1) 0%, rgba(90, 159, 200, 1) 51%, rgba(71, 71, 166, 1) 100%) !important;   
    /* color: rgba(55, 65, 81, var(--tw-text-opacity, 1)); */
}
.banner {
    /* Spread (الرقم الرابع) 2px بيوسع مساحة اللون */
    box-shadow: 0 5px 15px 2px rgba(90, 159, 200, 0.8);
}
.banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -5px rgba(90, 159, 200, 0.45);
}
custom-salla-product-card.product-entry {
    border: 1px solid #76a4ff !important;
    border-radius: 12px !important;
    background: #fff !important;
    
    /* إلغاء أي هوامش خارجية قد تسبب الطول الزائد */
    margin: 0 !important; 
    
    /* ضبط الارتفاع ليكون متناسق مع السلايدر */
    height: 100% !important; 
    
    /* الشادو الازرق الهادئ */
    box-shadow: 0 4px 15px -5px rgba(90, 159, 200) !important;
    
    transition: all 0.3s ease !important;
}

/* تأثير الهوفر - يرفع الكارت لفوق بتأثير ناعم */
custom-salla-product-card.product-entry:hover {
    transform: translateY(-5px) !important; 
    border-color: #76a4ff !important;
    box-shadow: 0 15px 25px -5px rgba(90, 159, 200, 0.4) !important;
    z-index: 2; /* يخلي الكارت يظهر فوق اللي جنبه لو في تداخل */
}

/* التأكد إن الصورة واخدة الكيرف من فوق بس ومتخرجش بره */
custom-salla-product-card.product-entry img {
    border-radius: 12px 12px 0 0 !important;
}
/* 1. توحيد ارتفاع منطقة المحتوى العلوي (العنوان + الوصف) */
.s-product-card-content-main {
    /* بنحجز مساحة تكفي للعنوان والوصف حتى لو مش موجودين */
    min-height: 90px !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* يخلي الكلام يبدأ من فوق */
}

/* 2. توحيد ارتفاع العنوان نفسه (عشان لو عنوان سطر وعنوان سطرين) */
.s-product-card-content-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* يظهر سطرين كحد أقصى */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 42px !important; /* ارتفاع ثابت للعنوان (تقريباً سطرين) */
    line-height: 1.5 !important;
}

/* 3. تنسيق الوصف الفرعي عشان ياخد مكانه صح */
.s-product-card-content-subtitle {
    margin-top: 5px !important;
    font-size: 12px !important;
    color: #777 !important;
    /* لو الوصف طويل نقصه كمان */
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.inner.bg-inherit.py-2\.5 {
    font-weight: bolder !important;
}
.display-all-url {
    /* 1. تدرج عمودي صريح من لونك الفاتح لدرجة أغمق (عشان التجسيم) */
    background: linear-gradient(to bottom, #5a9fc8 0%, #2e7a9e 100%) !important;
    
    /* 2. بوردر أبيض سميك شوية عشان يبرز الزرار */
    border: 2px solid #ffffff !important;
    
    color: #ffffff !important;
    border-radius: 50px !important;
    font-weight: 900 !important; /* خط عريض عشان يوضح */
    
    /* 3. ميكس شادو: لمعة من فوق + ضل قوي من تحت */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4), /* لمعة زجاجية */
        0 5px 15px rgba(46, 122, 158, 0.5) !important; /* ضل ملون وقوي */
        
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* حركة فيها نطة بسيطة */
    
    /* ضمان ظهور النص والأيقونة بلون أبيض */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* تحسين الأيقونة والنص */
.display-all-url i, .display-all-url span {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* ضل خفيف للكلام نفسه */
}

/* تأثير الهوفر: الزرار يلمع ويطلع لفوق */
.display-all-url:hover {
    transform: translateY(-4px) !important;
    /* تفتيح اللون كأنه تعرض لضوء */
    background: linear-gradient(to bottom, #72b2d6 0%, #3a8ab3 100%) !important;
    border-color: #f0f8ff !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 10px 25px rgba(46, 122, 158, 0.7) !important;
}

/* تأثير الضغط: الزرار ينزل لتحت */
.display-all-url:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 5px rgba(46, 122, 158, 0.5) !important;
}
.main-links-title {
    /* يمنع كسر الكلمة من المنتصف */
    word-break: normal; 
    
    /* يكسر السطر فقط عند المسافات بين الكلمات */
    overflow-wrap: break-word; 
}
.sc-1au8ryl-0.dkuywW {
    display: none;
}
.s-advertisement {
    overflow: hidden;
    width: 100%;
}

.s-advertisement-content {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.s-advertisement:hover .s-advertisement-content {
    animation-play-state: paused;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.s-advertisement-content-main {
    white-space: nowrap;
}

.s-advertisement-content-main a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.s-modal-title {
    display: none;
}
p.s-modal-sub-title {
    font-size: 15px;
    font-weight: bolder;
    color: black;
}
/* --- تعديل الهيدر لإنزال المحتوى --- */
.s-modal-header {
    margin: -30px;
    background: #ffffff !important;
    color: #000 !important;
    padding: 10px 30px 0px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    position: relative;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-evenly;
}
/* --- تعديل الرسالة (النص الفرعي) --- */
.s-modal-sub-title {
    font-size: 0.95rem !important;
    color: #666 !important;
    line-height: 1.6;
    /* عملنا إزاحة إضافية للنص نفسه بعيداً عن العنوان */
    margin-top: 15px !important; 
    margin-bottom: 10px !important;
    max-width: 90%; /* عشان السطر ميكونش طويل أوي */
}

/* --- زر الإغلاق (عشان يفضل فوق خالص ومينزلش مع الكلام) --- */
.s-modal-close {
    position: absolute !important;
    top: 10px !important; /* لازق في السقف */
    left: 10px !important;
    background: transparent !important;
    border: none !important;
    color: #bbb !important;
    padding: 5px;
    z-index: 20; /* عشان يفضل فوق أي حاجة */
}

.s-modal-close:hover {
    color: #000 !important;
}

/* باقي التنسيقات (العنوان والأيقونة) زي ما هي */
.s-modal-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 5px 0 !important;
}

.s-offer-modal-header-icon svg {
    width: 50px !important;
    height: 50px !important;
    fill: #000 !important;
}

/* .s-offer-modal-type-products .s-modal-body {
    min-height: 450px;
    position: relative;
} */


.s-offer-modal-footer {
    display: none;
}