/* flux-pro-bw.css (20260104u) - 带宽滑动条 + 加减步进（云主机=5，服务器租用=10） */

.page-product .pro-range--bw .pro-range-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.page-product .pro-range--bw .pro-stepwrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.page-product .pro-range--bw .pro-stepper--bw{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(20,35,65,0.10);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}

.page-product .pro-range--bw .pro-stepper--bw .pro-step-btn{
  width:34px;
  height:34px;
  border:0;
  background:rgba(20,35,65,0.06);
  color:#0b1b3a;
  font-size:16px;
  font-weight:800;
  line-height:34px;
  cursor:pointer;
}

.page-product .pro-range--bw .pro-stepper--bw .pro-step-btn:active{
  transform:translateY(1px);
}

.page-product .pro-range--bw .pro-stepper--bw .pro-step-input{
  width:56px;
  height:34px;
  border:0;
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#0b1b3a;
  outline:none;
  background:transparent;
  -moz-appearance:textfield;
}
.page-product .pro-range--bw .pro-stepper--bw .pro-step-input::-webkit-outer-spin-button,
.page-product .pro-range--bw .pro-stepper--bw .pro-step-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.page-product .pro-range--bw .pro-step-suf{
  font-size:12px;
  color:rgba(11,27,58,0.65);
  white-space:nowrap;
}

/* Range track fill (跟随滑动变化) */
.page-product .pro-range--bw .pro-range-input{
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:999px;
  outline:none;
  background:linear-gradient(
    to right,
    #2f78ff 0%,
    #2f78ff var(--p, 0%),
    rgba(20,35,65,0.16) var(--p, 0%),
    rgba(20,35,65,0.16) 100%
  );
}

.page-product .pro-range--bw .pro-range-input::-webkit-slider-runnable-track{
  height:4px;
  background:transparent;
  border-radius:999px;
}

.page-product .pro-range--bw .pro-range-input::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#2f78ff;
  border:2px solid #fff;
  box-shadow:0 6px 18px rgba(20,35,65,0.22);
  margin-top:-5px;
}

.page-product .pro-range--bw .pro-range-input::-moz-range-track{
  height:4px;
  background:rgba(20,35,65,0.16);
  border-radius:999px;
}
.page-product .pro-range--bw .pro-range-input::-moz-range-progress{
  height:4px;
  background:#2f78ff;
  border-radius:999px;
}
.page-product .pro-range--bw .pro-range-input::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#2f78ff;
  border:2px solid #fff;
  box-shadow:0 6px 18px rgba(20,35,65,0.22);
}

/* mobile */
@media (max-width: 576px){
  .page-product .pro-range--bw .pro-range-row{
    flex-direction:column;
    align-items:stretch;
  }
  .page-product .pro-range--bw .pro-stepwrap{
    justify-content:flex-end;
  }
}

/* =============================
 * 服务器租用（prod-cat-2）：
 * 1) IP 与带宽分成两个卡片后，带宽卡片里需要“上方卡片选择 + 下方滑动条/加减”，避免被挤压。
 * 2) 修复桌面端滑动条被压缩导致线条/拖动点异常的问题。
 * ============================= */

.page-product.prod-cat-2 .pro-rent-row--solo{
  display:flex;
  justify-content:flex-end;
}

.page-product.prod-cat-2 .pro-range--bw .pro-range-row{
  /* 跟云主机同一行：滑动条在左，加减在右 */
  align-items: center;
  gap: 14px;
}

.page-product.prod-cat-2 .pro-bw-control{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
}

.page-product.prod-cat-2 .pro-bw-control .pro-range-input{
  flex:1 1 auto;
  min-width:0;
}

.page-product.prod-cat-2 .pro-pickgrid--bwimg{
  width:100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom:12px;
}

@media (max-width: 992px){
  .page-product.prod-cat-2 .pro-pickgrid--bwimg{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 576px){
  .page-product.prod-cat-2 .pro-pickgrid--bwimg{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-product.prod-cat-2 .pro-bw-control{
    gap:10px;
  }
}


/* 服务器租用：带宽图片卡片快捷选择 */

.page-product .pro-pickgrid--bwimg{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:10px;
  margin-bottom:10px;
}

.page-product .pro-pick--bw{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(20,35,65,0.12);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 10px;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  color:#0b1b3a;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.page-product .pro-pick--bw:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 26px rgba(20,35,65,0.12);
}

.page-product .pro-pick--bw.is-active{
  border-color: rgba(47,120,255,0.8);
  background: rgba(47,120,255,0.06);
  box-shadow:0 12px 28px rgba(47,120,255,0.18);
}

.page-product .pro-pick--bw .pro-pick-ico{
  width:16px;
  height:16px;
  background-image: var(--ico);
  background-size: 16px 16px;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0.92;
}

.page-product .pro-pick--bw .pro-pick-txt{
  white-space:nowrap;
}
/* 服务器租用：带宽图片卡片（更像云主机样式，紧凑、可换行、避免挤压） */
.page-product.prod-cat-2 .pro-range--rentbw{
  width: 100%;
}

.page-product.prod-cat-2 .pro-pickgrid--bwimg{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.page-product.prod-cat-2 .pro-pickgrid--bwimg .pro-pick--bw{
  height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  min-width: 118px;
  justify-content: center;
}

.page-product.prod-cat-2 .pro-pickgrid--bwimg .pro-pick-ico{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
}

.page-product.prod-cat-2 .pro-pickgrid--bwimg .pro-pick-ico::before{
  background-size: 14px 14px;
  opacity: 0.95;
}

.page-product.prod-cat-2 .pro-pickgrid--bwimg .pro-pick-txt{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* 服务器租用：滑动条占满可用空间 */
.page-product.prod-cat-2 .pro-range--rentbw .pro-range-input{
  flex: 1 1 auto;
  min-width: 0;
}

/* =============================
 * v1: 服务器租用（prod-cat-2）带宽样式最终覆盖
 * - 修复被 pro-rent-row--solo:flex-end 挤压导致的滑动条过短/断裂
 * - 统一快捷选项为网格布局（对齐云主机风格）
 * - 强制带宽组件宽度为 100%
 * ============================= */

/* 让带宽块占满卡片，不右对齐压缩 */
.page-product.prod-cat-2 .pro-rent-row--solo{
  display:block !important;
}

/* 强制带宽范围组件全宽（兼容旧版还带 pro-range--compact 的情况） */
.page-product.prod-cat-2 .pro-range--bw,
.page-product.prod-cat-2 .pro-range--rentbw,
.page-product.prod-cat-2 .pro-range--compact{
  width:100% !important;
  max-width:none !important;
}

.page-product.prod-cat-2 .pro-bw-control{
  width:100% !important;
}

.page-product.prod-cat-2 .pro-bw-control .pro-range-input{
  flex: 1 1 auto;
  width:100% !important;
  min-width: 260px;
}

@media (min-width: 992px){
  .page-product.prod-cat-2 .pro-bw-control .pro-range-input{
    min-width: 420px;
  }
}

/* 快捷选项：网格布局，尽量一行更多项 */
.page-product.prod-cat-2 .pro-pickgrid--bwimg{
  display:grid !important;
  width:100% !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 1199.98px){
  .page-product.prod-cat-2 .pro-pickgrid--bwimg{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px){
  .page-product.prod-cat-2 .pro-pickgrid--bwimg{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 让按钮在网格里自适应，不用固定 min-width */
.page-product.prod-cat-2 .pro-pickgrid--bwimg .pro-pick--bw{
  min-width: 0 !important;
  width: 100%;
}