/*
 * Arabic / RTL layer for ZOOM LIVE.
 * Loaded ONLY on /ar/ pages (after zeitmedia.webflow.shared.min.css).
 * Provides Arabic-capable fonts + directional mirroring on top of the
 * untouched English bundle. Cache token: bump ?v=ar on all /ar/*.html
 * whenever this file changes.
 */

@font-face {
  font-family: "Rubik Arabic";
  src: url(../fonts/zoom/RubikArabic-Regular.woff2?v=ar1) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik Arabic";
  src: url(../fonts/zoom/RubikArabic-Medium.woff2?v=ar1) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik Arabic";
  src: url(../fonts/zoom/RubikArabic-Bold.woff2?v=ar1) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik Arabic";
  src: url(../fonts/zoom/RubikArabic-ExtraBold.woff2?v=ar1) format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Fonts: Alan Sans / Rubik are Latin-only subsets; Arabic falls back
   to Rubik Arabic first so joined letterforms render correctly. ---- */
html[lang="ar"] {
  --_typography---font--primary-family: "Rubik Arabic", Arial, sans-serif;
}
html[lang="ar"] body,
html[lang="ar"] .u-text-style-main,
html[lang="ar"] [class*="text_style"] {
  font-family: "Rubik Arabic", Rubik, Arial, sans-serif;
}
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"] .u-text-style-display,
html[lang="ar"] [class*="heading"] {
  font-family: "Rubik Arabic", "Alan Sans", Arial, sans-serif;
  letter-spacing: 0 !important; /* letter-spacing breaks Arabic joining */
}
html[lang="ar"] * {
  letter-spacing: 0 !important;
}

/* Arabic reads better slightly larger line-height; uppercase is a no-op but
   text-transform tracking rules can hurt shaping in some browsers. */
html[lang="ar"] body {
  line-height: 1.65;
}

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

/* Keep Latin-only artifacts (logos, video embeds, code) LTR inside RTL flow */
html[dir="rtl"] .w-embed iframe,
html[dir="rtl"] video,
html[dir="rtl"] .brand_logo,
html[dir="rtl"] [data-lightbox-video] {
  direction: ltr;
}

/* Text alignment mirroring: Webflow utility classes pin text left/right */
html[dir="rtl"] [class*="text-align-left"],
html[dir="rtl"] [style*="text-align: left"] {
  text-align: right !important;
}
html[dir="rtl"] [class*="text-align-right"] {
  text-align: left !important;
}

/* Marquee / ticker rows keep their own animation direction (they are
   decorative); force LTR box so transforms don't double-flip. Includes the
   Behind-The-Scenes picture marquees (.marquee-advanced), whose xPercent
   loop assumes LTR flex layout. */
html[dir="rtl"] [data-marquee],
html[dir="rtl"] .marquee_track,
html[dir="rtl"] [data-marquee-scroll-direction-target],
html[dir="rtl"] .marquee-advanced,
html[dir="rtl"] .marquee-advanced__scroll,
html[dir="rtl"] .marquee-advanced__collection {
  direction: ltr;
}

/* Phone numbers must stay LTR: RTL bidi reordering mangles
   "(+974) 44 88 5120" into "5120 88 44 (974+)". Covers the footer tel:
   links on every page and the contact form's phone field/placeholder. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] input[type="tel"] {
  direction: ltr !important;
  unicode-bidi: isolate;
}
html[dir="rtl"] input[type="tel"] {
  text-align: right;
}

/* Swiper sliders: flip navigation arrows visually */
html[dir="rtl"] .swiper-button-next svg,
html[dir="rtl"] .swiper-button-prev svg,
html[dir="rtl"] [class*="slider_arrow"] svg,
html[dir="rtl"] [class*="btn_arrow"] svg,
html[dir="rtl"] .u-icon-small.is-arrow {
  transform: scaleX(-1);
}

/* Generic directional arrow icons inside links/buttons */
html[dir="rtl"] a [class*="icon_arrow"],
html[dir="rtl"] button [class*="icon_arrow"] {
  transform: scaleX(-1);
}

/* Mobile menu links: the right-pointing arrow beside each page name must
   point LEFT (toward the text on its right) in RTL. Hover/reveal animations
   on .nav_menu_link are opacity/translateY only, so no X offset to mirror. */
html[dir="rtl"] .nav_menu_icon svg,
html[dir="rtl"] .nav_menu_icon-svg {
  transform: scaleX(-1);
}

/* Team carousel (/ar/about): the step buttons use text arrow glyphs, not
   SVGs, so the generic arrow flips above miss them. Mirror the glyph so
   each button points in its direction of travel in RTL. */
html[dir="rtl"] .bod_carousel_arrow span {
  display: inline-block;
  transform: scaleX(-1);
}

/* Off-canvas nav menu: Webflow clip-path animation is symmetric, but pinned
   offsets need mirroring. Common absolute pins: */
html[dir="rtl"] .nav_menu_column,
html[dir="rtl"] .nav_menu_grid {
  direction: rtl;
}

/* Forms */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
  text-align: right;
}

/* Numbers / stats keep western digits LTR inline */
html[dir="rtl"] [class*="stat_number"],
html[dir="rtl"] [class*="counter"] {
  unicode-bidi: embed;
}

/* Breadcrumb / inline meta separators flow correctly */
html[dir="rtl"] [class*="breadcrumb"] {
  direction: rtl;
}

/* Desktop nav: the theme parks the CONTACT capsule off-canvas with
   translateX(5rem) until scrolling starts. In RTL the button sits on the
   LEFT edge, so +5rem shoves it into the nav links — mirror the offset. */
@media screen and (min-width: 992px) {
  html[dir="rtl"] .nav_desktop_right_btns {
    transform: translateX(-5rem) rotate(0.001deg);
  }
  html[dir="rtl"] [data-scrolling-started="true"][data-scrolling-top="false"] .nav_desktop_right_btns {
    transform: translateX(0%) rotate(0.001deg);
  }
}

/* Language switcher: keep EN | AR order stable and highlight current */
html[dir="rtl"] .locales_list {
  direction: ltr;
}
.language_link {
  opacity: 0.55;
}
.language_link.w--current {
  opacity: 1;
}