/**
 * Selector de idioma con desplegable (inc/selector-idioma.php).
 *
 * Botón en píldora con borde blanco translúcido sobre la cabecera, como los
 * botones secundarios de la web, y lista en tarjeta blanca con esquinas
 * redondeadas, sombra suave y el azul de la marca para el idioma activo.
 */

.mar-ls {
	position: relative;
	font-family: var( --e-global-typography-text-font-family, "M PLUS 2" ), sans-serif;
}

/* -------------------------------------------------------------------------
 * Botón
 * ---------------------------------------------------------------------- */

.elementor-kit-6 .mar-ls .mar-ls__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 12px 8px 12px;
	border: 1px solid rgba( 255, 255, 255, .45 );
	border-radius: 50px;
	background: rgba( 255, 255, 255, .06 );
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.elementor-kit-6 .mar-ls .mar-ls__btn:hover,
.elementor-kit-6 .mar-ls.is-open .mar-ls__btn {
	border-color: #fff;
	background: rgba( 255, 255, 255, .16 );
	color: #fff;
}

.elementor-kit-6 .mar-ls .mar-ls__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.mar-ls .mar-ls__flag {
	display: block;
	flex: none;
	width: 20px;
	height: 14px;
	border-radius: 3px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, .08 );
}

.mar-ls__chev {
	width: 16px;
	height: 16px;
	transition: transform .25s ease;
}

.mar-ls.is-open .mar-ls__chev {
	transform: rotate( 180deg );
}

/* -------------------------------------------------------------------------
 * Lista
 * ---------------------------------------------------------------------- */

.mar-ls__list {
	position: absolute;
	z-index: 1000;
	top: calc( 100% + 10px );
	right: 0;
	min-width: 200px;
	margin: 0;
	padding: 8px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 45px -12px rgba( 16, 47, 79, .35 ), 0 0 0 1px rgba( 16, 47, 79, .06 );
	list-style: none;
	transform-origin: top right;
	animation: mar-ls-in .18s ease-out;
}

.mar-ls__list[hidden] {
	display: none;
}

/* Piquito hacia el botón. */
.mar-ls__list::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 22px;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: #fff;
	transform: rotate( 45deg );
	box-shadow: -1px -1px 0 rgba( 16, 47, 79, .06 );
}

.mar-ls__list li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor-kit-6 .mar-ls a.mar-ls__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 10px;
	color: var( --e-global-color-secondary, #102f4f );
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.elementor-kit-6 .mar-ls a.mar-ls__item:hover,
.elementor-kit-6 .mar-ls a.mar-ls__item:focus-visible {
	background: #f1f9fb;
	color: var( --e-global-color-primary, #1ba8c1 );
	outline: none;
}

.elementor-kit-6 .mar-ls a.mar-ls__item.is-active {
	color: var( --e-global-color-secondary, #102f4f );
	font-weight: 700;
}

.mar-ls__name {
	flex: 1;
}

.mar-ls__item .mar-ls__code {
	color: #7d8c9b;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
}

.mar-ls__check {
	width: 18px;
	height: 18px;
	margin-left: -4px;
	color: var( --e-global-color-primary, #1ba8c1 );
}

@keyframes mar-ls-in {
	from {
		opacity: 0;
		transform: translateY( -6px ) scale( .97 );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Móvil
 * ---------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.elementor-kit-6 .mar-ls .mar-ls__btn {
		gap: 6px;
		padding: 7px 10px;
		font-size: 13px;
	}

	.mar-ls .mar-ls__btn .mar-ls__flag {
		width: 18px;
		height: 12px;
	}

	.mar-ls__list {
		right: -8px;
		min-width: 190px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mar-ls__list,
	.mar-ls__chev {
		animation: none;
		transition: none;
	}
}