/* =========================================================
   ZNILATHOSS SPORTS
   STANDINGS DROPDOWN CSS
   ---------------------------------------------------------
   نسخة ثابتة وقوية
   - إخفاء select الأصلي
   - إظهار القائمة المنسدلة فقط عند الضغط
   - منع ظهور 1239 بطولة داخل الصفحة
   - البحث
   - التمرير
   - RTL
   - متوافق مع standings-dropdown.js
   ========================================================= */


/* =========================================================
   1. إخفاء SELECT الأصلي
   ========================================================= */

select.zn-native-select-hidden {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    min-width: 1px !important;
    min-height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    border: 0 !important;

    opacity: 0 !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    pointer-events: none !important;

}


/* =========================================================
   2. CONTROLS
   ========================================================= */

.season-controls {

    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 16px !important;

    position: relative !important;

    overflow: visible !important;

    z-index: 1000 !important;

}


.season-control {

    width: 100% !important;

    min-width: 0 !important;

    position: relative !important;

    overflow: visible !important;

    z-index: 1001 !important;

}


/* =========================================================
   3. CUSTOM DROPDOWN
   ========================================================= */

.zn-standings-dropdown {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

    z-index: 5000 !important;

}


/* =========================================================
   4. MAIN BUTTON
   ========================================================= */

.zn-standings-dropdown-button {

    position: relative !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 50px !important;

    padding: 12px 15px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    border: 1px solid #d1d5db !important;

    border-radius: 12px !important;

    background: #ffffff !important;

    color: #111827 !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    line-height: 1.4 !important;

    text-align: right !important;

    cursor: pointer !important;

    outline: none !important;

}


.zn-standings-dropdown-button:hover {

    border-color: #2563eb !important;

    background: #f8fafc !important;

}


.zn-standings-dropdown.open
.zn-standings-dropdown-button {

    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12) !important;

}


/* =========================================================
   5. BUTTON TEXT
   ========================================================= */

.zn-standings-dropdown-text {

    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;

    text-align: right !important;

}


/* =========================================================
   6. ARROW
   ========================================================= */

.zn-standings-dropdown-arrow {

    display: flex !important;

    flex: 0 0 28px !important;

    align-items: center !important;

    justify-content: center !important;

    width: 28px !important;

    height: 28px !important;

    margin-right: 8px !important;

    border-radius: 8px !important;

    background: #f1f5f9 !important;

    color: #334155 !important;

    font-size: 18px !important;

    line-height: 1 !important;

    transition:
        transform 0.2s ease,
        background 0.2s ease !important;

}


.zn-standings-dropdown.open
.zn-standings-dropdown-arrow {

    transform: rotate(180deg) !important;

    background: #dbeafe !important;

    color: #2563eb !important;

}


/* =========================================================
   7. MENU
   ---------------------------------------------------------
   أهم جزء في الإصلاح
   القائمة مخفية تمامًا حتى الضغط
   ========================================================= */

.zn-standings-dropdown-menu {

    position: absolute !important;

    top: calc(100% + 8px) !important;

    right: 0 !important;

    left: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    display: none !important;

    box-sizing: border-box !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 1px solid #d1d5db !important;

    border-radius: 14px !important;

    background: #ffffff !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.18) !important;

    overflow: hidden !important;

    z-index: 999999 !important;

}


/* =========================================================
   8. فتح القائمة
   ========================================================= */

.zn-standings-dropdown.open
.zn-standings-dropdown-menu {

    display: block !important;

}


/* =========================================================
   9. SEARCH
   ========================================================= */

.zn-standings-dropdown-search {

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 10px !important;

    margin: 0 !important;

    border-bottom: 1px solid #e5e7eb !important;

    background: #ffffff !important;

}


.zn-standings-dropdown-search-input {

    display: block !important;

    width: 100% !important;

    height: 42px !important;

    box-sizing: border-box !important;

    padding: 8px 12px !important;

    margin: 0 !important;

    border: 1px solid #d1d5db !important;

    border-radius: 10px !important;

    outline: none !important;

    background: #f8fafc !important;

    color: #111827 !important;

    font-family: inherit !important;

    font-size: 14px !important;

    text-align: right !important;

}


.zn-standings-dropdown-search-input:focus {

    border-color: #2563eb !important;

    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10) !important;

}


/* =========================================================
   10. ITEMS CONTAINER
   ---------------------------------------------------------
   البطولات تظهر هنا فقط
   ========================================================= */

.zn-standings-dropdown-items {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    max-height: 360px !important;

    box-sizing: border-box !important;

    padding: 6px !important;

    margin: 0 !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

}


/* =========================================================
   11. منع أي CSS عام من جعل العناصر أفقية/عمودية بشكل خاطئ
   ========================================================= */

.zn-standings-dropdown-items
.zn-standings-dropdown-item {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-start !important;

}


/* =========================================================
   12. SCROLLBAR
   ========================================================= */

.zn-standings-dropdown-items::-webkit-scrollbar {

    width: 7px !important;

}


.zn-standings-dropdown-items::-webkit-scrollbar-track {

    background: transparent !important;

}


.zn-standings-dropdown-items::-webkit-scrollbar-thumb {

    background: #cbd5e1 !important;

    border-radius: 20px !important;

}


.zn-standings-dropdown-items::-webkit-scrollbar-thumb:hover {

    background: #94a3b8 !important;

}


/* =========================================================
   13. LEAGUE / SEASON ITEM
   ========================================================= */

.zn-standings-dropdown-item {

    width: 100% !important;

    min-width: 0 !important;

    min-height: 44px !important;

    box-sizing: border-box !important;

    padding: 9px 12px !important;

    margin: 2px 0 !important;

    border: 0 !important;

    border-radius: 9px !important;

    background: transparent !important;

    color: #1e293b !important;

    font-family: inherit !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;

    text-align: right !important;

    cursor: pointer !important;

    white-space: nowrap !important;

}


.zn-standings-dropdown-item:hover {

    background: #eff6ff !important;

    color: #1d4ed8 !important;

}


.zn-standings-dropdown-item.selected {

    background: #dbeafe !important;

    color: #1d4ed8 !important;

    font-weight: 800 !important;

}


/* =========================================================
   14. ITEM TEXT
   ========================================================= */

.zn-standings-dropdown-item-text {

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;

    text-align: right !important;

}


/* =========================================================
   15. EMPTY
   ========================================================= */

.zn-standings-dropdown-empty {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    min-height: 80px !important;

    box-sizing: border-box !important;

    padding: 20px !important;

    color: #64748b !important;

    font-size: 13px !important;

    text-align: center !important;

}


/* =========================================================
   16. SEASON DISABLED
   ========================================================= */

.zn-standings-dropdown[data-type="season"]
.zn-standings-dropdown-button {

    opacity: 0.55 !important;

}


.season-control:has(
    #seasonSelect:not(:disabled)
)
.zn-standings-dropdown[data-type="season"]
.zn-standings-dropdown-button {

    opacity: 1 !important;

}


/* =========================================================
   17. IMPORTANT
   منع ظهور القائمة خارج dropdown
   ========================================================= */

.zn-standings-dropdown
.zn-standings-dropdown-items {

    position: relative !important;

}


/* =========================================================
   18. STANDINGS SECTION
   ========================================================= */

#standings-section {

    position: relative !important;

    overflow: visible !important;

}


#standings-section .season-controls {

    position: relative !important;

    overflow: visible !important;

}


#standings-section .season-control {

    position: relative !important;

    overflow: visible !important;

}


/* =========================================================
   19. RTL
   ========================================================= */

[dir="rtl"]
.zn-standings-dropdown {

    direction: rtl !important;

}


[dir="rtl"]
.zn-standings-dropdown-button {

    direction: rtl !important;

}


[dir="rtl"]
.zn-standings-dropdown-item {

    direction: rtl !important;

}


[dir="rtl"]
.zn-standings-dropdown-search-input {

    direction: rtl !important;

}


/* =========================================================
   20. MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .season-controls {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }


    .zn-standings-dropdown-button {

        min-height: 48px !important;

        font-size: 13px !important;

    }


    .zn-standings-dropdown-items {

        max-height: 300px !important;

    }


    .zn-standings-dropdown-menu {

        max-height: 360px !important;

    }

}


/* =========================================================
   21. DARK MODE
   ========================================================= */

@media (prefers-color-scheme: dark) {

    .zn-standings-dropdown-button {

        background: #111827 !important;

        border-color: #374151 !important;

        color: #ffffff !important;

    }


    .zn-standings-dropdown-button:hover {

        background: #1f2937 !important;

    }


    .zn-standings-dropdown-menu {

        background: #0f172a !important;

        border-color: #334155 !important;

    }


    .zn-standings-dropdown-search {

        background: #0f172a !important;

        border-bottom-color: #334155 !important;

    }


    .zn-standings-dropdown-search-input {

        background: #111827 !important;

        border-color: #374151 !important;

        color: #ffffff !important;

    }


    .zn-standings-dropdown-item {

        color: #e5e7eb !important;

    }


    .zn-standings-dropdown-item:hover {

        background: #1e3a8a !important;

        color: #ffffff !important;

    }


    .zn-standings-dropdown-item.selected {

        background: #1e40af !important;

        color: #ffffff !important;

    }

}


/* =========================================================
   END
   ========================================================= */