/* ═══════════════════════════════════════════════════════════
   7C Arena Booking — MOBILE DEDICATED TEMPLATE
   قالب جوال مستقل — تصميم تطبيق أصيل
   يُفعَّل فقط على شاشات ≤ 768px
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

@keyframes mob-fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes mob-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.6}}
@keyframes mob-shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes mob-slide-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ── ROOT OVERRIDES ─────────────────────────── */
:root {
  --mob-green:    #059669;
  --mob-green-d:  #047857;
  --mob-green-l:  #d1fae5;
  --mob-dark:     #032218;
  --mob-card-bg:  #ffffff;
  --mob-bg:       #f0f4f8;
  --mob-text:     #0f172a;
  --mob-muted:    #64748b;
  --mob-border:   #e2e8f0;
  --mob-radius:   18px;
  --mob-bnav-h:   68px;
}

/* ── RESET DESKTOP ELEMENTS ─────────────────── */
html {
  overflow-x: hidden;
}
body {
  background: var(--mob-bg) !important;
  padding-bottom: calc(var(--mob-bnav-h) + 10px) !important;
}

/* ═══════════════════════════════════════════
   1. NAVBAR → تحويل لشريط جوال مدمج
═══════════════════════════════════════════ */
.nav {
  background: linear-gradient(135deg, #032218 0%, #053d2d 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.3) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}
.nav-w {
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}
/* إخفاء عناصر سطح المكتب */
.nav-toggle { display: none !important; }
.nav-panel  { display: none !important; }
.nav-links  { display: none !important; }
.nav-btns   { display: none !important; }

/* الشعار فقط على الجوال */
.nav-logo {
  flex: 1;
  gap: 9px !important;
}
.logo-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}
.logo-word {
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* أزرار الجوال على اليسار */
.nav-w::after {
  content: '';
  display: flex;
}
/* إضافة أيقونة حساب على اليمين عبر pseudo */
.nav-logo::after {
  display: none;
}

/* ═══════════════════════════════════════════
   2. HERO → بانر تطبيق مدمج
═══════════════════════════════════════════ */
.hero {
  padding: 0 !important;
  background: linear-gradient(160deg, #032218 0%, #053d2d 55%, #0a1628 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero::before {
  background:
    radial-gradient(ellipse 70% 50% at 10% 30%, rgba(16,185,129,.14), transparent),
    radial-gradient(ellipse 50% 60% at 90% 70%, rgba(249,115,22,.08), transparent) !important;
}
.hero-dots {
  background-size: 28px 28px !important;
}
.hero-c {
  max-width: 100% !important;
  padding: 28px 18px 24px !important;
  text-align: right !important;
}
.hero-logo-wrap { display: none !important; }

.hero-badge {
  display: inline-flex !important;
  margin-bottom: 14px !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  animation: mob-fadeUp .4s ease both !important;
}
.hero h1 {
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin-bottom: 10px !important;
  text-align: right !important;
  animation: mob-fadeUp .4s .1s ease both !important;
}
.hero-sub {
  font-size: 14px !important;
  max-width: 100% !important;
  margin: 0 0 20px !important;
  text-align: right !important;
  animation: mob-fadeUp .4s .15s ease both !important;
}

/* ── Mobile Search Box ── */
.search-box {
  background: rgba(255,255,255,.97) !important;
  border-radius: 16px !important;
  padding: 6px !important;
  margin: 0 0 14px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.28) !important;
  max-width: 100% !important;
  animation: mob-fadeUp .4s .2s ease both !important;
}
.search-box .sf {
  flex: 1 !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  min-width: 0 !important;
  min-height: auto !important;
}
.search-box select.sf {
  display: none !important; /* إخفاء الفلاتر – ستظهر عبر الـ filter bar */
}
.sdiv { display: none !important; }
.search-box .sbtn {
  padding: 10px 16px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  width: auto !important;
  min-height: auto !important;
}

/* روابط الـ hero (استخدم موقعي، الأعلى تقييمًا...) */
.hero-links {
  display: flex !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding-bottom: 2px !important;
  justify-content: flex-start !important;
  animation: mob-fadeUp .4s .25s ease both !important;
}
.hero-links::-webkit-scrollbar { display: none !important; }
.hlink {
  width: auto !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
  border-radius: 50px !important;
}

/* ═══════════════════════════════════════════
   3. STATS BAR → شريط إحصاء أفقي بسيط
═══════════════════════════════════════════ */
.stats-bar {
  background: white !important;
  border-bottom: 1px solid var(--mob-border) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.stats-bar::-webkit-scrollbar { display: none !important; }
.stats-w {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  padding: 14px 16px !important;
  max-width: 100% !important;
  width: max-content !important;
  min-width: 100% !important;
  justify-content: space-around !important;
}
.stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 4px 16px !important;
  border-top: none !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.stat-item::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important; top: 15% !important; bottom: 15% !important;
  width: 1px !important;
  background: var(--mob-border) !important;
}
.stat-item:first-child::after { display: none !important; }
.stat-n { font-size: 22px !important; }
.stat-l { font-size: 11px !important; }

/* ═══════════════════════════════════════════
   4. ARQAM → مخفي على الجوال (مكثف)
═══════════════════════════════════════════ */
.arqam-section { display: none !important; }

/* ═══════════════════════════════════════════
   5. PAGE LAYOUT → عمود واحد بدون سايدبار
═══════════════════════════════════════════ */
.page-layout {
  display: block !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/* ── Sidebar → مخفي، عوضًا عنه زر فلتر ── */
.sidebar { display: none !important; }

/* ═══════════════════════════════════════════
   6. CONTENT AREA
═══════════════════════════════════════════ */
.page-layout > div:last-child {
  padding: 14px 12px 0 !important;
}

/* Sport Tabs → شريط أفقي سكروول */
.sport-tabs {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 12px 12px 4px !important;
  margin: 0 !important;
  background: white !important;
  border-bottom: 1px solid var(--mob-border) !important;
  position: sticky !important;
  top: 60px !important;
  z-index: 100 !important;
}
.sport-tabs::-webkit-scrollbar { display: none !important; }
.stab {
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  border-radius: 50px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  background: #f8fafc !important;
  border: 1.5px solid var(--mob-border) !important;
  color: var(--mob-muted) !important;
  transition: all .18s !important;
}
.stab.active {
  background: var(--mob-green) !important;
  border-color: transparent !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(5,150,105,.3) !important;
}

/* Content header */
.content-hd {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 12px 8px !important;
  margin-bottom: 0 !important;
  background: var(--mob-bg) !important;
}
.results-info { font-size: 13px !important; }
.view-btns { width: auto !important; }

/* ═══════════════════════════════════════════
   7. FACILITY CARDS → بطاقات أفقية بتصميم تطبيق
═══════════════════════════════════════════ */
.fgrid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 12px 12px !important;
  background: var(--mob-bg) !important;
}
/* Override list view on mobile */
.fgrid.list-v { grid-template-columns: unset !important; }
.fgrid.list-v .fcard { flex-direction: column !important; }
.fgrid.list-v .fcard-img { width: 100% !important; }

.fcard {
  border-radius: var(--mob-radius) !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.07) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  overflow: hidden !important;
  background: white !important;
  transition: transform .2s, box-shadow .2s !important;
  animation: mob-fadeUp .35s ease both !important;
  display: flex !important;
  flex-direction: row !important; /* بطاقة أفقية */
  align-items: stretch !important;
}
.fcard:hover {
  transform: scale(1.015) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
}

/* صورة على اليمين (RTL → اليسار) */
.fcard-img {
  width: 120px !important;
  min-width: 120px !important;
  height: auto !important;
  min-height: 140px !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.fcard-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.fcard-ph {
  width: 100% !important;
  height: 100% !important;
  min-height: 140px !important;
  font-size: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* شارات البطاقة */
.fcard-badges {
  position: absolute !important;
  top: 8px !important;
  right: 6px !important;
  gap: 4px !important;
}
.fbadge {
  font-size: 10px !important;
  padding: 3px 8px !important;
}
.fcard-fav {
  width: 28px !important;
  height: 28px !important;
  top: 8px !important;
  left: 6px !important;
  font-size: 13px !important;
}
.fcard-rating {
  bottom: 6px !important;
  left: 6px !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}

/* محتوى البطاقة */
.fcard-body {
  flex: 1 !important;
  padding: 12px 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.fcard-type {
  font-size: 10px !important;
  letter-spacing: .5px !important;
  margin-bottom: 0 !important;
}
.fcard-name {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin-bottom: 0 !important;
  /* قطع النص الطويل */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.fcard-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 0 !important;
}
.fm {
  font-size: 11px !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
}

/* إخفاء utility row على الجوال لتوفير مساحة */
.fcard-utility { display: none !important; }

/* Footer البطاقة */
.fcard-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: auto !important;
  gap: 8px !important;
  flex-direction: row !important;
}
.fprice-from { font-size: 10px !important; margin-bottom: 1px !important; }
.fprice-val { font-size: 18px !important; }
.fprice-unit { font-size: 11px !important; }
.fprice-sub { font-size: 10px !important; margin-top: 1px !important; }
.fbtn-book {
  padding: 8px 13px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  box-shadow: 0 3px 10px rgba(5,150,105,.3) !important;
}

/* Empty state */
.empty {
  padding: 48px 20px !important;
  border-radius: 16px !important;
  margin: 12px !important;
}

/* ═══════════════════════════════════════════
   8. OPENING MODE
═══════════════════════════════════════════ */
.opening-card {
  padding: 28px 20px 24px !important;
  border-radius: 22px !important;
}
.opening-title { font-size: 20px !important; }
.opening-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.ostat-n { font-size: 24px !important; }

/* ═══════════════════════════════════════════
   9. PRICING SECTION
═══════════════════════════════════════════ */
#pricing {
  padding: 48px 14px 80px !important;
}
.pricing-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
.eid-banner { flex-direction: column !important; text-align: center !important; gap: 12px !important; }
.eid-banner a { width: 100% !important; text-align: center !important; display: block !important; padding: 13px !important; }
.commission-note { flex-direction: column !important; gap: 8px !important; }
.pc { padding: 22px 18px !important; border-radius: 18px !important; }

/* ═══════════════════════════════════════════
   10. BOTTOM NAVIGATION — الشريط السفلي
═══════════════════════════════════════════ */
.mob-bottom-nav {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  height: var(--mob-bnav-h) !important;
  background: white !important;
  border-top: 1px solid var(--mob-border) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.1), 0 -1px 0 rgba(0,0,0,.06) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  align-items: center !important;
  justify-content: space-around !important;
}
.mob-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex: 1 !important;
  padding: 8px 4px !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  transition: color .2s !important;
  position: relative !important;
}
.mob-nav-item.active,
.mob-nav-item:hover {
  color: var(--mob-green) !important;
}
.mob-nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 20% !important;
  left: 20% !important;
  height: 3px !important;
  background: var(--mob-green) !important;
  border-radius: 0 0 4px 4px !important;
}
.mob-nav-icon {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  transition: stroke .2s !important;
}

/* زر الحجز المركزي */
.mob-nav-center-item {
  margin-top: -16px !important;
}
.mob-nav-center-btn {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--mob-green), var(--mob-green-d)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 20px rgba(5,150,105,.45) !important;
  margin-bottom: 2px !important;
  transition: transform .2s, box-shadow .2s !important;
}
.mob-nav-center-item:hover .mob-nav-center-btn,
.mob-nav-center-item.active .mob-nav-center-btn {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(5,150,105,.55) !important;
}
.mob-nav-center-btn svg {
  width: 22px !important;
  height: 22px !important;
  stroke: white !important;
}
.mob-nav-center-item > span { color: var(--mob-green) !important; font-weight: 700 !important; }

/* إخفاء الـ bottom nav على الكمبيوتر */
@media(min-width:769px) {
  .mob-bottom-nav { display: none !important; }
}

/* ═══════════════════════════════════════════
   11. FOOTER → تبسيط على الجوال
═══════════════════════════════════════════ */
.site-footer {
  margin-bottom: var(--mob-bnav-h) !important;
}
.footer-hero {
  flex-direction: column !important;
  padding: 18px 16px !important;
  gap: 14px !important;
}
.footer-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.footer-actions {
  width: 100% !important;
  flex-direction: column !important;
}
.footer-btn {
  width: 100% !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════
   12. MISC FIXES
═══════════════════════════════════════════ */
/* إصلاح overflow */
* { -webkit-tap-highlight-color: transparent !important; }

/* تحسين نقرات الجوال */
.fcard, .fbtn-book, .stab, .mob-nav-item, .hlink {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* تأثير ضغط البطاقة */
.fcard:active { transform: scale(.98) !important; }
.fbtn-book:active { transform: scale(.96) !important; }
.mob-nav-item:active { opacity: .7 !important; }