/* ============================================
   УНИВЕРСАЛЬНЫЕ ВЕРХНИЕ КОНТРОЛЫ
   Тема + Язык + Настройки
   ============================================ */

/* === ОБЁРТКА === */
.top-controls {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ============================================
   КНОПКА НАСТРОЕК (шестерёнка)
   Только для авторизованных пользователей.
   На login.php / reset-password.php блок не рендерится вообще
   (см. helpers/TopControls.php v2.1) — остальные контролы сдвигаются
   автоматически за счёт flex + gap в .top-controls.
   ============================================ */
.settings-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	transition:
		opacity 0.2s ease,
		transform 0.3s ease;
	outline: none;
	color: var(--text-secondary);
}

.settings-btn:hover {
	opacity: 0.7;
}

.settings-btn:hover .settings-icon {
	transform: rotate(90deg);
}

.settings-btn:active {
	transform: scale(0.95);
}

.settings-icon {
	transition:
		transform 0.4s ease,
		color 0.2s ease;
	color: var(--text-secondary);
}

/* Анимация шестерёнки при hover */
@keyframes settings-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.settings-btn:hover .settings-icon {
	animation: settings-spin 2s linear infinite;
	color: var(--btn-primary-hover);
}

/* Инверсия цвета шестерёнки для разных тем */
[data-theme="dark"] .settings-icon {
	filter: invert(1);
}

[data-theme="sunset"] .settings-icon {
	filter: brightness(0) saturate(100%) invert(27%) sepia(25%) saturate(1000%)
		hue-rotate(5deg) brightness(90%) contrast(100%);
}

[data-theme="sunrise"] .settings-icon {
	filter: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(1000%)
		hue-rotate(230deg) brightness(90%) contrast(90%);
}

/* ============================================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ
   ============================================ */
.theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
	outline: none;
	position: relative;
}

.theme-toggle:hover {
	opacity: 0.7;
}

.theme-icon {
	position: absolute;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

/* Светлая тема: тёмная луна (приглашение в тёмную) */
.theme-icon-light {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F2F2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

/* Светлая тема: солнце скрыто */
.theme-icon-dark {
	opacity: 0;
	transform: rotate(90deg) scale(0.5);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}

/* Тёмная тема: инверсия */
[data-theme="dark"] .theme-icon-light {
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
}

[data-theme="dark"] .theme-icon-dark {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/* ============================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА
   ============================================ */
.lang-switcher {
	position: relative;
}

.lang-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
	outline: none;
	font-family: inherit;
}

.lang-btn:hover {
	/* opacity убран — вращение глобуса заменяет визуальный feedback */
}

/* Контейнер-обёртка — круг 24×24, обрезает всё лишнее (техника atuin.ru) */
.lang-icon-wrap {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	border: 1px solid var(--border-color);
}

/* Слой карты — 100×30, в 3.3× шире контейнера.
   viewBox="0 0 1000 300": континент при y=18.6-177.8 = 53% высоты SVG.
   При layer height 38px → континент = 20px (84% высоты 24px круга).
   background-position: 0 -220px для back — сдвиг на 220px по Y
   (континент появляется в слое у края и движется синхронно с front-слоем). */
.lang-icon-front,
.lang-icon-back {
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 30px;
	overflow: visible;
	background-repeat: no-repeat;
}

/* Front — карта с континентами (SVG y=0) */
.lang-icon-front {
	background-image: url("../images/globe-flat.svg");
	background-size: 100px 30px;
	background-position: 0 0;
	animation: textureSpinreverse 1.5s linear infinite paused;
}

/* Back — сдвиг по Y на 220px (континент виден в слое, фаза анимации
   смещена, что создаёт 3D-эффект как на atuin.ru) */
.lang-icon-back {
	background-image: url("../images/globe-flat-back.svg");
	background-size: 100px 30px;
	background-position: 0 -220px;
	animation: textureSpin 1.5s linear infinite paused;
}

.lang-btn:hover .lang-icon-front,
.lang-btn:hover .lang-icon-back {
	animation-play-state: running;
}

/* Front: движется из -47.5% → 0 (вправо) */
@keyframes textureSpinreverse {
	from {
		transform: translateX(-47.5%);
	}
	to {
		transform: translateX(0);
	}
}

/* Back: движется из 0 → -47.5% (влево) */
@keyframes textureSpin {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-47.5%);
	}
}

/* Dark theme — подменяем обе карты на тёмные версии */
[data-theme="dark"] .lang-icon-front {
	background-image: url("../images/globe-flat-dark.svg");
}
[data-theme="dark"] .lang-icon-back {
	background-image: url("../images/globe-flat-back-dark.svg");
}

.lang-current {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1;
}

.lang-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 6px;
	min-width: 90px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	transition: all 0.15s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 101;
}

[data-theme="dark"] .lang-dropdown {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.lang-dropdown.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lang-option {
	display: block;
	padding: 10px 16px;
	border-radius: 4px;
	text-decoration: none;
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
	cursor: pointer;
	line-height: 1;
}

.lang-option:hover {
	background-color: var(--hover-bg);
	color: var(--text-primary);
}

.lang-option.active {
	background-color: var(--hover-bg);
	color: var(--text-primary);
	font-weight: 600;
	position: relative;
}

.lang-option.active::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 14px;
	background-color: var(--text-primary);
	border-radius: 2px;
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */
@media (max-width: 480px) {
	.top-controls {
		top: 12px;
		right: 12px;
		gap: 6px;
	}

	.theme-toggle {
		width: 32px;
		height: 32px;
	}

	.theme-icon {
		width: 20px;
		height: 20px;
	}

	.lang-icon-wrap {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		overflow: hidden;
	}

	.lang-icon-front,
	.lang-icon-back {
		width: 50px;
		height: 24px;
		background-size: 50px 24px;
	}

	.lang-icon-back {
		background-position: 0 -220px;
	}

	@keyframes textureSpinreverse {
		from {
			transform: translateX(-47.5%);
		}
		to {
			transform: translateX(0);
		}
	}

	@keyframes textureSpin {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(-47.5%);
		}
	}

	.lang-current {
		font-size: 12px;
	}

	.lang-dropdown {
		min-width: 80px;
	}

	.lang-option {
		padding: 8px 12px;
		font-size: 13px;
	}
}

/* ============================================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ (DROPDOWN)
   ============================================ */
.theme-switcher {
	position: relative;
}

.theme-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
	outline: none;
	position: relative;
}

.theme-btn:hover {
	opacity: 0.7;
}

.theme-icon {
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Иконка текущей темы */
.theme-icon-current {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F2F2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}

[data-theme="dark"] .theme-icon-current {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

[data-theme="sunset"] .theme-icon-current {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235c4033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 18a5 5 0 0 0-10 0'/%3E%3Cline x1='12' y1='9' x2='12' y2='2'/%3E%3Cline x1='4.22' y1='10.22' x2='5.64' y2='11.64'/%3E%3Cline x1='1' y1='18' x2='3' y2='18'/%3E%3Cline x1='21' y1='18' x2='23' y2='18'/%3E%3Cline x1='18.36' y1='11.64' x2='19.78' y2='10.22'/%3E%3Cline x1='23' y1='22' x2='1' y2='22'/%3E%3Cpolyline points='16 5 12 9 8 5'/%3E%3C/svg%3E");
}

.theme-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 6px;
	min-width: 140px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	transition: all 0.15s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 101;
}

[data-theme="dark"] .theme-dropdown {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="sunset"] .theme-dropdown {
	box-shadow: 0 4px 12px rgba(92, 64, 51, 0.15);
}

.theme-dropdown.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.theme-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 4px;
	text-decoration: none;
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 500;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
	cursor: pointer;
	line-height: 1;
}

.theme-option:hover {
	background-color: var(--hover-bg);
	color: var(--text-primary);
}

.theme-option.active {
	background-color: var(--hover-bg);
	color: var(--text-primary);
	font-weight: 600;
	position: relative;
}

.theme-option.active::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 14px;
	background-color: var(--text-primary);
	border-radius: 2px;
}

.theme-option-icon {
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}

.theme-option-icon-light {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232F2F2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}

.theme-option-icon-dark {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232F2F2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

.theme-option-icon-sunset {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235c4033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 18a5 5 0 0 0-10 0'/%3E%3Cline x1='12' y1='9' x2='12' y2='2'/%3E%3Cline x1='4.22' y1='10.22' x2='5.64' y2='11.64'/%3E%3Cline x1='1' y1='18' x2='3' y2='18'/%3E%3Cline x1='21' y1='18' x2='23' y2='18'/%3E%3Cline x1='18.36' y1='11.64' x2='19.78' y2='10.22'/%3E%3Cline x1='23' y1='22' x2='1' y2='22'/%3E%3Cpolyline points='16 5 12 9 8 5'/%3E%3C/svg%3E");
}

[data-theme="dark"] .theme-option-icon-light,
[data-theme="dark"] .theme-option-icon-dark {
	filter: invert(1);
}

[data-theme="sunrise"] .theme-icon-current {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233d3654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 18a5 5 0 0 0-10 0'/%3E%3Cline x1='12' y1='2' x2='12' y2='9'/%3E%3Cline x1='4.22' y1='10.22' x2='5.64' y2='11.64'/%3E%3Cline x1='1' y1='18' x2='3' y2='18'/%3E%3Cline x1='21' y1='18' x2='23' y2='18'/%3E%3Cline x1='18.36' y1='11.64' x2='19.78' y2='10.22'/%3E%3Cline x1='23' y1='22' x2='1' y2='22'/%3E%3Cpolyline points='8 6 12 2 16 6'/%3E%3C/svg%3E");
}

.theme-option-icon-sunrise {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233d3654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 18a5 5 0 0 0-10 0'/%3E%3Cline x1='12' y1='2' x2='12' y2='9'/%3E%3Cline x1='4.22' y1='10.22' x2='5.64' y2='11.64'/%3E%3Cline x1='1' y1='18' x2='3' y2='18'/%3E%3Cline x1='21' y1='18' x2='23' y2='18'/%3E%3Cline x1='18.36' y1='11.64' x2='19.78' y2='10.22'/%3E%3Cline x1='23' y1='22' x2='1' y2='22'/%3E%3Cpolyline points='8 6 12 2 16 6'/%3E%3C/svg%3E");
}

[data-theme="sunrise"] .theme-dropdown {
	box-shadow: 0 4px 12px rgba(61, 54, 84, 0.15);
}

/* ============================================
   ПЛАВНЫЙ ПЕРЕХОД ПРИ СМЕНЕ ЯЗЫКА
   ============================================ */

/* Состояние "уход" — fade-out + blur */
html.lang-switching {
	animation: langFadeOut 0.35s ease-in forwards;
}

/* Состояние "возврат" — fade-in */
html.lang-loaded {
	animation: langFadeIn 0.4s ease-out forwards;
}

@keyframes langFadeOut {
	0% {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
	100% {
		opacity: 0;
		filter: blur(8px);
		transform: scale(0.98);
	}
}

@keyframes langFadeIn {
	0% {
		opacity: 0;
		filter: blur(8px);
		transform: scale(0.98);
	}
	100% {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}

/* Убираем стандартные transitions у всех элементов во время смены языка */
html.lang-switching *,
html.lang-loaded * {
	transition: none !important;
}

/* ============================================
   ПЛАВНАЯ СМЕНА ТЕМЫ
   ============================================ */

/* Отключаем transition при первой загрузке (чтобы не было анимации при открытии страницы) */
html.preload,
html.preload *,
html.preload *::before,
html.preload *::after {
	transition: none !important;
}

/* Плавный переход для всех цветовых свойств при смене темы */
html:not(.preload) {
	transition:
		background-color 0.4s ease,
		color 0.4s ease;
}

html:not(.preload) *,
html:not(.preload) *::before,
html:not(.preload) *::after {
	transition:
		background-color 0.4s ease,
		background 0.4s ease,
		color 0.4s ease,
		border-color 0.4s ease,
		box-shadow 0.4s ease,
		fill 0.4s ease,
		stroke 0.4s ease;
}

/* Исключения — элементы, которые не должны плавно меняться (анимации, hover и т.д.) */
html:not(.preload) .btn,
html:not(.preload) .form-input,
html:not(.preload) .captcha-image,
html:not(.preload) canvas {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease,
		opacity 0.2s ease;
}

/* Лёгкий эффект "пульса" при смене темы */
@keyframes themePulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.92;
	}
	100% {
		opacity: 1;
	}
}

html.theme-switching {
	animation: themePulse 0.5s ease;
}