/* =====================================================================
   rtl.css — RTL override layer for the Arabic (sa.btsfxpro) build.
   Loaded LAST, only on pages that set $is_rtl (home + bonus).
   dir="rtl" + bootstrap.rtl.min.css flip the bulk (grid, text-start/end,
   me-*/ms-*, flex order, table cell order, list bullets). This file
   mirrors the hand-written directional rules in custom.css that those
   layers do not reach. html[dir="rtl"] prefix raises specificity to win
   over custom.css.
   ===================================================================== */

/* ---- Global typography (Arabic) ---- */
html[dir="rtl"] body {
  font-family: 'Cairo', 'Sora', sans-serif;
  line-height: 1.7;
}
/* Keep brand/latin tokens (BTS FX PRO, MT5, numbers) rendering LTR inline */
html[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---- Hero ---- */
html[dir="rtl"] .hero-content-silver .section-title { text-align: right; }

/* ---- 5-step strip: image sits beside text (flex) ---- */
html[dir="rtl"] .step-img-new { margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .hero-info-content.box-align .steps-sec h3,
html[dir="rtl"] .hero-info-content.box-align .steps-sec h1 { text-align: right; }

/* ---- Account comparison table: feature column is the start (right) col ---- */
html[dir="rtl"] .acct-td-feature,
html[dir="rtl"] .acct-th-feature { text-align: right; }

/* ---- 3 account cards: value column + featured tag + meta ---- */
html[dir="rtl"] .account-row .row-value { text-align: left; }
html[dir="rtl"] .featured-tag { right: auto; left: 20px; }

/* ---- About blocks: the MetaTrader phone image is absolutely offset ---- */
html[dir="rtl"] .about-us .mt5-images img[style] {
  right: auto !important;
  left: -20px !important;
}
/* MetaTrader intro container has asymmetric inline left-padding (85px) */
html[dir="rtl"] .about-us .container.def-color-1[style] {
  padding-left: 25px !important;
  padding-right: 85px !important;
}

/* ---- FAQ accordion: chevron + heading padding move to the left edge ---- */
html[dir="rtl"] .faq-accordion .accordion-header .accordion-button {
  padding-right: 0;
  padding-left: 45px;
  text-align: right;
}
html[dir="rtl"] .faq-accordion .accordion-item .accordion-button::after,
html[dir="rtl"] .faq-accordion .accordion-item .accordion-button.collapsed::after {
  right: auto;
  left: 0;
}
html[dir="rtl"] .faq-accordion .accordion-body { text-align: right; }

/* ---- Footer contact rows: icon sits at the right, text to its left ---- */
html[dir="rtl"] .footer-contact-item .icon-box-11 {
  margin-right: 0;
  margin-left: 15px;
}
html[dir="rtl"] .footer-contact-content,
html[dir="rtl"] .footer-newsletter-form,
html[dir="rtl"] .footer-header .section-title { text-align: right; }
html[dir="rtl"] .footer-social-links ul li { margin-right: 0; margin-left: 10px; }

/* ---- Telegram floating button: bottom-left (LTR) -> bottom-right (RTL) ---- */
html[dir="rtl"] .floating_btn { left: auto; right: 30px; }

/* ---- Responsive: keep accordion left-padding on smaller screens ---- */
@media (max-width: 991px) {
  html[dir="rtl"] .faq-accordion .accordion-header .accordion-button {
    padding-right: 0;
    padding-left: 40px;
  }
}