/* =====================================================
   RTL overrides — loaded only when $lang === 'ar' (see header.php).
   Pragmatic first pass: text direction and icon/text spacing. Not a
   pixel-perfect mirror of every element in style.css — do a visual pass
   on the Arabic pages and flag anything that still reads left-to-right.

   Note on the ".choose-area" (Heart of Doha / amenities) sections and the
   hero slider: both rely on absolute positioning / Owl Carousel transform
   math that was only ever authored and tested for LTR. Rather than
   re-deriving that math for RTL, those sections get dir="ltr" directly in
   the page markup (see ar/index.php) so the box layout stays exactly as
   designed; the ancestor-based selectors below still right-align their
   text and mirror their icons since they match on html[dir="rtl"], not on
   the nearest ancestor.
   ===================================================== */

[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .theme-btn, [dir="rtl"] .navbar-nav,
[dir="rtl"] .footer-widget, [dir="rtl"] .tbc-chat-panel {
  text-align: right;
  font-family: 'Tajawal', 'Tahoma', 'Segoe UI', sans-serif;
}

[dir="rtl"] body {
  line-height: 1.8;
}
[dir="rtl"] h1 { font-size: 34px; }
[dir="rtl"] h2 { font-size: 30px; }
[dir="rtl"] h3 { font-size: 24px; }

/* Latin numerals (prices, counters) inside RTL text — keep them rendering
   left-to-right ("3500" not "0053") regardless of the surrounding Arabic
   paragraph direction. */
.ltr-number {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Headings inside a container that's meant to be centered — the theme's
   own ".text-center" utility (Pricing/Services/Testimonials/"Other
   Services" section titles), or a container that centers via a direct
   rule on itself (.service-item, .counter-box, .pricing-header,
   .testimonial-item). Either way, the blanket h1-h6 rule above forces
   text-align:right on every heading directly — a plain element selector
   beats an inherited value regardless of where it came from — which
   silently overrides that centering. Re-assert it wherever one of these
   containers is an ancestor; same specificity as the h1-h6 rule above,
   declared after it, so this wins on the elements it actually matches.
   Add to this list, not a copy-pasted per-container block, next time a
   centered heading somewhere turns out to be right-aligned instead. */
[dir="rtl"] :is(.text-center, .service-item, .counter-box, .pricing-header, .testimonial-item, .site-breadcrumb-wrapper)
  :is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
}
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] .service-text, [dir="rtl"] .about-text {
  line-height: 1.9;
}

/* Reviews are kept in their original English so force that one carousel
   back to LTR even inside an RTL page. */
[dir="rtl"] .testimonial-slider[dir="ltr"] {
  text-align: left;
}

/* Generic icon-before-text spacing: the icon stays first in the markup,
   which is still visually correct in RTL (rightmost = read first) — but
   the margin needs to flip from the icon's left side to its right side. */
[dir="rtl"] .pricing-feature li i,
[dir="rtl"] .footer-contact li i,
[dir="rtl"] .service-single-list i,
[dir="rtl"] .author-social a,
[dir="rtl"] .widget .tag-list a,
[dir="rtl"] .footer-list a i,
[dir="rtl"] .footer-social a i,
[dir="rtl"] .service-read-btn i {
  margin-right: 0;
  margin-left: 8px;
}

/* Circular icon bubble inside .theme-btn/.theme-btn2 (hero CTAs, Book Now,
   Reserve a Space...). The button's own padding is authored asymmetric for
   LTR (extra room on the left for the icon; the icon's margin-left pushes
   it away from the text) — mirror both, or the circle gets clipped by the
   pill's overflow:hidden and reads as off-center. */
[dir="rtl"] .theme-btn {
  padding: 7px 25px 7px 8px;
}
[dir="rtl"] .theme-btn i {
  margin-left: 0;
  margin-right: 12px;
  /* The blanket ".theme-btn { text-align: right }" rule above (for the
     button's own text label) otherwise inherits into this icon circle
     too, pushing the arrow glyph against the circle's right edge instead
     of centering it — style.css's base .theme-btn is text-align:center,
     which is what the icon actually needs regardless of the label's own
     alignment. */
  text-align: center;
}

/* ...except inside a locally-forced dir="ltr" island (the hero slider —
   see the note above): its bidi order is LTR too, so the text-then-icon
   markup renders icon-on-the-right there, not icon-on-the-left. Mirroring
   the padding again would put it on the wrong side. Same specificity as
   the rule above, declared after it, so this wins only where both match. */
[dir="ltr"] .theme-btn {
  padding: 7px 8px 7px 25px;
}
[dir="ltr"] .theme-btn i {
  margin-left: 12px;
  margin-right: 0;
}

[dir="rtl"] .choose-right-content li,
[dir="rtl"] .breadcrumb-menu li {
  flex-direction: row-reverse;
}

/* The hero slider's text column inherits direction:ltr from its forced-LTR
   ancestor (see the note at the top), so it sits in the same physical spot
   as the English design — the LEFT ~58% of the slide — with only the
   background image filling the right side. Right-aligning the text inside
   that column isn't enough to read as "Arabic content" at a glance; push
   the column itself over to the right side of the slide, mirroring where
   an RTL-first hero would put it. auto margin on a single flex item under
   direction:ltr consumes the leftover space on its leading (left) side. */
[dir="rtl"] .hero-slider .col-md-7 {
  margin-left: auto;
}

[dir="rtl"] .navbar-nav {
  padding-right: 0;
}

/* .header-nav-right (the "Reserve now" button) has margin-left:30px in
   style.css to space it from whatever comes before it — correct for LTR,
   where that's the nav items on its left. In RTL it sits to the LEFT of
   the lang-switch pill instead, so the gap needs to be on its right. */
[dir="rtl"] .header-nav-right {
  margin-left: 0;
  margin-right: 30px;
}

/* style.css zeroes the trailing margin on the *last* nav-item so the
   rightmost menu link in LTR doesn't have dangling extra space after it.
   In RTL the last DOM item ("خدمات أعمال أخرى") isn't the rightmost one —
   bidi reorders it to sit in the middle of the row — so removing its
   margin instead collides it with its neighbor. Restore the normal
   spacing for RTL. */
[dir="rtl"] .navbar .nav-item:last-child .nav-link {
  margin-right: 22px;
}
[dir="rtl"] .dropdown-menu {
  text-align: right;
}

/* Chat widget stays corner-anchored regardless of language. */