/* =============================================================================
   rtl.css — Arabic / right-to-left layer.

   Loaded ONLY by pages under /ar/. The left-to-right site never sees it.

   Most of the RTL work was already done: every page is authored with CSS
   logical properties (ps-/pe-, ms-/me-, start-/end-, text-start, border-s-),
   so dir="rtl" flips spacing and alignment on its own. This file handles the
   things direction alone does not fix — chiefly typography.
   ========================================================================== */

/* --- Typeface -------------------------------------------------------------
   Manrope and Work Sans have no Arabic coverage at all — without this the
   browser falls back to a system Arabic face and the page loses its identity.

   Cairo (headings) and Tajawal (body) both ship Arabic AND Latin subsets,
   which matters here because the copy mixes scripts constantly: "CBCT",
   "ConfiDental", "3D". A single family across both keeps that from looking
   like two different websites inside one sentence.                           */
:root {
  --cec-font-display: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --cec-font-body: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] .font-body-md,
[dir="rtl"] .font-body-lg,
[dir="rtl"] .font-label-md {
  font-family: var(--cec-font-body);
}

[dir="rtl"] .font-display-lg,
[dir="rtl"] .font-headline-lg,
[dir="rtl"] .font-headline-md,
[dir="rtl"] .font-headline-lg-mobile,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: var(--cec-font-display);
}

/* --- Letter-spacing MUST be zero -----------------------------------------
   This is the one that silently ruins Arabic. The design system applies
   letter-spacing to labels (0.05em) and display text (-0.02em). Arabic is a
   cursive script: adding tracking pulls the glyphs apart and BREAKS THE
   JOINS, so words visually disintegrate into disconnected letters.
   Every tracking utility is neutralised under RTL.                          */
[dir="rtl"] * {
  letter-spacing: 0 !important;
}

/* --- Uppercase is meaningless in Arabic ----------------------------------
   Arabic has no letter case. text-transform: uppercase is a no-op on Arabic
   glyphs but WOULD still uppercase any embedded Latin ("cbct" -> "CBCT"),
   giving an inconsistent look mid-sentence. Turned off; the eyebrow labels
   keep their emphasis through colour and weight instead.                    */
[dir="rtl"] .uppercase {
  text-transform: none;
}

/* --- Vertical rhythm ------------------------------------------------------
   Arabic glyphs carry marks above and below the baseline. At the Latin line
   heights the text feels cramped and the diacritics collide, so body copy
   gets a little more room.                                                  */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] blockquote {
  line-height: 1.9;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  line-height: 1.5;
}

/* --- No synthetic italics -------------------------------------------------
   Arabic has no italic tradition and no true italic cut in these families,
   so the browser fakes one by slanting the glyphs — which looks like a
   rendering fault rather than emphasis.                                     */
[dir="rtl"] .italic,
[dir="rtl"] em,
[dir="rtl"] cite {
  font-style: normal;
}
[dir="rtl"] blockquote p.italic {
  font-weight: 500;   /* keep the emphasis, lose the slant */
}

/* --- Numbers and mixed-direction runs ------------------------------------
   Phone numbers, prices and Latin brand names inside Arabic sentences are
   handled by the Unicode bidi algorithm, but isolating them stops a trailing
   "+" or "%" jumping to the wrong end of the run.

   NOTE: <time> is deliberately NOT in this list. Arabic dates read
   "4 مارس 2026" — the month name is Arabic, so forcing direction: ltr on the
   element reverses the reading order of the whole date. Isolation alone is
   what these need; the neighbouring text must not reorder them, but their own
   internal direction has to stay RTL.                                        */
[dir="rtl"] .ltr-isolate,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

/* Isolated, but direction inherited from the page. */
[dir="rtl"] time {
  unicode-bidi: isolate;
}

/* --- Directional glyphs ---------------------------------------------------
   Arrow icons point "forward", which is leftwards in RTL. The markup uses one
   arrow_forward icon everywhere, so mirror it rather than swapping every icon.
   Chevrons in the carousel are mirrored for the same reason.                */
[dir="rtl"] .material-symbols-outlined.mirror-rtl,
[dir="rtl"] [data-carousel-prev] .material-symbols-outlined,
[dir="rtl"] [data-carousel-next] .material-symbols-outlined,
[dir="rtl"] [data-lb-prev] .material-symbols-outlined,
[dir="rtl"] [data-lb-next] .material-symbols-outlined {
  transform: scaleX(-1);
}

/* group-hover:translate-x-1 nudges arrows to the right; in RTL "forward" is
   left, so the nudge is reversed. */
[dir="rtl"] .group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: -0.25rem;
}

/* --- Breadcrumb separators ------------------------------------------------
   A literal "/" between crumbs reads oddly in an RTL run; the bidi algorithm
   keeps it upright but the slant points the wrong way visually.             */
[dir="rtl"] nav[aria-label="Breadcrumb"] li[aria-hidden="true"] {
  transform: scaleX(-1);
  display: inline-block;
}

/* --- Form fields ----------------------------------------------------------
   Fields holding Latin-only data (email, phone, discount codes) stay LTR so
   the caret starts where the user expects and "+20" reads correctly.        */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[name="code"] {
  direction: ltr;
  text-align: right;   /* stays visually aligned with the rest of the form */
}

/* --- Decorative oversized glyphs -----------------------------------------
   The big watermark icons are positioned with -end-10 / -start-8 and flip
   automatically. Nothing to do — noted so nobody "fixes" it.                */