/* ============================================================
   Unibox360 — RTL layout overrides (Arabic)
   ============================================================
   v2 — rewritten after reviewing the ACTUAL site CSS files.

   Key correction from v1: CSS flexbox and grid with the default
   flow (flex-direction: row / grid-auto-flow: row) ALREADY mirror
   automatically under dir="rtl" — the browser reverses the visual
   order on its own. The previous version of this file added
   flex-direction: row-reverse on top of that, which would have
   DOUBLE-reversed several components (nav links, footer columns,
   footer socials, mega-menu links) back to looking LTR. Removed.

   What genuinely needs manual RTL handling is anything using a
   PHYSICAL property that doesn't auto-flip: left/right positioning,
   border-left/border-right, padding-left/right, margin-left/right,
   text-align: left/right, border-radius corners. Those are covered
   below, sourced from the real selectors in the uploaded CSS files.
   ============================================================ */

[dir="rtl"] {
  font-family: 'Cairo', 'Poppins', sans-serif;
}

/* ── Nav bar (site-chrome.css) ── */
/* DESIGN DECISION: on MOBILE ONLY, the top bar's logo + hamburger button
   stay in a fixed position regardless of language — logo always left,
   hamburger always right. On DESKTOP, there is no hamburger button (it's
   hidden entirely) and the nav bar was already mirroring correctly before
   — logo moving to the right, nav-links/nav-right mirroring — so this
   fix must NOT apply there. It previously had no media-query scope at
   all, which incorrectly froze the desktop layout too and regressed it
   back to looking LTR. Scoped to max-width:991.98px now, matching exactly
   where the hamburger button is visible and where the swap was reported.

   Mechanism: .container-xl (holds logo + toggler + the collapse panel) is
   forced back to direction:ltr on mobile only, which freezes those two
   directly-inside children in place. .navbar-collapse (the panel with
   nav-links/nav-right) is a descendant of that container, so it would
   inherit the forced ltr too — re-asserted back to rtl on it specifically,
   so the dropdown's own content (once opened) still mirrors correctly. */
@media (max-width: 991.98px) {
  [dir="rtl"] .site-nav .container-xl {
    direction: ltr;
  }
  [dir="rtl"] .navbar-collapse {
    direction: rtl;
  }
}

/* .nav-right uses physical margin-left:auto to push itself to the end of
   the flex row — under RTL (desktop only; on mobile .nav-right becomes a
   full-width column instead, so this has no effect there and isn't
   needed). */
@media (min-width: 992px) {
  [dir="rtl"] .nav-right {
    margin-left: 0;
    margin-right: auto;
  }
}

/* .lang-dropdown anchors its right edge to the button (right:0). Flip so
   it anchors from the left, matching the mirrored position of the switcher
   itself once .nav-right moves to the visual left under RTL. */
[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 0;
}
[dir="rtl"] .lang-option {
  text-align: right;
}

/* mega-dropdown is centered via left:50% + translateX(-50%) — that's already
   direction-agnostic, no change needed. mega-link-arrow (chevron_right) is a
   directional glyph though, and flex auto-mirror alone doesn't flip glyph
   shapes — mirror it so it still visually "points forward". */
[dir="rtl"] .mega-link-arrow {
  transform: scaleX(-1);
}

/* ── Footer (site-chrome.css) ── */
/* .footer-top/.footer-links/.footer-socials/.footer-legal are flex/grid with
   default flow — already auto-mirrored by dir="rtl", intentionally left
   alone here. Nothing in the footer uses a physical left/right property
   that needs a manual fix. */

/* ── Shared "meta stats" divider component
   (index/pme/retail/voyage/entreprises/grandes-entreprises/pricing/
   integrations/espace-client/blog all reuse .meta-stat-item /
   .meta-prem-stat) — border-right divides items in a row, removed on
   :last-child. Since flex/grid order already mirrors, the same DOM child
   ends up on the opposite visual side, so the border needs to move to the
   opposite physical side to still sit "between" neighbors correctly. */
[dir="rtl"] .meta-stat-item,
[dir="rtl"] .meta-prem-stat {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
[dir="rtl"] .meta-stat-item:last-child,
[dir="rtl"] .meta-prem-stat:last-child {
  border-left: none;
}
[dir="rtl"] .meta-stat-item:first-child,
[dir="rtl"] .meta-prem-stat:first-child {
  border-right: none;
}

/* ── Contact form (contact.css) ── */
/* .req (the red required-field asterisk) had margin-left:2px to space it
   from the label text before it — under RTL the asterisk sits before the
   label visually, so the spacing needs to move to the other side. */
[dir="rtl"] .req {
  margin-left: 0;
  margin-right: 2px;
}
/* .phone-prefix-select (flag + country code) has border-right separating it
   from the number input — after auto-mirror it visually sits on the right,
   so its divider border needs to move to its left side, adjoining the
   input field. */
[dir="rtl"] .phone-prefix-select {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
[dir="rtl"] select.form-control-ub {
  background-position: left 10px center;
  padding-right: 13px;
  padding-left: 32px;
}

/* ── Legal pages (data-deletion.css / privacy.css / terms.css) ── */
/* List markers/numbers use padding-left to indent from the marker —
   flip so markers sit on the right, matching Arabic reading order. */
[dir="rtl"] .legal-section ul,
[dir="rtl"] .legal-section ol,
[dir="rtl"] .legal-toc ol {
  padding-left: 0;
  padding-right: 1.4rem;
}
/* .legal-highlight / .legal-warn use a colored left accent border with
   matching asymmetric border-radius — mirror both to the right side. */
[dir="rtl"] .legal-highlight {
  border-left: none;
  border-right: 3px solid var(--accent);
  border-radius: 10px 0 0 10px;
}
[dir="rtl"] .legal-warn {
  border-left: none;
  border-right: 3px solid #fbbf24;
  border-radius: 10px 0 0 10px;
}
/* .timeline-item (data-deletion.php) is a flex row (dot + text) that
   auto-mirrors, putting the dot on the right under RTL — its connecting
   vertical line (::before, positioned via left:12px) needs to follow the
   dot to the right side. */
[dir="rtl"] .timeline-item::before {
  left: auto;
  right: 12px;
}

/* ── Generic utility ── */
/* Any element explicitly set to text-align:left in the original design
   (callouts, quotes, etc.) should mirror to the right in Arabic. */
[dir="rtl"] .text-align-left,
[dir="rtl"] [style*="text-align:left" i],
[dir="rtl"] [style*="text-align: left" i] {
  text-align: right !important;
}

/* ============================================================
   NOTE FOR FOLLOW-UP: the property scan across all 15 page CSS files
   also surfaced a handful of decorative, ambient elements (soft
   background glows positioned like `right:-40px` / `left:-100px`,
   often on ::before/::after pseudo-elements). These are soft blurred
   accents, not structural layout, and mirroring them isn't visually
   critical — left as-is intentionally rather than guessed at blindly.
   If anything looks visually off in a specific corner once you preview
   the Arabic version live, tell me the page and I'll target that exact
   selector precisely instead of guessing generically.
   ============================================================ */