/* ============================================================
   docanned.com — RTL (Arabic) overrides
   Loaded ONLY on /ar/ pages (<html dir="rtl">), after site.css,
   via head-assets.php. Flexbox + default text-align mirror
   automatically under dir=rtl; this file applies the Arabic
   webfont and flips the direction-specific rules that DON'T
   auto-flip (float, absolute left/right, asymmetric margins,
   the language-menu position, lightbox arrows).
   ============================================================ */

/* ---- Arabic webfont everywhere (Fraunces/Inter carry no Arabic glyphs) ---- */
html[dir="rtl"], html[dir="rtl"] body{font-family:'Cairo','Inter',system-ui,-apple-system,Segoe UI,sans-serif;}
html[dir="rtl"] *{font-family:inherit !important;}
html[dir="rtl"] body{text-align:right;}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{letter-spacing:0;} /* Latin letter-spacing hurts Arabic */

/* ---- Header: language switcher + nav spacing ---- */
html[dir="rtl"] #nav .lang{margin-right:0;margin-left:10px;}
html[dir="rtl"] #nav .lang-menu{left:auto;right:2px;align-items:flex-end;}
html[dir="rtl"] #nav .lang-menu::before{left:0;right:0;}
html[dir="rtl"] #nav .lang-mobile-btn{text-align:right;}
html[dir="rtl"] #nav .lang-mobile-btn .lang-mobile-caret{margin-left:0;margin-right:auto;}
html[dir="rtl"] #nav .lang-mobile-menu{padding-left:0;padding-right:38px;}
/* mega-menu is centered via translateX(-50%) (symmetric); its columns/links
   align to the start (= right) automatically under dir=rtl. */

/* ---- Article / content helpers ---- */
html[dir="rtl"] .ah-back{left:auto;right:var(--gutter);}
html[dir="rtl"] .body .lead::first-letter{float:right;padding:8px 0 0 12px;}

/* ---- Lightbox arrows / close flip ---- */
html[dir="rtl"] .lb .prev{left:auto;right:20px;}
html[dir="rtl"] .lb .next{right:auto;left:20px;}
html[dir="rtl"] .lb .close{right:auto;left:22px;}

/* ---- Lists: bullets/numbers on the right ---- */
html[dir="rtl"] ul,html[dir="rtl"] ol{padding-right:1.4em;padding-left:0;}

/* ---- Keep Latin/number runs rendering LTR inside Arabic text ----
   (brand names, OEM/ISO/HACCP, phone numbers, URLs, Western digits).
   Wrap such runs in <bdi> or dir="ltr" in the markup where needed. */
html[dir="rtl"] bdi,html[dir="rtl"] [dir="ltr"]{direction:ltr;unicode-bidi:isolate;}
html[dir="rtl"] .logo-img{direction:ltr;}

/* ============================================================
   Homepage (and shared bespoke sections) — mirror the
   direction-specific bits that CSS doesn't auto-flip:
   absolute left/right, accent borders, corner badges/overlays.
   ============================================================ */

/* Operation showcase: the decorative wave divider is absolutely
   positioned with left:%, so mirror it into the RTL gap. */
html[dir="rtl"] .op-wave{left:66%;}
html[dir="rtl"] .op-row.rev .op-wave{left:34%;}
@media(min-width:1300px) and (max-width:1699px){
  html[dir="rtl"] .op-wave{left:60%;}
  html[dir="rtl"] .op-row.rev .op-wave{left:40%;}
}
/* Image corner labels (01 / 02 …) → leading (right) corner in RTL. */
html[dir="rtl"] .op-lbl{left:auto;right:10px;}
html[dir="rtl"] .cs-num{left:auto;right:10px;}

/* Accent-border cards (market / region / news) → accent on the right. */
html[dir="rtl"] .nm-card{border-left:1px solid var(--line);border-right:4px solid var(--sea,#1C7C9C);}

/* CEO slogan overlay sits bottom-left via left: → move to bottom-right. */
html[dir="rtl"] .ceo-slogan{left:auto;right:26px;}

/* Flow-diagram thumbnails (fd-thumbs): the flex row mirrors on its own
   (image to the right), but the LTR padding/alignment/badge don't. */
html[dir="rtl"] .fd-thumb{padding:0 0 0 14px;text-align:right;}
html[dir="rtl"] .fd-thumb-n{left:auto;right:5px;}
html[dir="rtl"] .fd-thumb:hover{transform:translateX(-3px);}

/* Flow modal prev/next arrows: the ‹ › chars (U+2039/U+203A) are
   bidi-mirrored in RTL, so they flip inward ("› image ‹"). Force the
   buttons to render their glyph LTR so they point outward ("‹ image ›"). */
html[dir="rtl"] .fd-nav{direction:ltr;}