/* ============================================================
   Uhibbu Vietnam — Arabic (Saudi) RTL overrides
   Scoped entirely to [dir="rtl"] so the English site is untouched.
   Flexbox / CSS Grid already mirror automatically under dir="rtl";
   these rules only fix hard-coded left/right offsets, typography,
   and directional icons that don't mirror on their own.
   ============================================================ */

[dir="rtl"] {
  --font-arabic: 'Cairo', 'Tajawal', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] .btn,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  font-family: var(--font-arabic);
  font-size: 17px;
  line-height: 1.85;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  font-family: var(--font-arabic);
  font-weight: 700;
  line-height: 1.5;
}

[dir="rtl"] .eyebrow,
[dir="rtl"] .route,
[dir="rtl"] .price,
[dir="rtl"] .stat span,
[dir="rtl"] .tour-meta span,
[dir="rtl"] .day-tab,
[dir="rtl"] .tour-day-num span {
  font-family: var(--font-arabic);
}

[dir="rtl"] p,
[dir="rtl"] li {
  line-height: 1.9;
}

/* Text stays right-aligned by default under RTL; be explicit where the
   LTR stylesheet forced text-align:left anywhere. */
[dir="rtl"] body {
  text-align: right;
}

/* Numbers, phone numbers and prices: keep LTR digit order inside RTL flow */
[dir="rtl"] .ltr-digits,
[dir="rtl"] .phone-number,
[dir="rtl"] .price,
[dir="rtl"] .tour-meta b,
[dir="rtl"] .stat b,
[dir="rtl"] .day-tab b {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
/* Same LTR digit isolation, but this one must stay a block so it stacks
   above the city label instead of sitting inline next to it. */
[dir="rtl"] .tour-day-num b {
  direction: ltr;
  unicode-bidi: isolate;
  display: block;
}

/* ---- Header / skip link ---- */
[dir="rtl"] .skip-link {
  left: auto;
  right: -9999px;
}
[dir="rtl"] .skip-link:focus {
  left: auto;
  right: 0;
}

/* ---- Language switch dropdown ---- */
[dir="rtl"] .lang-switch-menu {
  right: auto;
  left: 0;
}

/* ---- Hero seal badge (bottom-left pill on the hero image) ---- */
[dir="rtl"] .seal-badge {
  left: auto;
  right: 16px;
}

/* ---- Destinations carousel arrows ---- */
[dir="rtl"] .dest-nav-prev {
  left: auto;
  right: 2px;
}
[dir="rtl"] .dest-nav-next {
  right: auto;
  left: 2px;
}
[dir="rtl"] .dest-nav svg {
  transform: scaleX(-1);
}

/* ---- Testimonial big quote mark ---- */
[dir="rtl"] .testimonial-mark {
  left: auto;
  right: -.5rem;
}

/* ---- Generic outbound / chevron arrow icons that imply LTR direction ---- */
[dir="rtl"] .dest-tilt-link svg,
[dir="rtl"] .about-value-icon svg {
  transform: scaleX(-1);
}

/* ---- Tour itinerary day markers: keep 01/02 numerals LTR, label RTL ---- */
[dir="rtl"] .tour-day {
  grid-template-columns: 1fr 120px;
}
[dir="rtl"] .tour-day-num {
  text-align: left;
}

/* ---- Mobile-first tightening (Saudi traffic is majority mobile) ---- */
@media (max-width: 640px) {
  [dir="rtl"] body {
    font-size: 16.5px;
  }
  [dir="rtl"] .hero h1 {
    line-height: 1.35;
  }
}

/* ---- WhatsApp / payment trust badges (Mada, Apple Pay, COD) ---- */
[dir="rtl"] .payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}
[dir="rtl"] .payment-badges span {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .78rem;
  color: var(--muted);
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .8rem;
}