/* =========================================================
   ZNILATHOSS SPORTS
   MATCH CARD
   ========================================================= */

.zn-match-card {

    width: 100%;

    box-sizing: border-box;

    padding: 14px;

    margin-bottom: 12px;

    background: #ffffff;

    border: 1px solid #e1e5eb;

    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06);

    direction: rtl;

}


/* =========================================================
   البطولة
   ========================================================= */

.zn-match-league {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-bottom: 12px;

    font-size: 13px;

    color: #667085;

}


.zn-match-league-logo {

    width: 22px;

    height: 22px;

    object-fit: contain;

}


.zn-match-league-name {

    font-weight: 700;

}


.zn-match-country {

    color: #98a2b3;

}


/* =========================================================
   المحتوى الأفقي
   ========================================================= */

.zn-match-horizontal {

    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 14px;

}


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

.zn-match-team {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;

}


.zn-match-team-home {

    justify-content: flex-start;

}


.zn-match-team-away {

    justify-content: flex-end;

}


.zn-match-team-logo {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    object-fit: contain;

}


.zn-match-team-name {

    min-width: 0;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.3;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* =========================================================
   الوسط
   ========================================================= */

.zn-match-center {

    min-width: 75px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

}


.zn-match-time {

    font-size: 21px;

    font-weight: 800;

    line-height: 1;

    color: #111827;

}


.zn-match-status {

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

}


/* =========================================================
   الحالات
   ========================================================= */

.zn-status-upcoming {

    color: #64748b;

}


.zn-status-live {

    color: #dc2626;

}


.zn-status-finished {

    color: #16a34a;

}


.zn-status-postponed {

    color: #d97706;

}


.zn-match-card.is-live {

    border-color: #fca5a5;

}


.zn-match-card.is-live
.zn-match-time {

    color: #dc2626;

}


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

.zn-match-date {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 13px;

    padding-top: 10px;

    border-top: 1px solid #edf0f4;

    font-size: 13px;

    font-weight: 600;

    color: #475467;

    text-align: center;

}


.zn-match-date-icon {

    font-size: 14px;

}


.zn-match-date-full {

    white-space: nowrap;

}


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

.zn-match-date-numeric {

    margin-top: 4px;

    text-align: center;

    font-size: 11px;

    color: #98a2b3;

}


/* =========================================================
   فارغة
   ========================================================= */

.zn-match-empty {

    width: 100%;

    padding: 30px 15px;

    box-sizing: border-box;

    text-align: center;

    color: #667085;

}


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

@media (max-width: 600px) {

    .zn-match-card {

        padding: 11px;

    }


    .zn-match-horizontal {

        gap: 7px;

    }


    .zn-match-team {

        gap: 6px;

    }


    .zn-match-team-logo {

        width: 34px;

        height: 34px;

        flex-basis: 34px;

    }


    .zn-match-team-name {

        font-size: 13px;

    }


    .zn-match-time {

        font-size: 18px;

    }


    .zn-match-center {

        min-width: 58px;

    }


    .zn-match-date {

        font-size: 12px;

    }

}


/* =========================================================
   هاتف صغير جدًا
   ========================================================= */

@media (max-width: 400px) {

    .zn-match-horizontal {

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

        gap: 4px;

    }


    .zn-match-team-logo {

        width: 30px;

        height: 30px;

        flex-basis: 30px;

    }


    .zn-match-team-name {

        font-size: 12px;

    }


    .zn-match-time {

        font-size: 16px;

    }

}
/* =========================================================
   وقت بداية المباراة للمباشر والمنتهية
   ========================================================= */

.zn-match-start-time {

    font-size: 11px;

    font-weight: 600;

    color: #98a2b3;

    line-height: 1;

}


/* =========================================================
   نتيجة المباراة
   ========================================================= */

.zn-match-score {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    font-size: 21px;

    font-weight: 800;

    line-height: 1;

    color: #111827;

}


.zn-match-score span {

    font-weight: 600;

    color: #667085;

}


/* =========================================================
   دقيقة المباراة المباشرة
   ========================================================= */

.zn-match-live-minute {

    color: #dc2626;

    font-size: 21px;

    font-weight: 800;

}


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

.zn-match-time-postponed {

    color: #d97706;

}


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

@media (max-width: 600px) {

    .zn-match-score {

        font-size: 18px;

    }


    .zn-match-live-minute {

        font-size: 18px;

    }


    .zn-match-start-time {

        font-size: 10px;

    }

}