/* RTL overrides — loaded only on the /ar/ page.
   The base stylesheet uses physical properties (margin-left, padding-left,
   left/right offsets, border-left). This file flips them for dir="rtl". */

html[dir="rtl"] body,
.lang-ar {
  font-family: var(--font-arabic, "Cairo", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif);
}

html[dir="rtl"] {
  text-align: right;
  /* Plus Jakarta Sans (the display font) has no Arabic glyphs and falls back
     to system Arabic, which looks heavier/looser than Cairo used elsewhere.
     Putting Cairo first so headings/titles in RTL render in Cairo for a
     consistent type style across the page. */
  --font-display: "Cairo", "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Topbar ----------------------------------------------------------------- */
/* Dot separator sits at left:0 of each non-first <li>; in RTL the leading
   edge is the right side, so the dot must move to right:0. Padding flips too. */
html[dir="rtl"] .topbar__segments li + li::before {
  left: auto;
  right: 0;
}
html[dir="rtl"] .topbar__segments li:first-child {
  padding-left: 16px;
  padding-right: 0;
}

/* Nav -------------------------------------------------------------------- */
html[dir="rtl"] .nav-promo {
  margin-left: 0;
  margin-right: 8px;
  padding-left: 0;
  padding-right: 14px;
  border-left: 0;
  border-right: 1px solid rgba(15,23,42,0.1);
}
html[dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; }

/* Lists — keep bullets on the inline-start side (rtl: right) */
html[dir="rtl"] .insight-panel__body ul,
html[dir="rtl"] .legal-list,
html[dir="rtl"] .faq-list ul,
html[dir="rtl"] .site-footer ul {
  padding-left: 0;
  padding-right: 18px;
}

/* Custom absolute-positioned bullets — base CSS pins them at left:0; flip to right:0 */
html[dir="rtl"] .service-card__split li {
  padding-left: 0;
  padding-right: 16px;
}
html[dir="rtl"] .service-card__split li::before {
  left: auto;
  right: 0;
}
html[dir="rtl"] .partner-faq li {
  padding-left: 0;
  padding-right: 18px;
}
html[dir="rtl"] .partner-faq li::before {
  left: auto;
  right: 0;
}

/* FAQ / details — flip the summary chevron if any pseudo arrow uses left */
html[dir="rtl"] details > summary { text-align: right; }

/* Service card icon block sits flush start — already block; ensure text aligns */
html[dir="rtl"] .service-card,
html[dir="rtl"] .feature-card,
html[dir="rtl"] .insight-panel__body,
html[dir="rtl"] .trust-strip__item,
html[dir="rtl"] .legal-card,
html[dir="rtl"] .process-item,
html[dir="rtl"] .partner-copy,
html[dir="rtl"] .section-copy,
html[dir="rtl"] .form-section-copy,
html[dir="rtl"] .hero-copy { text-align: right; }

/* Trust strip — icon stays at inline-start (rtl: right) automatically via flex,
   but on legacy layouts using float, ensure block flow */
html[dir="rtl"] .trust-strip__item { flex-direction: row-reverse; }

/* Trust strip dividers ----------------------------------------------------
   Base CSS pins the vertical divider at left:0 of every non-first item, which
   in RTL ends up between visually-leftmost pairs and leaves a dangling line on
   the leftmost item. Flip to right:0 so dividers fall between the visually
   adjacent items, matching the LTR appearance. */
html[dir="rtl"] .trust-strip__item + .trust-strip__item::before {
  left: auto;
  right: 0;
}

/* Main nav dividers — same RTL flip as the trust-strip. */
html[dir="rtl"] .nav-links > a + a::before,
html[dir="rtl"] .nav-links > a + .nav-dropdown::before,
html[dir="rtl"] .nav-links > .nav-dropdown + a::before,
html[dir="rtl"] .nav-links > .nav-dropdown + .nav-dropdown::before {
  left: auto;
  right: 0;
}

/* Promo band stats — flex flips naturally; no override needed */

/* Section heading aside image — usually on the right in FR; in AR keep it on the left visually so it doesn't compete with RTL reading order */
html[dir="rtl"] .section-heading--with-aside { direction: rtl; }

/* Form ------------------------------------------------------------------- */
html[dir="rtl"] .field-input { direction: rtl; }
html[dir="rtl"] .field-input .icon {
  /* The icon sits at the start (right in rtl) — handled by flexbox; ensure spacing */
}
html[dir="rtl"] .field-input input,
html[dir="rtl"] .field-input select {
  text-align: right;
}
html[dir="rtl"] .field-input input[type="email"],
html[dir="rtl"] .field-input input[type="tel"],
html[dir="rtl"] .field-input input[dir="ltr"] {
  text-align: left;
}

/* City combobox toggle (chevron) — sits at the end (rtl: left) */
html[dir="rtl"] .city-combobox .combobox-toggle {
  right: auto;
  left: 12px;
}
html[dir="rtl"] .city-input {
  padding-right: 44px;
  padding-left: 44px;
}
html[dir="rtl"] .combobox-options li { text-align: right; }
html[dir="rtl"] .combobox-options li .city-ar {
  /* In /ar/ this span holds the French name as the secondary label */
  font-family: var(--font-display);
  direction: ltr;
}

/* Consent block — already styled for AR in landing.css with direction: rtl */
html[dir="rtl"] .consent-check { flex-direction: row-reverse; }
html[dir="rtl"] .consent-text { text-align: right; }

/* Form submit button arrow points right (send) — flip horizontally for rtl */
html[dir="rtl"] .btn .send,
html[dir="rtl"] .chatbot-form button svg {
  transform: scaleX(-1);
}

/* Primary CTA chevron (mask-based pseudo-element) — flip to point left in RTL */
html[dir="rtl"] .btn-primary::after {
  transform: scaleX(-1);
}
html[dir="rtl"] .btn-primary:hover::after {
  transform: scaleX(-1) translateX(2px);
}

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

/* Chatbot widget --------------------------------------------------------- */
html[dir="rtl"] .chatbot-fab {
  right: auto;
  left: 22px;
}
html[dir="rtl"] .chatbot-panel {
  right: auto;
  left: 22px;
  text-align: right;
}
html[dir="rtl"] .chatbot-msg p,
html[dir="rtl"] .chatbot-suggestions button,
html[dir="rtl"] .chatbot-form input { text-align: right; }
html[dir="rtl"] .chatbot-header .chatbot-close {
  margin-left: 0;
  margin-right: auto;
}

/* Hero carousel — arrows / dots — keep dots centered (no change) */

/* Media queries ---------------------------------------------------------- */
@media (max-width: 768px) {
  html[dir="rtl"] .chatbot-fab { right: auto; left: 16px; }
  html[dir="rtl"] .chatbot-panel { right: 12px; left: 12px; }
}

/* Trust strip on mobile (RTL) — group icon + text instead of stranding the
   icon on the far left with a big gap. This MUST live here (not in
   landing.css) because landing-rtl.css loads last and would otherwise
   override the row direction back to row-reverse. With flex-direction: row
   in an RTL container the icon sits at the inline-start (right) and the text
   block fills the space to its left, right-aligned so it hugs the icon. */
@media (max-width: 640px) {
  html[dir="rtl"] .trust-strip__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
  }
  html[dir="rtl"] .trust-strip__item > div {
    flex: 1 1 auto;
    text-align: right;
  }
}

/* Cancel base form-card AR-only display rules so consent text actually shows
   (in /ar/ there is no FR span to hide-toggle against) */
html[dir="rtl"] .consent-text [data-lang="ar"] { display: block; }

/* Hide the consent FR-toggle button on the AR page (we removed it) */
html[dir="rtl"] .consent-lang-toggle { display: none; }

/* Numbers with thousands separators must render as LTR-isolated runs,
   otherwise the bidi algorithm can flip "2 500" into "500 2" in Arabic context. */
html[dir="rtl"] .promo-band__num,
html[dir="rtl"] .promo-band__stats strong,
html[dir="rtl"] .partner-media__chip strong {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}
/* Service card numbered badge — keep its original inline-flex centering, just
   isolate the digits so "01" never bidi-flips. */
html[dir="rtl"] .service-card__icon {
  unicode-bidi: isolate;
  direction: ltr;
  text-align: center;
}
html[dir="rtl"] bdi { unicode-bidi: isolate; direction: ltr; }