/* الصف */
.erm-match-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* بدل space-between */
  gap:12px;
  flex-wrap:nowrap;
  position:relative;
  padding:18px 0;
}

.erm-match-row::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(to right, transparent, #ddd, transparent);
}

/* الفرق */
.team{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 0;      /* ✅ يخلي كل فريق ياخد مساحة مرنة بدون اختفاء */
  min-width:0;     /* ✅ مهم للـ ellipsis */
}

.team.away{
  align-items:center !important;
}

.team.home{
  align-items:center !important;
}

/* عمود الوسط: ثابت */
.erm-center{
  flex:0 0 90px;  /* عمود ثابت للعداد/السكور */
  text-align:center;
  white-space:nowrap;
}

/* العداد نفس سلوك السكور */
.erm-countdown{
  font-size:12px;
  font-weight:600;
  white-space:nowrap; /* ✅ يمنع اللف */
}

/* السكور */
.erm-score{
  font-size:16px;
  font-weight:700;
  white-space:nowrap;
}


.erm-matches-widget h3{
    margin-top:20px;
    margin-bottom:10px;
    font-weight:bold;
    font-size:18px;
}


/* Status badge */
.status-badge{
    flex:0 0 70px;
    text-align:center;
    font-size:12px;
    padding:4px 7px;
    border-radius:20px;
    font-weight:bold;
}

/* Status colors */
.status-live{
    background:#ffeded;
    color:#e74c3c;
}

.status-soon{
    background:#fff4e6;
    color:#f39c12;
}

.status-scheduled{
    background:#eef6ff;
    color:#3498db;
}

.status-finished{
    background:#eafaf1;
    color:#27ae60;
}

/* Live Button */
.live-btn{
    flex:0 0 auto;
    background:#e74c3c;
    color:#fff;
    padding:5px 10px;
    border-radius:6px;
    text-decoration:none;
    font-size:12px;
    transition:.2s;
}

.live-btn:hover{
    opacity:.8;
}

/* لازم تكون خارج أي selector ومفيش قبلها قوس ناقص */

.status-badge.status-live{
  position: relative;
  padding-left: 16px; /* مساحة للنقطة */
}

.status-badge.status-live::before{
  content:"";
  width:8px;
  height:8px;
  background:red;
  border-radius:50%;
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  animation: ermPulse 1s infinite;
}

@keyframes ermPulse{
  0%{opacity:1;}
  50%{opacity:.35;}
  100%{opacity:1;}
}

.match-link{
  flex:0 0 auto;
  background:#3498db;
  color:#fff;
  padding:5px 10px;
  border-radius:6px;
  text-decoration:none;
  font-size:12px;
}

.match-link:hover{opacity:.85;}


/* ===== Desktop defaults ===== */
.team img{
  width:32px;       /* حجم مناسب للابتوب */
  height:32px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
}

.team-name{
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;      /* سطر واحد على الديسكتوب */
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;         /* يمنع الشفت */
}

/* ===== Mobile: logo فوق والاسم تحت ===== */
@media (max-width: 600px){
    .erm-match-row{
        align-items:flex-start;   /* يمنع الارتفاع الغلط */
    }

  .team{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    gap:6px;
    width:100%;              /* ياخد عرض كافي */
  }

  .team-name{
    white-space:normal;      /* يسمح بسطرين */
    max-width:120px;         /* وسعناه */
    font-size:13px;
    line-height:1.2;
    display:block;           /* يمنع الطفو */
  }

  .team img{
    width:24px;                /* أصغر للموبايل */
    height:24px;
  }
  
  .team.away{
  align-items:center !important;
}

}

/* موبايل صغير جدًا */
@media (max-width: 420px){
  .team-name{
    max-width:70px;
    font-size:11px;
  }
}

/* Desktop fix فقط */
/* Desktop layout fix: يمنع الالتصاق ويقرب الـ status من الفريق الضيف */
@media (min-width: 768px){

  .erm-match-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;   /* بدل space-between */
    gap:18px;                     /* مسافات ثابتة */
    flex-wrap:nowrap;
  }

  .team{
    flex:1 1 0;
    min-width:0;
  }

  .erm-center{
    flex:0 0 130px;               /* عمود ثابت للنتيجة/العداد */
    text-align:center;
  }

  .team.away{
    justify-content:flex-end;
    padding-right:10px;           /* مسافة قبل الـ status */
  }

  .status-badge,
  .live-btn,
  .match-link{
    flex:0 0 auto;                /* لا تتمدد */
    white-space:nowrap;
  }

}