/* ==========================================================================
   Bricks Comparison Table - 基础样式
   所有具体数值通过 CSS 变量 (--ct-*) 由元素 render() 动态写入,
   本文件本身不需要修改即可适配任意配色/字体/间距设置。
   ========================================================================== */

/* ---------- 最外层 wrapper(根元素,不裁剪溢出,否则 box-shadow 会被截掉) ---------- */
.comparison-table-wrapper {
	width: 100%;
}

/* ---------- frame:承载外边框 / 圆角 / 阴影 ----------
   把边框 + 圆角 + box-shadow 全部放在这一层,
   再用 overflow:hidden 把内部表格切成圆角矩形。
   box-shadow 绘制在该 box 外侧,不受自身 overflow:hidden 影响。 */
.comparison-table-wrapper .ct-table-frame {
	border: var( --ct-outer-border-w, 1px ) solid var( --ct-outer-border-c, #ddd );
	border-radius: var( --ct-radius, 8px );
	overflow: hidden;
	box-shadow: var( --ct-shadow, none );
}

/* ---------- scroll 层:负责横向滚动,不影响 frame 的阴影 ---------- */
.comparison-table-wrapper .ct-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- 表格本身:边框 / 圆角已交给 frame,table 自己不再画 ---------- */
.comparison-table-wrapper .ct-table {
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
	table-layout: fixed;
}

/* ==========================================================================
   单元格基础(其余行 / Body)样式
   ========================================================================== */
.comparison-table-wrapper .ct-cell {
	box-sizing: border-box;
	position: relative;             /* 让伪元素绝对定位以本格为参考 */
	border: 0;                      /* 边框 / 分割线全部交给伪元素 */
	padding:
		var( --ct-pad-body-top, 10px )
		var( --ct-pad-body-right, 15px )
		var( --ct-pad-body-bottom, 10px )
		var( --ct-pad-body-left, 15px );
	background: var( --ct-body-bg, #ffffff );

	font-family: var( --ct-font-body, inherit );
	font-size: var( --ct-font-size-body, 14px );
	font-weight: var( --ct-font-weight-body, 400 );
	color: var( --ct-color-body, #333333 );
	text-align: var( --ct-align-body, center );
	text-transform: var( --ct-transform-body, none );
	line-height: var( --ct-line-height-body, 1.5 );
	letter-spacing: var( --ct-letter-spacing-body, normal );
	vertical-align: var( --ct-vertical-align-body, middle );

	transition: background-color 0.15s ease;
}

/* ---------- 表头行:独立的 padding + 文字样式 ---------- */
.comparison-table-wrapper .ct-header-row .ct-cell {
	padding:
		var( --ct-pad-header-top, 12px )
		var( --ct-pad-header-right, 16px )
		var( --ct-pad-header-bottom, 12px )
		var( --ct-pad-header-left, 16px );
	background: var( --ct-header-bg, #f5f5f5 );

	font-family: var( --ct-font-header, inherit );
	font-size: var( --ct-font-size-header, 14px );
	font-weight: var( --ct-font-weight-header, 600 );
	color: var( --ct-color-header, #1a1a1a );
	text-align: var( --ct-align-header, center );
	text-transform: var( --ct-transform-header, none );
	line-height: var( --ct-line-height-header, 1.5 );
	letter-spacing: var( --ct-letter-spacing-header, normal );
	vertical-align: var( --ct-vertical-align-header, middle );
}

/* ---------- 首列样式(表头行除外) ---------- */
.comparison-table-wrapper .ct-first-col {
	background: var( --ct-first-col-bg, #fafafa );

	font-family: var( --ct-font-first-col, inherit );
	font-size: var( --ct-font-size-first-col, 14px );
	font-weight: var( --ct-font-weight-first-col, 600 );
	color: var( --ct-color-first-col, #1a1a1a );
	text-align: var( --ct-align-first-col, center );
	text-transform: var( --ct-transform-first-col, none );
	line-height: var( --ct-line-height-first-col, 1.5 );
	letter-spacing: var( --ct-letter-spacing-first-col, normal );
	vertical-align: var( --ct-vertical-align-first-col, middle );
}

/* ==========================================================================
   内部分割线(水平 + 垂直)
   - 用单元格的 ::after 画水平线(行间)
   - 用单元格的 ::before 画垂直线(列间)
   - 通过 left/right(水平线两端)、top/bottom(垂直线两端)
     的 inset 让分割线四周相对外边框统一内缩。
   ========================================================================== */

/* 水平分割线:行底部一条线,除最后一行外都有 */
.comparison-table-wrapper .ct-table tbody tr:not(:last-child) .ct-cell::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var( --ct-divider-w, 1px );
	background: var( --ct-divider-c, #e5e5e5 );
	pointer-events: none;
}
/* 行内第一格:水平线左端从 inset 处开始 */
.comparison-table-wrapper .ct-table tbody tr:not(:last-child) .ct-cell:first-child::after {
	left: var( --ct-divider-inset, 0px );
}
/* 行内最后一格:水平线右端在 inset 处结束 */
.comparison-table-wrapper .ct-table tbody tr:not(:last-child) .ct-cell:last-child::after {
	right: var( --ct-divider-inset, 0px );
}

/* 垂直分割线:格子右侧一条线,除每行最后一格外都有 */
.comparison-table-wrapper .ct-table .ct-cell:not(:last-child)::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: var( --ct-divider-w, 1px );
	background: var( --ct-divider-c, #e5e5e5 );
	pointer-events: none;
}
/* 首行格子:垂直线顶部从 inset 处开始 */
.comparison-table-wrapper .ct-table tbody tr:first-child .ct-cell:not(:last-child)::before {
	top: var( --ct-divider-inset, 0px );
}
/* 末行格子:垂直线底部在 inset 处结束 */
.comparison-table-wrapper .ct-table tbody tr:last-child .ct-cell:not(:last-child)::before {
	bottom: var( --ct-divider-inset, 0px );
}

/* ==========================================================================
   首列单元格(表头行除外)左 padding 与分割线对齐
   - PHP 端会根据首列文字的 text-align 计算出 --ct-first-col-pad-left
   - 当首列设为左对齐时,该变量 = max(body 左 padding, divider inset)
     使文字起始位置与水平分割线起始位置在同一垂直线上,消除视觉错位
   - 非左对齐时,该变量 = body 左 padding,即维持原有行为
   ========================================================================== */
.comparison-table-wrapper .ct-table tbody tr:not(.ct-header-row) .ct-cell:first-child {
	padding-left: var( --ct-first-col-pad-left, var( --ct-pad-body-left, 15px ) );
}

/* ---------- 行悬停高亮(表头行不参与) ---------- */
.comparison-table-wrapper .ct-table tbody tr:not(.ct-header-row):hover .ct-cell,
.comparison-table-wrapper .ct-table tbody tr:not(.ct-header-row):hover .ct-first-col {
	background: var( --ct-hover-bg, #f0f4ff );
}

/* ---------- 表头图片 ---------- */
.comparison-table-wrapper .ct-cell-image {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border-radius: var( --ct-img-radius, 0px );
	overflow: hidden;
}
.comparison-table-wrapper .ct-cell-image.ct-img-top {
	margin-bottom: 8px;
}
.comparison-table-wrapper .ct-cell-image.ct-img-bottom {
	margin-top: 8px;
}

.comparison-table-wrapper .ct-cell-content {
	width: 100%;
	white-space: normal;
	word-break: break-word;
}

/* 内容为空的 div 不占用多余高度 */
.comparison-table-wrapper .ct-cell-content:empty {
	display: none;
}