Languages Menu

<!-- Version 1 -->
<div class="lang-menu-ver1">
	<div class="top-lang-wrap blurFunc">
		<ul class="languages-list blurFunc_menu">
			<li class="active">
				<a href="/">
					עברית
					<svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><path d="M1.41 0.589966L6 5.16997L10.59 0.589966L12 1.99997L6 7.99997L0 1.99997L1.41 0.589966Z"></path></svg>
				</a>
			</li>
			<li>
				<a href="/en">
					English
					<svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><path d="M1.41 0.589966L6 5.16997L10.59 0.589966L12 1.99997L6 7.99997L0 1.99997L1.41 0.589966Z"></path></svg>
				</a>
			</li>
		</ul>
	</div>
</div>

<!-- Version 2 -->
<div class="lang-menu-ver2">
	<div class="top-lang-wrap blurFunc">
		<div class="blurFunc_menu">
			<button type="button" class="open-lang-menu">
				עברית
				<svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><path d="M1.41 0.589966L6 5.16997L10.59 0.589966L12 1.99997L6 7.99997L0 1.99997L1.41 0.589966Z"></path></svg>
			</button>
			<ul class="languages-list">
				<li class="active"><a href="/he">עברית</a></li>
				<li><a href="/en">English</a></li>
			</ul>
		</div>
	</div>
</div>

/* Version 1 Styles */
.lang-menu-ver1 .top-lang-wrap { width: 140px; height: 45px; line-height: 44px; }
.lang-menu-ver1 .languages-list {
	display: flex; overflow: hidden; flex-direction: column;
	list-style: none; padding: 0; margin: 0;
	border-radius: 8px; border: 1px solid #25324b;
	background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}
.lang-menu-ver1 .languages-list li.active { order: 0; }
.lang-menu-ver1 .languages-list li:not(.active) { display: none; order: 1; }
.lang-menu-ver1 .languages-list li:not(.active) svg { display: none; }
.lang-menu-ver1 .languages-list a {
	display: block; text-decoration: none; color: #f8fafc;
	font-size: 17px; padding: 0 16px; font-weight: 500;
	white-space: nowrap; border-bottom: 1px solid transparent;
	transition: background-color 0.2s, color 0.2s;
}
.lang-menu-ver1 .languages-list a:hover { color: #71F494; }
.lang-menu-ver1 .languages-list li:last-child a { border-bottom: none; }
.lang-menu-ver1 .languages-list svg {
	vertical-align: middle; margin: -2px 6px 0 0; fill: #94a3b8;
	transition: transform 0.3s ease, fill 0.3s ease;
}
.lang-menu-ver1 .languages-list.active {
	background: #1e293b; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); border-color: #334155;
}
.lang-menu-ver1 .languages-list.active li { display: block; }
.lang-menu-ver1 .languages-list.active li:not(.active) a:hover { background: rgba(113, 244, 148, 0.1); }
.lang-menu-ver1 .languages-list.active li.active a { color: #71F494; border-bottom-color: #334155; }
.lang-menu-ver1 .languages-list.active li.active svg { transform: rotate(180deg); fill: #71F494; }

/* Version 2 Styles */
.lang-menu-ver2 .top-lang-wrap { display: inline-block; position: relative; line-height: 40px; }
.lang-menu-ver2 .open-lang-menu {
	color: #f8fafc; padding: 0 0 0 28px; font-size: 17px; font-weight: 500;
	background: transparent; border: none; font-family: inherit; cursor: pointer;
	transition: color 0.3s ease;
}
.lang-menu-ver2 .open-lang-menu:hover { color: #71F494; }
.lang-menu-ver2 .open-lang-menu svg {
	position: absolute; left: 0; top: 50%; margin: -4px 0 0 0; fill: #94a3b8;
	transition: transform 0.3s ease, fill 0.3s ease;
}
.lang-menu-ver2 .top-lang-wrap .blurFunc_menu.active .open-lang-menu { color: #71F494; }
.lang-menu-ver2 .top-lang-wrap .blurFunc_menu.active .open-lang-menu svg {
	transform: rotate(180deg); fill: #71F494;
}
.lang-menu-ver2 .languages-list {
	background: #1e293b; border: 1px solid #334155; border-radius: 8px;
	position: absolute; left: 50%; top: 100%; list-style: none;
	padding: 8px 0; margin: 0; transform: translate(-50%,-6px);
	opacity: 0; visibility: hidden; transition: all 0.3s ease;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); min-width: 120px; z-index: 100;
}
.lang-menu-ver2 .top-lang-wrap .blurFunc_menu.active .languages-list {
	transform: translate(-50%, 8px); opacity: 1; visibility: visible;
}
.lang-menu-ver2 .languages-list a {
	display: block; text-decoration: none; color: #94a3b8; padding: 8px 16px;
	font-size: 16px; font-weight: 500; white-space: nowrap; text-align: center;
	transition: all 0.2s ease;
}
.lang-menu-ver2 .languages-list li a:hover { background: rgba(113, 244, 148, 0.1); color: #71F494; }
.lang-menu-ver2 .languages-list li.active a { color: #71F494; background: rgba(255, 255, 255, 0.05); }

/* WPML Compatibility Elements */
.wpml-ls-statics-footer { display: none; }
.languages-list .wpml-ls-statics-footer { display: block; padding: 0; border: none; margin: 0; }
.wpml-ls-statics-footer > ul { list-style: none; margin: 0; padding: 0; }
.wpml-ls-legacy-list-horizontal .wpml-ls-item { display: block; }

document.addEventListener("DOMContentLoaded", function() {
	const topLangWrap = document.querySelectorAll('.top-lang-wrap');
	const wpmlFooter = document.querySelector('.wpml-ls-statics-footer');

	topLangWrap.forEach(function(wrapper) {
		const openBtn = wrapper.querySelector('.open-lang-menu');
		const list = wrapper.querySelector('.languages-list');
		const menuContainer = wrapper.querySelector('.blurFunc_menu');

		if (openBtn && menuContainer) {
			openBtn.addEventListener('click', function() {
				menuContainer.classList.toggle('active');
			});

			if (wpmlFooter && list) {
				list.innerHTML = wpmlFooter.innerHTML;
				const currentNative = list.querySelector('li.wpml-ls-current-language .wpml-ls-native');
				if (currentNative) {
					openBtn.prepend(currentNative.cloneNode(true));
				}
			}

		} else if (list) {
			const links = list.querySelectorAll('a');
			
			links.forEach(function(link) {
				link.addEventListener('click', function(e) {
					const isListActive = list.classList.contains('active');
					const isParentActive = this.parentElement.classList.contains('active');

					if (!isListActive || (isListActive && isParentActive)) {
						e.preventDefault();
						list.classList.toggle('active');
					}
				});
			});

			const activeLi = list.querySelector('li.active');
			if (activeLi) {
				list.prepend(activeLi);
			}
		}
	});

	document.addEventListener('click', function(e) {
		const wrappers = document.querySelectorAll('.blurFunc');
		
		wrappers.forEach(function(wrapper) {
			if (!wrapper.contains(e.target)) {
				const activeMenu = wrapper.querySelector('.blurFunc_menu.active');
				if (activeMenu) {
					activeMenu.classList.remove('active');
				}
			}
		});
	});
});