/* Time Off Hero — RTL overrides (.rp-time-off-hero). Loaded only on AR/dir=rtl,
   after migration-rtl.css. Flex row reverses with dir=rtl automatically, so the
   text column sits on the right and the art on the left — no order swap needed.
   Latin -2px letter-spacing is wrong for Arabic; reset it. */
.rp-time-off-hero__title { letter-spacing: normal; }

/* Feature CTA buttons: match EN exactly (2026-07-13). EN renders all "Get started" buttons
   as a uniform lavender #f0f4fe fill with a blue border + blue text. The AR base sheet
   (migration-rtl) instead alternates white/grey-border on the odd rows — force them all to
   the EN treatment so the two locales are identical. */
.rp-time-off .btn-2.btn-gray {
  background-color: #f0f4fe !important;
  border-color: #114EF7 !important;
  color: #114EF7 !important;
}

/* Feature-section shuffle on AR (2026-07-13): migration-rtl.min.css forces
   `.rp-time-off .main-section-holder .hero_double_section_2` → white and the plain rows →
   #fafbff (the inverse of the wanted cadence, at equal specificity + loading after the shared
   rule, so it wins). Re-assert with higher specificity so AR mirrors EN: the first feature row
   "Customizable…" (hero_double_section_2) = #fafbff (tinted), plain rows = white, alternating. */
.rp-time-off .main-section-holder .hero_double_section_2.hero_double_section_gray_bg { background-color: #fff !important; }
.rp-time-off .main-section-holder .hero_double_section.hero_double_section_revert { background-color: #fafbff !important; }

/* Feature image/text side — mirror EN consistently (2026-07-13). EN puts the "_2" rows
   (Customizable / Boost / Gain) on `flex-direction: row-reverse` (image left in LTR), which
   auto-flips to image-right in RTL. But on AR, migration.css + qa-fixes-global force `row`
   on rows 0 & 2 while row 4 keeps row-reverse — so the image lands on the wrong side for two
   of the three, breaking the alternation. Force every `_2` row's flex container to
   row-reverse (matching EN) so all three mirror to image-right. Desktop only — the ≤991
   column-stack rules must still win, so this is gated to ≥992. */
@media (min-width: 992px) {
  .rp-time-off .hero_double_section_2 .double-section-hero-container { flex-direction: row-reverse !important; }
  .rp-time-off .hero_double_section .double-section-hero-container { flex-direction: row !important; }
}