/* =====================================================================
   VIBES MEDICAL TOURISM — Arabic RTL overrides
   Applied on top of styles.css when dir="rtl" and lang="ar"
   ===================================================================== */

[dir="rtl"] body,
[dir="rtl"] {
  font-family: 'Cairo', 'Montserrat', sans-serif;
}

/* Keep brand "Vibes" wordmark in Montserrat (Latin) */
[dir="rtl"] .logo,
[dir="rtl"] .fj-price,
[dir="rtl"] .ba-cat,
[dir="rtl"] .city-num,
[dir="rtl"] .step-num,
[dir="rtl"] .marquee-track,
[dir="rtl"] .ht-quote,
[dir="rtl"] .pv-quote {
  font-family: 'Montserrat', sans-serif;
}

/* Arabic body copy should not be italic — use Cairo regular */
[dir="rtl"] h1 em,
[dir="rtl"] .section-title em,
[dir="rtl"] .ht-quote,
[dir="rtl"] .pv-quote,
[dir="rtl"] .city-tag {
  font-style: normal;
}

/* Arabic italic accent gets a slight color emphasis instead */
[dir="rtl"] h1 em,
[dir="rtl"] .section-title em {
  color: var(--gold);
  font-weight: 400;
}

/* =====================================================================
   Layout flips for RTL
   ===================================================================== */

/* Eyebrow line moves to the right side automatically (flex order is fine) */
[dir="rtl"] .eyebrow {
  flex-direction: row-reverse;
}

/* Hero arrow icons need to point left in RTL (already done via #ico-arr-rtl) */
[dir="rtl"] .btn:hover svg {
  transform: translateX(-4px);
}
[dir="rtl"] .fj-card:hover .fj-arr svg,
[dir="rtl"] .svc-link:hover svg,
[dir="rtl"] .city-link:hover svg {
  transform: translateX(-3px);
}

/* Hero text alignment */
[dir="rtl"] .hero-text {
  text-align: right;
}

/* Hero points: icon should still be at the start (visual right side) */
[dir="rtl"] .hero-point:hover {
  transform: translateX(-4px);
}

/* Two-cities: city number + pill should align right */
[dir="rtl"] .city-head {
  flex-direction: row-reverse;
}

/* Featured pill — top-left in EN becomes top-right in AR */
[dir="rtl"] .fj-card .fj-featured-pill {
  left: auto;
  right: 16px;
}

/* Before/After labels swap sides */
[dir="rtl"] .ba-label-before {
  left: auto;
  right: 12px;
}
[dir="rtl"] .ba-label-after {
  right: auto;
  left: 12px;
}

/* Patient voices small pill swaps sides */
[dir="rtl"] .pv-pill-sm {
  right: auto;
  left: 14px;
}

/* Featured story body — flip alignment */
[dir="rtl"] .pv-featured-body {
  left: auto;
  right: 40px;
  text-align: right;
}

/* Hero testimonial — text right-aligned */
[dir="rtl"] .hero-testimonial {
  text-align: right;
}

/* FAQ — plus icon should be at the LEFT in RTL (which is where summary's flex puts it naturally if we flip) */
[dir="rtl"] .faq-item summary {
  flex-direction: row-reverse;
}

/* Footer alignment */
[dir="rtl"] .foot-grid,
[dir="rtl"] .foot-col,
[dir="rtl"] .foot-bot {
  text-align: right;
}
[dir="rtl"] .foot-form {
  flex-direction: row-reverse;
}

/* Section headings — let the center-aligned ones stay centered */
[dir="rtl"] .section-head.center {
  text-align: center;
}

/* Marquee runs in reverse direction for RTL */
[dir="rtl"] .marquee-track {
  animation-direction: reverse;
}

/* List items — bullet/star on the right in RTL */
[dir="rtl"] .city-clinics ul li,
[dir="rtl"] .svc-body ul li {
  flex-direction: row-reverse;
}

/* Service-card list bullets (the small gold dots) sit on the right */
[dir="rtl"] .svc-body ul li::before {
  margin-right: 0;
  margin-left: 10px;
}

/* Step border-right becomes border-left in RTL */
[dir="rtl"] .step {
  border-right: none;
  border-left: 1px solid rgba(250, 245, 234, 0.12);
}
[dir="rtl"] .step:last-child {
  border-left: none;
}

/* FJ clinic row reverses */
[dir="rtl"] .fj-clinic {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .fj-foot {
  flex-direction: row-reverse;
}

/* TS card hover arrow direction */
[dir="rtl"] .fc-foot .btn-link:hover svg {
  transform: translateX(-3px);
}

/* Nav-right keeps language switch + chat button order */
[dir="rtl"] .nav-right {
  flex-direction: row-reverse;
}

/* =====================================================================
   Typography fine-tuning for Cairo
   ===================================================================== */
[dir="rtl"] h1,
[dir="rtl"] .section-title {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}
[dir="rtl"] .hero h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.3;
}
[dir="rtl"] h3,
[dir="rtl"] h4 {
  font-weight: 600;
}
[dir="rtl"] .eyebrow {
  letter-spacing: 0;
  font-weight: 500;
}
[dir="rtl"] .nav-links a,
[dir="rtl"] .btn,
[dir="rtl"] .lang-switch {
  letter-spacing: 0;
}

/* Mobile RTL — hero stack */
@media (max-width: 1180px) {
  [dir="rtl"] .hero-text { text-align: right; }
}