/* ============================================================
   RTL (Right-to-Left) Stylesheet — Arabic
   ============================================================ */

/* Base direction */
[dir="rtl"] body { direction: rtl; text-align: right; }

/* Font: Use system Arabic fonts */
[dir="rtl"] body,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] p,[dir="rtl"] a,[dir="rtl"] span,[dir="rtl"] li,
[dir="rtl"] button,[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans Arabic', 'Arabic UI Text', Tahoma, sans-serif;
  letter-spacing: 0 !important;
}

/* Header / Nav */
/*  - removed: dir=rtl handles this naturally */
/*  - removed: dir=rtl handles this naturally */
[dir="rtl"] .nav__dropdown { text-align: right; }
/*  - removed: dir=rtl handles this naturally */
[dir="rtl"] .nav__item { position: relative; }

/* Eyebrow line */
[dir="rtl"] .eyebrow::before { margin-right: 0; margin-left: 10px; order: 1; }

/* Hero */
[dir="rtl"] .hero__inner { direction: rtl; }


[dir="rtl"] .hero__eyebrow { flex-direction: row-reverse; }
[dir="rtl"] .hero__nav-btn--prev { right: 16px; left: auto; }
[dir="rtl"] .hero__nav-btn--next { left: 16px; right: auto; }
[dir="rtl"] .hero__nav-counter { transform: translateX(50%); }

/* Hero slider edge arrows: flip icons so they point outward in RTL */
[dir="rtl"] .hero__nav-btn svg { transform: scaleX(-1); }

/* Buttons & arrows */
[dir="rtl"] .btn .arrow,
[dir="rtl"] .btn svg.arrow { transform: scaleX(-1); }

/* Section head */
[dir="rtl"] .section__head { text-align: right; }
[dir="rtl"] .section__head--center { text-align: center; }

/* Market cards / feature grids */
[dir="rtl"] .m-card { text-align: right; }
[dir="rtl"] .feat { text-align: right; }
[dir="rtl"] .feat__num { text-align: right; }

/* Steps */
[dir="rtl"] .steps-grid { direction: rtl; }
[dir="rtl"] .step { text-align: right; }
[dir="rtl"] .step__arrow { transform: scaleX(-1); }

/* TV instruments grid */
[dir="rtl"] .tv-instruments-grid { direction: rtl; }
[dir="rtl"] .tv-instruments-grid__text { align-items: flex-end; }

/* Asset hero */
[dir="rtl"] .asset-hero__inner { direction: rtl; }
[dir="rtl"] .asset-hero__text { text-align: right; }

/* Why bento grid */
[dir="rtl"] .why-bento { text-align: right; }
[dir="rtl"] .why-bento--wide { flex-direction: row-reverse; }

/* Footer */
[dir="rtl"] .footer__inner { direction: rtl; }
[dir="rtl"] .footer__col { text-align: right; }
[dir="rtl"] .footer__links { text-align: right; }
[dir="rtl"] .footer__bottom { flex-direction: row-reverse; }

/* Forms */
[dir="rtl"] .contact-form { direction: rtl; }
[dir="rtl"] .contact-form input,
[dir="rtl"] .contact-form textarea,
[dir="rtl"] .contact-form select { text-align: right; direction: rtl; }

/* Breadcrumbs */
[dir="rtl"] .crumbs { flex-direction: row-reverse; }
[dir="rtl"] .crumbs .sep { transform: scaleX(-1); }

/* Nav arrows for dev-cards and other cards */
[dir="rtl"] .dev-card__cta svg { transform: scaleX(-1); }

/* MT5 section */
[dir="rtl"] .mt5__inner { direction: rtl; }
[dir="rtl"] .mt5__text { text-align: right; }
[dir="rtl"] .mt5__feat { text-align: right; }

/* Partners hero */
[dir="rtl"] .partners-hero__text { text-align: right; }

/* Lang switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color .2s, background .2s;
}
.lang-switcher:hover {
  border-color: var(--green);
  background: var(--green-tint);
  color: var(--green);
}
.lang-switcher .flag { font-size: 16px; }
[dir="rtl"] .lang-switcher { flex-direction: row-reverse; }

/* ─── Tajawal Arabic Font ─────────────────────────────── */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] li,
[dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select,
[dir="rtl"] .btn, [dir="rtl"] .eyebrow, [dir="rtl"] .section__title,
[dir="rtl"] .section__sub, [dir="rtl"] .hero__title, [dir="rtl"] .hero__sub,
[dir="rtl"] .nav__link, [dir="rtl"] .footer__col, [dir="rtl"] label {
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

/* Keep JetBrains Mono for numbers and code in AR pages */
[dir="rtl"] .hero__counter, [dir="rtl"] .feat__num, [dir="rtl"] .bento__num,
[dir="rtl"] .why-bento__num, [dir="rtl"] .crumbs, [dir="rtl"] .ticker {
  font-family: "JetBrains Mono", monospace !important;
}

/* Lang dropdown RTL fix */
[dir="rtl"] .lang-dropdown__menu { right: auto; left: 0; }
[dir="rtl"] .lang-dropdown__item { text-align: right; }
[dir="rtl"] .lang-dropdown__btn { flex-direction: row-reverse; }

/* RTL nav — header flows right to left */
/*  - removed: dir=rtl handles this naturally */
/*  - removed: dir=rtl handles this naturally */

[dir="rtl"] .nav__dropdown { left: auto; right: -24px; text-align: right; }
[dir="rtl"] .lang-dropdown__menu { right: auto; left: 0; }
[dir="rtl"] .lang-dropdown__item { text-align: right; }
[dir="rtl"] .lang-dropdown__btn { flex-direction: row-reverse; }

/* ═══════════════════════════════════════════════════
   RTL NAV — Force right-to-left visual flow
   ═══════════════════════════════════════════════════ */
[dir="rtl"] .nav,
html[dir="rtl"] .nav,


[dir="rtl"] .header__inner,
html[dir="rtl"] .header__inner,


[dir="rtl"] .header__cta,
html[dir="rtl"] .header__cta,


/* Ensure first nav item (الرئيسية) appears on RIGHT */

/* Nav dropdown should align right in RTL */


/* ============================================================
   RTL HEADER NAV — Use natural RTL flow (NO row-reverse!)
   dir="rtl" on <html> makes flex items flow right-to-left naturally.
   ============================================================ */
[dir="rtl"] .header__inner { direction: rtl; }
[dir="rtl"] .nav { direction: rtl; }
[dir="rtl"] .header__cta { direction: rtl; }
[dir="rtl"] .nav__dropdown { left: auto !important; right: -24px; text-align: right; }

/* ============================================================
   RTL: Sign In button color on dark hero 
   ============================================================ */
body:not(.page-light):not(.page-company):not(.page-support):not(.page-asset):not(.page-platform):not(.page-partners) .header:not(.header--scrolled) .btn--ghost-light {
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}
.header--scrolled .btn--ghost-light,
body.page-light .btn--ghost-light,
body.page-company .btn--ghost-light,
body.page-support .btn--ghost-light,
body.page-asset .btn--ghost-light,
body.page-platform .btn--ghost-light,
body.page-partners .btn--ghost-light {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* ============================================================
   RTL: Hero content alignment — text and CTA on the right
   ============================================================ */




/* ============================================================
   RTL: Hero layout — text on RIGHT, panel on LEFT
   ============================================================ */
[dir="rtl"] .hero__inner { direction: rtl; }
[dir="rtl"] .hero__slide { text-align: right; }
[dir="rtl"] .hero__actions { justify-content: flex-start; }
[dir="rtl"] .hero__sub { margin-right: 0; margin-left: auto; }

/* ============================================================
   RTL: Market cards icon position
   Keep the plus button on the right and move the market icon
   to the opposite side so they do not overlap visually.
   ============================================================ */
[dir="rtl"] .market__plus { right: 28px; left: auto; }
[dir="rtl"] .market__icon { margin-right: auto !important; margin-left: 0 !important; }

/* RTL markets spacing fix: reduce excessive empty space below the header on Arabic market pages */
[dir="rtl"] body.page-asset .asset-hero {
  padding-top: 64px;
}

[dir="rtl"] body.page-asset .inner-hero {
  padding-top: 90px;
}

@media (max-width: 1024px) {
  [dir="rtl"] body.page-asset .asset-hero {
    padding-top: 56px;
  }
  [dir="rtl"] body.page-asset .inner-hero {
    padding-top: 78px;
  }
}

@media (max-width: 640px) {
  [dir="rtl"] body.page-asset .asset-hero {
    padding-top: 44px;
  }
  [dir="rtl"] body.page-asset .inner-hero {
    padding-top: 64px;
  }
}