.babelpress-switcher__list {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.babelpress-switcher__item a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}

.babelpress-switcher__flag {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Stile "tendina" in stile WeGlot: un trigger a pillola (bandiera/testo della
   lingua corrente + freccina) che apre sotto un pannello fluttuante con le
   altre lingue, evidenziate al passaggio del mouse. Qui sotto SOLO struttura
   e comportamento (posizionamento, apri/chiudi, animazione della freccina) —
   nessun colore/bordo/padding "di aspetto": quelli sono gestiti SOLO dai
   controlli Elementor (con i loro valori di default), per evitare che due
   sorgenti diverse si contendano la stessa proprietà e una smetta di
   rispondere alle modifiche. */
.babelpress-switcher--as-dropdown {
	position: relative;
	display: inline-block;
}

.babelpress-switcher--as-dropdown .babelpress-switcher__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.babelpress-switcher--as-dropdown .babelpress-switcher__trigger::after {
	content: '';
	width: 7px;
	height: 7px;
	margin-left: 4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.babelpress-switcher--as-dropdown.is-open .babelpress-switcher__trigger::after {
	transform: rotate(225deg);
}

/* Il pannello è nascosto di default (non più "tutte le voci tranne quella
   corrente": il trigger sopra è un elemento separato, qui dentro non c'è
   nessuna voce "corrente" da escludere) e fluttua sotto il trigger solo
   quando aperto — mai più sovrapposto/staccato dal punto dove si è cliccato.
   "margin-top" è impostato dal controllo Elementor "Spaziatura": senza
   nessuna personalizzazione resta 0 (nessun controllo l'ha ancora scritto),
   quindi qui c'è comunque un valore di riserva minimo. */
.babelpress-switcher--as-dropdown .babelpress-switcher__list {
	display: none;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 100%;
	margin-top: 6px;
	padding: 6px;
}

.babelpress-switcher--as-dropdown.is-open .babelpress-switcher__list {
	display: flex;
}

.babelpress-switcher--as-dropdown .babelpress-switcher__item > a {
	width: 100%;
}

/* Un separatore tra le voci non avrebbe senso nella tendina (elenco verticale
   apri/chiudi): a differenza degli .__item, qui non viene nascosto dalle
   regole sopra perché non condivide quella classe. */
.babelpress-switcher--as-dropdown .babelpress-switcher__separator {
	display: none;
}

.babelpress-switcher__separator {
	opacity: 0.5;
}

@media (max-width: 480px) {
	.babelpress-switcher__list {
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {
	.babelpress-switcher-widget--mobile-stack .babelpress-switcher__list {
		flex-direction: column;
		align-items: flex-start;
	}

	.babelpress-switcher-widget--mobile-hide {
		display: none;
	}
}

/* Evidenziazione temporanea da "Apri nella pagina" nella schermata Traduci contenuti */
.babelpress-highlighted {
	outline: 3px solid #4f46e5 !important;
	outline-offset: 4px;
	border-radius: 4px;
	animation: babelpress-pulse 1s ease-in-out 2;
}

@keyframes babelpress-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.5); }
	50% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
}