/* ============================================================
   购买配置页 UI 优化（ACDS 规范）
   修复：底部购买栏遮挡、字号过小、卡片过窄、选中态不统一
   ============================================================ */

/* ---------- 1. 修复底栏遮挡：给主内容留出等高空间 ---------- */
body .template,
body .goods,
body .el-container {
  padding-bottom: 0 !important;
}
/* 主卡片底部留白，避免被固定栏压住 */
body .main-card.mf-cloud {
  padding-bottom: 150px !important;
  margin-bottom: 0 !important;
}
/* 底栏本身：白底 + 上边框，不透明 */
body .f-order {
  height: 84px !important;
  background: #fff !important;
  border-top: 1px solid #E5E6EB !important;
  box-shadow: 0 -2px 12px rgba(11, 18, 32, 0.06) !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
}
body .f-order .el-main {
  background: #fff !important;
  box-shadow: none !important;
  padding: 0 32px !important;
  height: 84px !important;
  display: flex !important;
  align-items: center !important;
}
body .f-order .main-card {
  width: 100% !important;
  max-width: 1288px !important;
  margin: 0 auto !important;
  height: 84px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

/* ---------- 2. 全局字号提升 ---------- */
body .main-card.mf-cloud {
  font-size: 14px !important;
  color: #1A1A1A !important;
  line-height: 1.5715 !important;
}
body .main-card.mf-cloud * {
  line-height: 1.5715;
}
/* 区块标题 */
body .main-card.mf-cloud .config-title,
body .main-card.mf-cloud .section-title,
body .main-card.mf-cloud h3,
body .main-card.mf-cloud h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  line-height: 24px !important;
}
/* 辅助说明 */
body .main-card.mf-cloud .tip,
body .main-card.mf-cloud .desc,
body .main-card.mf-cloud .el-form-item__label {
  font-size: 13px !important;
  color: #4E5969 !important;
}

/* ---------- 3. 套餐卡片：加宽 + 字号提升 ---------- */
body .cloud-box {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}
body .cloud-item {
  min-width: 220px !important;
  padding: 18px 20px !important;
  border: 1px solid #E5E6EB !important;
  border-radius: 4px !important;
  background: #fff !important;
  transition: all .15s !important;
  cursor: pointer !important;
  position: relative !important;
}
body .cloud-item:hover {
  border-color: #007BFF !important;
  background: #FAFCFF !important;
}
/* 选中态：统一「蓝边 + 浅蓝底 + 勾选」 */
body .cloud-item.active {
  border-color: #007BFF !important;
  background: #F0F7FF !important;
  box-shadow: 0 0 0 1px #007BFF inset !important;
}
body .cloud-item.active::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #007BFF;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
/* 套餐内文字 */
body .cloud-item .cloud-item-title,
body .cloud-item h4,
body .cloud-item .name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  margin-bottom: 10px !important;
}
body .cloud-item .cloud-item-desc,
body .cloud-item p,
body .cloud-item .spec-item {
  font-size: 13px !important;
  color: #4E5969 !important;
  line-height: 1.7 !important;
}
body .cloud-item .price,
body .cloud-item .cloud-item-price {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  margin-top: 10px !important;
}

/* ---------- 4. 区域/镜像卡片：统一选中态 ---------- */
body .area-item,
body .image-item,
body .line-item {
  border: 1px solid #E5E6EB !important;
  border-radius: 4px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  color: #1A1A1A !important;
  background: #fff !important;
  transition: all .15s !important;
  cursor: pointer !important;
}
body .area-item:hover,
body .image-item:hover,
body .line-item:hover {
  border-color: #007BFF !important;
}
body .area-item.active,
body .image-item.active,
body .line-item.active {
  border-color: #007BFF !important;
  background: #F0F7FF !important;
  color: #007BFF !important;
  font-weight: 500 !important;
  box-shadow: 0 0 0 1px #007BFF inset !important;
}

/* ---------- 5. 表单控件尺寸 ---------- */
body .main-card.mf-cloud .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  border-color: #E5E6EB !important;
}
body .main-card.mf-cloud .el-input__inner:focus {
  border-color: #007BFF !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.08) !important;
}
body .main-card.mf-cloud .el-radio__label,
body .main-card.mf-cloud .el-checkbox__label {
  font-size: 14px !important;
  color: #1A1A1A !important;
}

/* ---------- 6. 主按钮 ---------- */
body .f-order .el-button--primary,
body .main-card.mf-cloud .el-button--primary {
  height: 40px !important;
  padding: 0 32px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  background: #007BFF !important;
  border-color: #007BFF !important;
}
body .f-order .el-button--primary:hover,
body .main-card.mf-cloud .el-button--primary:hover {
  background: #0062CC !important;
  border-color: #0062CC !important;
}

/* ---------- 7. 价格强调 ---------- */
body .f-order .total-price,
body .f-order .el-main .price,
body .f-order .price-text {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #DC3545 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ---------- 8. 隐藏空白镜像卡 ---------- */
body .image-item:empty,
body .image-box .image-item:not(:has(img)):not(:has(span)) {
  display: none !important;
}

/* ---------- 9. 内容区最大宽度，避免右侧大片空白 ---------- */
body .main-card.mf-cloud {
  max-width: 1288px !important;
  margin: 0 auto !important;
  padding: 24px 32px 150px 32px !important;
}

/* ---------- 10. 移动端适配 ---------- */
@media (max-width: 768px) {
  body .main-card.mf-cloud { padding: 16px 16px 140px 16px !important; }
  body .cloud-box { grid-template-columns: 1fr !important; }
  body .f-order { height: 72px !important; }
  body .f-order .el-main { height: 72px !important; padding: 0 16px !important; }
  body .f-order .main-card { height: 72px !important; gap: 12px !important; }
  body .f-order .el-button--primary { padding: 0 20px !important; font-size: 14px !important; }
}

/* ===== 底栏遮挡最终修复：给 body 撑出等高空间 ===== */
body:has(.f-order) {
  padding-bottom: 110px !important;
}
/* 兜底：主容器也留白 */
body .template {
  padding-bottom: 110px !important;
}
body .main-card.mf-cloud {
  padding-bottom: 24px !important;
}
/* 底栏确保在最上层且不透明 */
body .f-order {
  background: #fff !important;
  border-top: 1px solid #E5E6EB !important;
}

/* ===== 购买页最终收尾 ===== */
/* 1. 底部留白加大，彻底解决遮挡 */
body:has(.f-order) { padding-bottom: 140px !important; }
body .template { padding-bottom: 140px !important; }
/* 2. 套餐卡强制等宽 */
body .cloud-box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
body .cloud-item {
  flex: 1 1 220px !important;
  min-width: 220px !important;
  max-width: none !important;
  width: auto !important;
}
/* 3. 辅助说明文字加深 */
body .main-card.mf-cloud .tip,
body .main-card.mf-cloud .el-form-item__label,
body .main-card.mf-cloud .area-tip,
body .main-card.mf-cloud [class*="desc"] {
  color: #5A6980 !important;
  font-size: 13px !important;
}