/* ============================================================
   RTL overrides — scoped under [dir="rtl"] / [lang="ar"] so they
   ONLY apply when the page is Arabic. Safe to load on every page.

   Important: with dir="rtl" the browser already lays out flex rows
   and grids right-to-left. Do NOT add `flex-direction: row-reverse`
   here — that flips them a second time, back to LTR order. Only
   physical things (left/right offsets, text-align: left, directional
   icons) need overriding.
   ============================================================ */

/* Cairo is loaded with <link> in the page <head> (Arabic pages only); Poppins is self-hosted */

/* Poppins has no Arabic glyphs — use Cairo, keep Poppins for Latin text */
[lang="ar"] body,
[lang="ar"] button,
[lang="ar"] input,
[lang="ar"] textarea,
[lang="ar"] select { font-family: 'Cairo', 'Poppins', sans-serif; }

[dir="rtl"] body { text-align: right; }

/* Directional icons (breadcrumb chevrons, hero arrows, "View All", back
   links) point the other way in Arabic. Swap the glyph via Font Awesome 7's
   --fa variable (more reliable than transform on tiny fa-xs flex items). */
[dir="rtl"] .fa-chevron-right { --fa: "\f053"; }
[dir="rtl"] .fa-chevron-left  { --fa: "\f054"; }
[dir="rtl"] .fa-arrow-right   { --fa: "\f060"; }
[dir="rtl"] .fa-arrow-left    { --fa: "\f061"; }

/* Hero slider: home.css uses logical properties, so it mirrors itself —
   only the diagonal clip-path needs an RTL variant (kept next to it there). */

/* Absolutely positioned bits that are pinned to one side */
[dir="rtl"] .lang-dropdown-menu { right: auto; left: 0; }
[dir="rtl"] .nav-badge { right: auto; left: -5px; }
[dir="rtl"] .wishlist-form { right: auto; left: 10px; }
[dir="rtl"] .product-badge { left: auto; right: 12px; }
[dir="rtl"] .address-default-badge { right: auto; left: 14px; }
[dir="rtl"] .toast-container { right: auto; left: 28px; }
[dir="rtl"] .toast { border-left: none; border-right: 4px solid var(--accent); }
[dir="rtl"] .scroll-top { left: auto; right: 28px; }
[dir="rtl"] .sidebar { right: auto; left: -460px; }
[dir="rtl"] .sidebar.open { left: 0; }

/* Spacing that was written with physical left/right */
[dir="rtl"] .mobile-menu .mobile-sub { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .footer-col ul a:hover { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .product-stars span { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .account-nav-logout { text-align: right; }
[dir="rtl"] .account-table th { text-align: right; }
@media (max-width: 600px) {
  [dir="rtl"] .cpi-qty, [dir="rtl"] .cpi-price, [dir="rtl"] .cpi-remove { margin-left: 0; margin-right: 84px; }
}

/* About page */
[dir="rtl"] .sb1 { right: auto; left: -20px; }
[dir="rtl"] .sb2 { left: auto; right: -20px; }
[dir="rtl"] .chairman-card { border-left: none; border-right: 5px solid var(--brand); }
[dir="rtl"] .modal-close, [dir="rtl"] .promo-popup-close { right: auto; left: 12px; }

/* Search pill inside the page hero */
[dir="rtl"] .product-search-form { padding: 6px 20px 6px 6px; }