/* ==========================================================================
   Right-to-left overrides. Loaded only when the current language is RTL
   (Arabic today). Flex and grid mirror themselves from dir="rtl" on <html>;
   what is listed here is the handful of places that pin a physical side.
   ========================================================================== */

/* ---------- Nav dropdowns ---------- */
[dir="rtl"] .dd{left:auto;right:0;transform-origin:top right;text-align:right}
[dir="rtl"] .dd a{text-align:right}
[dir="rtl"] .mi.has-dd:hover .dd,[dir="rtl"] .mi.has-dd.open .dd{transform:none}

/* ---------- Language switcher ---------- */
[dir="rtl"] .lang-menu{right:auto;left:0;transform-origin:top left;text-align:right}
[dir="rtl"] .mlang .lang-btn{justify-content:flex-start}

/* ---------- Headings and body copy ---------- */
[dir="rtl"] .hero-copy,
[dir="rtl"] .sec-head,
[dir="rtl"] .lead,
[dir="rtl"] .tt,
[dir="rtl"] .eyebrow,
[dir="rtl"] .reason p,
[dir="rtl"] .lead-card,
[dir="rtl"] .range-note,
[dir="rtl"] .prod-foot,
[dir="rtl"] .band-in{text-align:right}
[dir="rtl"] .sec-head.center,
[dir="rtl"] .eyebrow.center{text-align:center}

/* Latin fragments (Incoterms, grades, emails, measurements) must stay LTR
   inside otherwise-RTL text, or the punctuation jumps to the wrong end. */
[dir="rtl"] .specs span,
[dir="rtl"] .band-ports span,
[dir="rtl"] .bag,
[dir="rtl"] .fs b,
[dir="rtl"] .hs .n,
[dir="rtl"] .dn,
[dir="rtl"] .k,
[dir="rtl"] .num,
[dir="rtl"] .socials{direction:ltr;unicode-bidi:isolate}

/* The email address reads left-to-right, but its row must still mirror like
   every other contact row — isolate the text, not the whole link. */
[dir="rtl"] .f-con a[href^="mailto"]{unicode-bidi:isolate}

/* ---------- Numbered reason list ---------- */
[dir="rtl"] .reason{direction:rtl}
[dir="rtl"] .reason h4{text-align:right}

/* ---------- Product cards ---------- */
[dir="rtl"] .card .bd{text-align:right}
[dir="rtl"] .card .tag{left:auto;right:0}
[dir="rtl"] .tlink .ar,
[dir="rtl"] .btn .ar{transform:scaleX(-1)}

/* Carousel chevrons: flex has already swapped their positions, so the glyphs
   must flip too — otherwise "next" sits on the left but points right. */
[dir="rtl"] .arw svg{transform:scaleX(-1)}

/* ---------- Process track ---------- */
[dir="rtl"] .track .fill{left:auto;right:0;background:linear-gradient(270deg,var(--green-lt),var(--gold))}
[dir="rtl"] .step{text-align:center}

/* ---------- Markets ---------- */
[dir="rtl"] .mk-col,[dir="rtl"] .mk-note{text-align:right}
[dir="rtl"] .mk-col li{direction:rtl}
/* the route map is a fixed-coordinate diagram — keep it left-to-right */
[dir="rtl"] .routes{direction:ltr}

/* ---------- Private label checks ---------- */
[dir="rtl"] .checks li{text-align:right}

/* ---------- Form ---------- */
[dir="rtl"] .qform,[dir="rtl"] .fld label{text-align:right}
[dir="rtl"] .fld input,[dir="rtl"] .fld select{text-align:right}
[dir="rtl"] .fld input[type="number"],
[dir="rtl"] .fld input[type="email"]{direction:ltr;text-align:right}
[dir="rtl"] .fld select{background-position:left 14px center}
[dir="rtl"] .assure{flex-direction:row}

/* ---------- Footer ---------- */
[dir="rtl"] .f-col,[dir="rtl"] .f-brand,[dir="rtl"] .f-con{text-align:right}
[dir="rtl"] .f-con .row a{flex-direction:row}
[dir="rtl"] .f-bot{text-align:right}

/* ---------- Mobile drawer ---------- */
[dir="rtl"] .mobile .mtop,[dir="rtl"] .mobile .mhead,[dir="rtl"] .msub a{text-align:right}
[dir="rtl"] .mcon{text-align:right}

/* ---------- Marquee ---------- */
/* the strip scrolls the same physical direction in both modes; only the text
   inside each badge flips */
[dir="rtl"] .cert{direction:rtl;text-align:right}
[dir="rtl"] .mq{direction:ltr}

/* ---------- Floating action button ---------- */
/* (.toast is centred with left:50%, so it needs no mirroring) */
[dir="rtl"] .fab{right:auto;left:20px}

/* ============================================================
   Inner pages: mixed-direction copy
   Only lang/en.php covers the inner pages, so an Arabic visitor
   sees English body text inside a dir="rtl" document. Without
   this the bidi algorithm throws trailing punctuation to the
   wrong end ("‎.markets prefer"). `plaintext` lets each block
   take its direction from its own first strong character, so a
   Latin paragraph reads left-to-right and an Arabic one reads
   right-to-left — no markup change, and it keeps working as the
   translations land.
   ============================================================ */
[dir="rtl"] h1.ptt,
[dir="rtl"] .pblock h2.tt,
[dir="rtl"] .phero .lead,
[dir="rtl"] .pb-head .lead,
[dir="rtl"] .prose p,
[dir="rtl"] .tile h3,
[dir="rtl"] .tile p,
[dir="rtl"] .figsplit-body h3,
[dir="rtl"] .figsplit-body p,
[dir="rtl"] .glance dt,
[dir="rtl"] .glance dd,
[dir="rtl"] .note,
[dir="rtl"] .checklist li span,
[dir="rtl"] .chips li,
[dir="rtl"] .fq summary,
[dir="rtl"] .fq .fa p,
[dir="rtl"] .imgband h2,
[dir="rtl"] .imgband p,
[dir="rtl"] .route .pt .nm,
[dir="rtl"] .route .transit,
[dir="rtl"] .ctarow p,
[dir="rtl"] .statband .sb span,
[dir="rtl"] .pquote blockquote,
[dir="rtl"] .spec-table th,
[dir="rtl"] .spec-table td,
[dir="rtl"] .crumbs{
  unicode-bidi:plaintext;
  text-align:start;
}

/* the crumb trail is a row of separate links — keep it laid out RTL */
[dir="rtl"] .crumbs{unicode-bidi:isolate}

/* section numerals and the route lane stay in reading order */
[dir="rtl"] .pb-num{unicode-bidi:isolate}
[dir="rtl"] .route .pt.to{text-align:end}