/* Контейнер */
.header__lang { 
	position: relative; 
	margin-left: 16px; 
}

/* Триггер-кнопка */
.header__lang-trigger{
	display:inline-flex;
	align-items:center;gap:8px;
	padding:8px 12px 5px 12px;
	border-radius:999px;
	line-height:1;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.18);
	color:#fff;
	font-weight:600;
	text-decoration:none;
}
.header__lang-trigger:hover{ background:rgba(255,255,255,.14); }
.header__lang-caret{ font-size:12px; opacity:.7; }

/* Меню */
.header__lang-menu{
	position:absolute; top:calc(100% + 8px); right:0; min-width:160px;
	background:rgba(17,17,17,.96);
	border:1px solid rgba(255,255,255,.12);
	border-radius:12px; 
	padding:6px; 
	margin:0; 
	list-style:none;
	box-shadow:0 10px 30px rgba(0,0,0,.35);
	display:none; z-index:50;
	min-width: 0;
	inline-size: max-content;
	max-inline-size: 180px;
	padding: 6px;
}
.header__lang-item{}
.header__lang-link{
	display:flex; 
	align-items:center; 
	gap:8px;
	padding: 6px 10px;
	border-radius:8px;
	text-decoration:none; 
	color:#fff; 
	font-weight:600;
	white-space: nowrap;
}
.header__lang-link:hover{ background:rgba(255,255,255,.10); }

/* Открытое состояние */
.header__lang.is-open .header__lang-menu{ display:block; }

/* Небольшой тюнинг для активного языка в списке */
.header__lang-item.is-active .header__lang-link{
  background:rgba(255,255,255,.06);
}

@media (max-width: 767px){

  /* центрируем триггер */
  .header__lang{
    margin-left: 0;
    display: flex;
    justify-content: center;
  }

  .header__lang-trigger{
    margin: 0 auto;            /* кнопка по центру */
  }

  /* выпадайка из центра под кнопкой */
  .header__lang-menu{
    right: auto;               /* убираем «прижим к правому краю» */
    left: 50%;
    transform: translateX(-50%);
    inline-size: max-content;  /* ширина по содержимому */
    max-inline-size: 80vw;     /* безопасно на узких экранах */
    text-align: center;
  }

  /* опционально — делаем элементы чуть выше для тача */
  .header__lang-link{
    padding: 8px 12px;
  }
}

/* Адаптив — ширина  touch-удобная, поведение одинаково на мобиле/десктопе */
@media (max-width: 767px){
	.header__lang{ margin-left:0; }
	.header__lang-trigger{ padding:10px 14px; }
	.header__lang-menu{
		right: 0;
		inline-size: max-content;
		max-inline-size: 160px;
  }
}