/* Styles every page shares for its three languages (.site-build/site_i18n.py): the language menu in the nav (the
   same as on the AI kiosk pages, page-kiosk-mall.css) and the note on top of a translated legal page.
   Loaded on every page; bump site_i18n.V_I18N with every change. */
/* the language menu in the nav: the three kiosk sector pages come in English, Turkish and Arabic (.site-build/kiosk_i18n.py).
   Closed it is the round flag of the page's language; open, the three languages with their flags. */
.pg-lang { position: relative; }
.pg-lang summary { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 5px; border-radius: 100px; color: rgba(255,255,255,0.64); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: background 0.3s ease, color 0.3s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1); }
.pg-lang summary::-webkit-details-marker { display: none; }
.pg-lang summary:active { transform: scale(0.94); }
.pg-lang summary:focus-visible { outline: 2px solid var(--mx-focus); outline-offset: 2px; }
.pg-flag { flex: none; display: block; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.2); }
.pg-flag svg { display: block; width: 100%; height: 100%; }
.pg-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.pg-lang[open] .pg-chev { transform: rotate(180deg); }
.pg-lang[open] summary { background: rgba(255,255,255,0.08); color: #fff; }
.pg-lang-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 5; min-width: 184px; margin: 0; padding: 6px; list-style: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; background: rgba(16,17,28,0.9); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 18px 40px rgba(0,0,0,0.36); transform-origin: top right; }
.pg-lang[open] .pg-lang-menu { animation: pgLang 0.22s cubic-bezier(0.16,1,0.3,1); }
@keyframes pgLang { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.pg-lang-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; color: rgba(255,255,255,0.78); font: 500 14.5px/1.2 var(--font-main); text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.pg-lang-menu a span:not(.pg-flag) { flex: 1; }
.pg-lang-menu a[aria-current] { color: #fff; }
.pg-lang-menu a:focus-visible { outline: 2px solid var(--mx-focus); outline-offset: -2px; }
.pg-tick { width: 16px; height: 16px; fill: none; stroke: #8f92ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .pg-lang summary:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); }
  .pg-lang-menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
}
/* over a light section */
.nav--on-light .pg-lang summary { color: rgba(0,0,0,0.62); }
.nav--on-light .pg-lang[open] summary { background: rgba(0,0,0,0.06); color: #111; }
.nav--on-light .pg-flag { box-shadow: 0 0 0 1px rgba(0,0,0,0.12); }
.nav--on-light .pg-lang-menu { border-color: rgba(0,0,0,0.08); background: rgba(255,255,255,0.94); box-shadow: 0 18px 40px rgba(20,22,46,0.16); }
.nav--on-light .pg-lang-menu a { color: rgba(0,0,0,0.7); }
.nav--on-light .pg-lang-menu a[aria-current] { color: #111; }
.nav--on-light .pg-tick { stroke: #4c4fd7; }
@media (hover: hover) {
  .nav--on-light .pg-lang summary:hover { background: rgba(0,0,0,0.05); color: #111; }
  .nav--on-light .pg-lang-menu a:hover { background: rgba(0,0,0,0.05); color: #111; }
}
@media (prefers-reduced-motion: reduce) { .pg-lang[open] .pg-lang-menu { animation: none; } }

/* a translated legal page: which text counts */
.lg-i18n { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.62); }