.country-dropdown {
	position: relative;

	.country-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		border-radius: 9999px;
		background-color: rgb(255 255 255 / 0.1);
		padding: 0.375rem 0.625rem;
		font-size: 0.75rem;
		line-height: 1rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: #18181b;
		transition: background-color 0.15s ease;
		border: none;
		cursor: pointer;

		&:hover {
			background-color: rgb(255 255 255 / 0.2);
		}

		@media (max-width: 1279px) {
			width: 2.25rem;
			height: 2.25rem;
			justify-content: center;
			gap: 0;
			padding: 0;
		}

		.country-btn-flag {
			font-size: 0.875rem;
			line-height: 1;
		}

		.country-btn-label {
			display: none;

			@media (min-width: 1280px) {
				display: inline;
			}
		}

		.country-btn-arrow {
			width: 0.875rem;
			height: 0.875rem;
			flex-shrink: 0;
			color: #18181b;
			transition: transform 0.15s ease;

			@media (max-width: 1279px) {
				display: none;
			}
		}
	}

	.country-menu-wrapper {
		position: absolute;
		bottom: -0.25rem;
		right: 0;
		z-index: 50;
		transform: translateY(100%);

		.country-menu {
			min-width: 13.5rem;
			overflow: hidden;
			border-radius: 1rem;
			border: 1px solid rgba(228, 228, 231, 0.8);
			background-color: #ffffff;
			font-size: 0.875rem;
			line-height: 1.25rem;
			color: var(--color-primary);
			box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);

			.country-menu-header {
				border-bottom: 1px solid #f4f4f5;
				background-image: linear-gradient(to bottom right, #fafafa, #ffffff);
				padding: 0.625rem 0.875rem;
				font-size: 0.6875rem;
				font-weight: 600;
				text-transform: uppercase;
				letter-spacing: 0.14em;
				color: #a1a1aa;
				margin: 0;
			}

			.country-menu-list {
				padding-top: 0.375rem;
				padding-bottom: 0.375rem;
				list-style: none;
				margin: 0;
				padding-left: 0;

				li {
					margin: 0;
					padding: 0;
				}

				.country-menu-item {
					display: flex;
					align-items: center;
					gap: 0.75rem;
					padding: 0.625rem 0.875rem;
					font-weight: 500;
					transition: background-color 0.15s ease, color 0.15s ease;
					text-decoration: none;
					color: #3f3f46;

					&:hover,
					&.active {
						background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
						color: var(--color-primary);
					}

					.country-flag {
						font-size: 1rem;
						line-height: 1;
					}

					.country-name {
						flex: 1 1 0%;
					}

					.country-current-badge {
						font-size: 0.625rem;
						font-weight: 700;
						text-transform: uppercase;
						letter-spacing: 0.05em;
						color: var(--color-primary);
					}
				}
			}
		}
	}
}

.rotate-180 {
	transform: rotate(180deg);
}