/* ЯЗЫКИ — ОДИН СПИСОК НА ВЕСЬ ПРОЕКТ.
   Разметка: resources/views/components/language-picker.blade.php; поведение:
   language-picker.js; список языков: App\Services\AppLocale::NAMES.
   Флаги — одна картинка-спрайт (из пакета intl-tel-input, MIT): 22 флага вместо
   22 запросов, и они рисуются одинаково во всех системах, в отличие от эмодзи,
   которые в Windows показываются двумя буквами. */
.lang-flag:where(.lang-picker, .lang-picker *){display:block;flex-shrink:0;width:20px;height:15px;border-radius:2px;
  background-image:url(/flags/flags.png?v=1);background-repeat:no-repeat;background-color:#dbdbdb;
  background-size:5652px 15px;box-shadow:0 0 1px 0 rgba(0,0,0,.45)}
@media (min-resolution:2x){ .lang-flag:where(.lang-picker, .lang-picker *){background-image:url(/flags/flags@2x.png?v=1)} }
.lang-flag--ru:where(.lang-picker, .lang-picker *){height:14px;background-position:-4295px 0}
.lang-flag--en:where(.lang-picker, .lang-picker *){height:10px;background-position:-1775px 0}
.lang-flag--de:where(.lang-picker, .lang-picker *){height:12px;background-position:-1269px 0}
.lang-flag--fr:where(.lang-picker, .lang-picker *){height:14px;background-position:-1731px 0}
.lang-flag--es:where(.lang-picker, .lang-picker *){height:14px;background-position:-1555px 0}
.lang-flag--it:where(.lang-picker, .lang-picker *){height:14px;background-position:-2523px 0}
.lang-flag--pt:where(.lang-picker, .lang-picker *){height:14px;background-position:-4141px 0}
.lang-flag--pl:where(.lang-picker, .lang-picker *){height:13px;background-position:-4031px 0}
.lang-flag--nl:where(.lang-picker, .lang-picker *){height:14px;background-position:-3752px 0}
.lang-flag--uk:where(.lang-picker, .lang-picker *){height:14px;background-position:-5175px 0}
.lang-flag--tr:where(.lang-picker, .lang-picker *){height:14px;background-position:-5065px 0}
.lang-flag--az:where(.lang-picker, .lang-picker *){height:10px;background-position:-352px 0}
.lang-flag--kk:where(.lang-picker, .lang-picker *){height:10px;background-position:-2853px 0}
.lang-flag--uz:where(.lang-picker, .lang-picker *){height:10px;background-position:-5307px 0}
.lang-flag--zh:where(.lang-picker, .lang-picker *){height:14px;background-position:-1049px 0}
.lang-flag--ja:where(.lang-picker, .lang-picker *){height:14px;background-position:-2611px 0}
.lang-flag--ko:where(.lang-picker, .lang-picker *){height:14px;background-position:-2787px 0}
.lang-flag--hi:where(.lang-picker, .lang-picker *){height:14px;background-position:-2413px 0}
.lang-flag--bn:where(.lang-picker, .lang-picker *){height:12px;background-position:-418px 0}
.lang-flag--id:where(.lang-picker, .lang-picker *){height:14px;background-position:-2325px 0}
.lang-flag--vi:where(.lang-picker, .lang-picker *){height:14px;background-position:-5434px 0}
.lang-flag--th:where(.lang-picker, .lang-picker *){height:14px;background-position:-4911px 0}

/* ── сам список ──
   <details>: открывается без скрипта, и при выключенном JS язык всё равно меняется —
   ссылки ведут на /lang/{код}, а не на обработчик в браузере. */
.lang-picker{position:relative;font-size:14px;line-height:20px}
.lang-picker__btn:where(.lang-picker, .lang-picker *){list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;
  border:1px solid var(--lang-border,#e3e6e3);border-radius:999px;background:var(--lang-bg,#fff);
  color:var(--lang-ink,#141916);cursor:pointer;user-select:none;white-space:nowrap}
.lang-picker__btn:where(.lang-picker, .lang-picker *)::-webkit-details-marker{display:none}
.lang-picker__btn:hover:where(.lang-picker, .lang-picker *), .lang-picker[open] .lang-picker__btn{border-color:var(--lang-border-hover,#c7ccc7)}
.lang-picker__btn svg:where(.lang-picker, .lang-picker *){width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .15s}
.lang-picker[open] .lang-picker__btn svg{transform:rotate(180deg)}
.lang-picker__name:where(.lang-picker, .lang-picker *){font-weight:600}
.lang-picker__list:where(.lang-picker, .lang-picker *){position:absolute;z-index:60;top:calc(100% + 8px);right:0;margin:0;padding:6px;list-style:none;
  width:220px;max-height:min(420px,calc(100svh - 96px));overflow-y:auto;background:var(--lang-bg,#fff);
  border:1px solid var(--lang-border,#e3e6e3);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.14)}
.lang-picker--up .lang-picker__list:where(.lang-picker, .lang-picker *){top:auto;bottom:calc(100% + 8px)}
.lang-picker--left .lang-picker__list:where(.lang-picker, .lang-picker *){right:auto;left:0}
.lang-picker__list a:where(.lang-picker, .lang-picker *){display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  color:var(--lang-ink,#141916);text-decoration:none}
.lang-picker__list a:hover:where(.lang-picker, .lang-picker *){background:var(--lang-hover,#f4f6f4)}
.lang-picker__list a[aria-current]:where(.lang-picker, .lang-picker *){background:var(--lang-active,#eceeec);font-weight:600}
.lang-picker__btn:focus-visible:where(.lang-picker, .lang-picker *), .lang-picker__list a:focus-visible:where(.lang-picker, .lang-picker *){outline:2px solid currentColor;outline-offset:2px}
/* На тёмном фоне (лендинг, тёмная тема) цвета задаются переменными, а не вторым набором правил. */
.lang-picker--dark:where(.lang-picker, .lang-picker *){--lang-bg:#161e1a;--lang-ink:#f2f5f1;--lang-border:rgba(255,255,255,.18);
  --lang-border-hover:rgba(255,255,255,.34);--lang-hover:rgba(255,255,255,.08);--lang-active:rgba(255,255,255,.14)}

/* В боковом меню список узкий, поэтому раскрывается вверх и во всю ширину колонки. */
.sidebar-language:where(.lang-picker, .lang-picker *){margin-top:10px}
.sidebar-language .lang-picker__btn:where(.lang-picker, .lang-picker *){width:100%;justify-content:flex-start}
.sidebar-language .lang-picker__list:where(.lang-picker, .lang-picker *){width:212px}
.app-shell--collapsed .sidebar-language .lang-picker__name:where(.lang-picker, .lang-picker *){display:none}

.lang-picker__list[popover]:where(.lang-picker, .lang-picker *){margin:0;inset:auto;position:fixed;box-sizing:border-box;overscroll-behavior:contain}