/*
---------------------------------------------
RTL overrides — loaded only when app()->getLocale() === 'ar'
---------------------------------------------

The public site runs Bootstrap 5.1.3 (LTR build) plus the custom
"templatemo-574-mexant" theme. The theme, not Bootstrap, owns nearly all of the
directional layout (floats, one-sided margins, absolute left/right offsets), so
a Bootstrap RTL build on its own would fix almost nothing here. This file mirrors
the theme's directional rules and the handful of Bootstrap utilities the public
views actually use.

Every rule is scoped to [dir="rtl"], so this file is inert if it is ever loaded
on an LTR page. Rules are grouped in the same order the theme declares them.
*/

/* ---------------------------------------------
   Typography — Poppins carries no Arabic glyphs
   --------------------------------------------- */

[dir="rtl"] body,
[dir="rtl"] .header-area .main-nav .nav li a,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .main-button a,
[dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] button {
  font-family: 'Cairo', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
}

/* Arabic sets taller than Latin at the same size — the theme's display
   line-heights clip ascenders and diacritics on the large headings. */
[dir="rtl"] .slide-inner .header-text h2 {
  line-height: 1.5;
}

[dir="rtl"] .page-heading h2 {
  line-height: 1.4;
}

[dir="rtl"] section.simple-cta h4,
[dir="rtl"] .section-heading h4 {
  line-height: 1.6;
}

/* ---------------------------------------------
   Header / navbar
   --------------------------------------------- */

[dir="rtl"] .header-area .main-nav .logo {
  float: right;
}

[dir="rtl"] .header-area .main-nav .nav {
  float: left;
  margin-right: 0;
  margin-left: 0;
}

/* The theme zeroes the trailing padding on the last item; in RTL the trailing
   edge is the left one. */
[dir="rtl"] .header-area .main-nav .nav li:last-child {
  padding-right: 25px;
  padding-left: 0;
}

/* .has-sub reserves 15px extra on the trailing side for its caret. */
[dir="rtl"] .header-area .main-nav .nav li.has-sub {
  padding-right: 25px;
  padding-left: 40px;
}

[dir="rtl"] .header-area .main-nav .nav li.has-sub:after {
  right: auto;
  left: 2px;
}

[dir="rtl"] .header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  padding-left: 0;
  padding-right: 20px;
}

[dir="rtl"] .header-area .main-nav .nav li.has-sub ul li a:hover {
  padding-left: 0;
  padding-right: 25px;
}

[dir="rtl"] .header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
[dir="rtl"] .background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-left: 0 !important;
  padding-right: 25px !important;
}

[dir="rtl"] .header-area .main-nav .menu-trigger {
  right: auto;
  left: 40px;
}

/* Keep the compact language icon close to Contact Support at the left edge of
   the RTL navigation, mirroring its right-edge placement in LTR. */
[dir="rtl"] .header-area .main-nav .nav li.lang-switch {
  padding-right: 8px;
  padding-left: 0;
}

/* ---------------------------------------------
   Hero slider
   --------------------------------------------- */

/* The theme markup uses Swiper 6's `.swiper-container` class while the page
   loads Swiper 7's CSS, which styles `.swiper` — so the slide track never gets
   its `overflow: hidden` and the document ends up ~3 viewports wide. Under LTR
   that overflow hangs off the right and is never seen; under RTL it hangs off
   the left and the browser's initial scroll origin lands on the blank side,
   leaving the hero apparently empty. Clipping the track fixes it. */
[dir="rtl"] .swiper-container {
  overflow: hidden;
}

/* .header-text is absolutely positioned with auto offsets, so the browser puts
   it at its static position — the right edge of the column under dir="rtl".
   Only the inline alignment and the trailing gutter need flipping. */
[dir="rtl"] .slide-inner .header-text {
  text-align: right;
}

[dir="rtl"] .slide-inner .header-text p {
  margin-right: 0;
  margin-left: 60px;
}

[dir="rtl"] .slide-inner .header-text .buttons .green-button {
  float: right;
  margin-right: 0;
  margin-left: 20px;
}

/* Swiper's own arrows are mirrored by its `rtl` option, but the glyphs inside
   the theme's chevrons are not. */
[dir="rtl"] .swiper-button-next,
[dir="rtl"] .swiper-button-prev {
  transform: scaleX(-1);
}

/* ---------------------------------------------
   Home — services grid
   --------------------------------------------- */

[dir="rtl"] .services .service-item i {
  float: right;
  margin-right: 0;
  margin-left: 30px;
}

/* ---------------------------------------------
   Shared CTA band
   --------------------------------------------- */

[dir="rtl"] section.simple-cta .left-image {
  margin-right: 0;
  margin-left: 45px;
}

[dir="rtl"] section.simple-cta .buttons .orange-button {
  margin-left: 0;
  margin-right: 20px;
}

/* ---------------------------------------------
   Home — about tabs
   --------------------------------------------- */

[dir="rtl"] section.about-us .naccs .menu div {
  margin-right: 0;
  margin-left: 30px;
}

[dir="rtl"] section.about-us ul.nacc li {
  transform: translateX(-50px);
}

[dir="rtl"] section.about-us ul.nacc li.active {
  transform: translateX(0px);
}

[dir="rtl"] section.about-us .right-content {
  margin-left: 0;
  margin-right: 60px;
}

/* ---------------------------------------------
   Home — testimonials
   --------------------------------------------- */

[dir="rtl"] .testimonials .item img {
  right: auto;
  left: 0;
}

[dir="rtl"] .testimonials .item i.fa-quote-left {
  transform: scaleX(-1);
}

/* ---------------------------------------------
   About page — accordions
   --------------------------------------------- */

[dir="rtl"] section.top-section .accordions {
  margin-left: 0;
  margin-right: 30px;
}

[dir="rtl"] .accordion-head .icon {
  float: left;
}

/* Closed, the chevron must point into the reading direction (left in RTL), so
   the glyph is mirrored. Open, the theme rotates the wrapping .icon span +45deg
   to swing it downward — composed with the mirrored glyph that lands up-left, so
   the rotation is negated here to swing it down-left instead. */
[dir="rtl"] .accordion-head .icon i.fa-chevron-right {
  transform: scaleX(-1);
}

[dir="rtl"] .accordion-head.is-open .icon {
  transform: rotate(-45deg);
}

/* ---------------------------------------------
   About page — what we do
   --------------------------------------------- */

[dir="rtl"] .what-we-do .left-content {
  margin-right: 0;
  margin-left: 60px;
}

[dir="rtl"] .what-we-do .right-items .item em {
  right: auto;
  left: 15px;
}

/* ---------------------------------------------
   Services page — alternating rows
   --------------------------------------------- */

[dir="rtl"] .main-services .left-image {
  margin-right: 0;
  margin-left: 15px;
}

[dir="rtl"] .main-services .right-image {
  margin-left: 0;
  margin-right: 15px;
}

[dir="rtl"] .main-services .right-text-content {
  margin-left: 0;
  margin-right: 15px;
}

[dir="rtl"] .main-services .left-text-content {
  margin-right: 0;
  margin-left: 15px;
}

/* ---------------------------------------------
   Services page — feature tabs
   --------------------------------------------- */

[dir="rtl"] section.service-details .naccs .menu div {
  margin-right: 0;
  margin-left: 30px;
}

[dir="rtl"] section.service-details ul.nacc li {
  transform: translateX(-50px);
}

[dir="rtl"] section.service-details ul.nacc li.active {
  transform: translateX(0px);
}

[dir="rtl"] section.service-details ul.nacc li .left-image {
  margin-right: 0;
  margin-left: 50px;
}

[dir="rtl"] section.service-details ul.nacc li .left-image img {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

[dir="rtl"] section.service-details ul.nacc li .right-content {
  padding: 50px 0px 50px 50px;
  margin-left: 0;
  margin-right: 470px;
}

[dir="rtl"] section.service-details ul.nacc li .right-content h4 {
  margin-right: 0;
  margin-left: 120px;
}

/* The English strings carry a literal "- " bullet. A leading ASCII hyphen is a
   bidi-neutral character, so in an Arabic run it gets reordered to the visual
   left — the wrong end. The Arabic strings therefore ship without it and the
   marker is drawn here, where the box model puts it on the start side. */
[dir="rtl"] section.service-details ul.nacc li .right-content span::before {
  /* \200F is RLM, a strong right-to-left character. Without it the hyphen is a
     bidi neutral at the start of the run and gets reordered to the visual left;
     preceding it with RLM resolves the hyphen right-to-left so the marker stays
     on the start (right) edge. \00A0 is a non-breaking space for the gap. */
  content: "\200F-\00A0";
}

/* ---------------------------------------------
   Auth screens — guest shell and engineer wizard
   --------------------------------------------- */

[dir="rtl"] .auth-layout {
  text-align: right;
}

[dir="rtl"] .auth-back-icon,
[dir="rtl"] .engineer-choice-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .auth-password-input {
  padding-right: 1rem;
  padding-left: 2.75rem;
}

[dir="rtl"] .auth-password-toggle {
  right: auto;
  left: 1rem;
}

[dir="rtl"] .auth-theme-toggle {
  right: auto;
  left: 1.5rem;
}

/* The prefix selector remains the first item at the reading edge (right),
   while the Latin country names, +code and phone digits keep their LTR order. */
[dir="rtl"] .auth-phone-row,
[dir="rtl"] .engineer-register-form .phone-input-row {
  direction: rtl;
}

[dir="rtl"] .engineer-choice-arrow {
  display: inline-block;
}

[dir="rtl"] .engineer-register-form .wizard-step span {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .engineer-register-form .form-select {
  padding-right: 14px;
  padding-left: 2.25rem;
  background-position: left .75rem center;
}

[dir="rtl"] .engineer-register-form .verify-modal {
  text-align: right;
}

[dir="rtl"] .engineer-register-form .verify-modal-close {
  right: auto;
  left: 16px;
}

/* The Store's own stylesheet is entirely flex-based with no directional
   margins, and its two arrow glyphs are already chosen per-locale in the Blade
   views, so it needs no overrides here. */

/* ---------------------------------------------
   Bootstrap 5 utilities used by the public views. The vendored build is LTR,
   so the four directional utilities in use are flipped by hand here.
   --------------------------------------------- */

[dir="rtl"] .text-start {
  text-align: right !important;
}

[dir="rtl"] .text-end {
  text-align: left !important;
}

@media (min-width: 992px) {
  [dir="rtl"] .offset-lg-0 { margin-left: 0; margin-right: 0; }
  [dir="rtl"] .offset-lg-1 { margin-left: 0; margin-right: 8.33333333%; }
  [dir="rtl"] .offset-lg-2 { margin-left: 0; margin-right: 16.66666667%; }
  [dir="rtl"] .offset-lg-3 { margin-left: 0; margin-right: 25%; }
}

/* ---------------------------------------------
   Mobile — the theme collapses the nav into a stacked drawer below 992px, which
   is direction-neutral apart from the caret and the drawer trigger.
   --------------------------------------------- */

@media (max-width: 991px) {
  [dir="rtl"] .header-area .logo {
    margin-left: 0;
    margin-right: 0;
  }

  [dir="rtl"] .header-area .main-nav .nav {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }

  [dir="rtl"] .header-area .main-nav .nav li.has-sub:after {
    right: auto;
    left: 30px;
  }

  [dir="rtl"] .header-area .main-nav .nav li.has-sub {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  [dir="rtl"] section.about-us .right-content,
  [dir="rtl"] .what-we-do .left-content,
  [dir="rtl"] section.top-section .accordions {
    margin-left: 0;
    margin-right: 0;
  }

  [dir="rtl"] section.service-details ul.nacc li .left-image {
    margin-left: 0;
  }

  [dir="rtl"] section.service-details ul.nacc li .right-content {
    padding: 30px;
    margin-right: 0;
  }

  [dir="rtl"] section.service-details ul.nacc li .right-content h4 {
    margin-left: 0;
  }

  [dir="rtl"] .slide-inner .header-text p {
    margin-left: 0;
  }
}