/*
|--------------------------------------------------------------------------
| Tabs
|--------------------------------------------------------------------------
*/

.match-single-tabs {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;

    gap: 4px;
    padding: 0 10px;
    height: 52px;

    overflow-x: auto;
    scrollbar-width: none;
}

.match-single-tabs::-webkit-scrollbar {
    display: none;
}

.match-single-tab {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 85px;
    height: 52px;

    padding: 0 10px;

    background: none;
    border: none;
    cursor: pointer;

    font-size: 16px;
     font-weight: 700;
    color: #666;
    white-space: nowrap;

    transition: .2s;
}

.match-single-tab:hover{

    color:#008F4C;
  font-size: 16px;
     font-weight: 700;
}

.match-single-tab.active{

    color:#008F4C;

     font-size: 16px;
     font-weight: 700;

}

.match-single-tab.active {
    color: #008F4C;
      font-size: 16px;
     font-weight: 700;

    text-decoration-line: underline;
    text-decoration-color: #0a8f43;
    text-decoration-thickness: 2px;
    text-underline-offset: 21px;
    text-decoration-skip-ink: none;
}

@media (max-width: 767px) {

    .match-single-tabs {
        justify-content: space-between;
        gap: 0;
        padding: 0 6px;
        height: 52px;
    }

    .match-single-tab {
        flex: 1;
        min-width: 0;
        height: 52px;

        padding: 0 5px;
        font-size: 10px;
    }

}

/* نفس حجم تبويبات صفحة المنافسة */
.match-single-tabs {
    gap: 4px;
    padding: 0 6px;
}

.match-single-tab {
    min-width: 70px;
    padding: 0 6px;
    font-size: 14px;
}

/* الهاتف */
@media (max-width: 700px) {

    .match-single-tabs {
        height: 58px;
        gap: 4px;
        padding: 0 1px;
    }

    .match-single-tab {
        flex: 0 0 auto;
        min-width: 70px;
        height: 58px;
        padding: 0 6px;
        font-size: 13px;
    }

}

/* الهاتف الصغير */
@media (max-width: 420px) {

    .match-single-tab {
        min-width: 0;
        padding: 0 4px;
        font-size: 11px;
    }

}

/* تحريك تبويبات المباراة لليسار */
.match-single-tabs {
   margin-right: 3px;
}



/* الهاتف */
@media (max-width: 767px) {

    .match-single-tabs {
        transform: translateX(-5px);
    }


}

@media (max-width: 767px) {

    .match-single-tabs {
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        transform: translateX(-5px);
    }

    .match-single-tab {
        flex: 0 0 auto;
        min-width: 0;
        padding: 0 8px;
        font-size: 13px;
    }

}

@media (max-width: 767px) {

    .match-single-tabs {
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        margin-right: 10px;
    }

    .match-single-tab {
  flex: 0 0 auto;
        min-width: 0;
        width: auto;

        padding: 0 3px;
        margin: 0;

        font-size: 12px;
    }


}

/* الهاتف */
@media (max-width: 767px) {

    .match-single-tab.active {
        text-underline-offset: 17px;
        text-decoration-thickness: 2px;
            text-underline-offset: 24px;
    }

}

/* =========================================
   Match Tabs - Full Width & Centered
========================================= */

.match-single-tabs {
    /* الشريط يمتد من حافة الشاشة إلى الحافة الأخرى */
    width: 100vw;
    max-width: none;
    box-sizing: border-box;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* توسيط التبويبات */
    display: flex;
    justify-content: center;
    align-items: stretch;

    /* إلغاء الإزاحات القديمة */
    transform: none;

    /* خلفية الشريط */
    background: #F5F6F8;

    /* الحفاظ على التمرير عند الحاجة */
    overflow-x: auto;
    overflow-y: hidden;
}

/* شكل التبويبات */
.match-single-tabs .match-single-tab {
    flex: 0 0 auto;
}

/* التبويب النشط */
.match-single-tabs .match-single-tab.active {
    color: #008F4C;
    font-weight: 700;

    text-decoration-line: underline;
    text-decoration-color: #000000;
    text-decoration-thickness: 2px;
    text-underline-offset: 21px;
    text-decoration-skip-ink: none;
}

/* الهاتف */
@media (max-width: 767px) {
    .match-single-tabs {
        justify-content: flex-start;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 0 8px;
        transform: none;
    }

    .match-single-tabs .match-single-tab {
        flex: 0 0 auto;
        padding: 0 10px;
        font-size: 12px;
    }

    .match-single-tabs .match-single-tab.active {
        text-underline-offset: 24px;
    }
}

/* =========================================
   Match Tabs - Dark Background
========================================= */

.match-single-tabs {
    background: #ffffff;
}

/* لون التبويبات */
.match-single-tabs .match-single-tab {
    color: #020202;
}

/* عند مرور المؤشر */
.match-single-tabs .match-single-tab:hover {
    color: #16A34A;
}

/* التبويب النشط */
.match-single-tabs .match-single-tab.active {
    color: #16A34A;
    font-weight: 700;

    text-decoration-color: #008F4C;
}

/* الحفاظ على الخلفية الداكنة في الهاتف */
@media (max-width: 767px) {
    .match-single-tabs {
        background: #ffffff;
    }
}

/* مسافة أسفل شريط التبويبات */
.match-single-tabs {
    margin-bottom: 18px;
}

/* =========================================
   Match Tabs - Bottom Border & Active Color
========================================= */

/* خط أسود على الحافة السفلية للشريط */
.match-single-tabs {
    border-bottom: 1px solid #e5e7eb;
    box-sizing: border-box;
}

/* إزالة الخط تحت التبويب النشط */
.match-single-tabs .match-single-tab.active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    box-shadow: none !important;

    /* تغيير لون اسم التبويب النشط فقط */
    color: #008F4C;
}

/* منع ظهور أي خط عند المرور بالمؤشر */
.match-single-tabs .match-single-tab:hover {
    text-decoration: none;
}

/* =========================================
   Match Tabs - Final Borders
========================================= */

/* الخط السفلي للشريط */
.match-single-tabs {
    border-bottom: 1px solid #E5E7EB;
}

/* التبويب النشط */
.match-single-tabs .match-single-tab.active {
    color: #020202;

    /* إعادة الخط الأخضر تحت التبويب */
    border-bottom: 3px solid #008F4C !important;

    /* إلغاء أي خط زخرفي قديم */
    text-decoration: none !important;
    box-shadow: none !important;
}

/* بقية التبويبات دون خط */
.match-single-tabs .match-single-tab:not(.active) {
    border-bottom: 2px solid transparent;
    text-decoration: none;
}

/* =========================================
   Match Tabs - Visible Horizontal Scrollbar
========================================= */

.match-single-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: thin;
    scrollbar-color: #9ca3af #f1f1f1;
}

/* Chrome / Edge */
.match-single-tabs::-webkit-scrollbar {
    display: block !important;
    height: 5px;
}

.match-single-tabs::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.match-single-tabs::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 10px;
}

.match-single-tabs::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}



/* ==================================================
   Match Single Tabs
   Mobile: Horizontal Scroll + Green Scrollbar
   Active Tab: Green, without underline
   ================================================== */

/* Desktop: keep tabs on one line */
.match-single-tabs {
    display: flex;
    align-items: stretch;
}

/* Hide the active-tab underline */
.match-single-tabs .match-single-tab.active::after {
    display: none !important;
    content: none !important;
}

/* Mobile */
@media (max-width: 767px) {

    .match-single-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;

        gap: 8px !important;
        padding: 0 12px !important;
        box-sizing: border-box;

        /* Green horizontal scrollbar */
        scrollbar-width: thin !important;
        scrollbar-color: #008F4C transparent !important;
    }

    /* Chromium / Android */
    .match-single-tabs::-webkit-scrollbar {
        height: 4px !important;
        display: block !important;
    }

    .match-single-tabs::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .match-single-tabs::-webkit-scrollbar-thumb {
        background-color: #008F4C !important;
        border-radius: 10px !important;
    }

    .match-single-tabs .match-single-tab {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;

        padding: 0 12px !important;
        white-space: nowrap !important;

        border: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    /* Active tab */
    .match-single-tabs .match-single-tab.active {
        color: #008F4C !important;
        border: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .match-single-tabs .match-single-tab.active::after {
        display: none !important;
        content: none !important;
    }
}




/* Native horizontal scrollbar for match tabs */
@media (max-width: 767px) {
    .match-single-tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: auto !important;
        scrollbar-color: #008F4C transparent !important;
        padding-bottom: 0 !important;
    }

    .match-single-tabs::-webkit-scrollbar {
        display: block !important;
        height: 8px !important;
    }

    .match-single-tabs::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .match-single-tabs::-webkit-scrollbar-thumb {
        background: #008F4C !important;
        border-radius: 10px !important;
    }

    .match-tabs-scroll-indicator {
        display: none !important;
    }
}

/* Match tabs: custom mobile scroll indicator */
@media (max-width: 767px) {
    .match-single-tabs {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .match-single-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .match-tabs-scroll-indicator {
        position: relative;
        width: 100vw;
        height: 4px;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        background: #e5e7eb;
        overflow: hidden;
        pointer-events: none;
    }

    .match-tabs-scroll-thumb {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #008F4C;
        border-radius: 10px;
        transition: left 0.04s linear, width 0.04s linear;
    }
}

@media (min-width: 768px) {
    .match-tabs-scroll-indicator {
        display: none !important;
    }
}

/* Fix: make the custom match-tabs indicator visible */
@media (max-width: 767px) {
    .match-tabs-scroll-indicator {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 5px !important;
        margin: -18px 0 18px !important;
        background: #e5e7eb !important;
        overflow: hidden !important;
        z-index: 10 !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    .match-tabs-scroll-thumb {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        height: 5px !important;
        background: #008F4C !important;
        border-radius: 5px !important;
    }
}


/* Match tabs — same underline effect as the main header */

.match-single-tabs .match-single-tab {
    position: relative;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

/* الخط مخفي افتراضيًا */
.match-single-tabs .match-single-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    margin: auto;
    background: #008F4C;
    transition: width 0.2s ease;
}

/* يظهر الخط عند تمرير الماوس */
.match-single-tabs .match-single-tab:hover::after {
    width: 100%;
}

/* يبقى الخط تحت التبويب النشط */
.match-single-tabs .match-single-tab.active::after {
    width: 100%;
}

/* لون النص */
.match-single-tabs .match-single-tab:hover,
.match-single-tabs .match-single-tab.active {
    color: #008F4C !important;
}

/* منع تغيّر حجم النص عند المرور */
.match-single-tabs .match-single-tab,
.match-single-tabs .match-single-tab:hover,
.match-single-tabs .match-single-tab.active {
    font-size: 14px;
    font-weight: 700;
}


/* الهاتف: خط تحت التبويب النشط وعند المرور */
@media (max-width: 767px) {

    .match-single-tabs {
        scrollbar-width: none !important;
    }

    .match-single-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .match-tabs-scroll-indicator {
        display: none !important;
    }

    .match-single-tabs .match-single-tab {
        position: relative !important;
        padding-bottom: 8px !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .match-single-tabs .match-single-tab::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 0;
        height: 3px !important;
        margin: auto;
        background: #008F4C !important;
        transition: width 0.2s ease;
    }

    .match-single-tabs .match-single-tab:hover::after,
    .match-single-tabs .match-single-tab.active::after {
        width: 100% !important;
    }
}