/* Arabic main — RTL overlay on top of the shared es base. */
@import url("/assets/css/es/main.css");

/* ── RTL fixes ─────────────────────────────────────────────────── */
[dir="rtl"] .main {
  direction: rtl;
}

/* Breadcrumb: reverse separator orientation cleanly. The string "/" is
   rendered as-is, but margin-inline-* lets the slash sit on the leading
   side of the next item regardless of direction. */
[dir="rtl"] .breadcrumb {
  text-align: right;
}

/* CTA row keeps row layout but reading order flips naturally. */
[dir="rtl"] .cta-row {
  flex-direction: row;
}

/* Comparison tables: head/body cells should align to start in RTL. */
[dir="rtl"] .compare-table th,
[dir="rtl"] .compare-table td {
  text-align: right;
}

/* Lists: keep markers on the leading (right) side. */
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-inline-start: 1.4em;
  padding-inline-end: 0;
}

/* Cards / context-links read from right to left; nothing else to flip
   if the underlying base uses flex/grid without left/right hardcoding. */
[dir="rtl"] .context-links a,
[dir="rtl"] .card {
  text-align: right;
}

/* Latin-script brand names, codes, and English words inside Arabic prose
   should retain their LTR direction so they don't visually mirror. */
[dir="rtl"] .latin,
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] [lang="en"] {
  unicode-bidi: isolate;
  direction: ltr;
}