/* ===================================================================
   Triple — Arabic / RTL layer
   -------------------------------------------------------------------
   Loaded only by the pages under /ar/. The template's own CSS is
   written LTR with physical properties (left/right/float/text-align),
   so this file flips the pieces that matter instead of rewriting it.

   Anything written in custom.css uses logical properties and mirrors
   on its own — it needs nothing here.
   =================================================================== */

@import url("/assets/fonts/ibm-plex-arabic/ibm-plex-arabic.css");

/* ---------- 1. Type ------------------------------------------------ */
:root {
  /* Cairo first for Arabic, the template faces stay as Latin fallback */
  --body-font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --heading-font-family: "IBM Plex Sans Arabic", "Outfit", system-ui, sans-serif;
}
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  font-family: var(--body-font-family);
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .h1, html[dir="rtl"] .h2, html[dir="rtl"] .h3,
html[dir="rtl"] .h4, html[dir="rtl"] .h5, html[dir="rtl"] .h6 {
  font-family: var(--heading-font-family);
  /* Arabic needs a little more leading than the Latin faces */
  line-height: 1.45;
}
/* Arabic has no uppercase; the template shouts in a lot of places */
html[dir="rtl"] .sub-title,
html[dir="rtl"] .theme-btn,
html[dir="rtl"] .btn-more,
html[dir="rtl"] .navigation > li > a,
html[dir="rtl"] .marquee-section .text,
html[dir="rtl"] .hero-full__btn,
html[dir="rtl"] .hero-chips a {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- 2. Base direction -------------------------------------- */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .text-center { text-align: center !important; }

/* Bootstrap's grid float/offsets */
html[dir="rtl"] .row { --bs-gutter-x: 1.5rem; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }
html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

/* ---------- 3. Header & navigation --------------------------------- */
html[dir="rtl"] .main-menu .navigation > li { margin-right: 0; margin-left: 38px; }
html[dir="rtl"] .main-menu .navigation > li:last-child { margin-left: 0; }
html[dir="rtl"] .main-header .logo-box { margin-right: 0; margin-left: 40px; }
html[dir="rtl"] .support-box .icon,
html[dir="rtl"] .info-box .icon { margin-right: 0; margin-left: 14px; }

/* mobile drawer slides in from the right */
html[dir="rtl"] .mobile-menu { left: auto; right: 0; transform: translateX(100%); }
html[dir="rtl"] .mobile-menu-visible .mobile-menu { transform: translateX(0); }
html[dir="rtl"] .mobile-menu .close-btn { left: auto; right: 20px; }
html[dir="rtl"] .mobile-menu .navigation li > a { padding-left: 0; padding-right: 20px; }

/* ---------- 4. Lists, icons, arrows -------------------------------- */
html[dir="rtl"] ul { padding-right: 0; }
html[dir="rtl"] .list-style-one li,
html[dir="rtl"] .list-item li { padding-left: 0; padding-right: 30px; }
html[dir="rtl"] .list-style-one li .icon,
html[dir="rtl"] .list-item li .icon { left: auto; right: 0; }

/* directional arrows point the other way in RTL */
html[dir="rtl"] .theme-btn span img,
html[dir="rtl"] .btn-more img,
html[dir="rtl"] .arrow-icon img,
html[dir="rtl"] .back-to-top-btn svg { transform: scaleX(-1); }

/* ---------- 5. Cards & sections ------------------------------------ */
html[dir="rtl"] .service-block .number,
html[dir="rtl"] .work-block .number { left: auto; right: 30px; }
html[dir="rtl"] .service-block .plus-icon,
html[dir="rtl"] .project-block .plus-icon { right: auto; left: 30px; }
html[dir="rtl"] .sec-title,
html[dir="rtl"] .sec-title-box { text-align: right; }
html[dir="rtl"] .sec-title.text-center { text-align: center; }
html[dir="rtl"] .accordion-box .block .acc-btn { padding-left: 60px; padding-right: 30px; }
html[dir="rtl"] .accordion-box .block .acc-btn .icon { right: auto; left: 30px; }

/* ---------- 6. Forms ----------------------------------------------- */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; }
html[dir="rtl"] .contact-section form select {
  background-position: left 18px center;
  padding-left: 44px; padding-right: 20px;
}
/* phone numbers and emails stay left-to-right inside Arabic text */
html[dir="rtl"] .ltr,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ---------- 7. Footer ---------------------------------------------- */
html[dir="rtl"] .main-footer .footer-widget { text-align: right; }
html[dir="rtl"] .main-footer .social-icon { padding-right: 0; }

/* ---------- 8. Sliders --------------------------------------------- */
/* Swiper reads the dir attribute itself; these are the leftovers */
html[dir="rtl"] .swiper-button-prev img,
html[dir="rtl"] .swiper-button-next img { transform: scaleX(-1); }
html[dir="rtl"] .marquee-section .marquee-inner { animation-direction: reverse; }

/* ---------- 9. Kill per-character animation ------------------------
   GSAP SplitText wraps every character in its own element. In Arabic
   that severs the joins and the word renders as loose letters. The
   class is stripped from the /ar/ markup; this is the safety net for
   anything that still carries it. */
html[dir="rtl"] .char-animation,
html[dir="rtl"] .char-animation * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ---------- 10. Header: the template floats, floats do not flip ----
   .navigation > li is float:left in the template, so the Arabic menu
   read left-to-right even though everything around it was mirrored.
   Floats ignore dir, so they have to be flipped by hand. */
html[dir="rtl"] .main-menu .navigation > li,
html[dir="rtl"] .sticky-header .navigation > li { float: right; }
html[dir="rtl"] .main-menu .navigation { display: flex; flex-direction: row; justify-content: flex-start; }
html[dir="rtl"] .main-menu .navigation > li { float: none; }
/* the drawer holds a clone of the same list and must stay a stack — a float
   here turned the Arabic menu into rows running off the edge */
html[dir="rtl"] .mobile-menu .navigation { display: block; }
html[dir="rtl"] .mobile-menu .navigation > li { float: none; width: 100%; }

/* ---------- 11. Mobile drawer ------------------------------------- */
html[dir="rtl"] .mobile-menu .close-btn {
  left: auto; right: 20px; top: 20px;
  z-index: 10; position: absolute;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 20px; cursor: pointer;
}
html[dir="rtl"] .mobile-menu .close-btn:hover { background: var(--brand-gold); color: #1A1332; }

/* ---------- 12. Cards: number and icon share a corner -------------- */
html[dir="rtl"] .service-block .inner-block { position: relative; }
html[dir="rtl"] .service-block .number { left: auto; right: auto; inset-inline-start: 30px; }
html[dir="rtl"] .service-block .content .icon { margin-inline-start: 0; }

/* ---------- 13. Blog card: read-more and read-time collide --------- */
html[dir="rtl"] .blog-block .inner-box,
html[dir="rtl"] .blog-block .content-box .inner-box {
  display: flex; flex-direction: column; gap: 6px;
}
html[dir="rtl"] .blog-block .btn-more { position: static; margin-block-start: 6px; }
html[dir="rtl"] .blog-block .time-text { position: static; margin-block-start: 2px; }

/* ---- Preloader ----------------------------------------------------
   The word is our name in Latin letters. Inside an RTL document the
   bidi algorithm reverses the run, so it renders "ELPIRT" — isolate it.
------------------------------------------------------------------- */
html[dir="rtl"] .text-preloading,
html[dir="rtl"] .text-preloader-outer {
  direction: ltr;
  unicode-bidi: isolate;
}