/* Language switch (i18n.js) and Arabic typography/direction shared by the Coming Soon page and the map site. */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(43,42,41,.1);box-shadow:0 4px 14px rgba(43,42,41,.06);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);flex:0 0 auto;direction:ltr}
.lang-switch button{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:28px;padding:0 11px;border:0;border-radius:999px;background:transparent;color:#2B2A29;font:700 11px/1 'DM Sans',sans-serif;letter-spacing:.6px;cursor:pointer;transition:background .25s ease,color .25s ease,transform .2s ease}
.lang-switch button[lang=ar]{font-family:'IBM Plex Sans Arabic','Noto Kufi Arabic','Segoe UI',Tahoma,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0;padding-top:1px}
.lang-switch button:hover{background:rgba(17,241,90,.16)}
.lang-switch button:active{transform:scale(.95)}
.lang-switch button[aria-pressed=true]{background:#2B2A29;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.lang-switch button[aria-pressed=true]::before{content:'';width:5px;height:5px;border-radius:50%;background:#11F15A;margin-inline-end:6px;box-shadow:0 0 0 3px rgba(17,241,90,.18)}
.lang-switch button:focus-visible{outline:2px solid #11F15A;outline-offset:2px}

/* Arabic: Arabic fonts, no letter-spacing (it breaks the joined letters), no italics. */
html.lang-ar body{font-family:'IBM Plex Sans Arabic','DM Sans','Segoe UI',Tahoma,sans-serif}
html.lang-ar body *{letter-spacing:0!important}
html.lang-ar em,html.lang-ar i:not([class]){font-style:normal}
html.lang-ar :is(h1,h2,h3,.eyebrow){font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif}
html.lang-ar :is(input,select,textarea,button){font-family:inherit}
html.lang-ar .lang-switch button[lang=fr]{font-family:'DM Sans',sans-serif;letter-spacing:.6px!important}

/* Map site in Arabic: header, sidebar, panels and dialogs read right-to-left. The map itself stays left-to-right
   (Leaflet positions tiles from the left); its popups and buttons are right-to-left. */
html.lang-ar :is(body>header,#sidebar,dialog,.map-top,.map-bottom,.mobile-list,.samsar-map-button,.leaflet-popup-content,.leaflet-tooltip){direction:rtl}
html.lang-ar dialog .leaflet-container,html.lang-ar #sidebar .leaflet-container{direction:ltr}
html.lang-ar dialog .leaflet-container .leaflet-popup-content{direction:rtl}
html.lang-ar body>section{direction:rtl}
/* Phone numbers, e-mails, passwords and amounts are typed left-to-right, aligned to the right. */
html.lang-ar input:is([type=tel],[type=email],[type=password],[type=number],[type=url]){direction:ltr;text-align:right}
html.lang-ar input:is([type=tel],[type=email],[type=password],[type=number],[type=url]):placeholder-shown{text-align:right}
.lang-switch .lang-short{display:none}
@media(max-width:700px){
  .lang-switch{padding:2px}
  .lang-switch button{min-width:28px;height:26px;padding:0 7px;font-size:10.5px}
  .lang-switch button[lang=ar]{font-size:14px;padding:0 8px 1px}
  .lang-switch button[aria-pressed=true]::before{display:none}
  .lang-switch .lang-long{display:none}.lang-switch .lang-short{display:inline}
  html.lang-ar #sidebar .segmented{left:10px;right:55%}
}
@media(max-width:700px){html body>header{gap:6px;padding:0 8px}html body>header nav{gap:7px}html body>header nav button{font-size:10.5px}.lang-switch button{min-width:26px;padding:0 6px}.lang-switch button[lang=ar]{padding:0 7px 1px}}
@media(max-width:360px){html body>header nav{gap:5px}html body>header nav button{font-size:10px}}

/* Arabic: buttons whose icon sits at the start get mirrored padding, and their hover fill grows from the icon (right side). */
html.lang-ar body>header #publish{padding:9px 9px 9px 20px}
html.lang-ar body>header #publish:after{left:auto;right:9px}
html.lang-ar body>header #publish:hover .publish-plus,html.lang-ar body>header #publish:focus-visible .publish-plus{transform:rotate(-180deg)}
html.lang-ar #samsar-map-button{padding:7px 7px 7px 16px;text-align:right}
html.lang-ar #samsar-map-button:after{left:auto;right:7px}
html.lang-ar #samsar-map-button:hover>i,html.lang-ar #samsar-map-button:focus-visible>i{transform:rotate(10deg) scale(1.06)}
@media(min-width:701px){html.lang-ar body>header #publish{padding-top:7px;padding-bottom:7px}}
@media(max-width:700px){
  html.lang-ar body>header #publish{padding:0}
  html.lang-ar body>header #publish:after{right:2px}
  html.lang-ar .samsar-map-button{padding:5px 7px 5px 10px}
  html.lang-ar .samsar-map-button:after{right:2px}
}
/* City search: the location icon sits on the right in Arabic. */
html.lang-ar .select-wrap{padding-left:12px;padding-right:14px}
@media(max-width:700px){html.lang-ar .select-wrap{padding-left:8px;padding-right:10px}}
/* Slogan: one font for the whole line in Arabic (no serif on the green words). */
html.lang-ar h1 em{font-family:inherit;font-weight:inherit;font-style:normal}
/* Arabic: SAMSAR button as wide as the French one on PC; Gold and Transport centred between logo and buttons on phones. */
@media(min-width:701px){html.lang-ar #samsar-map-button{min-width:172px}}
@media(max-width:700px){html.lang-ar body>header nav{justify-content:center}}