/* ========================================================================= */
/* ================= UNIFIED NAVIGATION & UI SYSTEM ====================== */
/* ========================================================================= */

/* ОТКЛЮЧАЕМ СТАРЫЕ FLOATING ЭЛЕМЕНТЫ */
.floating-theme:not(.floating-ui-container .floating-theme) {
	display: none !important;
}

/* ========================================================================= */
/* ====================== ОСНОВНЫЕ КОНТЕЙНЕРЫ ============================= */
/* ========================================================================= */

/* FLOATING UI КОНТЕЙНЕР */
.floating-ui-container {
	position: fixed !important;
	z-index: 9999 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 1rem !important;
	pointer-events: none !important;
}

/* НАВИГАЦИОННАЯ ПАНЕЛЬ ВНУТРИ FLOATING */
.floating-nav-panel {
	--burger-size: 48px;
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	pointer-events: auto !important;
}

/* ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ В КОНТЕЙНЕРЕ */
.floating-ui-container .floating-theme {
	display: block !important;
	pointer-events: auto !important;
}


/* ОСНОВНОЙ КОНТЕЙНЕР НАВИГАЦИИ В HEADER */
.header-nav {
	display: flex;
	align-items: center;
	position: relative;
	pointer-events: auto;
	gap: var(--ui-gap, 0.75rem);
}

/* ========================================================================= */
/* ========= КНОПКА МАГАЗИНА: ПЕРЕКЛЮЧЕНИЕ ЦЕНТР ↔ INLINE В МЕНЮ ========= */
/* JS добавляет body.shop-in-menu когда кнопка и меню пересекаются         */
/* ========================================================================= */

.nav-shop-inline { display: none !important; }
body.shop-in-menu .nav-shop-inline { display: flex !important; }
body.shop-in-menu .header-shop-btn { visibility: hidden !important; }

/* Inline: круглая кнопка без текста, только иконка */
.nav-shop-inline a {
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	justify-content: center !important;
}
.nav-shop-inline a span { display: none !important; }
.nav-shop-inline a i { color: var(--text-secondary) !important; font-size: 1rem; }

/* ========================================================================= */
/* ======================= КНОПКА БУРГЕРА ================================= */
/* ========================================================================= */

/* ОБЩИЕ СТИЛИ ДЛЯ ОБОИХ БУРГЕРОВ */
.nav-burger {
	display: flex;
	cursor: pointer;
	font-size: 1.2rem;
	color: var(--text-primary);
	width: 48px;
	height: 48px;
	border-radius: 100px;
	background: var(--gradient-light);
	border: 1px solid var(--glassmorphism-border);
	box-shadow: var(--shadow-inset-light);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	align-items: center;
	justify-content: center;
	backdrop-filter: var(--blur-backdrop);
	-webkit-backdrop-filter: var(--blur-backdrop);
	pointer-events: auto;
}

/* БУРГЕР В HEADER (широкие экраны ≥1001px) - FIXED POSITIONING */
.nav-burger-header {
	position: fixed !important;
	top: calc((72px - 48px) / 2) !important;
	z-index: 1500 !important;
	display: flex !important; /* По умолчанию видим */
}

/* БУРГЕР В FLOATING UI (узкие экраны ≤1000px) - FLEX POSITIONING */
.nav-burger-floating {
	position: relative !important;
	display: none !important; /* По умолчанию скрыт */
	z-index: auto;
}

/* МЕНЮ В HEADER - FIXED POSITIONING (наследует стили от .nav-menu и .nav-lang) */
.nav-menu-header {
	position: fixed !important;
	z-index: 1450 !important;
	display: none;
	align-items: center;
	gap: 0.7rem;
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-menu-header.active {
	display: flex;
	opacity: 1;
	pointer-events: all;
}

.nav-lang-header {
	position: fixed !important;
	z-index: 1450 !important;
	display: none;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-lang-header.active {
	display: flex;
	opacity: 1;
	pointer-events: all;
}

/* ЭЛЕМЕНТЫ МЕНЮ HEADER (наследуют стили от базовых .nav-menu/.nav-lang) */
.nav-menu-header li {
	width: auto;
}

.nav-menu-header a {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.92rem;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.9rem;
	border-radius: 100px;
	width: auto;
	justify-content: center;
	position: relative;
	cursor: pointer;
	background: var(--gradient-light);
	border: 1px solid var(--glassmorphism-border);
	box-shadow: var(--shadow-inset-light);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	backdrop-filter: var(--blur-backdrop);
	-webkit-backdrop-filter: var(--blur-backdrop);
}

.nav-menu-header a i {
	font-size: 1rem;
	width: 1.5rem;
	text-align: center;
	color: var(--text-muted);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-menu-header a:hover {
	color: var(--text-primary);
	transform: translateY(-1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-md);
	border-color: var(--border-medium);
}

.nav-menu-header a:hover i {
	color: var(--text-primary);
	transform: translateY(-1px);
}

.nav-menu-header a:active {
	transform: translateY(1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-inset-pressed);
	border-color: var(--border-medium);
	transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-menu-header a.active {
	color: var(--color-primary);
	background: var(--gradient-light);
	border: 1px solid rgba(var(--brand-blue-rgb), 0.3);
	transform: translateY(1px);
	box-shadow: var(--shadow-inset-pressed);
}

.nav-menu-header a.active i {
	color: var(--color-primary);
}

.nav-lang-header li {
	width: auto;
}

.nav-lang-header a {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
	background: var(--gradient-light);
	border: 1px solid var(--glassmorphism-border);
	box-shadow: var(--shadow-inset-light);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	backdrop-filter: var(--blur-backdrop);
	-webkit-backdrop-filter: var(--blur-backdrop);
}

.nav-lang-header a span {
	letter-spacing: 0.02em;
	font-weight: 700;
}

.nav-lang-header a:hover {
	color: var(--text-primary);
	transform: translateY(-1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-md);
	border-color: var(--border-medium);
}

.nav-lang-header a:active {
	transform: translateY(1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-inset-pressed);
	border-color: var(--border-medium);
	transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-lang-header a.active {
	color: var(--color-primary);
	background: var(--gradient-light);
	border: 1px solid rgba(var(--brand-blue-rgb), 0.3);
	transform: translateY(1px);
	box-shadow: var(--shadow-inset-pressed);
}

/* МЕНЮ В FLOATING UI - RELATIVE POSITIONING (в потоке flex-контейнера) */
.nav-menu-floating {
	position: relative !important;
	display: none !important;
	z-index: auto;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	gap: 0.6rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.nav-menu-floating.active {
	display: flex !important;
}

.nav-menu-floating li {
	width: 100% !important;
}

.nav-menu-floating a {
	width: 100% !important;
	justify-content: flex-start !important;
	padding: 0.5rem 1rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	color: var(--text-primary) !important;
	text-decoration: none !important;
	font-weight: 500;
	font-size: 0.92rem;
	border-radius: var(--radius-sm) !important;
	background: var(--gradient-light) !important;
	border: 1px solid var(--glassmorphism-border) !important;
	box-shadow: var(--shadow-inset-light) !important;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	backdrop-filter: var(--blur-backdrop);
	-webkit-backdrop-filter: var(--blur-backdrop);
}

.nav-menu-floating a i {
	font-size: 1rem;
	width: 1.5rem;
	text-align: center;
	color: var(--text-muted);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-menu-floating a.active {
	color: var(--color-primary) !important;
	border: 1px solid rgba(var(--brand-blue-rgb), 0.3) !important;
	box-shadow: var(--shadow-inset-pressed) !important;
}

.nav-menu-floating a.active i {
	color: var(--color-primary) !important;
}

.nav-lang-floating {
	position: relative !important;
	display: none !important;
	z-index: auto;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.5rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.nav-lang-floating.active {
	display: flex !important;
}

.nav-lang-floating li {
	width: auto;
}

.nav-lang-floating a {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
	background: var(--gradient-light);
	border: 1px solid var(--glassmorphism-border);
	box-shadow: var(--shadow-inset-light);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	backdrop-filter: var(--blur-backdrop);
	-webkit-backdrop-filter: var(--blur-backdrop);
}

.nav-lang-floating a span {
	letter-spacing: 0.02em;
	font-weight: 700;
}

.nav-lang-floating a:hover {
	color: var(--text-primary);
	transform: translateY(-1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-md);
	border-color: var(--border-medium);
}

.nav-lang-floating a:active {
	transform: translateY(1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-inset-pressed);
	border-color: var(--border-medium);
	transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-lang-floating a.active {
	color: var(--color-primary);
	background: var(--gradient-light);
	border: 1px solid rgba(var(--brand-blue-rgb), 0.3);
	transform: translateY(1px);
	box-shadow: var(--shadow-inset-pressed);
}

.nav-burger:hover {
	transform: translateY(-1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-md);
	border-color: var(--border-medium);
}

.nav-burger:active,
.nav-burger.pressed {
	transform: translateY(1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-inset-pressed);
	border-color: var(--border-medium);
}

.nav-burger.pressed:hover {
	transform: translateY(1px);
	box-shadow: var(--shadow-inset-pressed);
}

/* ИНДИКАТОР ЯЗЫКА НА БУРГЕРЕ */
.lang-indicator {
	position: absolute;
	top: -3px;
	right: -3px;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	z-index: calc(1500 + 1);
	pointer-events: auto;
	user-select: none;
	transition: opacity 0.3s ease;
}

/* ========================================================================= */
/* ======================= ВЫПАДАЮЩИЕ МЕНЮ ================================ */
/* ========================================================================= */

/* ОСНОВНОЕ МЕНЮ */
.nav-menu {
	display: none;
	align-items: center;
	gap: 0.7rem;
	list-style: none;
	margin: 0;
	padding: 0;
	position: fixed !important;
	background: transparent;
	z-index: 1450;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-menu li {
	width: auto;
}

.nav-menu a {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.92rem;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.9rem;
	border-radius: 100px;
	width: auto;
	justify-content: center;
	position: relative;
	cursor: pointer;
	background: var(--gradient-light);
	border: 1px solid var(--glassmorphism-border);
	box-shadow: var(--shadow-inset-light);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	backdrop-filter: var(--blur-backdrop);
	-webkit-backdrop-filter: var(--blur-backdrop);
}

.nav-menu a i {
	font-size: 1rem;
	width: 1.5rem;
	text-align: center;
	color: var(--text-muted);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-menu a:hover {
	color: var(--text-primary);
	transform: translateY(-1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-md);
	border-color: var(--border-medium);
}

.nav-menu a:hover i {
	color: var(--text-primary);
	transform: translateY(-1px);
}

.nav-menu a:active {
	transform: translateY(1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-inset-pressed);
	border-color: var(--border-medium);
	transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-menu a.active {
	color: var(--color-primary);
	background: var(--gradient-light);
	border: 1px solid rgba(var(--brand-blue-rgb), 0.3);
	transform: translateY(1px);
	box-shadow: var(--shadow-inset-pressed);
}

.nav-menu a.active i {
	color: var(--color-primary);
}

.nav-menu a.active:hover {
	transform: translateY(1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-inset-pressed);
	border-color: rgba(var(--brand-blue-rgb), 0.4);
}

.nav-menu a.active:active {
	transform: translateY(2px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-inset-pressed);
	transition: all 0.1s ease;
}

.nav-menu.active {
	display: flex;
	opacity: 1;
	pointer-events: all;
}

/* СЕЛЕКТОР ЯЗЫКОВ */
.nav-lang {
	display: none;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	position: fixed !important;
	background: transparent;
	z-index: 1450;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-lang li {
	width: auto;
}

.lang-btn {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
	background: var(--gradient-light);
	border: 1px solid var(--glassmorphism-border);
	box-shadow: var(--shadow-inset-light);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	backdrop-filter: var(--blur-backdrop);
	-webkit-backdrop-filter: var(--blur-backdrop);
}

.lang-btn span {
	letter-spacing: 0.02em;
	font-weight: 700;
}

.lang-btn:hover {
	color: var(--text-primary);
	transform: translateY(-1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-md);
	border-color: var(--border-medium);
}

.lang-btn:active {
	transform: translateY(1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-inset-pressed);
	border-color: var(--border-medium);
	transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-btn.active {
	color: var(--color-primary);
	background: var(--gradient-light);
	border: 1px solid rgba(var(--brand-blue-rgb), 0.3);
	transform: translateY(1px);
	box-shadow: var(--shadow-inset-pressed);
}

.lang-btn.active:hover {
	transform: translateY(1px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-inset-pressed);
	border-color: rgba(var(--brand-blue-rgb), 0.4);
}

.lang-btn.active:active {
	transform: translateY(2px);
	background: var(--gradient-light);
	box-shadow: var(--shadow-inset-pressed);
	transition: all 0.1s ease;
}

.nav-lang.active {
	display: flex;
	opacity: 1;
	pointer-events: all;
}

/* СКРЫТИЕ ИНДИКАТОРА ПРИ АКТИВНОМ ЯЗЫКОВОМ МЕНЮ */
.header-nav:has(.nav-lang.active) .lang-indicator,
.header-nav:has(.nav-lang-header.active) .lang-indicator,
.floating-nav-panel:has(.nav-lang-floating.active) .lang-indicator,
.nav-lang.active~.nav-burger .lang-indicator,
.nav-lang-header.active~.nav-burger .lang-indicator,
.nav-lang-floating.active~.nav-burger .lang-indicator {
	opacity: 0;
	pointer-events: none;
}

/* ========================================================================= */
/* ================= RESPONSIVE ПОЗИЦИОНИРОВАНИЕ ========================= */
/* ========================================================================= */

/* ШИРОКИЕ ЭКРАНЫ (от 1001px): единая формула через max() */
/* Бургер привязан к границе контента (max-width: 1200px), минимум — рядом с темой */
@media screen and (min-width: 1001px) {

	/* CSS-переменная: правый отступ бургера */
	:root {
		--burger-right: max(
			calc(2rem + var(--chat-button-size, 60px) + 0.75rem),
			calc((100vw - 1200px) / 2 + 2rem)
		);
	}

	/* БУРГЕР HEADER: позиция следует за контентной границей */
	.nav-burger-header {
		right: var(--burger-right) !important;
	}

	/* FLOATING UI КОНТЕЙНЕР - тема у края экрана */
	.floating-ui-container {
		top: 0.75rem !important;
		right: 2rem !important;
	}

	/* НАВИГАЦИОННАЯ ПАНЕЛЬ: всегда column */
	.floating-nav-panel {
		flex-direction: column !important;
		align-items: center !important;
		gap: 0.75rem !important;
	}

	/* ОСНОВНОЕ МЕНЮ HEADER: слева от бургера */
	.nav-menu-header {
		flex-direction: row;
		top: 50% !important;
		margin-top: -18px;
		transform: translateX(30px);
		right: calc(var(--burger-right) + 48px + 0.75rem) !important;
		white-space: nowrap;
		align-items: center;
	}

	.nav-menu-header.active {
		transform: translateX(0);
	}

	/* ЯЗЫКОВОЕ МЕНЮ HEADER: под бургером */
	.nav-lang-header {
		flex-direction: column;
		top: calc((72px - 48px) / 2 + 48px + 1rem) !important;
		right: calc(var(--burger-right) + 6px) !important;
		transform: translateY(-10px);
	}

	.nav-lang-header.active {
		transform: translateY(0);
	}
}

/* СРЕДНИЕ ЭКРАНЫ (до 1000px) */
@media screen and (max-width: 1000px) {

	/* FLOATING UI КОНТЕЙНЕР */
	.floating-ui-container {
		top: calc((60px - 48px) / 2) !important;
		right: calc(1rem + 6px) !important;
		transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}

	/* НАВИГАЦИОННАЯ ПАНЕЛЬ: вертикально, элементы по центру */
	.floating-nav-panel {
		flex-direction: column !important;
		align-items: center !important;
		gap: 0.75rem !important;
		width: auto !important;
	}
}

/* ПЛАНШЕТЫ */
@media screen and (max-width: 768px) {
	.floating-ui-container {
		top: calc((60px - 48px) / 2) !important;
		right: calc(1rem + 6px) !important;
	}
}

/* МОБИЛЬНЫЕ ЭКРАНЫ */
@media screen and (max-width: 640px) {
	.floating-ui-container {
		top: calc((56px - 44px) / 2) !important;
		right: calc(1rem - 2px) !important;
	}

	.floating-nav-panel {
		--burger-size: 44px;
	}

	.nav-burger-floating {
		width: 44px !important;
		height: 44px !important;
		font-size: 1.1rem;
	}

	.lang-indicator {
		font-size: 0.65rem;
		top: -2px;
		right: -2px;
	}
}

/* ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ */
@media screen and (max-width: 480px) {
	.floating-ui-container {
		top: calc((52px - 40px) / 2) !important;
		right: calc(0.75rem) !important;
	}

	.nav-burger-floating {
		width: 40px !important;
		height: 40px !important;
		font-size: 0.95rem;
		margin-right: 4px !important; /* (48px theme - 40px burger) / 2 */
	}

	.nav-menu-floating a {
		font-size: 0.9rem !important;
		padding: 0.35rem 0.8rem !important;
	}

	.floating-nav-panel {
		--burger-size: 40px;
	}

	.nav-lang-floating a {
		width: 32px !important;
		height: 32px !important;
		font-size: 0.7rem !important;
	}

	.nav-menu.nav-menu-floating {
		min-width: calc(var(--burger-size) + 7px + 32px * 3 + 7px * 2) !important;
	}
}

/* ========================================================================= */
/* ======================= ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ========================== */
/* ========================================================================= */

/* ТЕМНАЯ ТЕМА */
:root[data-theme="dark"] .nav-burger,
:root[data-theme="dark"] .nav-menu a,
:root[data-theme="dark"] .nav-menu-header a,
:root[data-theme="dark"] .nav-menu-floating a,
:root[data-theme="dark"] .lang-btn,
:root[data-theme="dark"] .nav-lang-header a,
:root[data-theme="dark"] .nav-lang-floating a {
	box-shadow: var(--shadow-inset-light);
}

:root[data-theme="dark"] .nav-burger:hover,
:root[data-theme="dark"] .nav-menu a:hover,
:root[data-theme="dark"] .nav-menu-header a:hover,
:root[data-theme="dark"] .nav-menu-floating a:hover,
:root[data-theme="dark"] .lang-btn:hover,
:root[data-theme="dark"] .nav-lang-header a:hover,
:root[data-theme="dark"] .nav-lang-floating a:hover {
	box-shadow: var(--shadow-md);
}

:root[data-theme="dark"] .nav-burger:active,
:root[data-theme="dark"] .nav-burger.pressed,
:root[data-theme="dark"] .nav-menu a:active,
:root[data-theme="dark"] .nav-menu a.active,
:root[data-theme="dark"] .nav-menu-header a:active,
:root[data-theme="dark"] .nav-menu-header a.active,
:root[data-theme="dark"] .nav-menu-floating a:active,
:root[data-theme="dark"] .nav-menu-floating a.active,
:root[data-theme="dark"] .lang-btn:active,
:root[data-theme="dark"] .lang-btn.active,
:root[data-theme="dark"] .nav-lang-header a:active,
:root[data-theme="dark"] .nav-lang-header a.active,
:root[data-theme="dark"] .nav-lang-floating a:active,
:root[data-theme="dark"] .nav-lang-floating a.active {
	box-shadow: var(--shadow-inset-pressed);
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {

	.nav-burger,
	.nav-menu,
	.nav-menu-header,
	.nav-menu-floating,
	.nav-lang,
	.nav-lang-header,
	.nav-lang-floating,
	.lang-indicator {
		transition: none !important;
	}
}

/* HIGH CONTRAST MODE */
@media (prefers-contrast: high) {

	.nav-burger,
	.nav-menu a,
	.lang-btn {
		border: 2px solid var(--border-dark);
	}

	.nav-menu a.active,
	.lang-btn.active {
		border: 2px solid var(--color-primary);
		background: var(--color-primary);
		color: var(--text-inverse);
	}
}

/* FOCUS STYLES */
.nav-burger:focus-visible,
.nav-menu a:focus-visible,
.lang-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* АВТОНОМНЫЙ ЧАТ ВИДЖЕТ — fixed, bottom-right, не зависит от floating-ui-container */
.floating-chat-standalone {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 9998;
	pointer-events: auto;
}

@media (max-width: 768px) {
	.floating-chat-standalone {
		bottom: 1.5rem;
		right: 1rem;
	}
}

/* ПЕЧАТЬ */
@media print {

	.nav-burger,
	.nav-menu,
	.nav-lang,
	.lang-indicator,
	.floating-ui-container,
	.floating-chat-standalone {
		display: none !important;
	}
}

/* УЛУЧШЕННАЯ ПРОИЗВОДИТЕЛЬНОСТЬ */
.nav-burger,
.nav-menu a,
.lang-btn {
	will-change: transform, box-shadow;
	transform: translateZ(0);
}

/* АНИМАЦИЯ ПОЯВЛЕНИЯ МЕНЮ - ОТКЛЮЧЕНА, используем transition в transform */
/* Анимация теперь управляется через transition в .nav-menu и .nav-lang */

/* ========================================================================= */
/* ============ LAYOUT OVERHAUL: DESKTOP & MOBILE POSITIONING ============= */
/* ========================================================================= */

/* --- DESKTOP (>=769px): Burger + Theme в header, Chat внизу справа --- */
@media screen and (min-width: 769px) {
	/* Floating container: от header до низа, theme вверху, chat внизу */
	/* top рассчитан так, чтобы центр theme-toggle совпадал с центром бургера (header 72px) */
	.floating-ui-container {
		top: calc((72px - var(--theme-button-height, 28px)) / 2) !important;
	}

	/* Скрыть floating бургер и меню на desktop */
	.nav-burger-floating {
		display: none !important;
	}

	.nav-menu-floating {
		display: none !important;
	}

	.nav-lang-floating {
		display: none !important;
	}

	/* Header бургер: привязан к контентной границе через --burger-right */
	.nav-burger-header {
		display: flex !important;
		right: var(--burger-right, calc(2rem + var(--chat-button-size, 60px) + 0.75rem)) !important;
	}

	/* Меню: горизонтально, слева от бургера */
	.nav-menu-header {
		flex-direction: row !important;
		top: calc((72px - 36px) / 2) !important;
		margin-top: 0 !important;
		right: calc(var(--burger-right, calc(2rem + var(--chat-button-size, 60px) + 0.75rem)) + 48px + 0.75rem) !important;
		white-space: nowrap;
		align-items: center;
		transform: translateX(30px);
	}

	.nav-menu-header.active {
		transform: translateX(0) !important;
	}

	/* Языковой dropdown: под бургером */
	.nav-lang-header {
		flex-direction: column !important;
		top: calc((72px - 48px) / 2 + 48px + 0.75rem) !important;
		right: calc(var(--burger-right, calc(2rem + var(--chat-button-size, 60px) + 0.75rem)) + (48px - 36px) / 2) !important;
		transform: translateY(-10px);
	}

	.nav-lang-header.active {
		transform: translateY(0) !important;
	}
}

/* Desktop 769-900px: header 60px — пересчёт вертикальных позиций */
@media screen and (min-width: 769px) and (max-width: 900px) {
	.nav-burger-header {
		top: calc((60px - 48px) / 2) !important;
	}

	.nav-menu-header {
		top: calc((60px - 36px) / 2) !important;
	}

	.nav-lang-header {
		top: calc((60px - 48px) / 2 + 48px + 0.75rem) !important;
	}

	/* top: центр theme-toggle совпадает с центром бургера (header 60px) */
	.floating-ui-container {
		top: calc((60px - var(--theme-button-height, 28px)) / 2) !important;
	}
}

/* --- MOBILE (<=768px): Вертикальная панель справа --- */
@media screen and (max-width: 768px) {
	/* Скрыть header бургер и меню */
	.nav-burger-header {
		display: none !important;
	}

	.nav-menu-header {
		display: none !important;
	}

	.nav-lang-header {
		display: none !important;
	}

	/* Показать floating бургер */
	.nav-burger-floating {
		display: flex !important;
	}

	/* Контейнер: справа */
	.floating-ui-container {
	}

	/* Панель: вертикальная колонка, элементы по правому краю */
	.floating-nav-panel {
		flex-direction: column !important;
		align-items: flex-end !important;
		gap: 0.5rem !important;
		position: relative !important;
	}

	/* Порядок: бургер -> меню -> тема (сверху вниз) */
	/* margin-right центрирует бургер (48px) относительно theme toggle (60px): (60-48)/2 = 6px */
	.nav-burger-floating {
		order: 0 !important;
		margin-right: 6px !important;
	}

	/* Меню: выпадает ВНИЗ, левый край = левый край lang кнопок */
	.nav-menu.nav-menu-floating {
		position: relative !important;
		order: 1 !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: auto !important;
		min-width: calc(var(--burger-size) + 7px + 36px * 3 + 7px * 2) !important;
		z-index: auto !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	.nav-menu.nav-menu-floating a {
		width: auto !important;
		justify-content: flex-start !important;
		padding: 0.5rem 1rem !important;
		border-radius: var(--radius-sm, 8px) !important;
	}

	/* Тема: под бургером/меню, flex-end + no margin = right-aligned */
	.floating-theme {
		order: 2 !important;
		margin-top: 16px !important;
		align-self: flex-end !important;
	}

	/* Языковое меню: ВЛЕВО от бургера через CSS var */
	.nav-lang.nav-lang-floating {
		position: absolute !important;
		order: 0 !important;
		top: calc((var(--burger-size) - 36px) / 2) !important;
		right: calc(var(--burger-size) + 10px) !important;
		flex-direction: row !important;
		width: auto !important;
		z-index: 1 !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	.nav-lang.nav-lang-floating.active {
		display: flex !important;
		animation: langSlideLeft 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
	}

	/* Анимация выпадения меню вниз */
	.nav-menu.nav-menu-floating.active {
		display: flex !important;
		animation: menuDropDown 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
	}
}

/* Анимации мобильного меню */
@keyframes menuDropDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes langSlideLeft {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}