/* =====================================================================
   system-en.css: the English (left-to-right) version of the site. Loaded AFTER system.css, only by the pages in /en/.
   system.css is drawn for right-to-left reading. Most of it uses logical properties (inline-start / inline-end) and flips by itself; this file
   only corrects what was written for one physical side:
     1 type          2 forced direction:rtl  3 text-align / padding  4 hover nudges  5 timelines, tape, route  6 before / after  7 form  8 header language link
   Every rule starts with html[dir="ltr"], so nothing here can touch the Arabic pages.
   ===================================================================== */

/* ---------- 1. type: Latin text needs less leading than Arabic and no Arabic-only tricks ---------- */
html[dir="ltr"] body{line-height:1.7;letter-spacing:0}
html[dir="ltr"] h1,html[dir="ltr"] h2,html[dir="ltr"] h3,html[dir="ltr"] h4{letter-spacing:0}
html[dir="ltr"] .lat{letter-spacing:.12em}

/* ---------- 2. blocks that were forced right-to-left on purpose ---------- */
html[dir="ltr"] .tm,html[dir="ltr"] .tr,html[dir="ltr"] .tb,html[dir="ltr"] .ftr-tel,html[dir="ltr"] .ftr-tel a,
html[dir="ltr"] .rail-tabs,html[dir="ltr"] .hrs2-t,html[dir="ltr"] .hs,html[dir="ltr"] .addr-tiles,html[dir="ltr"] .rstrip,
html[dir="ltr"] .rt-from,html[dir="ltr"] .rt-sc,html[dir="ltr"] .rt-nl,html[dir="ltr"] .rt-attr,html[dir="ltr"] .rt-scrub,
html[dir="ltr"] .rt-scrub input,html[dir="ltr"] .rt-scrub-t{direction:ltr}

/* ---------- 3. text-align / position that meant "start of the line" ---------- */
html[dir="ltr"] .tb b.lat,html[dir="ltr"] .tb b.mono,html[dir="ltr"] .stn-name,html[dir="ltr"] .where-tel .mono,html[dir="ltr"] .eq-name,
html[dir="ltr"] .tap-t b,html[dir="ltr"] .soc-row b{text-align:left}
html[dir="ltr"] .eq-pn .prev{text-align:left}
html[dir="ltr"] .eq-pn .next{text-align:right}
html[dir="ltr"] .wa-fab{inset-inline-start:auto;inset-inline-end:16px}
html[dir="ltr"] .vq-6 blockquote p{text-align:left}

/* ---------- 4. hover nudges that pointed the other way ---------- */
html[dir="ltr"] .idx-col a:hover{transform:translateX(8px)}
html[dir="ltr"] .tap:hover > .ic{transform:translateX(4px)}
html[dir="ltr"] .eq-pn .prev:hover .ic{transform:translateX(-6px)}
html[dir="ltr"] .eq-pn .next:hover .ic{transform:translateX(6px)}
html[dir="ltr"] .way-go{transform:translateX(-8px)}

/* ---------- 5. timelines, big numerals, route scrubber ---------- */
html[dir="ltr"] .hs-band,html[dir="ltr"] .hs-gap{right:auto;left:calc(var(--a) * 100% / 12)}
html[dir="ltr"] .hs-ticks span{right:auto;left:calc(var(--k) * 100% / 12);transform:translateX(-50%)}
html[dir="ltr"] .rt-scrub-t i{right:auto;left:calc(var(--p) * 100%);transform:translateX(-50%)}
html[dir="ltr"] .pb-bg::after{left:auto;right:max(20px,calc(50% - 600px))}
@media (max-width:640px){html[dir="ltr"] .pb-bg::after{left:8px;right:auto}}

/* ---------- 6. before / after: «before» on the left, «after» on the right (the Arabic page has it the other way round) ---------- */
html[dir="ltr"] .ba-before{clip-path:inset(0 calc((100 - var(--x)) * 1%) 0 0)}
html[dir="ltr"] .ba-chip-b{right:auto;left:16px}
html[dir="ltr"] .ba-chip-a{left:auto;right:16px}
html[dir="ltr"] .ba.hide-b .ba-chip-b,html[dir="ltr"] .ba.hide-a .ba-chip-a{opacity:1;transform:none}
html[dir="ltr"] .ba.hide-a .ba-chip-b,html[dir="ltr"] .ba.hide-b .ba-chip-a{opacity:0;transform:translateY(-6px)}

/* ---------- 7. request form: the select arrow sits on the right ---------- */
html[dir="ltr"] .rq-f select{padding-left:16px;padding-right:44px;background-position:right 14px center}

/* ---------- 8. the language link itself is styled in system.css ---------- */
/* between 1100 and 1279 px the English menu words need the room: the phone shows as an icon, the nav links sit a little closer */
@media (min-width:1100px) and (max-width:1279px){
  html[dir="ltr"] .hdr-tel span{display:none}
  html[dir="ltr"] .hdr-tel{min-width:44px;justify-content:center;padding:0}
  html[dir="ltr"] .nav a{padding-inline:10px}
}

/* ---------- 9. English text is longer than the Arabic signage lines: headings and leads that the Arabic page keeps on ONE line may wrap ---------- */
@media (min-width:1100px){
  html[dir="ltr"] .pb h1,html[dir="ltr"] .sh-h,html[dir="ltr"] .pb .lead,html[dir="ltr"] .sh-sub{white-space:normal;text-wrap:balance}
  html[dir="ltr"] .pb h1{max-width:22ch}
  html[dir="ltr"] .pb .lead{max-width:62ch}
}
@media (min-width:1280px){html[dir="ltr"] .sv-txt p{white-space:normal;max-width:78ch}}
/* the hero buttons on a phone: two columns, the long label may wrap */
@media (max-width:560px){html[dir="ltr"] .cta-row .btn{white-space:normal;text-align:center;line-height:1.25;min-height:48px}}

/* ---------- 10. route drawing: English names are longer than the Arabic ones: left-to-right tags that may fold onto two lines ---------- */
html[dir="ltr"] .rt-tag{direction:ltr}
html[dir="ltr"] .rt-tag[data-k="1"],html[dir="ltr"] .rt-tag.r{white-space:normal;width:min-content;min-width:0}
html[dir="ltr"] .rt-tag[data-k="1"] b,html[dir="ltr"] .rt-tag.r b{line-height:1.25}

/* ---------- 11. machine pages: previous / next ---------- */
html[dir="ltr"] .eq-pn .prev b{flex-direction:row-reverse;justify-content:flex-end}
html[dir="ltr"] .eq-pn .next b{flex-direction:row-reverse;justify-content:flex-start}

/* ---------- 12. DPF sheet: «before» (soiled) on the left, «after» (clean) on the right; --p is still how much is clean, now measured from the right edge ---------- */
html[dir="ltr"] .dpf-clean{clip-path:inset(0 0 0 calc((1 - var(--p)) * 100%))}
html[dir="ltr"] .dpf-line{left:calc((1 - var(--p)) * 100%)}
html[dir="ltr"] .dpf-line::before{right:auto;left:2px;background:linear-gradient(90deg,rgba(79,200,232,.28),transparent)}
html[dir="ltr"] .dpf-knob{left:clamp(27px,calc((1 - var(--p)) * 100%),calc(100% - 27px))}
html[dir="ltr"] .dpf-r{direction:rtl}
@media (max-width:560px){html[dir="ltr"] .dpf-sheet .ba-chip-b{left:32px;right:auto}html[dir="ltr"] .dpf-sheet .ba-chip-a{right:14px;left:auto}}

/* ---------- 13. Liqui Moly ruler: runs the way the oil flows (right to left), as on the Arabic page ---------- */
html[dir="ltr"] .lm-r{direction:rtl}

/* ---------- 14. Engine Flush strip: the same drawing mirrored, so «before» (sludge) is on the left and «after» (clean) on the right ---------- */
html[dir="ltr"] .fl-strip{transform:scaleX(-1)}
html[dir="ltr"] .fl-clean::after{transform:scaleX(-1)}

/* ---------- 15. small things on single pages ---------- */
html[dir="ltr"] .ab-nm{text-align:left}
html[dir="ltr"] .ab-m:focus-visible .ab-go,html[dir="ltr"] .ab-m:hover .ab-go{transform:translateX(4px)}
html[dir="ltr"] .gi:hover .ic,html[dir="ltr"] .gi.is-hot .ic,html[dir="ltr"] .gi:focus-visible .ic{transform:translateX(4px)}

/* route steps on a phone: the small tag (Start of the route / You have arrived) goes under the sentence instead of squeezing it */
@media (max-width:640px){
  html[dir="ltr"] .rt-steps li{grid-template-columns:40px minmax(0,1fr)}
  html[dir="ltr"] .rt-steps .tg{grid-column:2;justify-self:start}
}

/* ---------- 16. audit fixes (before the English version went live): English labels are longer, so fixed-width boxes must give way ---------- */
@media (max-width:560px){
  html[dir="ltr"] .v-more .btn,html[dir="ltr"] .rq-act .btn,html[dir="ltr"] .stn-act .btn{white-space:normal;text-align:center;line-height:1.25;min-height:48px}
}
html[dir="ltr"] .rq{grid-template-columns:minmax(0,1fr)}
html[dir="ltr"] .rq-f select{min-width:0;max-width:100%;text-overflow:ellipsis}
@media (max-width:620px){html[dir="ltr"] .mx thead th b{font-size:11px;letter-spacing:0}}
@media (min-width:561px){html[dir="ltr"] .spec-r{grid-template-columns:clamp(172px,15vw,210px) minmax(0,1fr)}html[dir="ltr"] .spec dt{padding-inline:14px;gap:8px}}
html[dir="ltr"] .spec dd .spec-lat{text-align:left;white-space:normal;overflow-wrap:anywhere}
html[dir="ltr"] .bom-t b{text-align:left}
html[dir="ltr"] .crumbs .ic{transform:scaleX(-1)}

/* ---------- 17. second audit: route tags on narrow phones, header between 1100 and 1139 px ---------- */
@media (max-width:420px){
  html[dir="ltr"] .rt .rt-tag[data-k="2"],html[dir="ltr"] .rt .rt-tag[data-k="4"]{white-space:normal;width:min-content;min-width:0}
  html[dir="ltr"] .ins-a{inset-inline-start:auto;inset-inline-end:10px}
}
@media (min-width:1100px) and (max-width:1139px){html[dir="ltr"] .nav a{padding-inline:7px}}

/* ---------- the Arabic words of the language switch (header pill, menu panel, footer) use the device's own Arabic font: English pages do not download the 124 KB Arabic Kufi file for three words ---------- */
html[dir="ltr"] a[lang="ar"]{font-family:'Segoe UI',Tahoma,'Noto Sans Arabic','Geeza Pro','Arial Unicode MS',system-ui,sans-serif}