.search-popup-container {
	position: fixed;
	display: flex;
	flex-flow: column;
	gap: 20px;
	padding: 24px;
	width: 100%;
	margin-top: 10px;
	border-radius: 32px;
	background-color: $color-white;
	box-shadow: 0px 8px 40px rgba(#000, 0.08);
	box-sizing: border-box;
	transition:
		top 0.3s ease,
		opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		visibility 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	z-index: 1001;

	&:not(.visible) {
		opacity: 0;
		visibility: hidden;
		transform: translateY(30px);
	}
}

.search-popup-section {
	display: flex;
	flex-flow: column;
	gap: 12px;
}

.search-popup-section__head {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 12px;
}

.search-popup-section__head__icon {
	width: 24px;
	height: 24px;
}

.search-popup-section__head__title {
	font-weight: 500;
	font-size: 18px;
	line-height: 21px;
}

.search-popup-section__list {
	display: flex;
	flex-flow: column;
	gap: 10px;
}

.search-popup-section__list__item {
	line-height: 18px;

	@include desktop {
		&:hover {
			color: $color-green;
		}
	}
}

.search-popup-help-section {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	min-height: 54px;
	padding: 12px 16px;
	border-radius: 16px;
	background-color: $color-surface;
	box-sizing: border-box;

	@include desktop {
		&:hover {
			.search-popup-help-section__text {
				span {
					color: $color-green;
				}
			}

			.search-popup-help-section__icon {
				transform: scale(1.2);

				svg {
					transform: scale(0.9);
				}
			}
		}
	}
}

.search-popup-help-section__text {
	flex: 1;
	display: flex;
	flex-flow: nowrap;
	align-items: center;
	gap: 10px;

	strong {
		font-weight: 700;
		letter-spacing: -0.03em;
	}

	span {
		font-size: 14px;
		color: $color-gray-md;
	}
}

.search-popup-help-section__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: $color-green;
	color: $color-white;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

	svg {
		width: 20px;
		height: 20px;
		transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
}