/* ==========================================================================
   comments.css — Goods comments / reviews page
   Loaded by frontend/views/default/store/goods.comments.html
   Reuses the same design tokens as goodsinfo.css.
   All selectors use !important to override the legacy shop.css (0,3,1+).

   Structure:
     .statistics      — top summary card (rate + bars + "我要评价" CTA)
     .attr-tabs       — tab bar (全部 / 好评 / 中评 / 差评)
     .eval-list       — comment list
       .list          — single comment item
         .user_avatar — circular avatar
         .comment-detail
           dt         — user name + time
           dd         — score / content / reply
   ========================================================================== */

:root {
	/* Re-declare the same token set so this file works standalone */
	--gi-bg:            #f7f7f8;
	--gi-surface:       #ffffff;
	--gi-line:          #ececef;
	--gi-line-strong:   #d9d9de;

	--gi-text-1:        #1a1a1a;
	--gi-text-2:        #555560;
	--gi-text-3:        #8a8a93;

	--gi-accent:        #28a271;
	--gi-accent-soft:   #e1f6ed;
	--gi-accent-deep:   #28a271;

	--gi-warning:       #f0a040;
	--gi-warning-soft:  #fef5e7;
	--gi-success:       #28a271;
	--gi-success-soft:  #ecf8ed;
	--gi-danger:        #28a271;
	--gi-danger-soft:   #fdf1ee;

	--gi-fs-xs:         12px;
	--gi-fs-sm:         13px;
	--gi-fs-base:       14px;
	--gi-fs-md:         15px;
	--gi-fs-lg:         16px;
	--gi-fs-xl:         18px;
	--gi-fs-2xl:        22px;
	--gi-fs-3xl:        28px;
	--gi-fs-4xl:        36px;

	--gi-r-1:           4px;
	--gi-r-2:           8px;
	--gi-r-3:           12px;
	--gi-r-4:           16px;
	--gi-r-5:           20px;
	--gi-r-6:           24px;
	--gi-r-7:           32px;

	--gi-radius-sm:     4px;
	--gi-radius:        8px;
	--gi-radius-lg:     12px;
	--gi-radius-pill:   999px;

	--gi-ease:          cubic-bezier(0.2, 0, 0, 1);
}

/* Local reset — keep our card layout independent from page padding */
.gc-comments-page,
.gc-comments-page * { box-sizing: border-box; }

/* ==========================================================================
   1. Statistics block (top summary)
   ========================================================================== */
.statistics,
.gc-statistics {
	display: flex !important;
	align-items: stretch !important;
	gap: 0 !important;
	padding: 28px 32px !important;
	margin: 0 0 16px 0 !important;
	/* 微妙的暖色渐变背景 + 顶部主题色细条 */
	background: linear-gradient(135deg, #fffbf8 0%, #ffffff 50%, #fafcff 100%) !important;
	border: 1px solid var(--gi-line) !important;
	border-top: 3px solid var(--gi-accent) !important;
	border-radius: var(--gi-radius) !important;
	width: auto !important;
	float: none !important;
	clear: both !important;
	min-height: 120px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* --- Left: big rate percentage --- */
.statistics .rate,
.gc-statistics .gc-rate {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 32px !important;
	margin: 0 !important;
	float: none !important;
	border-right: 1px solid var(--gi-line) !important;
	min-width: 160px;
}
.statistics .rate p,
.gc-statistics .gc-rate p {
	display: flex !important;
	align-items: baseline !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}
.statistics .rate p strong,
.gc-statistics .gc-rate p strong {
	font: 700 var(--gi-fs-4xl) / 1 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
	color: var(--gi-accent) !important;
	letter-spacing: -1px;
	font-variant-numeric: tabular-nums;
	vertical-align: baseline !important;
}

/* Smarty |default:0 对空字符串无效；当 strong 为空时显示 "100%" 占位 */
.statistics .rate p strong:empty::before,
.gc-statistics .gc-rate p strong:empty::before {
	content: "100%";
	opacity: 0.3;
}
.statistics .rate p i,
.gc-statistics .gc-rate p i {
	font-style: normal !important;
	color: var(--gi-text-2) !important;
	font-size: var(--gi-fs-base) !important;
	vertical-align: baseline !important;
}
.statistics .rate em,
.gc-statistics .gc-rate em {
	display: block !important;
	margin: 8px 0 0 0 !important;
	padding: 0 !important;
	color: var(--gi-text-3) !important;
	font-style: normal !important;
	font-size: var(--gi-fs-xs) !important;
	clear: none !important;
}

/* --- Middle: 3 evaluation bars --- */
.statistics .per-evaluation,
.gc-statistics .gc-bars {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 0 32px !important;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
	flex: 1 1 auto;
	min-width: 280px;
	border-right: 1px solid var(--gi-line) !important;
}
.statistics .per-evaluation dl,
.gc-statistics .gc-bars dl {
	display: grid !important;
	grid-template-columns: 72px 1fr 56px !important;
	gap: 12px !important;
	align-items: center !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.statistics .per-evaluation dl dt,
.gc-statistics .gc-bars dl dt {
	display: flex !important;
	align-items: baseline !important;
	gap: 4px !important;
	color: var(--gi-text-2) !important;
	font-size: var(--gi-fs-sm) !important;
	width: auto !important;
	height: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	vertical-align: middle !important;
}
.statistics .per-evaluation dl dt em,
.gc-statistics .gc-bars dl dt em {
	color: var(--gi-text-3) !important;
	font-style: normal !important;
	font-size: var(--gi-fs-xs) !important;
	margin: 0 !important;
}
.statistics .per-evaluation dl dd,
.gc-statistics .gc-bars dl dd {
	background: var(--gi-bg) !important;
	height: 8px !important;
	border-radius: var(--gi-radius-pill) !important;
	overflow: hidden !important;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	vertical-align: middle !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
}
.statistics .per-evaluation dl dd b,
.gc-statistics .gc-bars dl dd b {
	display: block !important;
	height: 100% !important;
	/* 默认 0，让 HTML 内联 style="width:XX%" 生效（不能用 !important，否则会覆盖内联） */
	width: 0;
	min-width: 4px !important;          /* 即使 0% 也保留 4px 微弱指示 */
	background: var(--gi-success) !important;
	background-image: none !important;
	border-radius: var(--gi-radius-pill) !important;
	transition: width .4s var(--gi-ease) !important;
}

/* Color each bar by its position in the list */
.statistics .per-evaluation dl:nth-of-type(1) dd b,
.gc-statistics .gc-bars dl:nth-of-type(1) dd b {
	background: var(--gi-success) !important;
}
.statistics .per-evaluation dl:nth-of-type(2) dd b,
.gc-statistics .gc-bars dl:nth-of-type(2) dd b {
	background: var(--gi-warning) !important;
}
.statistics .per-evaluation dl:nth-of-type(3) dd b,
.gc-statistics .gc-bars dl:nth-of-type(3) dd b {
	background: var(--gi-danger) !important;
}

/* --- Right: "我要评价" CTA --- */
.statistics .i-want-comment,
.gc-statistics .gc-cta {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 32px !important;
	margin: 0 !important;
	float: none !important;
	height: auto !important;
	min-width: 160px;
	border-left: 0 !important;
}
.statistics .i-want-comment span,
.gc-statistics .gc-cta span {
	color: var(--gi-text-2) !important;
	font-size: var(--gi-fs-sm) !important;
	margin: 0 0 12px 0 !important;
	display: block !important;
}
.statistics .i-want-comment p,
.gc-statistics .gc-cta p {
	margin: 0 !important;
	padding: 0 !important;
}
.statistics .i-want-comment p a,
.gc-statistics .gc-cta p a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 120px !important;
	height: 40px !important;
	padding: 0 24px !important;
	background: var(--gi-accent) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--gi-radius) !important;
	color: #fff !important;
	font: 500 14px / 1 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
	text-decoration: none !important;
	text-shadow: none !important;
	text-align: center !important;
	box-shadow: 0 2px 6px rgba(255, 90, 60, 0.25) !important;
	transition: background .15s var(--gi-ease), box-shadow .15s var(--gi-ease), transform .15s var(--gi-ease) !important;
}
.statistics .i-want-comment p a:hover,
.gc-statistics .gc-cta p a:hover {
	background: var(--gi-accent-deep) !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* ==========================================================================
   2. Tab bar (.attr-tabs + .user-menu)
   ========================================================================== */
.attr-tabs,
.gc-tabs {
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
	padding: 0 !important;             /* 由 li 自身 padding 控制，避免挤压 */
	margin: 16px 0 -1px 0 !important;
	background: var(--gi-surface) !important;
	border: 1px solid var(--gi-line) !important;
	border-bottom: 0 !important;
	border-top-left-radius: var(--gi-radius) !important;
	border-top-right-radius: var(--gi-radius) !important;
	overflow: visible !important;      /* 改为 visible，让 li 自身的 border 完整显示，避免被切 */
	min-height: 48px !important;
	height: auto !important;
	width: 100% !important;            /* 拉满到父容器宽度 */
	float: none !important;
	clear: both;
}
.user-menu,
.gc-tabs ul {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;        /* Tab 装不下时换行，避免被 overflow 切掉 */
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	height: auto !important;
	width: 100% !important;             /* 拉满父容器，4 个 Tab 平分宽度 */
	float: none !important;
	background: transparent !important;
	background-image: none !important;
}
.user-menu li,
.gc-tabs li {
	flex: 1 1 0 !important;            /* 4 个 Tab 平分父容器宽度，避免某个被切 */
	min-width: 100px !important;       /* 最小宽度保证文字不换行 */
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	display: block !important;
	text-align: center !important;     /* 文字居中，适配 flex 平分 */
}
.user-menu li a,
.gc-tabs li a {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 0 var(--gi-r-5) !important;
	height: 48px !important;
	font: 500 var(--gi-fs-md) / 1 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
	color: var(--gi-text-2) !important;
	text-decoration: none !important;
	background: transparent !important;
	border: 0 !important;
	border-left: 1px solid var(--gi-line) !important;
	position: relative !important;
	transition: color .15s var(--gi-ease), background .15s var(--gi-ease) !important;
}
.user-menu li:first-child a,
.gc-tabs li:first-child a {
	border-left: 0 !important;
}
.user-menu li a:hover,
.gc-tabs li a:hover {
	color: var(--gi-accent) !important;
	background: var(--gi-accent-soft) !important;
	text-decoration: none !important;
}
.user-menu li.active,
.gc-tabs li.is-active {
	margin: 0 !important;
	padding: 0 !important;
	background: var(--gi-accent-soft) !important;
	border-top: 0 !important;
}
.user-menu li.active a,
.gc-tabs li.is-active a {
	color: var(--gi-accent) !important;
	font-weight: 500 !important;
	background: transparent !important;
	border-left: 1px solid var(--gi-line) !important;
	height: 48px !important;
	line-height: 1 !important;
}
.user-menu li.active:first-child a,
.gc-tabs li.is-active:first-child a {
	border-left: 0 !important;
}
.user-menu li.active a::after,
.gc-tabs li.is-active a::after {
	content: "" !important;
	position: absolute !important;
	left: var(--gi-r-3) !important;
	right: var(--gi-r-3) !important;
	bottom: -1px !important;
	height: 2px !important;
	background: var(--gi-accent) !important;
	border-radius: 2px 2px 0 0 !important;
}
.user-menu li a span,
.gc-tabs li a span {
	font-size: inherit !important;
	color: inherit !important;
	font-weight: inherit !important;
}

/* NOTE: 全部评价 / 好评 / 中评 / 差评 — 4 个 Tab 都需显示。
   早期版曾用 nth-child(2)/nth-child(3) 隐藏好评/中评，已删除。
   保留高优先级以防 legacy shop.css 误隐藏 */
.user-menu li,
.gc-tabs li {
	display: block !important;
}

/* ==========================================================================
   3. Comment list (.eval-list)
   ========================================================================== */
.eval-list,
.gc-comment-list {
	background: var(--gi-surface) !important;
	border: 1px solid var(--gi-line) !important;
	border-top: 0 !important;
	border-radius: 0 0 var(--gi-radius) var(--gi-radius) !important;
	padding: 8px 0 !important;
	margin: 0 0 16px 0 !important;
	float: none !important;
	clear: both !important;
	width: auto !important;
}
.eval-list .no-access,
.gc-comment-list .gc-empty {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	padding: 64px 20px !important;
	text-align: center !important;
	color: var(--gi-text-3) !important;
	font-size: var(--gi-fs-base) !important;
}
.eval-list .no-access::before,
.gc-comment-list .gc-empty::before {
	content: "" !important;
	display: block !important;
	width: 56px !important;
	height: 56px !important;
	/* 原来用 --gi-bg 在白卡上几乎不可见，提升到 --gi-text-3 */
	background-color: var(--gi-text-3) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") no-repeat center / contain !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") no-repeat center / contain !important;
	opacity: 0.35 !important;
}
.eval-list .list,
.gc-comment-list .gc-comment {
	display: grid !important;
	grid-template-columns: 56px 1fr !important;
	gap: 16px !important;
	padding: 20px 24px !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--gi-line) !important;
	position: static !important;
	z-index: auto !important;
	background: transparent !important;
	width: auto !important;
	float: none !important;
	clear: none !important;
	transition: background .15s var(--gi-ease) !important;
}
.eval-list .list:hover,
.gc-comment-list .gc-comment:hover {
	background: var(--gi-bg) !important;
}
.eval-list .list:last-child,
.gc-comment-list .gc-comment:last-child {
	border-bottom: 0 !important;
}
.eval-list .list.mt10,
.gc-comment-list .gc-comment.mt10 {
	margin-top: 0 !important;
}

/* --- Avatar (circular, 48px) --- */
.eval-list .list .user_avatar,
.gc-comment .gc-avatar {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: var(--gi-bg) !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	z-index: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border: 0 !important;
	display: block !important;
}
.eval-list .list .user_avatar a,
.gc-comment .gc-avatar a {
	display: block !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	text-align: center !important;
	vertical-align: middle !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.eval-list .list .user_avatar img,
.gc-comment .gc-avatar img {
	width: 48px !important;
	height: 48px !important;
	max-width: 48px !important;
	max-height: 48px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	border: 0 !important;
}

/* --- Comment body --- */
.comment-detail,
.gc-comment .gc-body {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
	min-width: 0;
}
.comment-detail dt,
.gc-comment .gc-body .gc-head {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
	overflow: visible !important;
}
.comment-detail dt .name,
.gc-comment .gc-body .gc-name {
	font: 600 var(--gi-fs-sm) / 1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
	color: var(--gi-text-1) !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-decoration: none !important;
}
.comment-detail dt .name:hover,
.gc-comment .gc-body .gc-name:hover {
	color: var(--gi-accent) !important;
}
.comment-detail dt i,
.gc-comment .gc-body .gc-time {
	color: var(--gi-text-3) !important;
	font-size: var(--gi-fs-xs) !important;
	font-style: normal !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.comment-detail dd,
.gc-comment .gc-body .gc-row {
	color: var(--gi-text-2) !important;
	margin: 6px 0 !important;
	padding: 0 !important;
	font-size: var(--gi-fs-sm) !important;
	line-height: 1.6 !important;
}
.comment-detail dd span,
.gc-comment .gc-body .gc-row .gc-label {
	display: inline-block !important;
	vertical-align: top !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--gi-text-3) !important;
	font-size: var(--gi-fs-xs) !important;
}
.comment-detail dd span.content,
.gc-comment .gc-body .gc-row .gc-content {
	color: var(--gi-text-1) !important;
	font-size: var(--gi-fs-base) !important;
	vertical-align: top !important;
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
}
.comment-detail dd .J_Evaluation,
.gc-comment .gc-body .gc-raty {
	display: inline-block !important;
	vertical-align: middle !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --- Reply block (highlighted) --- */
.comment-detail .reply,
.gc-comment .gc-body .gc-reply {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 10px 0 0 0 !important;
	padding: 12px 14px !important;
	background: var(--gi-accent-soft) !important;
	border-radius: var(--gi-radius-sm) !important;
	border-left: 3px solid var(--gi-accent) !important;
	color: var(--gi-text-2) !important;
	font-size: var(--gi-fs-sm) !important;
	width: auto !important;
	float: none !important;
	clear: none !important;
}
.comment-detail .reply span:first-child,
.gc-comment .gc-body .gc-reply .gc-label {
	color: var(--gi-accent) !important;
	font-weight: 600 !important;
}
.comment-detail .reply .content,
.gc-comment .gc-body .gc-reply .gc-content {
	color: var(--gi-text-1) !important;
	flex: 1 1 100% !important;
	display: block !important;
	margin-top: 4px !important;
}

/* ==========================================================================
   4. Pagination wrapper (uses page.bottom.html)
   ========================================================================== */
.clearfix.mt10:has(.pages),
.gc-pagination-wrap {
	padding: 16px 24px !important;
	margin: 0 !important;
	background: var(--gi-surface) !important;
	border: 1px solid var(--gi-line) !important;
	border-radius: var(--gi-radius) !important;
	display: flex !important;
	justify-content: center !important;
}

/* ==========================================================================
   5. Mobile responsive
   ========================================================================== */
@media (max-width: 768px) {
	.statistics,
	.gc-statistics {
		flex-direction: column !important;
		padding: 16px !important;
		gap: 16px !important;
	}
	.statistics .rate,
	.statistics .per-evaluation,
	.gc-statistics .gc-rate,
	.gc-statistics .gc-bars,
	.gc-statistics .gc-cta {
		padding: 0 !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--gi-line) !important;
		min-width: 0 !important;
		width: 100% !important;
	}
	.statistics .per-evaluation,
	.gc-statistics .gc-bars {
		padding-bottom: 16px !important;
	}
	.statistics .i-want-comment,
	.gc-statistics .gc-cta {
		padding-top: 16px !important;
	}
	.user-menu li a,
	.gc-tabs li a {
		padding: 0 12px !important;
		font-size: var(--gi-fs-sm) !important;
	}
	.eval-list .list,
	.gc-comment-list .gc-comment {
		grid-template-columns: 40px 1fr !important;
		gap: 12px !important;
		padding: 16px !important;
	}
	.eval-list .list .user_avatar,
	.eval-list .list .user_avatar a,
	.eval-list .list .user_avatar img,
	.gc-comment .gc-avatar,
	.gc-comment .gc-avatar a,
	.gc-comment .gc-avatar img {
		width: 40px !important;
		height: 40px !important;
		max-width: 40px !important;
		max-height: 40px !important;
	}
}

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.statistics .per-evaluation dl dd b,
	.gc-statistics .gc-bars dl dd b,
	.user-menu li a,
	.gc-tabs li a,
	.statistics .i-want-comment p a,
	.gc-statistics .gc-cta p a {
		transition: none !important;
	}
}