/* ============================================================
   Cart2 Step 3 - 产品配置页首轮重构
   覆盖旧 configureproduct.css 的蓝色小票风，逐步对齐 candycake 设计规范 v1。
   ============================================================ */

.cc-config-page {
  position: relative;
  /* 不再使用 overflow: hidden：
     - 该值会让本元素成为 .cc-receipt(position:sticky) 的滚动容器，导致右侧小票被卡在卡片范围内；
     - 也会裁掉子元素的阴影 / 动画 transform / 任何意外溢出，从而看上去"高度不随内容自适应"。
     卡片高度本身由 in-flow 子元素撑开（没有显式 height），径向渐变背景会被
     border-radius 自动按圆角裁剪，无需依赖 overflow。 */
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background:
    radial-gradient(circle at 18% 8%, rgba(38, 202, 153, .16), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(158, 236, 211, .26), transparent 30%),
    linear-gradient(180deg, #f5fffb 0%, #fff 36%, #f7fcfa 100%);
  box-shadow: var(--cc-shadow-soft);
}

.cc-config-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 装饰性网格 + 顶部渐入遮罩；用自身 border-radius + mask 即可贴合卡片边界，
     不依赖父级 overflow: hidden 来裁剪。 */
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(18, 166, 124, .04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 166, 124, .04) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .58), transparent 72%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .58), transparent 72%);
}

.cc-config-page > * {
  position: relative;
  z-index: 1;
}

.cc-config-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: center;
  padding: 48px 40px 12px;
}

.cc-config-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(var(--cc-brand-rgb), .14);
  border-radius: 999px;
  background: linear-gradient(135deg, #f0fbf7, var(--cc-brand-soft));
  color: var(--cc-brand-dark);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
}

.cc-config-kicker i {
  color: var(--cc-brand);
  font-size: 16px;
}

.cc-config-page-title {
  max-width: 880px;
  margin: 0 0 12px;
  color: var(--cc-text);
  font-size: clamp(34px, 3.2vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.cc-config-page-title .title-accent {
  background: linear-gradient(135deg, var(--cc-brand), var(--cc-brand-strong));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cc-config-page-sub {
  max-width: 760px;
  margin: 0;
  color: #526961;
  font-size: 16px;
  line-height: 1.85;
}

.cc-config-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cc-config-hero-points span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(var(--cc-brand-rgb), .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--cc-brand-dark);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(25, 105, 82, .06);
}

.cc-config-hero-card {
  min-height: 182px;
  padding: 24px;
  border: 1px solid rgba(213, 237, 229, .92);
  border-radius: var(--cc-radius-lg);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 45px rgba(32, 132, 101, .12);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cc-hero-card-icon {
  display: inline-flex;
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: linear-gradient(135deg, #effff9, #d9f8ee);
  color: var(--cc-brand-dark);
  font-size: 30px;
}

.cc-config-hero-card strong {
  color: var(--cc-text);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.cc-config-hero-card em {
  margin-top: 4px;
  color: var(--cc-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cc-config-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 28px;
  min-height: auto;
  padding: 28px 40px 40px;
}

.cc-breadcrumb {
  margin-bottom: 16px;
  color: var(--cc-muted);
}

.cc-breadcrumb a:hover {
  color: var(--cc-brand-dark);
}

.cc-config-tip {
  border-color: rgba(var(--cc-brand-rgb), .24);
  border-radius: var(--cc-radius);
  background: linear-gradient(135deg, var(--cc-brand-bg), var(--cc-brand-soft));
  box-shadow: 0 12px 28px rgba(25, 105, 82, .06);
}

.cc-config-tip-icon {
  background: linear-gradient(135deg, var(--cc-brand), var(--cc-brand-strong));
  box-shadow: 0 8px 20px rgba(var(--cc-brand-rgb), .24);
}

.cc-receipt-card {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 40px rgba(25, 105, 82, .08);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* .cc-config-card 仅作为 Tab/价格 JS 的钩子容器，外观完全透明：
   不再渲染矩形卡片（背景/边框/阴影/裁剪），让内部 .cc-config-body
   直接落在 .cc-config-page 这层卡片上。蓝色 .cc-config-header
   已从 tpl 中移除，无需在这里再做覆盖。 */
.cc-config-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  overflow: visible;
}

.cc-config-header {
  padding: 26px 28px;
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 255, 255, .26), transparent 28%),
    linear-gradient(135deg, var(--cc-brand), var(--cc-brand-strong));
}

.cc-config-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.cc-config-title-icon {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .22);
}

.cc-config-subtitle {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .cc-config-hero,
  .cc-config-wrap {
    grid-template-columns: 1fr;
  }

  .cc-config-hero-card {
    display: none;
  }

  .cc-config-sidebar {
    width: 100%;
    max-width: none;
  }

  .cc-receipt {
    position: static;
  }
}

@media (max-width: 760px) {
  .cc-config-page {
    border-radius: var(--cc-radius);
  }

  .cc-config-hero {
    padding: 32px 20px 4px;
  }

  .cc-config-wrap {
    padding: 20px;
  }

  .cc-config-page-title {
    font-size: 34px;
  }

  .cc-config-page-sub {
    font-size: 14px;
  }

  .configureproduct {
    padding: 14px 0;
  }
}

@media (max-width: 520px) {
  .cc-config-hero,
  .cc-config-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .cc-config-page-title {
    font-size: 30px;
  }

  .cc-config-hero-points {
    display: grid;
  }

  .cc-password-group,
  .cc-range-container {
    align-items: stretch !important;
    flex-direction: column;
  }

  .cc-password-input,
  input.configoption_range {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-config-card,
  .cc-receipt,
  .cc-stepbar-item--current .cc-stepbar-node {
    animation: none !important;
  }
}