/* Vitalink Mesotech Skin — floating light/dark toggle.
 * Sits just above the language switcher (same corner). Dual-mode aware. */

.vlk-theme-toggle {
	position: fixed;
	inset-block-end: 64px;
	inset-inline-end: 18px;
	z-index: 9991;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--vlk-white, #fff);
	border: 1px solid var(--vlk-blue-soft, #C2E0F2);
	color: var(--vlk-blue, #0074BA);
	box-shadow: 0 6px 20px rgba(17, 40, 56, 0.16);
	transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vlk-theme-toggle:hover { transform: translateY(-2px); }
.vlk-theme-toggle svg { width: 20px; height: 20px; }

/* Show the icon for the mode you'll switch TO. */
.vlk-theme-toggle .vlk-ico-moon { display: none; }
.vlk-theme-toggle .vlk-ico-sun { display: inline-flex; }
.vlk-theme-toggle[data-mode="dark"] .vlk-ico-sun { display: inline-flex; }
.vlk-theme-toggle[data-mode="dark"] .vlk-ico-moon { display: none; }
.vlk-theme-toggle[data-mode="light"] .vlk-ico-sun { display: none; }
.vlk-theme-toggle[data-mode="light"] .vlk-ico-moon { display: inline-flex; }

/* DARK scheme styling for the button itself. */
body.vlk-theme-dark .vlk-theme-toggle {
	background: var(--vlk-surface-2, #1a2417);
	border-color: var(--vlk-gold-line, rgba(230, 198, 106, .22));
	color: var(--vlk-gold, #E6C66A);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

@media (max-width: 480px) {
	.vlk-theme-toggle { inset-block-end: 56px; inset-inline-end: 12px; width: 38px; height: 38px; }
	.vlk-theme-toggle svg { width: 18px; height: 18px; }
}
@media print { .vlk-theme-toggle { display: none; } }