/**
 * Language switcher (EN/ES) — pill toggle to match Figma:
 * https://www.figma.com/design/cODBPURdEQOdvpdMoFhyOo/Track-My-Ballot?node-id=43-565
 *
 * Scoped to the `lang-toggle` custom CSS class (set on the widget's Advanced
 * tab in Elementor), not Elementor's auto-generated per-instance element ID,
 * so the same rules apply everywhere the widget is placed (header, mobile
 * popup menu, ...) without a duplicate block per instance/page.
 *
 * The .cpel-switcher__code padding-left override repeats the class to reach
 * 4 classes of specificity — matching Elementor's own generated rule shape
 * (`.elementor-{post} .elementor-element.elementor-element-{id} .cpel-switcher__code`)
 * — so it wins on every instance/page regardless of stylesheet load order,
 * without !important.
 */

.lang-toggle .cpel-switcher__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 3px;
	width: 90px;
	height: 34px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 9999px;
	box-sizing: border-box;
}

.lang-toggle .cpel-switcher__lang {
	flex: 1 1 0;
	height: 100%;
}

.lang-toggle .cpel-switcher__lang a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	padding: 0 6px;
}

.lang-toggle.lang-toggle.lang-toggle.lang-toggle .cpel-switcher__code {
	padding-left: 0;
}

.lang-toggle .cpel-switcher__code {
	font-family: var( --e-global-typography-primary-font-family ), sans-serif;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.55);
	pointer-events: none;
}

.lang-toggle .cpel-switcher__lang--active a {
	background: #e06d2e;
}

.lang-toggle .cpel-switcher__lang--active .cpel-switcher__code,
.lang-toggle .cpel-switcher__lang a:hover .cpel-switcher__code,
.lang-toggle .cpel-switcher__lang a:focus .cpel-switcher__code {
	color: #fff;
}

/* Below 1200px the toggle sits on the light mobile menu background instead
 * of the dark header, so the translucent-white track becomes invisible —
 * use the header's navy (#163549) as the tint instead. */
@media (max-width: 1200px) {
	.lang-toggle .cpel-switcher__list {
		background: rgba(22, 53, 73, 1);
	}
}