/* ==========================================================================
   v10-lingsu.css —— 把 V10 上游的下单页统一成「凌速云」主题的视觉
   用在：themes/cart/lingsu/configureproduct-v10-common.tpl
         themes/cart/lingsu/configureproduct-v10-cloud.tpl
   设计令牌取自站点自有主题：紫 #9d5fc0、描边 #f0eaf7、圆角 16px、柔和阴影
   ========================================================================== */

:root {
  --yy-p: #9d5fc0;
  --yy-p-soft: #faf6ff;
  --yy-b: #f0eaf7;
  --yy-b2: #ece4f5;
  --yy-t: #2b2340;
  --yy-m: #8a8a99;
  --yy-r: 16px;
  --yy-sh: 0 10px 34px rgba(96, 58, 130, .10);
  --yy-sh2: 0 8px 24px rgba(96, 58, 130, .07);
}

/* ---------- 通用：配置项卡片 ---------- */
/* 上游是 margin-top:60px（靠大留白分隔），和本站风格不符，
   这里改成 12px 的均匀间距 */
.common-config .config-item,
.main-card .el-form-item {
  background: #fff;
  border: 1px solid var(--yy-b);
  border-radius: var(--yy-r);
  box-shadow: var(--yy-sh2);
  padding: 10px 14px;
  margin: 0 0 8px !important;
}

/* ---------- 通用：小节标题（紫色竖条 + 深色文字） ---------- */
/* 上游 .config-tit::before 是 Element 主色 #0058ff 的蓝条，
   不干掉就会和下面紫色 border-left 叠在一起显示成蓝色 */
.common-config .config-tit::before,
.main-card .com-tit::before,
.main-card .tit::before {
  display: none !important;
  content: none !important;
}

.common-config .config-tit,
.main-card .com-tit,
.main-card .tit {
  display: flex;
  align-items: center;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--yy-t) !important;
  letter-spacing: .2px;
  margin: 0 0 8px !important;
  padding-left: 10px !important;
  border-left: 3px solid var(--yy-p) !important;
  line-height: 1.2;
}

/* ---------- 通用：次级标题（区域/城市） ---------- */
.common-config .area-box .tit {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--yy-m) !important;
  margin: 6px 0 6px !important;
  padding-left: 0;
  border-left: 0;
}

/* ---------- 通用：选项卡片 ---------- */
.common-config .click-select .item,
.common-config .cycle .item,
.main-card .store-item,
.main-card .image-item {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--yy-b2) !important;
  border-radius: 10px !important;
  color: #4b4b57 !important;
  padding: 8px 14px !important;
  margin: 0 8px 8px 0 !important;
  cursor: pointer;
  transition: all .16s ease;
  box-shadow: none !important;
}

.common-config .click-select .item:hover,
.main-card .store-item:hover {
  border-color: #c9a8e0 !important;
  color: var(--yy-p) !important;
}

.common-config .item.com-active,
.main-card .item.com-active {
  border-color: var(--yy-p) !important;
  background: var(--yy-p-soft) !important;
  color: #8a4fb0 !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(157, 95, 192, .12) !important;
}

.common-config .item.com-active i.el-icon-check,
.main-card .item.com-active i.el-icon-check {
  color: var(--yy-p) !important;
}

/* ---------- 通用：输入控件 ---------- */
.common-config .el-input__inner,
.common-config .el-textarea__inner,
.main-card .el-input__inner,
.main-card .el-textarea__inner {
  border-radius: 10px !important;
  border-color: var(--yy-b2) !important;
  color: var(--yy-t);
}

.common-config .el-input__inner:focus,
.common-config .el-select .el-input.is-focus .el-input__inner,
.main-card .el-input__inner:focus,
.main-card .el-select .el-input.is-focus .el-input__inner {
  border-color: var(--yy-p) !important;
}

/* ---------- 通用：右侧订单汇总 ---------- */
.common-config .order-right,
.main-card .f-order {
  background: #fff !important;
  border: 1px solid var(--yy-b) !important;
  border-radius: var(--yy-r) !important;
  box-shadow: var(--yy-sh) !important;
  overflow: hidden;
}

.common-config .order-right .right-title,
.main-card .f-order .tit {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--yy-t) !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--yy-b) !important;
  border-left: 0 !important;
}

.common-config .order-right .info {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--yy-b) !important;
}

.common-config .order-right .info > .des:first-child {
  font-size: 13px;
  color: var(--yy-t);
  font-weight: 500;
}

/* 配置项明细行：名称 + 所选值都要显示；
   单价由模板按 price>0 过滤（上游配置项单价都是 0，显示出来像坏了） */
.common-config .order-right .info > .des {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px !important;
  font-size: 12.5px;
  line-height: 1.5;
}

.common-config .order-right .info > .des:last-child {
  margin-bottom: 0 !important;
}

.common-config .order-right .info > .des .name {
  flex: 0 0 auto;
  color: var(--yy-m);
}

.common-config .order-right .info > .des .value {
  flex: 1 1 auto;
  color: var(--yy-t);
  font-weight: 500;
  word-break: break-all;
}

.common-config .order-right .info > .des .price {
  flex: 0 0 auto;
  color: var(--yy-p);
  font-weight: 600;
}

.common-config .order-right .subtotal {
  padding: 12px 18px !important;
  border-bottom: 0 !important;
  color: var(--yy-m);
}

.common-config .order-right .subtotal .name {
  color: var(--yy-m) !important;
}

.common-config .order-right .f-box {
  background: #fff !important;
  box-shadow: 0 -8px 20px rgba(96, 58, 130, .04) !important;
  padding: 0 18px 18px !important;
}

/* ---------- 通用：主按钮 ---------- */
.common-config .buy-btn,
.main-card .buy-btn,
.common-config .f-btn .buy-btn {
  background: linear-gradient(135deg, #b87ae0, #9d5fc0) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600;
  letter-spacing: .5px;
  box-shadow: 0 8px 20px rgba(157, 95, 192, .24);
}

.common-config .buy-btn:hover,
.main-card .buy-btn:hover,
.common-config .f-btn .buy-btn:hover {
  background: linear-gradient(135deg, #a865d4, #8d4fb0) !important;
}

/* ---------- common 页：原始商品描述（上游 HTML 文本框）不显示 ---------- */
.common-config .l-config > .description {
  display: none !important;
}

/* ---------- common 页：周期块 ---------- */
.common-config .config-item:has(.cycle) {
  margin-bottom: 10px;
}

.common-config .cycle .item .name {
  font-size: 13px;
  color: #4b4b57;
}

/* ---------- cloud 页（自建配置） ---------- */
.main-card .el-tabs__item {
  color: var(--yy-m);
  font-weight: 500;
}

.main-card .el-tabs__item.is-active {
  color: var(--yy-p);
  font-weight: 600;
}

.main-card .el-tabs__nav-wrap::after {
  background-color: var(--yy-b2);
}

.main-card .el-form-item__label {
  color: var(--yy-m) !important;
  font-weight: 500 !important;
}

.main-card .image-box,
.main-card .store-item,
.main-card .r-info {
  border-radius: 12px !important;
  border-color: var(--yy-b2) !important;
}

.main-card .c-item {
  border-radius: 10px !important;
}

.main-card .bot-price {
  color: var(--yy-t) !important;
  font-weight: 600 !important;
}

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
  .common-config .order-right {
    margin-top: 20px;
  }
}

/* ---------- 通用：Element 激活色统一为凌速云紫 ---------- */
.main-card .el-tabs__item.is-active,
.common-config .el-tabs__item.is-active {
  color: var(--yy-p) !important;
  font-weight: 600 !important;
}

.main-card .el-tabs__item:hover,
.common-config .el-tabs__item:hover {
  color: var(--yy-p) !important;
}

.main-card .el-tabs__active-bar,
.common-config .el-tabs__active-bar {
  background-color: var(--yy-p) !important;
}

/* 单选按钮组（区域/可用区/CPU/内存…） */
.main-card .el-radio-button__inner,
.common-config .el-radio-button__inner {
  border-color: var(--yy-b2) !important;
  background: #fff !important;
  color: #4b4b57 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
}

.main-card .el-radio-button.is-active .el-radio-button__inner,
.common-config .el-radio-button.is-active .el-radio-button__inner {
  border-color: var(--yy-p) !important;
  background: var(--yy-p-soft) !important;
  color: #8a4fb0 !important;
  font-weight: 600;
  box-shadow: -1px 0 0 0 var(--yy-p) !important;
}

/* 复选 / 开关 / 滑块 */
.main-card .el-checkbox__input.is-checked .el-checkbox__inner,
.common-config .el-checkbox__input.is-checked .el-checkbox__inner {
  background: var(--yy-p);
  border-color: var(--yy-p);
}

.main-card .el-switch.is-checked .el-switch__core,
.common-config .el-switch.is-checked .el-switch__core {
  background: var(--yy-p);
  border-color: var(--yy-p);
}

.main-card .el-slider__bar,
.common-config .el-slider__bar {
  background-color: var(--yy-p) !important;
}

.main-card .el-slider__button,
.common-config .el-slider__button {
  border-color: var(--yy-p) !important;
}

/* cloud 页底部结算条 */
.main-card .right .buy {
  background: linear-gradient(135deg, #b87ae0, #9d5fc0) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600;
  letter-spacing: .5px;
  box-shadow: 0 8px 20px rgba(157, 95, 192, .24);
}

.main-card .bot-price .new {
  color: #e15b8a !important;
}

.main-card .bot-price .new span,
.main-card .bot .c-item .price {
  font-weight: 600;
}

/* 上游单价是 ¥0.00，展示出来像坏了 → 弱化 */
.main-card .bot .c-item .price,
.main-card .c-item .price {
  color: var(--yy-m) !important;
  font-weight: 400 !important;
}

/* ---------- 选中角标（V10 默认蓝色三角）→ 紫色 ---------- */
.common-config .com-active::after {
  border-bottom-color: var(--yy-p) !important;
}

/* ---------- 标签页激活条（页面级作用域，避免受 .main-card 限制） ---------- */
.template .el-tabs__active-bar {
  background-color: var(--yy-p) !important;
}

.template .el-tabs__item.is-active {
  color: var(--yy-p) !important;
  font-weight: 600 !important;
}

.template .el-tabs__item:hover {
  color: var(--yy-p) !important;
}

/* ==========================================================================
   操作系统：改成和魔方标准页一样的按钮组
   （.opt-card / .preset-btn 的同款样式：白底、2px 灰边、紫色选中 + 勾角标）
   ========================================================================== */
.common-config .yy-opt-card-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.common-config .yy-opt-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  user-select: none;
  font-size: .8125rem;
  color: #4b5563;
  white-space: nowrap;
}

.common-config .yy-opt-card:hover {
  border-color: rgba(176, 116, 209, .4);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(176, 116, 209, .12);
}

.common-config .yy-opt-card.active {
  border-color: var(--yy-p);
  background: rgba(176, 116, 209, .04);
  color: var(--yy-p);
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(176, 116, 209, .12);
}

.common-config .yy-opt-card.active::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  background: var(--yy-p);
  border-radius: 0 8px 0 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

.common-config .yy-opt-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* 版本：小胶囊按钮 */
.common-config .yy-preset-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.common-config .yy-preset-btn {
  padding: 6px 14px;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  font-size: .75rem;
  color: #4b5563;
  cursor: pointer;
  transition: all .2s ease;
  user-select: none;
}

.common-config .yy-preset-btn:hover {
  border-color: rgba(176, 116, 209, .4);
  color: var(--yy-p);
}

.common-config .yy-preset-btn.active {
  background: var(--yy-p);
  border-color: var(--yy-p);
  color: #fff;
}

/* ==========================================================================
   清理 V10 残留的蓝色
   ========================================================================== */
.main-card .v-item.active {
  border-color: var(--yy-p) !important;
  color: var(--yy-p) !important;
  background: rgba(176, 116, 209, .04) !important;
  box-shadow: 0 0 0 3px rgba(176, 116, 209, .12) !important;
}

.main-card .version-select {
  border-color: var(--yy-p) !important;
  color: var(--yy-p) !important;
}

.common-config .el-slider__button,
.main-card .el-slider__button {
  background: var(--yy-p) !important;
  border-color: var(--yy-p) !important;
}

.common-config .el-slider__runway,
.main-card .el-slider__runway {
  background: #ece4f5 !important;
}

/* ==========================================================================
   mf_cloud 页：镜像卡片 / 版本选择 也做成按钮化
   ========================================================================== */
.main-card .image-box .image-item,
.main-card .v-item {
  background: #fff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all .2s ease;
  color: #4b5563 !important;
}

.main-card .image-box .image-item:hover,
.main-card .v-item:hover {
  border-color: rgba(176, 116, 209, .4) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(176, 116, 209, .12);
}

.main-card .image-box .image-item.active,
.main-card .v-item.active {
  border-color: var(--yy-p) !important;
  background: rgba(176, 116, 209, .04) !important;
  color: var(--yy-p) !important;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(176, 116, 209, .12) !important;
}

.main-card .version-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  font-size: .75rem;
  color: #4b5563;
  cursor: pointer;
}

.main-card .version-select:hover {
  border-color: rgba(176, 116, 209, .4);
  color: var(--yy-p);
}

/* 残留蓝色：添加数据盘 / 下拉选中项 */
.main-card .add-disk,
.template .add-disk {
  color: var(--yy-p) !important;
}

.template .el-select-dropdown__item.selected {
  color: var(--yy-p) !important;
}

/* ---------- 主按钮 / 文本蓝 → 紫（收尾） ---------- */
.template .el-button--primary,
.main-card .el-button--primary {
  background: var(--yy-p) !important;
  border-color: var(--yy-p) !important;
  color: #fff !important;
}

.template .el-button--primary:hover,
.main-card .el-button--primary:hover {
  background: #8d4fb0 !important;
  border-color: #8d4fb0 !important;
}

.template button.sure,
.main-card button.sure {
  background: var(--yy-p) !important;
  border-color: var(--yy-p) !important;
  color: #fff !important;
}

.main-card .txt,
.template .txt {
  color: var(--yy-p) !important;
}

.main-card .txt.num,
.template .txt.num {
  color: var(--yy-t) !important;
}

/* 加入购物车成功弹窗里的「去购物车结算」 */
.template .el-dialog__footer .el-button--default {
  background: var(--yy-p) !important;
  border-color: var(--yy-p) !important;
  color: #fff !important;
}


/* ==========================================================================
   响应式：手机 / 平板自适应
   上游 CSS 全部是写死的像素值（el-select 320px、slider 434px、
   country/city 卡片 205px、order-right 360px 固定定位），
   手机上必然溢出，这里按断点逐个改成百分比 / 自适应。
   ========================================================================== */

/* ---------- 通用：下拉框不要超出容器 ---------- */
.common-config .el-select,
.main-card .el-select {
  max-width: 100%;
}

.common-config .el-select input,
.main-card .el-select input {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.common-config .el-select .el-input,
.main-card .el-select .el-input {
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- 平板：≤1199px ---------- */
@media (max-width: 1199px) {
  .common-config .l-config {
    margin-right: 0 !important;
    padding: 0 12px !important;
  }

  .common-config .order-right {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 20px;
    right: auto !important;
    top: auto !important;
    padding: 0 !important;
    overflow: visible;
  }

  .common-config .order-right .info {
    max-height: none !important;
    overflow: visible !important;
  }

  .common-config .config-item .slider .el-slider {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 12px !important;
    flex: 1 1 auto;
  }

  .common-config .config-item .slider {
    width: 100%;
    flex-wrap: wrap;
  }

  .common-config .area-box .country .item,
  .common-config .area-box .city .item {
    width: auto !important;
    min-width: 120px;
    flex: 1 1 150px;
  }

  .common-config .custom-config .el-input,
  .common-config .custom-config .el-textarea {
    width: 100% !important;
    max-width: 100%;
  }
}

/* ---------- 手机：≤767px ---------- */
@media (max-width: 767px) {
  .common-config .l-config {
    padding: 0 8px !important;
  }

  /* 卡片间距再收一点 */
  .common-config .config-item,
  .main-card .el-form-item {
    padding: 10px !important;
    border-radius: 12px;
    margin-bottom: 8px !important;
  }

  /* 标题竖条缩短一点，别显得突兀 */
  .common-config .config-tit,
  .main-card .com-tit,
  .main-card .tit {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  /* 订单汇总卡片 */
  .common-config .order-right {
    margin-top: 14px;
    border-radius: 12px !important;
  }

  .common-config .order-right .right-title {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }

  .common-config .order-right .info {
    padding: 12px 14px !important;
  }

  .common-config .order-right .subtotal {
    padding: 10px 14px !important;
  }

  .common-config .order-right .f-box {
    padding: 0 14px 14px !important;
  }

  /* 拖动条改成上下两行，避免横向溢出 */
  .common-config .config-item .slider {
    flex-wrap: wrap;
    row-gap: 10px;
    align-items: center;
  }

  /* min / max 标签并排一行，滑块独占一行，数值框再一行 */
  .common-config .config-item .slider .min {
    order: 1;
    flex: 0 0 auto;
    margin-right: 8px;
  }

  .common-config .config-item .slider .max {
    order: 1;
    flex: 0 0 auto;
    margin-left: 8px;
  }

  .common-config .config-item .slider .el-slider {
    order: 2;
    width: 100% !important;
    margin: 0 !important;
    flex: 1 1 100%;
  }

  .common-config .config-item .slider .el-input-number {
    order: 3;
    width: 100% !important;
    margin-left: 0 !important;
    flex: 1 1 100%;
  }

  .common-config .config-item .slider .el-input {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* 区域 / 城市卡片：两个一行 */
  .common-config .area-box .country .item,
  .common-config .area-box .city .item {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    width: auto !important;
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 10px !important;
    margin: 0 10px 10px 0 !important;
    font-size: 13px;
  }

  /* 操作系统按钮组：一行一个，不挤 */
  .common-config .yy-opt-card-group {
    gap: 6px;
  }

  .common-config .yy-opt-card {
    flex: 1 1 calc(50% - 6px);
    padding: 8px 10px !important;
    font-size: 12.5px !important;
  }

  .common-config .yy-preset-btn {
    flex: 1 1 calc(50% - 6px);
    text-align: center;
  }

  /* 周期按钮：两个一行 */
  .common-config .cycle .item {
    flex: 1 1 calc(50% - 10px);
    margin: 0 10px 10px 0 !important;
    text-align: center;
  }

  /* 订单汇总明细：名称和值各占一行，别挤在一起 */
  .common-config .order-right .info > .des {
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-bottom: 10px !important;
  }

  .common-config .order-right .info > .des .name {
    flex: 0 0 76px;
  }

  .common-config .order-right .info > .des .value {
    flex: 1 1 calc(100% - 84px);
  }
}

/* ---------- 超窄屏：≤380px ---------- */
@media (max-width: 380px) {
  .common-config .yy-opt-card {
    flex: 1 1 100%;
  }

  .common-config .yy-preset-btn {
    flex: 1 1 100%;
  }
}


/* ==========================================================================
   mf_cloud 页（自建配置）响应式
   上游 f-order 是固定在底部的结算条，宽度写死；配置表单的输入框也是 360px。
   ========================================================================== */
@media (max-width: 1199px) {
  .mf-cloud .optional .el-form-item__content .el-input,
  .mf-cloud .custom-config .el-input,
  .mf-cloud .custom-config .el-textarea,
  .mf-cloud .custom-config .el-select {
    width: 100% !important;
    max-width: 100%;
  }

  .mf-cloud .f-order {
    height: auto !important;
    min-height: 120px;
  }

  .mf-cloud .f-order .l-empty,
  .mf-cloud .f-order .r-empty {
    height: auto !important;
    padding: 10px 12px !important;
  }

  .mf-cloud .f-order .main-card {
    padding: 10px 12px !important;
  }
}

@media (max-width: 767px) {
  .mf-cloud .f-order {
    position: static !important;
    width: 100% !important;
    margin-top: 16px;
  }

  .mf-cloud .f-order .main-card {
    flex-direction: column !important;
    gap: 8px;
  }

  .mf-cloud .f-order .bot-price .new {
    font-size: 20px !important;
  }

  .mf-cloud .image-box .image-item {
    flex: 1 1 calc(50% - 8px) !important;
  }

  .mf-cloud .v-item {
    flex: 1 1 calc(50% - 8px) !important;
  }
}


/* ==========================================================================
   通用：flex 子项默认 min-width:auto，会被宽表格/长文本撑破容器，
   一律允许收缩，表格改为容器内横向滚动
   ========================================================================== */
.common-config .el-form-item__content,
.common-config .config-way,
.main-card .el-form-item__content,
.mf-cloud .el-form-item__content,
.mf-cloud .store-item,
.mf-cloud .cloud-box,
.mf-cloud .optional,
.mf-cloud .el-table {
  min-width: 0 !important;
  max-width: 100% !important;
}

.mf-cloud .el-table {
  overflow-x: auto !important;
}

@media (max-width: 767px) {
  /* 数据盘表格：列宽在模板里写死，改为容器内横向滚动，不撑破页面 */
  .mf-cloud .store-item {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mf-cloud .store-item .el-table {
    min-width: 640px !important;
  }
}


/* ==========================================================================
   dc-card：区域选择卡片（跟魔方标准页 configureproduct.tpl 完全同款）
   ========================================================================== */
.common-config .dc-card-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.common-config .dc-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  user-select: none;
}

.common-config .dc-card:hover {
  border-color: rgba(176, 116, 209, .4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(176, 116, 209, .12);
}

.common-config .dc-card.active {
  border-color: var(--yy-p);
  background: rgba(176, 116, 209, .04);
  box-shadow: 0 0 0 3px rgba(176, 116, 209, .15), 0 4px 16px rgba(176, 116, 209, .15);
}

/* 右上角紫色对勾角标 */
.common-config .dc-card.active::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 18px;
  height: 18px;
  background: var(--yy-p);
  border-radius: 0 8px 0 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.common-config .dc-card-flag {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.common-config .dc-card-name {
  font-size: .8125rem;
  font-weight: 500;
  color: #4b5563;
  white-space: nowrap;
}

.common-config .dc-card.active .dc-card-name {
  color: var(--yy-p);
  font-weight: 600;
}

/* 卡片内部原来的 check 图标（用 CSS 画的），dc-card 用角标代替，隐藏掉 */
.common-config .dc-card > i.el-icon-check {
  display: none !important;
}

/* 区域不再分国家/城市两级，去掉旧的两级容器样式 */
.common-config .area-box .country,
.common-config .area-box .city {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0 !important;
}

.common-config .area-box .tit {
  display: none !important;
}

@media (max-width: 767px) {
  .common-config .dc-card {
    flex: 1 1 calc(50% - 5px);
    padding: 8px 10px !important;
  }

  .common-config .dc-card-name {
    white-space: normal;
    font-size: .75rem !important;
  }
}


/* ==========================================================================
   与魔方原生 configureproduct.tpl 视觉对齐（2026-11-07）
   原生基准：--bs-global #b074d1 / 卡片 14px / 边框 #ece8f2 /
   阴影 0 1px 2px rgba(23,19,31,.04) / 正文 13px #495057 / 8-4 分栏 /
   标题在左列、选项在右列。此段放在文件末尾，作为最终覆盖层。
   ========================================================================== */

/* 1. 设计令牌：把 V10 自研紫统一到站点主色 */
.common-config,
.main-card {
  --yy-p: #b074d1;
  --yy-p-soft: rgba(176, 116, 209, .04);
  --yy-b: #ece8f2;
  --yy-b2: #e5e7eb;
  --yy-t: #495057;
  --yy-m: #8a8a99;
  --yy-r: 14px;
  --yy-sh: 0 1px 2px rgba(23, 19, 31, .04);
  --yy-sh2: 0 2px 12px rgba(0, 0, 0, .04);
}

/* 2. 8 / 4 分栏，右栏从 fixed 悬浮改成栏内 sticky */
.common-config .common-box {
  display: flex !important;
  gap: 0 !important;
  padding: 0 0 20px !important;
}
.common-config .l-config {
  flex: 0 0 796px !important;
  width: 796px !important;
  max-width: 796px !important;
  margin-right: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box;
}
.common-config .order-right {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 20px !important;
  right: auto !important;
  left: auto !important;
  flex: 0 0 374px !important;
  width: 374px !important;
  max-width: 374px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #ece8f2 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(23, 19, 31, .04) !important;
  overflow: hidden !important;
}

/* 3. 商品名标题卡（模板新增 .yy-pro-head） */
.common-config .yy-pro-head {
  background: #fff;
  border: 1px solid #ece8f2;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(23, 19, 31, .04);
  padding: 20px;
  margin: 0 0 12px;
}
.common-config .yy-pro-head .card-title {
  font-size: 15px;
  font-weight: 600;
  color: #495057;
  margin: 0;
  line-height: 1.4;
}

/* 4. 配置项卡片：标题左列 + 内容右列，同原生 .config-section-card */
.common-config .config-item {
  position: relative;
  padding: 20px 24px 20px 150px !important;
  margin: 0 0 12px !important;
  background: #fff !important;
  border: 1px solid rgba(176, 116, 209, .08) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04) !important;
}
.common-config .config-item > .config-tit {
  position: absolute;
  left: 24px;
  top: 20px;
  width: 112px;
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #495057 !important;
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.6;
  letter-spacing: 0 !important;
}
.common-config .config-item > .des {
  font-size: 12.5px;
  color: #8a8a99;
  margin-top: 8px;
}

/* 5. 选项卡片：和原生 .opt-card / .dc-card 同款 */
.common-config .yy-opt-card,
.common-config .dc-card,
.common-config .click-select .item,
.common-config .cycle .item {
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  border-color: #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.common-config .dc-card {
  padding: 10px 16px !important;
  border-radius: 10px !important;
}
.common-config .yy-opt-card.active,
.common-config .dc-card.active,
.common-config .click-select .item.com-active,
.common-config .cycle .item.com-active {
  border-color: #b074d1 !important;
  background: rgba(176, 116, 209, .04) !important;
  color: #b074d1 !important;
  font-weight: 500 !important;
  box-shadow: 0 0 0 3px rgba(176, 116, 209, .12) !important;
}
.common-config .yy-opt-card.active::after,
.common-config .dc-card.active::after {
  background-color: #b074d1 !important;
}
.common-config .dc-card-name {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
}
.common-config .dc-card.active .dc-card-name {
  color: #b074d1;
  font-weight: 500;
}
.common-config .cycle .item {
  min-width: 72px;
  justify-content: center;
}
.common-config .cycle .item .name {
  font-size: 13px;
  color: #4b5563;
}
.common-config .cycle .item.com-active .name {
  color: #b074d1;
  font-weight: 500;
}

/* 6. 滑块 / 输入控件：细线 + 白底紫边圆点，圆角 8px */
.common-config .el-slider__runway {
  height: 4px !important;
  background: #f1f3f8 !important;
}
.common-config .el-slider__bar {
  height: 4px !important;
  background: #b074d1 !important;
}
.common-config .el-slider__button {
  width: 16px !important;
  height: 16px !important;
  background: #fff !important;
  border: 3px solid #b074d1 !important;
}
.common-config .el-input__inner,
.common-config .el-textarea__inner,
.common-config .el-input-number,
.common-config .el-select .el-input__inner {
  border-radius: 8px !important;
  border-color: #e5e7eb !important;
}

/* 6b. 滑块行：上游 el-slider 写死 434px，放进「标题左列」布局后会顶出卡片，
       改成可伸缩，让数值框和单位回到卡片内 */
.common-config .config-item .config-way > .slider {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.common-config .config-item .slider .el-slider {
  flex: 1 1 auto !important;
  min-width: 60px !important;
  width: auto !important;
  margin: 0 16px !important;
}
.common-config .config-item .slider .el-input-number {
  flex: 0 0 90px !important;
  width: 90px !important;
}

/* 7. 右栏：标题 / 明细 / 小计 / 合计 */
.common-config .order-right .right-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #495057 !important;
  padding: 20px 20px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid #f2eff7 !important;
}
.common-config .order-right .info {
  padding: 16px 20px !important;
  border-bottom: 0 !important;
}
.common-config .order-right .info > .des:first-child {
  font-size: 13px;
  color: #495057;
  font-weight: 500;
}
.common-config .order-right .info > .des {
  font-size: 13px;
  margin-bottom: 8px !important;
}
.common-config .order-right .info > .des .name {
  color: #8a8a99;
}
.common-config .order-right .info > .des .value {
  color: #495057;
  font-weight: 400;
}
.common-config .order-right .info > .des .price {
  color: #495057;
  font-weight: 500;
}
.common-config .order-right .subtotal {
  padding: 10px 20px !important;
  border-top: 1px solid #f2eff7 !important;
  border-bottom: 0 !important;
  color: #8a8a99;
}
.common-config .order-right .f-box {
  padding: 12px 20px 20px !important;
  box-shadow: none !important;
}
.common-config .order-right .footer-total .left {
  font-size: 13px;
  color: #8a8a99;
}
.common-config .order-right .footer-total .right > span {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #495057 !important;
}
.common-config .order-right .original-price {
  color: #8a8a99 !important;
}

/* 8. 主按钮：纯色、小号、右对齐，带购物车图标 */
.common-config .f-btn {
  text-align: right !important;
}
.common-config .f-btn .buy-btn,
.common-config .order-right .buy-btn {
  display: inline-block !important;
  width: auto !important;
  min-width: 116px;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 0 0 auto !important;
  background: #b074d1 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  text-align: center;
}
.common-config .f-btn .buy-btn:hover,
.common-config .order-right .buy-btn:hover {
  background: #a061c4 !important;
  background-image: none !important;
}
.common-config .f-btn .buy-btn::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 9. 响应式：小屏恢复堆叠与块级标题（必须放在最后，覆盖上面的定宽规则） */
@media (max-width: 1199px) {
  .common-config .common-box { flex-wrap: wrap !important; }
  .common-config .l-config {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }
  .common-config .order-right {
    position: static !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 16px 0 0 !important;
    overflow: visible !important;
  }
  .common-config .order-right .info {
    max-height: none !important;
    overflow: visible !important;
  }
}
@media (max-width: 767px) {
  .common-config .l-config { padding: 0 8px !important; }
  .common-config .yy-pro-head { padding: 14px; }
  .common-config .config-item {
    padding: 14px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }
  .common-config .config-item > .config-tit {
    position: static !important;
    width: auto !important;
    margin: 0 0 10px !important;
    font-size: 13px !important;
  }
  .common-config .order-right .right-title,
  .common-config .order-right .info,
  .common-config .order-right .subtotal,
  .common-config .order-right .f-box {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .common-config .f-btn .buy-btn,
  .common-config .order-right .buy-btn {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .common-config .config-item .slider .el-slider {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 0 !important;
    order: 2;
  }
}

/* ==========================================================================
   首屏骨架（2026-11-08）
   配置页所有内容都靠 JS 异步拉取，等待的 1~2 秒里原本是一片空白 + ¥0.00。
   这里只用 CSS 和静态占位补上过渡，不参与 Vue 渲染；数据一到自动消失。
   ========================================================================== */
@keyframes yySkPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

.yy-boot { display: none; }

/* Vue 还没挂载（.template 仍带 v-cloak）时显示骨架；
   挂载后 v-cloak 被移除，这条规则不再匹配 —— 不需要任何 JS 参与 */
body:has(.template[v-cloak]) .yy-boot { display: block; }

.yy-boot .order-right {
  height: auto !important;
  min-height: 320px;
}

.yy-sk {
  display: block;
  border-radius: 4px;
  background: #f1ecf7;
  animation: yySkPulse 1.1s ease-in-out infinite;
}

.yy-boot .yy-sk-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.yy-boot .yy-sk-chip {
  width: 96px;
  height: 36px;
  border-radius: 8px;
  flex: 0 0 96px;
}

/* 右栏小计/合计里的占位要和文字在同一行，不能被块级撑到下一行 */
.yy-boot .subtotal .yy-sk,
.yy-boot .footer-total .yy-sk {
  display: inline-block;
  vertical-align: middle;
}

/* Vue 已挂载、配置还没回来：商品名 / 周期先用灰条占位 */
.common-config .yy-pro-head h4:empty::before {
  content: "";
  display: block;
  width: 240px;
  max-width: 70%;
  height: 18px;
  border-radius: 4px;
  background: #f1ecf7;
  animation: yySkPulse 1.1s ease-in-out infinite;
}

/* 周期卡：加载完才有 .cycle 节点，没有就说明还没渲染出来。
   加 .template 前缀是为了不命中骨架自身（骨架里两个卡都没有 .cycle） */
.template .common-config .l-config > .config-item:last-of-type:not(:has(.cycle))::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 300px;
  height: 38px;
  border-radius: 8px;
  background: #f1ecf7;
  animation: yySkPulse 1.1s ease-in-out infinite;
}

/* 价格用等宽数字：0.00 → 50.00 时宽度不再跳 */
.common-config .order-right .subtotal,
.common-config .order-right .info .price,
.common-config .order-right .footer-total .right {
  font-variant-numeric: tabular-nums;
}

/* 右栏给最低高度，数据填充前后不塌陷 */
.common-config .order-right .info { min-height: 96px; }

@media (prefers-reduced-motion: reduce) {
  .yy-sk,
  .common-config .yy-pro-head h4:empty::before,
  .template .common-config .l-config > .config-item:last-of-type:not(:has(.cycle))::after {
    animation: none;
  }
}

/* ==========================================================================
   滑块（quantity_range）视觉统一（2026-11-08b）
   上游 mf_cloud.css / mf_dcim.css 把真正的圆点 opacity:0 隐藏，
   改用 img/slider.svg 当底座背景 —— 所以在 V10 配置页看到的是「方形紫框」。
   这里恢复「白底紫环圆点 + 紫色轨道」，与站内原生魔方配置页保持一致。
   ========================================================================== */

/* ① 底座：去掉方形 svg，尺寸收到与圆点一致，靠 transform 精确居中轨道 */
.common-config .el-slider__button-wrapper {
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  background: none !important;
  background-image: none !important;
  line-height: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4 !important;
}

/* ② 圆点：白心 + 3px 紫环 + 轻投影 */
.common-config .el-slider__button {
  opacity: 1 !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 3px solid #b074d1 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(126, 78, 165, .22) !important;
  transition: box-shadow .16s ease, transform .16s ease !important;
}

/* 悬停 / 拖动：轻放大 + 环形光晕，让「可拖动」更明确 */
.common-config .el-slider__button-wrapper:hover .el-slider__button,
.common-config .el-slider__button-wrapper.hover .el-slider__button,
.common-config .el-slider__button-wrapper.dragging .el-slider__button {
  transform: scale(1.12) !important;
  box-shadow: 0 0 0 5px rgba(176, 116, 209, .16), 0 2px 6px rgba(126, 78, 165, .28) !important;
}

/* ③ 轨道：6px 圆角，未填充淡紫、已填充主紫（进度一眼能看出来） */
.common-config .el-slider__runway {
  height: 6px !important;
  border-radius: 3px !important;
  background: #e9ddf6 !important;
  cursor: pointer;
}

.common-config .el-slider__bar {
  height: 6px !important;
  border-radius: 3px !important;
  background: #b074d1 !important;
}

/* ④ 刻度（min / max）：弱化为辅助信息，两端对齐贴住轨道 */
.common-config .config-item .slider .min,
.common-config .config-item .slider .max {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #b3aac2 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.common-config .config-item .slider .min { text-align: right !important; }
.common-config .config-item .slider .max { text-align: left !important; }

/* ⑤ 数值框：当前值居中加粗，聚焦时紫边 + 光环 */
.common-config .config-item .slider .el-input-number .el-input__inner {
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 8px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #2f2740 !important;
  border-radius: 8px !important;
  border-color: #e6ddf1 !important;
  background: #fff !important;
}

.common-config .config-item .slider .el-input-number .el-input__inner:focus {
  border-color: #b074d1 !important;
  box-shadow: 0 0 0 3px rgba(176, 116, 209, .12) !important;
}

/* 禁用态：不抢视觉焦点 */
.common-config .el-slider.is-disabled .el-slider__button {
  border-color: #d8d2e2 !important;
  box-shadow: none !important;
}
.common-config .el-slider.is-disabled .el-slider__bar {
  background: #d8d2e2 !important;
}

@media (prefers-reduced-motion: reduce) {
  .common-config .el-slider__button { transition: none !important; }
}

/* ⑥ 窄屏：刻度单独占一行，两端对齐到轨道首尾，避免挤在左上角 */
@media (max-width: 767px) {
  .common-config .config-item .slider .min {
    flex: 1 1 auto !important;
    text-align: left !important;
    margin-right: 0 !important;
  }
  .common-config .config-item .slider .max {
    flex: 0 0 auto !important;
    text-align: right !important;
    margin-left: auto !important;
  }
}

/* ⑦ 窄屏：滑块行的「单位」是 .slider 的兄弟节点，会掉到轨道行右侧、
   看起来像被轨道穿过。窄屏下改为显示在标题后面（模板里的 .yy-unit-m），
   桌面端仍保留原来的右侧单位。 */
.yy-unit-m { display: none; }

@media (max-width: 767px) {
  .common-config .config-item .config-tit .yy-unit-m {
    display: inline;
    margin-left: 5px;
    font-size: 12px;
    font-weight: 400;
    color: #a79fb6;
  }
  .common-config .config-item .config-way:has(> .slider) > .unit {
    display: none !important;
  }
}

/* ⑧ 快速配置（mf_cloud）套餐卡片：上游写死 width:280px + margin-left:10px，
   4 个套餐在 900px 左列里会挤成 3+1。改成网格自适应，一排放得下就不换行。 */
.mf-cloud .cloud-box {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 10px !important;
}
.mf-cloud .cloud-box .cloud-item {
  width: auto !important;
  margin-left: 0 !important;
}