@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;
}

/* -----------------------------------------------------------
   HOTELS landing page — RTL overrides
   - Use Amiri (display serif) for the title to keep the elegant
     italic-accent feel that Fraunces gives in LTR; Tajawal for body.
   - Flip the side gradient so the darker side sits on the right
     where the copy reads (bottom gradient stays — direction-agnostic).
   - Counter and floating arrows move to the opposite edge.
   - Mirror the small forward-arrow icons inside the CTAs.
   - Progress bar + label re-anchor to the right of each segment.
   ----------------------------------------------------------- */
[dir="rtl"] .hotels-title {
  font-family: "Amiri", "Tajawal", serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}
[dir="rtl"] .hotels-title .accent {
  font-style: italic;
  font-weight: 400;
}
[dir="rtl"] .hotels-kicker,
[dir="rtl"] .hotels-desc,
[dir="rtl"] .hotels-btn,
[dir="rtl"] .hotels-progress__label {
  font-family: "Tajawal", "Outfit", sans-serif;
  letter-spacing: 0;
}
[dir="rtl"] .hotels-desc {
  line-height: 1.9;
}
[dir="rtl"] .hotels-counter {
  font-family: "Amiri", "Tajawal", serif;
}

/* Flip the overlay's side gradient so the darker side is on the right. */
[dir="rtl"] .hotel-slide__overlay {
  background:
    linear-gradient(
      to top,
      rgba(6, 10, 16, 0.94) 0%,
      rgba(6, 10, 16, 0.72) 22%,
      rgba(6, 10, 16, 0.32) 55%,
      rgba(6, 10, 16, 0.04) 85%
    ),
    linear-gradient(
      to left,
      rgba(6, 10, 16, 0.35) 0%,
      rgba(6, 10, 16, 0) 50%,
      rgba(6, 10, 16, 0.18) 100%
    );
}

/* Counter / arrows swap to the opposite edge. */
[dir="rtl"] .hotels-counter {
  right: auto;
  left: clamp(28px, 5vw, 80px);
}
[dir="rtl"] .hotels-arrows {
  right: auto;
  left: clamp(28px, 5vw, 80px);
}

/* Mirror the forward-pointing arrows. */
[dir="rtl"] .hotels-btn i,
[dir="rtl"] .hotels-arrow .bi {
  transform: scaleX(-1);
}
[dir="rtl"] .hotels-btn:hover i {
  transform: scaleX(-1) translateX(-4px);
}

/* Slide-fill direction: in RTL the progress should fill from right to left
   so the visual matches the reading direction. We re-anchor the
   transform-origin and labels accordingly. */
[dir="rtl"] .hotels-progress__segment::after {
  transform-origin: right;
}
[dir="rtl"] .hotels-progress__label {
  left: auto;
  right: 0;
}
[dir="rtl"] .hotels-progress__label-num {
  margin-right: 0;
  margin-left: 6px;
}

/* Hotels CTA arrow flip on mobile too. */
@media (max-width: 575.98px) {
  [dir="rtl"] .hotels-progress__label-num {
    margin-left: 4px;
  }
}