/* 1. إخفاء الخط السفلي الافتراضي لحاوية التبويبات في ثيم رائد وتوسيطها */
.s-tabs-nav, .s-tabs-header {
    border-bottom: none !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* 2. تحويل النص إلى زر بيضاوي (الوضع العادي) */
.s-tabs-btn, 
.s-block-tabs .s-tabs-btn,
.salla-tabs-nav .s-tabs-btn {
    border-radius: 50px !important; /* تدوير الحواف بالكامل */
    border: 1px solid #1c1c28 !important; /* لون الإطار الخارجي */
    background-color: transparent !important; /* خلفية شفافة */
    color: #1c1c28 !important; /* لون النص الافتراضي */
    padding: 10px 25px !important;
    margin: 5px !important;
    font-weight: bold !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

/* 3. إخفاء الخط الصغير الذي يظهر تحت التبويب النشط في ثيم رائد */
.s-tabs-btn::before, 
.s-tabs-btn::after {
    display: none !important;
}

/* 4. تخصيص الزر المفتوح حالياً (النشط) بلون هوية "حي" */
.s-tabs-btn.is-active, 
.s-block-tabs .s-tabs-btn.is-active,
.salla-tabs-nav .s-tabs-btn.is-active {
    background-color: #2c4a3b !important; /* يمكنك تغيير هذا اللون إلى اللون الدقيق لشعارك */
    color: #ffffff !important; /* لون النص أبيض */
    border-color: #2c4a3b !important; /* توحيد الإطار مع الخلفية */
}

/* تأثير عند تمرير الماوس */
.s-tabs-btn:hover:not(.is-active) {
    background-color: #f3f4f6 !important;
}