/* Arabic (RTL) overrides, loaded only by /ar/. Keeps the English layout and only changes what Arabic needs. */

/* Arabic type: Tajawal for headings and body. Jost stays for Latin text such as @ozeksa. */
:root{
  --display:"Tajawal","Jost",system-ui,sans-serif;
  --sans:"Tajawal","Jost",system-ui,sans-serif;
}
html[dir="rtl"] body{font-size:16px}

/* Arabic letters must not be spaced or uppercased. Tracking and uppercase are Latin styles. */
html[dir="rtl"] *{letter-spacing:normal!important;text-transform:none!important}

/* Headings: Arabic needs more line height and a heavier weight to look balanced. */
html[dir="rtl"] .d{line-height:1.22;font-weight:700;letter-spacing:0}
html[dir="rtl"] .mask{padding-bottom:.22em;margin-bottom:-.22em}
html[dir="rtl"] .hero__title{line-height:1.12}
html[dir="rtl"] .tagline{line-height:1.3}
html[dir="rtl"] .sig__name{line-height:1.12}
html[dir="rtl"] .step__n{font-family:var(--sans);font-weight:700}

/* Small uppercase labels become readable Arabic labels. */
html[dir="rtl"] .label,
html[dir="rtl"] .kicker,
html[dir="rtl"] .tlink,
html[dir="rtl"] .btn,
html[dir="rtl"] .hours,
html[dir="rtl"] .c-foot,
html[dir="rtl"] .dots button span,
html[dir="rtl"] .header__nav a,
html[dir="rtl"] .link .lab,
html[dir="rtl"] .map__card small,
html[dir="rtl"] .map__card a,
html[dir="rtl"] .tabs button,
html[dir="rtl"] .field label,
html[dir="rtl"] .chips label,
html[dir="rtl"] .intro__meta,
html[dir="rtl"] .scroll-hint{font-weight:600;font-size:13px}
html[dir="rtl"] .dots button span{font-size:12px}
html[dir="rtl"] .c-foot{font-size:12px}

/* Paragraph text reads better with more height. */
html[dir="rtl"] p,
html[dir="rtl"] .lead,
html[dir="rtl"] .hero__side p,
html[dir="rtl"] .sig__desc,
html[dir="rtl"] .occ__descs p{line-height:1.8}

/* Mirror the parts that are positioned on the left in English. */
html[dir="rtl"] .field label{left:auto;right:0}
html[dir="rtl"] .field::after{left:auto;right:0;transform-origin:right}
html[dir="rtl"] .field input,
html[dir="rtl"] .field textarea{text-align:right;direction:rtl}
html[dir="rtl"] .chips label::after{transform-origin:right}
html[dir="rtl"] .occ__name{left:auto;right:0}
html[dir="rtl"] .menu button.m{text-align:right;flex-direction:row-reverse}
html[dir="rtl"] .menu button.m small{letter-spacing:0}
html[dir="rtl"] .map__card b{text-align:right}
html[dir="rtl"] .header__nav a::after{transform-origin:left}
html[dir="rtl"] .tlink::after{transform-origin:right}
html[dir="rtl"] .dots button{flex-direction:row-reverse}
html[dir="rtl"] .dots button span{transform:translateX(-8px)}
html[dir="rtl"] .dots button:hover span{transform:none}

/* Form labels and the request fields. */
html[dir="rtl"] .form textarea{text-align:right}
html[dir="rtl"] .note{text-align:right}

/* Delivery tiles keep the English look. Only the text direction changes. */
html[dir="rtl"] .dlv__logo{direction:ltr}
html[dir="rtl"] .dlv__title{text-align:right}

/* Phone numbers, handles and Latin values must keep their own left-to-right order. */
html[dir="rtl"] .link .val,
html[dir="rtl"] .hours b{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .link .val{display:block;text-align:right}
/* Arabic reads a little smaller than Latin at the same size, so body copy gets a small lift. */
html[dir="rtl"] p{font-size:1.08em}

/* Numbers, times and handles keep left-to-right order inside Arabic text. */
html[dir="rtl"] b,
html[dir="rtl"] .val{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .tlink.lang{font-family:"Tajawal",system-ui,sans-serif;font-size:13px;letter-spacing:0}

/* Arabic: the menu arrow points the other way, and the phone label follows RTL. */
html[dir="rtl"] .menu button.m::after{content:"\2196";margin-inline-start:0;margin-inline-end:auto}
html[dir="rtl"] .sig__kicker{letter-spacing:0;text-transform:none;font-size:13px}