/* ==================================== */
/* 1. Global & Header Styles (Unified Look) */
/* ==================================== */
body {
  margin: 0;
  background-color: #000;
  font-family: sans-serif;
  color: white;
  /* يمكنك إزالة zoom: 0.9; إذا كان يسبب مشاكل في الرؤية */
  zoom: 0.9; 
}
header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  justify-content: center;
  background-color: #000;
  border-bottom: 1px solid #222;
}
header img {
  max-height: 48px;
}
main {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* ==================================== */
/* 2. Video Grid & Section Styles (from index.html) */
/* ==================================== */
.section {
  margin: 1.5rem 0;
}
.section-title {
  font-size: 1.25rem;
  margin: 0 1rem 0.5rem;
}
/* تم تعطيل التخطيط الأفقي القديم هنا والانتقال إلى التخطيط الشبكي أدناه */
.video a {
  display: block;
}
.video-thumb-wrapper {
  border-radius: 6px;
  overflow: hidden;
}
.video-thumb {
  width: 100%;
  height: auto; 
  display: block; 
  aspect-ratio: 16 / 9; 
  object-fit: cover; 
}
.video-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
}
.channel-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.video-title-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.video-title {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  width: 100%;
}

/* ==================================== */
/* 3. Ad Box Styles */
/* ==================================== */
.ad-box {
  flex: 0 0 240px; 
  width: 240px; 
  background-color: #000;
  padding: 0; 
  border: none;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px; 
}
.ad-box .ad-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    margin: 0 auto; 
}

/* ==================================== */
/* 4. Shimmer & Loader Styles (for index.html) */
/* ==================================== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.video-thumb.loading {
  background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  min-height: 135px;
  border-radius: 6px;
}
.channel-thumb.loading {
  background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
}
.video-title.loading {
  background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  height: 16px !important;
  border-radius: 4px;
  width: 100% !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
}
.video-subtitle-placeholder.loading {
  background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  height: 12px !important;
  width: 70% !important;
  margin-top: 5px;
  border-radius: 4px;
  color: transparent !important;
}

/* Loader Styles */
#loading-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.loader {
  position: relative;
  width: 46px;
  height: 46px;
  transform: rotate(45deg);
}
.square {
  position: absolute;
  width: 24.5px;
  height: 24.5px;
  background: #fff;
  transition: all 0.2s ease;
}
.pos1 { top: 0; left: 0; }
.pos2 { top: 0; left: 22.5px; }
.pos3 { top: 22.5px; left: 0; }
.pos4 { top: 22.5px; left: 22.5px; }

/* ==================================== */
/* 5. Responsive Grid Layout (New Addition) */
/* ==================================== */

/* التوزيع الافتراضي (للهاتف): عمود واحد */
.video-row {
  display: grid !important; 
  grid-template-columns: 1fr; /* عمود واحد (رأسي) */
  gap: 1.5rem; 
  padding: 0 1rem 1.5rem;
  overflow-x: hidden !important; 
}

.video {
  flex: unset !important; 
  width: 100% !important;
}

/* --- تصميم التابلت (الطول 3) --- */
@media (min-width: 768px) {
  /* للتابلت: 3 أعمدة متجاورة */
  .video-row {
    grid-template-columns: repeat(3, 1fr) !important; /* 🚨 تم التعديل إلى 3 أعمدة */
    gap: 2rem !important;
  }
}

/* --- تصميم الكمبيوتر (العرض 5) --- */
@media (min-width: 1200px) {
  /* للكمبيوتر: 5 أعمدة متجاورة */
  .video-row {
    grid-template-columns: repeat(5, 1fr) !important; /* 🚨 تم التعديل إلى 5 أعمدة */
    gap: 2rem !important;
  }
}