/**
 * huiwww01 组件样式
 * @see public/web/huiwww01/docs/DESIGN_TOKENS.md
 */

/* ── 按钮 ── */
.hw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--hw-btn-height);
  min-height: var(--hw-btn-height);
  padding: 0 var(--hw-btn-px);
  font-family: var(--hw-font-family);
  font-size: var(--hw-btn-font-size);
  font-weight: var(--hw-font-weight-normal);
  line-height: 1;
  letter-spacing: var(--hw-letter-spacing);
  border-radius: var(--hw-radius-sm);
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}

.hw-btn:not(:disabled):not([disabled]):hover {
  transform: translateY(-2px);
}

.hw-btn:not(:disabled):not([disabled]):active {
  transform: translateY(0);
  box-shadow: none;
}

.hw-btn--lg {
  height: var(--hw-btn-height-lg);
  min-height: var(--hw-btn-height-lg);
  padding: 0 var(--hw-btn-px-lg);
}

.hw-btn--block {
  display: flex;
  width: 100%;
  height: var(--hw-btn-height-lg);
  min-height: var(--hw-btn-height-lg);
  padding: 0 var(--hw-btn-px-lg);
}

.hw-btn--primary {
  color: #fff;
  background: var(--hw-color-accent);
}

.hw-btn--primary:hover {
  color: #fff;
  background: var(--hw-color-accent-hover);
  box-shadow: var(--hw-btn-hover-shadow-accent);
}

.hw-btn--primary:active {
  background: var(--hw-color-accent-active);
}

.hw-btn--banner {
  width: var(--hw-banner-btn-width);
  height: var(--hw-banner-btn-height);
  min-height: var(--hw-banner-btn-height);
  padding: 0;
  font-size: var(--hw-banner-btn-font-size);
  border-radius: var(--hw-radius-xs);
  color: #fff;
  background: var(--hw-banner-btn-bg);
}

.hw-btn--banner:hover {
  color: #fff;
  background: var(--hw-banner-btn-bg-hover);
  box-shadow: var(--hw-btn-hover-shadow-banner);
}

/* ── 页头 Banner Hero（亿速云 index-banner，首页 / 服务器页共用） ── */
.hw-page-banner {
  background-color: var(--hw-banner-bg);
  background-image: linear-gradient(135deg, #F0F4FF 0%, #F7F9FA 100%);
}

.hw-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--hw-banner-content-width)) minmax(280px, var(--hw-banner-img-width));
  align-items: center;
  gap: 24px;
  height: var(--hw-banner-height);
  box-sizing: border-box;
}

.hw-hero-main {
  min-width: 0;
  padding-left: 4px;
}

.hw-hero-title {
  margin: 0;
  font-size: var(--hw-banner-title-size);
  line-height: var(--hw-banner-title-lh);
  font-weight: var(--hw-font-weight-normal);
  color: var(--hw-banner-title-color);
}

.hw-hero-desc {
  margin: var(--hw-banner-desc-mt) 0 0;
  font-size: var(--hw-banner-desc-size);
  line-height: var(--hw-banner-desc-lh);
  color: var(--hw-banner-desc-color);
  max-width: none;
}

.hw-hero-action {
  margin-top: var(--hw-banner-action-mt);
}

.hw-hero-media {
  width: 100%;
  max-width: var(--hw-banner-img-width);
  height: var(--hw-banner-img-height);
  margin: 0;
  justify-self: end;
}

.hw-page-banner > .section-content {
  padding-top: 0;
  padding-bottom: 0;
}

.hw-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 992px) {
  .hw-hero-grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: var(--hw-banner-height);
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hw-hero-main {
    padding-left: 0;
  }

  .hw-hero-title {
    font-size: var(--hw-font-size-4xl);
    line-height: 1.25;
  }

  .hw-hero-desc {
    font-size: var(--hw-font-size-md);
    line-height: var(--hw-line-height-loose);
  }

  .hw-hero-media {
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 640 / 384;
    justify-self: center;
  }
}

.hw-btn--outline {
  color: var(--hw-color-text);
  background: #fff;
  border: 1px solid var(--hw-color-border);
}

.hw-btn--outline:hover {
  color: var(--hw-color-accent);
  border-color: var(--hw-color-accent);
  background: rgba(255, 103, 57, 0.08);
  box-shadow: var(--hw-btn-hover-shadow);
  transform: translateY(-1px);
}

.hw-btn--brand {
  color: #fff;
  background: var(--hw-color-primary);
}

.hw-btn--brand:hover {
  color: #fff;
  background: var(--hw-color-primary-hover);
  box-shadow: var(--hw-btn-hover-shadow);
}

.hw-btn--dark {
  color: #fff;
  background: #414141;
}

.hw-btn--dark:hover {
  color: #fff;
  background: var(--hw-color-accent-hover);
  box-shadow: var(--hw-btn-hover-shadow-accent);
}

.hw-btn:disabled,
.hw-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* default 类名映射（兼容继承页） */
.btn,
.btn-normal,
.btn-normal-light {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hw-btn-height);
  min-height: var(--hw-btn-height);
  padding: 0 var(--hw-btn-px) !important;
  font-size: var(--hw-btn-font-size);
  line-height: 1;
  letter-spacing: var(--hw-letter-spacing);
  border-radius: var(--hw-radius-sm);
}

.btn-normal {
  color: #fff;
  background: var(--hw-color-accent);
}

.btn-normal:hover {
  color: #fff;
  background: var(--hw-color-accent-hover);
  box-shadow: var(--hw-btn-hover-shadow-accent);
  transform: translateY(-2px);
}

.btn-normal-light {
  color: var(--hw-color-text);
  background: #feffff;
  border: 1px solid var(--hw-color-border);
}

.btn-normal-light:hover {
  color: var(--hw-color-accent);
  border-color: var(--hw-color-accent);
  background: rgba(255, 103, 57, 0.08);
  box-shadow: var(--hw-btn-hover-shadow);
  transform: translateY(-1px);
}

/*
 * 覆盖 default/common/theme.css 全局 a:hover { color: #FF6739 !important }
 * theme.css 先于 huiwww01 加载且带 !important，按钮 hover 必须显式夺回字色。
 */
a.hw-btn--primary:hover,
a.hw-btn--banner:hover,
a.hw-btn--brand:hover,
a.hw-btn--dark:hover,
button.hw-btn--primary:hover,
button.hw-btn--banner:hover,
button.hw-btn--brand:hover,
button.hw-btn--dark:hover,
a.btn-normal:hover,
.aside-tools a:hover,
.aside-tools a:hover .button {
  color: #fff !important;
  text-decoration: none !important;
}

a.hw-btn--outline:hover,
button.hw-btn--outline:hover,
a.btn-normal-light:hover {
  color: var(--hw-color-accent) !important;
  text-decoration: none !important;
}

a.hw-btn--primary:hover,
a.hw-btn--banner:hover,
button.hw-btn--primary:hover,
button.hw-btn--banner:hover {
  background: var(--hw-color-accent-hover);
}

a.hw-btn--primary:hover,
button.hw-btn--primary:hover {
  box-shadow: var(--hw-btn-hover-shadow-accent);
}

a.hw-btn--banner:hover,
button.hw-btn--banner:hover {
  background: var(--hw-banner-btn-bg-hover);
  box-shadow: var(--hw-btn-hover-shadow-banner);
}

a.hw-btn--brand:hover,
button.hw-btn--brand:hover {
  background: var(--hw-color-primary-hover);
}

.font-theme {
  color: var(--hw-color-accent);
}

/* ── 通用卡片 ── */
.hw-card {
  padding: 30px;
  background: var(--hw-color-bg);
  border: 1px solid var(--hw-color-border);
  border-radius: var(--hw-radius-sm);
  transition: box-shadow 0.2s;
}

.hw-card:hover {
  box-shadow: var(--hw-shadow-md);
}

.hw-card--service {
  min-height: 191px;
  position: relative;
}

.hw-card--service:hover h4 {
  color: var(--hw-color-accent);
}

/* ── 产品卡片（首页热门套餐） ── */
.hw-card--product {
  position: relative;
  width: var(--hw-card-product-width);
  margin: 10px;
  cursor: pointer;
  font-size: var(--hw-font-size-base);
  border: 2px solid #fff;
  background: #fff;
  box-sizing: border-box;
}

.hw-card--product:hover {
  box-shadow: var(--hw-shadow-md);
}

.hw-card--product:hover h4 {
  color: var(--hw-color-accent);
}

.hw-card__head {
  padding: 21px 20px 20px;
  border-bottom: 1px solid var(--hw-color-border);
  border-radius: var(--hw-radius-sm) var(--hw-radius-sm) 0 0;
  background: linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 100%);
}

.hw-card__head h4 {
  font-size: var(--hw-font-size-2xl);
  color: #000;
  margin: 0;
}

.hw-card__head .hw-card__desc {
  margin-top: 10px;
  font-size: var(--hw-font-size-base);
  color: var(--hw-color-text-secondary);
}

.hw-card__body {
  padding: var(--hw-space-5);
}

.hw-card__config {
  min-height: 138px;
}

.hw-card__config-row {
  display: flex;
  margin-bottom: var(--hw-space-4);
}

.hw-card__config-label {
  width: 113px;
  color: var(--hw-color-text-muted);
  font-size: var(--hw-font-size-base);
}

.hw-card__config-value {
  flex: 1;
  color: var(--hw-color-text);
  font-size: var(--hw-font-size-base);
}

.hw-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hw-card__price {
  color: var(--hw-color-accent);
}

.hw-card__price-num {
  font-size: var(--hw-font-size-3xl);
  font-weight: var(--hw-font-weight-bold);
}

.hw-card__price-origin {
  font-size: var(--hw-font-size-xs);
  color: var(--hw-color-text-muted);
}

.hw-card__badge--promo {
  position: absolute;
  top: 6px;
  right: 2px;
  height: 24px;
  line-height: 24px;
  padding: 0 12px;
  font-size: var(--hw-font-size-xs);
  color: #E2491B;
  background: #FEE2C6;
  border-radius: var(--hw-radius-pill) 0 0 var(--hw-radius-pill);
}

/* ── 套餐块（mf_cloud / zzidc_host cart 皮肤覆盖） ── */
.huiwww01-cart .cloud-box,
.mf-cloud.huiwww01-cart .cloud-box {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}

.huiwww01-cart .cloud-box .cloud-item,
.mf-cloud.huiwww01-cart .cloud-box .cloud-item {
  width: var(--hw-cloud-item-width);
  margin: 5px;
  border: 1px solid var(--hw-color-border);
  border-radius: var(--hw-radius-sm);
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

.huiwww01-cart .cloud-box .cloud-item.active,
.mf-cloud.huiwww01-cart .cloud-box .cloud-item.active {
  border-color: var(--hw-color-primary);
}

.huiwww01-cart .cloud-box .cloud-item.active .top,
.mf-cloud.huiwww01-cart .cloud-box .cloud-item.active .top {
  background: var(--hw-color-primary-light);
  color: var(--hw-color-primary);
}

.huiwww01-cart .cloud-box .cloud-item .top,
.mf-cloud.huiwww01-cart .cloud-box .cloud-item .top {
  line-height: 46px;
  padding: 0 26px;
  background: var(--hw-color-bg-muted);
  font-size: var(--hw-font-size-base);
  color: var(--hw-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.huiwww01-cart .cloud-box .cloud-item .top .top-tag,
.mf-cloud.huiwww01-cart .cloud-box .cloud-item .top .top-tag {
  background: var(--hw-color-primary);
  color: #fff;
}

.huiwww01-cart .cloud-box .cloud-item .inner,
.mf-cloud.huiwww01-cart .cloud-box .cloud-item .inner {
  padding-bottom: 30px;
}

.huiwww01-cart .cloud-box .info,
.mf-cloud.huiwww01-cart .cloud-box .info {
  padding: 10px 26px;
}

.huiwww01-cart .cloud-box .info p,
.mf-cloud.huiwww01-cart .cloud-box .info p {
  line-height: 24px;
  color: var(--hw-color-text);
  display: flex;
  margin: 0;
}

.huiwww01-cart .cloud-box .info .name,
.mf-cloud.huiwww01-cart .cloud-box .info .name {
  color: var(--hw-color-text-secondary);
  width: 90px;
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 订购页价格栏 ── */
.hw-price-bar {
  position: sticky;
  top: calc(var(--hw-nav-height) + var(--hw-space-5));
  width: var(--hw-price-bar-width);
  padding: var(--hw-space-6);
  background: var(--hw-color-bg);
  border: 1px solid var(--hw-color-border);
  border-radius: var(--hw-radius-md);
  box-shadow: var(--hw-shadow-sm);
  box-sizing: border-box;
}

.hw-price-bar__total {
  font-size: var(--hw-font-size-3xl);
  font-weight: var(--hw-font-weight-bold);
  color: var(--hw-color-accent);
}

.hw-price-bar__detail {
  margin-top: var(--hw-space-4);
  font-size: var(--hw-font-size-base);
  color: var(--hw-color-text-secondary);
}

.hw-price-bar__actions {
  display: flex;
  flex-direction: column;
  gap: var(--hw-space-3);
  margin-top: var(--hw-space-6);
}

/* ── 区块 ── */
.hw-section-title {
  text-align: center;
}

.hw-section-title h2 {
  font-size: var(--hw-font-size-4xl);
  color: var(--hw-color-text);
  margin: 0;
}

.hw-section-desc {
  margin-top: var(--hw-space-4);
  font-size: var(--hw-font-size-md);
  color: var(--hw-color-text-secondary);
}

.hw-section--dark {
  background: var(--hw-color-dark);
  color: var(--hw-color-text-inverse);
}

.hw-section--dark .hw-section-desc {
  color: var(--hw-color-text-inverse);
}

.hw-section-content {
  max-width: var(--hw-container-max);
  margin: 0 auto;
  padding: var(--hw-space-20) var(--hw-container-padding);
}

/* ── 标签 ── */
.hw-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--hw-space-3);
  font-size: var(--hw-font-size-xs);
  color: var(--hw-color-text-secondary);
  background: var(--hw-color-bg-muted);
  border: 1px solid var(--hw-color-border-light);
  border-radius: var(--hw-radius-xs);
}

.hw-tag--accent {
  color: var(--hw-color-accent);
  border-color: var(--hw-color-accent);
}

.hw-tag--primary {
  color: var(--hw-color-primary);
  border-color: var(--hw-color-primary);
}

/* ── 导航增强（阶段 1 使用） ── */
.hw-nav.nav-shadow {
  box-shadow: var(--hw-shadow-nav);
}

/* ── v-cloak 全局兜底 ── */
[v-cloak] {
  display: none !important;
}

/* ── 响应式：订购页 ── */
@media (max-width: 992px) {
  .hw-price-bar {
    position: relative;
    top: auto;
    width: 100%;
    margin-top: var(--hw-space-6);
  }

  .huiwww01-cart .cloud-box .cloud-item,
  .mf-cloud.huiwww01-cart .cloud-box .cloud-item {
    width: calc(50% - 10px);
  }
}

@media (max-width: 576px) {
  .hw-card--product {
    width: 100%;
    margin: 10px 0;
  }

  .huiwww01-cart .cloud-box .cloud-item,
  .mf-cloud.huiwww01-cart .cloud-box .cloud-item {
    width: 100%;
  }
}