/* ============================================================
   RAprime — RTL / Arabic polish layer
   Loaded AFTER ../css/main.css on Arabic pages (html[dir="rtl"]).
   main.css already mirrors the layout for dir="rtl"; this file only
   refines Arabic typography and keeps Latin numerals/symbols tidy.
   ============================================================ */

/* Latin letter-spacing hurts Arabic letter-joining — neutralise it on
   text that becomes Arabic, while leaving the layout to main.css. */
html[dir="rtl"] body,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-sub,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .btn,
html[dir="rtl"] .bonus-title,
html[dir="rtl"] .step-title,
html[dir="rtl"] .platform-name,
html[dir="rtl"] .course-title,
html[dir="rtl"] .testi-quote,
html[dir="rtl"] .stat-label,
html[dir="rtl"] h1, html[dir="rtl"] h2,
html[dir="rtl"] h3, html[dir="rtl"] h4 { letter-spacing: normal; }

/* Slightly more line-height for comfortable Arabic reading */
html[dir="rtl"] .section-sub,
html[dir="rtl"] .hero-content p,
html[dir="rtl"] .bonus-desc,
html[dir="rtl"] .step-desc,
html[dir="rtl"] .testi-quote,
html[dir="rtl"] .warning-block span,
html[dir="rtl"] .f-brand-block p { line-height: 1.9; }

/* Keep numbers, prices, codes and Latin symbols left-to-right */
html[dir="rtl"] .market-ticker,
html[dir="rtl"] .price,
html[dir="rtl"] .pkg-price,
html[dir="rtl"] .pkg-spread,
html[dir="rtl"] .stat-num,
html[dir="rtl"] .hf-price,
html[dir="rtl"] .prod-price .val,
html[dir="rtl"] .tp-score,
html[dir="rtl"] .lic-row .v,
html[dir="rtl"] .bonus-coupon-amt,
html[dir="rtl"] .bonus-amount { direction: ltr; unicode-bidi: isolate; }

/* ============================================================
   RTL HEADER + DRAWER FIXES
   The header (index-modern-3d.css) uses PHYSICAL margins and a
   transform that don't flip for Arabic. Correct them here.
   ============================================================ */

/* 1) Dock the actions group (login / open-account / burger) to the
      LEFT edge in RTL. Source uses margin-left:auto (pushes right in
      LTR); mirror it so the group sits at the start (left) in RTL.   */
html[dir="rtl"] .header .nav-actions{
  margin-left: 0;
  margin-right: auto;
}

/* Keep the desktop nav links flowing from the right correctly too. */
html[dir="rtl"] .header .nav-list{
  margin: 0 8px 0 auto;
}

/* 2) Mobile drawer must slide in from the LEFT in RTL.
      main.css sets `html[dir="rtl"] .drawer { transform: translateX(-100%) }`
      at a higher specificity than `.drawer.show`, so the drawer could
      never reach the screen. Re-assert the open state here.          */
html[dir="rtl"] .drawer{
  right: auto;
  left: 0;
  transform: translateX(-100%);
}
html[dir="rtl"] .drawer.show{
  transform: translateX(0);
}

/* 3) Mirror drawer content padding / alignment for Arabic. */
html[dir="rtl"] .drawer .m-link{ text-align: right; }
html[dir="rtl"] .drawer .m-sub{ padding-left: 0; padding-right: 12px; }