/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* إعداد المتغيرات العامة (الألوان، الخطوط، الإعدادات) */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
:root {
  --primary-color: #e73c3ce4; /* اللون الأساسي */
  --accent-color: #3498db; /* اللون الثانوي */
  --background-gradient: linear-gradient(135deg, #f5f7fa40, #c3cfe265); /* تدرج الخلفية */
  --container-bg: rgba(255, 255, 255, 0.397); /* خلفية الحاوية */
  --text-color: #333; /* لون النصوص */
  --font-family: 'Roboto', sans-serif; /* نوع الخط */
  --border-radius: 10px; /* نصف قطر الزوايا */
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ظل العناصر */
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* إعدادات الصفحة العامة (الخلفية، الهيكل الأساسي) */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
body {
  font-family: var(--font-family);
  background-image: url('foot.jpeg'); /* صورة الخلفية */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 1rem;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* أنماط الحاوية الرئيسية وتفاصيلها */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
.container {
  width: 95%;
  max-width: 80rem;
  background-color: var(--container-bg);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  margin: 1rem auto;
}
.container:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}



/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* تنسيقات النصوص والعناوين */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  font-size: 3rem; /* حجم كبير للشاشات الكبيرة */
}
@media (max-width: 600px) {
  h2 {
    font-size: 2rem; /* حجم أصغر للهواتف */
  }
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* حقول الإدخال وعناصر النماذج */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select {
  width: 100%;
  padding: 1rem;
  margin: 0.5rem 0;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  font-size: 1rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}
input:focus,
select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 5px rgba(231, 60, 60, 0.5); /* ظل عند التركيز */
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* تنسيقات الأزرار والتفاعلات */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
button {
  background-color: var(--primary-color);
  color: #fff;
  padding: 1rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  width: 100%;
  font-size: 1.2rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin-top: 1rem;
}
button:hover {
  background-color: var(--accent-color);
  transform: scale(1.05); /* زيادة الحجم عند التحويم */
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* الفئات المساعدة والرسائل */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
.hidden {
  display: none;
}
.message {
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--primary-color);
}
.message.success {
  color: green; /* لون الرسائل الناجحة */
}
.message.error {
  color: red; /* لون الرسائل الخاطئة */
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* تنسيقات الروابط */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* جدول بيانات اللاعبين */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
#players-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  overflow-x: auto; /* يجعل الجدول قابلًا للتمرير أفقيًا */
}
#players-table th,
#players-table td {
  padding: 1rem;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 1rem;
}
/* تصميم الجدول للشاشات الصغيرة */
@media (max-width: 600px) {
  #players-table thead {
    display: none; /* إخفاء الرؤوس في الشاشات الصغيرة */
  }
  #players-table tr {
    display: block;
    margin-bottom: 1rem;
  }
  #players-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
  }
  #players-table td::before {
    content: attr(data-label); /* إظهار اسم العمود كنص قبل البيانات */
    font-weight: bold;
    margin-right: 1rem;
  }
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* استعلامات الوسائط للتصميم المتجاوب */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
@media (min-width: 601px) and (max-width: 1024px) {
  .container {
    padding: 2rem;
    font-size: 1.2rem;
  }
  button {
    font-size: 1.1rem;
    padding: 1.2rem;
  }
  #players-table th,
  #players-table td {
    padding: 0.8rem;
    font-size: 1rem;
  }
}
@media (min-width: 1025px) {
  .container {
    padding: 3rem;
    font-size: 1.5rem;
  }
  button {
    font-size: 1.3rem;
    padding: 1.5rem;
  }
  #players-table th,
  #players-table td {
    padding: 1rem;
    font-size: 1.2rem;
  }
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* قائمة المباريات */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
#matches-list div {
  background-color: rgba(255, 255, 255, 0.175);
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--box-shadow);
  transition: transform 0.3s ease;
}
#matches-list div:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* تخصيص أزرار المباريات - تصميم عصري */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */


#matches-section button {
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  margin: 4px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
}

/* زر التعديل - Modern Teal */
button[onclick*="editMatch"] {
  background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
  color: white;
}

/* زر الحفظ - Electric Blue */
button[onclick*="toggleResultInput"] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

/* زر التفاصيل - Soft Purple */
button[onclick*="viewMatchDetails"] {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  color: white;
}

/* زر الحذف - Modern Coral */
button[onclick*="deleteMatch"] {
  background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
  color: white;
}

/* زر الفرق المشاركة - Sunset Orange */
button[onclick*="viewTeams"] {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
}

/* تأثيرات التحويم */
#matches-section button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

/* تأثير النشاط */
#matches-section button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#profile-button:hover {
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}

body {
  font-weight: bold;
}

body {
  font-family: 'Cairo', sans-serif;
}

/*----------------تنسيقات زر الحضور-------------------*/

/* اجعل زر attendance-btn عند الشاشة الصغيرة يتحول لدائرة صغيرة يخفي النص */
@media (max-width: 500px) {
  .attendance-btn {
    width: 10px !important;      /* عرض صغير */
    height: 10px !important;     /* ارتفاع صغير */
    border-radius: 20% !important; /* نجعله دائري */
    
    /* إخفاء النص داخل الزر */
    padding: 0 !important;
    text-indent: -9999px !important; 
    overflow: hidden !important;

    /* اختياري: إضافة مسافة بسيطة حول الزر */
    margin-left: 1px;
    margin-right: 1px;
  }
}

/*---------------------------التصويت-------------------------------------

/* إضافة بعض الأنماط البسيطة */
.modal.hidden { display: none; }


/* التصميم الأساسي */
.vote-title {
  text-align: center;
  font-family: 'Tajawal', sans-serif;
  color: #2c3e50;
  margin: 2rem 0;
  position: relative;
}

.vote-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #e74c3c, #c0392b);
  margin: 1rem auto;
  border-radius: 2px;
}

.results-container {
  display: grid;
  gap: 1.5rem;
  padding: 1rem;
}

.result-item {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s;
}

.avatar-container {
  position: relative;
  flex: 0 0 120px;
  padding: 1rem;
  cursor: pointer;
}

.avatar-wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto;
}

.player-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.3s;
  z-index: 1;
}

.circular-tooltip {
  position: absolute;
  top: 0;
  left: 2;
  width: 108%;
  height: 110%;
  background: rgba(231, 77, 60, 0.688);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  opacity: 0;
  transform: scale(0);
  transition: all 0.6s ease;
  pointer-events: none;
  z-index: 2;
}

.info-container {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.player-name {
  font-size: 1.25rem;
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.votes-progress {
  width: 100%;
  background: #f0f2f5;
  border-radius: 10px;
  overflow: hidden;
  height: 12px;
  margin-top: 0.5rem;
}

.progress-bar {
  background: linear-gradient(45deg, #e74c3c, #c0392b);
  height: 100%;
  transition: width 0.5s ease;
}

.mobile-trophy {
  display: none;
}

/* استجابة للأجهزة المختلفة */
@media (max-width: 768px) {
  .result-item {
    flex-direction: column;
  }
  
  .avatar-container {
    margin-bottom: 1rem;
  }
  
  .mobile-trophy {
    display: flex;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.5rem;
    color: #ffd700;
    z-index: 3;
  }
  
  .votes-progress {
    height: 25px;
  }
  
  .circular-tooltip {
    font-size: 3rem;
  }
}

@media (max-width: 480px) {
  .mobile-trophy {
    font-size: 1.3rem;
    top: 3px;
    right: 3px;
  }
  
  .votes-progress {
    height: 22px;
  }
  
  .circular-tooltip {
    font-size: 2.5rem;
  }
}

/*--------------------------------نموذج التصويت
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* أنماط التصويت المخصصة - بداية الإضافات */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
.modern-vote-option {
  position: relative; /* إضافة هذه الخاصية لجعل العناصر الداخلية تعتمد على هذا الحاوية */
  display: flex; /* استخدام Flexbox لتنظيم العناصر بشكل أفضل */
  align-items: center; /* توسيط العناصر عموديًا */
  justify-content: space-between; /* توزيع العناصر بالتساوي */
  padding-right: 50px; /* إضافة مساحة على اليمين لمنع تداخل النص */
}

.player-name {
  flex: 1; /* جعل اسم اللاعب يستخدم المساحة المتاحة */
  white-space: nowrap; /* منع النص من الانتقال إلى سطر جديد */
  overflow: hidden; /* إخفاء النص الزائد */
  text-overflow: ellipsis; /* إضافة النقاط للنص المخفي */
  padding-right: 10px; /* إضافة مسافة بين النص ومربع الإدخال */
}

.vote-input {
  width: 60px !important; /* عرض مربع النص (يمكن تعديل هذا الرقم لتكبير أو تصغير العرض) */
  height: 32px !important; /* ارتفاع مربع النص (يمكن تعديل هذا الرقم لتكبير أو تصغير الارتفاع) */
  font-size: 14px; /* حجم الخط داخل المربع (يمكن تعديله لتغيير حجم النص) */
  position: absolute; /* تثبيت موضع المربع */
  right: 10px; /* تحريك المربع إلى اليمين */
  top: 20%; /* وضع المربع في المنتصف رأسيًا */
  transform: translateY(-50%); /* ضبط التحريك العمودي بدقة */
  display: flex; /* استخدام Flexbox لتوسيط النص داخل المربع */
  align-items: center; /* توسيط النص عموديًا */
  justify-content: center; /* توسيط النص أفقيًا */
  line-height: 1; /* ضبط المسافة بين السطور */
  padding: 0; /* إزالة المساحة الداخلية */
  margin: 0; /* إزالة الهامش الخارجي */
  border: 1px solid #ccc; /* حدود بسيطة حول المربع */
  border-radius: 6px; /* جعل الزوايا مستديرة قليلاً */
  background-color: #fff; /* لون الخلفية */
  text-align: center; /* توسيط النص داخل المربع */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* إضافة تأثير عند التفاعل */
}

/* تأثير عند التركيز على مربع النص */
.vote-input:focus {
  outline: none; /* إزالة الحدود الافتراضية */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* إضافة ظل عند التركيز */
  transform: translateY(-50%) scale(1.1); /* تكبير المربع قليلاً عند التركيز */
}

/* تصميم الشريط الرئيسي */
.vote-slider {
  width: 150px; /* عرض الشريط (يمكن تعديله لتكبير أو تصغير الشريط) */
  height: 8px; /* ارتفاع المسار (يمكن تعديله لتغيير سمك الشريط) */
  margin-right: 70px;
  accent-color: #ff0000; /* لون الشريط النشط (لون التحديد) */
  background-color: #e0e0e0; /* لون المسار غير النشط */
  border-radius: 5px; /* جعل المسار مستدير الزوايا */
}

/* تصميم الزر المحدد (Thumb) */
.vote-slider::-webkit-slider-thumb {
  appearance: none; /* إزالة التنسيق الافتراضي */
  width: 20px; /* عرض الزر (يمكن تعديله لتكبير أو تصغير الزر) */
  height: 20px; /* ارتفاع الزر (يمكن تعديله لتكبير أو تصغير الزر) */
  background-color: #ffffff; /* لون خلفية الزر */
  border: 2px solid #ff0000; /* حدود الزر */
  border-radius: 50%; /* جعل الزر دائري الشكل */
  cursor: pointer; /* تغيير مؤشر الفأرة عند التفاعل */
}

/* تصميم الزر المحدد (Thumb) لمستعرض Firefox */
.vote-slider::-moz-range-thumb {
  width: 20px; /* عرض الزر (يمكن تعديله لتكبير أو تصغير الزر) */
  height: 20px; /* ارتفاع الزر (يمكن تعديله لتكبير أو تصغير الزر) */
  background-color: #ffffff; /* لون خلفية الزر */
  border: 2px solid #007bff; /* حدود الزر */
  border-radius: 50%; /* جعل الزر دائري الشكل */
  cursor: pointer; /* تغيير مؤشر الفأرة عند التفاعل */
}

/* تصميم كل خيار */
.modern-vote-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* يمكنك استخدام margin-bottom بدلاً من gap إذا أردت */
  margin-bottom: 20px;
}

.player-name {
  color: #000000; /* لون النص الأساسي */
}

.player-name:hover {
  color: #ffffff; /* لون النص عند تمرير المؤشر */
  cursor: pointer; /* تغيير شكل المؤشر إلى يد */
}
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
/* نهاية إضافات أنماط التصويت */
/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */

/*------------------------------splash vedio

/* تخصيص شاشة البداية */
.splash-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.fullscreen-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

/* مؤشر تحميل اختياري */
.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #007bff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  position: relative;
  z-index: 1;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* إخفاء المحتوى الرئيسي في البداية */
.content-container {
  display: none;
  position: relative;
  z-index: 999;
  width: 100%;
  height: 100%;
}

/* إضافة هذه الأنماط الجديدة */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* تعديل تصميم المحتوى الرئيسي */
#main-content {
  display: none;
  position: fixed; /* تثبيت المحتوى في المنتصف */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; /* عرض المحتوى (تعديل حسب الحاجة) */
  max-width: 1200px; /* حجم أقصى للعرض */
  height: 80vh; /* ارتفاع المحتوى */
  background: white;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
}

/* تأثير الظهور بعد انتهاء الفيديو */
#main-content.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/*--------------------------load remove