/* ----------------------------------------------------------------------------------------
* FAQ 页面动态内容（分类导航、问题列表、详情浮层）
* 由 wwwroot/static/js/faqs.js 运行时渲染，仅 faqs.html 引入
* ---------------------------------------------------------------------------------------- */
/************************************/
/***  FAQ 页面动态内容与详情浮层  ***/
/************************************/

/* 加载中 / 空数据 / 加载失败提示 */
.faq-state-tip{
	padding: 40px 30px;
	background: var(--secondary-color);
	border-radius: 12px;
	text-align: center;
	font-size: 16px;
	color: var(--text-color);
}

.faq-nav-loading{
	font-size: 14px;
	color: var(--text-color);
}

/* 左侧分类导航当前项高亮 */
.page-category-list ul li a.is-active{
	color: var(--accent-color);
	font-weight: 600;
}

.page-category-list ul li a.is-active::before{
	transform: rotate(45deg);
}

/* 分类说明文字 */
.faq-category-desc{
	margin: 0 0 25px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--text-color);
}

/* ----------------------------------------------------------------------------------------
* 分类切换视图：右侧一次只显示一个分类，避免分类过多时整页长滚动
* ---------------------------------------------------------------------------------------- */
#faqContent .page-single-faqs{
	display: none;
}

#faqContent .page-single-faqs.is-active{
	display: block;
	animation: faqSectionIn 0.35s ease both;
}

@keyframes faqSectionIn{
	from{
		opacity: 0;
		transform: translateY(10px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* 分类内问题数量提示 */
.faq-category-count{
	margin: -6px 0 22px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-color);
	opacity: 0.75;
}

/* 左侧分类导航：分类过多时在侧栏内部滚动，不再把页面撑长 */
.page-category-list ul{
	max-height: 56vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.page-category-list ul::-webkit-scrollbar{
	width: 4px;
}

.page-category-list ul::-webkit-scrollbar-thumb{
	background: rgba(15, 36, 83, 0.18);
	border-radius: 4px;
}

.page-category-list ul::-webkit-scrollbar-track{
	background: transparent;
}

/* 分类项：名称 + 数量，箭头仍由 custom.css 的 a::before 提供 */
.page-category-list ul li a{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding-right: 30px;
}

.faq-nav-label{
	flex: 1 1 auto;
}

.faq-nav-count{
	flex: 0 0 auto;
	min-width: 22px;
	margin-right: 6px;
	padding: 1px 7px;
	background: rgba(63, 130, 251, 0.12);
	border-radius: 20px;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.page-category-list ul li a.is-active .faq-nav-count{
	background: var(--accent-color);
	color: var(--white-color);
}

/* 单个分类问题较多时的分页 */
.faq-question-item.is-hidden{
	display: none;
}

.faq-pagination{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 34px;
}

.faq-page-btn{
	min-width: 44px;
	height: 44px;
	padding: 0 16px;
	background: var(--secondary-color);
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.faq-page-btn:hover:not(:disabled):not(.is-current){
	background: var(--white-color);
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.faq-page-btn:focus-visible{
	outline: none;
	border-color: var(--accent-color);
}

.faq-page-btn.is-current{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
	cursor: default;
}

.faq-page-btn:disabled{
	opacity: 0.45;
	cursor: not-allowed;
}

.faq-page-ellipsis{
	padding: 0 2px;
	font-size: 15px;
	line-height: 1;
	color: var(--text-color);
}

/* 移动端/平板：分类变为顶部横向滚动的标签条，不再占满首屏 */
@media only screen and (max-width: 991px){
	.page-category-list{
		margin-bottom: 24px;
	}

	.page-category-list ul{
		display: flex;
		gap: 10px;
		max-height: none;
		padding: 14px 16px;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.page-category-list ul li{
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
		border-bottom: none;
	}

	.page-category-list ul li a{
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 9px 16px;
		background: var(--white-color);
		border: 1px solid var(--divider-color);
		border-radius: 30px;
		font-size: 14px;
		white-space: nowrap;
	}

	.page-category-list ul li a::before{
		display: none;
	}

	.page-category-list ul li a.is-active{
		background: var(--accent-color);
		border-color: var(--accent-color);
		color: var(--white-color);
	}

	.page-category-list ul li a.is-active .faq-nav-count{
		background: rgba(255, 255, 255, 0.24);
		color: var(--white-color);
	}

	.faq-category-count{
		margin-top: -10px;
	}

	.faq-pagination{
		gap: 6px;
		margin-top: 26px;
	}

	.faq-page-btn{
		min-width: 38px;
		height: 38px;
		padding: 0 12px;
		font-size: 14px;
	}
}


/* 问题标题列表 */
.faq-question-list{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.faq-question-item{
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 22px 24px;
	background: var(--secondary-color);
	border: 1px solid transparent;
	border-radius: 12px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--primary-color);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.faq-question-item:hover{
	color: var(--primary-color);
	text-decoration: none;
}

.faq-question-item:hover,
.faq-question-item:focus-visible{
	background: var(--white-color);
	border-color: var(--accent-color);
	box-shadow: 0 12px 30px rgba(15, 36, 83, 0.08);
	transform: translateY(-2px);
	outline: none;
}

.faq-question-index{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 10px;
	background: var(--accent-color);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--white-color);
}

.faq-question-title{
	flex: 1 1 auto;
}

.faq-question-arrow{
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	background: rgba(63, 130, 251, 0.12);
	border-radius: 50%;
	transition: all 0.3s ease-in-out;
}

.faq-question-arrow::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--accent-color);
	border-right: 2px solid var(--accent-color);
	transform: translate(-60%, -50%) rotate(45deg);
}

.faq-question-item:hover .faq-question-arrow{
	background: var(--accent-color);
}

.faq-question-item:hover .faq-question-arrow::before{
	border-color: var(--white-color);
}

/* FAQ 详情内容排版（供 /faq/{id} 详情页复用） */
/* 返回FAQ */
.faq-detail-back{
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--text-color);
	cursor: pointer;
	transition: color 0.3s ease-in-out;
}

.faq-detail-back:hover,
.faq-detail-back:focus{
	color: var(--accent-color);
}

.faq-detail-back:focus,
.faq-detail-back:focus-visible{
	outline: none;
}

.faq-detail-back-arrow{
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background: var(--secondary-color);
	border-radius: 50%;
	transition: all 0.3s ease-in-out;
}

.faq-detail-back-arrow::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-bottom: 2px solid var(--accent-color);
	border-left: 2px solid var(--accent-color);
	transform: translate(-35%, -50%) rotate(45deg);
}

.faq-detail-back:hover .faq-detail-back-arrow{
	background: var(--accent-color);
}

.faq-detail-back:hover .faq-detail-back-arrow::before{
	border-color: var(--white-color);
}

/* 分类标签（带书本图标） */
.faq-detail-category{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 34px;
	padding: 7px 16px;
	background: rgba(63, 130, 251, 0.1);
	border-radius: 30px;
	font-size: 13px;
	font-weight: 500;
	color: var(--accent-color);
}

.faq-detail-category-icon{
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.faq-detail-title{
	margin: 18px 0 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--primary-color);
}

.faq-detail-body{
	margin-top: 22px;
	font-size: 16px;
	line-height: 1.9;
	color: var(--text-color);
}

.faq-detail-body p{
	margin: 0 0 14px;
}

.faq-detail-body p:last-child{
	margin-bottom: 0;
}

.faq-detail-body img{
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.faq-detail-body ul,
.faq-detail-body ol{
	margin: 0 0 14px;
	padding-left: 22px;
}

.faq-detail-body li{
	margin-bottom: 8px;
}

.faq-detail-body table{
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 14px;
}

.faq-detail-body table th,
.faq-detail-body table td{
	padding: 10px 12px;
	border: 1px solid var(--divider-color);
	text-align: left;
}

@media only screen and (max-width: 991px){
	.faq-question-item{
		font-size: 17px;
		padding: 18px 20px;
	}

	.faq-detail-title{
		font-size: 26px;
	}
}

@media only screen and (max-width: 767px){
	.faq-detail-category{
		margin-top: 26px;
	}

	.faq-detail-title{
		margin-top: 14px;
		font-size: 21px;
	}

	.faq-detail-body{
		margin-top: 16px;
		font-size: 15px;
	}

	.faq-question-list{
		gap: 12px;
	}

	.faq-question-item{
		gap: 12px;
		padding: 16px 16px;
		font-size: 16px;
	}

	.faq-question-index{
		height: 28px;
		font-size: 13px;
	}

	.faq-question-arrow{
		width: 30px;
		height: 30px;
	}
}