/* server-buy.css — 云服务器买页配置器专属控件 (与 host 买页同一设计语言, byc-bw-card 卡片框架在 product.css 全局)
   控件清单: 系统盘胶囊 / 0起点分段滑块 / 紧凑步进器 / 磁盘增减 / 数量步进 / 镜像两级下拉 / 密码框(小眼睛) / 防御连续滑块兜底 */

/* ===== Hero 压缩 (只作用 server 买页 --buy 修饰类, 不动 host 买页; 缩小 SVG + 收 inner 内边距, 让配置器更快露出首屏) ===== */
.byc-phero--buy .byc-phero-inner { padding-top: 50px; padding-bottom: 16px; }   /* 顶部留足: header 高约 93 而 phero padding-top 仅 70, 需 inner 再补间距, 否则徽章贴导航 */
.byc-phero--buy .byc-bhero-svg { max-width: 960px; margin: 0 auto; display: block; }   /* 买页 hero 收窄压高 (高约182, 与 host 买页统一): 纯图形 hero 不应占屏过大, 首屏应见配置器 */
.byc-phero--buy .bh-flow-1, .byc-phero--buy .bh-flow-2 { --bh-d: 360px; }   /* 铺满后连接线各段 360 长, 数据流移动距离随之匹配 */
@media (max-width: 700px) { .byc-phero--buy .byc-phero-inner { padding-top: 30px; padding-bottom: 10px; } }

/* ===== 系统盘: [盘片图标 容量 SSD] 胶囊 + 绿色免费赠送徽章 ===== */
.byc-cfg-sysdisk { display: flex; align-items: center; gap: 12px; }
.byc-sysdisk-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 1px solid #a9c2f4; border-radius: var(--byc-r-md, 6px); background: var(--byc-primary-50, #eef4ff); color: var(--byc-primary, #2B6DE8); font-size: 14px; font-weight: 600; }
.byc-sysdisk-ico { width: 16px; height: 16px; flex-shrink: 0; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B6DE8' stroke-width='1.3'%3E%3Crect x='2' y='4' width='12' height='8' rx='1.6'/%3E%3Ccircle cx='11' cy='8' r='1.1' fill='%232B6DE8' stroke='none'/%3E%3C/svg%3E"); }
.byc-sysdisk-gift { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 4px; background: #2bbf6a; color: #fff; font-size: 12px; }

/* ===== 数据盘容器 (多盘纵向排列) ===== */
.byc-cfg-disks { display: flex; flex-direction: column; gap: 16px; }

/* ===== 单盘/带宽控件行: [分段档位滑块] [− 值 单位 +] (数据盘多盘时行尾带删除) =====
   借鉴 cloud: 档位=轨道上可点击的分段格 + 蓝填充区档位白字/外部灰字双层变色(fill overflow 裁出白字层, 两层同布局逐格对齐);
   保留 byc: 响应式宽度 + 方块抓手 + 线性定位(格宽=数值跨度/max); 交互: 点格→跳该档 tick, 拖抓手/轨道→自由微调(snap step) */
.byc-cfg-disk { position: relative; display: flex; align-items: center; gap: 16px; max-width: 720px; }

.byc-seg { position: relative; flex: 1; min-width: 0; height: 40px; padding: 0 8px; user-select: none; touch-action: none; }  /* touch-action:none 防触屏拖动误滚页面 */
.byc-seg-track { position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%); height: 34px; border: 1px solid var(--byc-border, #e8ecf3); border-radius: 4px; background: #fff; cursor: pointer; }
/* 档位分段格: 底层(灰字)撑满轨道; 填充层(白字)由 JS 设宽=轨道内容px, 与底层逐格对齐, 靠 fill 的 overflow:hidden 裁出"填充到哪白字显到哪" */
.byc-seg-items { position: absolute; inset: 0; display: flex; }
.byc-seg-item { box-sizing: border-box; height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; border-left: 1px solid var(--byc-border, #e8ecf3); font-size: 13px; color: var(--byc-text-mut, #8c92a4); white-space: nowrap; overflow: hidden; }
.byc-seg-item:first-child { border-left: none; }
.byc-seg-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; overflow: hidden; background: linear-gradient(90deg, #5b8def, var(--byc-primary, #2B6DE8)); border-radius: 4px 0 0 4px; pointer-events: none; transition: width .07s linear; }
.byc-seg-items--on { right: auto; }                   /* 白层宽由 JS 锁到轨道内容 px, 不随 fill(窄) 收缩; 靠 fill 的 overflow 裁切 */
.byc-seg-items--on .byc-seg-item { color: #fff; border-left-color: rgba(255,255,255,.35); }
.byc-seg-items--on .byc-seg-item:first-child { border-left: none; }
/* 方块抓手 (byc 竖方块 + 双竖纹, 立于轨道之上, z 高于填充) */
.byc-seg-grip { position: absolute; top: 50%; left: 0; width: 16px; height: 40px; border-radius: 3px; background: #fff; border: 1px solid #a9c2f4; box-shadow: 0 1px 5px rgba(20,40,90,.28); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 3px; z-index: 3; cursor: grab; transition: left .07s linear; }
.byc-seg-grip::before, .byc-seg-grip::after { content: ''; width: 0; height: 15px; border-left: 1px solid var(--byc-primary, #2B6DE8); }
/* 拖动进行中: 去缓动让抓手/填充严丝合缝跟指针, 光标 grabbing */
.byc-seg.dragging .byc-seg-grip { cursor: grabbing; }
.byc-seg.dragging .byc-seg-fill, .byc-seg.dragging .byc-seg-grip { transition: none; }

/* ===== 紧凑数值步进器 [− 值 单位 +] ===== */
.byc-cfg-num { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--byc-border, #dfe3ea); border-radius: var(--byc-r-md, 6px); overflow: hidden; flex-shrink: 0; background: #fff; }
.byc-cfg-num > button { width: 30px; border: 0; background: #f5f7fb; color: var(--byc-text, #1a1f36); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; transition: background .15s, color .15s; }
.byc-cfg-num > button:hover { background: var(--byc-primary, #2B6DE8); color: #fff; }
.byc-cfg-num input { width: 60px; border: 0; border-left: 1px solid var(--byc-border, #dfe3ea); text-align: center; font-size: 13px; outline: none; color: var(--byc-text, #1a1f36); }   /* 60px 容纳 3-4 位数不溢出裁切 (46px 时"100"即溢出) */
.byc-cfg-num-unit { display: inline-flex; align-items: center; justify-content: center; width: 24px; color: var(--byc-text-mut, #8c92a4); font-size: 12px; border-left: 1px solid var(--byc-border, #dfe3ea); }   /* 固定宽度: 单位 G/M 字符宽度不同不影响步进器总宽 → 数据盘与带宽滑块严格等宽对齐 */
.byc-cfg-num > button:last-child { border-left: 1px solid var(--byc-border, #dfe3ea); }

/* ===== 磁盘增减行: 虚线胶囊按钮 + 剩余可加块数 ===== */
.byc-cfg-diskctl { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.byc-cfg-diskbtn { padding: 6px 16px; font-size: 13px; color: var(--byc-primary, #2B6DE8); background: #fff; border: 1px dashed #7aa2ee; border-radius: var(--byc-r-md, 6px); cursor: pointer; transition: background .15s, color .15s; }
.byc-cfg-diskbtn:hover { background: var(--byc-primary-50, #eef4ff); }
.byc-cfg-diskbtn:disabled { opacity: .45; cursor: not-allowed; }
.byc-cfg-diskbtn--del { position: absolute; left: 100%; margin-left: 12px; top: 50%; transform: translateY(-50%); color: var(--byc-text-mut, #8c92a4); border-color: var(--byc-border, #cfd6e2); white-space: nowrap; }   /* 绝对定位在行右外, 不占 flex 流 → 数据盘各盘与带宽滑块全等宽对齐 */
.byc-cfg-diskbtn--del:hover { background: #f5f7fb; color: var(--byc-text, #1a1f36); }
.byc-cfg-mut { font-size: 13px; color: var(--byc-text-mut, #8c92a4); }
.byc-cfg-mut b { color: var(--byc-primary, #2B6DE8); }

/* ===== 购买数量步进器 (同款放大 + 单位) ===== */
.byc-cfg-numrow { display: flex; align-items: center; }
.byc-cfg-stepper { display: inline-flex; align-items: center; border: 1px solid var(--byc-border, #dfe3ea); border-radius: var(--byc-r-md, 6px); overflow: hidden; }
.byc-cfg-step { width: 34px; height: 38px; border: 0; background: #f5f7fb; color: var(--byc-text, #1a1f36); font-size: 17px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.byc-cfg-step:hover { background: var(--byc-primary, #2B6DE8); color: #fff; }
.byc-cfg-stepper input { width: 52px; height: 38px; border: 0; border-left: 1px solid var(--byc-border, #dfe3ea); border-right: 1px solid var(--byc-border, #dfe3ea); text-align: center; font-size: 14px; outline: none; }
.byc-cfg-stepper-unit { font-size: 13px; color: var(--byc-text-mut, #8c92a4); margin-left: 8px; }

/* ===== 防御峰值连续滑块 (defense_size 未配档位时的兜底控件) ===== */
.byc-cfg-range { display: flex; align-items: center; gap: 14px; max-width: 440px; }
.byc-cfg-slider { flex: 1; min-width: 0; height: 4px; accent-color: var(--byc-primary, #2B6DE8); cursor: pointer; }
.byc-cfg-rangeval { flex-shrink: 0; min-width: 78px; font-size: 13px; font-weight: 600; color: var(--byc-primary, #2B6DE8); }

/* ===== 系统镜像两级下拉 (类别带品牌图标 → 版本) ===== */
.byc-os-selects { display: flex; flex-wrap: wrap; gap: 12px; }

/* 🔴 卡片默认 overflow:hidden (product.css) 会裁掉下拉悬浮菜单 → 含镜像下拉的卡片放开 overflow, 并显式补回圆角 (原靠 overflow 裁圆角) */
.byc-bw-card:has(.byc-os-selects) { overflow: visible; }
.byc-bw-card:has(.byc-os-selects) .byc-bw-card-side { border-radius: 8px 0 0 8px; }
.byc-bw-card:has(.byc-os-selects) .byc-bw-card-main { border-radius: 0 8px 8px 0; }

/* 自定义下拉 (原生 select 无法给 option 加图标, 故自建): 触发按钮 + 悬浮菜单, 每项可带品牌图标 */
.byc-dd { position: relative; display: inline-block; }
.byc-dd-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; min-width: 200px; padding: 0 12px; border: 1px solid var(--byc-border, #dfe3ea); border-radius: var(--byc-r-md, 6px); background: #fff; font-size: 14px; color: var(--byc-text, #1a1f36); cursor: pointer; }
.byc-dd--wide .byc-dd-btn { min-width: 240px; }
.byc-dd-btn:hover, .byc-dd.open .byc-dd-btn { border-color: var(--byc-primary, #2B6DE8); }
.byc-dd-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.byc-dd-caret { flex-shrink: 0; color: var(--byc-text-mut, #8c92a4); transition: transform .15s; }
.byc-dd.open .byc-dd-caret { transform: rotate(180deg); }
.byc-dd-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #e4e7ed; border-radius: var(--byc-r-md, 6px); box-shadow: 0 4px 16px rgba(20,40,90,.14); z-index: 30; padding: 4px; }
.byc-dd.open .byc-dd-menu { display: block; }
.byc-dd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; font-size: 14px; color: var(--byc-text, #1a1f36); cursor: pointer; white-space: nowrap; }
.byc-dd-item:hover { background: var(--byc-primary-50, #eef4ff); color: var(--byc-primary, #2B6DE8); }
.byc-dd-item.slt { background: var(--byc-primary-50, #eef4ff); color: var(--byc-primary, #2B6DE8); font-weight: 600; }
.byc-dd-item.disabled { color: var(--byc-text-mut, #8c92a4); cursor: default; }

/* 类别图标: 真实品牌 SVG (data-uri), 内联静态 (触发按钮的前导图标 + 菜单每项前导图标共用); JS 按 class_code 归一化设 class (windows/linux/centos/ubuntu/debian/alpine), 未命中显通用主机图标 */
.byc-os-icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a6689' d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zm0 2v12h16V6H4zm2 2h2v2H6V8zm4 0h8v2h-8V8zm-4 4h2v2H6v-2zm4 0h8v2h-8v-2z'/%3E%3C/svg%3E"); }
.byc-dd-item .byc-os-icon { width: 18px; height: 18px; }
.byc-os-icon.windows { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d4' d='M3 5.5l7.5-1v7H3v-6zm0 13l7.5 1v-7H3v6zm8.5 1.2L21 21v-8.5h-9.5v7.2zm0-14.4V13H21V3l-9.5 1.3z'/%3E%3C/svg%3E"); }
.byc-os-icon.linux { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M12.5 2c-1.6 0-2.5 1.5-2.6 3.2 0 .8-.2 1.5-.7 2.2-.6.9-1.5 2-2 3.3-.2.6-.3 1.2-.2 1.8 0 0-.4.5-.8 1.1-.3.4-.7.8-1 1.1-.5.2-.8.4-.8.8-.1.2-.1.4-.1.6 0 .2 0 .4.1.6.1.5.1.9 0 1.2-.3.8-.3 1.4-.1 1.8.2.4.6.6 1.1.7 1 .3 2.3.2 3.4.7 1.1.6 2.3.8 3.2.6.6-.1 1.2-.6 1.5-1.2.7 0 1.5-.3 2.8-.4.9-.1 1.9.3 3.1.2 0 .2.1.3.1.4.5 1 1.4 1.4 2.3 1.3.9-.1 1.9-.6 2.7-1.6.8-.9 2-1.3 2.9-1.8.4-.2.8-.6.8-1 0-.5-.2-1-.9-1.7-.2-.2-.3-.7-.4-1.1-.1-.5-.2-1-.6-1.3-.4-.3-.9-.1-1.4-.1-.7.1-1 .3-1.4.3.5-1.5.3-3-.2-4.3-.6-1.6-1.8-3-2.6-3.9-1-.1-2-2.4-2-4C15 3.5 14.1 2 12.5 2z'/%3E%3C/svg%3E"); }
.byc-os-icon.centos { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23932279' d='M12 2L2 7v10l10 5 10-5V7L12 2z'/%3E%3Cpath fill='%239ccd2a' d='M12 7l-3 1.5V12l3 1.5L15 12V8.5L12 7z'/%3E%3Cpath fill='%23262577' d='M12 13.5L9 12v3.5l3 1.5 3-1.5V12l-3 1.5z'/%3E%3Cpath fill='%23efe128' d='M12 7V2L6 4.5 9 8.5 12 7z'/%3E%3Cpath fill='%2308aae3' d='M9 8.5L6 4.5 2 7v5l4-2.5 3 1.5V8.5z'/%3E%3C/svg%3E"); }
.byc-os-icon.ubuntu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='%23e95420' cx='12' cy='12' r='10'/%3E%3Ccircle fill='%23fff' cx='12' cy='5' r='2'/%3E%3Ccircle fill='%23fff' cx='6' cy='15' r='2'/%3E%3Ccircle fill='%23fff' cx='18' cy='15' r='2'/%3E%3C/svg%3E"); }
.byc-os-icon.debian { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a81d33' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm2.5 14.5c-1 .5-3 .5-4-.5-1.5-1-2-3-1.5-4.5.5-2 2-3 4-3 1 0 2 .5 2.5 1-.5.5-1 1-1.5 1-.5-.5-1-.5-1.5-.5-1.5 0-2.5 1.5-2 3 .5 1.5 2 2 3 1.5.5 0 1-.5 1.5-1 .5.5 1 1 1 1.5-.5.5-1 1-1.5 1.5z'/%3E%3C/svg%3E"); }
.byc-os-icon.alpine { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d597f' d='M5.5 16L1 11l5-5 5 5-5.5 5zm8-5L8 6l5.5-5L19 6l-5.5 5zm4 5L12 11l5.5-5 5.5 5-5.5 5z'/%3E%3C/svg%3E"); }

/* ===== 密码框 (小眼睛内嵌; 仅「设置密码」时显示, 登录密码/确认密码换行竖排, 各带小标签) ===== */
.byc-cfg-pwds { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.byc-cfg-pwd-item { display: flex; align-items: center; gap: 12px; }
.byc-cfg-pwd-lbl { flex-shrink: 0; width: 64px; font-size: 13px; color: var(--byc-text-mut, #8c92a4); }
.byc-pwd-wrap { position: relative; display: inline-block; }
.byc-pwd-wrap input { width: 300px; height: 38px; padding: 0 40px 0 12px; border: 1px solid var(--byc-border, #dfe3ea); border-radius: var(--byc-r-md, 6px); font-size: 14px; outline: none; transition: border-color .15s; }
.byc-pwd-wrap input:focus { border-color: var(--byc-primary, #2B6DE8); }
.byc-pwd-eye { position: absolute; top: 0; right: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--byc-text-mut, #8c92a4); cursor: pointer; }
.byc-pwd-eye:hover { color: var(--byc-primary, #2B6DE8); }

/* ===== 地域行: 套餐 pill + 机房介绍 info 图标 (hover 悬浮显示描述) ===== */
.byc-region-row { display: flex; align-items: center; gap: 10px; }
.byc-region-row .byc-pick-group { flex: 0 1 auto; }               /* 不撑满, 让 info 图标紧随其后 */
.byc-line-info { position: relative; display: inline-flex; align-items: center; color: var(--byc-text-mut, #8c92a4); cursor: help; outline: none; }
.byc-line-info:hover, .byc-line-info:focus { color: var(--byc-primary, #2B6DE8); }
/* 悬浮框显示在图标下方 (地域行紧邻吸顶导航, 朝上会被 header 遮挡) */
.byc-line-tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #1a1f36; color: #fff; font-size: 12px; line-height: 1.5; padding: 5px 10px; border-radius: 6px; opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 20; box-shadow: 0 4px 12px rgba(20,40,90,.25); }
.byc-line-tip::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: #1a1f36; }
.byc-line-info:hover .byc-line-tip, .byc-line-info:focus .byc-line-tip { opacity: 1; visibility: visible; }

/* ===== 时长「N折」角标 (server 买页专属美化): 三档统一橙底白字, 选中态描白边在蓝底上分隔清晰, 顶部留白防角标溢出被裁 ===== */
#byc_period_grid { padding-top: 8px; }
#byc_period_grid .byc-pick-tag { top: -6px; right: -4px; }
#byc_period_grid .byc-pick.slt .byc-pick-tag { background: var(--byc-accent, #FF6A00); color: #fff; box-shadow: 0 0 0 1.5px #fff; }

/* ===== 布局微调: 表单区上下留白收敛 + 控件区最大宽度 (对齐 host 买页) ===== */
.byc-buy-sec.byc-buy-sec { padding-top: 40px; padding-bottom: 40px; }
.byc-bw-form .byc-buy-field-ctrl { max-width: 720px; }

/* 移动端: 滑块行纵向堆叠, 密码项 label 上移单列 */
@media (max-width: 700px) {
  .byc-cfg-disk { flex-wrap: wrap; gap: 10px 12px; }             /* 移动端: 换行布局代替 column+stretch(后者会把步进器拉伸铺满变形错位) */
  .byc-seg { flex: 1 1 100%; }                                    /* 滑块独占整行, 步进器/删除自然换到第二行 */
  .byc-seg-item { font-size: 12px; padding-right: 6px; }          /* 窄屏档位小字 + 收内边距, 给起点抓手腾空间(防压第一档标签) */
  .byc-seg-grip { width: 12px; }                                  /* 窄屏抓手更纤细, 少占第一格 */
  .byc-cfg-diskbtn--del { position: static; margin: 0 0 0 auto; transform: none; }   /* 删除回正常流, 第二行靠右(步进器保持自然宽度靠左) */
  .byc-cfg-pwd-item { flex-direction: column; align-items: stretch; gap: 6px; }
  .byc-cfg-pwd-lbl { width: auto; }
  .byc-pwd-wrap { display: block; }
  .byc-pwd-wrap input { width: 100%; }
}