/* ============================================================
   RTL OVERRIDE LAYER  —  Egypt / Arabic (ar)
   Loaded LAST (after custom.css). Mirrors the hand-written LTR
   directional rules in custom.css that Bootstrap's RTL build and
   dir="rtl" cannot auto-flip.
   Everything is scoped under [dir="rtl"] so it (a) only applies in
   Arabic and (b) gains specificity over single-class base rules —
   needed for .floating_btn, whose base rule lives in a later inline
   <style> in footer.php.
   ============================================================ */

/* ── HERO: checklist bullets ─────────────────────────────── */
[dir="rtl"] .hero-list ul li {
  padding-left: 0;
  padding-right: 30px;
}
[dir="rtl"] .hero-list ul li::before {
  left: auto;
  right: 0;
}

/* ── Generic section button alignment ────────────────────── */
[dir="rtl"] .section-btn { text-align: left; }
[dir="rtl"] .section-content-btn .section-btn { text-align: right; }

/* ── "What Makes Us Different" feature cards (.icon-box) ──── */
/* Flex row reverses automatically under dir=rtl (icon → right side),
   so push the gutter toward the content (left) and mirror the
   organically-curved corners to the left edge. */
[dir="rtl"] .market-card .icon-box,
[dir="rtl"] .icon-box {
  margin-right: 0;
  margin-left: 22px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}

/* ── Account comparison table (.acct-tbl) ────────────────── */
/* Column order reverses automatically; move the column separators
   to the mirrored edge. */
[dir="rtl"] .acct-td-std,
[dir="rtl"] .acct-td-raw {
  border-left: none;
  border-right: 1px solid rgba(255,255,255,0.04);
}
[dir="rtl"] .acct-td-raw {
  border-right: 1px solid rgba(235,30,43,0.18);
}

/* ── Markets grid cards (.market-card accent bar) ────────── */
[dir="rtl"] .markets-cards .market-card {
  border-left: none;
  border-right: 4px solid #eb1e2b;
}

/* ── 3 Account cards: value column ───────────────────────── */
/* label (start) + value (end): flex reverses, value lands on the
   left, so align its text to the left (the RTL "end"). */
[dir="rtl"] .row-value { text-align: left; }

/* ── 3-Steps section ─────────────────────────────────────── */
[dir="rtl"] .step-img-new {
  margin-right: 0;
  margin-left: 20px;
}
[dir="rtl"] .border-steps {
  border-right: none;
  border-left: 1px solid #fff;
}

/* ── Footer contact rows (icon ↔ text) ───────────────────── */
[dir="rtl"] .footer-contact-item .icon-box-11 {
  margin-right: 0;
  margin-left: 15px;
}

/* ── Telegram floating action button → bottom-right corner ─ */
/* Base rule (left:30px) lives in a later inline <style>; the
   [dir="rtl"] prefix wins on specificity regardless of source order. */
[dir="rtl"] .floating_btn {
  left: auto;
  right: 30px;
}