/* RTL (Right-to-Left) Layout Overrides, Arabic (ar), Urdu (ur)
 *
 * After Phase 2.4 most horizontal-axis rules in style.css use CSS
 * Logical Properties (margin-inline-*, padding-inline-*, inset-inline-*,
 * border-inline-*, text-align: start/end), which the browser flips
 * automatically when `dir="rtl"` is on the document. The leftover work
 * here is for things logical properties do NOT auto-flip:
 *
 *   - flex-direction (Flexbox order is independent of `direction`)
 *   - explicit `direction: rtl` on containers whose children's visual
 *     order needs the bidi algorithm applied (grids, scroll snap)
 *   - script-specific tweaks (Arabic letter-spacing)
 */

[dir="rtl"] {
  direction: rtl;
}

/* --- Header --- */
[dir="rtl"] .site-header,
[dir="rtl"] .header-nav {
  flex-direction: row-reverse;
}

/* --- Type Selector --- */
[dir="rtl"] .type-selector,
[dir="rtl"] .type-categories,
[dir="rtl"] .panel-tabs,
[dir="rtl"] .mode-toggle,
[dir="rtl"] .template-grid {
  direction: rtl;
}

/* --- Color rows + export buttons (flex containers) --- */
[dir="rtl"] .color-row,
[dir="rtl"] .color-input-wrap {
  flex-direction: row-reverse;
}
[dir="rtl"] .export-buttons,
[dir="rtl"] .scanner-btns,
[dir="rtl"] .scanner-result-actions,
[dir="rtl"] .crop-actions {
  direction: rtl;
}

/* --- Generator + footer layout --- */
[dir="rtl"] .generator-layout,
[dir="rtl"] .footer-inner,
[dir="rtl"] .type-links-grid,
[dir="rtl"] .footer-type-grid {
  direction: rtl;
}
[dir="rtl"] .footer-links {
  flex-direction: row-reverse;
}

/* --- Sign CTA --- */
[dir="rtl"] .sign-cta-body {
  direction: rtl;
}
[dir="rtl"] .sign-features li {
  flex-direction: row-reverse;
}

/* --- Shortcuts (keep keyboard combos LTR; the symbols don't reverse) --- */
[dir="rtl"] .shortcut-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .shortcut-row kbd {
  direction: ltr;
}

/* --- Checkbox labels --- */
[dir="rtl"] .checkbox-label {
  direction: rtl;
}

/* --- Arabic script letter-spacing tune --- */
[dir="rtl"] body {
  letter-spacing: 0;
}