/* CityTariff 前台样式（2026-08 重构：接入站点设计令牌）
   默认主题直接消费 skin/css/variables.css 的设计令牌（城市模板中 variables.css 先于本文件加载），
   与全站按钮/卡片/表单同一套品牌色（主蓝 #0066b3）、字体与间距比例；var() 均带回退值，令牌缺失时也能正常显示。
   主题变量 --ct-*：三张表（ct-table-type2/3）与 6 套千人千面皮肤（ct-skin-1~6）只覆盖变量，
   组件规则不再写死色值；皮肤是防同质化的刻意差异化，仅作变量覆盖、视觉与旧版一致。
   对比度约定：浅色表头一律配深色文字，白字只用于足够深的底色（激活标签/深色表头），保证可读性。 */
.city-tariff{
  max-width:100%;margin:var(--space-6,20px) 0;
  /* 默认主题（品牌蓝，对齐站点令牌）： */
  --ct-accent:var(--color-primary,#0066b3);            /* 激活标签底/链接色 */
  --ct-soft:var(--color-primary-light,#e8f1f8);        /* 表头底/标签 hover 底 */
  --ct-soft-text:var(--color-primary,#0066b3);         /* 表头文字/标签 hover 文字 */
  --ct-soft-line:#c9dceb;                              /* 表头边框（浅底同色系加深） */
  --ct-line:var(--color-border,#e5e5e5);               /* 容器/标签栏边框 */
  --ct-cell-line:var(--ct-line);                       /* 单元格边框 */
  --ct-zebra:#fafcfd;                                  /* 偶数行底 */
  --ct-row-hover:#f2f8fc;                              /* 行 hover 底 */
  --ct-tab-hover-bg:var(--ct-soft);
  --ct-tab-hover-text:var(--ct-accent);
}
/* 标签用 div.ct-tabs + span.ct-tab（非 ul/li），规避站点模板全局 ul li 选择器（样式与点击切换脚本）的误伤 */
.city-tariff .ct-tabs{display:flex;flex-wrap:wrap;justify-content:center;border-bottom:2px solid var(--ct-line);margin-bottom:0;padding:0;}
.city-tariff .ct-tab{display:inline-block;padding:var(--space-3,10px) var(--space-6,20px);cursor:pointer;font-size:var(--font-sm,14px);line-height:1.5;color:var(--color-text,#333);border:1px solid transparent;border-bottom:none;margin:0 var(--space-1,4px) 0 0;border-radius:var(--radius,4px) var(--radius,4px) 0 0;background:var(--color-bg,#f5f5f5);transition:var(--transition,all .3s ease);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;float:none;height:auto;width:auto;text-align:center;box-sizing:border-box;}
.city-tariff .ct-tab:focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px;}
.city-tariff .ct-tab:hover{background:var(--ct-tab-hover-bg);color:var(--ct-tab-hover-text);}
.city-tariff .ct-tab.active{background:var(--ct-accent);color:var(--color-white,#fff);font-weight:600;}
.city-tariff .ct-pane{display:none;padding:0;margin-top:var(--space-5,16px);}
.city-tariff .ct-pane.active{display:block;}
.city-tariff .ct-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ct-line);border-radius:var(--radius,4px);}
/* 边框模型用 separate：collapse 下 sticky 首列的边框不随列固定，会滚走露馅 */
.city-tariff .ct-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;background:var(--color-white,#fff);}
/* 表格标题（h3，移出表格容器外）：左侧色条 + 文字，对齐站点小标题气质；色条用 --ct-accent 随皮肤换色。
   不能再放回 table 内当 caption——caption 宽度不受 table-wrap 滚动约束，会撑破父容器 */
.city-tariff .ct-title{position:relative;margin:0 0 var(--space-4,12px);padding-left:var(--space-4,12px);font-size:var(--font-xl,20px);font-weight:600;line-height:1.4;color:var(--color-text,#333);}
.city-tariff .ct-title::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:2px;background:var(--ct-accent);}
/* 单元格只画右/下边框（separate 模型避免双边框），外框由 .ct-table-wrap 的 border 承担 */
.city-tariff .ct-table th,.city-tariff .ct-table td{border-right:1px solid var(--ct-cell-line);border-bottom:1px solid var(--ct-cell-line);padding:var(--space-3,10px) var(--space-4,12px);text-align:center;font-size:var(--font-sm,14px);line-height:var(--leading-normal,1.6);white-space:nowrap;}
.city-tariff .ct-table th{background:var(--ct-soft);color:var(--ct-soft-text);border-right-color:var(--ct-soft-line);border-bottom-color:var(--ct-soft-line);font-weight:600;}
.city-tariff .ct-table tr:nth-child(even) td{background:var(--ct-zebra);}
.city-tariff .ct-table tr:hover td{background:var(--ct-row-hover);}
/* 首列固定：横向滚动时冻结第一列；斑马纹/行 hover 选择器优先级更高，会自动覆盖此处的白底 */
.city-tariff .ct-table th:first-child,.city-tariff .ct-table td:first-child{position:sticky;left:0;z-index:2;}
.city-tariff .ct-table td:first-child{background:var(--color-white,#fff);}
.city-tariff .ct-table thead th:first-child{z-index:3;}
/* 三张表差异色：type1=默认品牌蓝（无需覆盖）；type2=品牌橙系（--color-accent 加深保证对比度）；
   type3=品牌红系（--color-danger 加深保证对比度）。仅无皮肤时生效，皮肤城市（ct-skin-N）整体覆盖 */
.city-tariff:not([class*="ct-skin-"]) .ct-table-type2{--ct-soft:#fdf2e5;--ct-soft-text:#b25b0a;--ct-soft-line:#f6e2c6;--ct-row-hover:#fdf8f0;}
.city-tariff:not([class*="ct-skin-"]) .ct-table-type3{--ct-soft:#fbe7e7;--ct-soft-text:#8c2323;--ct-soft-line:#f0cccc;--ct-row-hover:#f9ecec;}
/* 立即申请按钮：A 标签 + tel 链接，移动端一键拨号；底色用主题变量 --ct-accent，6 套皮肤自动跟随 */
.city-tariff .ct-contact{margin:var(--space-6,20px) 0 0;text-align:center;}
.city-tariff .ct-apply-btn{display:inline-block;padding:var(--space-3,10px) var(--space-9,40px);background:var(--ct-accent);color:var(--color-white,#fff);font-size:var(--font-base,16px);font-weight:600;line-height:1.5;border-radius:var(--radius-full,999px);text-decoration:none;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08));transition:var(--transition,all .3s ease);-webkit-tap-highlight-color:transparent;}
.city-tariff .ct-apply-btn:hover{color:var(--color-white,#fff);text-decoration:none;filter:brightness(.94);box-shadow:var(--shadow-md,0 2px 8px rgba(0,0,0,.10));}
.city-tariff .ct-apply-btn:focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px;}
/* 空态（show() 无数据时输出，独立容器不在 .city-tariff 内，直接用站点令牌） */
.city-tariff .ct-empty,.city-tariff-empty{min-height:80px;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted,#999);font-size:var(--font-sm,14px);border:1px dashed var(--color-border-dark,#ddd);border-radius:var(--radius,4px);margin-top:var(--space-5,16px);}
/* 千人千面皮肤1 深蓝：浅蓝表头(#e3f0fa)配深藏青文字(#0d4d73)，激活标签深蓝底白字 */
.city-tariff.ct-skin-1{--ct-accent:#0d5c8c;--ct-soft:#e3f0fa;--ct-soft-text:#0d4d73;--ct-soft-line:#c5ddef;--ct-cell-line:#dcebf5;--ct-zebra:#f7fbfe;--ct-row-hover:#eef6fc;}
/* 千人千面皮肤2 墨绿：浅绿表头(#e4f4ec)配深绿文字(#0b5c43)，激活标签墨绿底白字 */
.city-tariff.ct-skin-2{--ct-accent:#0e7a58;--ct-soft:#e4f4ec;--ct-soft-text:#0b5c43;--ct-soft-line:#c8e6d9;--ct-cell-line:#dcede4;--ct-zebra:#f7fcf9;--ct-row-hover:#eef8f2;}
/* 千人千面皮肤3 棕橙：浅橙表头(#fdefdd)配深棕文字(#7a4a06)，激活标签棕橙底白字 */
.city-tariff.ct-skin-3{--ct-accent:#a3610a;--ct-soft:#fdefdd;--ct-soft-text:#7a4a06;--ct-soft-line:#f0dbb8;--ct-cell-line:#f3e4c9;--ct-zebra:#fdf9f2;--ct-row-hover:#fbf2e3;}
/* 千人千面皮肤4 深紫：浅紫表头(#ece5f6)配深紫文字(#4b2a80)，激活标签深紫底白字 */
.city-tariff.ct-skin-4{--ct-accent:#5b3794;--ct-soft:#ece5f6;--ct-soft-text:#4b2a80;--ct-soft-line:#d9ccec;--ct-cell-line:#e4dcf0;--ct-zebra:#faf8fd;--ct-row-hover:#f3eef9;}
/* 千人千面皮肤5 暗红：浅红表头(#fbe7e7)配暗红文字(#8c2323)，激活标签暗红底白字 */
.city-tariff.ct-skin-5{--ct-accent:#a82e2e;--ct-soft:#fbe7e7;--ct-soft-text:#8c2323;--ct-soft-line:#f0cccc;--ct-cell-line:#f3dada;--ct-zebra:#fdf6f6;--ct-row-hover:#f9ecec;}
/* 千人千面皮肤6 深灰蓝：深色表头(#2f3b4c)配纯白文字(#fff)，激活标签同色深底白字，表格主体白底深灰字 */
.city-tariff.ct-skin-6{--ct-accent:#2f3b4c;--ct-soft:#2f3b4c;--ct-soft-text:#fff;--ct-soft-line:#46566b;--ct-cell-line:#d8dfe6;--ct-zebra:#f5f7fa;--ct-row-hover:#edf1f5;--ct-tab-hover-bg:#e8ecf1;--ct-tab-hover-text:#2f3b4c;}
/* PC 端（≥768px，对齐站点断点配对约定）：隐藏标签栏、全部表格平铺直出，
   免切换一屏尽览方便对比；每张表的 h3 标题充当小标题。移动端保留 tab 切换 */
@media screen and (min-width:768px){
.city-tariff .ct-tabs{display:none;}
.city-tariff .ct-pane{display:block;}
.city-tariff .ct-pane+.ct-pane{margin-top:var(--space-8,30px);}
}
/* 移动端断点对齐站点标准 767px；字号保留 13px（离群值，可读性优先） */
@media screen and (max-width:767px){
.city-tariff .ct-tab{flex:1;min-width:80px;padding:var(--space-2,8px) var(--space-3,10px);font-size:13px;text-align:center;}
.city-tariff .ct-table th,.city-tariff .ct-table td{padding:var(--space-2,8px) var(--space-3,10px);font-size:13px;}
/* 移动端隐藏 h3 标题：标签页已标明内容，避免重复占位（DOM 中保留，不影响收录） */
.city-tariff .ct-title{display:none;}
/* 按钮加大点击区域，移动端更好点 */
.city-tariff .ct-apply-btn{display:block;max-width:320px;margin:0 auto;}
}