/* ==========================================================================
   Right-to-left pages (Arabic: <html dir="rtl">). Loaded only there, after the
   page's other styles. Margins, paddings, borders and text alignment already
   follow the reading direction (they're written as logical sides, *-inline-start
   / *-inline-end, 27 Oct 2026); this file is what that can't do: things placed
   with left/right, and arrows that must point the other way.
   Slides keep their design whatever the page's language (as in the app).
   ========================================================================== */

/* Arrows and carets that mean "next", "open" or "go" point the other way */
[dir=rtl] .ic:has(use[href$="caret-right"]), [dir=rtl] .ic:has(use[href$="caret-left"]),
[dir=rtl] .ic:has(use[href$="arrow-right"]), [dir=rtl] .ic:has(use[href$="arrow-left"]),
[dir=rtl] .ic:has(use[href$="arrow-up-right"]),
[dir=rtl] :is(.ph-caret-right, .ph-caret-left, .ph-arrow-right, .ph-arrow-left, .ph-arrow-up-right) { scale: -1 1; }
[dir=rtl] :is(.link:hover .ic, .btn:hover .ic-arrow) { transform: translateX(-2px); }
/* ...except in a part still in English, which reads left to right (dir="ltr", e.g. the CTA's composer, 30 Oct 2026) */
[dir=rtl] [dir=ltr] .ic:has(use[href$="caret-right"]), [dir=rtl] [dir=ltr] .ic:has(use[href$="caret-left"]),
[dir=rtl] [dir=ltr] .ic:has(use[href$="arrow-right"]), [dir=rtl] [dir=ltr] .ic:has(use[href$="arrow-left"]),
[dir=rtl] [dir=ltr] .ic:has(use[href$="arrow-up-right"]) { scale: none; }

/* The skip link, the header's menus and the language menu open from the right */
[dir=rtl] :is(.skip, .lp .skip) { left: auto; right: 12px; }
[dir=rtl] .ft-skip { left: auto; right: -9999px; }
[dir=rtl] .ft-skip:focus { left: auto; right: 12px; }
[dir=rtl] :is(.mm, .lp .mm, .mm-panel, .lp .mm-panel, .ft-lang-menu, .lp .ft-lang-menu) { left: auto; right: 0; }

/* List bullets, numbers and step badges sit at the start of the line */
[dir=rtl] :is(.prose ul > li, .kb-key li, .lp .prose ul > li, .lp .kb-key li)::before { left: auto; right: .2em; }
[dir=rtl] :is(.prose ol > li, .lp .prose ol > li, .kb-sources li, .lp .kb-sources li)::before { left: auto; right: 0; }
[dir=rtl] :is(.kb-key, .lp .kb-key)::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
[dir=rtl] body.ft .ft-content > ul > li::before { left: auto; right: .25em; }
[dir=rtl] .ft-content .t-steps > li::before { left: auto; right: 0; }
[dir=rtl] body.ft .ft-content .t-steps > li::before { left: auto; right: 18px; }
@media (max-width: 760px) { [dir=rtl] body.ft .ft-content .t-steps > li::before { right: 14px; } }

/* Icons inside fields, badges and close buttons */
[dir=rtl] :is(.fin-form-ic, .lp .fin-form-ic) { left: auto; right: 17px; }
[dir=rtl] :is(.kb-try-form-ic, .lp .kb-try-form-ic) { left: auto; right: 15px; }
[dir=rtl] :is(.kb-hcard .badge, .lp .kb-hcard .badge) { right: auto; left: 14px; }
[dir=rtl] :is(body.ft .ftk-done-x) { right: auto; left: 14px; }
[dir=rtl] :is(body.ft .ftk-modal-x) { right: auto; left: 12px; }

/* FAQ: the open/close mark at the end of the question */
[dir=rtl] :is(.faq-item, .lp .faq-item) > summary::after { right: auto; left: 2px; }
@media (max-width: 760px) { [dir=rtl] :is(.faq-item, .lp .faq-item) > summary::after { left: 0; } }

/* Tables that scroll sideways keep their first column pinned at the start */
[dir=rtl] :is(.kb-compare, .lp .kb-compare) th:first-child { left: auto; right: 0; }
[dir=rtl] body.ft .lp .ft-vs tbody th { left: auto; right: -8px; }

/* Sizes, file names, addresses and handles read left to right inside Arabic text */
[dir=rtl] :is(input[type=url], input[type=email], code, kbd) { direction: ltr; unicode-bidi: isolate; }
/* What people type: each paragraph takes the direction of its own words */
[dir=rtl] :is(textarea, [contenteditable="true"]) { unicode-bidi: plaintext; }

/* Picture grids keep the left-to-right order of the English tools, so the numbered pieces, the files and
   the "newest at the top left" texts agree (a grid's order matters when you post a split picture) */
[dir=rtl] :is(.gs-cuts, .gk-grid, .gp-grid, .pp-fb-plan, .pp-fb-grid, .pp-th-plan) { direction: ltr; }

/* Marketing pages (1 Nov 2026): their stylesheets use logical sides now too. What still reads left to right:
   a phone's status bar (time, island, signal) */
[dir=rtl] .sty-sb { direction: ltr; }
/* the extension demo: the browser and its panel slide in from the other side */
[dir=rtl] .ext-win { transform: translateX(calc((var(--pw) + var(--gap)) / -2)); }
[dir=rtl] .ext-panel { transform: translateX(-36px); }
@container extscene (max-width: 859px) {
  [dir=rtl] .ext-win { transform: none; }
  [dir=rtl] .ext-panel { transform: translateY(104%); }
  [dir=rtl] .ext-scene[data-split] .ext-panel { transform: none; }
}
/* the LinkedIn banner designer: Arabic LinkedIn puts the profile photo over the banner's lower-right corner, so the
   photo spot and the room kept for it move to the right, and the words sit on the left (still reading from the right) */
[dir=rtl] .bnr-l-right .bnr-in { padding: 44px 520px 44px 80px; }
[dir=rtl] .bnr-l-right .bnr-in { text-align: start; }
[dir=rtl] .bnr-l-right .bnr-text { align-items: flex-start; }
[dir=rtl] .bnr-z.d { left: auto; right: 47px; }
[dir=rtl] .bnr-z.d em { left: auto; right: 40px; }
/* the free tools' scaled previews (banner, its theme cards, the quote card): they shrink from their start corner, which is the right one in Arabic */
[dir=rtl] :is(.bnr-scale, .bkq-scale) { transform-origin: 100% 0; }
/* prices: the rolling digits are one cell each, so in Arabic they ran right to left ("$39" read "93$"); the price reads as written, "$39" */
[dir=rtl] .pr-amt { direction: ltr; unicode-bidi: isolate; }