@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");

/* -----------------------------------------------------------
   Font overrides — Tajawal for all Arabic type
   ----------------------------------------------------------- */
[dir="rtl"] body {
  font-family: "Tajawal", "Open Sans", sans-serif;
  letter-spacing: 0;
}

/* -----------------------------------------------------------
   Tours landing page — RTL overrides
   Mirrors the LTR layout in tours/assets/css/almassar.css.
   - Dark gradient flips so the readable side sits where the copy is.
   - Counter, lang dropdown anchor to the opposite edge.
   - CTA arrow icon is mirrored to point away from the text correctly.
   - Tajawal needs more line-height than Outfit to look right.
   ----------------------------------------------------------- */
[dir="rtl"] .tours-title,
[dir="rtl"] .tours-desc,
[dir="rtl"] .tours-kicker,
[dir="rtl"] .tours-btn,
[dir="rtl"] .tours-counter,
[dir="rtl"] .tours-lang .nav-link-lang,
[dir="rtl"] .tours-lang .nav-dropdown-link {
  font-family: "Tajawal", "Outfit", sans-serif;
}

[dir="rtl"] .tours-kicker {
  letter-spacing: 0;
}

[dir="rtl"] .tours-title {
  letter-spacing: 0;
  line-height: 1.2;
}

[dir="rtl"] .tours-desc {
  line-height: 1.85;
}

/* Flip the overlay so the dark, text-readable side sits on the right
   (where Arabic body text begins). */
[dir="rtl"] .tour-slide__overlay {
  background:
    linear-gradient(
      to left,
      rgba(6, 10, 16, 0.85) 0%,
      rgba(6, 10, 16, 0.55) 45%,
      rgba(6, 10, 16, 0.18) 75%,
      rgba(6, 10, 16, 0.05) 100%
    ),
    linear-gradient(
      to top,
      rgba(6, 10, 16, 0.55) 0%,
      rgba(6, 10, 16, 0) 55%
    );
}

/* Counter floats on the opposite edge in RTL. */
[dir="rtl"] .tours-counter {
  right: auto;
  left: clamp(20px, 4vw, 56px);
}

/* CTA arrow points "forward" in RTL — i.e. visually leftward.
   Mirror it instead of swapping classes so the EN markup stays canonical. */
[dir="rtl"] .tours-btn i {
  transform: scaleX(-1);
}
[dir="rtl"] .tours-btn:hover i {
  transform: scaleX(-1) translateX(-4px);
}

/* Pagination + nav arrows: bullet directions are direction-agnostic,
   but the small chevrons on the round buttons must mirror so prev/next
   visually match the slide travel direction. */
[dir="rtl"] .tours-arrow .bi {
  transform: scaleX(-1);
}

/* Language dropdown anchor: in RTL the trigger sits on the left edge
   of the topbar, so the dropdown must extend to the right (left:0)
   instead of clinging to its right edge. */
[dir="rtl"] .tours-lang .nav-dropdown-lang {
  right: auto;
  left: 0;
}

/* The lang switcher pill keeps small letter-spacing for the EN-style
   "AR" label. Disable the LTR uppercase tracking quirk to keep it tidy. */
[dir="rtl"] .tours-lang .nav-link-lang {
  letter-spacing: 0;
}