/*
	Переключатель языка.

	Живёт в двух местах: в drawer'е «Личный кабинет» (рядом с «Режимом
	ускорения») и в боковой панели. Геометрия намеренно повторяет
	.profile-drawer-perf-row — padding 12x14, радиус 14, иконка 32x32/r9,
	заголовок 13/700, подпись 10.5 — чтобы строка не выбивалась из ряда.
*/

.pbg_lang {
	position: relative;
	width: 100%;
}

.pbg_lang__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	background: rgba(255, 255, 255, .04);
	text-align: left;
	cursor: pointer;
	transition: background .18s, border-color .18s, transform .15s;
}

.pbg_lang__row:hover {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .14);
}

.pbg_lang.is-open .pbg_lang__row {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(61, 217, 138, .35);
}

.pbg_lang__flagbox {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(61, 217, 138, .12);
	overflow: hidden;
}

.pbg_lang__flagbox--sm {
	width: 26px;
	height: 26px;
	border-radius: 8px;
}

.pbg_lang__flag {
	width: 22px;
	height: 16px;
	border-radius: 3px;
	object-fit: cover;
	display: block;
}

.pbg_lang__flagbox--sm .pbg_lang__flag {
	width: 18px;
	height: 13px;
}

.pbg_lang__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.pbg_lang__label {
	font-size: 10.5px;
	font-weight: 600;
	color: #8a8a9c;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.pbg_lang__value {
	font-size: 13px;
	font-weight: 700;
	color: #eafff3;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
	Иконки — inline SVG, а не boxicons: глобальное правило .bx-chevron-down
	в pbg_style_3.css навешивает position:absolute, круглый фон и рамку на
	любую такую иконку, из-за чего стрелка выпадала из строки.
*/
.pbg_lang__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: #8a8a9c;
	transition: transform .2s ease, color .2s ease;
}

.pbg_lang__arrow svg {
	display: block;
	width: 12px;
	height: 8px;
}

.pbg_lang.is-open .pbg_lang__arrow {
	transform: rotate(180deg);
	color: #3dd98a;
}

.pbg_lang__menu {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 8px);
	z-index: 80;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 14px;
	background: #23232e;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .48);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.pbg_lang.is-open .pbg_lang__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pbg_lang__item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #c9c9d6;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.pbg_lang__item + .pbg_lang__item {
	margin-top: 2px;
}

.pbg_lang__item:hover {
	background: rgba(255, 255, 255, .06);
	color: #eafff3;
}

.pbg_lang__item.is-active {
	background: rgba(61, 217, 138, .12);
	color: #eafff3;
}

.pbg_lang__item.is-loading {
	opacity: .5;
	pointer-events: none;
}

.pbg_lang__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pbg_lang__check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: #3dd98a;
	opacity: 0;
}

.pbg_lang__check svg {
	display: block;
	width: 14px;
	height: 11px;
}

.pbg_lang__item.is-active .pbg_lang__check {
	opacity: 1;
}

/* В боковой панели блок стоит отдельной карточкой, а меню раскрывается вниз. */
.navigation_profile .pbg_lang,
.social_widgets_col .pbg_lang {
	margin-bottom: 20px;
}

.navigation_profile .pbg_lang__row {
	border-radius: 20px;
	padding: 14px 16px;
	box-shadow: 0 5px 10px #13151a4f;
}

.navigation_profile .pbg_lang__menu {
	top: calc(100% + 8px);
	bottom: auto;
	transform: translateY(-6px);
	border-radius: 18px;
}

.navigation_profile .pbg_lang.is-open .pbg_lang__menu {
	transform: translateY(0);
}