/* =========================================================
   ZNILATHOSS SPORTS
   PREVIOUS RESULTS
   النتائج السابقة
   ========================================================= */


/* =========================================================
   الحاوية الرئيسية
   ========================================================= */

#previous-results-container {

    width: 100%;

    box-sizing: border-box;

}


/* =========================================================
   القسم
   ========================================================= */

.zn-previous-results {

    width: 100%;

    box-sizing: border-box;

    padding: 16px;

    margin: 0 auto;

}


/* =========================================================
   رأس القسم
   ========================================================= */

.zn-previous-results-header {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-bottom: 18px;

    text-align: center;

}


/* =========================================================
   العنوان
   ========================================================= */

.zn-previous-results-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: 22px;

    font-weight: 800;

}


.zn-previous-results-title-icon {

    font-size: 22px;

}


/* =========================================================
   الوصف
   ========================================================= */

.zn-previous-results-subtitle {

    font-size: 13px;

    opacity: 0.75;

}


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

.zn-previous-results-selector {

    width: 100%;

    display: flex;

    align-items: end;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    box-sizing: border-box;

    margin-bottom: 12px;

}


/* =========================================================
   الحقل
   ========================================================= */

.zn-previous-results-field {

    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 110px;

}


.zn-previous-results-field label {

    font-size: 13px;

    font-weight: 700;

    text-align: center;

}


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

.zn-previous-results-field select {

    height: 42px;

    min-width: 110px;

    padding: 0 10px;

    border: 1px solid rgba(
        128,
        128,
        128,
        0.35
    );

    border-radius: 9px;

    background: inherit;

    color: inherit;

    font-size: 14px;

    font-family: inherit;

    outline: none;

    cursor: pointer;

    box-sizing: border-box;

}


.zn-previous-results-field select:focus {

    border-color: currentColor;

}


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

.zn-previous-results-button {

    min-height: 42px;

    padding: 0 18px;

    border: none;

    border-radius: 9px;

    background: #c40000;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    transition:

        transform 0.15s ease,

        opacity 0.15s ease;

}


.zn-previous-results-button:hover {

    transform: translateY(-1px);

}


.zn-previous-results-button:active {

    transform: translateY(0);

}


.zn-previous-results-button:disabled {

    opacity: 0.65;

    cursor: wait;

    transform: none;

}


/* =========================================================
   Spinner
   ========================================================= */

.zn-previous-results-spinner {

    display: inline-block;

    font-size: 18px;

    animation:
        znPreviousResultsSpin
        0.8s linear infinite;

}


@keyframes znPreviousResultsSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   الحالة
   ========================================================= */

.zn-previous-results-status {

    width: 100%;

    min-height: 22px;

    box-sizing: border-box;

    margin: 8px 0 14px;

    text-align: center;

    font-size: 13px;

    opacity: 0.8;

}


.zn-previous-results-status.is-success {

    opacity: 1;

}


.zn-previous-results-status.is-error {

    opacity: 1;

}


.zn-previous-results-status.is-empty {

    opacity: 0.8;

}


/* =========================================================
   محتوى النتائج
   ========================================================= */

.zn-previous-results-content {

    width: 100%;

    box-sizing: border-box;

}


/* =========================================================
   حاوية بطاقات المباريات
   ========================================================= */

.zn-previous-results-matches {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/*
 * مهم:
 * لا نضع هنا CSS خاصًا بـ
 * .zn-match-card
 *
 * لأن تصميم بطاقة المباراة
 * مسؤول عنه match-card.css / style.css.
 */


/* =========================================================
   لا توجد نتائج
   ========================================================= */

.zn-previous-results-empty {

    width: 100%;

    min-height: 120px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 20px;

    box-sizing: border-box;

    border: 1px dashed rgba(
        128,
        128,
        128,
        0.4
    );

    border-radius: 12px;

    text-align: center;

    font-size: 14px;

    opacity: 0.8;

}


.zn-previous-results-empty-icon {

    font-size: 28px;

}


/* =========================================================
   الخطأ
   ========================================================= */

.zn-previous-results-error {

    width: 100%;

    min-height: 120px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 20px;

    box-sizing: border-box;

    border: 1px solid rgba(
        196,
        0,
        0,
        0.35
    );

    border-radius: 12px;

    text-align: center;

    font-size: 14px;

}


.zn-previous-results-error-icon {

    font-size: 28px;

}


/* =========================================================
   الحواشي
   ========================================================= */

.zn-previous-results * {

    box-sizing: border-box;

}


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

@media (
    max-width: 700px
) {

    .zn-previous-results {

        padding: 12px;

    }


    .zn-previous-results-title {

        font-size: 19px;

    }


    .zn-previous-results-selector {

        display: grid;

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

        align-items: end;

        gap: 7px;

    }


    .zn-previous-results-field {

        min-width: 0;

        width: 100%;

    }


    .zn-previous-results-field select {

        width: 100%;

        min-width: 0;

        height: 40px;

        padding: 0 6px;

        font-size: 13px;

    }


    .zn-previous-results-button {

        grid-column:
            1 / -1;

        width: 100%;

        min-height: 42px;

    }

}


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

@media (
    max-width: 380px
) {

    .zn-previous-results {

        padding: 9px;

    }


    .zn-previous-results-selector {

        grid-template-columns:
            1fr;

    }


    .zn-previous-results-field {

        width: 100%;

    }


    .zn-previous-results-button {

        grid-column:
            auto;

    }

}