/* PEAK — language switch (EN / عربي) + right-to-left layout for Arabic.
   Every RTL rule is scoped to [dir="rtl"], so the English site is unchanged. */

/* ---------- the one switch button in the header ---------- */
.lang-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;min-width:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;cursor:pointer;font:600 14px/1 var(--font);transition:border-color .25s,background .25s,color .25s}
.lang-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lang-btn:hover{border-color:var(--cyan);background:rgba(0,176,240,.15)}
.lang-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.nav.is-solid .lang-btn,.nav.open .lang-btn{border-color:var(--line);color:var(--navy)}
.lang-btn__ar{font-family:"IBM Plex Sans Arabic",var(--font);font-size:15px;line-height:1;transform:translateY(-1px)}
html[lang="ar"] .lang-btn__ar,html:not([lang="ar"]) .lang-btn__en{display:none}
@media (max-width:600px){.lang-btn{padding:0 11px}.lang-btn svg{display:none}}

/* soft cross-fade while the language swaps */
main,.footer,.nav__inner{transition:opacity .22s ease}
.lang-switching main,.lang-switching .footer,.lang-switching .nav__inner{opacity:0}

/* ---------- Arabic type ---------- */
[dir="rtl"]{--font:"IBM Plex Sans Arabic","Outfit",system-ui,-apple-system,"Segoe UI",sans-serif}
[dir="rtl"] body{line-height:1.85}
[dir="rtl"] *{letter-spacing:0!important}          /* letter-spacing breaks Arabic joining */
[dir="rtl"] .label,[dir="rtl"] .chip__k,[dir="rtl"] .before-after span,[dir="rtl"] .lb__date,[dir="rtl"] .clist span,[dir="rtl"] .footer h4,[dir="rtl"] .ind__k{text-transform:none;font-size:13px}
[dir="rtl"] .h1{line-height:1.3}
[dir="rtl"] .h2{line-height:1.4}
[dir="rtl"] .xp h3,[dir="rtl"] .mo h3,[dir="rtl"] .lb__body h3{line-height:1.45}
[dir="rtl"] .words .w,[dir="rtl"] .split .w{padding-top:.08em;padding-bottom:.22em;margin-bottom:-.14em}
[dir="rtl"] .split .w:nth-last-child(-n+3)>span{background:linear-gradient(270deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text}
[dir="rtl"] .label::before{background:linear-gradient(270deg,var(--blue),var(--cyan))}
/* phone numbers, e-mails and codes stay left-to-right */
[dir="rtl"] a[href^="tel:"],[dir="rtl"] a[href^="mailto:"],[dir="rtl"] input[type="email"],[dir="rtl"] input[name="phone"]{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] input[name="phone"],[dir="rtl"] input[type="email"]{text-align:right}
/* svg labels (GCC map) and animated tracks keep their own geometry */
[dir="rtl"] svg,[dir="rtl"] .cargo__track,[dir="rtl"] .coverflow,[dir="rtl"] .road{direction:ltr}
[dir="rtl"] .cargo__track span,[dir="rtl"] .cf figcaption{direction:rtl}

/* ---------- mirrored arrows ---------- */
[dir="rtl"] .arr,[dir="rtl"] .mo .go,[dir="rtl"] .xt i,[dir="rtl"] .round{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .mo .go{display:grid}
[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .mo:hover .go{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .xt.on i{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .xt:hover{transform:translateX(-4px)}

/* ---------- mirrored layout (physical left/right in styles.css) ---------- */
[dir="rtl"] .progress span{transform-origin:right}
[dir="rtl"] .nav__end .btn{margin-left:0;margin-right:6px}
[dir="rtl"] .nav__links a::after{transform-origin:center}
[dir="rtl"] .hero__mini li{padding-left:0;padding-right:14px;border-left:0;border-right:2px solid rgba(0,176,240,.5)}
[dir="rtl"] .stack__chip{padding:10px 14px 10px 16px}
[dir="rtl"] .chip__k{padding-right:0;border-right:0;padding-left:10px;border-left:1px solid var(--line)}
[dir="rtl"] .ticks li{padding-left:0;padding-right:32px}
[dir="rtl"] .ticks li::before{left:auto;right:0}
[dir="rtl"] .ticks li::after{left:auto;right:6.5px}
[dir="rtl"] .checks li{transform:translateX(10px)}
[dir="rtl"] .guide.in .checks li{transform:none}
@media (prefers-reduced-motion:reduce){[dir="rtl"] .checks li{transform:none}}
[dir="rtl"] .mo .ico{left:auto;right:24px}
[dir="rtl"] .mo b{right:auto;left:26px}
[dir="rtl"] .mo p{padding-right:0;padding-left:46px}
[dir="rtl"] .mo .go{right:auto;left:22px}
[dir="rtl"] .xt{text-align:right}
[dir="rtl"] .xp__n{right:auto;left:44px}
[dir="rtl"] .xp__steps li{padding:6px 6px 6px 14px!important}
[dir="rtl"] .js .xp.on .xp__steps li{transform:translateX(8px)}
[dir="rtl"] .lane__line::after{transform-origin:right}
[dir="rtl"] .lane__line b{left:auto;right:0;transition:right 1.6s var(--ease) .3s}
[dir="rtl"] .lane.in .lane__line b{left:auto;right:calc(100% - 10px)}
[dir="rtl"] .lb__close{right:auto;left:12px}
[dir="rtl"] .fab{right:auto;left:20px}
[dir="rtl"] .glow{right:auto;left:-150px}
[dir="rtl"] .glow--b{left:auto;right:-200px}

@media (max-width:900px){
  [dir="rtl"] .xp__n{left:24px}
  [dir="rtl"] .xp__steps li{text-align:right}
}
@media (max-width:600px){
  [dir="rtl"] .fab{left:14px}
}

/* keep these LTR / spaced in Arabic */
[dir="rtl"] .xp__n,[dir="rtl"] .cf-count{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .truck__logo small,[dir="rtl"] .a-truck__logo small{letter-spacing:.24em!important}
[dir="rtl"] .logo-text{letter-spacing:.08em!important}

/* ---------- service pages (land freight, cross-border, …) in Arabic ---------- */
[dir="rtl"] .sp .xp__steps.sp-steps li:not(:last-child)::after{content:"←";right:auto;left:-18px}
[dir="rtl"] .crumbs span[aria-hidden],[dir="rtl"] .sp-others i,[dir="rtl"] .sp-card .arr{display:inline-block;transform:scaleX(-1)}
@media (max-width:560px){
  [dir="rtl"] .sp .xp__steps.sp-steps li{text-align:right}
  [dir="rtl"] .sp .xp__steps.sp-steps li:not(:last-child)::after{content:"↓";left:auto;right:50%}
}