/* The Arabic signals page (/ar/crypto-signals). Loaded after signals.css.
   Sets the typeface, opens up spacing for Arabic script, and keeps the
   things that must read left to right -- prices, levels, the moving strip --
   left to right inside an otherwise right-to-left page. */

:root { --sans: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; }

html[lang="ar"] body {
  font-family: var(--sans);
  line-height: 1.85;
}

/* Arabic joins its letters: tracking breaks the words apart. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .btn, html[lang="ar"] .brand,
html[lang="ar"] .sg-kicker, html[lang="ar"] .sg-plan__opt-name,
html[lang="ar"] .sg-plan__tag, html[lang="ar"] .sg-plan__head,
html[lang="ar"] .mres__tag, html[lang="ar"] .foot__head,
html[lang="ar"] .sg-step__n, html[lang="ar"] .trade__meta {
  letter-spacing: 0; text-transform: none;
}
html[lang="ar"] h1, html[lang="ar"] .h-display { line-height: 1.25; }
html[lang="ar"] h2, html[lang="ar"] .h-section { line-height: 1.35; }
html[lang="ar"] .sg-hero__lede, html[lang="ar"] .lede,
html[lang="ar"] .sg-step p, html[lang="ar"] .sg-faq__a,
html[lang="ar"] .mres__ctx, html[lang="ar"] .sg-plan__list li { line-height: 1.9; }

/* Numbers, pairs and price levels stay left to right. */
html[lang="ar"] .trade__pair, html[lang="ar"] .trade__res,
html[lang="ar"] .mres__fig, html[lang="ar"] .sg-plan__amt,
html[lang="ar"] .sg-step__n { direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] .trade__levels dd { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* Small labels were set for Latin capitals; Arabic needs more size to be read. */
html[lang="ar"] .sg-plan__head, html[lang="ar"] .sg-plan__opt-name,
html[lang="ar"] .sg-kicker, html[lang="ar"] .foot__head {
  font-family: var(--sans); font-size: 14px;
}
html[lang="ar"] .sg-plan__tag, html[lang="ar"] .mres__tag { font-family: var(--sans); font-size: 12.5px; }
html[lang="ar"] .trade__levels dt, html[lang="ar"] .trade__meta { font-size: 13px; }

/* The strip moves right to left on the screen no matter the page
   direction, so the row itself is laid out left to right and only the
   words in each card read right to left. */
html[lang="ar"] .mres-rail { direction: ltr; }
html[lang="ar"] .mres { direction: rtl; text-align: right; }
html[lang="ar"] .mres__tag { justify-self: start; }

/* The plan column: the check marks and the cards sit on the right. */
html[lang="ar"] .sg-plan__list li { text-align: right; }
html[lang="ar"] .sg-faq summary { text-align: right; }

/* Direction-carrying glyphs in the copy face the right way. */
html[lang="ar"] .sg-link { direction: rtl; }

/* Member messages: the card reads right to left, the figure stays left to right. */
html[lang="ar"] .tst { direction: rtl; text-align: right; }
html[lang="ar"] .tst__fig { direction: ltr; unicode-bidi: isolate; text-align: right; }
html[lang="ar"] .tst__ctx { font-size: 13.5px; line-height: 1.8; }
html[lang="ar"] .lightbox__close { right: auto; left: 18px; }


/* The platform window: the app inside it is left to right and stays that way;
   the words around it read right to left. */
html[lang="ar"] .sg-frame { direction: ltr; }
html[lang="ar"] .sg-tab { font-family: var(--sans); font-size: 15px; }
html[lang="ar"] .sg-show__panel p { line-height: 1.95; }
html[lang="ar"] .sg-show__note { font-size: 14.5px; }
html[lang="ar"] .sg-frame__live { letter-spacing: 0; }


/* Who runs the room: the words read right to left, the photo keeps its layout. */
html[lang="ar"] .sg-about { direction: rtl; }
html[lang="ar"] .sg-about__text p { line-height: 1.95; font-size: 16.5px; }
html[lang="ar"] .sg-about__role { font-family: var(--sans); letter-spacing: 0; font-size: 15px; }
html[lang="ar"] .sg-about__badge { left: auto; right: 14px; font-size: 13.5px; }
html[lang="ar"] .sg-about__mark { right: auto; left: 14px; }
html[lang="ar"] .sg-about__facts li { font-size: 14.5px; }
html[lang="ar"] .sg-frame__live { letter-spacing: 0; text-transform: none; font-size: 12.5px; }

/* The record row on a phone starts at the right edge and swipes leftwards. */
@media (max-width: 720px) {
  html[lang="ar"] .sg-record { direction: rtl; }
  html[lang="ar"] .sg-recarrow--prev { left: auto; right: 6px; }
  html[lang="ar"] .sg-recarrow--next { right: auto; left: 6px; }
}