/* Add custom CSS styles below */ 

/* القائمة*/

/* 1. جعل التصنيفات الرئيسية في الشريط العلوي باللون الأبيض */
.root-level > a, 
.root-level > span,
#mobile-menu .main-menu > li > a,
#mobile-menu .main-menu > li > span {
    color: #ffffff !important;
    font-weight: bold;
}

/* 2. تغيير لون الروابط "داخل" القائمة المنسدلة فقط (التي خلفيتها بيضاء) */
.sub-menu li a, 
.mm-spn--open ul li a {
    color: #4b5563 !important; /* رمادي غامق للقوائم الداخلية */
}

/* 3. تأثير الهوفر للتصنيفات الرئيسية (أبيض ساطع أو رمادي فاتح) */
.root-level > a:hover {
    color: #e5e7eb !important; 
}

/* 4. تأثير الهوفر للقوائم الداخلية (أسود غامق) */
.sub-menu li a:hover,
.mm-spn--open ul li a:hover {
    color: #000000 !important;
}

/* #mobile-menu .main-menu li a, 
#mobile-menu .main-menu li span {
    color: #4b5563 !important;
    transition: color 0.3s ease; 
}

#mobile-menu .main-menu li a:hover, 
#mobile-menu .main-menu li a:hover span {
    color: #000000 !important;
}

.sub-menu li a {
    color: #4b5563 !important;
}

.sub-menu li a:hover {
    color: #111827 !important; 
} */

/* نهاية القائمة */


.s-slider-v-centered .s-slider-block__title-nav{
  display: none;
}

ticketing-system{
   display: none;
}

  @media (min-width: 768px) {
    #W_categories_tabs-5 .container {
        flex-direction: row-reverse !important;
    }
}

div .dynamic-text.font-bold {
  color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* ظل أسود خفيف يعطي عمقاً للنص */

    letter-spacing: 1px;        /* تباعد بسيط بين الحروف ليعطي فخامة */
}

p.dynamic-text span.bg-white {
    font-size: 0.75rem !important; /* تصغير الخط */
    border-radius: 6px !important; /* انحناء الزوايا */
    color: #000000 !important;    /* ضمان أن اللون أسود فوق الخلفية البيضاء */
    display: inline-block;
}




@media (min-width: 1024px) {


  h1.dynamic-text span.block {
    margin-top: 5rem !important;
    display: block; /* لضمان عمل الـ margin بشكل صحيح */
}
  
    #section--sliderpro .swiper-wrapper {
        display: flex;
        justify-content: center; /* توسيط المنتجات الثلاثة */
        gap: 20px; /* المسافة بين المنتجات */
        transform: none !important; /* إيقاف حركة السلايدر */
    }
    
    #section--sliderpro .s-products-slider-card {
        width: calc(33.33% - 20px) !important; /* توزيع متساوي */
        margin: 0 !important;
    }
}

/* تنسيق الجوال: إيقاف السلايدر وتحويله لشبكة */
/* إعدادات الجوال فقط */
@media (max-width: 767px) {

/* القائمة الفرعية */
 .root-level > a, 
.root-level > span,
#mobile-menu .main-menu > li > a,
#mobile-menu .main-menu > li > span {
    color: #000000 !important;
    font-weight: bold;
} 

/* 1. إخفاء العناصر المكررة المخصصة لسطح المكتب داخل منيو الجوال */
#mobile-menu li.lg\:!block, 
#mobile-menu li.root-level {
    display: none !important;
}

/* 2. إظهار عناصر الجوال فقط */
#mobile-menu li.lg\:hidden {
    display: block !important;
    visibility: visible !important;
}

/* 3. تنسيق التنقل: إخفاء الرابط الأصلي عند فتح القائمة الفرعية */
/* هذا السطر يمنع "ملحقات الجوال" من الظهور فوق قائمة "بيت الجوال، ستاند.." */
.mm-spn ul li.mm-spn--open > span,
.mm-spn ul li.mm-spn--open > a {
    display: none !important;
}

/* 4. تنسيق عام للمظهر */
.mm-spn, .mm-spn ul {
    background-color: #fff !important;
}

.mm-spn li {
    background: #fff !important;
    border-bottom: 1px solid #f9f9f9; /* خط خفيف للفصل بين العناصر */
}

/* 5. إصلاح مشكلة التداخل عند الرجوع للخلف */
.mm-spn.mm-spn--navbar.mm-spn--sub.mm-spn--open ~ .mm-spn--main {
    visibility: hidden !important;
    opacity: 0 !important;
}

  

  /* نهايةالقائمة */
  
  .flex .flex-col .gap-4 .items-center .relative .h-full .m-4 .z-2{
        margin-top: 2rem;
  }
    #section--sliderpro .swiper-wrapper {
        display: flex !important;
        flex-wrap: wrap !important; /* السماح للمنتجات بالنزول لسطر جديد */
        justify-content: center !important; /* توسيط المنتجات في السطر */
        gap: 10px !important;
        transform: none !important;
        width: 100% !important;
        padding: 10px !important;
    }

    /* المنتجات بشكل عام */
    #section--sliderpro .s-products-slider-card {
        width: calc(50% - 10px) !important; /* المنتجين الأول والثاني بجانب بعض */
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    /* المنتج الثالث تحديداً */
    #section--sliderpro .s-products-slider-card:nth-child(3) {
        width: calc(50% - 10px) !important; /* نفس عرض المنتجات اللي فوقه */
        margin-top: 10px !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* إخفاء عناصر السلايدر الزائدة */
    #section--sliderpro .s-slider-block__title-nav, 
    #section--sliderpro .swiper-notification {
        display: none !important;
    }

  .carousel-slider .swiper:where([dir=rtl],[dir=rtl] *), salla-slider[type]:not(.hydrated) .swiper>div>div:where([dir=rtl],[dir=rtl] *), salla-slider[type]:not(.hydrated)>div:where([dir=rtl],[dir=rtl] *){
    padding-left: 0rem;
  }


  /* الشكل البيضاوي للتصنيفات */

#thumbs-1 .swiper-slide .max-h-60.h-40 {
    width: 120px !important;    /* تقليل العرض ليناسب 3 عناصر في الصف */
    height: 120px !important;   /* يجب أن يطابق العرض لتبقى دائرة */
    margin: 0 auto !important; /* توسيط الدائرة في منتصف المساحة المخصصة لها */
    aspect-ratio: 1 / 1 !important; 
    border-radius: 50% !important; /* لجعلها دائرة كاملة */
}

/* 2. تصغير الخط قليلاً ليناسب الحجم الجديد على الموبايل */
#thumbs-1 .swiper-slide h2 {
    font-size: 12px !important;
    white-space: nowrap; /* منع النص من النزول لسطر جديد وتخريب الشكل */
}

  
}

/* حل مشكلة زر اضافة للسلة */