/* comments module extracted for per-page loading */

/* 警告信息样式 */
.warning {
	font-size: 12px;
	color: #999;
	line-height: 2em;
	clear: both;
	margin-bottom: 2%;
}

/* 评论列表样式 */
#comments {
	overflow: hidden;
}

#comments li {
	position: relative;
	padding-bottom: 15px;
	margin-bottom: 20px;
	border-bottom: 1px solid #f6f6f6;
	overflow: hidden;
	list-style: none;
}

#comments .gravatar {
	float: left;
	padding: 3px 0;
}

#comments .gravatar img {
	width: 40px;
	height: 40px;
	display: block;
}

#comments .info {
	margin-left: 55px;
	overflow: hidden;
}

#comments .meta {
	overflow: hidden;
	font-size: 12px;
	line-height: 1.35em;
	color: #999;
	margin-bottom: 10px;
}

#comments .meta span {
	display: block;
	float: left;
}

#comments .meta .reply {
	float: right;
}

#comments .meta a {
	color: #006abe;
}

#comments .name {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5em;
	color: #333;
	margin-bottom: 5px;
}

#comments .name a {
	color: #333;
}

#comments .text {
	font-size: 14px;
	line-height: 2em;
	color: #666;
}

#comments .text li {
	margin-left: 0;
}

#comments li li {
	margin: 15px 0 5px 55px;
	background-color: #f9f9f9;
	padding: 15px;
	border-bottom: none;
}

#comments li li li {
	margin: 10px 10px 5px;
	background-color: #fff;
	border: 1px solid #e5e5e5;
}
.comments-area{
  margin-top: 18px;
}

/* COMMENT FORM STYLES */
.comment-login-tip{
  max-width:760px;margin:0 auto 14px;padding:12px 14px;border-radius:8px;
  background:#fff8e1;border:1px solid #ffe082;color:#8d6e63;font-size:14px;
}

.comments-area .comment-form #sptsz-captcha-img:hover {
  transform: scale(1.05);
}

/* 移动端验证码样式调整 */
@media (max-width: 768px) {
  .comments-area .comment-form .comment-form-captcha {
    grid-template-columns: 1fr;
  }
  
  .comments-area .comment-form .comment-form-captcha input#sptsz_comment_captcha {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .comments-area .comment-form #sptsz-captcha-img {
    display: block;
    margin: 0 auto;
  }
}

.comments-area .comment-form label{
  font-size: 13px;
  color: #555;
}

/* 统一按钮：强制可见、与站点主色一致（覆盖全局透明策略）*/
.comments-area .comment-form .submit{
  display: inline-block;
  min-width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  background: var(--spt-grad);
  color: #fff;
  border: none;
  box-shadow: 0 6px 14px rgb(47 134 255 / .25);
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  vertical-align: middle;
}

.comments-area .comment-form .submit:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 10px 20px rgb(47 134 255 / .35);
}

/* 评论列表卡片化，层级更清晰 */
.comments-area .comments-title{
  max-width: 760px;
  margin: 10px auto 12px;
  font-size: 18px;
  line-height: 1.6;
  list-style-type: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.comments-area .comments-title::before,
.comments-area .comments-title::after {
  content: none !important;
  display: none !important;
}

.comments-area .comment-list{
  max-width: 760px;
  margin: 0 auto 16px;
}

/* 折叠容器：默认折叠显示前几屏高度 */
.comments-collapsible.is-collapsed .comment-list{
  max-height: 520px;
  overflow: hidden;
  position: relative;
}

.comments-collapsible.is-collapsed .comment-list::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:80px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0), rgb(255 255 255 / 1));
}

.comments-toggle{
  display:block;margin:0 auto 12px !important;min-width:160px;height:38px;line-height:38px;text-align:center;
  border-radius:19px;border:1px solid rgb(0 0 0 / .12);background:#fff;cursor:pointer;
  width: fit-content;
}
.comments-toggle:hover{box-shadow:0 6px 16px rgb(0 0 0 / .08);}

.comments-area .comment-list > li{
  background: #fff;
  border: 1px solid rgb(0 0 0 / .06);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgb(0 0 0 / .04);
  font-size:14px; /* 字体减小1倍 */
}

.comments-area .comment-list li li{
  background: #f9fafc;
  border-color: rgb(0 0 0 / .06);
  border-radius: 8px;
}

/* 未登录提示：增加明显的登录按钮 */
.comment-login-tip{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

.comment-login-tip .btn-login{
  flex:none; display:inline-block; min-width:108px; height:34px; line-height:34px; text-align:center;
  border-radius:18px; background: var(--spt-grad); color:#fff; padding:0 14px;
  box-shadow: 0 6px 14px rgb(47 134 255 / .25); transition: transform .18s ease, filter .18s ease;
}
.comment-login-tip .btn-login:hover{ transform: translateY(-1px); filter: brightness(.98); }

/* 已登录提示行（资料/退出） */
.comment-logged-as{ margin-bottom:8px; font-size:13px; color:#666; }
.comment-logged-as a{ color: var(--spt-primary); }
.comment-logged-as a:hover{ color: var(--spt-primary-dark); }

/* 提交区域与按钮：右对齐、对比度更强，强制与验证码对齐 */
.comments-area .comment-form .form-submit{ 
  margin-top:0; /* 移除顶部边距，减少提交按钮上方留白 */
  text-align:right; 
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px; /* 确保容器高度与验证码区域一致 */
}

.comments-area .comment-form .submit,
.comments-area .comment-form input[type="submit"]{
  min-width:128px !important; 
  height:40px !important; 
  line-height:40px !important;
  border-radius:20px; 
  background: var(--spt-grad); 
  color:#ffffff !important; 
  border:none;
  box-shadow: 0 6px 14px rgb(47 134 255 / .28);
  font-size:16px !important; 
  margin-right:0 !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
  font-weight:bold !important;
  opacity:1 !important;
  text-shadow:0 1px 1px rgba(0,0,0,0.2) !important;
  display:inline-block !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  position:relative !important;
  z-index:1 !important;
  margin: 0 !important;
  transform: translateY(0) !important; /* 确保没有意外的位移 */
}

/* 针对submit按钮的额外样式，确保文字不会被其他样式覆盖 */
#respond input.submit,
#respond button.submit,
.comment-form .submit,
.comment-form input[type="submit"] {
  color:#ffffff !important;
  font-size:16px !important;
  font-weight:bold !important;
  text-shadow:0 1px 1px rgba(0,0,0,0.2) !important;
  line-height:40px !important;
  text-indent:0 !important;
  letter-spacing:normal !important;
  word-spacing:normal !important;
  text-transform:none !important;
  text-rendering:auto !important;
  font-family:inherit !important;
  direction:ltr !important;
  unicode-bidi:normal !important;
  height:40px !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 16px !important;
}
.comments-area .comment-form{
  max-width: 760px;
  margin: 0 auto 18px;
  padding:16px 18px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.90));
  backdrop-filter: blur(4px);
}
.comments-area .comment-form p{
  margin: 0 0 12px;
}
.comments-area .comment-form textarea,
.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form input[type="url"],
.comments-area .comment-form input#sptsz_comment_captcha{
  width: 100%;
  box-sizing: border-box;
}

.comments-area .comment-form .comment-form-captcha {  
  display: block !important;
  visibility: visible !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px 0 !important;
  min-height: 40px;
  width: 100%;
}

.comments-area .comment-form .comment-form-captcha label {
  flex-shrink: 0;
  font-size: 13px;
  color: #555;
  margin-right: 6px;
  line-height: 1;
}

.comments-area .comment-form .comment-form-captcha input#sptsz_comment_captcha {
  display: inline-block;
  width: 140px;
  min-width: 100px;
  height: 40px !important;
  padding: 8px 10px;
  box-sizing: border-box;
  vertical-align: middle !important;
}

.comments-area .comment-form .form-submit{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
}

.comments-area .comment-form .form-submit > .submit,  
.comments-area .comment-form .form-submit input[type="submit"]{
  vertical-align: middle;
}

/* 移除order属性，让HTML自然布局 */

/* 确保评论区域有足够的内边距 */
#comments {
  padding: 0 12px;
  box-sizing: border-box;
}

@media (max-width: 768px) {  
  .comments-area .comment-form{ display:block; }
  .comments-area .comment-form .form-submit{ display:block; width:100%; text-align:right; margin-top:8px; }
  .comments-area .comment-form .comment-form-captcha{ display:block; width:100%; margin-top:8px; }
  .comments-area .comment-form .comment-form-captcha input#sptsz_comment_captcha{ width:60%; }
  
  /* 评论响应式样式 */
  .comment-author .avatar{float:none;margin-right:0;margin-bottom:10px;}
  .comment-author{margin-left:0;}
  .comment-form #submit{display:block;margin:10px 0;}
}