/* Arabic (RTL) overrides — loaded only when the page is in Arabic (see includes/i18n.php).
   <html dir="rtl"> already mirrors flex/grid order and text alignment; this file
   fixes the rules that were hard-coded to left/right, and swaps the Latin fonts
   for an Arabic one. Letter-spacing is removed because it breaks Arabic letter joining. */

html[dir="rtl"] { --font-head: 'Tajawal', Arial, sans-serif; --font-body: 'Tajawal', Arial, sans-serif; }
html[dir="rtl"] body,
html[dir="rtl"] body *:not(.lang-bar__opt) { font-family: 'Tajawal', Arial, sans-serif; letter-spacing: 0 !important; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }

/* off-screen skip link must hide to the right, or RTL pages gain a horizontal scrollbar */
html[dir="rtl"] .skip-link { left: auto; right: -999px; }
html[dir="rtl"] .skip-link:focus { right: 10px; }

/* arrows: keep the glyph unmirrored, then flip + swap sides so "previous" sits on the right */
html[dir="rtl"] .gallery-nav { direction: ltr; unicode-bidi: isolate; transform: translateY(-50%) scaleX(-1); }
html[dir="rtl"] .hero-nav-prev { left: auto; right: 16px; }
html[dir="rtl"] .hero-nav-next { right: auto; left: 16px; }
html[dir="rtl"] .gallery-nav-prev { left: auto; right: 12px; }
html[dir="rtl"] .gallery-nav-next { right: auto; left: 12px; }

/* header */
html[dir="rtl"] .topbar__left a { margin-right: 0; margin-left: 16px; }
html[dir="rtl"] .cart-badge { right: auto; left: -10px; }
html[dir="rtl"] .dropdown { left: auto; right: 0; }
html[dir="rtl"] .dropdown-toggle { direction: ltr; unicode-bidi: isolate; }

/* product cards, lightbox, quote list */
html[dir="rtl"] .product-card__badge { left: auto; right: 10px; }
html[dir="rtl"] .lightbox__close { right: auto; left: 30px; }
html[dir="rtl"] .cart-table th,
html[dir="rtl"] .cart-table td { text-align: right; }

/* footer + floating WhatsApp button (moves to the bottom-left) */
html[dir="rtl"] .footer-social a { margin-right: 0; margin-left: 14px; }
html[dir="rtl"] .whatsapp-fab { right: auto; left: 22px; }

@media (max-width: 720px) {
  html[dir="rtl"] .nav-close { right: auto; left: 16px; }
}