/* 会员登录流程 · 邮箱密码找回页
   作用域限定在 .passMain--email，避免影响 mobilegetpass / mailreset 等仍用旧样式的页面。
   变量沿用 design-tokens.css，页面专属覆盖放在 site-components 之后加载。 */

.passMain--email{
  --pass-brand: var(--color-brand, #0196e3);
  --pass-brand-hover: var(--color-brand-hover, #007fbe);
  min-height: auto;
  /* 顶部不再额外留白：面包屑 #map 的 margin-top（8px）即全站内页标准间距 */
  padding: 0 20px 60px;
}

.passMain--email .passCard{
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 36px 28px;
  border: 1px solid var(--color-border, #e2e2e2);
  border-radius: var(--radius-lg, 10px);
  background: var(--color-surface, #fff);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.passMain--email .passCard__title{
  margin: 0;
  color: var(--color-text-primary, #222);
  font-size: var(--font-size-title-lg, 24px);
  font-weight: 700;
  line-height: 1.4;
}

.passMain--email .passCard__desc{
  margin: 8px 0 0;
  color: var(--color-text-secondary, #666);
  font-size: var(--font-size-min, 14px);
  line-height: var(--line-height-body, 1.7);
}

/* 找回方式步骤条 */
.passMain--email .passSteps{
  display: flex;
  gap: var(--space-3, 12px);
  margin: var(--space-6, 24px) 0 0;
  padding: 0;
  list-style: none;
}

.passMain--email .passStep{
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--space-3, 12px);
  border: 1px solid var(--color-border, #e2e2e2);
  border-radius: var(--radius-card, 6px);
  background: var(--color-surface-muted, #f5f5f5);
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-min, 14px);
  line-height: var(--line-height-compact, 1.5);
  text-align: center;
}

.passMain--email .passStep.is-current{
  border-color: var(--pass-brand);
  background: var(--pass-brand);
  color: var(--color-text-inverse, #fff);
  font-weight: 700;
}

.passMain--email .passStep__num{
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  font-size: 13px;
}

.passMain--email .passStep.is-current .passStep__num{ background: rgba(255, 255, 255, 0.25); }

.passMain--email .passStep__tag{
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 12px;
  white-space: nowrap;
}

/* 只剩「邮箱找回密码」一种方式时，步骤项不再撑满整行 */
.passMain--email .passSteps--single .passStep{ flex: 0 0 auto; }

/* 旧版 tab 布局（找回密码各步骤页）：移除「手机找回密码」未开通 tab 后，
   当前 tab 铺满整行，避免右侧留白（覆盖 2014/user.css 的 .loginPass-item{width:300px}） */
.loginPass-hd--single .loginPass-item{ width: 100%; }

/* 表单 */
.passMain--email .passForm{ margin-top: var(--space-6, 24px); }

.passMain--email .passField{ margin-bottom: var(--space-4, 16px); }

.passMain--email .passField__label{
  display: block;
  margin-bottom: var(--space-2, 8px);
  color: var(--color-text-primary, #222);
  font-size: var(--font-size-min, 14px);
  line-height: var(--line-height-compact, 1.5);
}

.passMain--email .passReq{ color: var(--color-danger, #c00000); font-style: normal; }

.passMain--email .passField__control{ position: relative; }

.passMain--email .passInput{
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--color-border, #e2e2e2);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #222);
  font-family: inherit;
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-compact, 1.5);
}

.passMain--email .passInput:focus{
  border-color: var(--pass-brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 150, 227, 0.15);
}

.passMain--email .passInput--code{ width: 160px; }

/* 验证码行 */
.passMain--email .passCode{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.passMain--email .passCode__image{
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--space-2, 8px);
  border: 1px solid var(--color-border, #e2e2e2);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface, #fff);
  cursor: pointer;
  line-height: 1;
}

.passMain--email .passCode__image img{ display: block; height: 32px; width: auto; }

.passMain--email .passCode__refresh{
  padding: 0;
  border: 0;
  background: none;
  color: var(--pass-brand);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}

.passMain--email .passCode__refresh:hover{ color: var(--pass-brand-hover); text-decoration: underline; }

/* 客服提示条
   旧样式 .passNotice 为绝对定位（user.css），此处复位为常规流元素 */
.passMain--email .passNotice{
  position: static;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  width: auto;
  margin: 0 0 var(--space-4, 16px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid #ffe0b2;
  border-left: 3px solid #f0a020;
  border-radius: var(--radius-sm, 4px);
  background: #fff8ec;
  color: #8a5a00;
  font-size: var(--font-size-min, 14px);
  line-height: var(--line-height-body, 1.7);
}

.passMain--email .passNotice p{ margin: 0; }

.passMain--email .passNotice__icon{
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: #f0a020;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.passMain--email .passNotice__tel{ color: #d4380d; }

/* 提交按钮 */
.passMain--email .passSubmit{
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: var(--pass-brand);
  color: var(--color-text-inverse, #fff);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-body, 16px);
  font-weight: 700;
  line-height: var(--line-height-compact, 1.5);
  transition: background 0.15s ease;
}

.passMain--email .passSubmit:hover{ background: var(--pass-brand-hover); }

.passMain--email .passSubmit:disabled{
  background: #b9c2cb;
  cursor: not-allowed;
}

.passMain--email .passSubmit.is-loading{ opacity: 0.75; cursor: progress; }

.passMain--email .passFoot{
  margin: var(--space-4, 16px) 0 0;
  color: var(--color-text-secondary, #666);
  font-size: var(--font-size-min, 14px);
  text-align: center;
}

.passMain--email .passFoot a{ color: var(--pass-brand); text-decoration: none; }

.passMain--email .passFoot a:hover{ color: var(--pass-brand-hover); text-decoration: underline; }

/* 校验提示：由 2014/form.js 控制显隐，改为显示在输入框下方 */
.passMain--email .required{
  position: static;
  display: none;
  width: 100%;
  height: auto;
  margin-top: var(--space-1, 4px);
  padding: 0;
  font-size: 13px;
  line-height: var(--line-height-compact, 1.5);
  white-space: normal;
}

.passMain--email .requiredIcon{
  position: static;
  display: inline-block;
  width: 15px;
  height: 20px;
  margin-right: 6px;
  vertical-align: -4px;
  background-image: url("/public/images/codestatus.png");
  background-position: 0 0;
}

.passMain--email .requiredText{ display: inline; margin: 0; }

/* codestatus.png 为 15x60 竖向雪碧图：0 段为对勾，20px 段为红叉 */
.passMain--email .required-correct .requiredIcon{ background-position: 0 0; }
.passMain--email .required-error .requiredIcon{ background-position: 0 -20px; }

.passMain--email .passInput:focus-visible,
.passMain--email .passCode__refresh:focus-visible,
.passMain--email .passSubmit:focus-visible{
  outline: 2px solid var(--pass-brand);
  outline-offset: 2px;
}

@media (max-width: 900px){
  #wrapper{ width: auto; max-width: 1200px; margin: 0 var(--space-3, 12px); }
  .passMain--email{ padding: 0 0 var(--space-8, 32px); }
  .passMain--email .passCard{ padding: var(--space-6, 24px) var(--space-4, 16px); }
}

@media (max-width: 480px){
  .passMain--email .passSteps{ flex-direction: column; }
  .passMain--email .passInput--code{ width: 100%; }
}