/*
 * Right-to-left overrides for Arabic. All rules are scoped under [dir="rtl"],
 * so this file is inert for LTR languages and can be linked unconditionally.
 *
 * NOTE: This hand-written layer flips the common patterns the site uses today
 * (text alignment, the fixed left/right margins, dropdown alignment, flex rows).
 * For pixel-perfect RTL across every utility, rebuild Tailwind with the rtl:
 * variant; this file covers the visible chrome without a rebuild.
 */

[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-family: "Segoe UI", Tahoma, "Geist", system-ui, sans-serif;
}

/* Default text alignment */
[dir="rtl"] .text-center { text-align: center; }
[dir="rtl"] .md\:items-start { align-items: flex-end; }

/* Flip the fixed physical margins the footer/menus rely on */
[dir="rtl"] .ml-7 { margin-left: 0; margin-right: 1.75rem; }
[dir="rtl"] .mr-7 { margin-right: 0; margin-left: 1.75rem; }

/* Header/footer horizontal flex rows read right-to-left */
[dir="rtl"] header .flex-row,
[dir="rtl"] nav.md\:flex,
[dir="rtl"] footer .flex.items-center { flex-direction: row-reverse; }

/* Dropdown menus open toward the correct side */
[dir="rtl"] .dropdown-content {
  right: 0;
  left: auto;
  text-align: right;
}

/* Lists / headings align to the start (right) */
[dir="rtl"] footer ul,
[dir="rtl"] footer h4 { text-align: right; }

/* Social icon row stays visually grouped on the right */
[dir="rtl"] .justify-end { justify-content: flex-start; }

/* Floating WhatsApp widget: force LTR internally in Arabic. Under body
   direction:rtl the flex `items-end` cross-axis flips, pushing the button to
   the left edge of the (option-pill-wide) container. direction:ltr restores
   right alignment; the labels are Latin ("WhatsApp Baitulmal") so this is safe. */
[dir="rtl"] #wa-float {
  direction: ltr;
  right: 2rem;
  left: auto;
}
@media (min-width: 768px) {
  [dir="rtl"] #wa-float {
    right: 3rem;
  }
}