/* =========================================================
   ar.css  —  Arabic (RTL) overrides for /ar/ pages
   Loaded ONLY on Arabic pages, AFTER style.css + responsive.css.
   Applies the Noto Kufi Arabic typeface and flips layout to RTL.
   ========================================================= */

/* ---------- Direction ---------- */
html[lang="ar"],
html[lang="ar"] body {
  direction: rtl;
}

/* ---------- Typeface: Noto Kufi Arabic everywhere ---------- */
html[lang="ar"] body,
html[lang="ar"] body * {
  font-family: "Noto Kufi Arabic", "DM Sans", sans-serif !important;
  letter-spacing: 0 !important; /* Arabic script must never be letter-spaced */
}

/* Keep Font Awesome icon glyphs intact (do NOT swap their font) */
html[lang="ar"] body .fa,
html[lang="ar"] body .fas,
html[lang="ar"] body .far,
html[lang="ar"] body .fal,
html[lang="ar"] body .fad,
html[lang="ar"] body .fab,
html[lang="ar"] body [class^="fa-"],
html[lang="ar"] body [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* Arabic reads a touch small in Kufi — nudge line-height for readability */
html[lang="ar"] body p,
html[lang="ar"] body li,
html[lang="ar"] body .card-text,
html[lang="ar"] body .section-text {
  line-height: 1.9;
}

/* ---------- Generic RTL flips ---------- */
/* Bullet / numbered lists start from the right */
html[lang="ar"] ul,
html[lang="ar"] ol {
  padding-right: 0;
}

/* Horizontal "next/forward" arrows point right in LTR; mirror them for RTL
   so they point left (the reading-forward direction). Vertical arrows
   (arrow-down/up) are left untouched. */
html[lang="ar"] img[src*="arrow-right"],
html[lang="ar"] img[src*="arrow-left"] {
  transform: scaleX(-1);
}

/* Keep numeric stats / prices left-to-right so units don't reverse
   (e.g. "$30.5M+" must not render as "+M30.5$", "5%" not "%5"). */
html[lang="ar"] .number-diy,
html[lang="ar"] .super-gainers-info h3 {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- Language switcher (mirror the dropdown to the left edge) ---------- */
html[lang="ar"] .lang-menu {
  right: auto;
  left: 0;
}

/* ---------- Header / nav ---------- */
html[lang="ar"] .header-extra {
  margin-right: auto;
  margin-left: 0;
}

/* ---------- Footer / social ---------- */
html[lang="ar"] .crypto-social-list {
  direction: rtl;
}

/* ---------- Forms / inputs ---------- */
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
  text-align: right;
  direction: rtl;
}

/* Latin runs (brand, code, prices) inside Arabic text stay LTR & readable */
html[lang="ar"] .ltr,
html[lang="ar"] bdi,
html[lang="ar"] code {
  direction: ltr;
  unicode-bidi: isolate;
}

/* =========================================================
   Arabic typographic scale
   ---------------------------------------------------------
   Noto Kufi Arabic has a larger apparent size and heavier
   colour than the Latin display faces (Quantico / DM Sans)
   the layout was tuned for. At the original pixel sizes the
   headings — the hero especially — overflow and shout. Dial
   the big display text down and soften heading weight.
   clamp() values are fluid so a single rule covers every
   breakpoint (higher specificity than responsive.css, so
   they win everywhere) without re-declaring each media query.
   ========================================================= */

/* Soften heading weight — Kufi 700 reads as heavy as Quantico 800 */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-weight: 600;
}

/* Generic heading sizes (down from 60 / 40 / 30 px) */
html[lang="ar"] h1 {
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.3;
}
html[lang="ar"] h2 {
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.35;
}
html[lang="ar"] h3 {
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.4;
}

/* Hero heading — 100px LTR is overwhelming in Kufi (home + account types) */
html[lang="ar"] .crypto-token-banner-text h1 {
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 1.3;
  margin-bottom: 30px;
}
html[lang="ar"] .crypto-token-banner-text p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 40px;
}

/* Rotating "Deposit & Relax" headline — 70px LTR */
html[lang="ar"] .banner-video-card h2 {
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.3;
}

/* "How it works" step headings — 50px LTR */
html[lang="ar"] .crypto-token-features-text h2 {
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.3;
}

/* Partners + FAQ section titles — 60px LTR */
html[lang="ar"] .crypto-token-partners .partners-title {
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.35;
}

/* Centre section titles (about-us hero, "Regulations & Licences", etc.) */
html[lang="ar"] .section-title .title {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.4;
}

/* ---------- Primary navigation (menu font was too large) ---------- */
html[lang="ar"] .main-menu {
  gap: 24px;
}
html[lang="ar"] .main-menu li a {
  font-size: 15px;
  font-weight: 500;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* Off-canvas mobile menu links */
html[lang="ar"] .mobile-navbar-menu .nav-menu > li > a {
  font-size: 16px;
  font-weight: 500;
}

/* =========================================================
   Language switcher — cleaner, more intentional in Arabic
   ========================================================= */
/* Toggle: keep the "AR" label in a Latin face and tighten it */
html[lang="ar"] .lang-toggle {
  gap: 7px;
  padding: 7px 14px;
}
html[lang="ar"] .lang-current-label {
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  line-height: 1;
}

/* Dropdown panel: mirror to the left edge, a touch roomier */
html[lang="ar"] .lang-menu {
  right: auto;
  left: 0;
  min-width: 170px;
  padding: 7px;
  direction: rtl;
}
html[lang="ar"] .lang-menu li a {
  text-align: right;
  font-size: 15px;
  padding: 10px 14px !important;
}
/* Each language name in its own script for a polished look */
html[lang="ar"] .lang-menu li a[lang="en"] {
  font-family: "DM Sans", sans-serif !important;
}
html[lang="ar"] .lang-menu li a[lang="ar"] {
  font-family: "Noto Kufi Arabic", sans-serif !important;
}