/* 版权所有 © 八艾云 (www.8a.hk) 保留所有权利 */
/* host-index.css — /host/ 虚机列表页专属样式
 *
 * 只服务 web/host/index.html 这一页，不与其它页面共享。
 * 命名统一 byc-hl-*（host list），与 product.css 的 byc-pcard-*（server/cloud、
 * ssl/index 仍在用）完全隔开，互不覆盖。
 * 公共部分（.byc-container / .byc-sec / .byc-phero / .byc-sec-head）继续走
 * base.css 与 product.css，本文件不重复定义。
 */

/* ============ 系列切换：胶囊按钮组 ============ */
.byc-hl-cats-sec{background:#fff;border-bottom:1px solid var(--byc-border);
  position:sticky;top:70px;z-index:900}
.byc-hl-cats{display:flex;align-items:center;gap:10px;padding:14px 0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.byc-hl-cats::-webkit-scrollbar{display:none}
.byc-hl-cat{display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;font-size:14px;line-height:1.4;color:var(--byc-text-sec);
  background:#fff;border:1px solid var(--byc-border);border-radius:var(--byc-r-md);
  white-space:nowrap;transition:var(--byc-trans)}
.byc-hl-cat svg{width:15px;height:15px;flex-shrink:0}
.byc-hl-cat:hover{border-color:var(--byc-primary);color:var(--byc-primary);
  background:var(--byc-primary-50)}
.byc-hl-cat.is-active{background:var(--byc-primary);border-color:var(--byc-primary);
  color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(43,109,232,.25)}
.byc-hl-cat.is-active:hover{background:var(--byc-primary-dark);color:#fff}

/* ============ 筛选面板 ============ */
/* 系列 tab 与筛选面板同属「缩小范围」，中间不留区块级间距 */
.byc-hl-sec{padding-top:28px}
.byc-hl-filter{background:#fff;border:1px solid var(--byc-border);
  border-radius:var(--byc-r-lg);padding:8px 24px 20px;box-shadow:var(--byc-sd-sm)}
.byc-hl-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;
  border-bottom:1px dashed var(--byc-border)}
.byc-hl-row:last-of-type{border-bottom:none}
.byc-hl-key{flex-shrink:0;width:78px;font-size:13.5px;color:var(--byc-text-mut);
  line-height:32px}
.byc-hl-vals{display:flex;flex-wrap:wrap;gap:8px}
.byc-hl-opt{padding:6px 16px;min-width:64px;text-align:center;font-size:13.5px;
  color:var(--byc-text-sec);background:#fff;border:1px solid var(--byc-border);
  border-radius:var(--byc-r-sm);transition:var(--byc-trans);cursor:pointer;
  font-family:inherit;line-height:1.5}
.byc-hl-opt:hover{border-color:var(--byc-primary);color:var(--byc-primary)}
.byc-hl-opt.is-on{border-color:var(--byc-primary);color:var(--byc-primary);
  background:var(--byc-primary-50);font-weight:600}
/* 当前条件下无结果的选项置灰，避免点进去空列表 */
.byc-hl-opt.is-void{color:var(--byc-text-mut);opacity:.45;cursor:not-allowed}
.byc-hl-opt.is-void:hover{border-color:var(--byc-border);color:var(--byc-text-mut)}

.byc-hl-sum{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--byc-border);font-size:13.5px}
.byc-hl-sum-k{color:var(--byc-text-mut)}
.byc-hl-crumb{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  background:var(--byc-primary-50);border:1px solid var(--byc-primary-100);
  border-radius:var(--byc-r-sm);color:var(--byc-primary);font-size:13px}
.byc-hl-crumb button{color:var(--byc-primary);font-size:14px;line-height:1;
  opacity:.6;border:none;background:none;cursor:pointer;padding:0 2px}
.byc-hl-crumb button:hover{opacity:1}
.byc-hl-clear{margin-left:auto;color:var(--byc-text-mut);font-size:13px;
  border:none;background:none;cursor:pointer;font-family:inherit}
.byc-hl-clear:hover{color:var(--byc-primary)}

/* ============ 结果条 + 排序 ============ */
.byc-hl-bar{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin:24px 0 18px;font-size:13.5px;color:var(--byc-text-sec)}
.byc-hl-bar b{color:var(--byc-primary);font-weight:700;font-variant-numeric:tabular-nums}
.byc-hl-sortwrap{display:flex;align-items:center;gap:10px}
.byc-hl-sort-k{font-size:13.5px;color:var(--byc-text-mut);white-space:nowrap;flex-shrink:0}
/* 排序是次级控件：浅底分段 + 选中项浮起，不跟系列胶囊抢注意力 */
.byc-hl-sorts{display:inline-flex;padding:3px;background:var(--byc-bg-light);
  border:1px solid var(--byc-border);border-radius:var(--byc-r-md);gap:2px}
.byc-hl-sort{padding:6px 16px;border-radius:6px;color:var(--byc-text-sec);
  font-size:13.5px;line-height:1.5;white-space:nowrap;transition:var(--byc-trans);
  border:none;background:none;cursor:pointer;font-family:inherit}
.byc-hl-sort:hover{color:var(--byc-primary)}
.byc-hl-sort.is-on{background:#fff;color:var(--byc-primary);font-weight:600;
  box-shadow:var(--byc-sd-sm)}

/* ============ 套餐卡片 ============ */
.byc-hl-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.byc-hl-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.byc-hl-grid{grid-template-columns:repeat(4,1fr)}}

/* ⚠ 不要给卡片加 overflow:hidden —— 它会把内部灰块裁到 border-box 圆角上，
   而灰块背景画到 padding-box，两者差 1px，渲染舍入后灰块会吃掉左右边框。
   同理，卡内任何分区都不要再铺 background:#fff：直角白块会糊在圆角弧线上，
   把四角的边框盖掉，看起来就是边框不闭合。卡片自身的白底已被圆角正确裁过。 */
.byc-hl-card{position:relative;background:#fff;border:1px solid var(--byc-border);
  border-radius:var(--byc-r-lg);display:flex;flex-direction:column;
  transition:var(--byc-trans)}
.byc-hl-card:hover{border-color:var(--byc-primary);box-shadow:var(--byc-sd-md);
  transform:translateY(-3px)}
.byc-hl-card.is-hide{display:none}
/* 分页翻页隐藏: 与筛选的 is-hide 分开, 两者是独立的两层过滤 */
.byc-hl-card.is-page-hide{display:none}

.byc-hl-hd{padding:36px 16px 30px;text-align:center}
.byc-hl-hd h3{font-size:16px;font-weight:700;line-height:1.4;color:var(--byc-text)}

.byc-hl-flag{position:absolute;top:0;right:0;padding:3px 10px;font-size:11px;
  font-weight:600;color:#fff;background:var(--byc-accent);
  border-bottom-left-radius:var(--byc-r-md);border-top-right-radius:11px}
.byc-hl-flag.is-blue{background:var(--byc-primary)}

/* 规格宫格：3 列 × 2 行，灰块只出现在卡片内部 */
.byc-hl-specs{display:grid;grid-template-columns:repeat(3,1fr);flex:1;
  background:var(--byc-bg-light)}
.byc-hl-spec{text-align:center;padding:22px 4px}
/* 灰块上的分隔线走白色，比描边更轻 */
.byc-hl-spec:nth-child(-n+3){border-bottom:1px solid #fff}
/* 规格值统一墨色不上色 —— 一屏几十张卡，多一种颜色就多一层噪音；
   字重 600 而非 700，避免六个值糊成一片跟标题抢 */
.byc-hl-spec b{display:block;font-size:15px;font-weight:600;color:var(--byc-text);
  line-height:1.3;font-variant-numeric:tabular-nums}
.byc-hl-spec span{display:block;margin-top:2px;font-size:12px;color:var(--byc-text-mut)}

.byc-hl-ft{padding:26px 16px;text-align:center}
.byc-hl-price{display:flex;align-items:baseline;justify-content:center;gap:2px;
  margin-bottom:20px;font-variant-numeric:tabular-nums}
.byc-hl-price i{font-style:normal;font-size:15px;font-weight:700;color:var(--byc-accent)}
.byc-hl-price b{font-size:28px;font-weight:700;color:var(--byc-accent);line-height:1}
.byc-hl-price span{font-size:12.5px;color:var(--byc-text-mut)}
/* 描边用浅蓝，静态下线条不压手；hover 才收成主蓝 */
.byc-hl-buy{display:block;padding:10px;border-radius:var(--byc-r-sm);font-size:14px;
  font-weight:500;color:var(--byc-primary);border:1px solid var(--byc-primary-100);
  transition:var(--byc-trans)}
.byc-hl-buy:hover{background:var(--byc-primary);border-color:var(--byc-primary);color:#fff}
.byc-hl-card.is-hot .byc-hl-buy{background:var(--byc-primary);
  border-color:var(--byc-primary);color:#fff;font-weight:600}
.byc-hl-card.is-hot .byc-hl-buy:hover{background:var(--byc-primary-dark);
  border-color:var(--byc-primary-dark)}

/* ============ 空态 ============ */
.byc-hl-empty{display:none;padding:56px 24px;text-align:center;background:#fff;
  border:1px solid var(--byc-border);border-radius:var(--byc-r-lg)}
.byc-hl-empty.is-on{display:block}
.byc-hl-empty p{font-size:14.5px;color:var(--byc-text-sec);margin-bottom:16px}
.byc-hl-empty button{padding:9px 22px;font-size:14px;font-weight:600;
  color:#fff;background:var(--byc-primary);border:none;border-radius:var(--byc-r-md);
  cursor:pointer;font-family:inherit;transition:var(--byc-trans)}
.byc-hl-empty button:hover{background:var(--byc-primary-dark)}

/* ============ 窄屏 ============ */
@media(max-width:767px){
  .byc-hl-cats-sec{position:static}
  .byc-hl-row{flex-direction:column;gap:8px}
  .byc-hl-key{width:auto;line-height:1.5}
  .byc-hl-bar{flex-direction:column;align-items:flex-start}
  .byc-hl-sorts{width:100%;overflow-x:auto}
  .byc-hl-hd{padding:26px 16px 22px}
  .byc-hl-spec{padding:18px 4px}
}

/* 分页条 —— 复用 content.css 的 .byc-page-nav/.byc-page-btn, 这里只补按钮态
   (那套是给 <a> 写的, 前端分页用的是 <button>) 和空时自动收起。 */
.byc-hl-pager{margin:32px 0 0}
.byc-hl-pager:empty{display:none}
.byc-hl-pager .byc-page-btn{font-family:inherit;cursor:pointer}
.byc-hl-pager .byc-page-btn.is-disabled{cursor:not-allowed}

/* 配置对照表跟随列表: 非当前页的套餐整列收起 (th 和每行的 td 都要, 表格没有列选择器) */
.byc-specs [data-hp-id].is-hide{display:none}

/* ===== /db/ 列表页 =====
   区块标题居中, 与 /host/ 一致。db 页外层带 .byc-product-page,
   product.css 把 .byc-sec-head 定成 max-width:780 + 左对齐, 这里改回来。
   只用 .byc-db-page 限定, 不影响同样带 .byc-product-page 的 idc/network/ssl/baremetal/mail。 */
.byc-db-page .byc-sec-head {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* 副标题同理: product.css 把 base 的 margin:0 auto 顶成了 0, 得显式拿回来 */
.byc-db-page .byc-sec-desc {
  margin-left: auto;
  margin-right: auto;
}