/* Right-to-left overrides for the Arabic build (loaded only there).
   The Webflow stylesheet is written with physical directions throughout, so
   this sheet flips the layout primitives, mirrors the directional icons and
   swaps in a font that actually has Arabic glyphs. */

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  font-family: "IBM Plex Sans Arabic", "Instrument Sans", Tahoma, sans-serif;
}

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

/* ---- generic flips ------------------------------------------------------ */
html[dir="rtl"] .left-align,
html[dir="rtl"] .vertical-flex.left-align {
  text-align: right;
}

html[dir="rtl"] .center-align {
  text-align: center;
}

/* Arrow glyphs and chevrons point the other way in RTL. */
html[dir="rtl"] .button-icon,
html[dir="rtl"] .card-arrow,
html[dir="rtl"] .cat-card-arrow,
html[dir="rtl"] .cat-side-chevron,
html[dir="rtl"] .crumb-sep,
html[dir="rtl"] .mega-fcard-link svg,
html[dir="rtl"] .mega-viewall svg,
html[dir="rtl"] .cat-side-download-link svg,
html[dir="rtl"] .dl-btn svg {
  transform: scaleX(-1);
}

/* ---- navbar -------------------------------------------------------------
   `direction: rtl` on the body already mirrors every flex row, so the rows
   below need no `flex-direction` change — adding `row-reverse` on top would
   flip them a second time and land back in left-to-right order. */
html[dir="rtl"] .vt-lang-menu {
  right: auto;
  left: 0;
}

html[dir="rtl"] .nav-logo-wrapper {
  margin-left: 0;
}

@media screen and (max-width: 991px) {
  html[dir="rtl"] .nav-button-wrapper {
    margin-left: 0;
    margin-right: auto;
  }

  html[dir="rtl"] .nav-menu-wrapper {
    flex-direction: column;
    text-align: right;
  }
}

/* ---- footer ------------------------------------------------------------- */
html[dir="rtl"] .vt-footer-pages-grid,
html[dir="rtl"] .vt-footer-col {
  text-align: right;
}

/* ---- product catalogue -------------------------------------------------- */
html[dir="rtl"] .cat-content-head,
html[dir="rtl"] .cat-card-body,
html[dir="rtl"] .product-info,
html[dir="rtl"] .pc-block,
html[dir="rtl"] .mega-fcard-text,
html[dir="rtl"] .mega-feature-text {
  text-align: right;
}

html[dir="rtl"] .pc-spec-table td,
html[dir="rtl"] .pc-features li,
html[dir="rtl"] .dl-cat-title,
html[dir="rtl"] .dl-subcat-title {
  text-align: right;
}

html[dir="rtl"] .pc-features {
  padding-right: 1.2em;
  padding-left: 0;
}

/* Model numbers, ratings and units stay latin/LTR inside RTL prose. */
html[dir="rtl"] .product-card-name,
html[dir="rtl"] .cat-card-title,
html[dir="rtl"] .dl-row-name,
html[dir="rtl"] .mega-fcard-name,
html[dir="rtl"] .category-card-name,
html[dir="rtl"] .detail-title,
html[dir="rtl"] .pc-spec-val,
html[dir="rtl"] .pc-chip {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}

/* ---- animated strips ---------------------------------------------------- */
/* The logo marquee and any GSAP-driven horizontal tracks are positioned in JS,
   so they must keep their original direction. */
html[dir="rtl"] .logo-carousel-wrapper,
html[dir="rtl"] .logo-item-wrapper,
html[dir="rtl"] .hero-sticky-container,
html[dir="rtl"] .rounded-container {
  direction: ltr;
}

html[dir="rtl"] .logo-item-wrapper {
  flex-direction: row;
}

/* ---- forms -------------------------------------------------------------- */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] .product-search-input {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .product-search-clear {
  right: auto;
  left: 12px;
}