/* =========================================================
   آخر 5 مباريات
   ========================================================= */

.overview-form {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0;

    width: 100%;


} 

.overview-title {

       display:flex;

    align-items:center;


    gap:8px;
    font-size: 18px;
    font-weight: 500;
    padding-bottom:14px;

    margin-bottom:18px;
     border-bottom:1px solid #f3f4f6;
}

/* البطاقة الرئيسية */
.overview-form-widget {
    border-radius: 20px;
    overflow: hidden;
       margin-bottom: 18px;
}


/* =========================================================
   عمود الفريق
   ========================================================= */

.team-form {
    display: flex;
    flex-direction: column;

    align-items: stretch;

    padding: 0 28px;
}

.team-form.home {
    border-left: 1px solid #e5e7eb;
}

.team-form.away {
    border-left: 0;
}


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

.team-form-title {

    margin: 0;

    padding: 8px 0 16px;

    text-align: center;

    font-size: 15px;

    font-weight: 600;

    color: #111827;

    border-bottom: 1px solid #f3f4f6;
}


/* =========================================================
   قائمة المباريات
   ========================================================= */

.team-form-list {
    width: 100%;
}


/* =========================================================
   المباراة
   ========================================================= */

.form-match {

    display: flex;

    align-items: center;

    justify-content: center;

    direction: rtl;

    width: 100%;

    min-height: 58px;

    box-sizing: border-box;

    padding: 8px 4px;

    margin: 0;

    gap: 14px;

    text-decoration: none;

    border-bottom: 1px solid #edf0f2;

    border-radius: 0;

    transition: background .2s ease;
}


/* آخر مباراة بدون خط */
.form-match:last-child {
    border-bottom: 0;
}


/* =========================================================
   الفريق
   ========================================================= */

.form-team {

    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;

    flex: 1;

    font-size: 13px;

    font-weight: 500;

    color: #111827;

    white-space: nowrap;
}


/*
 * صاحب الأرض:
 * الاسم ثم الشعار
 */

.home-team {
    justify-content: flex-end;

    text-align: right;
}


/*
 * الضيف:
 * الشعار ثم الاسم
 */

.away-team {
    justify-content: flex-start;

    text-align: left;
}


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

.form-team-name {

    display: inline-block;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   الشعارات
   ========================================================= */

.form-team-logo {

    width: 30px;

    height: 30px;

    flex: 0 0 30px;

    object-fit: contain;
}


/* =========================================================
   النتيجة
   ========================================================= */

.form-score {

    flex: 0 0 auto;

    min-width: 58px;

    padding: 7px 10px;

    box-sizing: border-box;

    text-align: center;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 600;

    color: #fff;
}


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

.form-w .form-score {
    background: #16a34a;
}

.form-d .form-score {
    background: #6b7280;
}

.form-l .form-score {
    background: #dc2626;
}


/* =========================================================
   Hover
   ========================================================= */

.form-match:hover {
    background: #f8fafc;
}


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

@media (max-width: 767px) {

    .overview-form {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .team-form {

        padding: 0;
    }


    .team-form.home {

        border-left: 0;

        border-bottom: 1px solid #e5e7eb;

        padding-bottom: 20px;
    }


    .team-form-title {

        font-size: 14px;

        padding-bottom: 12px;
    }


    .form-match {

        gap: 10px;

        min-height: 54px;
    }


    .form-team-name {

        display: none;
    }


    .form-team {

        justify-content: center;

        flex: 1;
    }


    .form-team-logo {

        width: 28px;

        height: 28px;

        flex-basis: 28px;
    }


    .form-score {

        min-width: 54px;

        padding: 6px 8px;

        font-size: 14px;
    }

}

.team-form-order {
    display: flex;

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

    gap: 6px;

    padding: 14px 0 4px;

    color: #9ca3af;

    font-size: 13px;

    font-weight: 400;
}

.team-form-order span {
    font-size: 17px;
    line-height: 1;
}

/* آخر 5 مباريات - توحيد العرض في الهاتف */
@media (max-width: 768px) {

    .match-page .match-content .overview-form-widget {
        width: calc(100vw - 30px) !important;
        max-width: none !important;

        margin-left: calc((100% - (100vw - 30px)) / 2) !important;
        margin-right: calc((100% - (100vw - 30px)) / 2) !important;

        box-sizing: border-box !important;
    }

}

/* =========================================================
   الفرنسية - LTR
   ========================================================= */

.overview-form--fr {
    direction: ltr;
}


/* =========================================================
   عنوان القسم
   ========================================================= */

.match-single-card--fr .overview-title {
    direction: ltr;
    justify-content: flex-start;
    text-align: left;
}


/* =========================================================
   ترتيب الأعمدة
   ========================================================= */

.overview-form--fr .team-form.home {
    order: 1;
    border-left: 0;
    border-right: 1px solid #e5e7eb;
}

.overview-form--fr .team-form.away {
    order: 2;
    border-left: 0;
    border-right: 0;
}


/* =========================================================
   مباريات كل فريق
   ========================================================= */

.overview-form--fr .form-match {
    direction: ltr;
}


/* صاحب الأرض: الاسم ثم الشعار */

.overview-form--fr .home-team {
    justify-content: flex-end;
    text-align: right;
}

.overview-form--fr .away-team {
    justify-content: flex-start;
    text-align: left;
}

.overview-form-widget--fr .overview-title {
    direction: ltr;
    justify-content: flex-start;
    text-align: left;
    margin-right: auto;
    margin-left: 0;
}