/* ETAP_PRO_I18N_v1 — кружки выбора языка в ЛК мастера (/pro).
   Флаги — инлайновый SVG-спрайт в pro.html: эмодзи-флаги в Windows-Chrome не рендерятся,
   а внешний CDN запрещён CSP (img-src 'self' data:).

   ★Грабля: tailwind.min.css здесь self-hosted и собран с purge — классов sm:flex,
   sm:hidden, order-last в сборке НЕТ (проверено в браузере: ряд в шапке ЛК не появлялся
   на десктопе). Поэтому всю раскладку рядов держим в этом файле, а не утилитами.
   Порядок правил важен: базовые объявления — выше медиазапросов. */

/* --------------------------------------------------------------- сам ряд */
.lang-row {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
    max-width: 100%;
}
.lang-row::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------- кружок */
.lang-dot {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .14);
    background: #18181b;
    cursor: pointer;
    opacity: .55;
    scroll-snap-align: center;
    transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
    padding: 0;
    line-height: 0;
}
.lang-dot:hover { opacity: .85; }
.lang-dot:focus-visible { outline: 2px solid #B8FA19; outline-offset: 2px; }

.lang-dot.is-active {
    opacity: 1;
    border-color: #B8FA19;
    box-shadow: 0 0 0 3px rgba(184, 250, 25, .22);
    transform: translateY(-1px);
}

.lang-dot-flag { display: block; width: 100%; height: 100%; object-fit: cover; }

.lang-dot-code {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 13px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, .62);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .9);
    pointer-events: none;
}

/* --------------------------------------------------------------- три места */
/* лендинг: на телефоне — отдельная строка во всю ширину шапки */
.lang-row--landing { width: 100%; order: 3; }

/* шапка ЛК: её высота 64px, поэтому кружки компактные и только от 640px */
.lang-row--dash { display: none; max-width: 260px; }
.lang-row--compact .lang-dot { width: 34px; height: 34px; }
.lang-row--compact .lang-dot-code { font-size: 7px; line-height: 10px; }

/* профиль: запасной вход с телефона, где ряда в шапке нет */
.lang-row--profile { margin-top: 16px; justify-content: center; flex-wrap: wrap; overflow-x: visible; }

/* край подсвечен, если ряд всё же не влез */
.lang-row--landing, .lang-row--dash {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
}

/* шапка лендинга переносится на телефоне */
.pro-head-wrap { flex-wrap: wrap; row-gap: 12px; }
.pro-head-right { width: 100%; }

/* --------------------------------------------------------------- медиазапросы */
@media (min-width: 640px) {
    .lang-row--landing { width: auto; order: 0; -webkit-mask-image: none; mask-image: none; }
    .lang-row--dash { display: flex; }
    .lang-row--profile { display: none; }
    .pro-head-right { width: auto; }
}

@media (min-width: 1024px) {
    .lang-row--dash { max-width: none; -webkit-mask-image: none; mask-image: none; }
}