/**
 * 评论区样式（机能 / 神经野兽风）
 *
 * 原 comments.php 末尾内联 <style>（~130 行）已迁入此处。
 * 注意：评论区 AJAX <script> 包含 10+ 处 PHP 变量注入（admin-ajax.php URL、nonce 等），
 *      保持内联以避免 localize 迁移引入 bug。
 *
 * Enqueue：functions.php → youcang_enqueue_scripts()
 * 依赖：youcang-style / youcang-animations
 */

/* 评论排序按钮样式 - 神经野兽风 */
.comment-sort-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.375rem 0.625rem;
	border: 2px solid #0f172a;
	background-color: #ffffff;
	color: #475569;
	font-weight: 900;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 2px 2px 0 #0f172a;
	transition: all 0.15s;
	cursor: pointer;
}

.comment-sort-btn:hover {
	background-color: #fef9c3;
	color: #0f172a;
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 #0f172a;
}

.comment-sort-btn.active {
	background-color: #0f172a;
	color: #facc15;
	box-shadow: 2px 2px 0 #ef4444;
}

.comment-sort-btn.active:hover {
	box-shadow: 1px 1px 0 #ef4444;
}

.comment-sort-btn i {
	width: 1rem;
	height: 1rem;
}

/* 置顶按钮激活状态 */
.comment-pin-btn.pinned {
	border-color: #a855f7;
	color: #a855f7;
	background-color: #faf5ff;
}

/* 评论回复按钮样式优化 */
.comment-reply-wrapper a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border: 2px solid #cbd5e1;
	background-color: #ffffff;
	color: #64748b;
	font-weight: 700;
	font-size: 0.8125rem;
	border-radius: 0.125rem;
	transition: all 0.2s;
}

.comment-reply-wrapper a:hover {
	border-color: #0f172a;
	color: #0f172a;
	background-color: #f1f5f9;
}

.comment-reply-wrapper a i {
	width: 1rem;
	height: 1rem;
}

/* 点赞按钮激活状态 */
.comment-like-btn.liked {
	border-color: #ef4444;
	color: #ef4444;
	background-color: #fef2f2;
}

/* 评论表单标题样式 */
.comment-reply-title {
	display: inline-flex !important;
}

/* 取消回复按钮样式 */
#cancel-comment-reply-link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background-color: #64748b;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.875rem;
	border: 2px solid #475569;
	transition: all 0.2s;
	text-decoration: none;
}

#cancel-comment-reply-link:hover {
	background-color: #475569;
	border-color: #334155;
}

/* 评论表单布局 - 让提交按钮和工具按钮在同一行 */
.comment-form .form-submit {
	margin: 0 !important;
}

/* 评论操作按钮响应式优化 */
@media (max-width: 640px) {
	.comment-reply-wrapper a span {
		display: none;
	}

	.comment-like-btn,
	.comment-reply-wrapper a {
		padding: 0.375rem 0.5rem;
	}

	.comment-sort-btn span {
		display: none;
	}

	.comment-sort-btn {
		padding: 0.375rem 0.5rem;
	}
}