/* tabs.css */
:root {
                --Main-Color: #b51818;
                --surface:#1b1f2b;
                --Secondary-Color: #474747;
                --border:#282e3d;
                --border-soft:rgba(255,255,255,.06);
                --Main-Gradient-BG: linear-gradient(135deg,var(--Main-Color),var(--Secondary-Color));
                --Body-BG: #e4eeff none repeat scroll top right;
                --Main-BG: #e4eeff;
                --Secondary-BG: #fff;
                --Main-Font-Color: #444444;
                --Main-Font-Size: 16px;
                --Main-Link-Color: #035dcd;
                --Hover-Link-Color: var(--Main-Color);
                --Main-Font-Weight: 500;
                --Main-Line-Height: 35px;
                --Main-Padding: 12px;
                --Main-Margin: 15px;
                --Main-Gap: 12px;
                --Main-Border-Radius: 8px;
                --Main-Border: 1px solid #d1e7ff;
                --Main-Box-Shadow: 0 2px 10px 0 rgba(0,0,0,0.15);
                --Main-RGB-BG: rgb(0 0 0 / 60%);
                --Main-Fill-Color: #fff;
                --Max-width: 1000px;
                --Full-width: 100%;
                --Half-width: 50%;
                --StartSide: right;
                --EndSide: left;
                --White-Color: #ffffff;
                --Black-Color: #000000;
                --Gray-Color: #474747;
                --Gray-Color-1: #718ba1;
                --Red-Color: #b51818;
                --Green-Color: #008d29;
                --Blue-Color: #4267b2;
                --Yellow-Color: #fab000;
                --White-BG: #ffffff;
                --Black-BG: #000000;
                --T-RGB-BG: rgb(255 255 255 / 0%);
                --White-RGB-BG: rgb(255 255 255 / 35%);
                --Black-RGB-BG: rgb(0 0 0 / 60%);
                --Font-Size-1: 12px;
                --Font-Size-2: 14px;
                --Font-Size-3: 18px;
                --Font-Size-4: 20px;
                --Font-Size-5: 22px;
                --Font-Size-6: 25px;
                --Margin-1: 3px;
                --Margin-2: 6px;
                --Margin-3: 10px;
                --Margin-4: 12px;
                --Padding-1: 4px;
                --Padding-2: 6px;
                --Padding-3: 8px;
                --Padding-4: 10px;
                --Border-Radius-1: 3px;
                --Border-Radius-2: 6px;
                --Border-Radius-3: 12px;
                --Border-Radius-4: 50%;
                --Border-1: 1px solid #ddd;
                --Font-Weight-1: 600;
                --Gap-1: 15px;
                --Box-Shadow-1: 0 0 2px rgba(0,0,0,0.3);
                --TitleBox-BG: var(--White-BG);
                --TitleBox-Title-BG: var(--Main-Color);
                --Taps-BG: var(--Gray-Color);
                --Post-Holder-BG-1: rgb(233,235,238);
                --Post-Holder-BG-2: rgb(244,245,246);
                --Tran-1: 0.3s;
                --Tran-2: all 0.3s linear;
                --Tran-3: all 0.3s ease-out 0s
                
            }


/* General Styles for Tabs */
.tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 2px;
  border-bottom: 2px solid #1e2024;
  justify-content: space-between; /* Distribute tabs evenly */
  background: #1e2024;
  overflow-x: auto; /* Enable horizontal scrolling on small screens */
  white-space: nowrap; /* Prevent tabs from wrapping to the next line */
  font-weight: bold;
  gap:3px;
}

.tabs li {
  flex: 1; /* Make all tabs take equal width */
  text-align: center; /* Center the text inside each tab */
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  border-bottom: none;
  background:var(--surface);
  border:1px solid var(--border);
  background:#2f333e;
  color:#878181;
  transition: all 0.3s ease;
  font-size: 16px;
  font-weight: bold;
  color: #878181;
  font-weight: 500;
}

.tabs li:last-child {
  margin-right: 0; /* Remove margin for the last tab */
}

.tabs li:hover {
  background: #eaeaea;
}

.tabs li.current {
  background: #ff0303;
  border-bottom: 2px solid #fff;
  font-weight: bold;
  color: #fff;
}

/* Tab Content */
.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
  padding: 1px;
  margin: 2px 2px 15px 2px;
  background: #292c31;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  
}

.tab-content.current {
  display: block;
}

/* Animation for Tab Content */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .tabs li {
    font-size: 14px; /* Adjust font size for smaller screens */
    padding: 3px 15px;
    font-weight: bold;
  }

  .tab-content {
    padding: 1px;
  }
}

@media (max-width: 420px) {
  .tabs li {
    font-size: 12px; /* Further adjust font size for very small screens */
    padding: 3px 10px;
    font-weight: bold;
  }

  .tab-content {
    padding: 1px;
  }
}

@media (max-width: 200px) {
  .container {
    padding: 1px;
  }

  .tabs li {
    font-size: 10px; /* تقليل حجم النصوص */
    padding: 5px; /* تقليل الحشوة داخل التابات */
    font-weight: bold;
  }

  .tab-content {
    padding: 1px; /* تقليل الحشوة داخل المحتوى */
  }
}

/* Style du conteneur principal des lineups */
/* تنسيق الحاوية الرئيسية */
/* ========================================================= */
#tab-1 {
  padding: 10px 0;
  margin: 0;
  background: transparent;
}

/* حاوية التفاصيل */
.details {
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* ترتيب الصفوف */
.match-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* تنسيق الصف (بدون تأثيرات حركة أو hover) */
.match-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #1e2025;
  border: 1px solid #2a2d34;
  border-radius: 6px;
  padding: 12px 16px;
  cursor: default;
}

/* إلغاء تأثيرات الفأرة كلياً */
.match-row:hover {
  background: #1e2025;
  border-color: #2a2d34;
  transform: none;
  box-shadow: none;
}

/* تنسيق التسمية - مع تحديد عرض ثابت لتمرير التفاصيل لخظ محاذاة موحد */
.match-row__label {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #94a3b8;
  font-weight: 500;
  flex-shrink: 0;
  
  /* العرض الثابت المحقق للمحاذاة العمودية */
  width: 160px; 
}

/* تنسيق الأيقونة */
.match-row__label i {
  color: #94a3b8;
  font-size: 1rem;
  width: 22px;
  margin-right: 10px;
  text-align: center;
}

/* تنسيق القيم التفصيلية (ستبدأ الآن جميعها في خط مستقيم واحد) */
.match-row__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff !important;
  text-align: left;
}

/* تجاوب مع الشاشات الصغيرة جداً */
@media (max-width: 600px) {
  .match-row {
    padding: 10px 12px;
  }
  .match-row__label {
    width: 130px; /* تقليل العرض قليلاً للهواتف */
    font-size: 0.82rem;
  }
  .match-row__value {
    font-size: 0.85rem;
  }
}
/* Style du conteneur principal des lineups */
/* =========================================================
   Modern Lineup — Flat Full Pitch (both teams facing)
   ========================================================= */

/* =========================================================
   Lineup Widget — Professional Edition (English)
   Vertical on mobile / Horizontal on tablet & desktop
   ========================================================= */

/* =========================================================
   Modern Lineup — Flat Full Pitch (both teams facing)
   ========================================================= */

/* =========================================================
   Modern Lineup — Flat Full Pitch (both teams facing)
   ========================================================= */

/* =========================================================
   Modern Lineup — Flat Full Pitch (both teams facing)
   ========================================================= */

/* =========================================================
   Modern Lineup — Flat Full Pitch (both teams facing)
   ========================================================= */

#tab-2 {
  --fp-bg: #0f1115;
  --fp-card: #171a20;
  --fp-home: #3b82f6;
  --fp-away: #ef4444;
  --fp-pitch-1: #16532f;
  --fp-pitch-2: #1b6238;
  --fp-line: rgba(255, 255, 255, 0.45);
  --fp-text: #e5e7eb;
  --fp-muted: #9aa1ac;

  padding: clamp(8px, 3vw, 2px);
  margin: 2px 2px 15px 2px;
  background: #292c31;
  border-radius: 2px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  color: var(--fp-text);
}

.fp-wrap {
  max-width: none; /* القيمة الافتراضية بدلاً من auto */
  padding: 0 1px;  /* 5px مسافة داخلية يمين ويسار */
}

/* ================= Head ================= */

.fp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 2vw, 10px);
  margin-bottom: 8px;
}

.fp-team-mini {
  flex: 1;
  min-width: 0; /* required so the name can actually shrink/truncate inside flex */
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.6vw, 8px);
  background: var(--fp-card);
  padding: clamp(5px, 1.6vw, 8px) clamp(6px, 2.4vw, 12px);
  border-radius: 12px;
}

.fp-team-mini img {
  flex: 0 0 auto;
  width: clamp(16px, 6vw, 26px);
  height: clamp(16px, 6vw, 26px);
  object-fit: contain;
}

.fp-team-mini span {
  font-weight: 700;
  font-size: clamp(0.62rem, 2.6vw, 0.82rem);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-team-mini em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: clamp(0.52rem, 2vw, 0.7rem);
  color: var(--fp-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: clamp(1px, 0.6vw, 2px) clamp(4px, 1.6vw, 7px);
  border-radius: 999px;
  white-space: nowrap;
}

.fp-home-mini { border-left: 3px solid var(--fp-home); }
.fp-away-mini { border-right: 3px solid var(--fp-away); }

.fp-vs {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: clamp(0.6rem, 2vw, 0.75rem);
  color: var(--fp-muted);
}

/* ================= Pitch ================= */

.fp-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: repeating-linear-gradient(
    0deg,
    var(--fp-pitch-1) 0 10%,
    var(--fp-pitch-2) 10% 20%
  );
  box-shadow: 0 0 0 2px var(--fp-line), 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.fp-pitch-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fp-halfway {
  position: absolute;
  top: 50%;
  left: 3%;
  right: 3%;
  height: 2px;
  background: var(--fp-line);
  transform: translateY(-50%);
}

.fp-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15%;
  aspect-ratio: 1;
  border: 2px solid var(--fp-line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.fp-box {
  position: absolute;
  left: 30%;
  right: 30%;
  height: 10%;
  border: 2px solid var(--fp-line);
}

.fp-box-top { top: 0; border-top: none; }
.fp-box-bottom { bottom: 0; border-bottom: none; }

.fp-half {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 4% 5%;
}

.fp-line {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: nowrap;
}

/* ================= Player avatar ================= */

.fp-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.fp-avatar {
  flex: 0 0 auto;
  width: clamp(20px, 8vw, 34px);
  height: clamp(20px, 8vw, 34px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.5rem, 2.4vw, 0.78rem);
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.fp-avatar-home { background: linear-gradient(150deg, var(--fp-home), #1d4ed8); }
.fp-avatar-away { background: linear-gradient(150deg, var(--fp-away), #b91c1c); }

.fp-name {
  font-size: clamp(0.42rem, 1.9vw, 0.68rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  max-width: clamp(38px, 15vw, 68px);
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  overflow-wrap: break-word;
}

/* ================= Footer: coaches + subs ================= */

.fp-footer {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-direction: column;
}

.fp-footer-col {
  background: var(--fp-card);
  border-radius: 12px;
  padding: 12px;
  flex: 1;
}

.fp-footer-col h4 {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--fp-text);
}

.fp-coach {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--fp-muted);
}

.fp-coach b { color: var(--fp-text); }

.fp-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fp-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--fp-text);
}

.fp-sub i {
  font-style: normal;
  font-weight: 800;
  color: var(--fp-muted);
}

/* ================= Desktop ================= */

@media (min-width: 720px) {
  .fp-footer {
    flex-direction: row;
  }
}

/* ================= Desktop: horizontal pitch ================= */

@media (min-width: 900px) {
  .fp-pitch {
    aspect-ratio: 2.3 / 1;
    flex-direction: row-reverse; /* home (2nd in DOM) ends up on the left, away on the right */
    background: repeating-linear-gradient(
      90deg,
      var(--fp-pitch-1) 0 10%,
      var(--fp-pitch-2) 10% 20%
    );
  }

  .fp-half {
    flex-direction: row-reverse; /* GK stays on the outer edge, attack stays near the halfway line */
  }

  .fp-line {
    flex-direction: column;
  }

  .fp-halfway {
    top: 4%;
    bottom: 4%;
    left: 50%;
    right: auto;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
  }

  .fp-box {
    top: 25%;
    bottom: 25%;
    left: auto;
    right: auto;
    height: auto;
    width: 9%;
    border: 2px solid var(--fp-line);
  }

  .fp-box-top {
    right: 0;
    left: auto;
    border-right: none;
    border-top: 2px solid var(--fp-line);
  }

  .fp-box-bottom {
    left: 0;
    right: auto;
    border-left: none;
    border-bottom: 2px solid var(--fp-line);
  }

  .fp-name {
    max-width: 72px;
  }
}

.no-data-message {
  text-align: center;
  color: var(--fp-muted);
  padding: 30px 0;
}

/* Style du conteneur principal des lineups */
/* ===== Conteneur principal ===== */
/* ===== Conteneur principal ===== */
/* =========================================================
   MATCH STATISTICS — Modern Categorized Dark Theme
   Container: #tab-3.tab-content
   ========================================================= */

#tab-3 {
  --home-teal: #00e6c3;      /* اللون الفيروزي للتيم الأيسر */
  --away-purple: #b084f7;    /* اللون الأرجواني للتيم الأيمن */
  --bg-deep: #090b10;        /* خلفية الصفحة العميقة */
  --bg-card: #131722;        /* خلفية البطاقات */
  --bg-track: #202534;       /* لون مسار شريط التقدم */
  --text-white: #ffffff;
  --text-muted: #8a92a3;

  padding: 5px;
  background-color: #292c31;
  color: var(--text-white);
  border-radius: 2px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#tab-3 .no-data-message {
  text-align: center;
  padding: 40px 10px;
  color: var(--text-muted);
  font-size: 1rem;
}

.statistics {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ============== CATEGORY GROUP ============== */
.stat-category-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* عنوان القسم (Attack / Defence / Cards) */
.category-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--home-teal); /* نفس لون الخط الفيروزي في الصورة */
  margin: 0;
  padding-left: 4px;
}

/* بطاقة القسم الحاوية للإحصائيات */
.category-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ============== STAT ROWS ============== */
.stat-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* الأرقام والعنوان */
.stat-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-white);
}

.stat-value.stat-home {
  text-align: left;
}

.stat-value.stat-away {
  text-align: right;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
  flex: 1;
}

/* شريط الإحصائيات المقسم */
.stat-bars-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.stat-bar-wrapper {
  flex: 1;
  height: 6px;
  background-color: var(--bg-track);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
}

/* الشريط الأيسر (الفيروزي) */
.stat-bar-wrapper.home {
  justify-content: flex-start;
}

/* الشريط الأيمن (الأرجواني) */
.stat-bar-wrapper.away {
  justify-content: flex-end;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-bar-fill.home-fill {
  background-color: var(--home-teal);
  box-shadow: 0 0 8px rgba(0, 230, 195, 0.3);
}

.stat-bar-fill.away-fill {
  background-color: var(--away-purple);
  box-shadow: 0 0 8px rgba(176, 132, 247, 0.3);
}

/* ============== RESPONSIVE ============== */
@media (max-width: 768px) {
  #tab-3 {
    padding: 6px;
  }
  
  .category-card {
    padding: 14px 14px;
    gap: 16px;
  }

  .category-title {
    font-size: 0.8rem;
  }

  .stat-value {
    font-size: 0.85rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .stat-bars-container {
    gap: 8px;
  }

  .stat-bar-wrapper {
    height: 5px;
  }
}

/* General Styles Events */
/* تنسيق الحاوية الرئيسية */
/* تنسيق الحاوية */

/* Style du conteneur principal des lineups */
#tab-4 {
  padding: 5px;
  background: #292c31; /* Couleur de fond plus douce */
  color: #333; /* Couleur du texte plus lisible */
  border-radius: 2px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Titre principal */
#tab-4 h3 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #444; /* Couleur légèrement plus douce */
}

.events-table-container {
  display: flex;
  justify-content: space-around;
  gap: 30px;
  flex-wrap: wrap;
}
.events-table-container {
  flex: 1;
  background: #ffffff; /* Fond blanc pour un meilleur contraste */
  padding: 5px;
  border-radius: 8px;
  border: 1px solid #ddd; /* Bordure grise claire */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre subtile */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* تنسيق الجدول */
.events-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
}

.events-table thead {
  background-color: #f4f4f4;
}

.events-table th,
.events-table td {
  padding: 10px;
  border: 1px solid #f6f6f6;
}

.events-table th {
  font-weight: bold;
  color: #333;
}

.events-table td {
  color: #555;
}

/* تنسيق أعمدة الفريقين */
/* تنسيق عام للاعبين */
.home-player,
.away-player {
  font-weight: bold;
}

/* لون خاص بالفريق المضيف */
.home-player {
  color: #007bff; /* لون مميز للفريق صاحب الأرض */
  text-align: left; /* محاذاة النص داخل الزر إلى اليمين */
}

/* لون خاص بالفريق الضيف */
.away-player {
  color: #dc3545; /* لون مميز للفريق الضيف */
  text-align: right; /* محاذاة النص داخل الزر إلى اليسار */
}

/* تنسيق عمود الوقت */
.event-time {
  text-align: center;
  color: #333;
  font-weight: bold;
}

/* تحسين استجابة التصميم للأجهزة الصغيرة */
@media (max-width: 768px) {
  .home-player,
  .away-player {
    font-size: 8px; /* تصغير حجم الخط في الشاشات الصغيرة */
  }

  .event-time {
    font-size: 10px; /* تصغير الخط لتوفير مساحة */
  }
}

/* تنسيق الأيقونات */
.event-icon img.icon {
  width: 20px; /* حجم الأيقونة */
  height: 20px;
  margin-left: 5px;
  vertical-align: left;
}

.substitution-out {
  font-size: 0.6rem;
}

/* Style responsive */
@media (max-width: 768px) {
  .events-table-container {
    flex-direction: column;
  }

  .events-table-container {
    margin-bottom: 20px;
  }
}
/* Style responsive */
@media (max-width: 768px) {
  .events-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 10px;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.events-table-container {
  animation: fadeIn 0.5s ease-out forwards;
}

/******************************/

/* Container Reset */
#tab-5 {
  background-color: #292c31 !important;
  padding: 4px !important;
  border-radius: 2px !important;
  
}

#tab-5 .standings {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}



/***********************/

.match-card {
  background: #292c31;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Header Styles */
.match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.live-badge {
  display: flex;
  align-items: center;
  color: #ff4444;
  font-weight: 600;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: #ff4444;
  border-radius: 50%;
  margin-right: 5px;
  animation: blink 1s infinite;
}

.league {
    display: flex;
    align-items: center;    /* محاذاة عمودية في المنتصف */
    gap: 10px;              /* مسافة بين الشعار والنص */
}

.league-logo {
    width: 30px;            /* حجم الشعار */
    height: 30px;
    object-fit: contain;
}

.league h4 {
    margin: 0;              /* إزالة الهوامش الافتراضية */
    font-size: 16px;
}
/* Match Content Styles */
.match-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 40px;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 25%;
}


.team-name {
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  
}

@media (max-width: 720px) {
    .team-name {
        max-width: 120px; /* تقليل العرض يناسب مساحة التابليت */
        font-size: 0.95rem; /* تصغير الخط قليلاً عند الحاجة */
    }
}

/* 3. شاشات الهواتف الذكية (أقل من 576px) */
@media (max-width: 420px) {
    .team-name {
        max-width: 85px; /* تقليل العرض أكثر للشاشات الصغيرة جداً */
        font-size: 0.85rem;
    }
}

/* 3. شاشات الهواتف الذكية (أقل من 576px) */
@media (max-width: 300px) {
    .team-name {
        max-width: 70px; /* تقليل العرض أكثر للشاشات الصغيرة جداً */
        font-size: 0.85rem;
    }
}

.score-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 50%;
}

.match-time {
  color: #fff;
  font-size: 0.9em;
}

.score {
  font-size: 2em;
  font-weight: bold;
  display: flex;
  gap: 10px;
}

.match-minute {
  color: #666;
}

.referee {
  font-size: 0.8em;
  color: #666;
}

.odds {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.odds span {
  background: #f5f5f5;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.9em;
}

/* Bet Button */
.bet-button {
  width: 100%;
  padding: 12px;
  background: #6c5ce7;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.bet-button:hover {
  background: #5b4bc4;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/*************minutes *********/
.kvwsHg {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*************score من سجل الأهداف *********/

.goals-section {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  background: #f5f5f5;
  margin: 10px 0;
  border-radius: 5px;
}

.home-team-goals,
.away-team-goals {
  flex: 1;
  padding: 10px;
}

.goal-detail {
  margin: 5px 0;
  font-size: 14px;
}

.goal-detail i {
  color: #4caf50;
  margin-right: 5px;
}

h4 {
  margin-bottom: 10px;
  color: #333;
}

/* Responsive Mobile */
@media screen and (max-width: 768px) {
  .goals-section {
    display: flex;
    padding: 10px;
  }

  .home-team-goals,
  .away-team-goals {
    width: 100%;
    padding: 8px;
  }

  .goal-detail {
    font-size: 11px;
  }

  h4 {
    font-size: 16px;
    margin-bottom: 8px;
  }
}

/* Pour les très petits écrans */
@media screen and (max-width: 480px) {
  .goals-section {
    padding: 8px;
    margin: 5px 0;
  }

  .home-team-goals,
  .away-team-goals {
    padding: 5px;
  }

  .goal-detail {
    font-size: 9px;
  }

  h4 {
    font-size: 14px;
    margin-bottom: 6px;
  }
}

/***************** round fixtures *******/

.fixtures-table {
  width: 100%;
  border-radius: 2px;
  border-collapse: separate; /* يفصل بين حدود الخلايا */
  border-spacing: 2px 2px; /* (أفقي ←→ | رأسي ↑↓) */
}



.fixtures-table th,
.fixtures-table td {
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}

.fixtures-table th:nth-child(1),
.fixtures-table td:nth-child(1) {
  width: 40%; /* عرض عمود فريق Home */
}

.fixtures-table th:nth-child(2),
.fixtures-table td:nth-child(2) {
  width: 10%; /* عرض عمود الحالة أو النتيجة */
}

.fixtures-table th:nth-child(3),
.fixtures-table td:nth-child(3) {
  width: 40%; /* عرض عمود فريق Away */
}

.fixtures-table tbody tr:nth-child(even) {
  background-color: #edecec;
}
.fixtures-table tbody tr:nth-child(odd) {
  background-color: #d9e9eeb3; /* لون مختلف للأسطر الفردية */
}

.fixtures-table tbody tr:hover {
  background-color: #ffffff;
  cursor: pointer;
}

.fixtures-table img {
  vertical-align: middle;
  max-width: 100%; /* لضمان أن الصور لا تتجاوز عرض الخلية */
  height: auto; /* للحفاظ على نسبة العرض إلى الارتفاع */
}

/* Media Query للشاشات الصغيرة */
@media (max-width: 768px) {
  .fixtures-table th,
  .fixtures-table td {
    font-size: 11px;
    padding: 5px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px; /* Further adjust width for very small screens */
  }
}

/* Media Query للشاشات الأصغر (مثل الهواتف) */
@media (max-width: 480px) {
  .fixtures-table th,
  .fixtures-table td {
    font-size: 9px;
    padding: 5px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px; /* Further adjust width for very small screens */
  }
}

.match-score {
  text-align: center;
  font-weight: bold;
}

/* حالات المباراة */
.match-status-NS {
  color: #666; /* مباراة لم تبدأ بعد */
}

.match-status-LIVE {
  color: #ff0000; /* مباراة جارية */
}

.match-status-FT {
  color: #000; /* مباراة منتهية */
}

.round-selector {
  margin-bottom: 5px;
}

.round-selector select {
  width: 100%;
  padding: 5px;
}

@media (max-width: 768px) {
  .round-selector select {
    padding: 3px;
    margin-left: 5px;
  }
}

@media (max-width: 480px) {
  .round-selector select {
    padding: 2px;
    margin-left: 2px;
  }
}

/*************************** Top Scorers Table Styles ***********************/
.top-scorers-table {
  width: 100%;
  border-radius: 2px;
  border-collapse: separate; /* يفصل بين حدود الخلايا */
  border-spacing: 2px 2px; /* (أفقي ←→ | رأسي ↑↓) */
}

.top-scorers-table thead {
  background-color: #f0f0f0;
  color: #000000;
}

.top-scorers-table th,
.top-scorers-table td {
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}

.top-scorers-table th {
  text-transform: uppercase;
  font-weight: bold;
}

.top-scorers-table tbody tr:nth-child(even) {
  background-color: #edecec;
}
.top-scorers-table tbody tr:nth-child(odd) {
  background-color: #d9e9eeb3; /* لون مختلف للأسطر الفردية */
}

.top-scorers-table tbody tr:hover {
  background-color: #ffffff;
  cursor: pointer;
}

.top-scorers-table img {
  vertical-align: middle;
  border-radius: 50%;
}

.top-scorers-table td img {
  margin-right: 10px;
}

.top-scorers-table td {
  vertical-align: middle;
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Add ellipsis for overflowing text */
  max-width: 150px; /* Set a maximum width for truncation */
}

/* Responsive Design */
@media (max-width: 768px) {
  .top-scorers-table {
    font-size: 12px;
  }

  .top-scorers-table th,
  .top-scorers-table td {
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px; /* Adjust width for smaller screens */
  }

  .top-scorers-table img {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 480px) {
  .top-scorers-table {
    font-size: 10px;
  }

  .top-scorers-table th,
  .top-scorers-table td {
    padding: 5px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px; /* Further adjust width for very small screens */
  }

  .top-scorers-table img {
    width: 20px;
    height: 20px;
  }
}

/****************************** Top assists Table Styles *****************************/

.top-assists-table {
  width: 100%;
  border-radius: 2px;
  border-collapse: separate; /* يفصل بين حدود الخلايا */
  border-spacing: 2px 2px; /* (أفقي ←→ | رأسي ↑↓) */

}

.top-assists-table thead {
  background-color: #ffdddd;
  color: #000000;
}

.top-assists-table th,

.top-assists-table td {
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}

.top-assists-table th {
  text-transform: uppercase;
  font-weight: bold;
}

.top-assists-table tbody tr:nth-child(even) {
  background-color: #edecec;
}
.top-assists-table tbody tr:nth-child(odd) {
  background-color: #d9e9eeb3; /* لون مختلف للأسطر الفردية */
}

.top-assists-table tbody tr:hover {
  background-color: #ffffff;
  cursor: pointer;
}

.top-assists-table img {
  vertical-align: middle;
  border-radius: 50%;
}

.top-assists-table td img {
  margin-right: 10px;
}

.top-assists-table td {
  vertical-align: middle;
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Add ellipsis for overflowing text */
  max-width: 150px; /* Set a maximum width for truncation */
}

/* Responsive Design */
@media (max-width: 768px) {
  .top-assists-table {
    font-size: 12px;
  }

  .top-assists-table th,
  .top-assists-table td {
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px; /* Adjust width for smaller screens */
  }

  .top-assists-table img {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 480px) {
  .top-assists-table {
    font-size: 10px;
  }

  .top-assists-table th,
  .top-assists-table td {
    padding: 5px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px; /* Further adjust width for very small screens */
  }

  .top-assists-table img {
    width: 20px;
    height: 20px;
  }
}



.league-header {
  display: flex;
  align-items: center; /* Centre le texte verticalement par rapport au logo */
}

h1 {
  margin: 0;
  line-height: 25px; /* Assurez-vous que la hauteur du texte est égale à la hauteur du logo pour un alignement parfait */
}

/************** standings hedaer  ******************/

.fl-group-header {
  text-align: center;
  background: #f0f0f0;
  color: #fff;
  padding: 7px;
  border-radius: 5px;
  margin-bottom: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fl-group-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
}



/*****************************banner styles ***************************/

.league-banner {
  display: flex;
  flex-direction: row-reverse; /* لجعل العناصر تبدأ من اليمين وتتجه لليسار */
  align-items: center;
  justify-content: left; /* تجميع المحتوى فالوسط بدل تفريقه على الحواف */
  flex-wrap: wrap;

  background-color: #292c31;
  border-radius: 2px;
  padding: 16px 24px;
  margin: 10px 0;
  color: #ffffff;
  direction: ltr; /* ضبط الاتجاه العام LTR للتناسب مع النصوص الإنجليزية */
  text-align: right;
  box-sizing: border-box;
  min-height: 90px;
}

/* فواصل خفيفة بين كل مجموعة عناصر (logo+info / extra-info / season-select) */
.league-banner > * + * {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  margin-left: 8px;
  padding-left: 8px;
}

/* -------------------------------------------------- */
/* الشعار + معلومات الدوري                              */
/* -------------------------------------------------- */

.league-info {
  display: flex;
  flex-direction: row;
  align-items: flex-end; /* محاذاة جميع النصوص لليمين */
  gap: 2px;
}

.league-name {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.season {
  font-size: 12px;
  color: #e63946; /* أحمر مطابق للتصميم */
  font-weight: 700;
  margin-top: 2px;
}

.country {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0px 0px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  margin-top: initial;
  margin-right: 5px;
}

.country img {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: cover;
}

/* حاوية الشعار الأبيض */
.logo {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 6px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* -------------------------------------------------- */
/* عدد الفرق + آخر بطل                                  */
/* -------------------------------------------------- */

.league-extra-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: 10px;
}

.league-teams-count,
.league-last-champion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #f1f1f1;
  white-space: nowrap;
  margin-left: 5px;
}

.league-teams-count i {
  color: #9aa0a6; /* أيقونة الفرق رمادي فاتح */
  font-size: 13px;
}

.league-last-champion i {
  color: #ffcc00; /* أيقونة الكأس ذهبية */
  font-size: 14px;
}

.last-champion-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  margin-inline-start: 2px;
}

.last-champion-season {
  color: #9aa0a6;
  font-weight: 500;
  font-size: 12px;
}

/* -------------------------------------------------- */
/* قائمة اختيار الموسم                                  */
/* -------------------------------------------------- */

.league-season-select-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.league-season-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #1c1e22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  padding: 11px 30px 11px 16px;
  min-width: 70px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;

  /* سهم مخصص صغير بدل سهم المتصفح الافتراضي */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23ffffff' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.league-season-select:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: #24272c;
}

.league-season-select:focus {
  outline: none;
  border-color: #e63946;
}

.league-season-select option {
  background-color: #1c1e22;
  color: #ffffff;
}

/* -------------------------------------------------- */
/* تجاوب مع الهاتف — كل مجموعة فسطر لوحدها، متمركزة    */
/* -------------------------------------------------- */

@media (max-width: 640px) {
  .league-banner {
    flex-direction: column-reverse; /* شعار+معلومات فالأعلى، ثم الفرق/البطل، ثم الموسم فالأسفل */
    align-items: stretch;
    text-align: center;
    padding: 18px 16px;
  }

  /* إلغاء الفواصل الجانبية واستبدالها بفواصل أفقية */
  .league-banner > * + * {
    border-left: none;
    margin-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 14px;

    
  }

  .league-info {
    align-items: center;
  }

  .country {
    margin-top: 6px;
    margin-top: initial;
  }

  .league-extra-info {
    justify-content: center;
    gap: 3px;
  }

  .league-season-select-wrap {
    justify-content: center;
  }

  .logo {
    margin: 0 auto 8px;
  }
}

/********************** items styles *************************/

.box, .MW-Ads, .coMatch {
    display: block;
    position: relative;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.15);
    overflow: hidden;
}

a {
    color: #444444;
    text-decoration: none;
}

a:focus,
a:hover {
    color: #b51818;
    transition: 0.3s;
}



.ItemsList {
    position: relative;
    display: grid;
    grid-gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    padding: 12px;
    overflow: hidden;
}

.TitleBox {
    background-color: #b51818;
    border-bottom: 1px solid #d1e7ff;
    overflow: hidden;
    height: 50px;
    display: flex;
    justify-content: center; /* أفقيًا */
}

.TitleBox .Title,
.TitleBox a.LoadMore {
    background-color: #b51818;
    text-align: right;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    margin: 0;
    float: none;         /* إزالة float */
    display: inline-block;
}


.ItemsList li.item {
    display: flex;
    width: 100%;
    background-color: #e4eeff;
    border-radius: 8px;
    border: 1px solid #d1e7ff;
    padding: 6px 12px;
    font-size: 14px;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

span.item-box,
li.item span.item-url {
    display: flex;
    flex-direction: row;
    align-items: center;
}

li.item span.item-image {
    display: flex;
    position: relative;
    background-color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

span.item-image img {
    max-width: 30px;
    max-height: 30px;
    width: 100%;
    height: auto;
    padding: 3px;
    margin: 0 auto;
}

li.item span.item-name {
    display: inline-block;
    float: right;
    margin-right: 10px;
}

span.item-url a {
    display: inline-block;
    background-color: #b51818;
    font-size: 12px;
    color: #ffffff;
    padding: 0 8px;
    border-radius: 8px;
    margin: 0 auto;
}

/* Responsive Breakpoints */
@media screen and (max-width: 1000px) {
    .ItemsList {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 750px) {
    .grid-posts {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 500px) {
    .grid-posts {
        grid-template-columns: repeat(2, 1fr);
    }

    .ItemsList {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 350px) {
    .grid-posts {
        grid-template-columns: repeat(1, 1fr);
    }
}



/****************** lineups ***************************/
 /* أنماط التشكيلة */
/* أنماط التشكيلة */
.lineup-pitch-container { padding: 20px; }
.football-pitch {
  background-image: url('https://i.imgur.com/gC5O0QQ.png');
  background-size: cover;
  background-position: center;
  position: relative;
  width: 100%;
  aspect-ratio: 105/68;
}
.player-on-pitch {
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  width: 60px;
}
.player-badge {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  margin: 0 auto 4px auto;
}
.player-name {
  font-size: 12px;
  background: rgba(255,255,255,0.8);
  padding: 1px 3px;
  border-radius: 3px;
}
.substitutes-section {
  margin-top: 20px;
  padding: 0 20px;
}
.section-title {
  text-align: center;
  margin-bottom: 15px;
}
.substitutes-columns {
  display: flex;
  gap: 20px;
}
.substitutes-list {
  flex: 1;
}
.substitutes-list .coach-info {
  font-weight: bold;
  background-color: #f2f2f2;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.substitutes-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.substitutes-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}
.substitutes-list .player-number {
  font-weight: bold;
  width: 25px;
  text-align: right;
}

/* تنسيق للشاشات حتى 350px */
@media (max-width: 350px) {
  .player-on-pitch {
    width: 45px;
  }
  .player-badge {
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
  }
  .player-name {
    font-size: 10px;
    padding: 1px 2px;
  }
  .substitutes-columns {
    flex-direction: column;
    gap: 10px;
  }
}

/* تنسيق إضافي للشاشات حتى 300px */
@media (max-width: 300px) {
  .player-on-pitch {
    width: 40px;
  }
  .player-badge {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
  }
  .player-name {
    font-size: 9px;
    padding: 1px 2px;
  }
  .substitutes-section {
    padding: 0 10px;
  }
}


        /* Styles for the Football Pitch Display - Enhanced Version */
.fl-football-pitch-section {
  padding: 2px 2px;
  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgb(255, 255, 255);
  text-align: center;
  backdrop-filter: blur(2px);
  margin-bottom: 4px;
}

.fl-football-pitch-section h4 {
  margin-top: 0;
  color: #333;
  font-size: 1.5em;
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.fl-football-pitch {
  position: relative;
  width: 100%;
  padding-bottom: 66%; /* Better aspect ratio for football pitch */
  background: linear-gradient(135deg, #3a9e3a 0%, #4caf50 50%, #3a9e3a 100%);
  border: 2px solid #ffffff;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
  max-width: 900px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  /* Grass Texture with subtle stripes */
  background-image: linear-gradient(
      to bottom,
      rgba(58, 158, 58, 0.8) 0%,
      rgba(76, 175, 80, 0.8) 20%,
      rgba(58, 158, 58, 0.8) 40%,
      rgba(76, 175, 80, 0.8) 60%,
      rgba(58, 158, 58, 0.8) 80%,
      rgba(76, 175, 80, 0.8) 100%
    ),
    /* Pitch Markings */
      linear-gradient(
        to right,
        transparent 49.85%,
        #ffff00 49.85%,
        #ffff00 50.15%,
        transparent 50.15%
      ),
    /* Halfway line */
      radial-gradient(
        circle at 50% 50%,
        transparent 9%,
        #ffff00 9%,
        #ffff00 10%,
        transparent 10%
      ); /* Centre circle */
}

/* Enhanced Penalty Areas with D-box arcs */
/* الكود الحالي لعنوان القسم */
.fl-football-pitch-section h4 {
  margin-top: 0;
  color: #333;
  font-size: 1.5em;
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* الكود الحالي للملعب نفسه */
.fl-football-pitch {
  position: relative;
  width: 100%;
  padding-bottom: 66%; /* Better aspect ratio for football pitch */
  background: linear-gradient(135deg, #3a9e3a 0%, #4caf50 50%, #3a9e3a 100%);
  border: 2px solid #ffffff;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
  max-width: 900px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  /* Grass Texture with subtle stripes */
  background-image: 
  
  
  /* Pitch Markings */ linear-gradient(
      to right,
      transparent 49.85%,
      #ffffff 49.85%,
      #ffffff 50.15%,
      transparent 50.15%
    ),
    /* Halfway line */
      radial-gradient(
        circle at 50% 50%,
        transparent 9%,
        #ffffff 9%,
        #ffffff 10%,
        transparent 10%
      ),
    /* Centre circle */
      linear-gradient(
        to bottom,
        rgba(11, 190, 11, 0.8) 0%,
        rgba(11, 190, 11, 0.8) 20%,
        rgba(11, 190, 11, 0.8) 40%,
        rgba(11, 190, 11, 0.8) 60%,
        rgba(11, 190, 11, 0.8) 80%,
        rgba(11, 190, 11, 0.8) 100%
      );
}

/* إعادة تعريف Pseudo-elements لخط الـ 18 ياردة */
.fl-football-pitch::before,
.fl-football-pitch::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16.5%;
  height: 44%;
  transform: translateY(-50%);
  border: 0.2vmin solid rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  z-index: 1;
}

/* منطقة الجزاء اليسرى */
.fl-football-pitch::before {
  left: 0;
  border-left: none; /* لا حدود على الجانب الخارجي */
  background:
    /* خط أفقي علوي للـ 6 ياردات */ linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.8) 0.2vmin,
        transparent 0.2vmin
      )
      0 22% / 50% 0.2vmin no-repeat,
    /* خط أفقي سفلي للـ 6 ياردات */
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.8) 0.2vmin,
        transparent 0.2vmin
      )
      0 78% / 50% 0.2vmin no-repeat,
    /* خط عمودي للـ 6 ياردات */
      linear-gradient(
        to right,
        rgba(255, 255, 255, 0.8) 0.2vmin,
        transparent 0.2vmin
      )
      center center / 0.2vmin 55% no-repeat;
}

/* منطقة الجزاء اليمنى */
.fl-football-pitch::after {
  right: 0;
  border-right: none;
  background:
    /* خط أفقي علوي للـ 6 ياردات */ linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.8) 0.2vmin,
        transparent 0.2vmin
      )
      100% 22% / 50% 0.2vmin no-repeat,
    /* خط أفقي سفلي للـ 6 ياردات */
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.8) 0.2vmin,
        transparent 0.2vmin
      )
      100% 78% / 50% 0.2vmin no-repeat,
    /* خط عمودي للـ 6 ياردات */
      linear-gradient(
        to left,
        rgba(255, 255, 255, 0.8) 0.2vmin,
        transparent 0.2vmin
      )
      center center / 0.2vmin 55% no-repeat;
}

/* خط الـ 18 الأيمن */
.fl-football-pitch::after {
  right: 0;
  border-right: none; /* لا حدود على الجانب الأيمن الخارجي */
  /* إضافة الخط العمودي لمنطقة الـ 6 أمتار على اليمين */
  background-image:
    /* الخط العلوي لمنطقة الـ 6 أمتار */ linear-gradient(
        to top,
        rgba(255, 255, 255, 0.8) 0.2vmin,
        transparent 0.2vmin
      )
      0 11.5% / 100% 0.2vmin no-repeat,
    /* الخط السفلي لمنطقة الـ 6 أمتار */
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.8) 0.2vmin,
        transparent 0.2vmin
      )
      0 88.5% / 100% 0.2vmin no-repeat,
    /* الخط العمودي لمنطقة الـ 6 أمتار (من الداخل) */
      linear-gradient(
        to left,
        rgba(255, 255, 255, 0.8) 0.2vmin,
        transparent 0.2vmin
      )
      98% 0 / 0.2vmin 55% no-repeat; /* 83% تمثل المسافة من اليسار (أو 17% من اليمين) */
}

/* Corner Arcs */
.fl-football-pitch .corner-arc {
  position: absolute;
  width: 2%;
  height: 4%;
  border: 2px solid #ffffff;
  border-color: transparent transparent #ffffff #ffffff;
}

.fl-football-pitch .corner-arc.top-left {
  top: 0;
  left: 0;
  border-radius: 0 0 100% 0;
}

.fl-football-pitch .corner-arc.top-right {
  top: 0;
  right: 0;
  border-radius: 0 0 0 100%;
  border-color: transparent #ffff00 #ffff00 transparent;
}

.fl-football-pitch .corner-arc.bottom-left {
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 0;
  border-color: #ffff00 transparent transparent #ffff00;
}

.fl-football-pitch .corner-arc.bottom-right {
  bottom: 0;
  right: 0;
  border-radius: 100% 0 0 0;
  border-color: #ffff00 #ffff00 transparent transparent;
}

/* Enhanced Player Dots with Team Badges */
.fl-player-dot {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.fl-home-player {
  background: linear-gradient(135deg, #0073aa 0%, #005f88 100%);
  border: 3px solid #fff;
}

.fl-away-player {
  background: linear-gradient(135deg, #dc3232 0%, #b72b2b 100%);
  border: 3px solid #fff;
}

.fl-player-dot:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

/* Enhanced Tooltips with Formation Info */
.fl-player-name-tooltip {
  visibility: hidden;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.3s;
  font-size: 0.95em;
  min-width: 120px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.fl-player-name-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.fl-player-dot:hover .fl-player-name-tooltip {
  visibility: visible;
  opacity: 1;
  bottom: calc(100% + 5px);
}

.player-on-pitch {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 7%;
  font-size: 1.6vmin;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.player-visual-wrapper {
  position: relative;
  width: 65%;
  padding-bottom: 65%;
  margin-bottom: 0.3em;
}

.player-number-badge {
  position: absolute;
  top: -0.4em;
  left: -0.4em;
  background-color: #555555;
  color: #ffffff;
  font-size: 0.65em;
  font-weight: bold;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 1;
  border: 0.1em solid #ffffff;
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.player-name-display {
  font-size: 0.75em;
  color: #ffffff;
  background-color: transparent;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

.player-photo-on-pitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.12em solid var(--modern-icon-border, #ffffff);
  object-fit: cover;
  background-color: var(--modern-bg, #f70000) #f4f6f8;
  display: block;
  box-sizing: border-box;
}

/**************** Responsive Adjustments *************************/
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
  .fl-football-pitch {
    padding-bottom: 65%; /* Slightly more vertical space */
  }

  .fl-player-dot {
    width: 45px;
    height: 45px;
    font-size: 1.1em;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
  .fl-football-pitch {
    padding-bottom: 75%; /* Even more vertical space for tablets */
  }

  .fl-player-dot {
    width: 40px;
    height: 40px;
    font-size: 1em;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
  .fl-football-pitch {
    padding-bottom: 85%; /* Optimized for landscape phones */
  }

  .fl-player-dot {
    width: 35px;
    height: 35px;
    font-size: 0.9em;
  }
}

/******************************* subs *****************************/

/* الوضع العادي */
.fl-lineups-wrapper {
  display: flex;
  gap: 2px;
  justify-content: space-between;
  margin: 2px 0;
}

.fl-team-lineup {
  width: 49.5%;
  border-radius: 8px;
  padding: 2px;
  background-color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.fl-team-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.fl-players-list {
  margin-top: 10px;
}

.fl-players-list h5 {
  margin-bottom: 2px;
}

.fl-player-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
}

.fl-player-number {
  font-weight: bold;
  width: 30px;
}

.fl-player-name {
  flex-grow: 1;
  margin-left: 10px;
}

.fl-player-pos {
  color: #777;
  font-style: italic;
}

/* تنسيقات خاصة بالقوائم داخل هذا القسم */
.fl-team-lineup ol,
.fl-team-lineup ul {
  margin: 0 1em 0.5em 0;
}

/************** responsive لكل الشاشات ****************/
@media (max-width: 768px) {
  .fl-lineups-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
  }

  .fl-team-lineup {
    width: 49.5%;
  }

  .fl-player-item {
    flex-direction: row;
    align-items: center;
  }

  .fl-player-number,
  .fl-player-name,
  .fl-player-pos {
    width: auto;
    margin-bottom: 0;
  }

  .fl-player-name {
    margin-left: 2px;
  }
}

/************** تقليل حجم الخط لأقل من 350px ************/
@media (max-width: 350px) {
  .fl-player-name,
  .fl-player-number,
  .fl-player-pos,
  .fl-team-name,
  .fl-formation,
  .fl-events,
  .fl-players-list h5 {
    font-size: 10px !important;
  }

  .fl-team-logo {
    width: 20px;
    height: 20px;
  }
}

/************* hedaer lineups sub ***************

/* الحاوية الرئيسية للرأس */
.fl-lineups-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #ffffff;
  direction: rtl; /* لأن المحتوى بالعربية */
  border-radius: 8px;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* كل عمود داخل الرأس */
.fl-lineups-col {
  flex: 1;
  text-align: center;
}

/* العمود الأوسط أصغر */
.fl-events-title {
  flex: 0.5;
}

/* نص التشكيلة */
.fl-formation {
  font-size: 15px;
  font-weight: bold;
  color: #222;
  margin: 0;
}

/* نص الأحداث */
.fl-events {
  font-size: 14px;
  font-weight: bold;
  color: #555;
  margin: 0;
}

.fl-team-info {
  display: flex;
  align-items: center;
  justify-content: center; /* يوسّط المحتوى أفقيًا */
  gap: 8px; /* مسافة بين الصورة والاسم */
  direction: rtl; /* لأن النص عربي */
  margin-bottom: 2px;
}

.fl-team-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.fl-team-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/************ responsive code hedaer lineups sub **********/

@media (max-width: 768px) {
  .fl-lineups-header {
    flex-direction: row; /* حافظ على التنسيق الأفقي */
    flex-wrap: wrap; /* يسمح بتغليف العناصر إذا ضاق العرض */
  }

  .fl-lineups-col,
  .fl-events-title {
    width: auto;
    margin-bottom: 0;
  }

  .fl-team-info {
    flex-direction: row;
    gap: 5px;
  }

  .fl-formation,
  .fl-events,
  .fl-team-name {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .fl-lineups-header {
    padding: 8px;
  }

  .fl-team-logo {
    width: 22px;
    height: 22px;
  }

  .fl-formation,
  .fl-events,
  .fl-team-name {
    font-size: 13px;
  }

  .fl-lineups-col,
  .fl-events-title {
    margin-bottom: 8px;
  }
}

@media (max-width: 400px) {
  .fl-lineups-header {
    padding: 6px;
  }

  .fl-team-logo {
    width: 20px;
    height: 20px;
  }

  .fl-formation,
  .fl-events,
  .fl-team-name {
    font-size: 12.5px;
  }

  .fl-lineups-col,
  .fl-events-title {
    margin-bottom: 6px;
  }
}

@media (max-width: 350px) {
  .fl-lineups-header {
    padding: 5px;
  }

  .fl-team-logo {
    width: 18px;
    height: 18px;
  }

  .fl-formation,
  .fl-events,
  .fl-team-name {
    font-size: 12px;
  }

  .fl-lineups-col,
  .fl-events-title {
    margin-bottom: 5px;
  }

  .fl-team-info {
    gap: 1px;
  }
}

/* League Table */
/* SportsPress */

.sp-align-left {
	text-align: left;
}

.sp-align-right {
	text-align: right;
}

.sp-align-center {
	text-align: center;
}

/* Header */
.sp-header {
	position: relative;
	overflow: visible;
	z-index: 10000;
}

/* Templates */
.sp-template {
	margin-bottom: 1.5em;
}
.sp-template-profile-selector {
	clear: both;
	overflow: hidden;
}
.sp-template-logo,
.sp-template-photo {
	float: left;
	margin-bottom: 2em;
	margin-right: 2em;
	max-width: 50%;
}
.sp-template-event-logos {
	text-align: center;
}
.sp-template-details {
	display: inline;
}
.sp-template-details dl {
	overflow: hidden;
}

/* Tabs */
.sp-tab-menu {
	display: block;
	clear: both;
	padding: 0 5px;
	margin: 0 0 1.5em;
	list-style: none;
}
.sp-tab-menu-item {
	display: inline-block;
	margin: 0;
}
.sp-tab-menu-item a {
	display: block;
	margin: 0 10px;
	color: inherit;
	opacity: 0.5;
	transition: all .3s;
}
.sp-tab-menu-item a:focus {
	outline: none;
}
.sp-tab-menu-item-active a,
.sp-tab-menu-item a:hover {
	color: inherit;
	opacity: 1;
}
.sp-tab-content {
	display: none;
}

/* Profile selector */
.sp-template-profile-selector {
	text-align: right;
	margin-bottom: 0.5em;
}

/* Data Tables */
.sp-scrollable-table-wrapper {
	width: 100%;
	overflow: hidden;
	overflow-x: auto;
}
.sp-data-table {
	width: 100%;
	table-layout: auto;
	border-spacing: 0;
}
.sp-paginated-table {
	margin-bottom: 0;
}
.sp-data-table thead th {
	white-space: nowrap;
}
.sp-data-table thead .sorting,
.sp-data-table thead .sorting_asc,
.sp-data-table thead .sorting_desc,
.sp-data-table thead .sorting_asc_disabled,
.sp-data-table thead .sorting_desc_disabled {
	cursor: pointer;
	position: relative;
}
.sp-data-table tbody a {
	text-decoration: none;
}
.sp-data-table .sorting:after,
.sp-data-table .sorting_asc:after,
.sp-data-table .sorting_desc:after {
	font-family: dashicons;
	margin: 0 -.2em;
}
.sp-data-table .sorting:after {
	content: "\f156";
	color: transparent;
	position: absolute;
}
.sp-data-table .sorting_asc:after {
	content: "\f142";
	position: absolute;
}
.sp-data-table .sorting_desc:after {
	content: "\f140";
	position: absolute;
}
.sp-data-table .data-name {
	text-align: left;
}
.sp-data-table .data-number,
.sp-data-table .data-rank {
	width: 1px;
}
.sp-data-table .sp-checkbox {
	font-family: sportspress;
	vertical-align: bottom;
}

/* Post Content */
.sp-post-content {
	clear: both;
}

/* Pagination */
.sp-table-wrapper .dataTables_paginate {
	text-align: center;
}
.sp-table-wrapper .dataTables_paginate .paginate_button {
	margin: 0.5em;
	cursor: pointer;
	display: inline-block;
}
.sp-table-wrapper .dataTables_paginate .previous {
	float: left;
	margin-left: 0;
}
.sp-table-wrapper .dataTables_paginate .next {
	float: right;
	margin-right: 0;
}
.sp-table-wrapper .dataTables_paginate .current {
	opacity: 0.5;
	color: inherit;
	cursor: default;
}
.sp-table-wrapper .dataTables_paginate .disabled {
	opacity: 0;
	cursor: default;
}

/* Post Excerpt */
.sp-excerpt {
	display: block;
	margin-bottom: 1em;
}

/* League Table */
.sp-league-table td.has-logo {
	line-height: 2em;
}
.sp-league-table .team-logo {
	width: 2em;
	height: 2em;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}
.sp-league-table .data-name .team-logo {
	margin-right: 0.5em;
}
.sp-league-table .team-logo img {
	width: auto;
	height: auto;
	max-width: 2em;
	max-height: 2em;
}

/* Team Gallery */
.sp-template-team-gallery img {
  padding: 1em;
}

/* Player List */
.sp-player-list td {
	line-height: 2em;
}
.sp-player-list .data-name .player-photo,
.sp-player-list .data-name .player-flag,
.sp-player-list .data-team .team-logo {
	width: 2em;
	height: 2em;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}
.sp-player-list .data-name .player-photo,
.sp-player-list .data-name .player-flag {
	margin-right: 0.5em;
}
.sp-player-list .data-name .player-photo img,
.sp-player-list .data-name .player-flag img,
.sp-player-list .data-team .team-logo img {
	width: auto;
	height: auto;
	max-width: 2em;
	max-height: 2em;
}

/* Staff */
.sp-staff-role-delimiter {
	margin: 0 0.125em;
}

/* Button */
.sp-button {
	border: none;
	cursor: pointer;
}

/* Messages */
.sp-message {
	padding: 1em;
	border: 1px solid transparent;
	text-align: center;
}

/* Event Logos */
.sp-event-logos a {
	text-decoration: none;
	color: inherit;
}

.sp-event-logos img {
	display: inline !important;
	vertical-align: middle;
}

/* Events */
.sp-event-overview,
.sp-event-performance-tables {
	overflow: hidden;
	clear: both;
}

/* Event Logos */
.sp-event-logos .sp-team-logo {
	white-space: nowrap;
	display: block;
}

.sp-event-logos .sp-team-logo .sp-team-result {
	display: block;
	margin: 0.5em 0;
}

/* Event Venue */
.sp-event-venue thead th {
	white-space: normal;
}

/* Event Performance */
.sp-template-event-performance-icons thead {
	display: none;
}
.sp-event-performance .sub {
	background: rgba(0,0,0,0.05);
}
.sp-event-performance .sub-in,
.sp-event-performance .sub-out {
	cursor: default;
}
.sp-event-performance .sub-in:before,
.sp-event-performance .sub-out:before {
	font-family: dashicons;
}
.sp-event-performance .sub-in:before {
	content: "\f140";
}
.sp-event-performance .sub-out:before {
	content: "\f142";
}
.sp-event-performance .sp-performance-icons {
	width: 25%;
}
.sp-event-performance .sp-event-star {
	color: #f4d014;
}
.sp-event-performance .sp-event-star-number {
	margin-left: -20px;
	width: 20px;
	text-align: center;
	display: inline-block;
	font-size: smaller;
	line-height: 20px;
}

/* Event Performance (Icons) */
.sp-event-performance-teams .sp-template-event-performance-icons {
	box-sizing: border-box;
	width: 50%;
	float: left;
	clear: left;
	padding-right: 10px;
}

.sp-event-performance-teams .sp-template-event-performance-icons:nth-child(2n) {
	float: right;
	clear: right;
	padding-right: 0;
	padding-left: 10px;
}

.sp-template-event-performance-icons .sp-player-position {
	display: block;
}

/* Event Calendar */
.sp-event-calendar {
	border-spacing: 0;
}
.sp-event-calendar a {
	text-decoration: none;
}
.sp-event-calendar tbody td,
.sp-event-calendar thead th {
	text-align: center;
}
.sp-event-calendar #next {
	text-align: right;
}
.sp-event-calendar #prev {
	text-align: left;
}

/* Event List */
.sp-event-list .data-date date,
.sp-event-list .data-time date {
	display: none !important;
}
.sp-event-list .data-article {
	white-space: nowrap;
}
.sp-event-list .data-article a .dashicons {
	padding-right: 3px;
}
.sp-event-list .data-time,
.sp-event-list .data-results {
	white-space: nowrap;
}
.sp-event-list .data-home {
	text-align: right;
}
.sp-event-list .data-away {
	text-align: left;
}
.sp-event-list td.has-logo {
	line-height: 2em;
}
.sp-event-list .team-logo {
	width: 2em;
	height: 2em;
	margin-right: 0.5em;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}
.sp-event-list .team-logo img {
	width: auto;
	height: auto;
	max-width: 2em;
	max-height: 2em;
}
.sp-event-list .data-home img,
.sp-event-list .data-away img {
	display: inline-block;
	vertical-align: middle;
}
.sp-event-list .data-home img {
	margin-left: 8px;
}
.sp-event-list .data-away img {
	margin-right: 8px;
}
.sp-event-list-format-homeaway .data-time {
	text-align: center;
	padding-left: 1em;
	padding-right: 1em;
}

/* Event Blocks */
.sp-event-blocks thead {
	display: none;
}
.sp-event-blocks .sp-event-date,
.sp-event-blocks .sp-event-time,
.sp-event-blocks .sp-event-results,
.sp-event-blocks .sp-event-title {
	text-align: center;
	display: block;
	margin: 10px 0;
	clear: none;
}
.sp-event-blocks .sp-event-league,
.sp-event-blocks .sp-event-season,
.sp-event-blocks .sp-event-venue {
	text-align: center;
	margin: 0 20%;
	padding: 0 20px;
}
.sp-event-blocks .team-logo {
	margin: 10px;
	width: 20%;
	height: 4em;
	max-width: 6em;
	text-align: center;
}
.sp-event-blocks .logo-odd {
	float: left;
}
.sp-event-blocks .logo-even {
	float: right;
}
.sp-event-blocks .team-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
.sp-fixtures-results {
	clear: both;
}
.widget .sp-event-blocks .sp-event-title {
	margin: 10px;
	padding: 0;
	clear: both;
}

span.sp_event_spec_label {
	font-weight: bold;
}

/* Event Logos Block */
.sp-template-event-logos-block .team-logo {
	float: none;
	max-width: none;
	width: 100%;
	height: auto;
	color: inherit;
}

.sp-template-event-logos-block .team-logo img {
	vertical-align: middle;
}

.sp-template-event-logos-block .sp-team-name {
	display: block;
	clear: both;
	vertical-align: middle;
	font-size: 28px;
}

.sp-template-event-logos-block .sp-event-results {
	font-size: 36px;
}

/* Event Form */
.sp-form-events {
	text-align: center;
}

.sp-form-events .sp-form-event-link {
	display: inline-block;
	text-align: center;
	vertical-align: text-top;
	line-height: 1.5em;
	width: 1.5em;
	margin: 0 0 0.25em;
	color: #fff !important;
	font-weight: normal;
}

.sp-form-events .sp-form-event-link:hover {
	color: #fff !important;
}

/* Countdowns */
.sp-template-countdown .event-image img {
	display: block;
	margin: 0 auto;
}
.sp-template-countdown .event-name {
	clear: both;
	overflow: hidden;
}
.sp-template-countdown .team-logo {
	width: 20%;
	height: auto;
	max-width: 4em;
}
.sp-template-countdown .logo-odd {
	float: left;
	margin-right: 10px;
}
.sp-template-countdown .logo-even {
	float: right;
	margin-left: 10px;
}
.sp-template-countdown .team-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
.sp-template-countdown .sp-countdown {
	clear: both;
}

/* Google Maps */
.sp-google-map-container {
	position: relative;
}
.sp-google-map {
	width: 100%;
	height: 320px;
}
.sp-google-map-link {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../images/maps/pin.png) no-repeat center center;
	background-size: 26px 82px;
}
.sp-google-map img {
	max-width: none !important;
}
.sp-venue-map {
	margin-bottom: 4em;
}

/* View All */
.sp-view-all-link {
	display: block;
	margin-top: 0.5em;
}

/* Highlight & Heading */
.sp-highlight,
.sp-heading {
	font-weight: bold;
}

/* Hidden Responsive Element */
.sp-desktop {
	display: none;
}

/* Admin Bar */
#wpadminbar #wp-admin-bar-sportspress>.ab-item:before {
	font-family: sportspress, dashicons;
}

#wpadminbar #wp-admin-bar-sportspress>.ab-item:before {
	content: "\f111";
	top: 2px;
}

/* Media Queries */
@media screen and (min-width: 801px) {
	/* Widget Alignment */
	.sp-widget-align-none {
		clear: both;
	}
	.sp-widget-align-left {
		width: 50%;
		float: left;
		clear: left;
		padding-right: 10px;
		box-sizing: border-box;
	}
	.sp-widget-align-right {
		width: 50%;
		float: right;
		clear: right;
		padding-left: 10px;
		box-sizing: border-box;
	}

	/* Hidden Responsive Element */
	.sp-desktop {
		display: block;
	}
	.sp-mobile {
		display: none;
	}
}

@media screen and (min-width: 601px) {
	.sp-event-logos .sp-team-logo {
		display: inline-block;
	}

	.sp-event-logos-2 .sp-team-logo {
		display: inline;
	}

	.sp-event-logos-2 .sp-team-logo .sp-team-result {
		display: inline-block;
		margin: 0 0.25em;
	}

	.sp-template-logo + .sp-post-content {
		clear: left;
	}

	.sp-template-photo + .sp-post-content {
		clear: none;
	}

	.sp-template-event-logos-block .team-logo {
		width: 33%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sp-template-event-logos-block .team-logo img {
		height: 100px;
	}

	.sp-template-event-logos-block .logo-odd {
		text-align: left;
		float: left;
	}

	.sp-template-event-logos-block .logo-even {
		text-align: right;
		float: right;
	}

	.sp-template-event-logos-block .logo-odd img {
		margin-right: 10px;
	}

	.sp-template-event-logos-block .logo-even img {
		margin-left: 10px;
	}

	.sp-template-event-logos-block .sp-team-name {
		display: inline;
		clear: none;
	}
}

/*************************** /* Widget: Results */ 


/* Widget: Results */
.widget-results .card__content {
  padding: 0;
}

.widget-results__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget-results__item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.widget-results__item:first-child {
  border-top: none;
}

.widget-results__title {
  font-size: 9px;
  line-height: 1.2em;
  text-align: center;
  font-weight: 400;
  font-style: normal;
  color: #9a9da2;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.widget-results__content {
  display: flex;
  align-items: center;
  padding: 12px 10px;
}

@media (min-width: 1200px) {
  .widget-results__content {
    padding: 16px 20px;
  }
}

.widget-results__team {
  flex-grow: 1;
  order: 0;
  flex-basis: 35%;
  min-width: 35%;
  display: flex;
  align-items: center;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .widget-results__team {
    flex-basis: 25%;
    min-width: 25%;
  }
}

.widget-results__team-logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 20px;
  min-width: 20px;
  text-align: center;
}

@media (min-width: 992px) {
  .widget-results__team-logo {
    margin-right: 8px;
    width: 26px;
    min-width: 26px;
  }
}

.widget-results__team--even .widget-results__team-logo {
  order: 2;
  margin-right: 0;
  margin-left: 5px;
}

@media (min-width: 992px) {
  .widget-results__team--even .widget-results__team-logo {
    margin-right: 0;
    margin-left: 8px;
  }
}

.widget-results__team-details {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-results__team-name {
  text-transform: none;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2em;
  font-style: normal;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .widget-results__team-name {
    font-size: 12px;
  }
}

.widget-results__team-info {
  font-family: inherit;
  font-size: 8px;
  display: block;
  line-height: 1.2em;
}

@media (min-width: 992px) {
  .widget-results__team-info {
    font-size: 9px;
  }
}

.widget-results__team--even {
  order: 2;
}

.widget-results__team--even .widget-results__team-details {
  flex: 1;
  text-align: right;
}

.widget-results__result {
  order: 1;
  flex-basis: 30%;
  min-width: 30%;
  text-align: center;
}

.widget-results__score {
  font-family: inherit;
  color: #fff;
  font-size: 10px;
  line-height: 1.2em;
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .widget-results__score {
    font-size: 12px;
  }
}

.widget-results__score-winner::before {
  content: "";
  display: inline-block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #ff0044; /* لون التظليل للفائز */
  width: 0;
  height: 0;
  margin-right: 0.5em;
}

.widget-results__score-loser ~ .widget-results__score-winner::before {
  display: none;
}

.widget-results__score-loser ~ .widget-results__score-winner::after {
  content: "";
  display: inline-block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid #ff0044;
  width: 0;
  height: 0;
  margin-left: 0.5em;
}

.widget-results__status {
  display: block;
  font-size: 8px;
  font-family: inherit;
  line-height: 1.2em;
  color: #9a9da2;
  text-align: center;
  padding-bottom: 16px;
  margin: -10px auto 0 auto;
}

@media (min-width: 992px) {
  .widget-results__status {
    font-size: 9px;
    width: 50%;
    margin-top: -18px;
  }
}