/* ============================================
   PREMIUM LANGUAGE SELECTOR
   Infinity2 Glass Style
   ============================================ */

.language-selector-premium {
	position: relative;
	width: 100%;
	padding: 20px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.language-selector-container {
	background: var(--bg-glass);
	backdrop-filter: var(--blur-md);
	-webkit-backdrop-filter: var(--blur-md);
	border: 1px solid var(--border-color);
	border-radius: 50px;
	padding: 8px 16px;
	box-shadow: var(--shadow-md);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.language-selector-container::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.05), rgba(79, 89, 177, 0.03));
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.language-selector-container:hover::before {
	opacity: 1;
}

.language-flags-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

/* Flag Item */
.language-flag-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	border: 2px solid transparent;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	overflow: visible;
}

.language-flag-item::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: -1;
}

/* Flag Wrapper */
.flag-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
}

.flag-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	display: block;
	transition: transform 0.2s ease;
	user-select: none;
	pointer-events: none;
}

/* Active State */
.language-flag-item.active {
	border-color: var(--border-accent);
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(79, 89, 177, 0.15));
	box-shadow: 
		0 0 0 2px rgba(138, 43, 226, 0.3),
		0 0 20px rgba(138, 43, 226, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transform: scale(1.05);
}

.language-flag-item.active::before {
	opacity: 0.3;
}

.language-flag-item.active .flag-image {
	transform: scale(1.1);
}

/* Active Indicator */
.active-indicator {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 16px;
	height: 16px;
	background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
	border: 2px solid var(--bg-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(138, 43, 226, 0.5);
	z-index: 2;
	animation: indicatorPulse 2s ease-in-out infinite;
}

.active-indicator i {
	font-size: 8px;
	color: #fff;
	line-height: 1;
}

@keyframes indicatorPulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 2px 8px rgba(138, 43, 226, 0.5);
	}
	50% {
		transform: scale(1.1);
		box-shadow: 0 2px 12px rgba(138, 43, 226, 0.7);
	}
}

/* Hover State */
.language-flag-item:hover:not(.active) {
	border-color: var(--border-accent);
	background: rgba(138, 43, 226, 0.15);
	transform: scale(1.1);
	box-shadow: 
		0 0 0 2px rgba(138, 43, 226, 0.2),
		0 4px 12px rgba(138, 43, 226, 0.3);
}

.language-flag-item:hover:not(.active)::before {
	opacity: 0.2;
}

.language-flag-item:hover:not(.active) .flag-image {
	transform: scale(1.15);
}

.language-flag-item.active:hover {
	transform: scale(1.08);
	box-shadow: 
		0 0 0 2px rgba(138, 43, 226, 0.4),
		0 0 25px rgba(138, 43, 226, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Click/Press Animation */
.language-flag-item:active {
	transform: scale(0.95) !important;
	transition: transform 0.1s ease;
}

.language-flag-item.active:active {
	transform: scale(1.0) !important;
}

/* Tooltip */
.flag-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--bg-panel);
	backdrop-filter: var(--blur-md);
	-webkit-backdrop-filter: var(--blur-md);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.2s ease;
	box-shadow: var(--shadow-md);
	z-index: 100;
}

.flag-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--border-color);
}

.flag-tooltip::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--bg-panel);
	margin-top: -1px;
	z-index: 1;
}

.language-flag-item:hover .flag-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-4px);
}

/* Responsive */
@media (max-width: 1023px) {
	.language-selector-premium {
		padding: 15px 0;
	}
	
	.language-selector-container {
		padding: 6px 12px;
		border-radius: 40px;
	}
	
	.language-flag-item {
		width: 40px;
		height: 40px;
	}
	
	.active-indicator {
		width: 14px;
		height: 14px;
		top: -1px;
		right: -1px;
	}
	
	.active-indicator i {
		font-size: 7px;
	}
	
	.flag-tooltip {
		font-size: 11px;
		padding: 5px 10px;
	}
}

@media (max-width: 768px) {
	.language-selector-premium {
		padding: 12px 0;
	}
	
	.language-selector-container {
		padding: 4px 8px;
		border-radius: 35px;
		max-width: calc(100vw - 40px);
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	
	.language-selector-container::-webkit-scrollbar {
		display: none;
	}
	
	.language-flags-list {
		gap: 6px;
		min-width: max-content;
		padding: 0 4px;
	}
	
	.language-flag-item {
		width: 36px;
		height: 36px;
		flex-shrink: 0;
	}
	
	.active-indicator {
		width: 12px;
		height: 12px;
		top: 0;
		right: 0;
		border-width: 1.5px;
	}
	
	.active-indicator i {
		font-size: 6px;
	}
	
	.flag-tooltip {
		display: none; /* Hide tooltip on mobile for cleaner UX */
	}
	
	.language-flag-item:hover:not(.active),
	.language-flag-item.active:hover {
		transform: scale(1.05);
	}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	.language-flag-item,
	.flag-image,
	.active-indicator,
	.flag-tooltip,
	.language-selector-container::before {
		transition: none;
		animation: none;
	}
	
	.language-flag-item:hover:not(.active),
	.language-flag-item.active:hover {
		transform: none;
	}
	
	.language-flag-item:active {
		transform: none !important;
	}
}