/* The Arabic AI kiosk pages (/ar/ai-kiosk/..., .site-build/kiosk_i18n.py). Every section carries dir="rtl": flex,
   grid and text follow the direction on their own, so this file only mirrors what the shared styles place with left
   and right, turns the arrows round, and keeps the parts that are pictures of a line (the chart, the hours, the
   ruler with the kiosks to scale, the walls of flags and faces) running left to right. The nav, the footer and Leo
   stay as they are. Loaded after page-kiosks.css and page-kiosk-mall.css. */

/* Arabic letters join: no tracking, and a little more room between lines for the dots and marks */
[dir="rtl"], [dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] h1, [dir="rtl"] .cs-h2 { line-height: 1.3; }
[dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.4; }

/* arrows point the way the page reads */
[dir="rtl"] .cs-btn svg, .cs-btn[dir="rtl"] svg, [dir="rtl"] .pgk-spec-go svg { transform: scaleX(-1); }
[dir="rtl"] .cs-btn:hover svg, .cs-btn[dir="rtl"]:hover svg, [dir="rtl"] .pgk-spec-go:hover svg { transform: scaleX(-1) translateX(3px); }

/* hero */
[dir="rtl"] .pgm-hero-sound { right: auto; left: 12px; }

/* the form: icon tile, label and tick on the right; email and phone are typed left to right */
[dir="rtl"] .pgm-form .pgk-f::before { left: auto; right: 11px; }
[dir="rtl"] .pgm-form .pgk-f > svg,
[dir="rtl"] .pgm-form .pgk-f.is-ok::after { left: auto; right: calc(11px + var(--tile) / 2 - 10px); }
[dir="rtl"] .pgm-form .pgk-f > span { left: auto; right: calc(var(--tile) + 25px); transform-origin: right center; }
[dir="rtl"] .pgm-form .pgk-f input, [dir="rtl"] .pgm-form .pgk-f textarea { padding-left: 18px; padding-right: calc(var(--tile) + 25px); }
[dir="rtl"] .pgm-form .pgk-f input[type="email"], [dir="rtl"] .pgm-form .pgk-f input[type="tel"] { direction: ltr; text-align: right; }
[dir="rtl"] .pgm-err { margin: -2px 65px 12px 16px; }
[dir="rtl"] .pgm-send svg { right: auto; left: 11px; transform: scaleX(-1); }
[dir="rtl"] .pgm-send:hover svg { transform: scaleX(-1) translateX(2px); }

/* the jobs: tabs read from the right */
[dir="rtl"] .pgk-tab { text-align: right; }

/* the kiosk screen */
[dir="rtl"] .ks-top { left: auto; right: 40px; padding: 14px 18px 14px 24px; }
[dir="rtl"] .ks-act b { margin-left: 0; margin-right: 10px; }

/* the line-up is drawn to scale against a ruler: it stays left to right, its captions read right to left */
[dir="rtl"] .pgk-line-scroll { direction: ltr; }
[dir="rtl"] .pgk-li figcaption { direction: rtl; }

/* the walls of flags and faces move as they do in English */
[dir="rtl"] .pgm-wall, [dir="rtl"] .pgm-fw { direction: ltr; }

/* the agent */
[dir="rtl"] .pgm-speak { left: auto; right: 12px; }
[dir="rtl"] .pgm-faces img, [dir="rtl"] .pgm-faces span { margin-right: 0; margin-left: -10px; }
[dir="rtl"] .pgm-faces span { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .pgm-set li i::after { right: auto; left: 3px; }
[dir="rtl"] .pgk-sc-map figcaption { left: auto; right: 12px; padding: 9px 11px 9px 14px; }

/* the console: the layout mirrors, the chart and the hours still run left to right */
[dir="rtl"] .pc-plot, [dir="rtl"] .pc-xs, [dir="rtl"] .pc-hours { direction: ltr; }
[dir="rtl"] .pc-key i.b { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .pc-tk:hover { transform: translateX(-2px); }
[dir="rtl"] .pc-rd-h h4 { text-align: right; }

/* going live: the steps and their arrows run from the right */
[dir="rtl"] .pgm-steps li { padding-left: 0; padding-right: 52px; }
[dir="rtl"] .pgm-steps li i { left: auto; right: 0; }
[dir="rtl"] .pgm-steps li:not(:last-child)::after { left: auto; right: 16px; }
[dir="rtl"] .pgm-steps li:not(:last-child)::before { left: auto; right: 12px; }
@media (min-width: 1000px) {
  [dir="rtl"] .pgm-steps li { padding: 48px 0 0; }
  [dir="rtl"] .pgm-steps li:not(:last-child)::after { left: -20px; right: 46px; }
  [dir="rtl"] .pgm-steps li:not(:last-child)::before { right: auto; left: -21px; border-width: 0 0 2px 2px; }
  [dir="rtl"] .pgm-chan { text-align: right; }
}

/* numbers with a sign read left to right inside the right to left cards */
[dir="rtl"] [data-pc-d] { direction: ltr; unicode-bidi: isolate; }