/*--------------------------------------------------------------
# Alshaheen RTL overrides — apartment-details.html only
# Loaded after assets/css/rtl.css. Two genuine mirroring bugs found
# in components that are new to this page (not used/vetted on
# index.html, about.html, or agents.html):
--------------------------------------------------------------*/

/* Amenities list ("apartment-details__points"): icon then .text in
   DOM order. flex-direction:row already flips visually under
   dir="rtl" (icon lands on the right/start side, text to its left),
   but margin-left is a PHYSICAL property — it stays on the text
   element's left edge instead of tracking to the side facing the
   icon, so the icon and text end up flush together with the 15px
   gap stranded on the far side instead of between them. */
[dir="rtl"] .apartment-details__points li .text {
  margin-left: 0;
  margin-right: 15px;
}

/* Floor-plan-two tab icon ("icon-right-arrow"): the common rtl.css
   rule mirrors this class everywhere via `transform: scaleX(-1)`,
   but this component's own rules set `transform: scale(0)` at rest
   and `scale(1)` on hover/active with higher selector specificity
   (3 classes + a type selector vs. 1 attribute + 1 class), so they
   win outright — `transform` doesn't compose across rules, it's
   replaced wholesale. Net effect: the arrow never mirrors in RTL,
   it only fades in/out. Re-declare both states here, scoped to
   [dir="rtl"] so LTR is untouched, combining the existing scale
   animation with the horizontal flip in one transform value. */
[dir="rtl"] .floor-plan-two__main-tab-box .tab-buttons .tab-btn i {
  transform: scale(0) scaleX(-1);
}

[dir="rtl"] .floor-plan-two__main-tab-box .tab-buttons .tab-btn:hover i,
[dir="rtl"] .floor-plan-two__main-tab-box .tab-buttons .tab-btn.active-btn i {
  transform: scale(1) scaleX(-1);
}