/* 电车头条 - 共用样式 */

/* 广告占位 */
.ad-slot {
  background: #f5f5f5;
  border: 1px dashed #d0d0d0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
  margin: 16px auto;
  overflow: hidden;
}
.ad-banner { width: 100%; max-width: 728px; height: 90px; }
.ad-infeed { width: 100%; height: 200px; }
.ad-bottom { width: 100%; max-width: 728px; height: 90px; }

/* 排名数字 */
.rank-num {
  font-size: 28px;
  font-weight: 800;
  min-width: 44px;
  text-align: center;
  line-height: 1.3;
}
.rank-1 { color: #e60012; }
.rank-2 { color: #ff6600; }
.rank-3 { color: #f4a900; }

/* 核心数据卡片 */
.stat-card {
  background: #f8fafb;
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
}
.stat-value { font-size: 20px; font-weight: 700; color: #1a6fc4; }
.stat-label { font-size: 12px; color: #888; margin-top: 2px; }

/* 对比表胜出标记 */
.win-tag {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

/* FAQ */
.faq-q { color: #1a6fc4; font-weight: 600; }
.faq-a { color: #444; line-height: 1.8; }

/* 落地价总计 */
.price-total { font-size: 28px; font-weight: 800; color: #e60012; }
.price-box { background: #fef9e7; border: 1px solid #f0d060; border-radius: 8px; }

/* 面包屑 */
.breadcrumb { font-size: 14px; color: #888; }
.breadcrumb a { color: #666; }
.breadcrumb span { color: #999; margin: 0 4px; }

/* 品牌标签 */
.brand-tag {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
}
.brand-tag:hover, .brand-tag.active { border-color: #1a6fc4; background: #eef5ff; color: #1a6fc4; }

/* 图片占位 */
.img-placeholder {
  background: linear-gradient(135deg, #e0e7ff 0%, #dbeafe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93a3c0;
  font-size: 14px;
  border-radius: 6px;
}

/* 筛选下拉 */
.filter-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  min-width: 120px;
}

/* Tabs */
.tab-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  background: #f0f0f0;
  color: #555;
}
.tab-btn.active { background: #1a6fc4; color: #fff; }

/* 响应式表格滚动 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ========================================
   对比悬浮框
   ======================================== */
.compare-panel {
  position: fixed;
  right: 16px;
  bottom: 80px;
  width: 240px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  z-index: 999;
  overflow: hidden;
  display: none;
}
.compare-panel.show { display: block; }
.compare-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #1a6fc4;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.compare-panel-close {
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,.7);
  background: none;
  border: none;
  padding: 0 4px;
}
.compare-panel-close:hover { color: #fff; }
.compare-panel-body { padding: 10px 14px; }
.compare-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
  font-size: 13px;
}
.compare-slot:last-child { border-bottom: none; }
.compare-slot-img {
  width: 48px;
  height: 32px;
  background: #f0f4ff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #93a3c0;
  flex-shrink: 0;
}
.compare-slot-name { flex: 1; color: #333; font-size: 12px; }
.compare-slot-remove {
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  background: none;
  border: none;
  transition: color 0.15s;
}
.compare-slot-empty {
  color: #bbb;
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
}
.compare-panel-footer { padding: 0 14px 12px; }
.compare-btn {
  display: block;
  width: 100%;
  padding: 8px 0;
  background: #1a6fc4;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.compare-btn:hover { background: #155a9e; }
.compare-btn.disabled { background: #ccc; cursor: not-allowed; pointer-events: none; }
.compare-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #e60012;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 对比面板显示/隐藏 */
.compare-slot-img img { width: 100%; height: 100%; object-fit: cover; }
.compare-slot-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 修复删除按钮样式 */

/* 面板初始隐藏 */
.compare-slot-remove:hover { color: #e60012; }

/* ======== 加入对比按钮 ======== */
.btn-compare {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 18px;
  border: 1.5px solid #d0d5dd;
  color: #475467;
  background: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s ease;
  user-select: none;
}
.btn-compare::before {
  content: '+';
  font-size: 15px;
  font-weight: 300;
  transition: transform .2s;
}
.btn-compare:hover {
  border-color: #1a6fc4;
  color: #1a6fc4;
  box-shadow: 0 1px 4px rgba(26,111,196,.12);
}
.btn-compare.added {
  background: #1a6fc4;
  border-color: #1a6fc4;
  color: #fff;
}
.btn-compare.added::before {
  content: '\2713';
  font-size: 13px;
  font-weight: 700;
}
.btn-compare.added:hover {
  background: #155a9e;
  border-color: #155a9e;
  color: #fff;
}
/* 卡片内的小尺寸按钮 */
.btn-compare-sm {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 6px;
  gap: 3px;
}
.btn-compare-sm::before {
  font-size: 12px;
}

/* ========================================
   分页
   ======================================== */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination li { display: inline-block; }
.pagination li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #475467;
  font-size: 14px;
  text-decoration: none;
  transition: all .15s;
  background: #fff;
}
.pagination li a:hover {
  border-color: #1a6fc4;
  color: #1a6fc4;
  background: #eef5ff;
}
.pagination li.active a {
  background: #1a6fc4;
  border-color: #1a6fc4;
  color: #fff;
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}