/* ============================================================
   آخر 5 مباريات لكل فريق (partials/team-last-five + team-last-form-card)

   بطاقة واحدة فيها الفريقان متقابلان في نصفيها كرأس المباراة (المضيف أولاً: يميناً
   في العربية ويساراً في اللاتينية) بخط رفيع بينهما. في وسط كل نصف: الشعار وحده بلا
   دائرة حوله، ثم الاسم وتحته حصيلة الخمس، ثم خمس شارات بخلفية خفيفة وحرف ملوّن،
   الأحدث أولاً (يميناً في الاتجاهين) وعليها حلقة رفيعة بلونها. لا حركة عند التمرير،
   يتغيّر اللون فقط. الأساس داكن، و html.light للفاتح كبقية الموقع.
   (كانت بطاقتين كبيرتين وخمسة مربعات مصمتة على خط بعرض الشاشة، ثم صفّاً لكل فريق
   جرّبه صاحب الموقع واختار هذا الشكل.)
   ============================================================ */
.team-last-five-block .team-form-hint {
  margin: -6px 0 10px;
  font-size: 11px;
  font-weight: normal;
  color: #707488;
  line-height: 1.4;
}

.team-form-grid {
  display: flex;
  flex-direction: row;
  background: var(--ui-card, #151825);
  border: 1px solid var(--ui-line, #1e2235);
  border-radius: var(--ui-r-card, 14px);
  overflow: hidden;
}

.team-form-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 18px 12px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.team-form-card + .team-form-card {
  border-inline-start: 1px solid var(--ui-line, #1e2235);
}

/* —— الفريق —— */
.team-form-card__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.team-form-card__logo {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-form-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.team-form-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.team-form-card__name {
  max-width: 100%;
  font-size: 14px;
  font-weight: 700;
  color: #e3e6f0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s ease;
}

a.team-form-card__identity:hover .team-form-card__name {
  color: #39dbbf;
}

.team-form-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.team-form-summary__item {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 11px;
  font-weight: normal;
  color: #707488;
  line-height: 1;
}

.team-form-summary__item b {
  font-size: 12px;
  font-weight: 900;
}

.team-form-summary__item--win b {
  color: #5bd286;
}

.team-form-summary__item--draw b {
  color: #9aa0b5;
}

.team-form-summary__item--lose b {
  color: #fc4d4d;
}

/* —— الشارات —— */
.team-form-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* الأحدث يميناً في الاتجاهين، فهو الأول دائماً */
[dir="rtl"] .team-form-strip {
  flex-direction: row;
}

[dir="ltr"] .team-form-strip {
  flex-direction: row-reverse;
}

.team-form-pill {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-r-small, 8px);
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.team-form-pill--win {
  background: rgba(91, 210, 134, 0.14);
  color: #5bd286 !important;
}

.team-form-pill--equal {
  background: rgba(154, 160, 181, 0.14);
  color: #9aa0b5 !important;
}

.team-form-pill--lose {
  background: rgba(252, 77, 77, 0.14);
  color: #fc4d4d !important;
}

.team-form-pill--win:hover {
  background: rgba(91, 210, 134, 0.26);
}

.team-form-pill--equal:hover {
  background: rgba(154, 160, 181, 0.26);
}

.team-form-pill--lose:hover {
  background: rgba(252, 77, 77, 0.26);
}

/* آخر مباراة بحلقة رفيعة بلونها */
.team-form-strip > .team-form-pill:first-child {
  border-color: currentColor;
}

.team-form-pill__letter {
  line-height: 1;
}

/* حروف اللغات اللاتينية كبيرة (W D L) كجداول الشكل المعتادة */
.team-form-pill__letter,
.team-form-summary__item {
  text-transform: uppercase;
}

/* —— الوضع الفاتح —— */
html.light .team-last-five-block .team-form-hint {
  color: #707488;
}

html.light .team-form-card__name {
  color: #131521;
}

html.light a.team-form-card__identity:hover .team-form-card__name {
  color: #16ae94;
}

html.light .team-form-summary__item {
  color: #707488;
}

html.light .team-form-summary__item--win b {
  color: #2a9d5c;
}

html.light .team-form-summary__item--draw b {
  color: #6b7289;
}

html.light .team-form-summary__item--lose b {
  color: #d63b3b;
}

html.light .team-form-pill--win {
  background: rgba(42, 157, 92, 0.12);
  color: #2a9d5c !important;
}

html.light .team-form-pill--equal {
  background: rgba(107, 114, 137, 0.12);
  color: #6b7289 !important;
}

html.light .team-form-pill--lose {
  background: rgba(214, 59, 59, 0.12);
  color: #d63b3b !important;
}

html.light .team-form-pill--win:hover {
  background: rgba(42, 157, 92, 0.22);
}

html.light .team-form-pill--equal:hover {
  background: rgba(107, 114, 137, 0.22);
}

html.light .team-form-pill--lose:hover {
  background: rgba(214, 59, 59, 0.22);
}

/* سطر التلميح بهامش عنوان القسم نفسه على الجوال (كان ملتصقاً بحافة الشاشة) */
@media (max-width: 767px) {
  .team-last-five-block .team-form-hint {
    padding-inline: 14px;
  }
}

/* —— الجوال —— */
@media (max-width: 575px) {
  .team-form-card {
    gap: 12px;
    padding: 14px 8px 13px;
  }

  .team-form-card__logo {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
  }

  .team-form-card__name {
    font-size: 13px;
  }

  .team-form-strip {
    gap: 4px;
  }

  .team-form-pill {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    font-size: 11px;
  }
}

/* أضيق الشاشات (320): خمس شارات في نصف البطاقة */
@media (max-width: 359px) {
  .team-form-pill {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    font-size: 10.5px;
  }
}