/* RTL companion for the Arabic mirror page. Loaded after ../styles.css.
   The page sets dir="rtl"; flex rows mirror automatically. This file only
   fixes explicit left-aligned surfaces, the close button, font families
   (Inter/Lora have no Arabic glyphs), and bidi isolation for codes. */

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

.pricing-card,
.faq-question,
.faq-answer,
.tutorial-step-card,
.demo-info,
.step-visual figcaption,
details {
  text-align: right;
}

.modal-close-btn {
  right: auto;
  left: 20px;
}

.rip-val,
code,
.taste-counter,
.anki-prompt,
.anki-back,
.anki-example,
.anki-audio,
.anki-grade i,
[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

.taste-tabs-bar,
.platform-tabs-bar,
.level-pills {
  direction: rtl;
}

.tutorial-step-card {
  padding: 0 52px 28px 0;
}

.tutorial-step-card::before {
  left: auto;
  right: 16px;
}

.step-badge {
  left: auto;
  right: 0;
}

.rail-row {
  direction: rtl;
}

[dir="rtl"] .plan-pills,
[dir="rtl"] .plan-custom-date-wrap,
[dir="rtl"] .milestones-track {
  direction: rtl;
}