/* Arabic: the Tajawal font (the website's Arabic font, which Montserrat does not cover) and the
   page mirrored right to left. look/lang.js sets dir="rtl" on the page for a login working in
   Arabic; nothing here applies in English. Flex rows, grids and table columns mirror by
   themselves; this file turns round what the stylesheets place on the left or right by hand. */
@font-face{font-family:Tajawal;font-style:normal;font-weight:400;font-display:swap;src:url(tajawal-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:700;font-display:swap;src:url(tajawal-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
.langbtn{white-space:nowrap}
.langbtn .lang-short{display:none}
@media(max-width:700px){.langbtn .lang-long{display:none}.langbtn .lang-short{display:inline}.langbtn{min-width:var(--tap,40px);padding-left:8px;padding-right:8px}}
.langbtn:lang(ar){font-family:Tajawal,Montserrat,system-ui,sans-serif}
.langbtn.on-bar{width:auto;flex:none;margin-inline-start:auto;background:transparent;color:#fff;border:1px solid #ffffff88;padding:6px 12px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer;min-height:36px}
header.bar:has(.langbtn.on-bar){display:flex;align-items:center;gap:10px}

[dir=rtl] body,[dir=rtl] button,[dir=rtl] input,[dir=rtl] select,[dir=rtl] textarea{font-family:Tajawal,Montserrat,system-ui,-apple-system,'Segoe UI',sans-serif}
[dir=rtl] body{font-size:calc(var(--fs, 15px) + 1px)}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] th{letter-spacing:0}
[dir=rtl] th{text-transform:none}
/* what a person types (names, passport numbers, e-mail) keeps its own direction */
[dir=rtl] input,[dir=rtl] textarea{unicode-bidi:plaintext}
[dir=rtl] input[type=email],[dir=rtl] input[type=tel],[dir=rtl] input[type=url],[dir=rtl] input[type=number]{direction:ltr;text-align:right}
[dir=rtl] td,[dir=rtl] th{text-align:right}
[dir=rtl] .num{text-align:left}
/* the invoice is what the guest gets: it stays as written, left to right (app.js puts dir="ltr" and
   translate="no" on it), so it keeps the English layout here too (nightly check, 22 Oct 2026) */
[dir=rtl] .invoice-stage{font-family:Montserrat,system-ui,-apple-system,'Segoe UI',sans-serif}
[dir=rtl] .invoice-stage th{text-align:left;text-transform:uppercase;letter-spacing:.8px}
[dir=rtl] .invoice-stage td{text-align:left}
[dir=rtl] .invoice-stage .num{text-align:right}

/* the menu down the side moves to the right */
[dir=rtl] .side{inset:0 0 0 auto}
[dir=rtl] .main{margin-left:0;margin-right:232px}
@media(max-width:1200px){[dir=rtl] .main{margin-right:210px}}
@media(max-width:1000px){[dir=rtl] .main{margin-right:190px}}
@media(max-width:700px){
  [dir=rtl] .main{margin-right:0}
  [dir=rtl] .side{transform:translateX(100%)}
  [dir=rtl] .app.navopen .side{transform:none}
  [dir=rtl] .fab{right:auto;left:16px}
  [dir=rtl] .kpis{margin-left:-16px;margin-right:-16px}
}
@media print{[dir=rtl] .main{margin-right:0!important}}
[dir=rtl] .staffpage main.main{margin-left:0;margin-right:232px}
@media(max-width:1200px){[dir=rtl] .staffpage main.main{margin-right:210px}}
@media(max-width:1000px){[dir=rtl] .staffpage main.main{margin-right:190px}}
@media(max-width:700px){[dir=rtl] .staffpage main.main{margin-right:0}}

/* the top bar: search box, its icon and its "/" key */
[dir=rtl] .top .search{margin-left:0;margin-right:auto}
[dir=rtl] .staffpage .top .search{margin:0 auto 0 0}
@media(max-width:700px){[dir=rtl] .top .search,[dir=rtl] .staffpage .top .search{margin:0}}
[dir=rtl] .search>.i{left:auto;right:12px}
[dir=rtl] .search input{padding-left:44px;padding-right:40px}
[dir=rtl] .search kbd{right:auto;left:12px}
[dir=rtl] .search-results button,[dir=rtl] .quicklist .btn,[dir=rtl] .tile,[dir=rtl] .picker-list button,[dir=rtl] .rowmore-list>.btn{text-align:right}
[dir=rtl] .pagehelp{margin-left:0;margin-right:auto}
[dir=rtl] .staffpage .top .pagehelp{margin-right:0}
[dir=rtl] .bell-panel{right:auto;left:0}
@media(max-width:700px){[dir=rtl] .bell-panel{left:12px;right:12px}}

/* menus that open from a row's "…" button */
[dir=rtl] .gcard .rowmore-list,[dir=rtl] .rowmenu .rowmore-list{right:auto;left:0}

/* small pieces placed by hand */
[dir=rtl] .note{border-left:0;border-right:3px solid var(--ocean)}
[dir=rtl] .seg button+button{border-left:0;border-right:1px solid var(--line-strong)}
[dir=rtl] .switch i:after{left:auto;right:3px;transition:right .15s}
[dir=rtl] .kpi .v small{margin-left:0;margin-right:4px}
[dir=rtl] .col .foot .btn{margin-left:0;margin-right:auto}
[dir=rtl] .card.warn{border-left:0;border-right:5px solid #d99a00}
[dir=rtl] ul{padding-left:0;padding-right:1.2em}
[dir=rtl] .preview-note{border-left:0;border-right:4px solid #004ACE}
[dir=rtl] .ok:not(.badge){border-left:0;border-right:4px solid #1f7a3f}
/* Arabic letters run a little wider: the stay column keeps room for the hotel and room */
[dir=rtl] .staycell{max-width:250px}
[dir=rtl] .section>legend,[dir=rtl] .dl-dive legend{float:right}
[dir=rtl] .steps-bar span::after{right:auto;left:2px}
/* icons that point a way (back, next, open) turn round */
[dir=rtl] svg.i:has(use[href$="#i-back"]),[dir=rtl] svg.i:has(use[href$="#i-chevron"]),[dir=rtl] svg.i:has(use[href$="#i-send"]),
[dir=rtl] svg.i:has(use[href$="#i-logout"]){transform:scaleX(-1)}
/* checkin.css lets each line of the guest form pick its own direction; translated pages keep the
   page's right-to-left even when a line starts with a guest's name */
html.sp-ar :is(p,label,legend,h1,h2,h3,li,span.small){unicode-bidi:normal}
/* Today's board chevron: open points down in both directions (the chevron itself is flipped above) */
[dir=rtl] .tboard:not(.shut) .boardtoggle .chev{transform:rotate(-90deg)}