/* ═══════════════════════════════════════════════════════
   الشامل أونلاين — تحسينات الهيدر + البانرات + الفوتر
   alchamel14.online — mobile-enhancements.css v1.0
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   1. TOPBAR — تحسين الهيدر للموبايل
   ══════════════════════════════════════ */

/* تحسين ارتفاع الهيدر */
:root {
  --tb-h: 58px;
}

/* شريط الهيدر الرئيسي */
.ac-topbar {
  height: var(--tb-h);
  padding: 0 14px;
  gap: 6px;
}

/* اسم الموقع في وسط الهيدر */
.ac-tb-site {
  font-family: 'Noto Kufi Arabic', 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  letter-spacing: 0.3px;
}

/* شعار صغير داخل الهيدر (RTL — يظهر يمين زر القائمة) */
.ac-tb-logo-inline {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.ac-tb-logo-inline .ac-tb-moon {
  font-size: 18px;
  line-height: 1;
}
.ac-tb-logo-inline .ac-tb-name {
  font-family: 'Noto Kufi Arabic', 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

/* أزرار دخول / تسجيل في الهيدر */
.ac-tb-btn {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--txt);
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ac-tb-btn.p {
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  color: #1a0a00;
  border-color: var(--gold);
  font-weight: 800;
}
.ac-tb-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* زر القائمة */
.ac-tb-iBtn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--gold);
  flex-shrink: 0;
}
.ac-tb-iBtn:hover { background: var(--card2); border-color: var(--gold); }

/* خط فاصل ذهبي أسفل الهيدر */
.ac-topbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-l), var(--gold), transparent);
  opacity: 0.35;
}
.ac-topbar { position: relative; }

/* ══════════════════════════════════════
   2. PROMO BANNERS — 6 كروت إعلانية بنر
   تحت الهيدر مباشرة (صفان × 3 أعمدة)
   ══════════════════════════════════════ */

.ac-promo-banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 0 8px;
  margin-bottom: 4px;
}

.ac-promo-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 6px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
  border: 1.5px solid transparent;
  gap: 5px;
}
.ac-promo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

/* ألوان البانرات */
.ac-promo-card.gold {
  background: linear-gradient(135deg, #2a1800, #4a2a00);
  border-color: rgba(201,163,74,.35);
  box-shadow: 0 3px 14px rgba(201,163,74,.15);
}
.ac-promo-card.teal {
  background: linear-gradient(135deg, #001a1a, #003030);
  border-color: rgba(0,200,180,.30);
  box-shadow: 0 3px 14px rgba(0,200,180,.12);
}
.ac-promo-card.purple {
  background: linear-gradient(135deg, #0d0020, #1a0040);
  border-color: rgba(140,80,255,.30);
  box-shadow: 0 3px 14px rgba(140,80,255,.12);
}
.ac-promo-card.red {
  background: linear-gradient(135deg, #1a0000, #300000);
  border-color: rgba(220,50,50,.30);
  box-shadow: 0 3px 14px rgba(220,50,50,.12);
}
.ac-promo-card.blue {
  background: linear-gradient(135deg, #00081a, #001230);
  border-color: rgba(50,120,255,.30);
  box-shadow: 0 3px 14px rgba(50,120,255,.12);
}
.ac-promo-card.green {
  background: linear-gradient(135deg, #001200, #002400);
  border-color: rgba(50,200,100,.30);
  box-shadow: 0 3px 14px rgba(50,200,100,.12);
}

/* تأثير بريق ذهبي */
.ac-promo-card::before {
  content: '';
  position: absolute;
  top: 0; right: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transition: right 0.5s;
}
.ac-promo-card:hover::before { right: 150%; }

.ac-promo-ico {
  font-size: 24px;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

.ac-promo-title {
  font-family: 'Noto Kufi Arabic', 'Cairo', sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--gold-l);
}
.ac-promo-card.teal   .ac-promo-title { color: #7fffd4; }
.ac-promo-card.purple .ac-promo-title { color: #c4b5fd; }
.ac-promo-card.red    .ac-promo-title { color: #fca5a5; }
.ac-promo-card.blue   .ac-promo-title { color: #93c5fd; }
.ac-promo-card.green  .ac-promo-title { color: #86efac; }

.ac-promo-sub {
  font-size: 8.5px;
  color: rgba(255,255,255,.45);
  line-height: 1.3;
}

/* شارة NEW */
.ac-promo-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 7px;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--gold);
  color: #1a0a00;
  letter-spacing: 0.3px;
}
.ac-promo-card.teal   .ac-promo-badge { background: #00c8b4; color: #001a18; }
.ac-promo-card.purple .ac-promo-badge { background: #8c50ff; color: #fff; }
.ac-promo-card.red    .ac-promo-badge { background: #dc3232; color: #fff; }
.ac-promo-card.blue   .ac-promo-badge { background: #3278ff; color: #fff; }
.ac-promo-card.green  .ac-promo-badge { background: #32c864; color: #001200; }

/* ══════════════════════════════════════
   3. FOOTER — فوتر احترافي محسّن
   ══════════════════════════════════════ */

.ac-footer-v2 {
  background: linear-gradient(180deg, var(--footer-bg) 0%, var(--footer-bg2) 100%);
  color: rgba(255, 240, 200, 0.9);
  padding: 0;
  position: relative;
  overflow: hidden;
  margin: 0 -18px -36px;
}

/* خلفية نجوم خفية */
.ac-footer-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(201,163,74,.06) 0%, transparent 60%),
                    radial-gradient(circle at 80% 20%, rgba(201,163,74,.04) 0%, transparent 50%);
  pointer-events: none;
}

/* ── شريط منصات خارجي (صف أيقونات الشبكات) ── */
.ac-ft-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(201,163,74,.12);
  position: relative;
  z-index: 1;
}

.ac-ft-platform-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(201,163,74,.2);
  background: rgba(201,163,74,.06);
  color: rgba(255,240,200,.75);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 700;
  transition: all 0.22s;
  white-space: nowrap;
}
.ac-ft-platform-btn:hover {
  border-color: var(--gold);
  background: rgba(201,163,74,.15);
  color: var(--gold-l);
  transform: translateY(-2px);
}
.ac-ft-platform-btn .ac-fpi { font-size: 14px; }

/* ألوان المنصات */
.ac-ft-platform-btn.tiktok:hover  { border-color: #69C9D0; color: #69C9D0; }
.ac-ft-platform-btn.youtube:hover { border-color: #FF0000; color: #FF4444; }
.ac-ft-platform-btn.whatsapp:hover{ border-color: #25D366; color: #25D366; }
.ac-ft-platform-btn.facebook:hover{ border-color: #1877F2; color: #4da3ff; }
.ac-ft-platform-btn.twitter:hover  { border-color: #ccc; color: #eee; }
.ac-ft-platform-btn.telegram:hover { border-color: #0088cc; color: #33aaff; }
.ac-ft-platform-btn.instagram:hover{ border-color: #E1306C; color: #f46090; }
.ac-ft-platform-btn.snapchat:hover { border-color: #FFFC00; color: #FFFC00; }

/* ── الجسم الرئيسي للفوتر ── */
.ac-ft-body {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
  padding: 24px 20px;
  position: relative;
  z-index: 1;
}

.ac-ft-brand-v2 {
  font-family: 'Noto Kufi Arabic', 'Cairo', sans-serif;
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ac-ft-brand-v2::before { content: '🌙'; -webkit-text-fill-color: initial; font-size: 18px; }

.ac-ft-tagline {
  font-size: 11.5px;
  color: rgba(255,240,200,.55);
  line-height: 1.8;
  margin-bottom: 16px;
}

.ac-ft-info-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.ac-ft-info-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: rgba(255,240,200,.55);
}
.ac-ft-info-item a {
  color: var(--gold-l);
  text-decoration: none;
  transition: color 0.2s;
}
.ac-ft-info-item a:hover { color: #fff; }

.ac-ft-col-hd {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-l);
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(201,163,74,.18);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ac-ft-link-v2 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255,240,200,.58);
  text-decoration: none;
  padding: 3px 0;
  transition: all 0.2s;
}
.ac-ft-link-v2::before { content: '◈'; font-size: 7px; color: var(--gold); opacity: 0.5; flex-shrink: 0; }
.ac-ft-link-v2:hover { color: var(--gold-l); transform: translateX(-3px); }
.ac-ft-link-v2:hover::before { opacity: 1; }

.ac-ft-links-v2 { display: flex; flex-direction: column; }

/* ── سطر حقوق النشر ── */
.ac-ft-bottom-v2 {
  border-top: 1px solid rgba(201,163,74,.1);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10px;
  color: rgba(255,240,200,.35);
  position: relative;
  z-index: 1;
}
.ac-ft-bottom-v2 span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ac-ft-bottom-v2 .ac-ft-dmca {
  font-size: 9px;
  padding: 2px 7px;
  border: 1px solid rgba(201,163,74,.15);
  border-radius: 4px;
  letter-spacing: 0.5px;
  opacity: 0.5;
}

/* ══════════════════════════════════════
   RESPONSIVE — موبايل
   ══════════════════════════════════════ */

/* موبايل: هيدر */
@media (max-width: 600px) {
  :root { --tb-h: 54px; }

  .ac-topbar { padding: 0 10px; gap: 5px; }

  /* إخفاء النص وإظهار الشعار المدمج */
  .ac-tb-site { display: none; }

  /* أزرار أصغر */
  .ac-tb-btn {
    padding: 5px 8px;
    font-size: 10.5px;
  }
}

/* موبايل: البانرات */
@media (max-width: 600px) {
  .ac-promo-banners {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    padding: 10px 0 6px;
  }
  .ac-promo-card { min-height: 72px; padding: 8px 4px; }
  .ac-promo-ico { font-size: 20px; }
  .ac-promo-title { font-size: 9px; }
  .ac-promo-sub { display: none; }
}

@media (max-width: 380px) {
  .ac-promo-banners { gap: 5px; }
  .ac-promo-card { min-height: 64px; }
  .ac-promo-ico { font-size: 18px; }
  .ac-promo-title { font-size: 8.5px; }
}

/* موبايل: فوتر */
@media (max-width: 768px) {
  .ac-ft-body {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 20px 14px;
  }
  .ac-ft-body > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .ac-ft-platforms { gap: 6px; padding: 14px 10px 10px; }
  .ac-ft-platform-btn { padding: 6px 9px; font-size: 9.5px; }
  .ac-ft-platform-btn .ac-fpi { font-size: 13px; }

  .ac-ft-body {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 16px 12px;
  }
  .ac-ft-brand-v2 { font-size: 17px; }
  .ac-ft-tagline { font-size: 10.5px; }

  .ac-ft-bottom-v2 {
    flex-direction: column;
    text-align: center;
    padding: 10px 12px;
    gap: 6px;
  }
}

@media (max-width: 380px) {
  .ac-ft-body { grid-template-columns: 1fr; }
  .ac-ft-platform-btn span.ac-fpt { display: none; }
}