/* Language Navigation Styles */
.tm-language-navigation {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1001;
}

.tm-language-dropdown {
	position: relative;
	display: inline-block;
}

.tm-language-btn {
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: white;
	padding: 12px 16px;
	font-size: 14px;
	border-radius: 25px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 120px;
	justify-content: space-between;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.tm-language-btn:hover,
.tm-language-btn.active {
	background: rgba(0, 0, 0, 0.9);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tm-language-title {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tm-dropdown-arrow {
	transition: transform 0.3s ease;
	font-size: 12px;
}

.tm-language-btn.active .tm-dropdown-arrow {
	transform: rotate(180deg);
}

.tm-language-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	min-width: 160px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.tm-language-menu.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tm-language-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	color: #333;
	text-decoration: none;
	transition: all 0.2s ease;
	font-size: 14px;
	font-weight: 500;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.tm-language-item:last-child {
	border-bottom: none;
}

.tm-language-item:hover {
	background: rgba(45, 153, 204, 0.1);
	color: #2D99CC;
	transform: translateX(4px);
}

.tm-language-item.active {
	background: linear-gradient(135deg, #2D99CC, #1b6f96);
	color: white;
	font-weight: 600;
}

.tm-language-item.active:hover {
	background: linear-gradient(135deg, #1b6f96, #2D99CC);
	transform: translateX(0);
}

.tm-language-flag {
	width: 20px;
	height: 15px;
	border-radius: 2px;
	display: inline-block;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Flag styles using CSS */
.tm-flag-ru {
	background: linear-gradient(to bottom, #fff 33%, #0052cc 33%, #0052cc 66%, #cc0000 66%);
}

.tm-flag-en {
	background: linear-gradient(45deg, #012169 25%, transparent 25%), 
				linear-gradient(-45deg, #012169 25%, transparent 25%), 
				linear-gradient(45deg, transparent 75%, #012169 75%), 
				linear-gradient(-45deg, transparent 75%, #012169 75%);
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.tm-flag-pl {
	background: linear-gradient(to bottom, #fff 50%, #dc143c 50%);
}

/* German flag */
.tm-flag-de {
	background: linear-gradient(to bottom, #000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%);
}

/* French flag */
.tm-flag-fr {
	background: linear-gradient(to right, #002395 33%, #fff 33%, #fff 66%, #ed2939 66%);
}

/* Spanish flag */
.tm-flag-es {
	background: linear-gradient(to bottom, #aa151b 25%, #f1bf00 25%, #f1bf00 75%, #aa151b 75%);
}

/* Ukrainian flag */
.tm-flag-ua {
	background: linear-gradient(to bottom, #005bbb 50%, #ffd700 50%);
}

/* Italian flag */
.tm-flag-it {
	background: linear-gradient(to right, #009246 33%, #fff 33%, #fff 66%, #ce2b37 66%);
}

/* Portuguese flag */
.tm-flag-pt {
	background: linear-gradient(to right, #046a38 40%, #da020e 40%);
}

/* Belarusian flag */
.tm-flag-by {
	background: linear-gradient(to bottom, #c8313e 33%, #4aa657 33%, #4aa657 66%, #c8313e 66%);
}

/* Lithuanian flag */
.tm-flag-lt {
	background: linear-gradient(to bottom, #fdb612 33%, #006a44 33%, #006a44 66%, #c1272d 66%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.tm-language-navigation {
		top: 15px;
		right: 15px;
	}
	
	.tm-language-btn {
		padding: 10px 14px;
		font-size: 13px;
		min-width: 100px;
	}
	
	.tm-language-menu {
		min-width: 140px;
	}
	
	.tm-language-item {
		padding: 10px 14px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.tm-language-navigation {
		top: 10px;
		right: 10px;
	}
	
	.tm-language-btn {
		padding: 8px 12px;
		font-size: 12px;
		min-width: 80px;
		border-radius: 20px;
	}
	
	.tm-language-title {
		display: none;
	}
	
	.tm-language-menu {
		min-width: 120px;
		right: -10px;
	}
}