/* ============================================================
   TackTechs - manual RTL fixes (loaded ONLY for the Arabic locale)
   Hand-maintained; not generated by rtlcss.
   ============================================================ */

/* --- Apply a proper Arabic font everywhere ---------------------------------
   The template hard-codes Latin-only fonts (Poppins / Plus Jakarta) on body
   and headings, so Arabic text falls back to ugly system fonts. Force a real
   Arabic typeface across all text in RTL. */
[dir='rtl'] body,
[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3,
[dir='rtl'] h4,
[dir='rtl'] h5,
[dir='rtl'] h6,
[dir='rtl'] p,
[dir='rtl'] a,
[dir='rtl'] span,
[dir='rtl'] li,
[dir='rtl'] label,
[dir='rtl'] button,
[dir='rtl'] input,
[dir='rtl'] textarea,
[dir='rtl'] .butn,
[dir='rtl'] .nav-link,
[dir='rtl'] .sub-title,
[dir='rtl'] .rotate-text,
[dir='rtl'] .rolling-text,
[dir='rtl'] .num,
[dir='rtl'] .stroke {
  font-family: 'Tajawal', 'Cairo', sans-serif !important;
}

/* --- CRITICAL: keep icon fonts intact in RTL ------------------------------
   The Arabic font override above hits every <span>/<a>/<button>/<i> - including
   icon elements (Themify `ti-*`, Font Awesome `fa*`, Pe-icon-7 `pe-7s-*`), whose
   glyphs then render as tofu boxes. Re-assert the icon font on those elements
   with higher specificity (attribute selectors) so the glyphs come back. */
[dir='rtl'] [class^='ti-'],
[dir='rtl'] [class*=' ti-'] {
  font-family: 'themify' !important;
}
[dir='rtl'] .fa,
[dir='rtl'] .fas,
[dir='rtl'] .far,
[dir='rtl'] .fal,
[dir='rtl'] [class^='fa-'],
[dir='rtl'] [class*=' fa-'] {
  font-family: 'Font Awesome 5 Free' !important;
}
[dir='rtl'] .fab {
  font-family: 'Font Awesome 5 Brands' !important;
}
[dir='rtl'] [class^='pe-7s-'],
[dir='rtl'] [class*=' pe-7s-'] {
  font-family: 'Pe-icon-7-stroke' !important;
}

/* Keep Latin words (brand, ERP, Odoo, emails) readable inside Arabic text */
[dir='rtl'] .ltr,
[dir='rtl'] a[href^='mailto'],
[dir='rtl'] .tacktechs-honeypot {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Flip directional arrows for RTL ---------------------------------------
   Horizontal/diagonal arrows must mirror in RTL. ti-arrow-left and -right are
   both flipped so carousel prev/next and pagination point the right way. */
[dir='rtl'] .ti-arrow-top-right,
[dir='rtl'] .ti-arrow-right,
[dir='rtl'] .ti-arrow-left,
[dir='rtl'] .ti-arrow-top-left,
[dir='rtl'] .ti-back-right,
[dir='rtl'] .ti-back-left,
[dir='rtl'] .fa-arrow-right,
[dir='rtl'] .fa-arrow-left,
[dir='rtl'] .fa-long-arrow-alt-right,
[dir='rtl'] .fa-long-arrow-alt-left,
[dir='rtl'] .vi-more .icon,
[dir='rtl'] .tacktechs-service-cta span[aria-hidden='true'],
[dir='rtl'] .circle-button .icon {
  display: inline-block;
  transform: scaleX(-1);
}

/* --- Form inputs: right-align text + placeholders in Arabic ---------------- */
[dir='rtl'] input,
[dir='rtl'] textarea,
[dir='rtl'] select {
  text-align: right;
}
[dir='rtl'] input::placeholder,
[dir='rtl'] textarea::placeholder {
  text-align: right;
}
/* Email/phone fields hold Latin data; keep them LTR but still right-anchored. */
[dir='rtl'] input[type='email'],
[dir='rtl'] input[type='tel'],
[dir='rtl'] input[type='url'] {
  direction: rtl;
}

/* --- Preloader: the "Loading" letters are individual spans; keep them LTR
       so the word does not render reversed/mirrored in RTL. ----------------- */
[dir='rtl'] .loader-wrap-heading,
[dir='rtl'] .load-text {
  direction: ltr;
}

/* --- Arabic must not have letter-spacing (it disconnects the cursive script)
       and small uppercase labels must not wrap into a vertical stack. -------- */
[dir='rtl'] .ls1,
[dir='rtl'] .ls2,
[dir='rtl'] .ls3,
[dir='rtl'] .text-u,
[dir='rtl'] .sub-title,
[dir='rtl'] .all-works-butn {
  letter-spacing: normal !important;
}
[dir='rtl'] .all-works-butn,
[dir='rtl'] .all-works-butn span {
  white-space: nowrap;
  width: auto;
}

/* --- Portfolio grid card badges (img #11): the grey region badge sits on the
       opposite side from the blue category badges. rtlcss mirrored only one of
       them, leaving both on the same side. Pin them explicitly for RTL. ------ */
[dir='rtl'] .tacktechs-portfolio-grid .tacktechs-region-badges {
  right: auto;
  left: 14px;
  justify-content: flex-start;
}
[dir='rtl'] .tacktechs-portfolio-grid .tacktechs-category-badges {
  left: auto;
  right: 14px;
}

/* --- About-us image cluster (img #2): this is a decorative, artistically
       scattered/rotated 3-image montage. rtlcss mirrored the absolute positions
       and negated the rotation, which clumps/overlaps them. Restore the exact
       LTR layout so RTL matches the English version. ------------------------- */
[dir='rtl'] .intro-skill .imgs .img1 {
  left: 30px;
  right: auto;
}
[dir='rtl'] .intro-skill .imgs .img2 {
  left: 30px;
  right: auto;
  transform: rotate(-15deg);
}
[dir='rtl'] .intro-skill .imgs .img3 {
  right: 0;
  left: auto;
  transform: translateY(-50%);
}

/* ===== Integrated from moataz/tacktechs-website-updates (unique additions) === */

/* Forms: Arabic fields should read and type from the right (scoped to main). */
[dir='rtl'] main form input:not([type='hidden']):not([type='submit']):not([type='button']):not([type='reset']):not([type='checkbox']):not([type='radio']),
[dir='rtl'] main form textarea,
[dir='rtl'] main form select {
  direction: rtl;
  text-align: right;
}
[dir='rtl'] main form input::placeholder,
[dir='rtl'] main form textarea::placeholder {
  direction: rtl;
  text-align: right;
}
[dir='rtl'] main form select,
[dir='rtl'] main form select option {
  direction: rtl;
}
[dir='rtl'] main form select {
  text-align-last: right;
}
[dir='rtl'] main form button,
[dir='rtl'] main form .butn,
[dir='rtl'] main form .butn .text {
  text-align: center;
}

/* Section-header pill CTAs: keep the group on the RTL far edge, arrow in a
   stable circle, avoid inline RTL reordering glitches. */
[dir='rtl'] main .sec-head .vi-more {
  margin-right: auto !important;
  margin-left: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  width: max-content;
  max-width: 100%;
  direction: ltr;
  white-space: nowrap;
}
[dir='rtl'] main .sec-head .vi-more .butn {
  order: 2;
  direction: rtl;
  letter-spacing: 0;
  text-align: center;
}
[dir='rtl'] main .sec-head .vi-more > a:not(.butn) {
  order: 1;
  display: inline-flex;
  flex: 0 0 auto;
}
[dir='rtl'] main .sec-head .vi-more .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  line-height: 1;
  background: #0A3C86;
  border-color: #0A3C86;
  color: #fff;
  transform: scaleX(-1);
}
[dir='rtl'] main .sec-head .vi-more .icon::before {
  line-height: 1;
}

/* Selected Works uses an RTL-aware Swiper; keep its prev/next glyphs tied to
   the actual controls instead of the broad arrow mirror. */
[dir='rtl'] main section.work-crev .swiper-button-prev .ti-arrow-left,
[dir='rtl'] main section.work-crev .swiper-button-next .ti-arrow-right {
  transform: none;
}

/* Portfolio badges: Arabic cards keep category badges on the right and region
   badges on the left without flipping the whole card. */
[dir='rtl'] .tacktechs-portfolio-grid .tacktechs-category-badges {
  right: 14px !important;
  left: auto !important;
  align-items: flex-start !important;
}
[dir='rtl'] .tacktechs-portfolio-grid .tacktechs-region-badges {
  left: 14px !important;
  right: auto !important;
}

/* Project detail bottom nav: keep "All Projects" horizontal in Arabic. */
[dir='rtl'] .tacktechs-project-nav .all-works-butn {
  left: 50% !important;
  right: auto !important;
  -webkit-transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  width: max-content;
  min-width: max-content;
  text-align: center;
  direction: rtl;
  writing-mode: horizontal-tb;
  word-break: normal;
  overflow-wrap: normal;
}
[dir='rtl'] .tacktechs-project-nav .all-works-butn span {
  writing-mode: horizontal-tb;
}
[dir='rtl'] .tacktechs-project-nav .all-works-butn span:last-child {
  display: block;
  min-width: max-content;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  text-align: center;
}