/* Full RTL support (non-mirroring approach)
   - Avoid global mirroring (no scaleX) because it also mirrors text
     and breaks Arabic rendering.
   - Use logical properties and targeted overrides for common layout
     elements: navbar, dropdowns, mobile menu, footer, and utility
     helpers.
*/

/* Activate RTL rules only when page sets dir="rtl" */
html[dir="rtl"], body[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;
}

/* --- Text and form handling --- */
/* Ensure Arabic text displays naturally; do not flip text. */
html[dir="rtl"] body, html[dir="rtl"] .container {
  text-align: right;
}

/* For inputs that contain LTR content (emails, numbers) keep LTR */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] .ltr-input {
  direction: ltr;
  unicode-bidi: isolate-override;
}

/* Textareas and general text inputs default to RTL so Arabic flows
   naturally */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  direction: rtl;
}

/* --- Navbar & navigation --- */
/* html[dir="rtl"] .navbar-container { direction: rtl; }
html[dir="rtl"] .navbar-links { display: flex; gap: 0.75rem; align-items: center; flex-direction: row-reverse; list-style: none; margin: 0; padding: 0; }
html[dir="rtl"] .navbar-links li { margin: 0; } */

/* Brand area: keep logo then text (logical margin) */
html[dir="rtl"] .navbar-brand { display: flex; align-items: center; gap: 0.5rem; }
html[dir="rtl"] .navbar-brand .logo { margin-inline-start: 0; margin-inline-end: 0.5rem; }

/* Profile dropdown: ensure menu aligns to right side */
html[dir="rtl"] .dropdown-menu { left: auto; right: 0; text-align: right; }
html[dir="rtl"] .dropdown-menu.right { right: 0; left: auto; }

/* Mobile menu should stack and align right */
html[dir="rtl"] .mobile-menu { text-align: right; }

/* Keep menu toggle placed visually to the right side for RTL */
html[dir="rtl"] .menu-toggle { float: right; }

/* --- Footer --- */
/* html[dir="rtl"] .footer-container { direction: rtl; }
html[dir="rtl"] .footer-links { list-style: none; padding: 0; margin: 0; display:flex; gap:0.5rem; flex-direction: row-reverse; } */
html[dir="rtl"] .footer-logo{margin-left: 10px;}

/* --- Utilities --- */
/* Swap utility text alignment helpers */
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }

/* If an element must remain visually LTR (icons, logos), add
   the class "no-flip" and preserve its normal flow (no transform
   flipping needed since we are not mirroring the page). */
.no-flip { direction: ltr; unicode-bidi: isolate; }

/* --- Accessibility / fine-grained adjustments --- */
/* Some components may use explicit left/right offsets; these can
   be overridden with inline-start / inline-end logical properties
   where available. Add specific rules if you find misaligned items. */

/* End of RTL rules. For remaining visual mismatches, add targeted
   overrides for the specific selectors (header, cards, absolute
   positioned elements) rather than re-introducing global mirroring. */

/* --- Embla slider RTL fixes ---
  Ensure the embla slider shows slides in the expected order and
  that navigation buttons are positioned correctly in RTL mode.
*/
html[dir="rtl"] .embla__container {
  /* Reverse the flex order so slides flow from right-to-left */
  flex-direction: row-reverse;
}

html[dir="rtl"] .embla__slide {
  /* Slide content should align to the right by default */
  text-align: right;
}

/* Swap Embla control button positions */
html[dir="rtl"] .embla__button--prev { right: 10px; left: auto; }
html[dir="rtl"] .embla__button--next { left: 10px; right: auto; }

/* Also swap older `.prev` / `.next` controls if used elsewhere */
html[dir="rtl"] .prev { right: 10px; left: auto; }
html[dir="rtl"] .next { left: 10px; right: auto; }

/* If JS calculates offsets, Embla supports an `rtl` option; ensure
  the JS initialization uses embla = EmblaCarousel(node, { rtl: true })
  when in RTL language. If not set, the direction reversal above will
  visually fix common cases but consider toggling the JS option too. */