.configoption_form .card.border-bottom .card-title{
    border-left: 2px solid #067ef6;
    padding: 1px 0 1px 5px;
    font-size: 18px;
}

/* ----------------------------------------------------------------------------
 * 5. 单选按钮组 .btn-group-toggle（option_type 20 / 6 / 8 / 10 / 13 / 数据中心等）
 *    把 Bootstrap 默认的「整组实心蓝」改为「描边未选中 + 渐变选中」的胶囊式开关。
 * ---------------------------------------------------------------------------- */
.configoption_form .btn-group-toggle .btn {
  padding: 0.42rem 1rem;
  font-size: 13px;
  font-weight: 500;
  color: #495057;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 6px !important;     /* 取消 Bootstrap 相邻按钮的圆角叠加 */
  box-shadow: none;
}

/* 分组内按钮间距：改用外边距而非 Bootstrap 的负边距，按钮更独立 */
.configoption_form .btn-group-toggle .btn:not(:last-child) {
  margin-right: 8px;
}

/* 未选中悬停：浅蓝底 + 主蓝文字，提示可点击 */
.configoption_form .btn-group-toggle .btn:hover {
  color: #2948df;
  background:#eef1ff;
  border-color: #d8dfff;
}

/* 选中态：主蓝渐变 + 白字 + 轻微投影，突出当前选择 */
.configoption_form .btn-group-toggle .btn.active {
  color: #fff;
  background: linear-gradient(135deg, #4f5bf5 0%, #2948df 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(41, 72, 223, 0.25);
}

/* ----------------------------------------------------------------------------
 * 数量步进按钮 .cp-step-btn（option_type 4/7/9/11/14/15/16/17/18/19 滑块数字输入）
 *   在数字输入框两侧各加一个「- / +」按钮，组成数量步进器；
 *   按钮与输入框保持为同级兄弟节点，保证 configureproduct.js 中
 *   _this.siblings(".configoption_range") 仍能正确找到滑块并同步。
 * ---------------------------------------------------------------------------- */

/* 数字输入框：与步进按钮等高、文本居中，更符合步进器观感 */
.configoption_form .configoption_range_val {
  height: 34px;
  text-align: center;
}

/* 步进按钮：与输入框等高的小方块，描边样式与单选按钮组保持一致 */
.configoption_form .cp-step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;                    /* 避免被同行的滑块（width:100%）挤压变形 */
  padding: 0;
  color: #495057;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* 减号按钮：与输入框左侧留 6px 间距 */
.configoption_form .cp-step-btn--minus {
  margin-right: 6px;
}

/* 加号按钮：与输入框右侧、单位文字各留 6px 间距 */
.configoption_form .cp-step-btn--plus {
  margin: 0 6px;
}

/* 步进按钮图标 */
.configoption_form .cp-step-btn i {
  font-size: 16px;
  line-height: 1;
}

/* 悬停 / 聚焦：浅蓝底 + 主蓝图标，与单选按钮组交互态保持一致 */
.configoption_form .cp-step-btn:hover,
.configoption_form .cp-step-btn:focus {
  color: #2948df;
  background: #eef1ff;
  border-color: #d8dfff;
  outline: none;
}
/* ----------------------------------------------------------------------------
 * 操作系统选择按钮组 .cp-os-group / .cp-os-btn（option_type 5 顶部）
 *   浅灰圆角按钮横向排列，每项由「系统 logo 图标 + 系统名称」组成；
 *   选中态为「蓝色外边框 + 名称文字蓝色高亮」，未选中为黑色文字。
 * ---------------------------------------------------------------------------- */

/* 按钮组容器：flex 横向排列、自动换行，与下方版本下拉框留出间距 */
.configoption_form .cp-os-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* 单个系统按钮：浅灰底 + 描边圆角，logo 与名称水平居中 */
.configoption_form .cp-os-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f4f6fa;                /* 浅灰背景 */
  border: 1px solid #e6e8ef;          /* 未选中：中性描边（无蓝色） */
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

/* 系统 logo 图标：等比缩放，不拉伸变形 */
.configoption_form .cp-os-btn__logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* 系统名称：未选中为黑色文字 */
.configoption_form .cp-os-btn__name {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
}

/* 悬停：浅蓝描边提示可点击（弱于选中态的蓝色外边框） */
.configoption_form .cp-os-btn:hover {
  border-color: #d8dfff;
}

/* 选中态：蓝色外边框 + 浅蓝底 + 名称文字蓝色高亮 */
.configoption_form .cp-os-btn.is-selected {
  border-color: #2948df;
  background: #eef1ff;
}
.configoption_form .cp-os-btn.is-selected .cp-os-btn__name {
  color: #2948df;
}

/* ----------------------------------------------------------------------------
 * 版本下拉框 .cp-os-version-wrap（option_type 5 底部）
 *   大圆角、占满卡片宽度的 bootstrap-select；
 *   未选择时显示灰色「选择版本」，已选择显示黑色版本字符串，
 *   右侧下拉箭头由 bootstrap-select 的 .dropdown-toggle:after 自动生成。
 * ---------------------------------------------------------------------------- */

/* 包裹层：占满整行宽度 */
.configoption_form .cp-os-version-wrap {
  width: 100%;
}

/* 让 bootstrap-select 组件撑满容器宽度（默认固定 220px） */
.configoption_form .cp-os-version-wrap .bootstrap-select {
  width: 100% !important;
}

/* 下拉按钮：大圆角、白底描边，版本文字黑色（左对齐，箭头居右） */
.configoption_form .cp-os-version-wrap .bootstrap-select .dropdown-toggle {
  width: 100%;
  height: 42px;
  padding: 0.5rem 1rem;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 10px;
  color: #1f2937;
}

/* 未选择时占位文字「选择版本」：灰色 */
.configoption_form .cp-os-version-wrap .bootstrap-select .dropdown-toggle.bs-placeholder {
  color: #6b7280;
}

/* 右侧下拉箭头：微调垂直位置，与文字基线对齐 */
.configoption_form .cp-os-version-wrap .bootstrap-select .dropdown-toggle:after {
  margin-top: -1px;
}

.card.border-bottom.mb-0{
    background: url(../img/products-topbanner.png) no-repeat center;
    /* height: 150px; */
}
.card.card-bg{
    margin-top: 10px;
    /* background: #ffffff url(../img/products-bg.png) no-repeat right bottom; */
    
}