/*
 * Vitalink Mesotech Skin — language switcher
 * Fixed, always-visible pill (guest + logged-in). Uses the brand palette
 * variables from brand.css and logical properties so it mirrors correctly
 * under both LTR and RTL.
 */

.vlk-lang-switcher {
	position: fixed;
	inset-block-end: 18px;
	inset-inline-end: 18px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: var(--vlk-white, #fff);
	border: 1px solid var(--vlk-blue-soft, #C2E0F2);
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(17, 40, 56, 0.14);
	font-size: 13px;
	line-height: 1;
}

.vlk-lang-switcher .vlk-lang-opt {
	display: inline-block;
	padding: 7px 13px;
	border-radius: 999px;
	color: var(--vlk-text-muted, #5B6B7B);
	text-decoration: none;
	font-weight: 500;
	transition: background-color .15s ease, color .15s ease;
	white-space: nowrap;
}

.vlk-lang-switcher .vlk-lang-opt:hover {
	background: var(--vlk-blue-light, #E6F2FA);
	color: var(--vlk-blue-dark, #005C94);
}

.vlk-lang-switcher .vlk-lang-opt.is-active {
	background: var(--vlk-blue, #0074BA);
	color: var(--vlk-text-on-blue, #fff);
	font-weight: 600;
	cursor: default;
}

@media (max-width: 480px) {
	.vlk-lang-switcher {
		inset-block-end: 12px;
		inset-inline-end: 12px;
		font-size: 12px;
	}
	.vlk-lang-switcher .vlk-lang-opt { padding: 6px 10px; }
}

@media print {
	.vlk-lang-switcher { display: none; }
}