/* Seletor de idioma (bandeiras) - fixo no canto da tela, fora da area de
   slider do in5 (inserido/atualizado automaticamente por add_lang_switch.py) */
#lang-switch {
	position: fixed;
	top: max(10px, env(safe-area-inset-top, 0px) + 8px);
	right: max(10px, env(safe-area-inset-right, 0px) + 8px);
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	z-index: 2147483000;
	background: rgba(20,20,20,0.65);
	border-radius: 999px;
	padding: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
#lang-switch .lang-flag-item {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 30px;
	height: 22px;
	text-decoration: none;
	border-radius: 999px;
	cursor: pointer;
}
#lang-switch a.lang-flag-item:hover, #lang-switch a.lang-flag-item:focus {
	background: rgba(255,255,255,0.2);
}
#lang-switch .lang-flag-item.is-current {
	opacity: 0.4;
	cursor: default;
}
#lang-switch .lang-flag {
	display: block;
	line-height: 0;
	width: 24px;
	height: 16px;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
}
#lang-switch .lang-flag svg {
	/* o pages.css do proprio site tem uma regra global "svg { position:absolute;
	   top:0; left:0; }" que bagunca qualquer svg solto na pagina - precisamos
	   desfazer isso aqui dentro para o svg da bandeira nao "vazar" e cobrir
	   (e bloquear o clique de) todo o botao */
	position: static !important;
	top: auto !important;
	left: auto !important;
	display: block;
	width: 100%;
	height: 100%;
}
@media (max-width: 480px) {
	#lang-switch { gap: 4px; padding: 4px; }
	#lang-switch .lang-flag-item { width: 26px; height: 19px; }
	#lang-switch .lang-flag { width: 20px; height: 13px; }
}