/* ============================================================
   ForexBro Mobile Fixes — addresses clickability + overflow
   Loaded AFTER all other CSS so rules win.
   ============================================================ */

/* Prevent any horizontal overflow on small screens */
html, body { max-width: 100%; overflow-x: hidden; }

/* ============================================================
   SIDEBAR CLOSE (X) + BACKDROP — mobile only
   ============================================================ */
.sidebar-close {
  display: none;
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 5;
  transition: background 0.18s ease;
}
.sidebar-close:hover { background: rgba(255,255,255,0.12); }
.sidebar-close svg { width: 20px; height: 20px; display: block; }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sidebar-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* Lock body scroll while sidebar is open on mobile */
body.sidebar-locked { overflow: hidden; }

/* ============================================================
   SIDEBAR USER ID — clickable copy under the name
   ============================================================ */
.sidebar-user-id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  margin: 4px 0 4px;
  padding: 2px 0;
  user-select: all;
  transition: color 0.18s ease;
}
.sidebar-user-id .lbl {
  font-family: inherit;
  opacity: 0.55;
  letter-spacing: 0.3px;
}
.sidebar-user-id code {
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.18s ease;
}
.sidebar-user-id:hover code {
  color: var(--accent-gold);
  border-color: rgba(255, 184, 0, 0.25);
  background: rgba(255, 184, 0, 0.08);
}
.sidebar-user-id.copied code {
  color: var(--accent-green, #00FF87);
  background: rgba(0, 255, 135, 0.1);
  border-color: rgba(0, 255, 135, 0.25);
}

@media (max-width: 768px) {
  .sidebar-close { display: inline-flex; }
  /* Add room for the close button next to the logo on mobile */
  .sidebar-header { padding-inline-end: 56px !important; }
}
@media (min-width: 769px) {
  .sidebar-backdrop { display: none !important; }
}

@media (max-width: 768px) {
  /* ====== HOME PAGE (index.html) ====== */
  .nav-inner { padding: 0 12px; gap: 6px; flex-wrap: nowrap; min-width: 0; }
  .nav-links { display: none; }   /* Hide desktop nav on mobile (mobile menu handles it) */
  .nav-right { gap: 6px; flex-shrink: 1; min-width: 0; }
  .nav-right .btn-ghost,
  .nav-right .btn-primary {
    padding: 8px 11px !important;
    font-size: 12px !important;
    white-space: nowrap;
    min-height: 40px;
    /* Important: do NOT force display here — auth-logic.js needs to be the
       single source of truth for which nav buttons are visible (login+start
       when logged out, dashboard when logged in). Earlier we forced
       inline-flex which un-hid login even when JS hid it; AND we hard-hid
       data-nav-start which made signup invisible on mobile. Both gone now. */
    align-items: center;
    justify-content: center;
  }
  .lang-toggle, .lang-switch { padding: 3px; flex-shrink: 0; }
  .lang-toggle span, .lang-switch span { padding: 5px 9px; font-size: 10px; }
  /* Allow logo to shrink so buttons fit, but keep the "ForexBro" wordmark visible.
     The compact navbar rules in styles.css already shrink the lang pill + CTAs
     so the brand text always fits. (Old rule that hid the wordmark on mobile
     was removed on 2026-05-24 at owner request.) */
  .nav-inner .logo { flex-shrink: 1; min-width: 0; }
  .nav-inner .logo .logo-text { display: inline !important; }
  /* 2026-06-01: تكبير متناسق لعناصر هيدر الرئيسية مع الهيدر (84px).
     النص يطابق اللوقو (نسبة ~٥٢٪) ومسافات أوسع للتنفّس. */
  /* ⚠️ ٢٠٢٦-١٠-٠٢ — **هذه الكتلةُ هي الحاكمُ**: تُحمَّلُ بعدَ styles.css وبـ!important،
     فكلُّ تكبيرٍ يُكتبُ هناك يموتُ هنا. مَن يكبّرُ الشعارَ يكبّرُه في هذا الملفّ. */
  .nav-inner .logo-mark { width: 50px !important; height: 50px !important; }
  .nav-inner .logo { gap: 9px !important; }
  .nav-inner .logo .logo-text { font-size: 29px !important; }
  .nav-right .lang-toggle span { padding: 6px 10px !important; font-size: 11px !important; }
  .mobile-menu-btn { padding: 6px !important; }
  .mobile-menu-btn svg { width: 26px !important; height: 26px !important; }

  /* 2026-06-01: سجل عمولات المسوّقين على الجوال — تحويل الجدول لبطاقات
     مقروءة بتسميات بدل الصفوف المكدّسة يميناً (كانت بدائية وغير واضحة). */
  .aff-comm-table thead { display: none; }
  .aff-comm-table, .aff-comm-table tbody { display: block; width: 100%; }
  .aff-comm-table tr {
    display: block;
    background: var(--bg-tertiary, #151A2E);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
    border-radius: 14px;
    padding: 4px 15px;
    margin-bottom: 12px;
  }
  .aff-comm-table td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0 !important;
    border: none !important;
    text-align: end !important;
    font-size: 14px;
  }
  .aff-comm-table td[data-label]:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  .aff-comm-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ⚠️ ٢٠٢٦-١٠-٠٢ (شكوى المالك: «المسافةُ بين البارِ والنصوصِ كبيرة») —
     الشريطُ مثبَّتٌ بالشاشةِ فهذه وحدَها تفصلُ الشارةَ عنه. وحشوُه الرأسيُّ صفرٌ
     على الجوّال، فارتفاعُه = أطولُ عناصرِه، أي الشعارُ خمسون نقطةً وحدَّ سفليّ.
     فمن مئةٍ وثمانٍ وأربعين كان الفراغُ الصافي نحوَ سبعٍ وتسعين نقطةً — كثير.
     ✅ مئةٌ وأربعٌ وعشرون تتركُ نحوَ ثلاثٍ وسبعين: مفصولٌ ولا ملتصق.
     ⛔ ولا تُخفَّضُ تحتَ مئةٍ وثمانيَ عشرة: جُرِّبت مئةٌ واثنتا عشرةَ من قبلُ
        فالتصقتِ الشارةُ بالشريط — وذاك حين كان الشعارُ أصغرَ بثمانِ نقاط. */
  .hero { padding: 124px 0 40px; }
  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
  }
  /* ⚠️⚠️ 2026-08-27 — توسيطٌ تامٌّ لكلّ محتوى المقدّمة على الجوال:
     النصوصُ والأزرارُ والأصولُ. `text-align` وحدَه لا يكفي — العناصرُ المرنةُ
     تحتاج `align-items: center`، والفقراتُ تحتاج `margin-inline: auto`. */
  .hero .hero-grid { align-items: center !important; }
  .hero .hero-badge,
  .hero h1,
  .hero .hero-content > p,
  .hero .hero-store-note,
  .hero .hero-actions,
  .hero .hero-visual,
  .hero .hero-stats { align-self: center !important; }
  .hero .hero-badge { margin-inline: auto !important; }
  .hero h1 { text-align: center !important; }
  .hero .hero-content > p { text-align: center !important; margin-inline: auto !important; max-width: 40ch; }
  .hero .hero-store-note { text-align: center !important; margin-inline: auto !important; max-width: 40ch; }
  .hero .hero-actions { justify-content: center !important; width: 100%; }
  .hero .hero-visual { margin-inline: auto !important; }
  .hero .hero-content > p:not(.hero-store-note) { margin-block: 0 !important; }
  .hero .hero-store-note { margin: 0 !important; font-size: 14px !important; line-height: 1.65 !important; }
  .hero .hero-actions { margin: 0 !important; }
  .hero .hero-badge { margin: 0 !important; }
  .hero h1 { margin: 0 !important; }
  /* Make hero-content's children direct children of the flex parent so
     `order` can interleave the signal card between subtitle/buttons
     and the stats row on mobile. */
  .hero .hero-content {
    display: contents !important;
  }
  .hero .hero-badge   { order: 1; }
  .hero h1            { order: 2; }
  .hero .hero-content > p:not(.hero-store-note) { order: 3; }
  .hero .hero-actions { order: 4; }
  .hero .hero-store-note { order: 5; }
  .hero .hero-visual  { order: 6; margin: 8px 0; }
  .hero .hero-stats   { order: 7; }

  /* 2026-06-06: أكبر وأمتن بطلب المالك (46→49→51).
     line-height 1.2 وقائي إلزامي: الكلمة الذهبية تُرسم بقصّ التدرج على
     شكل الحروف، وأي سطر أضيق يقصّ النقاط العلوية (نقاط «ش» في «مباشرة»
     انقصّت فعلاً على جوال المالك عند 1.08). */
  .hero h1 { font-size: 51px !important; line-height: 1.2 !important; letter-spacing: -0.5px; font-weight: 900 !important; }
  .hero-actions { flex-wrap: wrap; gap: 10px; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  /* Stats: 3 cards in a single row on mobile (matches desktop layout). */
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    padding-top: 8px !important;
  }
  .hero-stat {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: start !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    min-width: 0 !important;
  }
  .hero-stat-icon  { flex: none !important; margin: 0 !important; }
  .hero-stat-num   { font-size: 38px !important; margin: 0 !important; flex: none !important; }
  .hero-stat-label { font-size: 17px !important; margin: 0 !important; color: var(--text-secondary) !important; }
  /* ⛔⛔ ٢٠٢٦-١٠-٠٢ — **كانت تُعيدُ البطاقةَ بعدَ أن أُلغيت بقرار.** تحتَ ستِّ
     مئةٍ وأربعين يُعادُ تشكيلُ إحصاءاتِ الهيرو **أسطراً أفقيّةً** بحدٍّ سفليٍّ
     وحدَه. وهذه القاعدةُ كانت تُعيدُ اللوحَ والإطارَ والظلَّ بتوكيدٍ قاطعٍ
     فتفوز، فيرى صاحبُ الجوّالِ الصغيرِ مستطيلاتٍ حولَ أسطرٍ أفقيّة. */
  .hero-stat {
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* بقايا تخطيطٍ قديمٍ بثلاث بطاقاتٍ في صفٍّ واحدٍ على عرض ٣٩٠ (أيقونةٌ ٣٠،
     رقمٌ ١٩، وصفٌ ٩٫٥) — لا تُقرأ. التخطيطُ صار عموداً ببطاقاتٍ عريضة.
     وكونُها لاحقةً في الملفّ جعلها تغلب المقاساتِ الجديدةَ بنفس الأولويّة. */
  .hero-stat-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }
  .hero-stat-icon svg { width: 22px !important; height: 22px !important; }
  .hero-stat-num { font-size: 38px !important; letter-spacing: -0.5px !important; }
  .hero-stat-label { font-size: 17px !important; line-height: 1.5 !important; }
  /* Signal card: full-width on mobile so it doesn't look squished. */
  .hero-visual {
    display: flex !important;
    justify-content: center;
    margin-top: 8px;
    width: 100%;
  }
  .hero-visual .signal-card {
    max-width: 100%;
    width: 100%;
    padding: 20px;
    box-shadow: 0 16px 50px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,184,0,0.1);
  }

  .section-title { font-size: 26px !important; }
  .features-grid,
  .perf-stats,
  .pricing-grid,
  .tools-grid { grid-template-columns: 1fr !important; gap: 14px; }

  .pricing-toggle-wrap { padding: 0 12px; margin-top: 0; margin-bottom: 28px; }
  .pricing-toggle {
    width: auto;
    max-width: 100%;
    /* Give the toggle enough headroom for the floating "Save 25%" badge so the
       Yearly tab doesn't get visually clipped. */
    margin-top: 18px;
  }
  .pricing-toggle span {
    padding: 9px 16px;
    font-size: 13px;
    white-space: nowrap;
  }
  .pricing-toggle span > span[data-i18n="pricing_yearly"],
  .pricing-toggle span[data-period="yearly"] > span:not(.save-badge) {
    display: inline-block;
  }
  /* Push the badge above the pill, not overlapping the Yearly text. */
  .pricing-toggle .save-badge {
    top: -16px;
    right: 50%;
    transform: translateX(50%);
    font-size: 9px;
    padding: 2px 7px;
    white-space: nowrap;
  }
  [dir="rtl"] .pricing-toggle .save-badge { right: 50%; left: auto; }

  .perf-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .perf-stat { padding: 14px !important; }
  .perf-stat-num { font-size: 22px !important; }

  /* ── التذييل ── */
  /* ⚠️⚠️ 2026-08-27 — كان عموداً واحداً كلُّه في المنتصف: شعارٌ ونصٌّ وثلاثُ
     قوائمَ فوق بعضها، فيطول ويتعب. صار: كتلةُ العلامة بعرضٍ كامل، ثمّ
     عمودان من مجموعات الروابط جنباً إلى جنب، بمحاذاةِ البداية لا الوسط.
     والسطرُ الأخير (الإخلاء والحقوق) يبقى في المنتصف. */
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 18px !important;
    text-align: start !important;
    margin-bottom: 30px !important;
  }
  .footer-grid > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .logo {
    justify-content: flex-start !important;
    font-size: 24px !important;
    gap: 12px !important;
  }
  .footer-brand .logo-mark { width: 46px !important; height: 46px !important; }
  .footer-brand .logo .logo-text { font-size: 24px !important; }
  .footer-brand .logo-mark svg,
  .footer-brand .logo-mark img { width: 100% !important; height: 100% !important; }
  .footer-grid .footer-about {
    max-width: none;
    margin: 14px 0 0 !important;
    line-height: 1.8;
    text-align: start;
  }
  .footer-grid h4 {
    margin-bottom: 14px;
    letter-spacing: 1px;
    font-size: 15px;
  }
  .footer-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .footer-grid ul li a { font-size: 15px; }
  .footer-disclaimer, .footer-bottom { text-align: center !important; }

  /* ── Trust block ── */
  .footer-trust { padding: 18px 12px !important; margin: 8px 0 20px !important; }
  .footer-trust-title { font-size: 11px !important; margin-bottom: 14px !important; }
  .footer-trust-row { gap: 6px !important; }
  .footer-trust-certs { margin-bottom: 12px !important; }
  .footer-trust-cert {
    padding: 6px 9px !important;
    font-size: 10.5px !important;
    gap: 6px !important;
  }
  .footer-trust-cert svg { width: 14px !important; height: 14px !important; }

  /* Payment badges row */
  .footer-trust-pay {
    padding-top: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .footer-trust-pay-label {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }
  .footer-pay-badge {
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
  }
  /* Wrap payment badges into rows of 3 on phones */
  .footer-trust-pay {
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: center !important;
  }

  .footer-disclaimer { font-size: 11.5px !important; line-height: 1.7 !important; }
  .footer-bottom { font-size: 12px !important; }

  .ticker { display: none; }   /* Hide ticker on mobile to save space */

  /* Demo signal card on hero — full width, no narrow cap */
  .signal-card { width: 100% !important; max-width: 100% !important; margin: 0 auto; }

  /* ====== DASHBOARD ====== */
  .app { display: block !important; }
  .sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 200;
    overflow-y: auto;
    /* لا يُرسم رأس القائمة + زر الإغلاق تحت شريط النظام في وضع PWA */
    padding-top: env(safe-area-inset-top, 0px);
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: translateX(0) !important; }

  /* المنطقة الآمنة (notch/Dynamic Island): في وضع PWA المثبّت كان الشريط العلوي
     يُرسم تحت ساعة/بطارية الجوال فيتعذّر ضغط الهامبرجر. نُنزّل محتوى الشريط أسفل
     شريط النظام بإضافة env(safe-area-inset-top). على الأجهزة بلا حافّة = 0 (بلا تغيير)
     — وهذا يفسّر تضارب الشكوى بين العملاء. */
  .topbar {
    padding: 12px 16px !important;
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    padding-inline-start: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-inline-end: max(16px, env(safe-area-inset-right, 0px)) !important;
  }
  .topbar-title { font-size: 16px !important; }
  .topbar-search { display: none !important; }
  .topbar-right { gap: 8px; }
  .topbar-btn { width: 32px; height: 32px; }

  /* 2026-06-09 (إصلاح جذري بعد فحص ٥ وكلاء عدائي): السبب الأعمق أن
     apple-mobile-web-app-status-bar-style كان "black-translucent" (يرسم محتوى الصفحة
     تحت شريط الساعة). غُيّر إلى "black" فصار iOS يحجز الشريط فوق المحتوى، فيبدأ الهيدر
     والهامبرجر أسفله تلقائياً بلا أي تداخل وبلا اعتماد على env أو قياس JS. التعويض بـ
     env في قاعدة .topbar الأساسية أعلاه يبقى أماناً للتثبيتات القديمة المجمّدة على
     black-translucent (env يرجّع ارتفاع الشريط). أُزيل فرض 44px لأنه كان يسبّب فجوة
     علوية على الأجهزة بلا نوتش (env=0 شرعاً) = تراجع بصري كرّره الوكلاء كخطر. */

  /* Sidebar toggle button (hamburger) on mobile */
  .sidebar-toggle, .mobile-menu-btn { display: inline-flex !important; }

  .content { padding: 16px !important; }
  .content > .stats-grid,
  .content .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .stat-card { padding: 14px !important; }
  .stat-card-value { font-size: 22px !important; }
  .card { padding: 16px !important; }
  .card-head { padding: 14px 0 !important; flex-wrap: wrap; gap: 8px; }
  .card-title { font-size: 14px !important; }

  /* Hero on dashboard */
  .fb-hero { padding: 18px 16px !important; }
  .fb-hero-name { font-size: 22px !important; }
  .fb-hero-row { flex-direction: column !important; }
  .fb-hero-row > div { min-width: 100% !important; text-align: start !important; }

  /* Tables — handled by the card-conversion block lower in this file
     (search "MOBILE TABLE → CARDS"). DO NOT add min-width here; it
     forces the row to overflow even after the card transform. */

  /* Buttons need larger tap targets */
  .btn { min-height: 38px; padding: 8px 14px; font-size: 13px; }
  .btn-lg { min-height: 46px; padding: 12px 20px; font-size: 14px; }

  /* Modals fit screen */
  .fb-modal, .modal-card { max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px); overflow-y: auto; }
  .fb-overlay { padding: 12px !important; align-items: center !important; }

  /* Support wizard (new-ticket popup) — fit screen, no overflow.
     Use 100dvh so the iOS Safari URL bar doesn't push the foot below
     the visible viewport. Reserve space for the footer with safe-area. */
  .sup-wizard-overlay {
    padding: 8px !important;
    /* 2026-06-19 (طلب المالك): توسيط النافذة عمودياً (كان flex-start يلصقها بالأعلى).
       آمن لأن .sup-wizard مكفولة الارتفاع و.sup-wizard-body يتمرّر داخلياً. */
    align-items: center !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .sup-wizard {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .sup-wizard-head { padding: 14px 16px !important; flex-shrink: 0; }
  .sup-wizard-title { font-size: 15px !important; }
  .sup-wizard-steps { padding: 10px 16px !important; flex-shrink: 0; }
  .sup-wizard-body {
    padding: 14px 16px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .sup-wizard-foot {
    padding: 12px 14px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    flex-wrap: wrap;
    gap: 8px !important;
    flex-shrink: 0 !important;
    position: sticky;
    bottom: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
  }
  .sup-wizard-foot > * { flex: 1 1 auto; min-width: 0; }
  .sup-cat-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .sup-cat-card { padding: 12px !important; }
  .sup-field { margin-bottom: 12px !important; }
  .sup-field-textarea { min-height: 96px !important; }
  /* Char counter on mobile — clearly under the field, never overlaps */
  .sup-char-counter {
    display: block !important;
    float: none !important;
    text-align: end;
    font-size: 10.5px !important;
    margin-top: 4px !important;
    padding: 0 2px;
    line-height: 1.3;
    color: var(--text-muted);
  }
  .sup-uploader { padding: 14px !important; }

  /* Support chat — fit viewport, scroll body, sticky composer.
     Use 100dvh + safe-area-inset-bottom so the send button isn't
     pushed off-screen behind the iOS Safari URL bar / home indicator. */
  .sup-chat {
    height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 12px !important;
  }
  .sup-chat-head { padding: 10px 12px !important; gap: 8px !important; }
  .sup-chat-subject { font-size: 14px !important; }
  .sup-chat-num { font-size: 10px !important; }
  .sup-chat-meta-line { font-size: 10px !important; }
  .sup-chat-body { padding: 12px !important; gap: 8px !important; }
  .sup-msg { max-width: 90% !important; gap: 6px !important; }
  .sup-bubble { padding: 9px 12px !important; font-size: 13px !important; }
  .sup-compose {
    padding: 10px 12px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .sup-compose-row { gap: 6px !important; }
  .sup-compose-input {
    font-size: 14px !important;
    min-height: 40px !important;
    max-height: 100px !important;
    padding: 9px 12px !important;
  }
  .sup-compose-btn { width: 40px !important; height: 40px !important; font-size: 16px !important; }
  .sup-compose-attach-row { grid-template-columns: repeat(auto-fill, 64px) !important; }
  .sup-closed-banner {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Checkout grid — stack */
  .chk-main, .chk-grid { grid-template-columns: 1fr !important; gap: 16px; }

  /* ============================================================
     ADMIN/DASHBOARD PAGE FIXES — overflow + spacing
     ============================================================ */

  /* Topbar — refined for mobile (taller, better separated, breathable) */
  .topbar {
    height: auto !important;
    /* 2026-06-19 (طلب المالك «طوّله من تحت»): كان الشريط قصيراً (68px) عند عرض
       الجوال/التابلت بـ!important فيُلغي تكبير سطح المكتب — لهذا بقي نحيفاً. كُبّر هنا. */
    min-height: 104px !important;
    padding: 26px 16px !important;
    padding-top: calc(26px + env(safe-area-inset-top, 0px)) !important;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 6px 18px rgba(0, 0, 0, 0.25);
    background: linear-gradient(180deg, rgba(15, 19, 32, 0.92), rgba(10, 14, 26, 0.85)) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .topbar-left, .topbar-right { gap: 10px !important; }
  .topbar-title, #pageTitle {
    font-size: 16px !important;
    font-weight: 700 !important;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-subtitle {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin-top: 2px;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-actions { gap: 8px !important; }
  .topbar-actions .icon-btn { width: 36px !important; height: 36px !important; }
  .topbar-actions .lang-toggle,
  .topbar-actions .lang-switch {
    padding: 2px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  .topbar-actions .lang-toggle span,
  .topbar-actions .lang-switch span { padding: 5px 10px !important; font-size: 11px !important; border-radius: 999px; }
  .menu-toggle, .mobile-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  /* Hide desktop search inside topbar on mobile */
  .search-wrap { display: none !important; }

  /* Real-time / status indicator pill in topbar — tidy */
  #rtIndicator {
    font-size: 11px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    white-space: nowrap;
  }

  /* Homepage nav-inner — same separator + padding refinement.
     2026-06-01: هيدر الجوال كان نحيفاً — كُبّر قليلاً (ارتفاع وحشو أعلى). */
  .nav-inner {
    min-height: 74px !important;
    padding: 13px 12px !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Page header — stack vertically, full-width buttons */
  .page-header { flex-direction: column; align-items: stretch !important; gap: 12px !important; margin-bottom: 18px !important; }
  .page-header > div { width: 100%; }
  .page-header .flex { flex-wrap: wrap; gap: 8px; }
  .page-header .flex .btn { flex: 1 1 auto; justify-content: center; }
  .page-title { font-size: 20px !important; letter-spacing: -0.3px !important; }
  .page-subtitle { font-size: 13px !important; }

  /* Tables — both admin and customer use .table-wrap. The "MOBILE TABLE → CARDS"
     block below turns `.table-wrap table.table` rows into cards, but ONLY renders
     readable labels when the JS row builder sets data-label on each <td>. Admin
     tables whose builders lack data-label (channel memberships, broadcast history)
     are deliberately kept in plain `overflow-x:auto` wrappers so they horizontally
     scroll instead of collapsing into label-less cards. `.tbl-wrap` below is a
     legacy alias kept for safety; corrected comment 2026-06-21. */
  .tbl-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .tbl-wrap table { min-width: 540px; }

  /* Cards/grids — prevent horizontal overflow inside content */
  .content { overflow-x: hidden !important; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Card header (admin uses .card-header, dashboard uses .card-head) */
  .card-header { flex-wrap: wrap; gap: 8px !important; padding: 12px 0 !important; }
  .card-header .tabs { overflow-x: auto; max-width: 100%; }
  .card-title { font-size: 14px !important; }
  .card-desc { font-size: 12px !important; }

  /* Tabs — horizontal scroll instead of wrap (admin partner tabs) */
  .adm-ptabs, .ptabs, .tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .adm-ptabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { height: 0; }

  /* Page-level tabs (top of admin dashboards) */
  [data-adm-tab], [data-page-tab] { white-space: nowrap; }

  /* Stat cards — chart values and deltas */
  .stat-value { font-size: 22px !important; }
  .stat-delta { font-size: 11px !important; }

  /* KPI strip in admin partners */
  .adm-partners-kpi { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .adm-kpi-card { padding: 14px !important; }
  .adm-kpi-num { font-size: 20px !important; }
  .adm-kpi-icon { font-size: 18px !important; margin-bottom: 4px !important; }
  .adm-kpi-lbl { font-size: 11px !important; }

  /* Affiliate detail modal — fit screen */
  .adm-aff-modal, .adm-app-modal, .adm-mc-modal { max-width: calc(100vw - 16px) !important; max-height: calc(100vh - 24px); margin: 12px !important; }
  .adm-aff-detail-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Action strip on admin */
  .adm-action-strip { flex-direction: column; gap: 8px !important; padding: 12px !important; }
  .adm-action-strip > * { width: 100%; }

  /* Form rows — stop fixed widths from causing overflow */
  input, textarea, select, .form-input { max-width: 100%; box-sizing: border-box; }

  /* Hero/header rows that use inline flex on desktop — let them stack on mobile */
  .fb-hero-row[style*="flex"] { flex-direction: column !important; align-items: stretch !important; }
  .fb-hero-row[style*="flex"] > div { min-width: 0 !important; width: 100%; }
}

/* Very small phones — avoid 2-col stat grids cramping */
@media (max-width: 420px) {
  .content > .stats-grid,
  .content .stats-grid { grid-template-columns: 1fr !important; }
  .adm-partners-kpi { grid-template-columns: 1fr !important; }
  .page-title { font-size: 18px !important; }
}

/* Larger phones / small tablets */
@media (max-width: 1024px) and (min-width: 769px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Force at least 16px font on inputs to prevent iOS zoom */
@media (max-width: 768px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ───────────────────────────────────────────────────────────────
   MOBILE TABLE → CARDS (2026-05-18)
   Phones can't fit 6–7 column tables. Each row becomes a card,
   each cell shows "Label: value" stacked. data-label attribute
   on the <td> is required (set in JS row builders).
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Force the card container itself to respect the viewport. */
  .table-wrap {
    overflow-x: hidden !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .table-wrap table.table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;          /* kill any min-width inherited from desktop rules */
    table-layout: auto !important;
    box-sizing: border-box !important;
  }
  .table-wrap table.table thead {
    display: none !important;
  }
  .table-wrap table.table tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .table-wrap table.table tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: var(--bg-card, rgba(255,255,255,0.03)) !important;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08)) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
    overflow: hidden !important;
  }
  .table-wrap table.table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    text-align: end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    min-height: 30px;
  }
  .table-wrap table.table td:last-child { border-bottom: none !important; }
  .table-wrap table.table td::before {
    content: attr(data-label);
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted, #9ca3af);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-align: start;
    flex: 0 0 auto;
    min-width: 72px;
    max-width: 40%;
  }
  /* Right-side value column shrinks to fit and wraps when needed. */
  .table-wrap table.table td > *:not(::before) {
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: end;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Pair cell: icon + label, cap label width so long names wrap inside */
  .table-wrap table.table td .table-pair {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  .table-wrap table.table td .table-pair .table-pair-name {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }
  .table-wrap table.table td .table-pair img,
  .table-wrap table.table td .table-pair svg,
  .table-wrap table.table td .table-pair .pair-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 auto !important;
  }
  .table-wrap table.table td .badge {
    margin-inline-start: auto;
  }
  /* Numeric cells: smaller monospaced font fits long numbers */
  .table-wrap table.table td.table-num {
    font-size: 13px !important;
  }
  /* Loading / empty single-cell rows: skip card framing */
  .table-wrap table.table tr td[colspan]::before { content: none !important; }
  .table-wrap table.table tr td[colspan] {
    text-align: center !important;
    justify-content: center !important;
    border-bottom: none !important;
  }
  /* Surrounding card shouldn't itself scroll */
  .card { overflow: hidden !important; }
}

/* ───────────────────────────────────────────────────────────────
   MOBILE TOPBAR — keep title + lang + indicator inside viewport.
   Earlier breakpoint pushed AR/EN button off-screen on phones.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* 2026-06-19 (طلب المالك): سطران دائماً لكل الأقسام (موحّد) — العنوان والوصف بسطر
     كامل بلا أي قصّ، والأدوات (مباشر + العربية) بسطر تحته بحجمها الطبيعي. */
  .topbar {
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 8px;
    padding: 14px 16px !important;
  }
  .topbar-left {
    flex: 1 1 100%;       /* سطر العنوان — عرض كامل، فيظهر العنوان كاملاً بلا قصّ */
    min-width: 0;
  }
  .topbar-title {
    font-size: 19px !important;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-subtitle {
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
  }
  .topbar-right {
    flex: 1 1 100%;       /* سطر الأدوات — تحت العنوان، بحجمها الطبيعي */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }
  .lang-switch span,
  .lang-toggle span {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }
  .lang-switch span.lang-disabled small,
  .lang-toggle span.lang-disabled small {
    display: inline !important;
    font-size: 9px !important;
    margin-inline-start: 2px;
    opacity: 0.85;
  }
}
@media (max-width: 380px) {
  .topbar-subtitle { display: none; }   /* drop subtitle on tiny phones */
}

/* ============================================================
   2026-06-06 (ب): اتساع صف الهيدر في حالة تسجيل الدخول —
   زر «لوحة التحكم» الأطول كان يفيض ~11 نقطة على مقاس 390 ففتح
   السحب الأفقي. تنحيف غير محسوس للأزرار والحشوات يجعله يتسع.
   في آخر الملف عمداً ليتغلب على القواعد الأعلى.
   ============================================================ */
@media (max-width: 480px) {
  .nav-inner { padding-inline: 10px !important; gap: 6px !important; }
  .nav-right { gap: 5px !important; }
  .nav-right .btn-primary { padding: 8px 9px !important; font-size: 11.5px !important; }
  .mobile-menu-btn { padding: 4px !important; }
}
/* ============================================================
   2026-06-06 (ز): هيدر الجوال بنمط eToro — مرجع المالك المصوّر —
   بهوية فوركس برو الداكنة الذهبية. خاص بصفحات فيها زر القائمة
   (الرئيسية). الشريط: شعار + حبة اللغة (باقية) + «تسجيل الدخول»
   نصّي + فاصل رفيع + برغر مجرّد يتحول إلى X. القائمة: لوحة كاملة
   تنسلق بتأثير سحب، عناوين كبيرة بأسهم، وزر «ابدأ الآن» الذهبي
   مثبّت أسفلها بعرض كامل. في آخر الملف ليتغلب على كل ما قبله.
   ============================================================ */
@media (max-width: 1279.98px) {
  /* الضباب الزجاجي على الشريط يأسر العناصر المثبتة بداخله (يجعل نفسه
     مرجع إحداثياتها) فحبس اللوحة المنسلقة في ارتفاع الشريط — ننقله
     من الشريط إلى اللوحة نفسها، ونرفع خلفية الشريط تعويضاً. */
  .nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 14, 26, 0.96) !important;
  }
  /* الشريط فوق اللوحة (الشعار وX يبقيان ظاهرين فوقها مثل eToro) —
     اللوحة شقيقة الشعار والأزرار داخل نفس الصف، فنرفعهما طبقةً فوقها */
  .nav-inner { position: relative; z-index: 2; }
  .nav-inner > .logo, .nav-inner > .nav-right { position: relative; z-index: 3; }

  /* الزر الذهبي يغادر الشريط (مكانه أسفل اللوحة) */
  .nav-right [data-nav-start] { display: none !important; }

  /* تسجيل الدخول / لوحة التحكم: روابط نصية نحيفة بنمط eToro */
  .nav-right .btn-ghost,
  .nav-right [data-nav-dashboard] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 2px !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
  }

  /* البرغر: أيقونة مجرّدة + فاصل عمودي رفيع قبلها (نمط eToro) */
  .mobile-menu-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 0 !important;
    margin-inline-start: 4px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.22) !important;
    padding-inline-start: 14px !important;
    flex-shrink: 0 !important;
    color: var(--text-primary);
  }
  .mobile-menu-btn svg { width: 26px !important; height: 26px !important; display: block; }
  .mobile-menu-btn .fb-close-i { display: none; }
  body.nav-menu-open .mobile-menu-btn .fb-burger-i { display: none; }
  body.nav-menu-open .mobile-menu-btn .fb-close-i { display: block; }
  body.nav-menu-open { overflow: hidden; }

  /* اللوحة المنسلقة — تحت الشريط الثابت (الشريط يبقى ظاهراً مع X) */
  .nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: fixed !important;
    inset: 0 !important;
    padding: 100px 22px 24px !important;
    background: rgba(10, 14, 26, 0.985) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    z-index: 1 !important;
    gap: 0 !important;
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(0.25, 0.8, 0.3, 1), visibility 0s linear 0.34s;
  }
  html[dir="rtl"] .nav-links { transform: translateX(-100%); }
  .nav-links.mobile-open {
    visibility: visible;
    pointer-events: auto;
    transform: none !important;
    transition: transform 0.34s cubic-bezier(0.25, 0.8, 0.3, 1);
    border-bottom: none !important;
  }

  /* عناوين كبيرة بأسهم اتجاهية — نمط eToro */
  .nav-links .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 17px 2px !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    text-align: start;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 0 !important;
  }
  .nav-links .nav-link::after {
    content: "";
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-top: 2.5px solid rgba(255, 255, 255, 0.45);
    border-right: 2.5px solid rgba(255, 255, 255, 0.45);
    transform: rotate(45deg);
  }
  html[dir="rtl"] .nav-links .nav-link::after { transform: rotate(-135deg); }

  /* الأزرار المثبتة أسفل اللوحة */
  .fb-menu-cta { display: none; }
  .nav-links.mobile-open .fb-menu-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
  }
  .fb-menu-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    font-size: 15.5px;
    background: linear-gradient(135deg, #FFB800, #FF8A00);
    color: #0A0E1A;
    box-shadow: 0 14px 32px -10px rgba(255, 184, 0, 0.5);
  }
  .fb-menu-cta a:active { transform: scale(0.985); }
}
/* المقاسات الضيقة: حبة اللغة ورابط الدخول أنحف قليلاً ليتنفس الصف */
@media (max-width: 390px) {
  .nav-right .btn-ghost, .nav-right [data-nav-dashboard] { font-size: 13px !important; }
  .nav-inner .logo-mark { width: 46px !important; height: 46px !important; }
  .nav-inner .logo .logo-text { font-size: 27px !important; }
}
@media (max-width: 350px) {
  .nav-right .btn-ghost, .nav-right [data-nav-dashboard] { font-size: 12px !important; }
  .nav-inner .logo-mark { width: 42px !important; height: 42px !important; }
  .nav-inner .logo .logo-text { font-size: 24px !important; }
  .nav-right .lang-dd-trigger { padding: 5px 6px !important; font-size: 10.5px !important; }
}
/* إخفاء فقاعة الدردشة خلف اللوحة المفتوحة */
body.nav-menu-open #fb-lc-launcher, body.nav-menu-open .fb-lc-launcher { display: none !important; }

/* ============================================================
   2026-06-06 (ح): لمسات المالك الإبداعية على هيدر eToro —
   ١) عزل زر اللغة وتسجيل الدخول عن الخلفية برقاقتين أنيقتين
      (محايدة للّغة + ذهبية شفافة للدخول = تسلسل بصري واضح)
   ٢) تمييز «المدونة» و«التسويق بالعمولة» (صفحتان مستقلتان) عن
      عناوين الأقسام ببطاقتين ذهبيتين خاصتين
   ٣) الزر الذهبي: نص + رقاقة سهم دائرية + لمعة ضوئية تمسحه
   ٤) زر «العودة لأعلى» يختفي خلف اللوحة المفتوحة
   ============================================================ */
@media (max-width: 1279.98px) {
  /* ١) (مراجعة المالك: «بلا كبسولات») — تايبوغرافيا نقية بروح eToro:
     لا خلفيات ولا حدود ولا انحناءات. عزلٌ بالوزن والتباين والفواصل
     الرفيعة، وتوقيع ذهبي رفيع تحت «تسجيل الدخول» بدل أي صندوق. */
  .nav-right .lang-dd-trigger {
    height: auto !important;
    padding: 4px 2px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.92) !important;
    gap: 5px !important;
  }
  .nav-right .btn-ghost,
  .nav-right [data-nav-dashboard] {
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.94) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    position: relative !important;
    border: none !important;
    border-inline-start: 1px solid rgba(255,255,255,0.18) !important;
    padding: 5px 2px 8px 2px !important;
    padding-inline-start: 16px !important;
    margin-inline-start: 2px;
  }
  /* التوقيع الذهبي الرفيع — هوية بلا صندوق */
  .nav-right .btn-ghost::after,
  .nav-right [data-nav-dashboard]::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 16px;
    inset-inline-end: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #FFB800, #FF8A00);
  }

  /* ٢) المدونة + التسويق بالعمولة: بطاقتان ذهبيتان مميزتان */
  .nav-links a.nav-link[href^="/blog"],
  .nav-links a.nav-link[href^="/affiliate"] {
    background: linear-gradient(135deg, rgba(255,184,0,0.12), rgba(255,138,0,0.05)) !important;
    border: 1px solid rgba(255,184,0,0.32) !important;
    border-radius: 14px !important;
    padding: 15px 16px !important;
    font-size: 17px !important;
    color: #FFC83D !important;
  }
  .nav-links a.nav-link[href^="/blog"] {
    margin-top: 22px; /* فجوة تفصل مجموعة الصفحات عن مجموعة الأقسام */
  }
  .nav-links a.nav-link[href^="/affiliate"] { margin-top: 10px; }
  .nav-links a.nav-link[href^="/blog"]::after,
  .nav-links a.nav-link[href^="/affiliate"]::after {
    border-top-color: #FFB800 !important;
    border-right-color: #FFB800 !important;
  }

  /* ٣) الزر الذهبي المثبت: مساحة للسهم + لمعة ضوئية */
  .fb-menu-cta a {
    position: relative;
    overflow: hidden;
    padding-inline: 62px;
  }
  .fb-mc-arr {
    position: absolute;
    inset-inline-end: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(10, 14, 26, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fb-mc-arr svg { width: 17px; height: 17px; display: block; }
  html[dir="rtl"] .fb-mc-arr svg { transform: scaleX(-1); }
  .fb-menu-cta a::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -70px;
    width: 48px;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-18deg);
    animation: fbCtaShine 2.8s ease-in-out infinite;
  }
  @keyframes fbCtaShine {
    0%, 55% { transform: translateX(0) skewX(-18deg); }
    100%    { transform: translateX(520px) skewX(-18deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .fb-menu-cta a::before { animation: none; display: none; }
  }

  /* ٤) زر العودة لأعلى لا يركب على اللوحة وزرها */
  body.nav-menu-open #fbBackToTop { display: none !important; }
}
/* حصر صارم: أزرار اللوحة لا وجود لها خارج الجوال إطلاقاً —
   كانت تتسرب لصف قوائم الكمبيوتر كروابط خام (خلل التجريبية). */
.fb-menu-cta { display: none; }
/* ════════════════════════════════════════════════════════════════
   2026-06-06: زرّا البطل — تفاعل وأيقونات بطلب المالك.
   الذهبي: أيقونة برق + لمعة ضوئية تمسحه + انكماش لمسي.
   الثانوي: نبضة «مباشر» خضراء + أيقونة نبض + توهج حدّي عند المرور.
   ════════════════════════════════════════════════════════════════ */
.hero-actions .btn {
  position: relative;
  overflow: hidden;
  gap: 9px;
}
.hero-actions .btn svg { flex-shrink: 0; }
.hero-actions .btn-primary::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70px;
  width: 46px;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg);
  animation: heroCtaShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroCtaShine {
  0%, 60% { transform: translateX(0) skewX(-18deg); }
  100%    { transform: translateX(560px) skewX(-18deg); }
}
.hero-actions .btn-primary:active { transform: scale(0.97); }
.hero-actions .btn-ghost {
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-actions .btn-ghost:hover,
.hero-actions .btn-ghost:active {
  border-color: rgba(0, 255, 135, 0.45);
  background: rgba(0, 255, 135, 0.05);
  box-shadow: 0 8px 24px -10px rgba(0, 255, 135, 0.25);
  transform: translateY(-1px);
}
.hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00FF87;
  flex-shrink: 0;
  animation: heroLivePulse 1.8s ease-out infinite;
}
@keyframes heroLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 255, 135, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(0, 255, 135, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 135, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions .btn-primary::before { animation: none; display: none; }
  .hero-live-dot { animation: none; }
}
/* ════════════════════════════════════════════════════════════════
   2026-06-06: تحسين تايبوغرافيا البطل على الجوال بطلب المالك —
   نص تمهيدي أكبر وأنصع وأريَح سطراً، ونصوص أزرار أثقل وأوضح،
   وشارة أعرض حضوراً.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero .hero-content > p {
    font-size: 17.5px !important;
    line-height: 1.95 !important;
    color: #CBD5E5 !important;
    font-weight: 500 !important;
  }
  .hero-actions .btn {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px;
  }
  .hero-badge { font-size: 14.5px !important; letter-spacing: 0.5px !important; }
}
/* 2026-06-06: قائمة اللغة المنسدلة في رأس لوحة التحكم على الجوال —
   absolute داخل حاوية الزر (.lang-dd) تحاذي حافته بالضبط وتنزل تحته،
   فلا تغطّيه ولا تخرج عن الشاشة. المحاذاة الفيزيائية حسب الاتجاه:
   • عربي RTL: الزر على يسار الشريط → القائمة محاذية لحافته اليسرى.
   • إنجليزي LTR: الزر على يمين الشريط → القائمة محاذية لحافته اليمنى.
   تتغلّب على media query الافتراضي في i18n الذي كان يخرجها عن الشاشة. */
@media (max-width: 768px) {
  .topbar .lang-dd,
  .topbar-actions .lang-dd { position: relative !important; }
  .topbar .lang-dd-menu,
  .topbar-actions .lang-dd-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    inset-inline-start: auto !important;   /* إبطال صريح لقاعدة i18n (لا shorthand) */
    inset-inline-end: auto !important;
    left: 0 !important;                     /* RTL: حافة يسار الزر، يمتد يميناً (داخل) */
    right: auto !important;
    min-width: 150px !important;
    max-width: 72vw !important;
    z-index: 1400 !important;
  }
  html[dir="ltr"] .topbar .lang-dd-menu,
  html[dir="ltr"] .topbar-actions .lang-dd-menu {
    left: auto !important;                   /* LTR: حافة يمين الزر، يمتد يساراً (داخل) */
    right: 0 !important;
  }
  .topbar .lang-dd-trigger,
  .topbar-actions .lang-dd-trigger { flex-shrink: 0; }
}

/* ════════════════════════════════════════════════════════════════
   2026-06-17 (طلب المالك): تخفيف ازدحام صفحتَي «التوصيات» و«السجل»
   على الجوال — طيّ الكروت الإحصائية الأربعة خلف زر، وتصغير كرت
   «دليل البوت» إلى شريط رفيع. الكمبيوتر يبقى كما هو تماماً.
   ════════════════════════════════════════════════════════════════ */
/* زر الطيّ مخفي على الكمبيوتر (الإحصائيات تظهر دائماً هناك) */
.fb-stats-toggle { display: none; }
@media (max-width: 768px) {
  .fb-stats-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    color: var(--text-secondary, #C5CBD6);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
  }
  .fb-stats-toggle .fb-stats-arrow {
    width: 14px; height: 14px;
    transition: transform 0.22s ease;
    flex-shrink: 0;
  }
  .fb-stats-toggle[aria-expanded="true"] .fb-stats-arrow { transform: rotate(180deg); }
  /* الإحصائيات مطويّة افتراضياً على الجوال — تظهر عند الضغط */
  .fb-collapsible-stats { display: none !important; }
  .fb-collapsible-stats.open { display: grid !important; }

  /* كرت «دليل البوت» → شريط رفيع (صفحتا التوصيات والسجل فقط عبر علامة fb-bg-slim):
     إخفاء الوصف وتصغير الأيقونة والحشو. */
  .fb-bot-guide-cta.fb-bg-slim .card { padding: 11px 13px !important; gap: 11px !important; }
  .fb-bot-guide-cta.fb-bg-slim .fb-bg-sub { display: none !important; }
  .fb-bot-guide-cta.fb-bg-slim .fb-bg-title { font-size: 14px !important; }
  .fb-bot-guide-cta.fb-bg-slim .fb-bg-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
  .fb-bot-guide-cta.fb-bg-slim .fb-bg-icon svg { width: 19px !important; height: 19px !important; }
  .fb-bot-guide-cta.fb-bg-slim .fb-bot-guide-open { padding: 8px 14px !important; font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   مقاسُ اللمس — 2026-08-25
   ⚠️ زرُّ فتح القائمة كان ~٣٤ بكسلاً على الهواتف (حشوةٌ ٤ حول أيقونةٍ ٢٦)،
      وزرُّ «حمّل التطبيق» في الشريط ٤٠. والحدُّ الموصى به ٤٤. وهذان الزرّان
      يلمسهما كلُّ زائرِ جوّالٍ تقريباً — وأحدُهما بابُ التنقّل كلِّه.
   ⚠️ الحشوةُ لا تُزاد (تكسر محاذاةَ الشريط): يُفرض `min-width`/`min-height`
      فيتّسع هدفُ اللمس والحجمُ البصريُّ كما هو.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-menu-btn {
    min-width: 46px !important; min-height: 46px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  .nav-right .btn-primary { min-height: 46px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ترتيبُ الأقسام على الجوّال — 2026-08-25
   ──────────────────────────────────────────────────────────────────────────
   ⚠️⚠️ الشكوى بالحرف: «من قسم كل ما تحتاجه في مكان واحد إلى آخر الصفحة،
      النصوصُ صغيرةٌ والعناصرُ صغيرةٌ وغيرُ مرتّبةٍ ولا متناسقة».
      والسببُ أنّ أحجامَ الشاشة الواسعة تُصغَّر تلقائيّاً بـ`clamp` فتصل إلى
      حدّها الأدنى على الجوّال — والحدُّ الأدنى مقاسُ حاسوبٍ مضغوطٌ لا مقاسُ يد.
   ⚠️ فتُرفع الأحجامُ صراحةً هنا، وتُوحَّد المسافاتُ بين الأقسام، وتُقلب كلُّ
      الشبكات عموداً واحداً بترتيبٍ ثابت.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* ــ العناوين ــ */
  .section-eyebrow { font-size: 12.5px !important; letter-spacing: .6px; }
  .section-title { font-size: clamp(26px, 7.4vw, 33px) !important; line-height: 1.35 !important; }
  .section-subtitle { font-size: 15.5px !important; line-height: 1.8 !important; max-width: 42ch; margin-inline: auto; }
  section > .container > .section-header { margin-bottom: 34px !important; }

  /* ــ مسافةٌ موحّدةٌ بين كلّ الأقسام ــ */
  section#features, section#how-it-works, section#testimonials, section#pricing,
  section#performance, section#tools, section#faq, section#affiliate,
  section#blog-latest, section#tg-showcase, section.cta-section {
    padding-block: 72px !important;
  }

  /* ــ شبكاتُ البطاقات: عمودٌ واحدٌ بمسافةٍ مريحة ــ */
  .features-grid, .tools-grid, .testimonials-grid, .bot-features-grid, .aff-grid {
    grid-template-columns: 1fr !important; gap: 14px !important;
  }
  .feature-card, .tool-card, .testimonial-card {
    padding: 20px !important; border-radius: 18px !important;
  }
  .feature-card h3, .tool-card h3 { font-size: 17px !important; line-height: 1.45 !important; }
  .feature-card p, .tool-card p { font-size: 15px !important; line-height: 1.8 !important; }
  .feature-icon { width: 46px !important; height: 46px !important; border-radius: 14px !important; }
  .feature-icon svg { width: 22px !important; height: 22px !important; }

  /* ــ خطواتُ «كيف يعمل» ــ */
  .how-steps { grid-template-columns: 1fr !important; gap: 14px !important; }
  .how-step { padding: 20px !important; }
  .how-step h3 { font-size: 17px !important; }
  .how-step p { font-size: 15px !important; line-height: 1.8 !important; }

  /* ــ الأداء ــ */
  .perf-stats { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .perf-stat { padding: 18px 12px !important; }
  .perf-stat-num { font-size: 27px !important; }
  .perf-stat-label { font-size: 12.5px !important; line-height: 1.5 !important; }
  .perf-chart-wrap { padding: 16px !important; border-radius: 18px !important; }
  .perf-chart-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .perf-chart-title { font-size: 14px !important; line-height: 1.6 !important; }

  /* ــ الأسئلة ــ */
  .faq-item { padding: 16px 18px !important; }
  .faq-question { font-size: 16px !important; line-height: 1.55 !important; }
  .faq-answer, .faq-answer p { font-size: 15px !important; line-height: 1.85 !important; }

  /* ــ الشهادات ــ */
  .testimonial-card p { font-size: 15px !important; line-height: 1.85 !important; }

  /* ــ الشراكة ــ */
  .aff-value { font-size: 26px !important; }
  .aff-card p, .aff-checks li { font-size: 14.5px !important; line-height: 1.8 !important; }

  /* ــ التذييل ــ */
  /* كانت هنا grid-template-columns: 1fr تُعيده عموداً واحداً فتغلب ما فوقها. */
  .footer-grid { gap: 28px 16px !important; }
  .footer-disclaimer { font-size: 12.5px !important; line-height: 1.85 !important; }
}
@media (max-width: 420px) {
  .perf-stats { grid-template-columns: 1fr !important; }
  .section-title { font-size: clamp(24px, 8vw, 29px) !important; }
}

/* ⚠️ 2026-08-27 — الشموعُ العائمةُ حول بطاقة التوصية مقاسُها مبنيٌّ على شاشةٍ
   عريضة، فتخرج من حدود البطاقة على الجوال وتبدو كأنّها قصٌّ لا زخرفة. */
@media (max-width: 560px) {
  .hero-visual { overflow: hidden; }
  .floating-candle, .hero-candle, [class*="floating-candle"] { opacity: .35 !important; transform: scale(.6); }
}

/* ⚠️⚠️ 2026-08-27 — كتلةُ الدعوة الوسطى على الجوال.
   هي `flex` أفقيّةٌ بـ`space-between`، فحين تلتفّ على الشاشة الضيّقة يبقى
   `align-items: stretch` نافذاً فيتمدّد عمودُ النصّ إلى ارتفاعٍ ٣٢٠ بكسلاً
   لعنوانٍ وسطرٍ واحد — وهو الفراغُ الهائلُ الذي يظهر في منتصف الكتلة.
   تُقلَب عموداً صريحاً بارتفاعٍ طبيعيّ. */
@media (max-width: 700px) {
  .midcta {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    padding: 24px 18px !important;
  }
  .midcta-txt { flex: 0 0 auto !important; text-align: center; }
  .midcta-txt h3 { margin: 0 0 8px !important; }
  .midcta-txt p  { margin: 0 !important; }
  .midcta .store-btns { width: 100%; flex-direction: column; gap: 10px; }
  .midcta .store-btn  { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⚠️ 2026-08-27 — تكبيرٌ وتوسيطٌ على **الجوال فقط** — شاشةُ الحاسوب لا تُمسّ.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── قسمُ الإشعار: توسيطٌ تامٌّ والأيقونةُ فوق نصِّها لا بجانبه ── */
  .tg-section .tg-text { text-align: center; }
  .tg-eyebrow { margin-inline: auto; }
  .tg-title { font-size: 30px !important; line-height: 1.35 !important; text-align: center; }
  .tg-desc  { font-size: 16.5px !important; line-height: 1.9 !important; text-align: center;
              margin-inline: auto; max-width: 42ch; }
  .tg-feats { align-items: center; gap: 26px; }
  /* ⚠️ الصفُّ الأفقيُّ (أيقونةٌ ثمّ نصّ) يترك الأيقونةَ على حافّةٍ والنصَّ على
     أخرى. يُقلَب عموداً فتعلو الأيقونةُ نصَّها وتتوسّطان معاً. */
  .tg-feat {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    width: 100%;
  }
  .tg-feat-icon { margin: 0 !important; }
  .tg-feat-body { text-align: center !important; }
  .tg-feat-body h3 { font-size: 18.5px !important; margin-bottom: 6px !important; }
  .tg-feat-body p  { font-size: 15.5px !important; line-height: 1.8 !important; }
  .tg-cta { margin-inline: auto !important; display: inline-flex !important; }
  .tg-chat-wrap { margin-inline: auto; }

  /* ── برنامجُ الشراكة: تكبيرُ النصوص ── */
  #affiliate .section-title { font-size: 30px !important; }
  #affiliate .section-subtitle { font-size: 16.5px !important; line-height: 1.9 !important; }
  #affiliate .aff-card { text-align: center; padding: 22px 18px !important; }
  #affiliate .aff-card h3 { font-size: 18.5px !important; }
  #affiliate .aff-value   { font-size: 40px !important; }
  #affiliate .aff-card p  { font-size: 15.5px !important; line-height: 1.85 !important; }
}

/* ⚠️ 2026-08-27 — الشاراتُ والعناوينُ أكبرُ على الجوال بطلب المالك. */
@media (max-width: 768px) {
  .section-eyebrow { font-size: 15px !important; padding: 9px 16px !important; letter-spacing: 1.2px !important; }
  .tg-eyebrow      { font-size: 14.5px !important; padding: 9px 16px !important; }
  .section-title   { font-size: 30px !important; line-height: 1.35 !important; }
  .section-subtitle{ font-size: 16.5px !important; line-height: 1.9 !important; }
}

/* ⚠️ 2026-08-27 — زرّا المتجرين في قائمة الجوال بدل زرِّ «حمّل التطبيق».
   يرثان تنسيقَ `.store-btn` نفسَه، ويُعرضان عمودَين بعرضٍ كامل أسفلَ القائمة. */
@media (max-width: 768px) {
  .nav-links.mobile-open .fb-menu-stores {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 18px;
  }
  .fb-menu-stores .store-btn {
    width: 100%;
    justify-content: center;
    background: #000 !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: none !important;
    color: #fff !important;
    min-height: 66px;
    border-radius: 16px !important;
    padding: 14px 20px !important;
    animation: none !important;
  }
  .fb-menu-stores .store-btn::before,
  .fb-menu-stores .store-btn::after { content: none !important; display: none !important; }
  .fb-menu-stores .store-btn-sm { color: rgba(255,255,255,.72) !important; }
  .fb-menu-stores .store-btn-lg { color: #fff !important; }
}

/* ⚠️ 2026-08-28 — زرُّ الشريط على الجوال: النصُّ صار «حمّل التطبيق الآن» فطال
   وتقلّص. يُكبَّر ويُمنع التفافُه، والحشوةُ تضيق أفقيّاً فقط كي لا يرتفع الشريط.
   وفي قائمة الجوال يُدلّ على القسم الحاليِّ باللون وخلفيّةٍ خفيفةٍ لا بخطّ —
   الخطُّ يهدم سهمَ العنصر لأنّهما يتشاركان نفسَ الطبقة. */
@media (max-width: 768px) {
  .nav-actions .btn-primary,
  .nav .btn.btn-primary {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    padding: 10px 14px !important;
    line-height: 1.2 !important;
  }
  .nav-links .nav-link.is-current {
    color: var(--accent-gold) !important;
    background: rgba(255,184,0,.08);
    border-radius: 10px;
    padding-inline: 10px;
  }
  .nav-links .nav-link.is-current::after {
    border-top-color: var(--accent-gold) !important;
    border-right-color: var(--accent-gold) !important;
  }
}