/*
 * Right-to-left (Arabic) adjustments. _Layout.cshtml sets <html dir="rtl"> from the
 * DirType resource; these rules mirror the floats and side spacing that the theme and
 * bootstrap3-compat.css hard-code for left-to-right pages.
 */

/* Columns outside a .row (the header logo column) */
[dir="rtl"] :where(:not(.row) > [class*="col-"]) {
  float: right;
}

/* Language links stay at the top right in the same order as on the other languages
   (EN | 中文 | FR | العربية) */
[dir="rtl"] #menu-area .navbar .language-change {
  direction: ltr;
}

/* Logo on the right, menu to its left */
@media (min-width: 768px) {
  [dir="rtl"] .navbar-header,
  [dir="rtl"] .navbar-nav,
  [dir="rtl"] .navbar-nav > li {
    float: right;
  }
}
[dir="rtl"] .nav {
  padding-right: 0;
}

/* Home page: the app features text and the video beside it */
[dir="rtl"] .title-area-video {
  float: right;
  text-align: right;
}
/* Section headings, which the theme left-aligns below 992px */
@media (max-width: 991px) {
  [dir="rtl"] .title-area {
    text-align: right;
  }
}

/* Slider arrows. slick.css moves "previous" to the right and "next" to the left in RTL,
   but the theme's left/right offsets would still apply, so set each side explicitly
   and point the icons the matching way. */
[dir="rtl"] .main-slider .slick-prev {
  left: auto;
  right: 20px;
}
[dir="rtl"] .main-slider .slick-next {
  right: auto;
  left: 23px;
}
[dir="rtl"] .main-slider .slick-prev::before,
[dir="rtl"] .testimonial-slider .slick-prev::before {
  content: "\f105"; /* fa-angle-right */
}
[dir="rtl"] .main-slider .slick-next::before,
[dir="rtl"] .testimonial-slider .slick-next::before {
  content: "\f104"; /* fa-angle-left */
}
@media (max-width: 991px) {
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -10px;
  }
  [dir="rtl"] .slick-next {
    right: auto;
    left: -10px;
  }
  [dir="rtl"] .testimonial-slider .slick-prev {
    left: auto;
    right: 0;
  }
  [dir="rtl"] .testimonial-slider .slick-next {
    right: auto;
    left: 0;
  }
}

/* Bootstrap's offset-* classes always pad on the left; mirror the ones used
   (the last box on Our Services) so it lands in the same column as in English */
@media (min-width: 768px) {
  [dir="rtl"] .offset-md-6 {
    margin-left: 0;
    margin-right: 50%;
  }
}
@media (min-width: 992px) {
  [dir="rtl"] .offset-lg-4 {
    margin-left: 0;
    margin-right: 33.333333%;
  }
}

/* Loyalty Memberships sidebar: heading underline, link spacing and arrow icon */
[dir="rtl"] .widget-title::after {
  left: auto;
  right: 0;
}
[dir="rtl"] .widget-catg li a {
  padding-left: 0;
  padding-right: 10px;
}
[dir="rtl"] .widget-catg li::before {
  content: '\f137'; /* fa-chevron-circle-left */
}

/* Contact page: heading underline on the right, and the address lined up with the headings */
[dir="rtl"] .contact-area-left h4::after {
  left: auto;
  right: 0;
}
[dir="rtl"] .contact-area-left .single-address {
  padding-right: 0;
  padding-left: 62px;
}
[dir="rtl"] .contact-area-left ul {
  padding-right: 0;
}

/* Contact page: the Latin address lines and company names keep their own word order */
[dir="rtl"] .contact-area-left .single-address p,
[dir="rtl"] .contact-area-left li {
  unicode-bidi: plaintext;
  text-align: right;
}