/* 版权所有 © 八艾云 (www.8a.hk) 保留所有权利 */
/* 虚拟主机购买器沿用云服务器购买页的宽屏配置 + 订单双栏，窄屏按表单顺序回落。 */
.byc-bw-form.byc-host-form {
  width: 100%;
  max-width: none;
  margin: 0;
}

.byc-host-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  column-gap: 24px;
  row-gap: 16px;
  min-width: 0;
}

.byc-host-config-column,
.byc-host-order-column {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.byc-host-order-column {
  position: sticky;
  top: 112px;
}

/* 集中选购先用完整内容宽度承载套餐，再进入配置 + 订单两栏。 */
#bycHostBuyForm[data-requested-id="0"] .byc-host-config-column {
  display: contents;
}

#bycHostBuyForm[data-requested-id="0"] .byc-host-config-column > .byc-bw-card:first-child {
  grid-column: 1 / -1;
  grid-row: 1;
}

#bycHostBuyForm[data-requested-id="0"] .byc-host-config-column > .byc-bw-card:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

#bycHostBuyForm[data-requested-id="0"] .byc-host-config-column > .byc-bw-card:nth-child(3) {
  grid-column: 1;
  grid-row: 3;
}

#bycHostBuyForm[data-requested-id="0"] .byc-host-order-column {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.byc-host-form .byc-host-credentials .byc-bw-input-row {
  width: 100%;
  max-width: 640px;
}

.byc-host-order-card {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

.byc-host-order-card:hover {
  border-color: var(--byc-border);
  box-shadow: none;
}

.byc-host-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--byc-border);
  background: var(--byc-primary-50, #eef4ff);
}

.byc-host-order-head h2 {
  margin: 0;
  color: var(--byc-text);
  font-size: 17px;
  line-height: 1.5;
}

.byc-host-order-head p {
  margin: 2px 0 0;
  color: var(--byc-text-mut);
  font-size: 12px;
  line-height: 1.5;
}

.byc-host-order-status {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--byc-primary);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.byc-host-order-body {
  padding: 0 22px 18px;
}

.byc-host-order-column .byc-bw-summary {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.byc-host-order-column .byc-bw-sum-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid #edf1f6;
}

.byc-host-order-column .byc-bw-sum-item:last-child {
  border-bottom: 0;
}

.byc-host-order-column .byc-bw-sum-k {
  min-width: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
}

.byc-host-order-column .byc-bw-sum-v {
  min-width: 0;
  color: #1d2939;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  text-align: right;
  overflow-wrap: anywhere;
}

.byc-host-order-total {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--byc-border);
}

.byc-host-price-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.byc-host-price-values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 8px;
  min-width: 0;
  text-align: right;
}

.byc-host-price-values .byc-bw-foot-orig {
  margin: 0;
}

.byc-host-price-line .byc-bw-foot-price {
  max-width: 100%;
  color: var(--byc-accent);
  font-size: 26px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.byc-host-order-discount-meta {
  display: block;
  margin-top: 8px;
  color: #b54708;
  font-weight: 600;
  text-align: right;
}

.byc-host-order-card .byc-bw-foot-submit {
  width: 100%;
  height: 48px;
  margin-top: 18px;
  padding: 0 24px;
}

.byc-host-order-note {
  margin: 10px 0 0;
  color: var(--byc-text-mut);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 1099px) {
  .byc-host-checkout {
    grid-template-columns: minmax(0, 1fr);
  }

  .byc-host-order-column {
    position: static;
    top: auto;
  }

  .byc-host-order-column .byc-bw-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  #bycHostBuyForm[data-requested-id="0"] .byc-host-config-column > .byc-bw-card,
  #bycHostBuyForm[data-requested-id="0"] .byc-host-order-column {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 599px) {
  #bycHostBuyForm .byc-host-credentials .byc-buy-field--row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  #bycHostBuyForm .byc-host-credentials .byc-buy-field--row > label {
    width: auto;
    padding-top: 0;
  }

  #bycHostBuyForm .byc-host-credentials .byc-buy-field-ctrl,
  #bycHostBuyForm .byc-host-credentials .byc-bw-input-row {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .byc-host-order-column .byc-bw-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  #bycHostBuyForm[data-requested-id="0"] .byc-host-choice-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #bycHostBuyForm[data-requested-id="0"] .byc-host-choice-row > label {
    width: auto;
    padding-top: 0;
  }

  #bycHostBuyForm[data-requested-id="0"] #byc_product_grid {
    display: flex;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }

  #bycHostBuyForm[data-requested-id="0"] #byc_product_grid .byc-pick {
    flex: 0 0 auto;
    min-width: 150px;
    min-height: 44px;
    scroll-snap-align: start;
  }
}

@media (max-width: 360px) {
  .byc-host-order-head,
  .byc-host-order-body {
    padding-right: 16px;
    padding-left: 16px;
  }

  .byc-host-price-line {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .byc-host-price-values {
    justify-content: flex-start;
    text-align: left;
  }

  .byc-host-order-discount-meta {
    text-align: left;
  }
}


/* ============================================================
   以下整段自 app/view/web/host/buy.html 的内联 <style> 迁入。
   模板里不再留 CSS：内联样式无法被浏览器缓存，也让这一页的样式
   散落在两处。本文件只服务 /host/buy，不与 product.css 混。
   ============================================================ */
/* 划线原价 — 紧贴折后价左侧, 弱化处理不抢主价 */
.byc-bw-foot-orig { margin: 0 8px 0 4px; color: #a3a3a3; font-size: 15px; text-decoration: line-through; }
@media (max-width: 560px) { .byc-bw-foot-orig { font-size: 13px; margin: 0 6px 0 2px; } }

/* 带产品 ID 的购买页锁定当前套餐，避免 URL 与实际提交的 product_id 不一致。 */
.byc-host-direct-package { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 20px; padding: 18px 20px; border: 1px solid #cfe0ff; border-radius: 8px; background: linear-gradient(135deg,#f4f8ff 0%,#fff 100%); }
.byc-host-direct-package[hidden] { display: none; }
#bycHostBuyForm[data-requested-id]:not([data-requested-id="0"]) .byc-host-choice-row { display: none; }
/* 点过「更换套餐」后放行: 直达页也能就地切套餐, 不必跳回列表。
   JS 的 row.hidden 负责「该维度只有一个取值就不占一行」, 两者各管一层。 */
#bycHostBuyForm[data-choosing="1"] .byc-host-choice-row:not([hidden]) { display: flex; }
.byc-host-direct-copy { display: grid; min-width: 0; gap: 4px; }
.byc-host-direct-kicker { color: var(--byc-primary); font-size: 12px; font-weight: 700; line-height: 1.5; }
.byc-host-direct-name { color: var(--byc-text); font-size: 18px; line-height: 1.45; }
.byc-host-direct-meta { color: var(--byc-text-mut); font-size: 13px; line-height: 1.6; }
.byc-host-direct-change { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid #b9d0ff; border-radius: 8px; color: var(--byc-primary); font-size: 14px; font-weight: 700; background: #fff; }
.byc-host-direct-change:hover { border-color: var(--byc-primary); background: #eef5ff; }
.byc-host-direct-change:focus-visible { outline: 3px solid rgba(47,111,237,.24); outline-offset: 2px; }
@media (max-width: 560px) {
  .byc-host-direct-package { align-items: stretch; flex-direction: column; gap: 12px; padding: 16px; }
  .byc-host-direct-change { width: 100%; }
}

/* 320px 下业务标识/密码改为上下标签，并把有限横向空间优先留给输入。 */
@media (max-width: 359px) {
  #bycHostBuyForm .byc-host-credentials .byc-bw-card-side { width: 32px; padding-top: 14px; }
  #bycHostBuyForm .byc-host-credentials .byc-bw-card-main { padding: 16px 10px; }
  #bycHostBuyForm .byc-host-credentials .byc-buy-field--row { flex-direction: column; align-items: stretch; gap: 6px; }
  #bycHostBuyForm .byc-host-credentials .byc-buy-field--row > label { width: auto; padding-top: 0; }
  #bycHostBuyForm .byc-host-credentials .byc-buy-field-ctrl,
  #bycHostBuyForm .byc-host-credentials .byc-bw-input-row { width: 100%; max-width: none; min-width: 0; }
  #bycHostBuyForm .byc-host-credentials .byc-bw-input-row { gap: 6px; }
  #bycHostBuyForm .byc-host-credentials .byc-bw-input-row input { min-width: 180px; height: 44px; box-sizing: border-box; }
  #bycHostBuyForm .byc-host-credentials .byc-bw-rand { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; }
}

.byc-phero--buy .bh-flow-1, .byc-phero--buy .bh-flow-2 { --bh-d: 145px; }  /* 连接线各段约 145 长, 数据流距离随之 */
/* 赠送气泡: absolute 悬浮在时长按钮正上方(带尖角); 卡片 margin-top 给悬浮空间(卡片间距, 非 padding 撑高卡内 → 时长选项位置不变), overflow visible 让气泡突出到卡上方间距, 不挡上方卡 */
/* 气泡的悬浮空间由卡片外边距提供（配合父级 16px gap 共 34px，与原预留等高），
   不再用 #byc_period_grid 的 padding-top 撑高卡内 —— 那会让内容区变成上 54 / 下 20。
   这也正是本段原注释写明的做法：「卡片 margin-top 给悬浮空间，非 padding 撑高卡内」。 */
.byc-bw-card:has(#byc_period_grid) { overflow: visible; margin-top: 18px; }
.byc-bw-card:has(#byc_period_grid) .byc-bw-card-side { border-radius: 8px 0 0 8px; }
.byc-bw-card:has(#byc_period_grid) .byc-bw-card-main { border-radius: 0 8px 8px 0; }
.byc-pick.slt .byc-pick-tag { display: none; }
.byc-pick-group { overflow: visible; }
/* 赠送气泡浮在选中档正上方, 必须给它留出高度:
   不留 → 桌面态压进上面的「购买时长」卡头, 移动端换行后还会盖住上一行按钮(挡住可点文字)。
   固定预留(不随选中档有无赠送而变), 否则切档位时表单会上下跳动。数值与弹性云买页一致。 */
#byc_period_grid { row-gap: 38px; column-gap: 10px; }
/* 这一行是 flex + align-items:flex-start: 上面的 padding-top 只推下按钮组,
   左侧「时长」标签会留在顶上 —— 让它跟着下移才与按钮同基线。
   不加 min-width 断点: 虚机买页的字段行**在窄屏也不堆叠**(375px 下仍是同一行),
   与弹性云/套餐云不同 —— 那两页 ≤700px 会变单列, 补偿要限制在桌面态。 */
.byc-buy-field--row:has(> #byc_period_grid) > label { padding-top: 7px; }
.byc-pick-wrap { position: relative; display: inline-block; }
.byc-gift-bubble { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: linear-gradient(135deg,#ff9a3d,#ff6a00); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 10px; border-radius: 6px; box-shadow: 0 4px 10px rgba(255,106,0,.38); z-index: 10; pointer-events: none; animation: bycGiftFloat 1.8s ease-in-out infinite; }
.byc-gift-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #ff6a00; }
@keyframes bycGiftFloat { 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(-3px); } }

/* 密码显示/隐藏 —— 与「随机」按钮同高同圆角，配色更弱：
   改密码是主动作，看一眼密码是次动作，两个按钮不该等重。 */
.byc-bw-eye {
  flex-shrink: 0; padding: 0 12px; min-width: 52px; height: 44px;
  font-size: 13px; font-family: inherit; color: var(--byc-text-mut);
  background: #fff; border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-md); cursor: pointer; white-space: nowrap;
  transition: var(--byc-trans);
}
.byc-bw-eye:hover { color: var(--byc-primary); border-color: var(--byc-primary); }
.byc-bw-eye[aria-pressed="true"] {
  color: var(--byc-primary); background: var(--byc-primary-50, #eef4ff);
  border-color: var(--byc-primary-100, #d6e7ff);
}
@media (max-width: 359px) {
  #bycHostBuyForm .byc-host-credentials .byc-bw-eye { flex: 0 0 52px; padding: 0; }
}

/* ============ 套餐按系列分组 ============ */
/* 分组后这一格从「一排按钮」变成「若干行」, 主轴改纵向;
   用 :has 只在真的分了组时切换, 单系列仍走原来的横排。 */
#byc_product_grid:has(.byc-pick-series) {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.byc-pick-series { display: flex; align-items: flex-start; gap: 12px; }
/* 系列名原本也用 --byc-text-mut, 跟未选中按钮(.byc-pick)同色 —— 分组标题
   和它统领的选项一样浅, 整片灰扑扑没有层级. 提到二级色 + 500 字重当锚点用. */
.byc-pick-series-name {
  flex: 0 0 92px; padding-top: 7px;
  font-size: 13px; line-height: 1.5; color: var(--byc-text-sec); font-weight: 500;
}
.byc-pick-series-items {
  display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0;
}
@media (max-width: 640px) {
  .byc-pick-series { flex-direction: column; gap: 6px; }
  .byc-pick-series-name { flex: none; padding-top: 0; font-weight: 600; }
}