/* ============================================================
   Brovacap — Arabic / RTL overrides
   Loaded only by /ar/index.html (after style.css & classic-script.css)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

html[dir="rtl"],
html[dir="rtl"] body {
  direction: rtl;
}

html[dir="rtl"] body,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .lang-toggle,
html[dir="rtl"] .lang-menu {
  font-family: 'IBM Plex Sans Arabic', 'Poppins', sans-serif;
}

/* Keep Latin brand mark / system codes / prices upright and LTR */
html[dir="rtl"] .logo span,
html[dir="rtl"] .node-v3-price,
html[dir="rtl"] .stat-val,
html[dir="rtl"] .v4-val,
html[dir="rtl"] .v4-tag,
html[dir="rtl"] .metric-num,
html[dir="rtl"] .field-email,
html[dir="rtl"] .footer-right span,
html[dir="rtl"] .user-name,
html[dir="rtl"] .user-org {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Decorative / absolutely-positioned elements: mirror sides --- */
html[dir="rtl"] .logo::after {
  right: auto;
  left: -10px;
}

html[dir="rtl"] .flo-ui-left {
  left: auto;
  right: 2rem;
}

html[dir="rtl"] .bento-icon-floating {
  right: auto;
  left: 2rem;
}

html[dir="rtl"] .node-badge-v4 {
  right: auto;
  left: 1.2rem;
}

/* Feature list bullets: flex auto-reverses, keep dot tight to text */
html[dir="rtl"] .node-v3-features {
  padding-right: 0;
}

/* Keep the market-matrix carousel scrolling in the SAME direction as the
   other languages. The track is a flexbox, so without this the RTL main-axis
   would reverse the card order and flip the scroll/drag direction. Forcing the
   track + nav controls to LTR preserves identical scroll mechanics; the Arabic
   copy inside each card is re-asserted RTL below. */
html[dir="rtl"] .matrix-carousel-wrapper,
html[dir="rtl"] .matrix-v3-grid.carousel,
html[dir="rtl"] .carousel-navigation,
html[dir="rtl"] .carousel-meta-bar {
  direction: ltr;
}

/* Card content still reads right-to-left */
html[dir="rtl"] .matrix-v3-node {
  direction: rtl;
  text-align: right;
}

/* Arrows keep their natural direction: prev (left) / next (right),
   matching the unchanged scroll direction (no glyph mirroring). */

/* CTA "forward" arrow (.flo-btn::after) points the way reading flows.
   In RTL that's leftward, so swap the glyph to ← and nudge left on hover. */
html[dir="rtl"] .flo-btn::after {
  content: "\2190"; /* ← LEFTWARDS ARROW */
}

html[dir="rtl"] .flo-btn:hover::after {
  transform: translateY(-2px) translateX(-4px);
}

/* Numbers / labels that are intentionally LTR sequences */
html[dir="rtl"] .flo-number,
html[dir="rtl"] .node-v4-num,
html[dir="rtl"] .card-v2-tag {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Tooltip/hint blocks already centered — no change needed.
   Ensure standard section copy reads from the right. */
html[dir="rtl"] .section-desc-standard,
html[dir="rtl"] .bento-header-desc,
html[dir="rtl"] .card-v2-desc,
html[dir="rtl"] .card-v2-desc-small,
html[dir="rtl"] .node-quote {
  text-align: right;
}