/* ==========================================
   HEADER DROPDOWN STYLES
   ========================================== */

/* Animation classes for smooth transitions */
.animate-in {
	animation: animate-in 0.2s ease-out;
}

.fade-in-0 {
	animation: fade-in 0.2s ease-out;
}

.zoom-in-95 {
	animation: zoom-in 0.2s ease-out;
}

@keyframes animate-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-10px);
	}

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

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes zoom-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Custom dropdown styles */
.dropdown-menu {
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.dropdown-item {
	position: relative;
	transition: all 0.2s ease;
}

.dropdown-item:hover {
	transform: translateX(2px);
}

.dropdown-separator {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* Submenu positioning adjustments */
.submenu {
	min-width: 200px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Theme and language icons */
.menu-icon {
	transition: transform 0.2s ease;
}

.dropdown-item:hover .menu-icon {
	transform: scale(1.1);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
	.dropdown-menu {
		right: 0;
		left: auto;
		width: calc(100vw - 2rem);
		max-width: 300px;
	}

	.submenu {
		position: fixed;
		left: 1rem;
		right: 1rem;
		top: auto;
		width: auto;
		max-width: none;
	}
}

/* Toast notification styles */
.toast {
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Arrow rotation transitions */
.arrow-icon {
	transition: transform 0.2s ease;
}

/* Hover effects for better UX */
.dropdown-button {
	position: relative;
	overflow: hidden;
}

.dropdown-button::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	transition: left 0.5s ease;
}

.dropdown-button:hover::before {
	left: 100%;
}