/* Right to left (Arabic). Flex rows, grids and text already follow
   <html dir="rtl">; this turns round the rules the site's stylesheets write
   with left and right. Linked only on right-to-left pages (and the 404 page,
   which can become one), and every rule is scoped to [dir="rtl"]. Kept out
   of the HTML so the site's CSP can refuse inline styles. When a stylesheet
   gains a left or right, mirror it here. */

/* consent.css */
[dir="rtl"] .consent-actions { margin-left: 0; margin-right: auto; }

/* legal.css (also the Help Center, the guides and account deletion) */
[dir="rtl"] .legal-hero::after { right: auto; left: -150px; }
/* legal.css styles the plain lists only (a classed list, like the home
   page's .plan-features, writes its own padding), so these do too. */
[dir="rtl"] ul:not([class]) { padding-left: 0; padding-right: 22px; }
[dir="rtl"] ul:not([class]) > li,
[dir="rtl"] ol:not([class]) > li { padding-left: 0; padding-right: 3px; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] th + th, [dir="rtl"] td + td { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .legal-hero .legal-banner { border-left: 1px solid #DAD7FF; border-right: 4px solid var(--amber); }
[dir="rtl"] .legal-hero .legal-banner-current { border-right-color: var(--indigo); }
[dir="rtl"] .social { margin-right: 0; margin-left: -10px; }
[dir="rtl"] .social-handle { margin-right: 0; margin-left: 6px; }
@media (max-width: 680px) {
  [dir="rtl"] .social { margin-left: 0; margin-right: -10px; }
  [dir="rtl"] .social-handle { margin-left: 0; margin-right: 10px; }
}
@media (max-width: 620px) {
  [dir="rtl"] .legal-current { margin: 0 6px 0 0; }
}

/* pages.css (the comparisons) */
[dir="rtl"] .compare th + td { border-left: 0; border-right: 1px solid var(--line); }

/* support.css */
[dir="rtl"] .faq summary::after { float: left; }
[dir="rtl"] .faq ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .support-search { padding: 0 16px 0 2px; }

/* home.css */
[dir="rtl"] .hero::after { right: auto; left: -210px; }
[dir="rtl"] .floating-card.one { left: auto; right: -92px; transform: rotate(3deg); }
[dir="rtl"] .floating-card.two { right: auto; left: -58px; transform: rotate(-1deg); }
[dir="rtl"] .proof-item { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .proof-item:first-child { border-right: 0; }
[dir="rtl"] .day-end time { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .billing-toggle small { margin-left: 0; margin-right: 5px; }
[dir="rtl"] .plan-recommended { left: auto; right: 25px; }
[dir="rtl"] .privacy-card::after { right: auto; left: -100px; }
[dir="rtl"] .final-cta::before { left: auto; right: -90px; }
[dir="rtl"] .final-cta::after { right: auto; left: -80px; }
@media (max-width: 960px) {
  [dir="rtl"] .proof-item:nth-child(3) { border-right: 0; }
}
@media (max-width: 680px) {
  [dir="rtl"] .floating-card.one { left: auto; right: 4px; }
  [dir="rtl"] .floating-card.two { right: auto; left: 4px; }
  [dir="rtl"] .proof-item { border-right: 0; }
}

/* join.css (the invite and pairing pages) */
[dir="rtl"] .steps, [dir="rtl"] .note { text-align: right; }
[dir="rtl"] .steps { padding-left: 0; padding-right: 18px; }

/* Codes and prices read left to right inside Arabic text. */
[dir="rtl"] .code { direction: ltr; }
[dir="rtl"] .plan-amount, [dir="rtl"] .plan-free-amount { unicode-bidi: isolate; }
[dir="rtl"] .social-handle,
[dir="rtl"] .copyright { direction: ltr; unicode-bidi: isolate; }
