dialog.dropdown-dialog {
	border: none;
	padding: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	position: fixed;
	margin: 0;
	opacity: 0;
	transform: translateY(-8px) scale(0.95);
	transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
	width: auto;
	border-radius: 0;

	&::backdrop { background: transparent; }
	&.dropdown-open { opacity: 1; transform: translateY(0) scale(1); }

	.dropdown-content {
		background: var(--geniBlueDark);
		border: 1px solid var(--geniBlueLight);
		border-radius: var(--radius);
		width: max-content;
		min-width: 140px;
		max-width: 280px;
		box-shadow:
			0 4px 20px rgba(0, 0, 0, 0.3),
			0 0 0 1px rgba(255, 255, 255, 0.1);
		overflow: hidden;
		z-index: 1000;
	}
	
	.dropdown-item {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 12px 16px;
		border: none;
		background: transparent;
		color: var(--textColor);
		text-decoration: none;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.2s ease;
		text-align: left;
		font-family: inherit;
	
		&:hover {
			background: rgba(144, 202, 249, 0.1);
			color: var(--textColor);
			outline: none;
		}
		
		&[href] {
			color: var(--textColor);
			text-decoration: none;
		}
	
		.icon {
			margin-right: 8px;
			opacity: 0.7;
			flex-shrink: 0;
		}
	
		&:hover .icon {
			opacity: 1;
		}
	
		img {
			margin-right: 12px;
			border-radius: 2px;
			flex-shrink: 0;
		}
	
		&:first-child {
			border-radius: var(--radius) var(--radius) 0 0;
		}
	
		&:last-child {
			border-radius: 0 0 var(--radius) var(--radius);
		}
	
		&:first-child:last-child {
			border-radius: var(--radius);
		}
	}
}

.language-selector, .account {
	.nav-item {
		display: flex;
		align-items: center;
		gap: 8px;

		&.dropdown-active {
			.chevron-down {
				transform: rotate(180deg);
			}
		}

		img { flex-shrink: 0; }
		.chevron-down { flex-shrink: 0; transition: transform 0.2s ease; }
	}
}