/* =====================================================
   ملف CSS الصفحة الرئيسية - الدوري الليبي
   =====================================================
   يحتوي هذا الملف على:
   1. متغيرات الألوان والتدرجات
   2. الوضع الليلي (Dark Mode)
   3. تنسيق الشريط الجانبي الأيسر (Left Sidebar)
   4. تنسيق الشريط العلوي (Navigation Bar)
   5. تنسيق المحتوى (Content Sections)
   6. تنسيق البطاقات والجداول
   7. الاستجابة للهواتف الذكية (Media Queries)
   8. نظام الشبكة (Grid System)
===================================================== */

/* ---- استيراد الخط (Cairo Font) ---- */
/* استيراد خط Cairo - خط عربي احترافي */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

/* ============================================
   0. تنسيق العناصر الأساسية
   ============================================ */

/* توحيد خطوط الفاصل (Horizontal Rule) */
hr {
  border: none;
  border-top: 1px solid rgba(96, 165, 250, 0.4);
  background: none;
}

body.dark-mode hr {
  border-top-color: rgba(96, 165, 250, 0.4);
}

body hr {
  border-top-color: rgba(96, 165, 250, 0.4);
}

/* ============================================
   1. متغيرات الألوان والتدرجات الأساسية
   ============================================ */
:root{
 /* الألوان الأساسية للموضوع الفاتح */
 --bg: #f8fafc;                              /* خلفية الصفحة */
 --card: #ffffff;                            /* بطاقات المحتوى */
 --accent: #2563eb;                          /* اللون الأساسي (أزرق) */
 --accent2: #3b82f6;                         /* اللون الأساسي الفاتح */
 --accent-light: #eff6ff;                    /* خلفية زرقاء فاتحة جداً */
 
 /* ألوان النصوص */
 --text: #1e293b;                            /* لون النص الأساسي */
 --text-secondary: #475569;                  /* لون النص الثانوي */
 --muted: #94a3b8;                           /* لون النص الخافت */
 
 /* الحدود والظلال */
 --border: rgba(0,0,0,0.08);                 /* لون الحد الرئيسي */
 --border-light: rgba(0,0,0,0.04);           /* لون الحد الخفيف */
 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --shadow-lg: 0 12px 20px -3px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
 --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
 
 /* التدرجات اللونية */
 --gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
 --gradient-secondary: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
 --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
 
 /* نصف قطر الزوايا */
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 16px;
 --radius-xl: 20px;
 --radius-2xl: 24px;
 
 /* المدة الزمنية للانتقالات */
 --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------
 2) قواعد عامة للصفحة
 -------------------------------------------- */
* {
 box-sizing: border-box;
 font-family: 'Cairo', sans-serif;
}

html {
 scroll-behavior: smooth;
}

html, body {
 height: 100%;
 direction: rtl;
}

body {
 background: var(--bg);
 margin: 0;
 padding: 0;
 padding-left: 260px;
 color: var(--text);
 line-height: 1.6;
 font-weight: 400;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 letter-spacing: 0.3px;
 transition: padding-left var(--transition-base);
 position: relative;
}

.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
}

.content-section {
 padding: 40px 0 0 0;
 min-height: 60vh;
}

h1 {
 font-size: 2.5rem;
 font-weight: 800;
 color: var(--text);
 margin-bottom: 1rem;
 line-height: 1.2;
}

h2 {
 font-size: 2.2rem;
 font-weight: 800;
 color: var(--accent);
 text-align: center;
 margin-bottom: 2.5rem;
 line-height: 1.2;
 letter-spacing: -0.5px;
}

h3 {
 font-size: 1.5rem;
 font-weight: 600;
 color: var(--text);
 margin-bottom: 1rem;
 line-height: 1.4;
}

h4 {
 font-size: 1.25rem;
 font-weight: 600;
 color: var(--text-secondary);
 margin-bottom: 0.75rem;
 line-height: 1.4;
}

p {
 margin-bottom: 1rem;
 color: var(--text-secondary);
 line-height: 1.6;
}

/* ============================================
   2. تخصيص شريط التمرير (Scrollbar)
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--card);
}
::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent2);
}
::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-button:single-button:increment {
    display: block;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 2px;
}

::-webkit-scrollbar-button:single-button:decrement {
    display: block;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 2px;
}

::-webkit-scrollbar-button:single-button:increment:hover {
    background: var(--accent2);
}

::-webkit-scrollbar-button:single-button:decrement:hover {
    background: var(--accent2);
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #1c2229;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--accent);
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--accent2);
}
/* ============================================
   3. زر التبديل (Toggle Switch) - الوضع الليلي والترجمة
   ============================================ */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 10px;
  margin-bottom: 15px;
  width: 100%;
  justify-content: flex-end;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 26px;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--accent2);
}

input:checked + .slider:before {
  transform: translateX(24px);
}

.label-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* ============================================
   4. الاستجابة للهواتف الذكية (Media Queries)
   ============================================ */
/* إخفاء عناصر الموبايل في الشاشات الكبيرة */
.mobile-only {
    display: none !important;
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Hide scrollbar for all elements in mobile view */
    *::-webkit-scrollbar {
        display: none !important;
    }
    
    * {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    /* 1. General Layout */
    body {
        padding-left: 0;
        padding-top: 0; /* Removed top padding */
        padding-bottom: 80px; /* Space for fixed bottom nav */
    }

    .container {
        padding: 0 16px;
    }

    /* 2. Hide Desktop Elements */
    .left-sidebar, 
    .desktop-only-toggle {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    /* 3. Top Search Bar */
    .search-bar {
        position: sticky; /* Changed to sticky */
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--card);
        display: flex;
        align-items: center;
        padding: 0 16px;
        z-index: 1000;
        box-shadow: none;
        gap: 12px;
        border-bottom: 1px solid var(--border-light);
    }

    #searchInput {
        flex: 1;
        height: 40px;
        background: var(--bg);
        border: none;
        border-radius: 12px;
        padding: 0 16px;
        font-size: 14px;
        color: var(--text);
    }

    #settingsBtn {
        background: none !important;
        color: var(--text) !important;
        padding: 8px !important;
        box-shadow: none !important;
        font-size: 24px !important;
        z-index: 1001; /* Ensure it's clickable */
    }

    /* 4. Main Navigation (Top Scrollable) */
    .main-nav {
        display: flex;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        background: var(--card);
        z-index: 99;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0 10px;
        align-items: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        border-bottom: 1px solid var(--border);
        -webkit-overflow-scrolling: touch;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav button {
        padding: 0 16px;
        height: 100%;
        font-size: 14px;
        color: var(--text-secondary);
        border-bottom: 2px solid transparent;
        border-radius: 0;
        display: flex;
        align-items: center;
    }

    .main-nav button.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }
    
    .main-nav button.active::after {
        display: none; /* Remove desktop animation */
    }

    /* Hide Bottom Nav & Drawer */
    .mobile-bottom-nav,
    .mobile-menu-drawer,
    .mobile-menu-overlay {
        display: none !important;
    }

    /* 6. Content Adjustments */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; margin-bottom: 1.5rem; }
    
    .content-section {
        padding-bottom: 80px;
    }
    
    .match-card {
        margin-bottom: 16px;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .match-header {
        padding: 12px;
    }

    .match-tabs {
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        z-index: 999;
        background: var(--card);
        padding: 8px 16px;
        margin: 0;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--border);
        border-bottom: none;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    }

    .tab {
        padding: 8px 12px;
        font-size: 12px;
        flex-direction: column;
    }

    .tab span {
        font-size: 11px;
    }
    


    /* Adjust specific sections */
    .tournament-tabs-header {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 5px 10px 5px;
        margin-bottom: 20px;
        justify-content: flex-start;
        border-bottom: 2px solid var(--border);
        background: transparent;
        border-radius: 0;
        gap: 0;
    }
    
    .tournament-tab-btn {
        flex: 0 0 auto;
        padding: 12px 16px;
        font-size: 12px;
        background: transparent;
        border-radius: 0;
        border: none;
        border-bottom: 3px solid transparent;
        color: var(--text);
        font-weight: 600;
        white-space: nowrap;
        min-width: auto;
    }

    .tournament-tab-btn.active {
        background: transparent;
        color: var(--accent2);
        border-bottom-color: var(--accent2);
        font-weight: 700;
        box-shadow: none;
    }

    /* Fix Back Button in Club Profile on Mobile */
    #backToHomeBtn {
        top: 5px !important;
        right: auto !important;
        left: 10px !important;
        min-width: auto !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important; /* Hide text */
    }
    
    /* زر العودة - سهم يشير إلى اليمين في الوضع RTL */
    #backToHomeBtn::after {
        content: "➜"; /* سهم يمين للعودة */
        font-size: 20px;
        color: white;
    }

    /* Super Cup & Tournament Mobile Adjustments */
    .super-cup-card {
        padding: 16px !important;
        gap: 12px !important;
        border-width: 2px !important;
        border-radius: 16px !important;
    }
    
    .super-cup-teams {
        gap: 10px !important;
    }
    
    .super-cup-team {
        padding: 10px !important;
        gap: 6px !important;
        border-radius: 12px !important;
    }
    
    .super-cup-team-logo {
        width: 45px !important;
        height: 45px !important;
    }
    
    .super-cup-team-name {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
    
    .super-cup-vs {
        font-size: 12px !important;
    }

    /* Compact Tournament Match Card for Mobile */
    .tournament-match-card {
        padding: 12px !important;
        gap: 10px !important;
    }

    .match-team-logo {
        width: 40px !important;
        height: 40px !important;
    }

    .match-team-name {
        font-size: 13px !important;
    }
}


/* --------------------------------------------
 3) وضع داكن (Dark Mode) — تغيّر المتغيرات
 -------------------------------------------- */
body.dark-mode {
 --bg: #0f172a;
 --card: #1e293b;
 --accent: #60a5fa;
 --accent2: #93c5fd;
 --accent-light: rgba(0,166,147,0.1);
 --text: #f1f5f9;
 --text-secondary: #cbd5e1;
 --muted: #64748b;
 --border: rgba(255,255,255,0.1);
 --border-light: rgba(255,255,255,0.05);
 --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.6);
 --shadow-md: 0 4px 8px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
 --shadow-lg: 0 12px 20px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4);
 --shadow-xl: 0 20px 25px rgba(0,0,0,0.6), 0 10px 10px rgba(0,0,0,0.5);
 background: var(--bg);
 color: var(--text);
}

body.dark-mode .match-tabs,
body.dark-mode .sport-navigation-tabs,
body.dark-mode .tournament-tabs-header {
 background: var(--card);
}

/* --------------------------------------------
 4) شريط التنقل الرئيسي (الرئيسي/الأزرار)
 -------------------------------------------- */
.main-nav {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  background: var(--bg);
  border-bottom: 2px solid rgba(0, 166, 147, 0.15);
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
}

/* إزالة شكل البوتون التقليدي */
.main-nav button {
  background: none;
  border: none;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: var(--accent);
  transition: all 0.25s ease;
  position: relative;
  border-radius: 0;
  min-width: max-content;
}

/* اللون عند التمرير */
.main-nav button:hover {
  color: var(--accent2);
}

/* الخط السفلي المتحرك */
.main-nav button.active {
  color: var(--accent2);
}

.main-nav button.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 10px;
  left: 10px;
  height: 3px;
  background: var(--accent2);
  border-radius: 3px;
  animation: slideIn 0.25s ease;
}

@keyframes slideIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}

.top-control-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.search-bar {
  flex: 1;
  position: relative;
}

.control-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.12),
    inset -2px -2px 5px rgba(255, 255, 255, 0.3);
  background: var(--card);
  color: var(--text);
}

.control-button:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.15),
    inset -2px -2px 5px rgba(255, 255, 255, 0.35);
}

.control-button:active {
  transform: translateY(1px);
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.18),
    inset -2px -2px 4px rgba(255, 255, 255, 0.25);
}

body.dark-mode .control-button {
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.4),
    inset -2px -2px 5px rgba(255, 255, 255, 0.08);
}


/* --------------------------------------------
 5) بطاقات المباريات / Matches
 -------------------------------------------- */
.matches-container {
  margin-top: 30px;
  padding: 0 15px;
}

.match-card {
  background: var(--card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
  transition: all var(--transition-base);
  position: relative;
}

.match-results-card {
  max-width: 100%;
  width: 100%;
}



.match-header {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  padding: 15px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.match-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><pattern id="grain" width="100" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="30" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.8" fill="rgba(255,255,255,0.08)"/><circle cx="70" cy="10" r="0.6" fill="rgba(255,255,255,0.06)"/><circle cx="90" cy="10" r="0.4" fill="rgba(255,255,255,0.04)"/></pattern></defs><rect width="100" height="20" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.league-center-logo {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  padding: 6px;
  border: 2px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
}

.club-profile-date {
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
}

.stadium-image {
  position: relative;
  overflow: hidden;
}

.stadium-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

/* تأثير انحدار في أسفل صورة الملعب */
.stadium-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, rgba(0,0,0,0.3));
  pointer-events: none;
}

.match-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(245, 247, 250, 0.5) 0%, rgba(37, 99, 235, 0.02) 100%); /* تم تغيير الأخضر إلى شفاف أزرق */
}

/* معلومات الفريق - الشعار والاسم */
.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  position: relative;
}

.team img {
  width: 70px;
  height: 70px;
  margin-bottom: 8px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.team img:hover {
  transform: scale(1.1);
}

.team span {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}

.match-info {
  text-align: center;
  color: var(--muted);
  background: rgba(37, 99, 235, 0.05);
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.1);
  min-width: 140px;
}

.match-info .score {
  font-size: 1.8em;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 5px;
  text-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.match-info .time,
.match-info .stadium {
  font-size: 13px;
  font-weight: 500;
  margin: 2px 0;
  display: block;
  color: var(--text);
}

.mobile-vs,
.match-info .date,
.match-info .desktop-inline {
  color: #000000;
}

body.dark-mode .mobile-vs,
body.dark-mode .match-info .date,
body.dark-mode .match-info .desktop-inline {
  color: #ffffff;
}

/* --------------------------------------------
 6) نتائج كل رياضة (Sections for results)
 -------------------------------------------- */
.sport-results { margin-bottom: 30px; text-align: center; }
.sport-header { display:flex; flex-direction:column; align-items:center; margin-bottom:12px; }
.sport-header .league-logo-centered {
 width:100px; height:100px; object-fit:contain; border-radius:50%;
 padding:10px; background:rgba(0,0,0,0.06); border:3px solid rgba(37, 99, 235, 0.15);
}

/* --------------------------------------------
 7) البث المباشر (Live) و الفيديوهات
 -------------------------------------------- */

/* حاوية الفيديوهات في أبرز اللحظات */
.highlights-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 20px;
 align-items: start;
 margin: 20px 0 30px;
}
.highlight-card {
 background: var(--card);
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-md);
 transition: all var(--transition-base);
 cursor: pointer;
 border: 1px solid var(--border-light);
}

.highlight-card video {
    width: 100%; height: 220px; object-fit: cover; display: block; background: #000;
}
.highlight-card .meta {
 padding:16px; display:flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.highlight-card h3 { margin:0; font-size:16px;font-weight: 700; color:var(--accent); }
.highlight-card p { margin:0; font-size:13px; color:var(----text-secondary);line-height: 1.5; }

/* ⚠️ تنسيق نافذة الفيديو المنبثقة (Modal) - مضاف للتعديل */
.video-modal-overlay { 
 position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
 background: rgba(0, 0, 0, 0.9); z-index: 99999; display: flex; 
 justify-content: center; align-items: center; 
}
.video-modal-content { 
 position: relative; width: 90%; max-width: 800px; background: #000; 
 padding: 0; border-radius: 8px; overflow: hidden;
}
.video-modal-content iframe, .video-modal-content video { 
 width: 100%; height: 450px; border-radius: 8px; display: block; border: none;
}
.close-modal { 
 position: absolute; top: -10px; right: 10px; color: #fff; font-size: 30px; 
 font-weight: bold; cursor: pointer; z-index: 100000; background: rgba(0,0,0,0.5); 
 padding: 0 10px; border-radius: 50%; 
}
/* نهاية تنسيق الـ Modal */

/* ------------------ بث مباشر ------------------ */
.live-layout {
 display: grid;
 grid-template-columns: 1fr 320px; 
 gap: 18px;
 align-items:start;
 margin: 12px auto 30px;
 max-width: 1200px;
}
.live-player {
 background: var(--card); padding:12px; border-radius:12px; box-shadow:var(--shadow-lg); text-align:center;
 border: 1px solid var(--border-light)
}
.live-player iframe, .live-player video { width:100%; height:520px; border-radius:8px; border:0; background:#000; }

/* قائمة القنوات */
.channels-list { background: var(--card); border-radius:12px; padding:12px; box-shadow:var(--shadow-md); max-height:560px; overflow:auto;border: 1px solid var(--border-light) }
.channel-item { display:flex; gap:10px; align-items:center; padding:8px; border-radius:8px; cursor:pointer; transition:background .15s, transform .12s; }
.channel-item:hover { background: rgba(0,0,0,0.04); transform: translateX(-4px); }
.channel-item.active { background: linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; transform:none; }
.channel-thumb { width:62px; height:44px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.channel-info h4{ margin:0; font-size:14px; color: var(--text); }
.channel-info p{ margin:0; font-size:12px; color:var(--muted); }
.channel-item.active .channel-info h4, .channel-item.active .channel-info p { color: #fff; }

/* تصميم البث المباشر الجديد (عرض الفيديوهات) */
.live-streams-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  padding: 30px 15px;
  max-width: 1400px;
  margin: 0 auto;
}

.live-stream-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  border: 1px solid var(--border-light);
  position: relative;
}



.live-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(231, 76, 60, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.stream-info {
  padding: 18px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, transparent 100%);
}

.stream-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: var(--accent);
  font-weight: 700;
}

.stream-info p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* تصميم البث المباشر القديم (للتوافقية) */
.live-match-info {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 15px;
  min-height: 60vh;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0.02) 100%);
}

.live-match-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 40px;
  max-width: 600px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--accent-light);
}

.live-match-card h3 {
  text-align: center;
  font-size: 28px;
  color: var(--accent);
  margin-bottom: 30px;
  font-weight: 800;
}

.match-details {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(37, 99, 235, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.detail-label {
  font-weight: 700;
  color: var(--accent);
  font-size: 15px;
}

.detail-value {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}

body.dark-mode .detail-item {
  background: rgba(37, 99, 235, 0.1);
}

/* تجاوب: على الشاشات الصغيرة */
@media (max-width: 900px){ 
  .live-match-card {
    padding: 24px;
  }
  .live-match-card h3 {
    font-size: 22px;
  }
  .detail-item {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* ------------------ مساعد ذكي (دردشة) ------------------ */
.ai-chat {
 max-width:900px; margin: 12px auto 40px; background: transparent;
}
.chat-window {
 background: var(--card); border-radius:12px; box-shadow:var(--shadow-lg); overflow:hidden;
 display:flex; flex-direction:column; height:560px;border: 1px solid var(--border-light)
}
.chat-header { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(0,0,0,0.06); }
.chat-header h3 { margin:0; color:var(--accent); }
.chat-body { padding:16px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:10px; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.msg { max-width:78%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.35; box-shadow:0 4px 10px rgba(0,0,0,0.06); }
.msg.user { align-self:flex-end; background: linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; border-bottom-right-radius:4px; }
.msg.ai { align-self:flex-start; background: var(--bg); color:var(--text); border-bottom-left-radius:4px; border:1px solid rgba(0,0,0,0.06); }
.chat-footer { display:flex; gap:8px; padding:12px; border-top:1px solid rgba(0,0,0,0.06); background:transparent; }
.chat-footer input[type="text"]{ flex:1; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,0.08); outline:none; }
.chat-footer button{ padding:10px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:700; transition: background 0.2s; }
.chat-footer button{ padding:10px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:700; transition: background 0.2s; }

/* أزرار خاصة */
.btn-send { background: linear-gradient(135deg, var(--accent) 0%,var(--accent2)); color: #fff; }
.btn-send:hover { opacity: 0.9; }
.btn-clear { background: transparent; border:1px solid rgba(0,0,0,0.08); color:var(--text); }
.btn-clear:hover { background: rgba(0,0,0,0.05); }

/* Dark mode tweaks */
body.dark-mode .msg.ai { background: #1f2933; color:#e8eef6; border-color:#2e3a46; }
body.dark-mode .chat-footer input[type="text"]{ background:#2b3138; color:#fff; border:1px solid #3a3f46; }

/* --------------------------------------------
 8) سوق الانتقالات — عرض عمودي (Transfer list)
 -------------------------------------------- */
.transfer-list {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 gap: 24px;
 padding: 0 15px;
 margin: 20px auto;
 max-width: 1000px;
}

.transfer-card {
 background: var(--card);
 border: 1px solid var(--border-light);
 border-radius: var(--radius-xl);
 text-align: center;
 padding: 24px;
 display: flex;
 flex-direction: column;
 align-items: center;
 box-shadow: var(--shadow-md);
 width: 100%;
 transition: all var(--transition-base);
 position: relative;
 overflow: hidden;
}

.transfer-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 5px; /* خط أزرق في الأعلى */
 background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* صورة اللاعب */
.transfer-card img {
 width: 70px;
 height: 70px;
 object-fit: cover;
 border-radius: 50%;
 border: 3px solid var(--accent);
 box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
 margin-bottom: 12px;
 transition: transform 0.3s ease;
}



.transfer-info {
 text-align: center;
 flex-grow: 1;
 width: 100%;
}

/* اسم اللاعب في بطاقة الانتقال */
.transfer-info h4 {
 margin: 8px 0;
 font-size: 16px;
 color: var(--accent);
 font-weight: 700;
}

.transfer-card .from-to {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 margin-top: 12px;
 font-weight: 600;
 font-size: 14px;
 background: transparent;
 padding: 8px 12px;
 border-radius: 8px;
 box-shadow: none;
 border: none;
}

.transfer-card .club-logo {
 width: 32px;
 height: 32px;
 object-fit: contain;
 border-radius: 6px;
 box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ✅ عرض شعار + اسم النادي تحت الشعار (للأندية الخارجية والداخلية) */
.transfer-card .transfer-club {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 min-width: 72px;
}

.transfer-card .club-name {
 font-size: 11px;
 font-weight: 700;
 color: var(--text);
 line-height: 1.2;
 max-width: 80px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.from-to .arrow-icon {
 font-size: 18px;
 color: var(--accent);
 font-weight: 900;
 margin: 0 8px;
 background: rgba(37, 99, 235, 0.1);
 padding: 2px 6px;
 border-radius: 4px;
}

/* --------------------------------------------
 9) أبرز اللحظات (Highlights)
 -------------------------------------------- */
/* تم دمجها مع قسم 7 */

/* --------------------------------------------
 10) المتجر / بطاقات المنتجات
 -------------------------------------------- */

/* --------------------------------------------
 11) الأخبار / News list
 -------------------------------------------- */
.news-list {
 max-width:1000px;
 margin:20px auto;
 display:flex;
 flex-direction:column;
 gap:20px;
 padding: 0 15px;
}
.news-card {
 background: var(--card);
 padding:24px;
 border-radius:var(--radius-xl);
 color: var(--text-secondary);
 box-shadow: var(--shadow-md);
 border: 1px solid var(--border-light);
 transition: all var(--transition-base);
 position: relative;
 overflow: hidden;
}
.news-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 5px;
 height: 100%;
 background: linear-gradient(180deg, var(--accent), var(--accent2));
}

.news-card h4 {
 color: var(--accent);
 margin: 0 0 10px 0;
 font-size: 18px;
 font-weight: 700;
 line-height: 1.4;
}
.news-card p {
 margin: 0 0 8px 0;
 font-size: 15px;
 line-height: 1.6;
 color: #000000;
}


body.dark-mode .news-card h4 {
 color: #ffffff;
}

body.dark-mode .news-card p {
 color: #ffffff;
}



.club-news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.club-news-list .news-card h4,
.club-news-list .news-card h3 {
 color: #000000 !important;
}

.club-news-list .news-card p {
 color: #000000 !important;
}



body.dark-mode .club-news-list .news-card h4,
body.dark-mode .club-news-list .news-card h3 {
 color: #ffffff !important;
}

body.dark-mode .club-news-list .news-card p {
 color: #ffffff !important;
}



/* --------------------------------------------
 12) جدول الترتيب (Ranking table)
 -------------------------------------------- */
.ranking-table {
 width:100%;
 max-width:1000px;
 margin:20px auto;
 border-collapse:separate;
 border-spacing: 0;
 background: var(--card);
 color: var(--text);
 box-shadow: var(--shadow-lg);
 border-radius: var(--radius-lg);
 overflow: hidden;
 border: 1px solid var(--border);
}

.ranking-table th, .ranking-table td {
 padding:16px 12px;
 text-align:center;
 border-bottom: 1px solid var(--border-light);
 transition: all 0.2s ease;
}

.ranking-table th {
 background: var(--gradient-primary);
 color: #fff;
 font-weight: 700;
 font-size: 14px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 position: sticky;
 top: 0;
 z-index: 10;
}

.ranking-table tr:nth-child(even) {
 background: rgba(37, 99, 235, 0.02);
}

.ranking-table td:first-child {
 font-weight: 800;
 font-size: 16px;
 color: var(--accent);
 background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%); /* تم تغيير الأخضر إلى أزرق خفيف */
}

.ranking-table td:nth-child(2) {
 font-weight: 600;
 text-align: right;
 padding-right: 20px;
}

.ranking-table td:nth-child(3) {
 font-weight: 700;
 font-size: 16px;
 color: var(--accent2);
 background: rgba(37, 99, 235, 0.05);
}

/* --------------------------------------------
 13) زر تبديل الوضع الليلي
 -------------------------------------------- */
#darkModeToggle {
 position: sticky;
 top: 0;
 left: 12px;
 padding: 10px 16px;
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 9999;
 cursor: pointer;
 border: none;
 background: var(--gradient-primary);
 color: #ffffff;
 font-size: 20px;
 box-shadow: var(--shadow-lg);
 transition: all var(--transition-base);
 backdrop-filter: blur(10px);
}

#darkModeToggle:hover {
 transform: translateY(-2px);
 box-shadow: var(--shadow-xl);
}

#darkModeToggle:active {
 transform: translateY(0);
}

/* --------------------------------------------
 14) شريط البحث واقتراحاته (Search & suggestions)
 -------------------------------------------- */
.search-bar {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 28px 20px;
 background: linear-gradient(135deg, var(--bg) 0%, rgba(37, 99, 235, 0.02) 100%);
 border-bottom: 2px solid var(--border);
 box-shadow: var(--shadow-sm);
 position: relative;
 z-index: 1000;
 margin: 0;
 gap: 20px;
}

#settingsBtn {
 margin-right: 15px;
}

.search-bar input {
 width: 100%;
 max-width: 620px;
 padding: 14px 28px;
 border: 2px solid var(--border);
 border-radius: 50px;
 font-size: 15px;
 font-weight: 500;
 outline: none;
 transition: all var(--transition-base);
 background: var(--card);
 color: var(--text);
 box-shadow: var(--shadow-md);
 position: relative;
 letter-spacing: 0.2px;
}

.search-bar input::placeholder {
 color: var(--muted);
 font-weight: 400;
 letter-spacing: 0px;
}

.search-bar input:focus {
 border-color: var(--accent);
 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), var(--shadow-lg);
 transform: translateY(-2px);
 background: var(--card);
}

.search-bar input:hover {
 border-color: var(--accent2);
 box-shadow: var(--shadow-lg);
}
.suggestions-list {
 position: absolute;
 top: 100%;
 width: 100%;
 max-width: 620px;
 background: var(--card);
 overflow: hidden;
 z-index: 1001;
 box-shadow: var(--shadow-xl);
 border-radius: 0 0 var(--radius-lg) var(--radius-lg);
 border: 2px solid var(--border);
 border-top: none;
 backdrop-filter: blur(10px);
}

.suggestion-item {
 padding: 14px 20px;
 cursor: pointer;
 transition: all var(--transition-fast);
 border-bottom: 1px solid var(--border-light);
 text-align: right;
 color: var(--text);
 font-weight: 500;
 position: relative;
}

.suggestion-item:last-child {
 border-bottom: none;
}

.suggestion-item:hover {
 background: var(--accent-light);
 color: var(--accent);
 padding-right: 24px;
 transform: translateX(-4px);
}

.suggestion-item:hover::before {
 content: '';
 position: absolute;
 right: 0;
 top: 0;
 bottom: 0;
 width: 5px;
 background: var(--gradient-primary);
}

/* تنسيق الاقتراح النشط للتنقل بلوحة المفاتيح */
.suggestion-item.suggestion-active {
    background: var(--accent-light);
    color: var(--accent);
    transform: translateX(-4px);
}

.suggestion-item.suggestion-active::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-primary);
}

.suggestion-item.suggestion-active:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.suggestion-item.no-result {
 cursor: default;
 color: var(--muted);
 font-style: italic;
 text-align: center;
}

/* الوضع الليلي لشريط البحث */
body.dark-mode .search-bar { background-color: var(--bg); border-bottom: 2px solid var(--accent); }
body.dark-mode .search-bar input { background: #2c2f36; color: #fff; border: 1px solid #555; }
body.dark-mode .suggestion-item {border-bottom: 1px solid #1c2229; }

/* زر العودة إلى الصفحة الرئيسية */
#backToHomeBtn {
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-size: 18px;
  font-weight: bold;
  border: 2px solid var(--accent);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
  margin-top: 25px;
}

#backToHomeBtn:hover {
  background: var(--accent);
  color: white;
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

#backToHomeBtn:active {
  transform: scale(0.95);
}

/* --------------------------------------------
 15) صفحة ملف النادي (Club Profile) — بنية عامة
 -------------------------------------------- */
#clubProfileSection {
 max-width: 1100px;
 margin: 0 auto;
 padding: 30px 20px 0 20px;
 background: linear-gradient(135deg, var(--bg) 0%, rgba(37, 99, 235, 0.01) 100%);
 min-height: 100vh;
}

.club-header {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding: 44px 32px;
 background: var(--card);
 border-radius: var(--radius-xl);
 margin-bottom: 45px;
 box-shadow: var(--shadow-lg);
 border: 1px solid var(--border-light);
 position: relative;
 overflow: hidden;
}

.club-header::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 5px;
 background: var(--gradient-primary);
}

.club-header h1 {
 font-size: 2.5rem;
 font-weight: 800;
 color: var(--accent);
 margin: 20px 0 0 0;
 text-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.profile-logo {
 width: 140px;
 height: 140px;
 object-fit: contain;
 border-radius: 50%;
 padding: 12px;
 border: 4px solid var(--accent);
 background: var(--bg);
 box-shadow: 0 8px 32px rgba(37, 99, 235, 0.3);
 transition: transform 0.3s ease;
}


.info-box {
 background: var(--card);
 padding: 26px;
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-md);
 border: 1px solid var(--border-light);
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 overflow: hidden;
 margin-bottom: 30px;
 transition: none;
}

.info-box strong {
 font-weight: 700;
 color: var(--accent);
 font-size: 18px;
 margin-bottom: 12px;
 display: block;
}

.stadium-preview {
 width: 100%;
 height: 200px;
 object-fit: cover;
 border-radius: var(--radius-md);
 margin-top: 16px;
 border: 2px solid var(--border-light);
 transition: none;
}



.coach-preview {
 width: 100px;
 height: 100px;
 object-fit: cover;
 border-radius: 50%;
 margin-top: 12px;
 border: 3px solid var(--accent2);
 box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
 transition: none;
}



/* قائمة اللاعبين */
.squad-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 8px; 
    justify-content: center;
    align-content: start;
    padding: 10px 0;
}

/* ⭐️ التعديل الحاسم: إزالة المسافة بين فئات اللاعبين ⭐️ */
.football-squad-categorized { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; /* مسافة بسيطة بين الفئات */
    align-items: center;
}

/* إزالة الهامش العلوي والسفلي للعنوان لتقليل المساحات */
.category-header { 
    color: var(--accent2); 
    border-bottom: 2px solid var(--border-day); 
    padding-bottom: 3px; 
    margin: 3px 0 5px 0 !important; /* تقليل المسافات حول العنوان */
    font-size: 16px; 
    font-weight: 700;
    text-align: center;
    width: 100%;
}

/* تحسين الشبكة لتناسب 5 لاعبين في السطر و 4 تحتهم */
.squad-category-list { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); 
    gap: 8px;
    justify-content: center;
    align-content: start;
    margin-bottom: 10px; /* مسافة بسيطة قبل الفئة التالية */
    width: 100%;
} 

/* تنسيق بطاقة اللاعب الموحدة - تصغير العرض قليلاً للمساعدة في احتواء 5 لاعبين */
.squad-list .player-card {
    background: var(--card);
    width: 100%; 
    padding: 10px 5px; 
    border-radius: 8px; 
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    transition: none; 
    border: 1px solid var(--border-day);
    min-height: 140px;
    max-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
}

/* إلغاء تأثير Hover بالكامل */


.squad-list .player-card img {
    width: 65px; 
    height: 65px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 4px auto;
    border: 2px solid var(--accent); 
}
.squad-list .player-card h4 {
    font-size: 13px; 
    margin: 3px 0 1px 0;
    color: var(--text);
    font-weight: 700;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.squad-list .player-card p {
    font-size: 10px; 
    color: var(--accent);
    margin: 0;
    line-height: 1.2;
}
.squad-list .player-card .player-age {
    font-weight: 600;
    color: var(--accent); 
    margin-top: 5px;
    font-size: 10px;
}
/* نهاية توحيد بطاقات اللاعبين */


/* المباريات الأخيرة وقوائمها */
.club-tab-content {
    width: 100%;
    padding: 0 15px;
}

.club-matches-list, .club-upcoming-list { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    margin-top: 15px;
    width: 100%;
    align-items: center;
}

.result-club-card, .upcoming-club-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: 1px solid var(--border-day);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.result-club-card .match-info, .upcoming-club-card .match-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.result-club-card .score-result { font-size: 1.4em; font-weight: 700; color: var(--accent); }
.upcoming-club-card .time { font-size: 1.2em; font-weight: 700; color: var(--accent); }
.stadium-name-small { font-size: 12px; margin-top: 5px; color: var(--text); }

/* 🎯 تنسيق العناوين الجديدة (وسط) 🎯 */
#clubProfileSection h3 { 
    border-bottom: none; 
    padding-bottom: 8px; 
    margin-top: 15px; /* تقليل المسافة العلوية */
    color: var(--accent);
    text-align: center; 
    width: 100%; 
    margin-right: 0; 
    margin-left: 0;
}

/* --------------------------------------------
 16) تبويبات ملف النادي (Club Profile Tabs)
 -------------------------------------------- */
.match-tabs {
 display:flex; justify-content:center; gap:0; margin-bottom:0; padding:0;
 background: #dfdfdf; border-bottom: 1px solid var(--border-light); flex-wrap: nowrap;
 white-space: nowrap; overflow-x: auto;
 position: sticky; bottom: 0; z-index: 1000;
}
.sport-navigation-tabs {
 display:flex; justify-content:center; gap:12px; margin-bottom:30px; padding:15px; flex-wrap: wrap;
}
.tab {
 display:flex; flex-direction:column; align-items:center; padding:14px 22px;
 background: none; color: var(--accent); border:none; border-radius:0; cursor:pointer;
 transition: all var(--transition-base); font-weight: 600; font-size: 14px;
 letter-spacing: 0.2px;position:relative; overflow:visible; min-width: max-content;
}
.club-sport-tab {
 display:flex; flex-direction:column; align-items:center; padding:12px 20px;
 background: transparent; color: var(--text); border:none; border-bottom: 3px solid transparent;
 border-radius:0; cursor:pointer; transition: all var(--transition-base); font-weight: 600;
 font-size: 14px; letter-spacing: 0.2px; position:relative; overflow:hidden; min-width: 100px;
}

#clubProfileSection {
 padding-bottom: 100px;
}

#clubProfileSection .match-tabs {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 width: 100%;
 justify-content: center;
 padding: 10px 10px 10px 280px;
 gap: 10px;
 overflow-x: auto;
 flex-wrap: wrap;
}

@media (max-width: 768px) {
 #clubProfileSection {
  padding-bottom: 80px;
 }
 
 #clubProfileSection .match-tabs {
  padding: 8px 16px;
  gap: 8px;
 }
}

.tab:hover { color: var(--accent2); }
.club-sport-tab:hover { color: var(--accent); border-bottom-color: var(--accent-light); }
.tab.active {
 color: var(--accent2);
}
.club-sport-tab.active {
 color: var(--accent2);
 border-bottom-color: var(--accent2);
 box-shadow: none;
}
.tab.active::after {
 content: ""; position:absolute; bottom:0; right:10px; left:10px; height:1px; 
 background: var(--accent2); border-radius:1px; animation: slideIn 0.25s ease;
}
.club-sport-tab.active::after {
 content: ""; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color: var(--accent2); border-radius:1px;
}
.sport-icon-small, .tab img, .club-sport-tab img { width:32px; height:32px; margin-bottom:6px; object-fit:contain; transition:all var(--transition-base); filter: invert(0); }

.sport-icon-container {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 40px;
 height: 40px;
 margin-bottom: 6px;
}

.sport-icon-container img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}

@media (max-width: 768px) {
 .sport-icon-container {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
 }
}

/* --------------------------------------------
 17) تبويبات فرعية داخل ملف النادي (قائمة، نتائج، قادم...)
 -------------------------------------------- */
.club-navigation-tabs { display:flex; justify-content:center; gap:0; margin-bottom:0; flex-wrap: wrap; border-bottom: 2px solid var(--border-light); }
.club-tab-button {
 padding:11px 20px; background: transparent; color: var(--text); border:none; border-bottom: 3px solid transparent; border-radius:0; cursor:pointer;
 transition:  all var(--transition-base); font-weight:600; font-size: 13px; letter-spacing: 0.2px;
}
.club-tab-button:hover { color: var(--accent); border-bottom-color: var(--accent-light); }
.club-tab-button.active { color: var(--accent2); font-weight:700; border-bottom-color: var(--accent2); box-shadow: none; }

/* --------------------------------------------
 18) الوضع الليلي — تعديلات إضافية لعناصر ملف النادي
 -------------------------------------------- */
body.dark-mode .club-header { background: #1c2229; box-shadow: 0 4px 15px rgba(0,0,0,0.4); }
body.dark-mode .player-card, body.dark-mode .info-box, body.dark-mode .club-match-row, body.dark-mode .ranking-table, body.dark-mode .news-card {
 background: #2a333d; border: 1px solid #3b4251;
}
body.dark-mode .profile-logo { background: var(--bg); }
body.dark-mode .back-to-home-banner { background: linear-gradient(90deg, #2563eb, #3b82f6); } /* تم تغيير الأخضر إلى أزرق جديد */



/* --------------------------------------------
 19) قواعد أيقونات وتبديل ألوان الأيقونات في الداكن
 -------------------------------------------- */
.dark-mode .sport-icon-small, .dark-mode .tab img, .dark-mode .club-sport-tab img { filter: invert(1); }
.dark-mode .tab.active, .dark-mode .club-sport-tab.active { color: var(--accent2); }
.dark-mode .tab.active::after, .dark-mode .club-sport-tab.active::after { background-color: var(--accent2); }
.dark-mode .channel-item:hover { background: #3b4251; }

/* --------------------------------------------
 20) استجابة عامة للشاشات الصغيرة (Responsive)
 -------------------------------------------- */

/* Tablet Styles */
@media (max-width: 1024px) {
 .container { padding: 0 15px; }
 .main-nav { padding: 15px 10px; gap: 10px; }
 .main-nav button { min-width: 100px; font-size: 13px; padding: 10px 16px; }
 .match-card { margin: 15px auto; max-width: 95%; }
 .transfer-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
 .news-list { padding: 0 10px; }
}

/* Mobile Styles */
@media (max-width: 768px) {
 .container { padding: 0 10px; }
 .content-section { padding: 20px 0; }

 h1 { font-size: 2rem; }
 h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }
 h3 { font-size: 1.25rem; }

 .main-nav {
  padding: 12px 8px;
  gap: 6px;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
 }
 .main-nav button {
  min-width: auto;
  font-size: 12px;
  padding: 8px 16px;
  flex: 0 0 auto;
  max-width: none;
  white-space: nowrap;
 }

 .search-bar { padding: 20px 10px; }
 .search-bar input {
  max-width: 100%;
  padding: 14px 20px;
  font-size: 15px;
 }

 .match-card {
  margin: 12px auto;
  max-width: 100%;
  border-radius: var(--radius-md);
 }
 .match-header { padding: 12px; }
 .league-center-logo { width: 60px; height: 60px; }
 .stadium-image img { height: 180px; }
 .match-body { padding: 16px; flex-direction: column; gap: 12px; }
 .team { width: 100%; flex-direction: row; justify-content: center; gap: 12px; }
 .team img { width: 50px; height: 50px; }
 .match-info { min-width: auto; padding: 12px; }

 .transfer-list { grid-template-columns: 1fr; gap: 12px; padding: 0; }
 .transfer-card { padding: 16px; }

 .highlights-container { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
 .live-layout { grid-template-columns: 1fr; gap: 16px; }
 .live-player iframe, .live-player video { height: 300px; }
 .live-streams-container { grid-template-columns: 1fr; gap: 16px; }
 .live-stream-card video { height: 240px; }

 .news-list { gap: 16px; padding: 0; }
 .news-card { padding: 16px; }

 .ranking-table { font-size: 14px; }
 .ranking-table th, .ranking-table td { padding: 12px 8px; }

 .squad-category-list {
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 6px;
 }
 .squad-list .player-card {
  min-height: 140px;
  max-height: 140px;
  padding: 8px;
 }
 .squad-list .player-card img { width: 55px; height: 55px; }
 .squad-list .player-card h4 { font-size: 12px; }
 .squad-list .player-card p { font-size: 9px; }

 #darkModeToggle { position: fixed !important; right: 16px; bottom: 16px; width: 56px; height: 56px; font-size: 20px; }
}

@media (max-width: 480px) {
 .main-nav button {
  max-width: 100%;
  min-width: 100px;
 }

 .match-body { padding: 12px; }
 .team img { width: 45px; height: 45px; }
 .team span { font-size: 14px; }

 .transfer-card { padding: 14px; }
 .transfer-card img { width: 60px; height: 60px; }

 .highlights-container { grid-template-columns: 1fr; }

 .squad-category-list { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 5px; }
 .squad-list .player-card { min-height: 130px; max-height: 130px; }
}

/* --------------------------------------------
 22) التنسيق الهرمي لتصفيات الكأس (Knockout Tree)
 -------------------------------------------- */
.knockout-tree-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    padding: 30px 10px;
    overflow-x: auto; /* للسماح بالتمرير إذا كان الهرم كبيرًا */
    max-width: 100%;
}
.knockout-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.knockout-stage h4 {
    color: var(--accent2);
    margin: 0 0 15px 0;
    font-size: 16px;
    border-bottom: 2px solid var(--border-day);
    padding-bottom: 5px;
}

.stage-matches {
    display: flex;
    flex-direction: column;
    gap: 30px; /* لترك مسافة أكبر بين مباريات دور الـ 16 */
}
.ko-match {
    background: var(--card);
    border: 1px solid var(--border-day);
    border-radius: 4px;
    padding: 8px;
    width: 160px; /* عرض ثابت لبطاقة المباراة */
    text-align: center;
    font-size: 13px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.ko-team {
    padding: 3px 0;
    border-bottom: 1px dashed var(--border-day);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ko-team:last-of-type {
    border-bottom: none;
}
.ko-score {
    font-weight: 700;
    color: #e74c3c;
    font-size: 11px;
    padding: 2px 0;
    background: rgba(0,0,0,0.02);
}
.ko-match-upcoming .ko-score {
    color: var(--muted);
}
.ko-winner {
    font-weight: 800;
    color: var(--accent);
    background: rgba(37, 99, 235, 0.1);
}

/* تنسيق خطوط الربط بين المراحل (لإعطاء الإحساس بالهرم) */
.knockout-stage:not(:last-child) .ko-match {
    margin-bottom: 0;
    position: relative;
}
/* هذا الجزء معقد ويحتاج إلى المزيد من التنسيق المتقدم باستخدام :after و :before لخطوط الـ CSS البحتة */
/* ولكن للحصول على تأثير بصري أسرع وأبسط، نعتمد على المسافات الأفقية والرأسية. */

/* جعل مراحل الربع والنهائي أعلى في الهرم */
.stage-matches:has(.ko-match) {
    justify-content: center;
    align-items: center;
}
.stage-matches:not(:first-child) {
    margin-top: 50px; /* دفع المراحل اللاحقة لأعلى */
}
@media (max-width: 600px) {
    .knockout-tree-wrapper {
        flex-direction: column;
        gap: 20px;
    }
}

/* --------------------------------------------
 تعديلات الوضع الداكن الجديدة
 -------------------------------------------- */
body.dark-mode .ko-team {
    border-bottom: 1px dashed #3a3f46;
}
body.dark-mode .ko-winner {
    background: rgba(96, 165, 250, 0.15);
}

/* ============================================
 Tournament Professional Styling
 ============================================ */
.tournament-section-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.tournament-tabs-header {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
  border-bottom: 3px solid var(--accent);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, transparent 100%);
  border-radius: 12px 12px 0 0;
}

.tournament-tab-btn {
  padding: 16px 32px;
  background: transparent;
  border: none;
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-base);
  border-bottom: 3px solid transparent;
  position: relative;
}

.tournament-tab-btn:hover {
  color: var(--accent);
}

.tournament-tab-btn.active {
  color: var(--accent2);
  border-bottom-color: var(--accent2);
}

.tournament-rounds-wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 40px 20px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, transparent 100%);
  border-radius: 0 0 12px 12px;
  border: 1px solid var(--border-light);
  border-top: none;
}

.tournament-round {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.round-title {
  text-align: center;
  padding: 12px 0;
  border-bottom: 2px solid var(--accent-light);
  margin-bottom: 20px;
}

.round-title h3 {
  margin: 0;
  font-size: 20px;
  color: var(--accent);
  font-weight: 700;
}

.matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  justify-content: center;
}

.tournament-match-card {
  background: var(--card);
  border: 2px solid var(--accent-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: 16px;
}



.tournament-match-card.played {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, transparent 100%);
  border-color: rgba(37, 99, 235, 0.3);
}

.match-teams-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.match-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(37, 99, 235, 0.05);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.tournament-match-card.played .match-team.winner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.1));
  border: 2px solid rgba(37, 99, 235, 0.5);
}

.match-team-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 8px;
}

.match-team-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}

.tournament-match-card.played .match-team.winner .match-team-name {
  color: var(--accent);
}

.match-vs-label {
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
  padding: 0 8px;
}

.tournament-match-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.tournament-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tournament-detail-label {
  font-weight: 600;
  color: var(--accent);
}

.tournament-match-status {
  padding: 10px;
  background: rgba(37, 99, 235, 0.1);
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
  color: var(--accent);
}

.tournament-match-card.played .tournament-match-status {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
}

.admin-winner-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.admin-winner-btn {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
}

.admin-winner-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.super-cup-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.super-cup-card {
  background: var(--card);
  border: 3px solid var(--accent2);
  border-radius: var(--radius-xl);
  padding: 40px;
  max-width: 600px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.super-cup-card.played {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent);
}

.super-cup-teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.super-cup-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(37, 99, 235, 0.1);
  border-radius: var(--radius-lg);
}

.super-cup-team.winner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(37, 99, 235, 0.1));
  border: 2px solid var(--accent);
}

.super-cup-team-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 8px;
}

.super-cup-team-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  text-align: center;
}

.super-cup-vs {
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}

.super-cup-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}

.super-cup-footer {
  text-align: center;
  margin-top: 15px;
  font-weight: 700;
  color: var(--accent);
}

/* Dark Mode Adjustments */
body.dark-mode .tournament-match-card {
  border-color: rgba(96, 165, 250, 0.3);
}



/* ============================================
 انتهى ملف CSS المنسق والمعدّل
 ============================================ */

/* ===== شريط جانبي يساري للترتيب السريع (Left Sidebar) ===== */

.left-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    padding: 16px 12px;
    background: var(--card);
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1001;
    box-shadow: 2px 0 12px rgba(0,0,0,0.1);
    border-right: 1px solid var(--border);
}

.left-sidebar .sidebar-section h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 10px;
}

/* ======================= */
/* الصندوق الغارق (حوض سباحة) */
/* ======================= */
.left-sidebar ul {
    list-style: none;
    padding: 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;

    max-height: 150px;
    overflow-y: auto;

    border-radius: 12px;
    background: var(--card);

    /* تأثير الغرق */
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.25),
        inset -4px -4px 8px rgba(255, 255, 255, 0.35);
}

/* عناصر القوائم غائرة بخفة */
.left-sidebar ul li {
    padding: 8px 10px;
    font-size: 14px;
    background: var(--card);
    border-radius: 8px;

    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.18),
        inset -2px -2px 5px rgba(255, 255, 255, 0.35);
}

/* ======================= */
/* Scroll */
/* ======================= */
.left-sidebar ul::-webkit-scrollbar {
    width: 6px;
}

.left-sidebar ul::-webkit-scrollbar-track {
    background: transparent;
}

.left-sidebar ul::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}


/* ======================= */
/* عناصر الانتقالات الجديدة */
/* ======================= */
.transfer-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--card);
    border-radius: 8px;

    box-shadow:
        inset 2px 2px 5px rgba(0,0,0,0.20),
        inset -2px -2px 5px rgba(255,255,255,0.30);

    font-size: 14px;
}

.transfer-item .clubs {
    font-weight: 600;
    color: var(--accent);
}


/* ======================= */
/* الألوان — الوضع النهاري */
/* ======================= */
:root {
    --border-light: #cfcfcf;
    --border: #b6b6b6;

    /* مهم جداً لأن النيو مرفزم يعتمد على الفرق بين الألوان */
    --card: #e9e9e9;
    --card-light: #f6f6f6;
    --background: #ffffff;
}


/* ======================= */
/* الألوان — الوضع الليلي */
/* ======================= */
body.dark {
    --border-light: #2f2f2f;
    --border: #4a4a4a;

    --card: #1e1e1e;
    --card-light: #262626;
    --background: #151515;
}

        /* Settings Sidebar Styles from admin.css */
        .settings-sidebar {
            position: fixed;
            top: 0;
            right: -300px; /* Start hidden */
            width: 280px;
            height: 100vh;
            background: var(--card);
            box-shadow: -2px 0 10px rgba(0,0,0,0.2);
            z-index: 1200;
            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            border-left: 1px solid var(--border);
        }

        .settings-sidebar.active {
            right: 0; /* Show */
        }

        /* Mobile Specific Settings Sidebar */
        @media (max-width: 768px) {
            .settings-sidebar {
                width: 100%; /* Full width on mobile */
                right: -100%; /* Start hidden completely */
            }
            
            .settings-sidebar.active {
                right: 0;
            }
        }

        .settings-header {
            padding: 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--bg);
        }

        .settings-header h3 {
            margin: 0;
            color: var(--accent);
        }

        .close-settings {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-secondary);
        }
        
        .settings-content {
             padding: 20px;
        }

        .setting-item {
            margin-bottom: 20px;
        }

/* Mobile Adjustments for Club Profile and Sport Buttons */
@media (max-width: 768px) {
    /* 1. Main Container Layout */
    #clubProfileSection {
        display: flex;
        flex-direction: column;
        padding-bottom: 20px !important;
        padding-top: 0 !important;
        position: relative; /* Ensure back button is positioned relative to this section */
    }

    /* 2. Sport Selection Tabs (Sticky Top) */
    #clubProfileSection .match-tabs {
        order: 1; /* Move to top */
        position: sticky !important;
        top: 110px; /* Below main nav */
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        background: var(--bg) !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border-bottom: 1px solid var(--border) !important;
        z-index: 800 !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }
    


    /* 3. Club Content Container */
    .club-sports-container {
        order: 2; /* Below tabs */
        padding: 10px 0;
    }
    
    /* Reorder Header and Navigation inside content */
    .club-sport-content {
        display: flex;
        flex-direction: column;
    }

    /* 4. Club Header */
    .club-header {
        order: -1; /* Move to top */
        display: flex;
        align-items: center;
        padding: 10px 16px;
        margin-bottom: 10px;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    .club-header .profile-logo {
        width: 60px;
        height: 60px;
        margin-left: 15px;
        padding: 4px;
        border-width: 1px;
    }

    .club-header h1 {
        font-size: 1.4rem;
        margin: 0;
        text-align: right;
    }

    /* 5. Section Navigation Tabs (Overview, Matches...) */
    .club-navigation-tabs {
        order: 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 16px 10px 16px;
        margin-bottom: 15px;
        gap: 10px;
        border-bottom: 1px solid var(--border-light);
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    .club-tab-button {
        flex: 0 0 auto;
        padding: 11px 20px;
        font-size: 13px;
        background: transparent;
        border-radius: 0;
        border: none;
        border-bottom: 3px solid transparent;
        color: var(--text);
        font-weight: 600;
        white-space: nowrap;
    }

    .club-tab-button.active {
        background: transparent;
        color: var(--accent2);
        border-bottom-color: var(--accent2);
        font-weight: 700;
        box-shadow: none;
    }
    
    .club-tab-content {
        order: 1;
    }

    /* 6. Horizontal Match Cards */
    #clubProfileSection .match-card .match-body {
        flex-direction: row !important;
        padding: 12px;
        gap: 8px;
        align-items: center;
    }

    #clubProfileSection .match-card .team {
        flex-direction: column;
        width: 30%;
        gap: 6px;
        justify-content: flex-start;
    }

    #clubProfileSection .match-card .team img {
        width: 40px;
        height: 40px;
    }

    #clubProfileSection .match-card .team span {
        font-size: 11px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    #clubProfileSection .match-card .match-info {
        width: 40%;
        padding: 0 4px;
        min-width: auto;
    }

    #clubProfileSection .match-card .match-info .time,
    #clubProfileSection .match-card .match-info .score {
        font-size: 1.1rem;
        font-weight: 800;
    }
    
    #clubProfileSection .match-card .match-info .stadium {
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    #clubProfileSection .match-card .stadium-image {
        height: 120px;
    }
    
    /* Info Box Adjustments */
    .info-box {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    /* Squad List Grid */
    .squad-list, .squad-category-list {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
    
    .squad-list .player-card {
        min-height: auto;
        padding: 10px;
    }
    
    .squad-list .player-card img {
        width: 50px;
        height: 50px;
    }
    
    .squad-list .player-card h4 {
        font-size: 11px;
        margin: 5px 0;
    }
    
    .squad-list .player-card p {
        font-size: 10px;
    }
}

/* =========================================================
   Club Profile: إزالة أي تباعد بين بطاقات اللاعبين والفئات
   (لأنك تريد البطاقات "تحت بعض" بدون مسافات)
   ========================================================= */

/* داخل صفحة/قسم ملف النادي فقط */
#clubProfileSection .squad-list {
    padding: 0 !important;
    gap: 0 !important;
}

/* في كرة القدم (التصنيف حسب المراكز) */
#clubProfileSection .football-squad-categorized {
    gap: 0 !important; /* لا مسافة بين العنوان والقائمة وبين الفئات */
}

#clubProfileSection .category-header {
    margin: 0 !important;
    padding: 0 !important;
}

#clubProfileSection .squad-category-list {
    gap: 0 !important;           /* لا مسافة بين بطاقات نفس المركز */
    margin-bottom: 0 !important; /* لا مسافة قبل المركز التالي */
}

/* =========================================================
   FIX نهائي: فراغ/تباعد ضخم في قائمة لاعبي كرة القدم
   
   بعض المتصفحات/التنسيقات تجعل Grid يتمدد عمودياً فيظهر:
   - صف واحد بالأعلى
   - ثم فراغ كبير
   - ثم صف آخر بالأسفل

   هنا نحول قائمة لاعبي كرة القدم إلى Flex-Wrap لضمان أن
   البطاقات تأتي تحت بعضها مباشرة بدون فراغات.
   ========================================================= */

/* حاوية قائمة لاعبي كرة القدم داخل ملف النادي */
#clubProfileSection .squad-list.football-squad-categorized {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 6px 0 !important;}

/* عنوان كل مركز */
#clubProfileSection .squad-list.football-squad-categorized .category-header {    margin: 10px 0 6px !important;
    padding: 6px 0 !important;}

/* قائمة بطاقات المركز: Flex Wrap بدل Grid */
#clubProfileSection .squad-list.football-squad-categorized .squad-category-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* حجم بطاقة اللاعب ثابت حتى يلتف بشكل صحيح */
#clubProfileSection .squad-list.football-squad-categorized .squad-category-list .player-card {    flex: 0 0 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    margin: 0 !important;

    padding: 12px !important;
    min-height: 175px !important;}

/* إزالة أي مسافة زائدة داخل تبويب اللاعبين */
#clubProfileSection .club-tab-content[id*='-squad'] {
    padding-top: 0 !important;
}

/* =========================================================
   باقي الرياضات (سلة/طائرة/يد): نفس المسافة الخفيفة مثل القدم
   - تحويل القائمة إلى Flex-Wrap لتفادي الفراغات الضخمة
   - إضافة Gap بسيط بين البطاقات
   ========================================================= */

/* حاوية قائمة اللاعبين في السلة/الطائرة/اليد داخل ملف النادي */
#clubProfileSection .squad-list:not(.football-squad-categorized) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* حجم بطاقة اللاعب (خفيف مثل كرة القدم) */
#clubProfileSection .squad-list:not(.football-squad-categorized) .player-card {
    flex: 0 0 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    margin: 0 !important;
    padding: 12px !important;
    min-height: 175px !important;
}