/* ═══════════════════════════════════════════════════════════
   الشامل أونلاين — fix-mobile.css
   إصلاح نهائي شامل للموبايل — يُضاف آخر ملف CSS
   ═══════════════════════════════════════════════════════════ */

/* ══ 1. منع الخروج من الشاشة — الجذر ══ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

#acApp, .ac-layout, .ac-main, .ac-content {
  overflow-x: hidden !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ══ 2. HERO — إصلاح السلبي ══ */
.ac-hero {
  margin-right: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ══ 3. TOPBAR — موبايل نظيف ══ */
.ac-topbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* الشعار المدمج */
.ac-tb-logo-inline {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
}
.ac-tb-logo-inline .ac-tb-moon {
  font-size: 16px !important;
  flex-shrink: 0 !important;
}
.ac-tb-logo-inline .ac-tb-name {
  font-family: 'Cairo', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--gold) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100px !important;
}

/* وسط الهيدر */
.ac-tb-c { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
.ac-tb-site {
  font-size: 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* أزرار الهيدر */
.ac-tb-btn {
  padding: 4px 8px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ══ 4. PROMO BANNERS — إصلاح الكروت ══ */
.ac-promo-banners {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  padding: 10px 0 8px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ac-promo-card {
  position: relative !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  min-height: 82px !important;
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 10px 4px 8px !important;
  text-decoration: none !important;
  transition: transform 0.2s !important;
  border: 1.5px solid transparent !important;
  gap: 4px !important;
  box-sizing: border-box !important;
}

.ac-promo-card.gold   { background: linear-gradient(145deg,#2a1800,#4a2a00) !important; border-color: rgba(201,163,74,.40) !important; }
.ac-promo-card.purple { background: linear-gradient(145deg,#0d0020,#200050) !important; border-color: rgba(140,80,255,.35) !important; }
.ac-promo-card.teal   { background: linear-gradient(145deg,#001818,#003535) !important; border-color: rgba(0,200,180,.32) !important; }
.ac-promo-card.red    { background: linear-gradient(145deg,#1a0000,#350000) !important; border-color: rgba(220,50,50,.32) !important; }
.ac-promo-card.blue   { background: linear-gradient(145deg,#000818,#001535) !important; border-color: rgba(50,120,255,.32) !important; }
.ac-promo-card.green  { background: linear-gradient(145deg,#001000,#002800) !important; border-color: rgba(50,200,100,.32) !important; }

.ac-promo-ico {
  font-size: 22px !important;
  line-height: 1 !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.ac-promo-title {
  font-family: 'Cairo', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  color: #e2c97e !important;
  word-break: break-word !important;
}
.ac-promo-card.teal   .ac-promo-title { color: #7fffd4 !important; }
.ac-promo-card.purple .ac-promo-title { color: #c4b5fd !important; }
.ac-promo-card.red    .ac-promo-title { color: #fca5a5 !important; }
.ac-promo-card.blue   .ac-promo-title { color: #93c5fd !important; }
.ac-promo-card.green  .ac-promo-title { color: #86efac !important; }

.ac-promo-sub { display: none !important; }

.ac-promo-badge {
  position: absolute !important;
  top: 4px !important; left: 4px !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  background: #c9a34a !important;
  color: #1a0a00 !important;
  z-index: 2 !important;
}
.ac-promo-card.teal   .ac-promo-badge { background:#00c8b4 !important; color:#001a18 !important; }
.ac-promo-card.purple .ac-promo-badge { background:#8c50ff !important; color:#fff !important; }
.ac-promo-card.red    .ac-promo-badge { background:#dc3232 !important; color:#fff !important; }
.ac-promo-card.blue   .ac-promo-badge { background:#3278ff !important; color:#fff !important; }
.ac-promo-card.green  .ac-promo-badge { background:#32c864 !important; color:#001200 !important; }

/* ══ 5. ASTRO BAR ══ */
.ac-astro-bar {
  display: grid !important;
  grid-template-columns: repeat(2,1fr) !important;
  gap: 7px !important;
  margin: 10px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ac-astro-card { min-width: 0 !important; box-sizing: border-box !important; }

/* ══ 6. STATS ══ */
.ac-stats-grid {
  grid-template-columns: repeat(2,1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ══ 7. TOOLS GRID ══ */
.ac-tools-grid {
  grid-template-columns: repeat(3,1fr) !important;
  gap: 7px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ══ 8. BOTTOM GRID ══ */
.ac-bottom-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ══ 9. FOOTER v2 ══ */
.ac-footer-v2 {
  margin: 24px 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ac-ft-platforms {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: 12px 10px 10px !important;
  justify-content: center !important;
}

.ac-ft-platform-btn {
  padding: 5px 8px !important;
  font-size: 9px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

.ac-ft-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  padding: 14px 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.ac-ft-body > div:first-child {
  grid-column: 1 / -1 !important;
}

.ac-ft-brand-v2 { font-size: 16px !important; margin-bottom: 6px !important; }
.ac-ft-tagline  { font-size: 10px !important; }
.ac-ft-col-hd   { font-size: 11px !important; }
.ac-ft-link-v2  { font-size: 10px !important; padding: 3px 0 !important; }

.ac-ft-bottom-v2 {
  flex-direction: column !important;
  text-align: center !important;
  gap: 4px !important;
  padding: 10px !important;
  font-size: 9px !important;
}

/* ══ 10. شاشات أصغر (≤ 380px) ══ */
@media (max-width: 380px) {
  .ac-content { padding: 0 8px 20px !important; }
  .ac-promo-card { min-height: 70px !important; }
  .ac-promo-ico  { font-size: 18px !important; }
  .ac-promo-title{ font-size: 8.5px !important; }
  .ac-tools-grid { grid-template-columns: repeat(3,1fr) !important; gap: 5px !important; }
  .ac-ft-body    { grid-template-columns: 1fr !important; }
  .ac-ft-platform-btn .ac-fpt { display: none !important; }
}

/* ══ 11. تابلت (600px → 1024px) ══ */
@media (min-width: 600px) and (max-width: 1024px) {
  .ac-promo-banners { gap: 10px !important; }
  .ac-promo-card    { min-height: 95px !important; }
  .ac-promo-ico     { font-size: 26px !important; }
  .ac-promo-title   { font-size: 11px !important; }
  .ac-promo-sub     { display: block !important; font-size: 8px !important; }
  .ac-astro-bar     { grid-template-columns: repeat(4,1fr) !important; }
  .ac-stats-grid    { grid-template-columns: repeat(4,1fr) !important; }
  .ac-tools-grid    { grid-template-columns: repeat(4,1fr) !important; }
  .ac-bottom-grid   { grid-template-columns: 1fr 1fr !important; }
  .ac-ft-body       { grid-template-columns: 1fr 1fr !important; }
}

/* ══ 12. ديسك توب / لاب توب (> 1024px) ══ */
@media (min-width: 1024px) {
  .ac-promo-banners { gap: 12px !important; }
  .ac-promo-card    { min-height: 110px !important; border-radius: 14px !important; }
  .ac-promo-ico     { font-size: 30px !important; }
  .ac-promo-title   { font-size: 13px !important; }
  .ac-promo-sub     { display: block !important; font-size: 9px !important; }
  .ac-astro-bar     { grid-template-columns: repeat(4,1fr) !important; }
  .ac-stats-grid    { grid-template-columns: repeat(4,1fr) !important; }
  .ac-tools-grid    { grid-template-columns: repeat(5,1fr) !important; }
  .ac-bottom-grid   { grid-template-columns: 1fr 1fr 1fr !important; }
  .ac-ft-body       { grid-template-columns: 2fr 1fr 1fr 1fr !important; padding: 22px 18px !important; }
  .ac-ft-body > div:first-child { grid-column: auto !important; }
  .ac-hero { margin: 0 -18px !important; }
}

/* ══════════════════════════════════════
   إصلاح TOPBAR الموبايل — الأزرار ظاهرة
   ══════════════════════════════════════ */

/* موبايل: إخفاء الشعار والنص — إبقاء الأزرار فقط */
@media (max-width: 768px) {

  .ac-topbar {
    padding: 0 8px !important;
    gap: 5px !important;
    height: 52px !important;
  }

  /* إخفاء الشعار المدمج على الموبايل */
  .ac-tb-logo-inline { display: none !important; }

  /* إخفاء النص الوسط */
  .ac-tb-c { display: none !important; }

  /* زر القائمة */
  .ac-tb-iBtn {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }

  /* الثيم switcher — أصغر */
  .ac-theme-switcher {
    gap: 2px !important;
    padding: 2px !important;
  }
  .ac-theme-dot {
    width: 18px !important;
    height: 18px !important;
  }

  /* الأزرار — ظاهرة ومتناسبة */
  .ac-tb-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 3px !important;
  }

  .ac-tb-l {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    margin-right: auto !important;
  }

  .ac-tb-r {
    flex-shrink: 0 !important;
    gap: 0 !important;
  }
}

/* موبايل صغير ≤ 400px */
@media (max-width: 400px) {
  .ac-topbar { padding: 0 6px !important; gap: 4px !important; }

  /* إخفاء الأيقونة من الأزرار — نص فقط */
  .ac-tb-btn { padding: 6px 8px !important; font-size: 10.5px !important; }

  .ac-theme-dot { width: 16px !important; height: 16px !important; }
}