/*==========================================================================
  Synex - RTL / bidirectional layer
  --------------------------------------------------------------------------
  The bulk of the mirroring is handled by CSS logical properties inside
  main.css / bootstrap.min.css (margin-inline-*, padding-inline-*,
  inset-inline-*, border-inline-*, text-align: start|end, float: inline-*).
  This file only carries what logical properties cannot express:

    1. Document direction
    2. Arabic typeface
    3. Directional glyphs (arrows / chevrons) that must be mirrored
    4. Hard-coded horizontal transforms that logical properties don't touch
    5. Asymmetric border-radius on components
    6. Third-party widgets that read direction at runtime

  It is loaded on every request; every rule is scoped to html[dir="rtl"]
  or html[lang="ar"] so the LTR rendering is unchanged.
==========================================================================*/

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap");

/*--------------------------------------------------------------
  1. Direction
--------------------------------------------------------------*/
html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] body {
    text-align: start;
}

/*--------------------------------------------------------------
  2. Arabic typeface
  Plus Jakarta Sans carries no Arabic glyphs, so Cairo is layered
  in front of it for the Arabic culture only. Latin fragments
  (brand name, emails, phone numbers) still fall through to the
  original stack, so the design keeps its voice.
--------------------------------------------------------------*/
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] a,
html[lang="ar"] span,
html[lang="ar"] li,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button,
html[lang="ar"] label {
    font-family: "Cairo", "Plus Jakarta Sans", sans-serif;
}

/* Cairo sits a touch lower on the baseline than Plus Jakarta Sans. */
html[lang="ar"] .theme-btn-main .theme-btn {
    line-height: 1.6;
}

/*--------------------------------------------------------------
  3. Directional glyphs
  Font Awesome arrows/chevrons point at a physical direction, so
  they are mirrored rather than re-authored. Vertical glyphs
  (chevron-down, arrow-up) and brand/social icons are untouched.
--------------------------------------------------------------*/
html[dir="rtl"] .fa-arrow-up-right,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right-long,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left {
    transform: scaleX(-1);
    display: inline-block;
}

/* The mobile menu's expand chevron is vertical - keep it upright even
   though it lives inside a mirrored row. */
html[dir="rtl"] .fa-chevron-down,
html[dir="rtl"] .fa-chevron-up {
    transform: none;
}

/*--------------------------------------------------------------
  4. Horizontal transforms
--------------------------------------------------------------*/

/* Primary button: the arrow slides in from the inline-start edge and the
   label slides toward the inline-end edge. Both are transform-driven, so
   they need an explicit RTL counterpart. */
html[dir="rtl"] .theme-btn-main .theme-btn-arrow-left {
    left: auto;
    right: 7px;
    transform: translateX(15px) scale(0);
}

html[dir="rtl"] .theme-btn-main:hover .theme-btn-arrow-left {
    transform: translateX(0) scale(1);
}

html[dir="rtl"] .theme-btn-main:hover .theme-btn {
    transform: translateX(-57px);
}

/* Home-2 hero decorative shapes. */
html[dir="rtl"] .hero-2 .hero-slider-items .hero-shape {
    left: auto;
    right: 0;
    transform: translateX(150px);
}

html[dir="rtl"] .hero-2 .hero-slider-items .hero-shape2 {
    right: auto;
    left: 0;
    transform: translateX(-150px);
}

/* Home-4 hero side images tilt away from the centre; mirror the tilt. */
html[dir="rtl"] .gt-hero-image .gt-hero-left,
html[dir="rtl"] .gt-hero-image .gt-hero-right {
    transform: scaleX(-1);
}

/*--------------------------------------------------------------
  5. Third-party widgets
--------------------------------------------------------------*/

/* Swiper reads the computed direction of its container, so slide order and
   drag inertia flip on their own. Only the free-standing nav buttons and the
   pagination row need to be re-ordered. */
html[dir="rtl"] .array-button {
    flex-direction: row-reverse;
}

html[dir="rtl"] .swiper-pagination,
html[dir="rtl"] .dot {
    direction: rtl;
}

/* Marquee tracks are translated by keyframes, so the two directions swap. */
html[dir="rtl"] .marquee-inner.to-left {
    animation-name: marqueeRight;
}

html[dir="rtl"] .marquee-inner.to-right {
    animation-name: marqueeLeft;
}

/* nice-select renders its own dropdown; anchor it to the inline-start edge. */
html[dir="rtl"] .nice-select {
    padding-inline-start: 18px;
    padding-inline-end: 30px;
    text-align: start !important;
}

html[dir="rtl"] .nice-select:after {
    right: auto;
    left: 12px;
}

html[dir="rtl"] .nice-select .list {
    left: auto;
    right: 0;
}

html[dir="rtl"] .nice-select .option {
    text-align: start;
}

/* Bootstrap dropdowns inside the header. */
html[dir="rtl"] .dropdown-menu {
    text-align: start;
}

/* Magnific Popup close button. */
html[dir="rtl"] .mfp-close {
    right: auto;
    left: 0;
}

/*--------------------------------------------------------------
  6. Header + navigation
--------------------------------------------------------------*/
html[dir="rtl"] .header-section .navbar-nav .sub-menu {
    text-align: start;
}

/* Third-level flyouts open away from the viewport edge. */
html[dir="rtl"] .header-section .navbar-nav .sub-menu .has-dropdown > .sub-menu {
    left: auto;
    right: 100%;
}

html[dir="rtl"] .mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a i {
    margin-inline-end: 0;
    margin-inline-start: 15px;
}

/*--------------------------------------------------------------
  7. Language switcher
  Sized and coloured to sit inside the existing header rhythm rather
  than introducing a new control style.
--------------------------------------------------------------*/
.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    margin-inline-end: 22px;
}

.language-switcher a {
    color: inherit;
    opacity: 0.55;
    transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
}

.language-switcher a:hover {
    opacity: 1;
    color: var(--theme);
}

.language-switcher a.active {
    opacity: 1;
    color: var(--theme);
}

.language-switcher .divider {
    opacity: 0.3;
}

.header-2 .language-switcher,
.header-4 .language-switcher {
    color: var(--white);
}

.mobile-menu-main .language-switcher {
    color: var(--white);
    padding: 22px 30px 0;
    margin-inline-end: 0;
}

/*--------------------------------------------------------------
  8. Forms - validation feedback
--------------------------------------------------------------*/
.field-validation-error,
.validation-summary-errors ul {
    display: block;
    color: #e5484d;
    font-size: 14px;
    margin-top: 8px;
}

.validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.form-clt input.input-validation-error,
.form-clt textarea.input-validation-error {
    border-color: #e5484d !important;
}

.form-message {
    display: block;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 600;
}

.form-message.success {
    color: #1f9d55;
}

.form-message.error {
    color: #e5484d;
}