/* 头部搜索类型的父容器 */
#search_type {
	width: 80%;
	margin: 50px 10% 50px 10%;
	border: 3px solid #f9fafb;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	background-color: #f8f9fa;
	position: relative;
	/* 为滑动条提供定位上下文 */
	overflow: hidden;
	/* 隐藏滑动条溢出的部分 */
}

/* 滑动指示条 */
#search_type::before {
	content: '';
	position: absolute;
	top: 4px;
	/* 调整以匹配容器内边距 */
	bottom: 4px;
	left: 4px;
	/* 初始位置在第一个按钮 */
	width: calc(33.33% - 8px);
	/* 减去左右边距 */
	background-color: #007bff;
	border-radius: 100px;
	transition: left 0.3s ease;
	/* 改为简单的缓动效果，没有弹簧效果 */
	z-index: 1;
	/* 放在按钮下方 */
}

/* 头部搜索类型按钮 */
.search_type_btn {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 10px 0;
	text-align: center;
	cursor: pointer;
	transition: color 0.3s ease;
	background-color: transparent;
	/* 改为透明，由滑动条提供背景 */
	color: #333;
	font-weight: 500;
	font-size: 16px;
	user-select: none;
	border-radius: 100px;
	position: relative;
	/* 确保按钮在滑动条上方 */
	z-index: 2;
	/* 按钮在滑动条上方 */
}

/* 悬停效果 */
.search_type_btn:hover {
	color: #007bff;
	/* 悬停时改变文字颜色 */
	transform: translateY(-1px);
}

/* 选中状态的样式 */
.search_type_btn.active {
	color: white;
	/* 选中按钮文字颜色 */
	font-weight: bold;
	border-radius: 100px;
}

/* 选中状态悬停效果 */
.search_type_btn.active:hover {
	color: white;
	/* 保持选中状态文字颜色 */
}

/* 移除悬停时的圆角样式，因为现在有统一的圆角 */
#search_type_btn_1:hover,
#search_type_btn_2:hover,
#search_type_btn_3:hover {
	border-radius: 100px;
}

/* 搜索框容器 */
#search_container {
	width: 80%;
	margin: 0 10% 50px 10%;
	display: flex;
	justify-content: center;
}

/* 搜索框主体 */
#search_box {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	border: 3px solid #f9fafb;
	border-radius: 100px;
	background-color: white;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: all 0.3s ease;
}

/* 搜索框获得焦点时的效果 */
#search_box:focus-within {
	border-color: #007bff;
	box-shadow: 0 2px 15px rgba(0, 123, 255, 0.2);
	transform: translateY(-2px);
}

/* 搜索图标 */
.search_icon {
	position: absolute;
	left: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	/* 默认不可点击 */
	z-index: 2;
	color: #6c757d;
	transition: color 0.3s ease;
}

/* 搜索框获得焦点时图标变色 */
#search_box:focus-within .search_icon {
	color: #007bff;
}

/* 输入框 */
#search_input {
	flex: 1;
	padding: 15px 20px 15px 60px;
	/* 左侧留出图标空间 */
	border: none;
	outline: none;
	font-size: 16px;
	font-weight: 500;
	color: #333;
	background-color: transparent;
}

/* 输入框占位符样式 */
#search_input::placeholder {
	color: #adb5bd;
	font-weight: 400;
}

/* 清除输入框默认的搜索图标（某些浏览器会添加） */
#search_input::-webkit-search-decoration,
#search_input::-webkit-search-cancel-button,
#search_input::-webkit-search-results-button,
#search_input::-webkit-search-results-decoration {
	display: none;
}

/* 输入框聚焦样式 */
#search_input:focus {
	outline: none;
}