/* Add custom CSS styles below */ 
.hide-banner-title h2,  /* يستهدف فقط العنوان */
.hide-banner-description p,  /* يستهدف فقط الوصف */
.hide-banner-button a {  /* يستهدف فقط الزر */
    display: none !important;
}

/* حجم البنر للشاشات الكبيرة (Desktop) */
.bg-image-container-0 {
    height: 300px;  /* ارتفاع 800 بكسل */
    background-size: cover; /* ضمان تغطية الصورة بدون قص */
    background-position: center;
}

/* حجم البنر للموبايل (Mobile) */
@media (max-width: 768px) { 
    .bg-image-container-0 {
        height: 447px !important;  /* ارتفاع 1350 بكسل */
        الموبايل.jpg') !important; /* صورة الموبايل */
    }
}




.overlay-bg {
    display: none !important;
}

.text-themetow.font-bold {
    color: #000000 !important;  /* تغيير لون العنوان فقط */
    font-weight: 700 !important; /* يمكنك زيادة السمك أكثر */
    margin-bottom: 5px !important; /* يمكنك تعديل الرقم حسب الحاجة */
}
#image-banner {
    margin-bottom: 0 !important; 
    padding-bottom: 0 !important;
}

/* ✅ تغيير لون خلفية الفوتر */
.store-footer__inner {
    background-color: #2c2c2e !important; /* استبدل #222 بأي لون تريده */
    padding: 40px 0 !important; /* تحسين التباعد داخل الفوتر */
}

/* ✅ تعديل لون وحجم النصوص داخل الفوتر */
.store-footer p,
.store-footer a {
    font-size: 16px !important; /* حجم النص */
    color: #fff !important; /* لون النص */
    text-decoration: none !important; /* إزالة أي خطوط تحت الروابط */
}

/* ✅ تغيير لون العناوين داخل الفوتر */
.store-footer h3 {
    font-size: 16px !important; /* حجم العنوان */
    font-weight: bold !important;
    color: #6ebc81 !important; /* لون مميز للعناوين */
    margin-bottom: 10px !important; /* إضافة مسافة بين العنوان والمحتوى */
}

/* ✅ ضبط حجم شعار الفوتر */
.img_footer img {
    content: url('https://cdn.prod.website-files.com/66ef0b1d1663e1cc080fdcf8/67dad0a7ddcca055296a465b_Tennis%20zone%20Identity-15.svg') !important; /* ضع رابط الصورة الجديدة هنا */
    width: 120px !important;  /* تعديل عرض الشعار */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important; /* توسيطه في المنتصف */
}

.h-28 {
    height: 3rem;
}

/* ✅ تحسين ترتيب الفوتر على الهواتف */
@media (max-width: 768px) {
    .store-footer__inner {
        display: flex !important;
        flex-direction: column !important; /* ترتيب العناصر فوق بعضها */
        text-align: center !important;
        align-items: center !important;
    }

    .store-footer h3 {
        font-size: 16px !important; /* تصغير العناوين قليلاً للموبايل */
    }

    .store-footer p,
    .store-footer a {
        font-size: 12px !important; /* تصغير النصوص قليلاً */
    }

    .img_footer img {
        width: 120px !important; /* تقليل حجم الشعار على الموبايل */
    }
}

.py-14 {
    padding-top: 0rem;
    padding-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 1.5rem;
}

/* لون النقاط العادية */
.swiper-pagination-bullet {
    background-color: #cdd1cf !important; /* لون النقاط غير النشطة */
    opacity: 0.6;
    width: 10px; /* التحكم في الحجم */
    height: 8px;
    transition: background-color 0.3s ease-in-out;
}

/* لون النقطة النشطة (الحالية) */
.swiper-pagination-bullet-active {
    background-color: #5dc296 !important; /* تغيير اللون للنقطة النشطة */
    opacity: 1;
    transform: scale(1.2); /* تكبير النقطة النشطة */
}

.s-button-element {
    background-color: #ff6600; /* لون الخلفية */
    color: white; /* لون النص */
    border: 2px solid #ff6600; /* لون الإطار */
    font-size: 16px; /* حجم الخط */
    padding: 10px 20px; /* المسافات الداخلية */
    border-radius: 5px; /* زوايا دائرية */
    transition: 0.3s; /* تأثير الانتقال */
}

.s-button-element:hover {
    background-color: #e65c00; /* تغيير لون الخلفية عند التمرير */
    border-color: #e65c00;
}

.icons-cart {
    display: inline-flex;
    align-items: center;
    margin-left: 8px; /* مسافة بين النص والأيقونة */
}

.icons-cart .icon {
    width: 18px; /* حجم الأيقونة */
    height: 18px;
    fill: white; /* لون الأيقونة */
}

/* 1️⃣ إضافة حدود للمنتج */
custom-salla-product-card {
    border: .5px solid #ddd;  /* لون الحدود الأساسي */
    border-radius: 5px;      /* تدوير الحواف */
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    padding: 0px; /* تباعد داخلي */
}

/* 2️⃣ تأثير عند تمرير الماوس */
custom-salla-product-card:hover {
    border-color: #414244;  /* تغيير لون الحدود */
   

}

/* 3️⃣ تأثير عند الضغط */
custom-salla-product-card:active {
    border-color: #414244; /* لون أغمق عند الضغط */
    transform: scale(0.98); /* تصغير العنصر قليلاً */
}



/* التحكم بحجم أيقونة القلب */
.s-product-card-wishlist-btn i.sicon-heart {
    font-size: 22px !important;  /* تأكد من تطبيق الحجم */
    color: #ea1b37 !important;   /* تغيير لون الأيقونة */
    transition: transform 0.2s ease-in-out, color 0.3s ease-in-out;
}

/* عند الضغط، تصغر قليلاً */
.s-product-card-wishlist-btn:active i.sicon-heart {
    transform: scale(0.9);
    color: #ea1b37 !important;
}
/* لون الخلفية */
.s-product-card-vertical .s-product-card-wishlist-btn button {
    border-style: none !important;
    background-color: #ffffff !important;
    padding: 20px !important; /* تحكم في المسافة داخل الخلفية */
    margin-top: -5px;
    margin-left: -5px;
    border-radius: 50% !important; /* اجعل الخلفية دائرية إذا أردت */
}

/* اسم المنتج" */
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
}

/* حاوية المنتج" */
custom-salla-product-card {
    display: flex
;
    justify-content: space-between;
}

.text-primary {
    color: #1eaa6d;
}

.py-14 {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.gap-16 {
    gap: 3rem;
}
.text-title-size {
    font-size: 35px;
}

.gap-3 {
    gap: 1rem;
}

.s-button-element {
    background-color: white;
    color: #ea1b37;
    font-size: 16px;
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 5px;
    transition: 0.3s;
}
.s-button-icon {
    height: 3rem;
    width: 3rem;
}

.s-tabs-active {
    background-color: rgb(226 233 230);
}

.s-tabs-header-item {
    white-space: nowrap;
    padding-left: 0.75rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    line-height: 1rem;
}

.s-button-element {
    border:0px solid #ff6600;
}


.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: unset;
}
.s-add-product-button-mini-checkout-content:where([dir="rtl"], [dir="rtl"] *) {
    flex-direction: row;
}

/* زر "إضافة للسلة" */
#single-btn .s-button-element {
    background-color: #2c2c2e !important; /* لون غامق */
    color: #ffffff !important; /* لون النص أبيض */
    font-size: 16px !important;
    padding: 15px 20px !important;
    margin: 0px;
    border-radius: 8px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* زر "اشتري الآن" */
#single-btn .s-add-product-button-mini-checkout-content {
    background-color: #20b575 !important; /* لون أخضر */
    color: #ffffff !important;
    font-size: 16px !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* إزالة الحدود والظل */
#single-btn .s-button-element,
#single-btn .s-add-product-button-mini-checkout-content {
    border: none !important;
    box-shadow: none !important;
}

/* تحسين شكل الأيقونة داخل زر "اشتري الآن" */
#single-btn .s-add-product-button-mini-checkout-content span {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    
}

.s-add-product-button-main .s-add-product-button-mini-checkout span svg {
    margin-right: 0;
    margin-left: 0.5rem;
    width: 1rem;
    position: relative;
    top: 0px;
    display: none;
}


.whatsapp-btn-container {
    bottom: -0.1rem;
}
.left-4 {
    left: 0.4rem;
}

.container_table tr:nth-child(2n) {
    --tw-bg-opacity: 1;
    background-color: transparent;
}
.container_table tr:nth-child(odd) {
    --tw-bg-opacity: 1;
    background-color: transparent;
}

/* تغيير لون وحجم أيقونة معينة */
.w-24 .sicon-keypad {
    color: #1eaa6d !important; /* تغيير لون أيقونة لوحة الأرقام */
    font-size: 20px !important; /* تكبير حجمها */
}

/* تغيير لون وحجم الأيقونة الثانية */
.w-24 .sicon-list {
    color: orange !important; /* تغيير اللون إلى برتقالي */
    font-size: 20px !important; /* تكبير الحجم */
}
.sicon-list {
    display: none !important; /* إخفاء الأيقونة تمامًا */
}

/* العنوان والوصف للاقسام */
.mb-8 {
    margin-bottom: 0rem;
    padding-right: 1.5rem;
}

/* لون الهيدر للصفحات الفرعية" */
.bg-primary {
    background-color: #f6f6f6;
}



/* ✅ تعديل العنصر الرئيسي */
.s-slider-thumbs {
    padding: 0px !important; /* تعديل الـ Padding */
    margin: 0px auto !important; /* ضبط الـ Margin */
}

/* ✅ تعديل الـ Slider الأساسي */
.s-slider-thumbs .swiper {
    padding: 0px !important; /* تعديل التباعد الداخلي */
    margin-right: 0rem; !important; /* توسيط العنصر أفقيًا */
}

/* ✅ تعديل العناصر الداخلية */
.s-slider-thumbs .swiper-slide {
    padding: 0px !important; /* تباعد داخلي بين العناصر */
    margin: 0px !important; /* تباعد بين كل عنصر */
    width: 90px !important;
    width: 90px /* تكبير حجم العناصر */
}

salla-tab-header[name="tab_two"] {
    display: none !important; /* إخفاء التبويب */
}

.main-content form > div.flex.flex-col.justify-between.items-start.gap-6 {
    display: none !important; /* إخفاء ايقونة تحت الكمية */
}
.sicon-caret-left-double {
    display: none !important; /* إخفاء العنصر */
}