/* tabs.css */
:root {
                --Main-Color: #b51818;
                --Secondary-Color: #474747;
                --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 #ddd;
  justify-content: space-between; /* Distribute tabs evenly */
  background: #f9f9f9;
  overflow-x: auto; /* Enable horizontal scrolling on small screens */
  white-space: nowrap; /* Prevent tabs from wrapping to the next line */
  font-weight: bold;
}

.tabs li {
  flex: 1; /* Make all tabs take equal width */
  text-align: center; /* Center the text inside each tab */
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-bottom: none;
  background: #ff0101;
  transition: all 0.3s ease;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  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: #fff;
  border-bottom: 2px solid #fff;
  font-weight: bold;
  color: #333;
}

/* Tab Content */
.tab-content {
  display: none;
  padding: 2px;
  border: 1px solid #ddd;
  background: #fff;
  animation: fadeIn 0.3s ease-in-out;
}

.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: 8px 15px;
    font-weight: bold;
  }

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

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

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

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

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

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

/* Style du conteneur principal des lineups */
#tab-1 {
  padding: 5px;
  margin: 2px 2px 15px 2px;
  background: #f9f9f9; /* 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-1 h3 {
  text-align: left;
  font-size: 2rem;
  margin-bottom: 0px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #444; /* Couleur légèrement plus douce */
}

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

/* Conteneur des deux lineups */
.details {
  justify-content: space-around;
  gap: 30px;
  flex-wrap: wrap;
}

/* Style de chaque lineup */
.details {
  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;
}

/* Style du conteneur principal des lineups */
#tab-2 {
  padding: 5px;
  margin: 2px 2px 15px 2px;
  background: #f9f9f9; /* 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-2 h3 {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #444; /* Couleur légèrement plus douce */
}

/* Conteneur des deux lineups */
.lineup {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  flex-wrap: wrap;
}

/* Style de chaque lineup */
.lineup {
  flex: 1;
  background: #ffffff; /* Fond blanc pour un meilleur contraste */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre subtile */
}

.lineup table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.lineup th,
.lineup td {
  border: 1px solid #f7efef30;
  padding: 8px;
  text-align: center;
}

.lineup th {
  background-color: #f4f4f4;
  font-weight: bold;
}

/* Effet au survol des lineups */
.lineup:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Titre de chaque équipe */
.lineup h4 {
  padding-top: 10px;
  color: #333; /* Couleur sombre pour le titre */
  font-size: 1.5rem;
  margin-bottom: 15px;
  padding-bottom: 2px;
  border-bottom: 2px solid #ddd; /* Ligne de séparation grise */
  text-align: center;
}

/* Liste des joueurs */
.lineup ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lineup li {
  padding: 10px 0;
  border-bottom: 1px solid #eee; /* Ligne de séparation discrète */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  font-size: 1rem;
  color: #555; /* Couleur du texte */
}

.lineup li:hover {
  background: #f4f4f4; /* Fond gris clair au survol */
  color: #000; /* Texte plus sombre au survol */
}

/* Numéro des joueurs */
.lineup li .player-number {
  font-weight: bold;
  color: #444;
  margin-right: 10px;
}

/* Nom des joueurs */
.lineup li .player-name {
  flex: 1;
  text-align: left;
}

/* Information sur le coach */
.lineup p {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 2px solid #ddd; /* Ligne de séparation grise */
  font-size: 1rem;
  color: #666; /* Couleur du texte */
  text-align: center;
}

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

  .lineup {
    margin-bottom: 20px;
  }
}

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

.lineup {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Style du conteneur principal des lineups */
#tab-3 {
  padding: 5px;
  margin: 2px 2px 15px 2px;
  background: #f9f9f9; /* 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-3 h3 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #444; /* Couleur légèrement plus douce */
}

.statistics {
  display: flex;
  justify-content: space-around;
  gap: 30px;
  flex-wrap: wrap;
}

/* Style de chaque lineup */
.statistics {
  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;
}

.statistics table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.statistics th,
.statistics td {
  border: 1px solid #f7f4f4;
  padding: 8px;
  text-align: center;
}

.statistics th {
  background-color: #f4f4f4;
  font-weight: bold;
}

.statistics:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Titre de chaque équipe */
.statistics h4 {
  color: #333; /* Couleur sombre pour le titre */
  font-size: 1.5rem;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd; /* Ligne de séparation grise */
  text-align: center;
}

/* Liste des joueurs */
.statistics ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.statistics li {
  padding: 10px 0;
  border-bottom: 1px solid #eee; /* Ligne de séparation discrète */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  font-size: 1rem;
  color: #555; /* Couleur du texte */
}

.statistics li:hover {
  background: #f4f4f4; /* Fond gris clair au survol */
  color: #000; /* Texte plus sombre au survol */
}

/* Numéro des joueurs */
.statistics li .player-number {
  font-weight: bold;
  color: #444;
  margin-right: 10px;
}

/* Nom des joueurs */
.statistics li .player-name {
  flex: 1;
  text-align: left;
}

/* Information sur le coach */
.statistics p {
  margin-top: 5px;
  padding-top: 10px;
  border-top: 2px solid #ddd; /* Ligne de séparation grise */
  font-size: 1rem;
  color: #666; /* Couleur du texte */
  text-align: center;
}

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

  .statistics {
    margin-bottom: 20px;
  }
}

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

.statistics {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Fix column widths */
.statistics th:first-child,
.statistics td:first-child {
  width: 30%; /* Type column */
}

.statistics th:nth-child(2),
.statistics td:nth-child(2),
.statistics th:nth-child(3),
.statistics td:nth-child(3) {
  width: 40%; /* Home and Away columns */
}

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

/* Style du conteneur principal des lineups */
#tab-4 {
  padding: 5px;
  background: #ffffff; /* Couleur de fond plus douce */
  color: #333; /* Couleur du texte plus lisible */
  border-radius: 10px;
  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;
}

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

#tab-5 {
  padding: 5px;
  background: #f9f9f9; /* Couleur de fond plus douce */
  color: #333; /* Couleur du texte plus lisible */
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Titre principal */
#tab-5 h3 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #444; /* Couleur légèrement plus douce */
}
.standings {
  display: flex;
  justify-content: space-around;
  gap: 2px;
  flex-wrap: wrap;
}

/* Style de chaque lineup */
.standings {
  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;
}

.standings table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2px;
}

.standings th,
.standings td {
  border: 1px solid #f7f4f4;
  padding: 8px;
  text-align: center;
}

.standings th {
  background-color: #f4f4f4;
  font-weight: bold;
}

.standings:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Titre de chaque équipe */
.standings h4 {
  color: #333; /* Couleur sombre pour le titre */
  font-size: 0.7rem;
  margin-bottom: 2px;
  padding-bottom: 2px;
  text-align: center;
}

/* Liste des joueurs */
.standings ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.standings li {
  padding: 10px 0;
  border-bottom: 1px solid #eee; /* Ligne de séparation discrète */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  font-size: 1rem;
  color: #555; /* Couleur du texte */
}

.standings li:hover {
  background: #f4f4f4; /* Fond gris clair au survol */
  color: #000; /* Texte plus sombre au survol */
}

/* Numéro des joueurs */
.standings li .player-number {
  font-weight: bold;
  color: #444;
  margin-right: 10px;
}

/* Nom des joueurs */
.standings li .player-name {
  flex: 1;
  text-align: left;
}

/* Information sur le coach */
.standings p {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 2px solid #ddd; /* Ligne de séparation grise */
  font-size: 1rem;
  color: #666; /* Couleur du texte */
  text-align: center;
}

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

  .standings {
    margin-bottom: 20px;
  }
}

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

.standings {
  animation: fadeIn 0.5s ease-out forwards;
}

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

.match-card {
  background: white;
  border-radius: 12px;
  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: 8px;
}

.league-logo {
  margin-right: 10px; /* Espacement entre le logo et le nom */
  width: 25px; /* Ajuster la taille du logo si nécessaire */
  height: auto;
}
/* Match Content Styles */
.match-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

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

.team-logo {
  width: 30px;
  height: 30px;
  background: #f5f5f5;
  border-radius: 50%;
  padding: 5px;
}

.team-name {
  font-weight: 600;
  text-align: center;
}

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

.match-time {
  color: #666;
  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: 10px;
}

.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: 80px; /* Further adjust width for very small screens */
  }

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

/***************** Top standings Table Styles *********************/

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

}

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

.standings-table th,

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

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

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

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

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

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

.standings-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) {
  .standings-table {
    font-size: 12px;
  }

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

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

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

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

  .standings-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 {
  overflow-x: auto; /* Enable horizontal scrolling on small screens */
  white-space: nowrap; /* Prevent tabs from wrapping to the next line */
  border-radius: 5px;
  background: linear-gradient(to left, #d0d8e2, #f37575);
  padding: 0 10px;
  color: white;
  direction: rtl;
  margin: 5px 2px 5px 2px;
  display: flex;
  flex-direction: row; /* الترتيب من اليمين لليسار */
  align-items: center;
  gap: 15px; /* مسافة بين العناصر */
  text-align: right;
}

.league-name {
  font-size: 20px;
  font-weight: bold;
}

.season {
  font-size: 12px;
  color: #e71306;
  margin-top: 3px;
}

.country {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-top: 8px;
}

.country img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.logo {
  display: inline-block;
  background-color: white;
  padding: 20px 10px 20px 20px; /* أعلى، يمين، أسفل، يسار */
  border-radius: 12px;
  border: 2px solid #ccc;
}


.logo img {
  max-height: 50px; /* لضبط أقصى ارتفاع دون فرض حجم */
  max-width: 100%;   /* مهم لو الشعار عريض */
  display: block;
}

/********************** 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;
  }
}