/* ============================================
   CUSTOM RTL — Bi Innovate
   Arabic RTL-specific overrides ONLY.
   Font declarations are in custom.fonts.css.
   Nav dropdown rules are in custom.nav.css.
   ============================================ */

/* ============================================
   RTL Direction Fixes — Icons & Pseudo-elements
   ============================================ */

/* sub-title icon: flip margin + mirror SVG arrow */
.section-title .sub-title:before,
.slide-content .sub-title:before,
.work-with-content .sub-title:before {
  margin-right: 0;
  margin-left: 10px;
  transform: scaleX(-1);
}

/* Fix missing background grid in Arabic Hero section */
html[dir="rtl"] .hero-bg {
  left: 0 !important;
  right: auto !important;
  transform: scaleX(-1);
}

/* Arabic hero h1 wraps to 2 lines — remove the negative margin that
   causes the bottom line to be clipped by the hero-bottom-image. */
html[dir="rtl"] .hero-content h1 {
  line-height: 1.25 !important;  
}

/* list-style-one bullet icon */
.list-style-one li:before {
  margin-right: 0;
  margin-left: 12px;
}

/* list-style-three bullet icon */
.list-style-three li:before {
  margin-right: 0;
  margin-left: 12px;
}

/* Flip directional arrow icons */
.fa-arrow-right,
.fa-arrow-left,
.fa-long-arrow-right,
.fa-long-arrow-left,
[class*="fa-arrow-right"],
[class*="fa-arrow-left"],
[class*="fa-long-arrow"] {
  display: inline-block;
  transform: scaleX(-1);
}

/* Breadcrumb separator */
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "‹";
}

/* Text alignment for section headings */
.section-title,
.section-title h2,
.section-title p {
  text-align: right;
}

/* ============================================
   Form RTL Fixes
   ============================================ */
.contact-form label i {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

#bi-zoho-submit-btn i, .sidebar-btn i {
  transform: rotate(180deg) !important;
  margin-right: 10px !important;
  margin-left: 0 !important;
}

/* ============================================
   Navigation Arrow Flips
   ============================================ */
.work-step-item:not(.arrow-none)::after {
  transform: scaleX(-1) translateY(0) !important;
  right: auto !important;
  left: -20px !important;
}

.theme-btn i.fa-arrow-right,
.details-btn i.fa-arrow-right,
button[type="submit"] i.fa-arrow-right {
  transform: rotate(180deg) !important;
}

/* ============================================
   Fix Clipped Arabic Text in Headline Marquee
   ============================================ */
html[dir="rtl"] .headline-text {
  line-height: 1.25 !important;
  padding-bottom: 0.15em;
}

/* ============================================
   About Section — Right-align Arabic headings
   ============================================ */
html[dir="rtl"] .about-four-content .section-title,
html[dir="rtl"] .about-four-content .section-title h2,
html[dir="rtl"] .about-four-content .section-title p,
html[dir="rtl"] .about-four-content .section-title span {
  text-align: right;
}

/* NOTE: .headline-area.bgc-primary palette rule moved to custom.ui.css
   (it was scoped to both LTR + RTL and contained only palette values —
   direction-agnostic, so it does not belong here per the contract). */

/* ============================================
   RTL: Scroll-Top vs Zoho SalesIQ Fix
   Move scroll-top to bottom-right in RTL so
   the two elements never overlap.
   ============================================ */
html[dir="rtl"] .scroll-top {
  left: auto !important;
  right: 20px !important;
}

/* Nudge SalesIQ widget away from the edge in RTL */
html[dir="rtl"] #zsiq_float {
  left: 20px !important;
  right: auto !important;
}

/* ============================================
   RTL: Fix scroll-to-top icon visibility
   fa-angle-up must NOT be flipped by the global
   arrow-flip rule.
   ============================================ */
html[dir="rtl"] .scroll-top i {
  /* Scroll-top sits on the accent-filled button — stays white in both
     themes. Using the contrast token keeps that constant. */
  color: var(--c-accent-contrast) !important;
  display: inline-block !important;
  transform: none !important;
  -webkit-transform: none !important;
  font-size: 16px !important;
}

/* ============================================
   RTL: Inner page icons — force inherited color
   ============================================ */
html[dir="rtl"] .page-banner i,
html[dir="rtl"] .service-section i,
html[dir="rtl"] .why-choose-item i,
html[dir="rtl"] .work-step-item .icon i,
html[dir="rtl"] .feature-six-item .icon i {
  color: inherit;
}

/* ============================================
   RTL: Sidebar toggler icon fix
   ============================================ */
html[dir="rtl"] .menu-sidebar button img,
html[dir="rtl"] .menu-sidebar button svg {
  filter: brightness(10) !important;
}

/* ============================================
   RTL: Service Grid Details Arrow
   ============================================ */
html[dir="rtl"] .service-grid-item .details-btn {
  align-self: flex-end;
}

html[dir="rtl"] .service-grid-item .details-btn i {
  transform: scaleX(-1);
}

/* ============================================
   RTL: Accordion chevron flip
   ============================================ */
html[dir="rtl"] .accordion-button {
  text-align: right !important;
}

html[dir="rtl"] .accordion-button::after {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ============================================
   RTL: Why Choose Header — icon margin
   ============================================ */
html[dir="rtl"] .why-choose-header {
  flex-direction: row-reverse;
}

/* ============================================
   RTL: Step connector line — mirror position
   ============================================ */
html[dir="rtl"] .flow-step:not(.flow-step--last)::after {
  left: auto;
  right: 46px;
}

/* ============================================
   RTL: Center-aligned sections keep center
   ============================================ */
html[dir="rtl"] .section-title.text-center,
html[dir="rtl"] .section-title.text-center h2,
html[dir="rtl"] .section-title.text-center p {
  text-align: center !important;
}

/* ============================================
   RTL: TaxBridge
   ============================================ */
html[dir="rtl"] .tb-spot-feat i {
  margin-left: 0;
  margin-right: 0;
}

html[dir="rtl"] .ti-connector i {
  margin-left: 0;
}

html[dir="rtl"] .tb-spot-logos {
  flex-direction: row;
}