/* ===================================================================
   css/rtl.css — right-to-left layout for the Arabic and Persian site
   -------------------------------------------------------------------
   Loaded by includes/i18n.php on /ar/ and /fa/ pages only, after the
   site's own stylesheet. Everything is scoped to html[dir="rtl"], so
   the English site is untouched.

   Flexbox and grid mirror themselves under dir="rtl" for free. What
   does not mirror is anything positioned or padded with an explicit
   left/right — badges on the car cards, the lightbox arrows, the
   select-box chevron, the text-align utilities, the space-x gaps.
   Those are flipped here in plain CSS, because css/tailwind.css is a
   purged build and cannot be handed new utility classes without
   `npm run build`.
   =================================================================== */

/* ---- Typography ---------------------------------------------------
   Archivo and Inter have no Arabic glyphs. Tajawal (Arabic) and
   Vazirmatn (Persian) are loaded by i18n.php; the fallbacks are the
   system Arabic fonts on Windows, macOS, iOS and Android. */
html[dir="rtl"] body,
html[dir="rtl"] .font-sans,
html[dir="rtl"] .font-display,
html[dir="rtl"] .font-admin,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
    font-family: 'Tajawal', 'Vazirmatn', 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Noto Naskh Arabic', system-ui, sans-serif;
}
html[lang="fa"] body,
html[lang="fa"] .font-sans,
html[lang="fa"] .font-display,
html[lang="fa"] .font-admin,
html[lang="fa"] input,
html[lang="fa"] select,
html[lang="fa"] textarea,
html[lang="fa"] button {
    font-family: 'Vazirmatn', 'Tajawal', 'Segoe UI', Tahoma, 'Noto Sans Arabic', system-ui, sans-serif;
}

/* Letter-spacing is a Latin idea: on joined Arabic script it pulls the
   letters apart. Every tracking utility and the custom eyebrow labels
   go back to normal. Uppercase has no meaning either. */
html[dir="rtl"] [class*="tracking-"],
html[dir="rtl"] .bl-eyebrow,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .cr-eyebrow,
html[dir="rtl"] .lp-eyebrow { letter-spacing: 0 !important; }
html[dir="rtl"] .uppercase { text-transform: none; }

/* Arabic display type sits a little larger for the same visual weight,
   and headings need slightly more line height for the ascenders. */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { line-height: 1.3; }
html[dir="rtl"] .leading-tight { line-height: 1.25; }
html[dir="rtl"] .leading-none  { line-height: 1.15; }

/* Numbers, prices, phone numbers, car names and the address stay
   left-to-right inside the right-to-left line, so "+971 50 512 2497"
   is not reversed and "350 AED" keeps its order. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .tabular-nums,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] code,
html[dir="rtl"] .money,
html[dir="rtl"] [data-ltr] {
    direction: ltr;
    unicode-bidi: isolate;
}
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"] { text-align: right; }

/* Menu labels and phone numbers never wrap, whatever the language's word length. */
html[dir="rtl"] .nav-link,
html[dir="rtl"] a[href^="tel:"] { white-space: nowrap; }

/* ---- Text alignment utilities ---- */
html[dir="rtl"] .text-left  { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }
html[dir="rtl"] th.text-right, html[dir="rtl"] td.text-right { text-align: left; }
html[dir="rtl"] th.text-center, html[dir="rtl"] td.text-center { text-align: center; }

/* ---- Margins and paddings that name a side ---- */
html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
html[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
html[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
@media (min-width: 640px) {
    html[dir="rtl"] .sm\:ml-2 { margin-left: 0; margin-right: 0.5rem; }
}
html[dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; }
html[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
html[dir="rtl"] .pr-8 { padding-right: 0; padding-left: 2rem; }
html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
html[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; }
html[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }
html[dir="rtl"] .pr-10 { padding-right: 0; padding-left: 2.5rem; }
html[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; }
html[dir="rtl"] .pr-12 { padding-right: 0; padding-left: 3rem; }
html[dir="rtl"] .pl-12 { padding-left: 0; padding-right: 3rem; }

/* Tailwind's space-x-* puts the gap on the left of every child after the
   first; --tw-space-x-reverse moves it to the right. */
html[dir="rtl"] [class*="space-x-"] > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
html[dir="rtl"] .divide-x > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .md\:divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; }

/* ---- Absolute positioning that names a side ---- */
html[dir="rtl"] .left-0:not(.right-0)  { left: auto; right: 0; }
html[dir="rtl"] .right-0:not(.left-0)  { right: auto; left: 0; }
html[dir="rtl"] .left-2  { left: auto; right: 0.5rem; }
html[dir="rtl"] .right-2 { right: auto; left: 0.5rem; }
html[dir="rtl"] .right-2\.5 { right: auto; left: 0.625rem; }
html[dir="rtl"] .left-4  { left: auto; right: 1rem; }
html[dir="rtl"] .right-4 { right: auto; left: 1rem; }
html[dir="rtl"] .left-6  { left: auto; right: 1.5rem; }
html[dir="rtl"] .right-6 { right: auto; left: 1.5rem; }
html[dir="rtl"] .left-1\/2 { left: auto; right: 50%; }
html[dir="rtl"] .-translate-x-1\/2 { --tw-translate-x: 50%; }
@media (min-width: 640px) {
    html[dir="rtl"] .sm\:left-3  { left: auto; right: 0.75rem; }
    html[dir="rtl"] .sm\:right-3 { right: auto; left: 0.75rem; }
    html[dir="rtl"] .sm\:left-6  { left: auto; right: 1.5rem; }
    html[dir="rtl"] .sm\:right-6 { right: auto; left: 1.5rem; }
    html[dir="rtl"] .sm\:left-7  { left: auto; right: 1.75rem; }
    html[dir="rtl"] .sm\:right-7 { right: auto; left: 1.75rem; }
}
/* A box stretched across with both left-0 and right-0 is symmetric already. */
html[dir="rtl"] .left-0.right-0,
html[dir="rtl"] .inset-x-0 { left: 0; right: 0; }
/* Same for the card header that sits at left-6 right-6. */
html[dir="rtl"] .left-6.right-6 { left: 1.5rem; right: 1.5rem; }

/* ---- Rounded corners and borders that name a side ---- */
html[dir="rtl"] .border-r { border-right-width: 0; border-left-width: 1px; }
html[dir="rtl"] .border-l { border-left-width: 0; border-right-width: 1px; }
html[dir="rtl"] .rounded-l-lg { border-radius: 0 0.5rem 0.5rem 0; }
html[dir="rtl"] .rounded-r-lg { border-radius: 0.5rem 0 0 0.5rem; }
html[dir="rtl"] .rounded-l-xl { border-radius: 0 0.75rem 0.75rem 0; }
html[dir="rtl"] .rounded-r-xl { border-radius: 0.75rem 0 0 0.75rem; }
html[dir="rtl"] .rounded-l-full { border-radius: 0 9999px 9999px 0; }
html[dir="rtl"] .rounded-r-full { border-radius: 9999px 0 0 9999px; }

/* ---- Arrows -------------------------------------------------------
   "See every vehicle →" is written with a → in the dictionary already
   flipped to ←. The hover nudge should go the same way. */
html[dir="rtl"] .group:hover .group-hover\:translate-x-1 { --tw-translate-x: -0.25rem; }

/* Chevron and arrow icons drawn as SVG paths point left in RTL. */
html[dir="rtl"] svg[data-arrow],
html[dir="rtl"] .rtl-flip { transform: scaleX(-1) !important; }
html[dir="rtl"] .group:hover svg[data-arrow].group-hover\:translate-x-1 { transform: scaleX(-1) translateX(0.25rem) !important; }

/* ---- Select boxes: the chevron sits on the left in RTL ---- */
html[dir="rtl"] select {
    background-position: left 0.5rem center;
    padding-right: 0.75rem;
    padding-left: 2rem;
}

/* ---- The lightbox on the car page ---- */
html[dir="rtl"] #lightbox .absolute.left-2  { left: auto; right: 0.5rem; }
html[dir="rtl"] #lightbox .absolute.right-2 { right: auto; left: 0.5rem; }

/* ---- Blog article styling (css/blog.css) ---- */
html[dir="rtl"] .bl-prose blockquote,
html[dir="rtl"] .bl-toc,
html[dir="rtl"] .bl-callout {
    border-left: 0;
    border-right: 3px solid var(--bl-brass, #C89545);
    padding-left: 0;
    padding-right: 1.15rem;
}
html[dir="rtl"] .bl-prose ul,
html[dir="rtl"] .bl-prose ol { padding-left: 0; padding-right: 1.35rem; }
html[dir="rtl"] .bl-prose { text-align: right; }

/* ---- Landing pages (css/landing.css) ---- */
html[dir="rtl"] .lp-quote,
html[dir="rtl"] .lp-note { border-left: 0; border-right: 3px solid currentColor; }
html[dir="rtl"] .lp-list li { padding-left: 0; padding-right: 1.3em; }

/* ---- Lists ---- */
html[dir="rtl"] ul.list-disc,
html[dir="rtl"] ol.list-decimal { padding-left: 0; padding-right: 1.25rem; }
html[dir="rtl"] .list-inside { padding-right: 0; }

/* ---- Forms ---- */
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder { text-align: right; }
html[dir="rtl"] input[type="checkbox"],
html[dir="rtl"] input[type="radio"] { margin-left: 0.5rem; margin-right: 0; }

/* ---- The customer account shell ---- */
html[dir="rtl"] .dash-sidebar {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid #E5E7EB;
    transform: translateX(100%);
}
html[dir="rtl"] .dash-sidebar.is-open { transform: translateX(0); }
@media (min-width: 1024px) {
    html[dir="rtl"] .dash-sidebar { transform: none; }
}
html[dir="rtl"] .dash-nav-link { text-align: right; }
html[dir="rtl"] [data-user-menu].right-0 { right: auto; left: 0; }

/* ---- The floating WhatsApp button stays bottom-right on purpose; only
   the popup text inside it follows the page direction. ---- */
html[dir="rtl"] .wa-popup, html[dir="rtl"] .wa-widget__popup { text-align: right; }