/* ════════════════════════════════════════════════════════════════
   Kawkav landing — RTL adjustments
   Loaded on every landing page. Active only when <html dir="rtl">.
   Source declarations in the page <style> blocks use physical props
   (margin-left, padding-right, text-align: left). We flip them here.
   ════════════════════════════════════════════════════════════════ */

[dir="rtl"] body {
  font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', 'Inter', system-ui, -apple-system, sans-serif;
}

/* Code, pre, terminal-like things stay LTR */
[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] .code,
[dir="rtl"] .terminal,
[dir="rtl"] .mono,
[dir="rtl"] [class*="code-"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: embed;
}

/* Arrow flipping — forward arrows (→) become ← in RTL */
[dir="rtl"] .nav-cta::after,
[dir="rtl"] .cta::after,
[dir="rtl"] .btn-primary::after,
[dir="rtl"] .footer-link::after { transform: scaleX(-1); display: inline-block; }

/* Replace literal → arrows that appear as text — handled by inline-block scaleX trick on common targets */
[dir="rtl"] .nav-cta,
[dir="rtl"] .cta,
[dir="rtl"] .hero-cta,
[dir="rtl"] .btn,
[dir="rtl"] [class*="cta"] { unicode-bidi: plaintext; }

/* Nav: flip the order of logo / links / actions */
[dir="rtl"] .nav-inner,
[dir="rtl"] .top .nav-inner { flex-direction: row-reverse; }
[dir="rtl"] .nav-links { flex-direction: row-reverse; }

/* Hero, sections: flex/grid stay; text-align goes right */
[dir="rtl"] .hero,
[dir="rtl"] .hero-content,
[dir="rtl"] .section-head,
[dir="rtl"] .card,
[dir="rtl"] .feature,
[dir="rtl"] .footer-col,
[dir="rtl"] .footer-brand { text-align: right; }

/* Lists with bullets / arrows on the left → flip */
[dir="rtl"] ul:not([class]),
[dir="rtl"] ol:not([class]) { padding-right: 1.5rem; padding-left: 0; }

/* Form inputs: text-align right */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="search"],
[dir="rtl"] textarea {
  text-align: right;
}
/* But fields that hold LTR data (URLs, codes) stay LTR */
[dir="rtl"] input[name="domain"],
[dir="rtl"] input.ltr,
[dir="rtl"] input[type="url"] { direction: ltr; text-align: left; }

/* Tables of pricing — first column (label) right-aligned, prices LTR */
[dir="rtl"] table th,
[dir="rtl"] table td { text-align: right; }
[dir="rtl"] table .price,
[dir="rtl"] table .amount,
[dir="rtl"] td.price { direction: ltr; text-align: left; }

/* Margin/padding-left/right inversion via logical properties for common
   utility classes that would otherwise look mirrored-broken */
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

/* Brand / logo / dot orientation: keep logo LTR (Latin script) */
[dir="rtl"] .logo,
[dir="rtl"] .logo .dot,
[dir="rtl"] .footer-brand .logo { direction: ltr; unicode-bidi: embed; }

/* Currency tags appearing inside translated runs — keep LTR */
[dir="rtl"] .price,
[dir="rtl"] .amount,
[dir="rtl"] .price-tag { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* Icons typically positioned absolutely on left → swap to right */
[dir="rtl"] .ico-left { left: auto; right: 0; }
[dir="rtl"] .ico-right { right: auto; left: 0; }

/* Suggestion banner already uses inset-inline-end — works automatically */

/* Mobile menu slide direction */
[dir="rtl"] .mobile-menu,
[dir="rtl"] .nav-mobile { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .mobile-menu.open,
[dir="rtl"] .nav-mobile.open { transform: translateX(0); }

/* Generic gradient text — keep its visual gradient but mirror not needed */
[dir="rtl"] .gradient { display: inline; }
