/* ==========================================================================
   RIGHT-TO-LEFT for the public form pages — login, signup, reset password.

   The SAME design, read the other way. Every rule is scoped to .sa-rtlpage,
   the wrapper Scale_AI_Page_I18n puts around an Arabic render, so the English
   pages are untouched byte for byte.

   There is very little here, and that is the point: those templates are built
   out of flex and grid, which already mirror themselves. What follows is the
   short list of places the design names a physical side, plus the fields whose
   CONTENT is not Arabic and must keep reading left to right.
   ========================================================================== */

.sa-rtlpage{direction:rtl;text-align:right}

/* Arabic is a connected script — the design's negative tracking is beautiful in
   Latin and pulls Arabic glyphs into each other. Sizes and weights are the
   design's; only the tracking is released. */
.sa-rtlpage h1,.sa-rtlpage h2,.sa-rtlpage h3,
.sa-rtlpage .lg-h1,.sa-rtlpage .sg-h1,.sa-rtlpage .rp-h1{letter-spacing:normal}

/* An email, a phone number and a password are not Arabic text. Typing one into
   a right-aligned field puts the caret and the @ in the wrong place, so these
   stay exactly as they are in English. */
.sa-rtlpage input[type="email"],
.sa-rtlpage input[type="password"],
.sa-rtlpage input[type="tel"],
.sa-rtlpage input[type="url"],
.sa-rtlpage input[type="number"]{direction:ltr;text-align:left}
.sa-rtlpage input[type="email"]::placeholder,
.sa-rtlpage input[type="password"]::placeholder,
.sa-rtlpage input[type="tel"]::placeholder{text-align:left}

/* Blocks the design left-aligns deliberately (the terms row, the mobile form,
   the reset checklist) point the other way rather than becoming centred. */
.sa-rtlpage .sg-form,
.sa-rtlpage .sg-terms,
.sa-rtlpage .rp-rules,
.sa-rtlpage [style*="text-align:left"]{text-align:right}

/* The dividers and offsets that name a side. The country-code select sits at
   the start of the phone row and its rule is on the element, not a class. */
.sa-rtlpage .sg-phone select{border-right:none;border-left:1px solid #F1F3F6;padding:0 12px 0 26px}

/* The decorative glows sit off one corner; mirrored they sit off the other. */
.sa-rtlpage .lg__glow,
.sa-rtlpage .sg__glow,
.sa-rtlpage .rp__glow,
.sa-rtlpage [class$="__glow"]{right:auto;left:-120px}

@media (max-width:768px){
    .sa-rtlpage .sg-planpill{margin-left:24px;margin-right:24px}
}

/* Marks that mean "forward" have to point the other way. Arrows only — a tick,
   a spinner or a warning triangle means the same thing in both directions. */
.sa-rtlpage .lg-submit__idle .li svg,
.sa-rtlpage .sg-submit .li svg,
.sa-rtlpage .rp-submit .li svg,
.sa-rtlpage .sa-btn .li svg{transform:scaleX(-1)}
.sa-rtlpage .lg-submit__loading .li svg,
.sa-rtlpage .sa-btn__spinner svg{transform:none}