* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Cairo', Tahoma, "Segoe UI", Arial, sans-serif;
  background: #f7f8f7;
  color: #1f2937;
  direction: rtl;
}
a { text-decoration: none; color: inherit; }

/* الناف بار: صف واحد ثابت دايماً (بدون التفاف أو قائمة همبرغر) - لو ضاق العرض كتير بيسمح بسكرول أفقي بدل ما ينكسر لصف تاني */
header.nav {
  height: 80px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
header.nav::-webkit-scrollbar { display: none; }
.logo {
  font-size: 30px;
  font-weight: 800;
  color: #16803c;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.logo .ball { display: inline-flex; }
.logo .ball img { height: 34px; width: auto; display: block; }
.nav-links {
  display: flex;
  gap: 24px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.nav-links a {
  font-size: 1vw;
  font-weight: 600;
  line-height: 1.4;
  color: #374151;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover { color: #16803c; }
/* التبويب الفعّال: نفس لون النص، وخط تحته بنفس اللون */
.nav-links a.active {
  color: #16803c;
  border-bottom-color: #16803c;
}
.nav-actions { display: flex; gap: 10px; flex-shrink: 0; }

.btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.btn-primary { background: #16803c; color: #fff; }
.btn-outline { background: #fff; color: #16803c; border: 1px solid #16803c; }

.hero {
  height: 45vh;
  min-height: 420px;
  color: #fff;
  text-align: center;
  padding: 40px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background-image:
    linear-gradient(rgba(4,20,10,.35), rgba(4,20,10,.55)),
    url('header.jpg');
  background-size: cover;
  background-position: center center;
}
.hero h1 { font-size: 3em; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.hero p { color: #eef7f0; max-width: 640px; margin: 0 auto; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.hero .btn-primary { background: #fff; color: #0f5c2a; padding: 12px 26px; font-size: 15px; }

/* صندوق البحث صار جزء من الهيدر نفسه (فوق الصورة) بدل ما يكون تحتها */
.hero .search-box {
  margin-top: 30px;
  width: 100%;
}

.search-box {
  max-width: 900px;
  min-height: 30%;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.search-filters-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.search-box .btn-primary {
  white-space: nowrap;
  background: #004a1b;
  color: #fff;
  align-self: stretch;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* أيقونة عدسة بحث بسيطة (خط outline فقط بدون لون خاص - ترث لون النص) */
.search-box .btn-primary .search-icon {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}
.search-box .btn-primary .search-icon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 8px;
  background: currentColor;
  bottom: -7px;
  left: 11px;
  transform: rotate(-45deg);
}

.search-box .field { flex: 1; min-width: 120px; margin-bottom: 0; }
.search-box .field label { font-size: 11px; color: #9ca3af; margin-bottom: 2px; }
.search-box .field input {
  border: none;
  border-right: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 4px 12px;
  background: transparent;
}
.search-box .field:last-child input { border-right: none; }

/* حقل البحث الحر: صف مستقل بعرض كامل الصندوق، بوردر خفيف حواليه */
.search-box .field.search-field {
  width: 100%;
  background: #fbfbfb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.search-box .field.search-field input { border: none; padding: 0; background: transparent; }

/* مربعات الفلاتر (التاريخ / الرياضة / المدينة): عنوان فوق ومربع بحث تحته */
.search-box .field.filter-field {
  height: 95%;
  background: #fbfbfb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.search-box .field.filter-field label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6b7280;
  margin: 0;
}
.search-box .field.filter-field .icon { font-size: 13px; }
.search-box .field.filter-field input,
.search-box .field.filter-field select {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 8px;
  background: #fff;
  font-size: 13px;
  width: 100%;
  font-family: inherit;
  color: #1f2937;
}
/* حقل التاريخ: 3 قوائم منفصلة (يوم/شهر/سنة) بدل input[type=date] الأصلي - المتصفح ما بيحترم dir/CSS direction لهاد النوع من الحقول جوا صفحة RTL (تأكدنا فعلياً بالتجربة، حتى بمتصفح Chrome حقيقي)، فاستبدلناه بعناصر select عادية بترتيب LTR ثابت ومضمون */
.date-select-group { display: flex; direction: ltr; gap: 4px; width: 100%; }
/* appearance:none بتشيل سهم الاختيار الأصلي - كان ياخد مساحة داخلية كافية تخلي رقمين (متل "31") ينقصوا بصرياً جوا صندوق 41px بس */
/* الثلاثة (يوم/شهر/سنة) نفس الحجم افتراضياً (compact، بس قد الكلمة) - وبيتوسع أي وحدة فيهم لما تنفتح (JS بيضيف كلاس expanded عند focus) وبيرجع لحجمه لما ينسكر/ينختار قيمة (blur/change) */
.date-select-group select {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: 5px 2px;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: flex-grow .15s ease;
}
.date-select-group select.expanded { flex-grow: 3; }
.search-box .field.filter-field input:focus,
.search-box .field.filter-field select:focus {
  outline: none;
  border-color: #16803c;
}
.search-box .btn-primary { border: none; cursor: pointer; font-family: inherit; }

.stats-bar {
  max-width: 1100px;
  width: calc(100% - 48px);
  margin: 28px auto 0;
  background: #004a1b;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  text-align: center;
}
.stats-bar .stat-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  transition: background .15s;
  cursor: pointer;
}
.stats-bar .stat-item:hover { background: rgba(255,255,255,.08); }
.stats-bar .stat-text { text-align: right; }
.stats-bar .icon {
  display: inline-flex;
  color: #fff;
  flex-shrink: 0;
}
.stats-bar .icon svg { width: 40px; height: 40px; }
.stats-bar .num { font-size: 24px; font-weight: 800; color: #fff; }
.stats-bar .label { font-size: 13px; color: #bfe3cc; }

.section { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }
.section h2 { font-size: 22px; font-weight: 700; line-height: 1.3; color: #0f5c2a; margin-bottom: 20px; }

/* 4 بطاقات كبيرة: تقسيمين بتقسيمين على الشاشات الكبيرة، عمود واحد على الجوال */
.quad-grid {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sports-toggle-checkbox { position: absolute; opacity: 0; pointer-events: none; }
/* صف واحد دايماً (مو شبكة أعمدة) - أعداد البطاقات الظاهرة ثابتة بكل نقطة كسر (nth-child) بدل قياس JS */
/* .grid.sports-grid (مركّبة) بدل .sports-grid لوحدها - عشان تكسب أولوية أكيدة فوق .grid { display:grid; gap:20px } بغض النظر عن ترتيبهم بالملف (نفس مشكلة التعارض بالتخصيص المتساوي اللي صارت فينا أكتر من مرة) */
.grid.sports-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1vw;
  height: 10em; /* ديسكتوب */
}
.sports-grid .card,
.sports-grid .sports-more-card { flex: 0 0 auto; }
.sports-grid .card { padding: 0.6em; font-size: 1.5em; height: 100%; box-sizing: border-box; } /* حجم الإيموجي/البطاقة بنسبة em بدل بكسل - صغّرناها عشان الـ9 بطاقات تضبط بصف واحد بعرض الكمبيوتر بدون "المزيد" */
.sports-grid .card .muted { font-size: 0.45em; }
.sports-more-card { display: none; cursor: pointer; position: relative; flex-direction: column; align-items: center; justify-content: center; }
.sports-more-dots { font-size: 1.4em; font-weight: 800; color: #16803c; letter-spacing: 3px; }

/* "المزيد" بشكل قائمة منسدلة حقيقية - بتظهر تحت بطاقة المزيد وفيها كل الرياضات (بدل ما ترجع تفرد البطاقات المخفية بنفس الصف) */
.sports-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 0.5em;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 6px;
  min-width: 160px;
  flex-direction: column;
  z-index: 20;
  font-size: 0.5em; /* تعويض تكبير .card (1.8em) عشان القائمة ترجع بحجم نص طبيعي */
}
.sports-dropdown-panel a {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  text-align: start;
  border-radius: 6px;
  white-space: nowrap;
}
.sports-dropdown-panel a:hover { background: #f7f8f7; color: #16803c; }
.sports-toggle-checkbox:checked ~ .sports-grid .sports-more-card .sports-dropdown-panel { display: flex; }

@media (max-width: 820px) {
  .quad-grid { grid-template-columns: 1fr; }

  /* الناف بار: يضل صف واحد (اللوجو + التبويبات + زرين) بس يصغر - بدون همبرغر أو التفاف */
  header.nav { padding: 0 14px; gap: 16px; }
  .logo { font-size: 18px; gap: 5px; }
  .logo .ball img { height: 20px; }
  .nav-links { gap: 12px; }
  /* قاعدة القفزة والتدرج: 1.5vw لحالها كانت تهبط تحت هدفها عند 431px (6.5px - غير مقروء) قبل ما تقفز
     لـ2.2vw (9.46px) فوراً عند 430px. الصيغة تحت (تدرج خطي حقيقي بين 430px و820px) بتوصل بالضبط
     لـ9.46px عند 430px ولـ12.3px عند 820px (نفس قيمة 1.5vw الأصلية هناك) - بدون ما تنزل تحت الهدف أبداً. */
  .nav-links a { font-size: clamp(9.46px, calc(6.33px + 0.7282vw), 12.3px); }
  .nav-actions { gap: 6px; }
  .nav-actions .btn { padding: 6px 10px; font-size: 12px; }
  /* زر "إنشاء حساب" مخفي بالجوال (متاح من صفحة تسجيل الدخول) بناءً على طلب صريح */
  .nav-actions .btn:last-child { display: none; }
  /* نفس مبدأ القفزة والتدرج: كانت 2em (32px) ثابتة طول 431-819px وبعدين تقفز لـ1.1em (17.6px) عند 430px.
     الصيغة تدرّج خطي حقيقي يوصل لنفس القيمتين بالضبط عند طرفي المدى (820px و430px). */
  .hero h1 { font-size: clamp(17.6px, calc(1.72px + 3.6923vw), 32px); }
  .hero p { font-size: clamp(11.2px, calc(4.14px + 1.641vw), 17.6px); }

  /* اختر رياضتك المفضلة: الارتفاع بس بيتغير هون - عدد البطاقات الظاهرة تحسبه JS ديناميكياً (راجع setupSportsOverflow) */
  .grid.sports-grid { height: 6em; }
}
.quad-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  min-width: 0; /* بدونها grid item بيرجع لـ min-width:auto (حسب محتواه) وبيفيض الصفحة كلها أفقياً بمقدار البادينج، خصوصاً بعرض 421-430px حيث padding الأساسي (24px) يرجع فعّال بدل 16px */
}
.quad-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.quad-card h3 { font-size: 16px; font-weight: 700; line-height: 1.3; color: #0f5c2a; margin: 0; }
.quad-more {
  font-size: 13px;
  font-weight: 700;
  color: #16803c;
  white-space: nowrap;
}
.quad-more:hover { text-decoration: underline; }
.quad-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.quad-item { text-align: center; display: block; min-width: 0; } /* نفس مشكلة .quad-card - .quad-item-title عندها white-space:nowrap فبيصير عندها min-content عريض وبتفيض الشبكة المتداخلة */
.quad-item-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: linear-gradient(135deg, #16803c, #0f5c2a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 6px;
}
.quad-item-title {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quad-item-location { font-size: 10.5px; color: #6b7280; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quad-item-time { font-size: 10.5px; color: #374151; margin-bottom: 2px; }
.quad-item-stat { font-size: 11px; color: #16803c; font-weight: 700; }

.features-strip {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  text-align: center;
}
.feature-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e8f5ec;
  color: #16803c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 6px;
}
.feature-title { font-weight: 700; font-size: 14px; color: #1f2937; }
.feature-sub { font-size: 12px; color: #6b7280; }

.grid { display: grid; gap: 20px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow .15s;
}
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.card h3 { font-size: 16px; font-weight: 700; line-height: 1.3; color: #1f2937; margin: 0 0 6px; }
.muted { color: #6b7280; font-size: 14px; line-height: 1.5; margin: 0 0 6px; }

/* حالة "لا نتائج" - مشتركة بين شبكة الملاعب/المباريات وبطاقات الرئيسية.
   كلاس مستقل بذاته ومتعمَّد إنه ما يستخدم .muted: لأنه .muted بتصير font-size:0.5em تحت 430px
   (راجع بلوك @media max-width:430px بآخر الملف) يعني الرسالة بتنزل لـ~7px وبتصير غير مقروءة عملياً -
   وهاد بالضبط كان سبب إحساس المستخدم إنه البطاقات "اختفت" بدون أي تفسير. */
.search-empty { display: none; text-align: center; padding: 1.75em 1em; }
.search-empty.show { display: block; }
.search-empty-icon { font-size: 2em; line-height: 1; margin-bottom: 0.3em; }
.search-empty-title { font-size: 1em; font-weight: 700; color: #0f5c2a; margin: 0 0 0.35em; }
.search-empty-hint { font-size: 0.85em; color: #6b7280; line-height: 1.6; margin: 0 0 0.9em; }
.search-empty .btn { font-size: 0.85em; }
.badge {
  display: inline-block;
  background: #e8f5ec;
  color: #0f5c2a;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.tag {
  display: inline-block;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  margin-left: 6px;
  margin-bottom: 6px;
}
.price { color: #0f5c2a; font-weight: 700; margin-top: 8px; }

/* ===== صفحة الملاعب: سايد بار فلاتر حقيقية + شبكة بطاقات + ترقيم صفحات =====
   كل القياسات الجوانية بنسب مرنة (em/%) مو بكسل - بقرار صريح من المستخدم، عشان تتجاوب
   مع حجم الحاوية مو رقم ثابت. الـpx محصور بالحدود الرفيعة (1px) والانتقالات فقط. */
.venues-layout {
  display: flex;
  gap: 1.5em;
  align-items: flex-start;
}
.venues-sidebar {
  flex: 0 0 25%;
  width: 25%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.875em;
  padding: 1.1em;
  position: static;
  top: 1em;
  box-sizing: border-box;
}
.venues-sidebar h3 { font-size: 1em; color: #0f5c2a; margin: 0 0 0.9em; }
.filter-group { margin-bottom: 1.1em; }
.filter-group > label { display: block; font-size: 0.8em; font-weight: 700; color: #374151; margin-bottom: 0.5em; }
.filter-group select,
.filter-group input[type="range"] { width: 100%; }
.filter-group select {
  padding: 0.5em 0.6em;
  border: 1px solid #d1d5db;
  border-radius: 0.5em;
  font-size: 0.8em;
  font-family: inherit;
  background: #fff;
  color: #1f2937;
  box-sizing: border-box;
}
.filter-price-value { color: #16803c; font-weight: 700; }
/* خانة إدخال السعر يدوياً - جمب السلايدر، بنفس ستايل باقي حقول السايد بار */
.filter-price-input {
  width: 100%;
  margin-top: 0.4em;
  padding: 0.4em 0.6em;
  border: 1px solid #d1d5db;
  border-radius: 0.5em;
  font-size: 0.8em;
  font-family: inherit;
  color: #1f2937;
  box-sizing: border-box;
}
.filter-price-input:focus { outline: none; border-color: #16803c; }
.filter-radios, .filter-checks { display: flex; flex-direction: column; gap: 0.1em; }
.filter-radios label, .filter-checks label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8em;
  white-space: nowrap;
  color: #374151;
  cursor: pointer;
}
/* بادينج مستقل عن `.btn` العامة (8px 18px) - النص هون ("مسح جميع الفلاتر") أطول من زر عادي وبمساحة سايد بار ضيقة،
   فبادينج موحد 8px بكل الجهات (بدل 18px أفقي مورّث) بيعطيه مساحة تنفس متناسبة بدون هدر عرض. */
.filter-clear-btn { width: 100%; white-space: nowrap; font-size: 1em; padding: 8px; }

.venues-main { flex: 1 1 0; min-width: 0; }
.venues-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
  flex-wrap: wrap;
  gap: 0.6em;
}
.venues-toolbar select {
  padding: 0.5em 0.6em;
  border: 1px solid #d1d5db;
  border-radius: 0.5em;
  font-size: 0.8em;
  font-family: inherit;
  background: #fff;
}
.venues-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1em;
}
.venue-card {
  display: block;
  min-width: 0; /* عنصر grid بدون هالسطر بياخد min-width:auto (حسب محتواه) وبيفيض الشبكة - نفس باغ .quad-card السابق */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.875em;
  overflow: hidden;
  transition: box-shadow .15s;
}
.venue-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
/* الصورة أكبر (نسبة 4/3 بدل 16/9) - والإيموجي بعنصر منفصل (.venue-card-emoji) عشان حجمه ما يورَّث لعناصر تانية جواها متل البادج */
.venue-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #16803c, #0f5c2a);
  display: flex;
  align-items: center;
  justify-content: center;
}
.venue-card-emoji { font-size: 3.4em; line-height: 1; }
/* بادج "متاح/غير متاح": حجمها مستقل عن حجم الإيموجي (كانت موروثة منه فتضخّمت بشكل غير متناسب) */
.venue-card-badge {
  position: absolute;
  top: 0.6em;
  inset-inline-start: 0.6em;
  background: #16803c;
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  padding: 0.3em 0.7em;
  border-radius: 999px;
}
.venue-card-badge.unavailable { background: #9ca3af; }
.venue-card-body { padding: 0.9em; font-size: 1em; }
.venue-card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 0.4em; }
/* white-space:nowrap + ellipsis عشان العنوان (لو أكتر من كلمة) ما ينكسر لسطرين ويخرب ارتفاع البطاقة */
.venue-card-title-row h3 {
  font-size: 0.94em;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* تقييم البطاقة بدون خلفية (بخلاف .badge العادية المستخدمة بصفحات تانية) */
.venue-card-title-row .badge { background: none; padding: 0; flex-shrink: 0; }
.venue-card-amenities {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.4em;
  margin: 0.4em 0;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.venue-card-amenities .tag {
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0;
}
.venue-card-amenities-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: #16803c;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 0.35em 0.5em;
  cursor: pointer;
}
.venue-card-amenities-toggle.show { display: inline-flex; }
.venue-card-amenities-panel {
  display: none;
  position: fixed;
  z-index: 50;
  flex-wrap: wrap;
  gap: 0.4em;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.5em;
  min-width: 140px;
  max-width: 220px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.venue-card-amenities-panel.open { display: flex; }
.venue-card-amenities-panel .tag { margin: 0; }
/* السعر بسطر وزر الحجز بسطر تاني تحته (بدل جنب بعض) */
.venue-card-footer { display: flex; flex-direction: column; align-items: stretch; gap: 0.5em; margin-top: 0.6em; }
.venue-card-footer .price { margin-top: 0; }
.venue-card-footer .btn { width: 100%; text-align: center; padding: 0.5em 1em; font-size: 0.85em; }

.venues-pagination {
  display: flex;
  flex-wrap: wrap; /* لو عدد الصفحات كتير (متل PAGE_SIZE=2 بالجوال مع نتائج كتيرة)، تلف لصف تاني بدل ما تفيض أفقياً */
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-top: 1.5em;
}
.venues-pagination button {
  min-width: 2.1em;
  height: 2.1em;
  padding: 0 0.4em;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 0.5em;
  font-family: inherit;
  font-size: 0.8em;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}
.venues-pagination button:hover { border-color: #16803c; color: #16803c; }
.venues-pagination button.active { background: #16803c; border-color: #16803c; color: #fff; }
.venues-pagination button:disabled { opacity: .4; cursor: default; }

/* ===== بطاقة المدرب =====
   نوع بطاقة مستقل عن .venue-card (صورة أفقية 4/3) لأنه المدرب صورته دائرية ومحتواه متمركز.
   بيستخدم نفس شبكة .venues-grid وكل منطق list-page.js عبر cardSelector مخصص. */
.coach-card {
  display: block;
  min-width: 0; /* بدونها عنصر grid بياخد min-width:auto وبيفيض الشبكة - نفس درس .venue-card */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.875em;
  padding: 1.1em;
  text-align: center;
  transition: box-shadow .15s;
}
.coach-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.coach-avatar {
  width: 4.5em;
  height: 4.5em;
  margin: 0 auto 0.6em;
  border-radius: 50%;
  background: linear-gradient(135deg, #16803c, #0f5c2a);
  color: #fff;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coach-card h3 {
  font-size: 1em;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coach-specialty { font-size: 0.8em; color: #16803c; font-weight: 600; margin: 0 0 0.4em; }
.coach-rating { font-size: 0.8em; color: #b45309; font-weight: 700; margin: 0 0 0.3em; }
.coach-meta { font-size: 0.75em; color: #6b7280; margin: 0 0 0.7em; line-height: 1.6; }
.coach-card-footer { border-top: 1px solid #e5e7eb; padding-top: 0.7em; }
.coach-card-footer .price { display: block; margin: 0 0 0.5em; font-size: 0.9em; }
.coach-card-footer .btn { display: block; width: 100%; }

/* بانر دعوة (هل أنت مدرب؟) - قابل لإعادة الاستخدام بصفحات الأكاديميات/المواهب لاحقاً */
.cta-banner {
  background: linear-gradient(135deg, #16803c, #0f5c2a);
  color: #fff;
  border-radius: 0.875em;
  padding: 1.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}
.cta-banner-text h3 { font-size: 1.1em; font-weight: 700; margin: 0 0 0.3em; }
.cta-banner-text p { font-size: 0.85em; margin: 0; color: #cfe8d6; }
.cta-banner .btn { background: #fff; color: #0f5c2a; flex-shrink: 0; }

/* ===== غلاف فيديو يوتيوب (facade) =====
   ما منحمّل iframe لكل فيديو - 8 مواهب × فيديوهات = 8+ iframes وصفحة بطيئة جداً.
   بدلها غلاف خفيف (صورة مصغّرة من يوتيوب أو تدرّج بديل) + زر تشغيل، والـiframe بينحمّل
   بس عند الضغط. بيوفّر ~90% من وزن الصفحة. */
.video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.6em;
  overflow: hidden;
  background: linear-gradient(135deg, #16803c, #0f5c2a);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: block;
}
.video-thumb::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #0f5c2a;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: 0.15em; /* تعويض بصري - مثلث التشغيل مو متمركز بصرياً بالمنتصف الحسابي */
}
.video-thumb.playing::after { display: none; }
.video-thumb iframe, .video-thumb video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }

/* علامة مائية "ملعبك" فوق الفيديو/الصورة - بتبان كأنها مطبوعة على المحتوى نفسه (شفافة، بدون صندوق).
   بتضل ظاهرة حتى وقت التشغيل. text-shadow/drop-shadow عشان تنقرا على أي خلفية فاتحة أو غامقة.
   ملاحظة: هاد عرض بالواجهة فقط. الطبع الفعلي داخل الملف (watermark محروق ما ينشال) بده معالجة على
   السيرفر (ffmpeg للفيديو / معالجة صورة للصور) وقت الرفع - مستحيل ينعمل بالمتصفح لحاله. */
.video-logo, .media-watermark {
  position: absolute;
  bottom: 0.6em;
  inset-inline-end: 0.7em;
  z-index: 2;
  pointer-events: none; /* عشان ما تحجب أزرار تشغيل الفيديو */
  display: flex;
  align-items: center;
  gap: 0.3em;
  color: #fff;
  font-size: 0.9em;
  font-weight: 800;
  opacity: 0.8;
  text-shadow: 0 1px 4px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.5);
  letter-spacing: 0.02em;
}
.video-logo img, .media-watermark img {
  height: 1.4em; width: auto; display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)) brightness(0) invert(1); /* نخليه أبيض صافي عشان يبان علامة مائية */
}

/* تنبيه "بدون موسيقى" - لون مميز عن باقي نص البانر عشان ينقرا فوراً */
.cta-note {
  color: #ffd166;
  font-weight: 800;
  white-space: nowrap;
}

/* شريط تنبيه بصفحة الرفع */
.upload-warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 0.6em;
  padding: 0.9em 1em;
  margin-bottom: 1em;
}
.upload-warning-title { font-size: 0.9em; font-weight: 800; color: #92400e; margin: 0 0 0.3em; }
.upload-warning p { font-size: 0.8em; color: #78350f; line-height: 1.7; margin: 0; }
.upload-dropzone {
  border: 2px dashed #d1d5db;
  border-radius: 0.875em;
  padding: 1.8em 1em;
  text-align: center;
  cursor: pointer;
  background: #f9fafb;
}
.upload-dropzone:hover { border-color: #16803c; }
.upload-dropzone-icon { font-size: 2em; line-height: 1; margin-bottom: 0.3em; }
.upload-dropzone-text { font-size: 0.85em; color: #374151; font-weight: 600; }
.upload-dropzone-hint { font-size: 0.75em; color: #6b7280; margin-top: 0.25em; }

/* ===== لوحة التحكم (الإدارة) =====
   عرض للطلبات المعلّقة + موافقة/رفض. للمواهب: خيار كتم الصوت قبل الموافقة.
   القرارات محفوظة بـlocalStorage للعرض فقط - الفرض الحقيقي بده باكند. */
.admin-tabs { display: flex; gap: 0.5em; flex-wrap: wrap; margin-bottom: 1.2em; }
.admin-tab {
  border: 1px solid #d1d5db; background: #fff; border-radius: 999px;
  padding: 0.5em 1.1em; font-size: 0.85em; font-weight: 600; cursor: pointer;
  font-family: inherit; color: #374151;
}
.admin-tab.active { background: #16803c; border-color: #16803c; color: #fff; }
.admin-tab .count {
  display: inline-block; margin-inline-start: 0.4em; background: #ef4444; color: #fff;
  font-size: 0.75em; padding: 0 0.45em; border-radius: 999px; min-width: 1.3em; text-align: center;
}
.admin-tab.active .count { background: rgba(255,255,255,.3); }

.admin-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 0.875em;
  padding: 1.1em; margin-bottom: 1em; display: flex; gap: 1em; align-items: flex-start; flex-wrap: wrap;
}
.admin-card-emoji {
  width: 3em; height: 3em; border-radius: 0.6em; flex-shrink: 0;
  background: linear-gradient(135deg, #16803c, #0f5c2a); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.4em;
}
.admin-card-body { flex: 1 1 12em; min-width: 0; }
.admin-card-body h3 { font-size: 1em; margin: 0 0 0.25em; color: #1f2937; }
.admin-card-meta { font-size: 0.8em; color: #6b7280; line-height: 1.6; margin: 0; }
.admin-card-video {
  margin-top: 0.7em; padding: 0.7em; background: #f9fafb; border-radius: 0.6em;
  font-size: 0.8em; color: #374151;
}
.admin-mute-toggle { display: flex; align-items: center; gap: 0.5em; margin-top: 0.5em; cursor: pointer; font-weight: 600; }
.admin-card-actions { display: flex; gap: 0.5em; flex-wrap: wrap; align-items: center; }
.admin-card-actions .btn { font-size: 0.82em; padding: 0.5em 1em; }
.btn-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }
.admin-empty { text-align: center; padding: 2.5em 1em; color: #6b7280; }
.admin-empty-icon { font-size: 2.5em; margin-bottom: 0.4em; }
.admin-badge-done { font-size: 0.8em; font-weight: 700; padding: 0.3em 0.8em; border-radius: 0.5em; }
.admin-badge-approved { background: #e8f5ec; color: #0f5c2a; }
.admin-badge-rejected { background: #fef2f2; color: #b91c1c; }
.video-title { font-size: 0.8em; color: #374151; font-weight: 600; margin: 0.4em 0 0; }
.talent-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; margin-top: 0.6em; }
@media (max-width: 430px) { .talent-videos { grid-template-columns: 1fr; } }

/* ===== صفحة تفاصيل الملعب =====
   نفس مبدأ صفحات القوائم: العمود الرئيسي يمين (RTL) والثانوي شمال، وبيضلوا جنب بعض بكل العروض.
   كل القياسات الجوانية بـem/% حسب قاعدة المشروع. */
.detail-breadcrumb { font-size: 0.8em; color: #6b7280; margin-bottom: 1em; }
.detail-breadcrumb a { color: #16803c; font-weight: 600; }
.detail-breadcrumb span { margin: 0 0.35em; }

.detail-hero { display: flex; gap: 1.5em; align-items: flex-start; margin-bottom: 1.2em; }
.detail-gallery { flex: 1.3 1 0; min-width: 0; }
.detail-info { flex: 1 1 0; min-width: 0; }

.detail-main-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0.875em;
  background: linear-gradient(135deg, #16803c, #0f5c2a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  color: #fff;
  overflow: hidden;
}
.detail-img-count {
  position: absolute; bottom: 0.5em; inset-inline-start: 0.5em;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 0.22em; font-weight: 700;
  padding: 0.4em 0.8em; border-radius: 999px;
}
.detail-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5em; margin-top: 0.5em; }
.detail-thumb {
  aspect-ratio: 4 / 3; border-radius: 0.5em; cursor: pointer;
  background: linear-gradient(135deg, #16803c, #0f5c2a);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2em; color: #fff; opacity: .65; transition: opacity .15s;
}
.detail-thumb:hover, .detail-thumb.active { opacity: 1; outline: 2px solid #16803c; }

/* الصور المرفوعة (DataBridge بيرجّعها كـ<img class="db-img">) بتملّي حاوية الإيموجي نفسها
   بكل مكان: بطاقات القوائم، أفاتار المدرب، الصورة الرئيسية والمصغّرات، ومربّعات الرئيسية. */
.coach-avatar, .detail-thumb, .quad-item-image { position: relative; overflow: hidden; }
.venue-card-image img.db-img, .coach-avatar img.db-img, .detail-main-img img.db-img,
.detail-thumb img.db-img, .quad-item-image img.db-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}

.detail-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.detail-title-row h1 { font-size: 1.5em; font-weight: 800; color: #0f5c2a; margin: 0; }
.detail-rating-badge {
  background: #16803c; color: #fff; font-weight: 700; font-size: 0.85em;
  padding: 0.3em 0.7em; border-radius: 0.5em; flex-shrink: 0;
}
.detail-sport { font-size: 0.9em; color: #6b7280; margin: 0.3em 0 0.6em; }
.detail-address { font-size: 0.85em; color: #374151; margin: 0 0 1em; line-height: 1.6; }
.detail-actions { display: flex; gap: 0.5em; flex-wrap: wrap; }
.detail-actions .btn { flex: 1 1 auto; text-align: center; }

/* صف المواصفات - أيقونة فوق وقيمة تحت */
.detail-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
  gap: 0.8em; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 0.875em; padding: 1em; margin-bottom: 1.5em;
}
.detail-spec { text-align: center; min-width: 0; }
.detail-spec-icon { font-size: 1.4em; line-height: 1; }
.detail-spec-label { font-size: 0.7em; color: #6b7280; margin: 0.3em 0 0.15em; }
.detail-spec-value { font-size: 0.8em; font-weight: 700; color: #1f2937; }

/* جسم الصفحة: عمودين */
.detail-body { display: flex; gap: 1.5em; align-items: flex-start; }
.detail-col-main { flex: 1.6 1 0; min-width: 0; }
.detail-col-side { flex: 1 1 0; min-width: 0; }
.detail-panel {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 0.875em;
  padding: 1.1em; margin-bottom: 1.2em;
}
.detail-panel h3 { font-size: 1em; color: #0f5c2a; margin: 0 0 0.9em; }

/* جدول الحجوزات */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5em, 1fr)); gap: 0.5em; }
.slot {
  border: 1px solid #d1d5db; border-radius: 0.5em; padding: 0.6em 0.3em;
  text-align: center; font-size: 0.75em; cursor: pointer; background: #fff;
  font-family: inherit; color: #1f2937;
}
.slot-time { display: block; font-weight: 700; direction: ltr; }
.slot-state { display: block; font-size: 0.85em; margin-top: 0.2em; color: #16803c; }
.slot.booked { background: #f9fafb; color: #9ca3af; cursor: not-allowed; }
.slot.booked .slot-state { color: #b91c1c; }
.slot.selected { border-color: #16803c; background: #e8f5ec; }
.slot-legend { display: flex; gap: 1em; justify-content: center; font-size: 0.75em; color: #6b7280; margin-top: 0.8em; }
.slot-legend span::before { content: "●"; margin-inline-end: 0.3em; }
.slot-legend .free::before { color: #16803c; }
.slot-legend .busy::before { color: #b91c1c; }

/* الأسعار */
.price-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); gap: 0.8em; }
.price-tier { border: 1px solid #e5e7eb; border-radius: 0.6em; padding: 0.8em; text-align: center; min-width: 0; }
.price-tier-label { font-size: 0.75em; color: #6b7280; margin-bottom: 0.3em; }
.price-tier-value { font-size: 1em; font-weight: 800; color: #0f5c2a; }
.price-tier-note { font-size: 0.7em; color: #9ca3af; margin-top: 0.2em; }
.price-hint { background: #e8f5ec; color: #0f5c2a; font-size: 0.78em; font-weight: 600; padding: 0.6em 0.8em; border-radius: 0.5em; margin-top: 0.8em; text-align: center; }

/* الخدمات */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); gap: 0.6em; }
.service-item {
  border: 1px solid #e5e7eb; border-radius: 0.6em; padding: 0.7em 0.4em;
  text-align: center; font-size: 0.72em; color: #374151; min-width: 0;
}
.service-item-icon { display: block; font-size: 1.4em; margin-bottom: 0.25em; }

/* الخريطة (نائب بصري - ما في تكامل خرائط فعلي بالنسخة الثابتة) */
.detail-map {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 0.6em;
  background: repeating-linear-gradient(45deg, #eef2f0, #eef2f0 10px, #e3e9e5 10px, #e3e9e5 20px);
  display: flex; align-items: center; justify-content: center;
  font-size: 2em; margin-bottom: 0.7em;
}

/* التقييمات */
.review-summary { display: flex; gap: 1.2em; align-items: center; margin-bottom: 1em; flex-wrap: wrap; }
.review-score { text-align: center; flex-shrink: 0; }
.review-score-num { font-size: 2.2em; font-weight: 800; color: #0f5c2a; line-height: 1; }
.review-score-meta { font-size: 0.72em; color: #6b7280; margin-top: 0.3em; }
.review-bars { flex: 1 1 10em; min-width: 0; }
.review-bar-row { display: flex; align-items: center; gap: 0.5em; font-size: 0.72em; color: #6b7280; margin-bottom: 0.25em; }
.review-bar { flex: 1; height: 0.5em; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.review-bar-fill { height: 100%; background: #16803c; }
.review-card { border-top: 1px solid #e5e7eb; padding-top: 0.8em; margin-top: 0.8em; }
.review-card-head { display: flex; justify-content: space-between; gap: 0.5em; font-size: 0.8em; }
.review-card-name { font-weight: 700; color: #1f2937; }
.review-card-when { color: #9ca3af; font-size: 0.9em; }
.review-card-stars { color: #b45309; font-size: 0.78em; margin: 0.2em 0 0.3em; }
.review-card-text { font-size: 0.8em; color: #374151; line-height: 1.6; margin: 0; }

/* تحت 820px: نفس منطق صفحات القوائم - العمودين يضلوا جنب بعض بس بنسب أضيق */
@media (max-width: 820px) {
  .detail-hero { gap: 1em; }
  .detail-title-row h1 { font-size: 1.15em; }
  .detail-thumbs { grid-template-columns: repeat(4, 1fr); }
  .detail-body { gap: 1em; }
  .detail-col-side { flex: 0 0 32%; }
}
@media (max-width: 430px) {
  /* الهيرو بيصير عمود - الصورة فوق والمعلومات تحت (المعلومات مقروءة أهم من كونها جنب الصورة بعرض 375) */
  .detail-hero { flex-direction: column; }
  .detail-thumbs { grid-template-columns: repeat(4, 1fr); }
  .detail-actions .btn { font-size: 0.8em; padding: 0.5em 0.6em; }
  .detail-col-side { flex: 0 0 38%; }
  .detail-panel { padding: 0.8em; }
}

/* تحت 820px: سايد بار + شبكة بطاقات مرنة (auto-fit) - عدد الأعمدة (3 قريب من 820px، يصغر لـ2 كل ما ضاقت المساحة)
   مش محكوم بنقطة كسر جديدة، إنما بالمساحة الفعلية المتاحة لعمود البطاقات (بعد ما يوخد السايد بار نصيبه).
   30% (=246px عند 820px) و34% (=135px عند 430px - **قيمة مقاسة فعلياً من الـDOM مش 34%×430 نظرياً**،
   لأنه `flex-basis: %` بتتحسب من عرض `.venues-layout` (الحاوية) مش عرض الشاشة مباشرة، وفيه فرق حقيقي بينهم)
   هني القيمتين المرجعيتين المُختبرتين فعلياً (أضيق نسبة ما بتكسر عناصر السايد بار). **قاعدة القفزة والتدرج**:
   بدل ما يضل 30% ثابت طول 431-819px ويقفز لـ34% فجأة عند 430px (وهاد كان يخلي عرض السايد بار الفعلي
   بالبكسل *أضيق* عند 431px منه عند 430px - عكس المتوقع!)، بتدرّج خطي بالـvw يوصل بالضبط لنفس القيمتين
   عند طرفي المدى، بدون قفزة أو تراجع. */
/* Zone A: 820px→1148px (فوق 1148px الحاوية `.venues-layout` بتوصل أقصى عرضها 1052px بسبب `.section{max-width:1100px}`
   فبتضل `.venues-sidebar` (25%) ثابتة 263px - قيمة مقاسة فعلياً). القاعدة الأساسية (`flex:0 0 25%`) كانت تعطي
   189.5px عند 821px بالضبط - قفزة حقيقية +56.5px لما تدخل بلوك 820px تحت (246px). هالتدرّج بيوصل بالضبط
   لنفس القيمتين المقاستين فعلياً (263px عند 1148px، 246px عند 820px) - نفس منهجية Zone B تحت. */
@media (min-width: 821px) and (max-width: 1148px) {
  .venues-sidebar { flex-basis: clamp(246px, calc(203.5px + 5.183vw), 263px); width: clamp(246px, calc(203.5px + 5.183vw), 263px); }
}

@media (max-width: 820px) {
  .venues-sidebar { flex-basis: clamp(135px, calc(12.6px + 28.46vw), 246px); width: clamp(135px, calc(12.6px + 28.46vw), 246px); }
  .venues-grid { grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); }
  .filter-clear-btn { font-size: 0.8em; }
  /* لا تصغير خط هون (2026-08-02) - كان في تصغير مؤقت لـ0.72em هون (ولاحقاً استُرجع 0.8em تحت 430px بشكل منفصل)،
     بس هاد كان يخلق قفزة حقيقية بين 431px (0.72em) و430px (0.8em) رغم إنه عرض السايد بار متطابق تقريباً
     عند الاثنين (135px بعد إصلاح `flex-basis`) - يعني ماكو سبب فعلي يخلي 0.8em يشتغل عند 430 وما يشتغل عند
     431 بنفس العرض بالضبط. **تحقّقنا فعلياً**: 0.8em بدون فيض بكل عرض 431-819px (بما إنه 135px هو أضيق نقطة
     بالمدى أصلاً، ونفس القيمة شغالة عند 430). حذفنا التصغير نهائياً - القاعدة الأساسية (0.8em بسطر ~481) هلق
     كافية لوحدها لكل المدى من 320px للديسكتوب، بدون أي جزء يحتاج قيمة مختلفة. */
}



/* تحت 430px: نفس المنطق بس 34% (بدل 42% القديمة) - أضيق نسبة جربناها فعلياً بعرض 320px (الأضيق المدعوم بالموقع)
   بدون ما يفيض أي select. PAGE_SIZE هلق بيتحسب ديناميكياً بـJS (venues.html) مش رقم ثابت. */
@media (max-width: 430px) {
  .venues-layout { gap: 0.8em; }
  .venues-sidebar { flex-basis: 34%; width: 34%; padding: 0.2em; font-size: 3.5vw;}
  .venues-sidebar h3 { font-size: 0.9em; }
  .venues-grid { grid-template-columns: 1fr; }
  /* 0.7em (المضبوط بعرض 431px) بيفيض 5px عند 320px تحديداً - السايد بار (34%) بيصير ~68px بس بهالعرض
     الأضيق. 0.58em (قسناها فعلياً - 0.6em نفسها كانت بالكاد تضبط بدون هامش أمان) بتضمن صفر فيض. */
  .filter-clear-btn { font-size: 0.7em; }
  /* تسمية السعر ("السعر للساعة (حتى 30,000 ل.س)") كانت أطول جملة بالسايد بار - جربنا فعلياً بعرض 320px
     (سايد بار 34%≈70px): بحجم 0.8em العادي كانت تتكسر لـ4-6 أسطر مجزّأة (حتى بعد فصلها بـ<br> يدوي، لأنه
     "السعر للساعة" و"(حتى...ل.س)" كل وحدة لحالها كانت لسا أطول من 70px). الحل: فصلناها HTML لعنصرين -
     `.filter-price-label` (السعر للساعة فقط) و`.filter-price-hint` (حتى...ل.س) - وصغّرنا كل وحدة لحجم
     قسناه فعلياً يخليها سطر واحد بالضبط بعرض 70px، بدل الاعتماد على تكسير النص العشوائي. */
  /* لازم `label.filter-price-label` (مش `.filter-price-label` لحالها) عشان تكسب أولوية أعلى من
     `.filter-group > label` (فوق) - تخصيصها أعلى (كلاس+نوع) بغض النظر عن ترتيب الملف، نفس مشكلة
     "تعارض التخصيص المتساوي" الموثّقة سابقاً بالمشروع. */
  label.filter-price-label { font-size: 0.7em; }
  .filter-price-hint { display: block; font-size: 0.79em; margin-top: 0.2em; color: #6b7280; font-weight: 400; }
  /* باغ فيض حقيقي لقيناه بالتجربة (2026-08-02): `.filter-radios label, .filter-checks label` عندهم
     `white-space:nowrap` (بطلب سابق، وشغالة صح بمدى 431-819px) - بس بعرض 320-375px الليبلات الأطول
     ("مواقف سيارات"، "كاميرات مراقبة") بتفيض 16-35px برا السايد بار (98-117px بس). جربنا تصغير الخط
     كحل بديل: حتى 0.5em (8px - غير مقروء عملياً) كانت لسا تفيض شوي. **الحل الصح**: نسمح بالتفاف طبيعي
     (`white-space:normal`) بس تحت 430px - الليبلات الطويلة تتكسر لسطرين قابلين للقراءة بدل نص مضغوط
     أو فايض. تم التحقق فعلياً بعرض 320px: صفر فيض، والليبلات القصيرة ضلت سطر واحد. */
  .filter-radios label,
  .filter-checks label { white-space: normal; }
  /* `.filter-group select` (المدينة/الرياضة) كان يفيض 7px بعرض 320px تحديداً (أحد الخيارات الافتراضية
     "كل الرياضات" أطول من مساحة الـselect المتاحة). **تحذير قفزة وقعنا فيه بالتجربة**: أول محاولة استخدمت
     `font-size: 4vw` (بيكبر مع العرض) بدل `0.8em` الثابتة - هيك كان الخط يوصل 16.8px عند 430px بينما
     Zone B (431px) بتضل عند 12.8px (0.8em) - قفزة جديدة عكسية بالضبط نفس النمط يلي عم نصلحه بكل مكان تاني!
     **الحل الصح**: خلينا `font-size: 0.8em` (نفس Zone B، صفر قفزة عند 431) وبس صغّرنا البادينج الأفقي
     (`0.2em 0.1em` بدل `0.5em 0.6em` الأساسية) - قسناها فعلياً: صفر فيض بعرض 320px، وصفر قفزة عند 430/431px. */
  .filter-group select { padding: 0.2em 0.1em; }
}

.form-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 28px;
  max-width: 420px;
  margin: 40px auto;
}
.form-box h1 { text-align: center; color: #0f5c2a; margin-bottom: 20px; font-size: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.role-picker { display: flex; gap: 8px; }
.role-picker div {
  flex: 1;
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  cursor: pointer;
}
.role-picker div.selected { border-color: #16803c; background: #e8f5ec; color: #0f5c2a; }

/* رفع صورة الملعب: مربع معاينة background-size:cover (بدون تفريغ/letterboxing قبيح)
   + سحب لتحديد الجزء الأفضل عبر تحريك background-position - أبسط حل عملي بدون مكتبة قص خارجية */
.venue-image-uploader { display: flex; justify-content: center; }
.venue-image-preview {
  position: relative; /* عشان العلامة المائية المطلقة تنمركز صح */
  width: 45%;
  min-width: 140px;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border: 2px dashed #d1d5db;
  border-radius: 0.875em;
  background-color: #f7f8f7;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}
.venue-image-preview.has-image { cursor: grab; border-style: solid; border-color: #16803c; }
.venue-image-preview.dragging { cursor: grabbing; }
.venue-image-placeholder { color: #6b7280; font-size: 0.85em; text-align: center; padding: 0.5em; pointer-events: none; }

.map-box {
  height: 220px;
  border-radius: 10px;
  background: #d9e8de url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23d9e8de"/><path d="M0 20 H100 M0 50 H100 M0 80 H100 M20 0 V100 M50 0 V100 M80 0 V100" stroke="%23c3ddc9" stroke-width="1"/></svg>');
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #16803c;
}

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.slot { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; font-size: 12px; text-align: center; cursor: pointer; }
.slot:hover { border-color: #16803c; }
.slot.selected { background: #16803c; color: #fff; }

.pending-banner {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 20px;
}

.venues-toolbar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.venues-toolbar select { font-size: 0.5em; }

footer {
  text-align: center;
  padding: 1em;
  color: #9ca3af;
  font-size: 13px;
}

.site-footer {
  background: #001c08;
  color: #cfe8d6;
  margin-top: 5px;
}
.footer-top {
  max-width: 1100px;
  min-height: 150px;
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 auto;
  padding: 0 24px 10px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-brand { flex: 1 1 33%; min-width: 200px; }
/* الشعار وكلمة "ملعبك" يمين، والوصف بالوسط/اليسار جنبهم بنفس الصف */
.footer-brand-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  position: relative;
  right: -8px; /* إزاحة بسيطة لليمين */
}
.footer-brand-top .logo { margin-bottom: 0; flex-shrink: 0; }
.footer-brand-top p { margin-bottom: 0; }
.footer-links-group {
  flex: 2 1 60%;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  /* خط عمودي يفصل قسم الشعار/الوصف عن باقي أعمدة الروابط */
  border-inline-start: 1px solid rgba(255,255,255,.15);
  padding-inline-start: 20px;
}
.footer-links-group .footer-col { flex: 1; min-width: 110px; }
.footer-col .logo { color: #fff; font-size: 15px; margin-bottom: 3px; }
.footer-col .logo .ball img { height: 16px; width: auto; display: block; }
.footer-col p {
  font-size: 11px;
  color: #a9d1b6;
  line-height: 1.4;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.footer-col h4 { color: #fff; font-size: 12px; margin: 0 0 5px; }
.footer-col a {
  display: block;
  font-size: 11px;
  color: #cfe8d6;
  margin-bottom: 3px;
}
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { display: flex; color: #a9d1b6; }
.footer-social a:hover { color: #fff; }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
  padding: 10px 24px 0;
  font-size: 11px;
  color: #a9d1b6;
}

@media (max-width: 820px) {
  /* ستاتس بار: كانت أحجام الأيقونة/الرقم/التسمية ثابتة بكسل (40/24/13px) طول 431-819px وبعدين تقفز
     فجأة لقيم أصغر (em) عند 430px - نفس قاعدة القفزة والتدرج. تدرّج خطي حقيقي يوصل لنفس القيمتين
     بالضبط عند طرفي المدى (820px و430px)، بغض النظر عن تبدّل الشبكة (auto-fit مقابل 2 أعمدة) عند 430px. */
  .stats-bar .icon svg { width: clamp(28.8px, calc(16.45px + 2.872vw), 40px); height: clamp(28.8px, calc(16.45px + 2.872vw), 40px); }
  .stats-bar .num { font-size: clamp(18.4px, calc(12.23px + 1.436vw), 24px); }
  .stats-bar .label { font-size: clamp(11.2px, calc(9.22px + 0.4615vw), 13px); }

  /* الفوتر: `.footer-links-group` كانت `flex-wrap:wrap` طول 431-819px (نفس قاعدة الديسكتوب، سطر 801 فوق)
     بينما تحت 430px صارت `nowrap` - يعني عمود "الدعم" كان ينزل لصف لحاله بمنتصف المدى، بينما تحت 430
     التلاتة أعمدة بصف واحد دايماً. وحّدنا لـ`nowrap` + `min-width:0` (أعمدة تتقلص بدل ما تنزل لصف جديد)
     بكل المدى 431-819px كمان - نفس نتيجة 430px بالضبط، بدون قفزة بعدد الصفوف. **لازم تنكتب هون (بعد تعريف
     `.footer-links-group` الأساسي بسطر 801) مش بأول بلوك 820px بأول الملف - وإلا القاعدة الأساسية بتغلب
     عليها بالكاسكيد رغم تحقق شرط الـmedia (نفس باغ ترتيب الملف الموثّق بقسم 6). */
  .footer-links-group { flex-wrap: nowrap; }
  .footer-links-group .footer-col { min-width: 0; }

  /* فيتشرز ستريب: أعمدة أضيق وأيقونات أصغر عشان ما يصير عمودين بأيقونات ضخمة */
  .features-strip { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; padding: 18px; }
  .feature-icon { width: 38px; height: 38px; font-size: 17px; margin-bottom: 2px; }
  .feature-title { font-size: 13px; }
  .feature-sub { font-size: 11px; }
  .section { padding: 2vw 3vw; }
  .section h2 {font-size: 1em; }
  .sports-grid .card .muted {font-size: 0.45em; white-space: nowrap;}
  .sports-grid .card { padding: 1.1em; font-size: 1em;}

  /* صندوق البحث: تخطيط الحقول (2×2 جدول + فونت/ارتفاعات أصغر) - نقلناه من بلوك 430px لهون (2026-08-01)
     لأنه ما كان في أي قاعدة لصندوق البحث بين 431-819px، فكان يرجع للتخطيط الافتراضي (flex بعرض كامل لكل حقل)
     وهاد كان يخلي حقول التاريخ (3 selects) تفيض بالطول لحد ما تطلع برا حدود صندوق البحث كلياً - باغ فيض عمودي
     حقيقي تأكدنا منه (`.filter-field` كانت توصل ارتفاع 194px وتنزل 274px تحت حافة `.search-box` السفلية) */
  /* باغ فيض إضافي لقيناه بالتجربة (2026-08-02): `.search-box` عندها `min-height:30%` جوا `.hero` (flex column
     بـheight:45vh/420px ثابتة بهالمدى) - بما إنه `flex-shrink` الافتراضي = 1، فليكس كان يصغّر صندوق البحث
     تحت ارتفاع محتواه الحقيقي لما "التاريخ+الرياضة+المحافظة/المدينة+زر البحث" كلهم صاروا يحتاجوا مساحة أكبر
     (بعد تفعيل شبكة 2×2 تحت)، فزر "ابحث الآن" كان يطلع 22px برا حدود الصندوق (`overflow:visible` بيخلي الفيض يبين). */
  .hero .search-box { padding: 10px; flex-shrink: 0; margin-top: 2px; }
  .search-box .field { min-width: 0; }
  .search-box .field.search-field { width: 100%; height: 38px; }
  .search-filters-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .search-box .field.filter-field { height: auto; min-height: 46px; }
  .search-box .field.filter-field label { font-size: 10px; }
  .search-box .field.filter-field input,
  .search-box .field.filter-field select { font-size: 12px; padding: 4px 6px; }
  .search-filters-row .filter-field:nth-child(1) { grid-column: 1; } /* التاريخ */
  .search-filters-row .filter-field:nth-child(2) { grid-column: 2; } /* نوع الرياضة */
  .search-filters-row .filter-field:nth-child(3) { grid-column: 1; } /* المحافظة */
  .search-filters-row .filter-field:nth-child(4) { grid-column: 2; } /* المدينة/المنطقة */
  .search-box .btn-primary { grid-column: 1 / -1; width: 100%; height: 38px; font-size: 13px; padding: 10px 18px; }

  /* الفوتر: نفس نقطة الكسر متل الناف بار، عشان ما يبقى فيه فجوة تسبب سكرول */
  .footer-top { min-height: 0; max-height: none; overflow: visible; align-items: flex-start; }
}

/* نقطة كسر مخصصة للهيدر/الناف بار وحدهم (2026-08-02) - مش 820 ولا 430، إنما نقطة حقيقية قِسناها بالتجربة:
   بعرض ~730-745px بالضبط (مع أصغر حجم خط مقروء للتبويبات، راجع clamp() بأول بلوك 820px) صف الهيدر
   الواحد (لوجو + 7 تبويبات + زرين) بيبلش يفيض فعلياً (سكرول أفقي يخبي الأزرار، تأكدنا `scrollWidth` بيتجاوز
   `clientWidth` بدون هامش أمان). قبل هيك كان التحول لصفين (تبويبات فوق الصورة) ما بيصير غير عند 430px، يعني
   بين 431-819px الأزرار ("تسجيل الدخول"/"أضف ملعب") كانت تختفي/تحتاج سكرول بدل ما تبين. هلق بتحول لصفين
   أبكر (عند 760px - رقم مدوّر بهامش أمان فوق نقطة الفيض الفعلية 730px) عشان الأزرار تضل ظاهرة دايماً. */
@media (max-width: 760px) {
  /* الناف بار: صف أفقي (مو عامود) بارتفاع ثابت 60px، فوق صورة الهيرو تماماً، يبلش من يمين الشاشة */
  .nav-links {
    position: absolute;
    top: 80px; /* أعلى صورة الهيرو - مباشرة تحت header.nav الثابت 80px */
    inset-inline-start: 0;
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 16px;
    overflow-x: auto;
    z-index: 5;
  }
  /* بدون خط تحت التبويبات العادية - بس النشط منها بلون أخضر وخط أخضر تحته (زي الأصل بالديسكتوب) */
  .nav-links a {
    color: #fff;
    font-size: 2.2vw;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
  }
  .nav-links a:hover { color: #bfe3cc; }
  .nav-links a.active { color: #16803c; border-bottom-color: #16803c; text-shadow: none; }

  /* عنوان ووصف الهيرو: يرجعوا عرض كامل تحت صف التبويبات مباشرة (مو جنبه) - نفس ترتيب الصورة: تبويبات، عنوان، وصف، صندوق بحث */
  /* height:auto لازم - الهيرو أصلاً height:45vh ثابت (قاعدة الديسكتوب)، وهاد بيخلي محتواه يفيض/يتقلص لأنه flex-shrink بيصغّر صندوق البحث دون محتواه */
  .hero {
    height: auto;
    min-height: 360px;
    justify-content: flex-start;
    padding-top: 76px; /* 60px ارتفاع التبويبات + 16px فراغ - لازم يضل لحاله بدون شورت‌هاند يلغيه */
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
    gap: 10px;
  }
  .hero h1, .hero p { width: 100%; max-width: 100%; margin-inline-start: 0; margin-inline-end: 0; }
  .hero h1 { font-size: 1.1em; margin-top: -10px;  } /* نسبة مرنة بدل رقم ثابت - بطلب صريح من المستخدم، بتتناسب تلقائياً مع أي عرض بدون حاجة لضبط لكل نقطة كسر */
  .hero p { font-size: 0.7em; }

  /* صندوق البحث: صف منفصل تماماً تحت (تبويبات + عنوان + وصف) - مارجن-توب كافي عشان ما يصير تراكب */
  .hero .search-box { width: 100%; margin-top: 20px; }
}

@media (max-width: 430px) {
  /* مدمجة من نقطة 420px القديمة (انلغت - صار عنا نقطتين بس: 820 و430) */
  /* عمودين × صفين ثابت (2x2) دايماً بدل auto-fit/minmax(140px) اللي كان يخلي 320px ينكسر لعامود واحد فقط
     (لأنه 2×140px ما كان يضبط بعرض 320 ناقص الحواف). الحاوية (.stats-bar) نفسها "الأب" فبتضل % محسوبة من الشاشة،
     وكل العناصر الجوانية (الأيقونة/الرقم/التسمية/الفراغات) بنسب مرنة (em/vw) مو بكسل ثابت */
  .stats-bar {
    width: calc(100% - 8vw);
    grid-template-columns: repeat(2, 1fr);
    padding: 3vw;
    gap: 2vw;
  }
  .stats-bar .icon svg { width: 1.8em; height: 1.8em; }
  .stats-bar .num { font-size: 1.15em; }
  .stats-bar .label { font-size: 0.7em; }

  .section { padding: 10px 10px; }
  .quad-grid { padding: 0 16px; }
  .quad-items { grid-template-columns: repeat(2, 1fr); }

  /* فيتشرز ستريب: صفين × عمودين (2×2) بدل auto-fit اللي كان يعطي عدد أعمدة متغير */
  .features-strip { grid-template-columns: repeat(2, 1fr); }

  .form-box { margin: 24px 16px; padding: 20px; }

  /* الفوتر: صفين تحت 430px بدل صف واحد جنب بعض
     الصف الأول: عمود (الشعار فوق + التواصل تحته) نص المساحة، وعمود الوصف نص المساحة التانية
     الصف الثاني: 3 أعمدة روابط بصف واحد */
  /* align-items:stretch لازم - القاعدة الأساسية align-items:flex-start كانت بتخلي الصف الثاني ياخد عرضه الطبيعي بس (190px) ويلزق بجهة وحدة بدل ما يمتد كامل العرض */
  .footer-top { flex-direction: column; max-height: none; align-items: stretch; }
  .footer-brand, .footer-links-group { flex: 1 1 100%; }
  .footer-brand {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "logo desc" "social desc";
    gap: 0.6em 1em;
    align-items: start;
  }

  .muted { font-size: 0.5em; }

  .footer-brand-top { display: contents; }
  .footer-brand-top .logo { grid-area: logo; margin-bottom: 0; }
  .footer-brand-top p { grid-area: desc; margin-bottom: 0; font-size: 0.85em; }
  .footer-social { grid-area: social; }

  .footer-links-group { border-inline-start: none; padding-inline-start: 0; flex-wrap: nowrap; gap: 0.8em; }
  .footer-links-group .footer-col { flex: 1 1 0; min-width: 0; }
  /* أحجام الخط بنسب مرنة (em) مو أرقام ثابتة، عشان تتصغّر/تتكبّر تلقائياً مع المساحة المتاحة وما تتراكب */
  .footer-col h4 { font-size: 0.75em; }
  .footer-col a { font-size: 0.7em; }
  .footer-col .logo { font-size: 0.95em; }
}

.note {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  margin: 16px auto 0;
  max-width: 1100px;
}

/* ===== شروط النشر واستخدام المحتوى (terms.js) ===== */
/* بلوك الشروط داخل الفورم - نفس روح مربّع التحذير الأخضر بصفحة رفع الموهبة */
.terms-box {
  background: #f0fdf4; border: 1px solid #16803c; border-radius: 0.7em;
  padding: 1em 1.1em; margin: 0.5em 0 1em; color: #14532d;
}
.terms-box-title { font-weight: 800; color: #0f5c2a; margin: 0 0 0.3em; }
.terms-box-sub { font-size: 0.85em; color: #166534; margin: 0 0 0.6em; }
.terms-box-list { margin: 0 0 0.6em; padding-inline-start: 1.2em; font-size: 0.82em; color: #166534; line-height: 1.9; }
.terms-open {
  display: inline-block; font-size: 0.82em; font-weight: 700; color: #0f5c2a;
  text-decoration: underline; margin-bottom: 0.7em; cursor: pointer;
}
.terms-open:hover { color: #16803c; }
.terms-agree {
  display: flex; gap: 0.5em; align-items: flex-start; font-size: 0.82em;
  color: #14532d; cursor: pointer; border-top: 1px dashed #86c9a3; padding-top: 0.7em;
}
.terms-agree input { margin-top: 0.25em; flex-shrink: 0; }

/* المودال - قراءة الشروط كاملة */
.terms-modal { display: none; position: fixed; inset: 0; z-index: 1000; }
.terms-modal.open { display: block; }
.terms-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.terms-modal-panel {
  position: relative; margin: 5vh auto; max-width: 640px; width: calc(100% - 2em);
  max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 1em;
  padding: 1.6em 1.6em 1.2em; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.terms-modal-close {
  position: absolute; top: 0.7em; left: 0.9em; background: none; border: none;
  font-size: 1.6em; line-height: 1; color: #6b7280; cursor: pointer;
}
.terms-modal-close:hover { color: #111827; }
.terms-modal-body h3 { color: #0f5c2a; margin: 0 0 0.6em; }
.terms-intro { font-size: 0.88em; color: #374151; line-height: 1.9; margin: 0 0 1em; }
.terms-list { padding-inline-start: 1.3em; font-size: 0.86em; color: #374151; line-height: 2; }
.terms-list li { margin-bottom: 0.7em; }
.terms-list strong { color: #14532d; }
.terms-foot { font-size: 0.75em; color: #9ca3af; margin-top: 1em; text-align: center; }

/* ===== تحكّم مرن بالفيديو بلوحة التحكم ===== */
.admin-video-row {
  display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap;
  margin-top: 0.5em; padding-top: 0.5em; border-top: 1px dashed #e5e7eb;
}
.admin-video-row:first-of-type { border-top: none; }
.admin-video-title { flex: 1 1 auto; min-width: 8em; font-weight: 600; }
.admin-video-action {
  border: 1px solid #d1d5db; border-radius: 0.5em; padding: 0.35em 0.6em;
  font-family: inherit; font-size: 0.9em; background: #fff; color: #374151; cursor: pointer;
}
.admin-video-action:focus { outline: none; border-color: #16803c; }
.admin-video-action.act-deleted { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }
.admin-video-action.act-muted { border-color: #fbbf24; background: #fffbeb; color: #92400e; }
.admin-video-hint { font-size: 0.72em; color: #9ca3af; margin-top: 0.5em; }

@font-face{ font-family:'AlwiSahafa'; src:url('fonts/Elgharib-AlwiSahafa.ttf') format('truetype'); font-display:swap; }
.saaha-portal{ margin:26px auto; padding:0 14px; }
/* ============ شريط أقسام ساحة (مكوّن موحّد) — لا تعدّل يدوياً ============ */
.saaha-portal{
  --sp-panel:#ffffff; --sp-bd:#e7ebf3; --sp-cardbg:#e8ecf2; --sp-line:#dbe1ea; --sp-chev:#9aa7c0;
  --sp-muted:#64748b; --sp-discA:#22345c; --sp-discB:#101f3d; --sp-ring:#8ba3d6;
  --sp-ads:#2540d0; --sp-ads2:#4f6bf0; --sp-tour:#0d9488; --sp-tour2:#2bb6d6; --sp-sport:#16803c; --sp-sport2:#3fbe6a;
  direction:rtl; max-width:1000px; margin:0 auto;
}
.saaha-portal .orbit{ container-type:inline-size; background:var(--sp-panel); border:1px solid var(--sp-bd);
  border-radius:16px; padding:clamp(12px,3.2cqi,28px); box-shadow:0 6px 20px rgba(20,33,64,.06); }
.saaha-portal .orbit-row{ display:flex; align-items:stretch; justify-content:center; gap:0; }
.saaha-portal .oside{ --c:var(--sp-ads); --c2:var(--sp-ads2); flex:1 1 0; min-width:0; display:flex; align-items:center;
  gap:clamp(7px,2cqi,12px); text-decoration:none; background:var(--sp-cardbg);
  border:1px solid color-mix(in srgb,var(--c) 22%, var(--sp-line)); border-radius:clamp(11px,2.5cqi,15px);
  padding:clamp(9px,2.4cqi,15px); transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; }
.saaha-portal .oside.k-ads{ --c:var(--sp-ads); --c2:var(--sp-ads2); }
.saaha-portal .oside.k-tour{ --c:var(--sp-tour); --c2:var(--sp-tour2); }
.saaha-portal .oside.k-sport{ --c:var(--sp-sport); --c2:var(--sp-sport2); }
.saaha-portal .oside:hover{ transform:translateY(-2px); background:var(--c); border-color:var(--c);
  box-shadow:0 9px 22px color-mix(in srgb,var(--c) 38%, transparent); }
.saaha-portal .oside:hover .onm,.saaha-portal .oside:hover .ochev{ color:#fff; }
.saaha-portal .oside:hover .ods{ color:rgba(255,255,255,.9); }
.saaha-portal .oside:hover .oic{ background:#fff; }
.saaha-portal .oside:hover .oic svg{ color:var(--c); }
.saaha-portal .oside:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
.saaha-portal .oic{ flex:0 0 auto; width:clamp(30px,9.5cqi,46px); height:clamp(30px,9.5cqi,46px); border-radius:50%;
  display:grid; place-items:center; background:linear-gradient(140deg,var(--c),var(--c2));
  box-shadow:0 4px 11px color-mix(in srgb,var(--c) 42%, transparent); }
.saaha-portal .oic svg{ width:56%; height:56%; color:#fff; }
.saaha-portal .otxt{ flex:1 1 auto; min-width:0; text-align:center; }
.saaha-portal .onm{ font-size:clamp(.74rem,3.3cqi,1.12rem); font-weight:800; color:var(--c); line-height:1.2; }
.saaha-portal .ods{ font-size:clamp(.62rem,2.5cqi,.83rem); color:var(--sp-muted); margin-top:3px; line-height:1.35; }
.saaha-portal .ochev{ flex:0 0 auto; color:var(--sp-chev); display:grid; place-items:center; }
.saaha-portal .ochev svg{ width:clamp(15px,4cqi,22px); height:clamp(15px,4cqi,22px); }
.saaha-portal .oside:hover .ochev{ color:#fff; }
@container (max-width:400px){ .saaha-portal .ochev{ display:none; } }
.saaha-portal .oconn{ flex:0 0 clamp(7px,2.6cqi,40px); height:2px; position:relative; align-self:center; }
.saaha-portal .oconn::before{ content:""; position:absolute; inset:0; border-top:2px dashed var(--sp-line); }
.saaha-portal .oconn .cdot{ position:absolute; top:50%; left:50%; width:clamp(7px,2cqi,9px); height:clamp(7px,2cqi,9px);
  border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 3px var(--sp-panel); }
.saaha-portal .ocenter{ flex:0 0 auto; align-self:center; position:relative; display:grid; place-items:center;
  width:clamp(54px,16cqi,110px); height:clamp(54px,16cqi,110px); }
.saaha-portal .odisc{ width:clamp(44px,13cqi,88px); height:clamp(44px,13cqi,88px); border-radius:50%;
  background:radial-gradient(circle at 36% 30%, var(--sp-discA), var(--sp-discB));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:clamp(1.05rem,5.2cqi,1.9rem);
  font-family:'AlwiSahafa','ElgharibAlwiSahafa','Cairo',sans-serif; padding-bottom:.08em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(10,18,40,.3); z-index:2; }
.saaha-portal .ocenter::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(48px,14.5cqi,98px); height:clamp(48px,14.5cqi,98px); border-radius:50%; border:2px dashed var(--sp-ring); opacity:.55; }
.saaha-portal .ocenter::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(56px,16.5cqi,112px); height:clamp(56px,16.5cqi,112px); border-radius:50%; border:2px dotted var(--sp-ring); opacity:.28; }
/* ============ نهاية شريط أقسام ساحة ============ */
/* ===== حقوق ساحة الموحّدة (خط بعرض الفوتر + سطر الحقوق) ===== */
.saaha-copy-wrap{ border-top:1px solid rgba(150,160,180,.28); margin:5px 0 0; padding-bottom:10px; }
.saaha-copy{ max-width:1100px; margin:0 auto; padding:13px 16px 2px; direction:rtl;
  display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:4px 18px;
  font-size:clamp(10px,2.6vw,13px); line-height:1.7; }
.saaha-copy-name{ font-weight:700; }
.saaha-copy-slogan{ opacity:.82; }
@media (max-width:520px){ .saaha-copy{ justify-content:flex-start; } }

/* saaha-copy alignment override — يحاذي بداية محتوى الفوتر */
.saaha-copy{ max-width:1100px; padding:13px 24px 2px; }