/* 订购配置器（/{lang}/configure）——视觉基准：穹顶空天官网.pdf 第 1-5 页 */
/* 价格字体：与 PDF 一致的几何粗黑数字（Archivo Black，本地 woff2） */
@font-face {
  font-family: "Archivo Black";
  src: url("/assets/fonts/ArchivoBlack-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* 整个选择区域为一整块灰色渐变（左灰右白），全宽顶边，白色配置卡片浮在右侧 */
.cfg-hero {
  position: relative;
  display: grid; grid-template-columns: 1fr minmax(360px, 420px); gap: 30px; align-items: stretch;
  width: 100%; margin: 0; padding: 96px 6vw 64px;
  background: linear-gradient(100deg, #c9cdd3 0%, #dcdfe3 40%, #f2f3f5 78%, #fafbfc 100%);
  overflow: hidden; min-height: 720px;
}
/* 左侧预览区：大标题 + 白色水印 + 整机图 + 免责声明（透明底，靠父级灰渐变） */
.cfg-preview {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 620px; padding: 48px 20px 48px 34px;
}
.cfg-title {
  position: relative; z-index: 2; color: #10141c; font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 800; letter-spacing: .02em; line-height: 1.3; margin: 0 0 4px;
}
.cfg-watermark {
  position: relative; z-index: 1; display: block; width: 78%; max-width: 660px;
  margin: 0 auto -56px;  /* 与飞机图同轴居中；负边距让飞机图上移、遮住水印下部（与 PDF 一致） */
  opacity: .9; pointer-events: none; user-select: none;
}
.cfg-plane-wrap {
  position: relative; z-index: 2; width: 100%; max-width: 900px; margin: 0 auto;
  aspect-ratio: 1600 / 510;  /* 锁定比例：切颜色时容器高度不变，页面不跳 */
}
.cfg-plane {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .28));
  transition: opacity .25s ease;
}
.cfg-disclaimer {
  position: absolute; bottom: 22px; left: 0; right: 0; text-align: center;
  font-size: 12px; color: #6b7280; margin: 0;
}
/* 右侧面板：白色卡片浮起，偏小 */
.cfg-panel {
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 16, 31, .22);
  display: flex; flex-direction: column; min-height: 560px;
  z-index: 2;
}
.cfg-tabs { display: flex; background: #0d1424; }
.cfg-tab {
  flex: 1; padding: 15px 8px; background: none; border: none; color: rgba(255, 255, 255, .55);
  font-size: 14.5px; letter-spacing: .05em; position: relative; transition: color .2s ease;
}
.cfg-tab:hover { color: #fff; }
.cfg-tab.active { color: #fff; }
.cfg-tab.active::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px;
  background: #fff; border-radius: 2px;
}
.cfg-step { display: none; flex-direction: column; flex: 1; padding: 30px 34px 34px; }
.cfg-step.active { display: flex; }
.cfg-step-title { text-align: center; font-size: 19px; color: #10141c; font-weight: 700; }
.cfg-step-sub { text-align: center; font-size: 12.5px; color: #8a93a3; margin: 6px 0 22px; }
/* 本页页头保持深色（navbar 初始为透明，浅色页面上需要强制深色） */
.navbar { background: rgba(4, 8, 16, .92); backdrop-filter: blur(14px); box-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
/* 步骤 1：机型条 */
.cfg-edition {
  position: relative; display: flex; align-items: center; justify-content: flex-start;
  border-radius: 12px; padding-block: 14px; padding-inline: 26px 18px; cursor: pointer; transition: transform .2s ease;
}
.cfg-edition img { height: 34px; width: auto; }
/* 机型条：未选中浅灰底深 logo，选中黑底白 logo；标签常显渐变（圆角） */
.cfg-edition { background: #e9ebef; }
.cfg-edition.active { background: #0b0f18; box-shadow: 0 0 0 2px var(--accent-2, #2ea7e8), 0 8px 22px rgba(0, 0, 0, .3); }
.cfg-edition-tag {
  position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
  padding: 3px 6px; border-radius: 7px; width: 100px; box-sizing: border-box;
  text-align: center; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
/* 标准版银色标签：左银右白渐变 + 扫光闪烁 */
.cfg-edition-tag.silver {
  background: linear-gradient(100deg, #787e89 0%, #a6acb6 30%, #d4d8dd 55%, #ffffff 78%, #c6cad1 100%);
  color: #14181f;
  box-shadow: 0 2px 12px rgba(90, 98, 110, .5);
  overflow: hidden; isolation: isolate;
}
.cfg-edition-tag.silver::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%);
  transform: translateX(-130%);
}
/* 扫光仅在选中时播放一次 */
.cfg-edition.active .cfg-edition-tag.silver::after,
.cfg-edition.active .cfg-edition-tag.gold::after {
  animation: cfgGoldShine 1.6s ease-out 1 forwards;
}
/* 精英版金色标签：左金右白渐变 + 扫光闪烁 */
.cfg-edition-tag.gold {
  background: linear-gradient(100deg, #b8860b 0%, #d9b44a 30%, #f3e39a 55%, #fffdf0 78%, #eccf63 100%);
  color: #3a2c05;
  box-shadow: 0 2px 12px rgba(184, 134, 11, .5);
  overflow: hidden; isolation: isolate;
}
.cfg-edition-tag.gold::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%);
  transform: translateX(-130%);
}
@keyframes cfgGoldShine {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}
.cfg-edition-soon {
  position: absolute; left: 14px; top: 8px; font-size: 11px; color: #8a93a3; letter-spacing: .08em;
}
.cfg-edition-spec { text-align: center; font-size: 11.5px; color: #8a93a3; margin: 8px 0 20px; letter-spacing: .02em; }
/* 步骤 2：圆形色卡（两排，一排三个） */
.cfg-swatches {
  display: grid; grid-template-columns: repeat(3, 66px); justify-content: center;
  gap: 22px 26px; margin-bottom: 26px;
}
.cfg-swatch {
  width: 66px; height: 66px; padding: 0; border-radius: 50%; overflow: hidden;
  border: 3px solid transparent; background: none; cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cfg-swatch img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cfg-swatch:hover { transform: scale(1.07); }
.cfg-swatch.active {
  border-color: #0b0f18; box-shadow: 0 0 0 3px #fff inset, 0 8px 18px rgba(0, 0, 0, .18);
}
/* 桨叶/定制图卡（一排三个） */
.cfg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.cfg-card {
  width: auto; min-width: 0; background: #f5f6f8; border: 2px solid transparent; border-radius: 10px;
  padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: border-color .2s ease, transform .2s ease;
}
.cfg-card img { width: 100%; height: 74px; object-fit: cover; border-radius: 6px; }
.cfg-card-name { font-size: 12px; color: #10141c; font-weight: 600; text-align: center; }
.cfg-card .cfg-check {
  position: relative; width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid #c9cfd9; background: #fff;
  transition: all .2s cubic-bezier(.34, 1.56, .64, 1);
}
.cfg-card.active .cfg-check {
  border-color: transparent;
  background: linear-gradient(135deg, #35c3ff, #1e8fe0);
  box-shadow: 0 3px 10px rgba(30, 143, 224, .4);
  transform: scale(1.05);
}
.cfg-card.active .cfg-check::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='white' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.cfg-card.active { border-color: #0b0f18; background: #fff; }
.cfg-card:hover { transform: translateY(-3px); }
.cfg-card-price { font-size: 11.5px; font-weight: 700; color: var(--c-orange, #e88a1a); letter-spacing: .02em; }
.cfg-price-note { text-align: center; font-size: 12px; color: #8a93a3; margin: 0 0 14px; }
/* 价格与按钮 */
.cfg-price { text-align: center; margin: auto 0 20px; padding-top: 18px; }
.cfg-price-tax { display: block; font-size: 12px; color: #8a93a3; margin-bottom: 2px; }
.cfg-price-num {
  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(28px, 2.4vw, 38px); font-weight: 400; color: #10141c;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.cfg-price-unit { font-size: 15px; font-weight: 700; color: #10141c; margin-left: 4px; }
.cfg-btn {
  padding: 13px 20px; border-radius: 8px; font-size: 15px; font-weight: 600;
  border: 1px solid #10141c; background: #fff; color: #10141c; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.cfg-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .15); }
.cfg-btn-primary { background: #0b0f18; color: #fff; }
.cfg-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.cfg-nav { display: flex; gap: 12px; }
.cfg-nav .cfg-btn { flex: 1; }
.cfg-nav-actions { margin-top: auto; }
.cfg-nav-actions .cfg-btn { flex: 1; padding: 13px 10px; font-size: 13.5px; }
/* 汇总 */
.cfg-summary-name { text-align: left; font-size: 20px; font-weight: 800; color: #10141c; margin-bottom: 6px; }
.cfg-step[data-step="summary"] .cfg-price { text-align: left; margin: 0 0 8px; padding-top: 0; }
.cfg-step[data-step="summary"] .cfg-price-num { font-size: 38px; }
.cfg-summary-heading {
  font-size: 13px; color: #8a93a3; letter-spacing: .08em;
  border-bottom: 1px solid #e3e6eb; padding-bottom: 10px; margin: 10px 0 4px;
}
.cfg-summary-list { list-style: none; margin: 0 0 22px; }
.cfg-summary-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 2px; font-size: 14.5px; color: #4b5563; border-bottom: 1px dashed #eceef1;
}
.cfg-summary-list li strong { color: #10141c; font-weight: 700; }
/* 响应式 */
@media (max-width: 1100px) {
  .cfg-hero { grid-template-columns: 1fr; padding: 84px 20px 48px; min-height: auto; }
  .cfg-preview { min-height: 420px; }
  .cfg-panel { min-height: auto; }
}
@media (max-width: 860px) {
  .cfg-hero { padding: 78px 16px 40px; }
  .cfg-preview { padding: 30px 10px; min-height: 340px; }
  .cfg-watermark { top: 84px; }
  .cfg-step { padding: 22px 18px 24px; }
  .cfg-swatch { width: 54px; height: 54px; }
  .cfg-card { width: 104px; }
}