/* ---------- section-steps.css — 开户步骤（左配图 + 右侧编号手风琴，参考客户稿） ----------
   结构：居中标题（em 朱砂强调）→ 双栏 grid：
    左 = 插画浮层（token 配色）
    右 = 编号手风琴：编号圆（奇数 --up / 偶数 --pri2 交替）→ 白卡（标题常显 + 箭头，
         展开转「v」显示副标）。令牌：G §13，禁裸 hex */

.lf-page-steps {
  padding-block: var(--space-12);
}

.lf-page-steps__header {
  text-align: center;
  margin-block-end: var(--space-8);
}

.lf-page-steps__title {
  margin: 0;
  color: var(--ink);
}

.lf-page-steps__title em {
  color: var(--acc);
  font-style: normal;
}

.lf-page-steps__sub {
  max-width: 56rem;
  margin: var(--space-3) auto 0;
  color: var(--ink-2);
  line-height: var(--leading-body);
}

/* 双栏：左配图 / 右手风琴 */
.lf-page-steps__grid {
  max-width: 56rem; /* 无插画时：流程列表 + 表单居中 */
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .lf-page-steps__grid--with-visual {
    max-width: none;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-10);
    align-items: center;
  }
}

/* 左：插画浮层（面板卡，token 配色） */
.lf-page-steps__visual {
  position: relative;
  min-height: 300px;
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 18% 16%, rgba(200, 67, 43, 0.14), transparent 46%),
    linear-gradient(150deg, var(--soft), var(--bg-white));
}

.lf-page-steps__panel {
  position: absolute;
  border-radius: var(--radius-base);
  background: var(--bg-white);
  border: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.08));
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.lf-page-steps__panel--a {
  inset-inline-start: 8%;
  inset-block-start: 12%;
  width: min(76%, 320px);
}

.lf-page-steps__panel--a svg {
  width: 100%;
  height: 90px;
}

.lf-page-steps__panel--b {
  inset-inline-end: 10%;
  inset-block-end: 10%;
  width: 150px;
}

.lf-page-steps__panel--c {
  inset-inline-start: 56%;
  inset-block-start: 52%;
  width: 150px;
  transform: rotate(3deg);
  opacity: 0.96;
}

.lf-page-steps__panel-label {
  display: block;
  margin-block-end: 6px;
  font-family: var(--num-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--pri);
}

.lf-page-steps__panel-head {
  display: block;
  font-family: var(--num-font);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}

.lf-page-steps__panel-num {
  display: block;
  margin-block-start: 4px;
  font-family: var(--num-font);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

.lf-page-steps__panel-chg {
  display: block;
  margin-block-start: 2px;
  font-family: var(--num-font);
  font-size: 11px;
  font-weight: 700;
  color: var(--up-hi);
}

@media (max-width: 1023px) {
  .lf-page-steps__visual {
    min-height: 240px;
  }
}

/* 右：编号手风琴 */
.lf-page-steps__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lf-page-steps__acc {
  background: var(--bg-white);
  border: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.08));
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--duration-slow) var(--ease);
}

.lf-page-steps__acc[open] {
  box-shadow: var(--shadow-lift);
}

.lf-page-steps__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}

.lf-page-steps__summary::-webkit-details-marker {
  display: none;
}

/* 编号圆：奇数 --up / 偶数 --pri2 交替（参考稿 绿/蓝 交替）
   对比度（Stage A AC-01）：奇数 --up 亮底配深墨字 --ink ≈4.86:1 ✓ AA；
   偶数 --pri2 深底配白字（--text-inverse）≈8.87:1 ✓ AA */
.lf-page-steps__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  font-family: var(--num-font);
  font-size: var(--text-5);
  font-weight: 800;
  color: var(--ink);
  background: var(--up);
}

.lf-page-steps__item:nth-of-type(even) .lf-page-steps__num {
  color: var(--text-inverse);
  background: var(--pri2);
}

.lf-page-steps__step-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--text-5);
  font-weight: 700;
  color: var(--ink);
}

/* 箭头：收起「>」（chevron-down 逆时针 90°）→ 展开「v」 */
.lf-page-steps__arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ink-3);
  transform: rotate(-90deg);
  transition: transform var(--duration-base) var(--ease);
}

.lf-page-steps__acc[open] .lf-page-steps__arrow {
  transform: rotate(0deg);
  color: var(--acc);
}

.lf-page-steps__step-desc {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 50px);
  font-size: var(--text-4);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
  animation: lf-steps-open 0.3s var(--ease);
}

@keyframes lf-steps-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lf-page-steps__step-desc {
    animation: none;
  }
}


/* ---------- 可选申请表单（客户 2026-09：并入合作流程） ---------- */
.lf-page-steps__form-wrap {
  margin-block-start: var(--space-8);
}

.lf-page-steps__form-card {
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  border-radius: 20px;
  border: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.08));
  background: var(--bg-white);
  box-shadow: var(--shadow-card);
}

.lf-page-steps__form-title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-6);
  font-weight: 800;
  color: var(--ink);
}

.lf-page-steps__form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .lf-page-steps__form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.lf-page-steps__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lf-page-steps__field--full {
  grid-column: 1 / -1;
}

.lf-page-steps__label {
  font-size: var(--text-3);
  font-weight: 600;
  color: var(--ink);
}

.lf-page-steps__label span {
  color: var(--acc);
}

.lf-page-steps__submit {
  margin-block-start: var(--space-5);
}

.lf-page-steps__form-alert {
  margin-block-end: var(--space-4);
}

/* 左侧插图（图片资产版）：青碧淡染的柔合面板承接 3D 白底插图，形成干净过渡 */
.lf-page-steps__visual--img {
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(closest-side at 50% 40%,
      color-mix(in srgb, var(--up) 12%, var(--bg-white)) 0%,
      color-mix(in srgb, var(--soft) 78%, var(--bg-white)) 58%,
      var(--bg-white) 100%);
}

.lf-page-steps__img {
  display: block;
  inline-size: 90%;
  max-inline-size: 520px;
  block-size: auto;
  filter: drop-shadow(0 22px 40px color-mix(in srgb, var(--ink) 16%, transparent));
}

/* 选择框按钮铺满字段宽度（提高选择器优先级，避免被表单通用按钮样式压制） */
.lf-page-steps__field .lf-combo,
.lf-page-steps__field .lf-combo__field {
  inline-size: 100%;
  block-size: auto;
}

/* ---------- 国家/地区搜索选择框（客户 2026-09 参考示例图） ---------- */
.lf-combo {
  position: relative;
  inline-size: 100%;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.lf-combo__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  inline-size: 100%;
  text-align: start;
  cursor: pointer;
}

.lf-combo__value:empty::before {
  content: "请选择";
  color: var(--ink-3);
}

.lf-combo__panel {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  inset-block-start: calc(100% + 6px);
  padding: var(--space-3);
  border: 1px solid var(--gray);
  border-radius: var(--radius-card, 16px);
  background: var(--bg-white);
  box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--ink) 35%, transparent);
}

.lf-combo__search {
  inline-size: 100%;
  min-block-size: 44px;
  margin-block-end: var(--space-2);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-base);
  background: var(--soft);
  color: var(--ink);
  font: inherit;
}

.lf-combo__list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* 最长显示 8 项（实测每项 48px），超出可滚动 */
  max-block-size: calc(8 * 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lf-combo__option {
  min-block-size: 40px;
  padding: 10px var(--space-4);
  border-radius: 10px;
  cursor: pointer;
}

.lf-combo__option:hover,
.lf-combo__option.is-selected {
  background: color-mix(in srgb, var(--acc) 10%, var(--bg-white));
}

.lf-combo__empty {
  margin: var(--space-2) var(--space-4);
  color: var(--ink-3);
  font-size: 14px;
}