/* =========================================================
   ZNILATHOSS SPORTS
   DATE SELECTOR
   اختيار التاريخ داخل القائمة
   ========================================================= */


/* =========================================================
   منطقة اختيار التاريخ
   ========================================================= */

.sidebar-date-section {

    width: 100%;

    margin: 0 0 18px;

    padding: 0;

}


/* =========================================================
   زر اختيار التاريخ
   ========================================================= */

.sidebar-date-toggle {

    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 12px 16px;

    border: none;

    border-radius: 12px;

    background: #ffffff;

    color: #0b1f3a;

    font-size: 16px;

    font-weight: 700;

    font-family: inherit;

    cursor: pointer;

    text-align: right;

    box-sizing: border-box;

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

}


/* عند المرور */

.sidebar-date-toggle:hover {

    background: #8be34f;

}


/* عند الضغط */

.sidebar-date-toggle:active {

    transform: scale(0.98);

}


/* عند فتح الاختيار */

.sidebar-date-toggle.active {

    background: #8be34f;

}


/* =========================================================
   حاوية اختيار التاريخ
   ========================================================= */

#date-selector-container {

    width: 100%;

    margin-top: 12px;

    box-sizing: border-box;

}


/* =========================================================
   منع ظهور الحاوية عندما تكون hidden
   ========================================================= */

#date-selector-container[hidden] {

    display: none !important;

}


/* =========================================================
   بطاقة اختيار التاريخ
   ========================================================= */

.date-selector {

    width: 100%;

    padding: 16px;

    border-radius: 14px;

    background: #ffffff;

    color: #0b1f3a;

    box-sizing: border-box;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.18);

}


/* =========================================================
   عنوان اختيار التاريخ
   ========================================================= */

.date-selector-title {

    margin: 0 0 14px;

    font-size: 16px;

    font-weight: 700;

    text-align: right;

}


/* =========================================================
   عناصر اختيار التاريخ
   ========================================================= */

.date-selector-row {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

}


/* =========================================================
   Labels
   ========================================================= */

.date-selector-field {

    min-width: 0;

}


.date-selector-field label {

    display: block;

    margin-bottom: 6px;

    font-size: 13px;

    font-weight: 700;

    text-align: right;

}


/* =========================================================
   Select
   ========================================================= */

.date-selector-field select {

    width: 100%;

    min-width: 0;

    min-height: 42px;

    padding: 8px 7px;

    border: 1px solid #d5dbe3;

    border-radius: 9px;

    background: #ffffff;

    color: #0b1f3a;

    font-family: inherit;

    font-size: 14px;

    box-sizing: border-box;

    cursor: pointer;

}


/* =========================================================
   زر عرض النتائج
   ========================================================= */

.date-selector-button {

    width: 100%;

    min-height: 44px;

    margin-top: 14px;

    padding: 10px 14px;

    border: none;

    border-radius: 10px;

    background: #0b1f3a;

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

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

}


.date-selector-button:hover {

    background: #17365f;

}


.date-selector-button:active {

    transform: scale(0.98);

}


/* =========================================================
   الهاتف
   ========================================================= */

@media (max-width: 600px) {

    .sidebar-date-toggle {

        min-height: 46px;

        font-size: 15px;

    }


    .date-selector {

        padding: 14px;

    }


    .date-selector-row {

        gap: 7px;

    }


    .date-selector-field select {

        min-height: 40px;

        font-size: 13px;

    }

}


/* =========================================================
   الهاتف الصغير
   ========================================================= */

@media (max-width: 380px) {

    .date-selector {

        padding: 12px;

    }


    .date-selector-row {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .date-selector-field select {

        font-size: 14px;

    }

}


/* =========================================================
   تقليل الحركة
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sidebar-date-toggle,
    .date-selector-button {

        transition: none;

    }

}