/* 
snippet header auth modal css
async load to improve html size and performance
 */
.auth-modal-wrapper {
  border-radius: var(--popup-corner-radius) var(--popup-corner-radius) 0 0;
}
.auth-modal-header .overlay-link {
  position: absolute;
  inset: 0;
  z-index: 10;
}
.auth-modal-container {
  box-sizing: border-box;
  margin: auto 0;
  width: inherit;
}
.auth-modal-content {
  padding: 16px 16px 60px;
}
.auth-modal-content .form_item {
  position: relative;
  width: 100%;
}
.auth-modal-content .form_item + .form_item {
  margin-top: 16px;
}
.auth-modal-content .form_input {
  padding: 10px 16px;
  transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  width: 100%;
  height: 44px;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  background-color: transparent;
  outline: 0;
}
.auth-modal-content .form_input:focus {
  border-color: var(--color-foreground);
}
.auth-modal-content .form_label {
  position: absolute;
  top: 13px;
  inset-inline-start: 16px;
  font-size: 14px;
  line-height: 18px;
  transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  cursor: text;
}
.auth-modal-content .form_input[has-value] + .form_label {
  display: none;
}
.auth-modal-content .form-tips-text {
  padding: 13px 16px;
  margin: 20px 0 16px;
  align-self: stretch;
  color: var(--color-secondary-disabled, #f27396);
  background-color: var(--color-secondary, #fdecef);
}
.auth-modal-content .form-tips-error {
  margin-top: 10px;
  text-align: start;
  display: flex;
  align-items: center;
}
.auth-modal-content .form-tips-error svg {
  -webkit-margin-end: 4px;
          margin-inline-end: 4px;
  flex-shrink: 0;
}
#progress-bar-container {
  position: relative;
  width: 248px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
#progress-bar-bg {
  position: absolute;
  left: 24px;
  top: 14px;
  width: 197px;
  height: 6px;
  border-radius: 3px;
}
#progress-bar-container.step-1 #progress-bar-bg {
  background: #e6e8ea;
}
#progress-bar-container.step-2 #progress-bar-bg {
  background: linear-gradient(90deg, #3bb346 5.4%, #e6e8ea 100%);
}
#progress-bar-container.step-3 #progress-bar-bg {
  background: #3bb346;
}
#progress-bar-start {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#progress-bar-start::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  z-index: 1;
}
#progress-bar-start-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
#progress-bar-container.step-1 #progress-bar-start::after {
  background: #e6e8ea;
}
#progress-bar-container.step-2 #progress-bar-start-bg,
#progress-bar-container.step-3 #progress-bar-start-bg {
  background: #a5e0a7;
  opacity: 0.3;
}
#progress-bar-container.step-2 #progress-bar-start::after,
#progress-bar-container.step-3 #progress-bar-start::after {
  background: #3bb346;
}
#start_num,
#end_num,
#icon_start_check,
#icon_end_check {
  z-index: 2;
}
#progress-bar-end {
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#progress-bar-end::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  z-index: 1;
}
#progress-bar-end-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
#progress-bar-container.step-1 #progress-bar-end::after,
#progress-bar-container.step-2 #progress-bar-end::after {
  background: #e6e8ea;
}
#progress-bar-container.step-3 #progress-bar-end::after {
  background: #3bb346;
}
#progress-bar-container.step-3 #progress-bar-end-bg {
  background: #a5e0a7;
  opacity: 0.3;
}
#progress-bar-container.step-1 #icon_start_check,
#progress-bar-container.step-1 #icon_end_check,
#progress-bar-container.step-2 #start_num,
#progress-bar-container.step-2 #icon_end_check,
#progress-bar-container.step-3 #start_num,
#progress-bar-container.step-3 #end_num {
  display: none;
}
#progress-bar-container.step-1 #start_num,
#progress-bar-container.step-1 #end_num,
#progress-bar-container.step-2 #icon_start_check,
#progress-bar-container.step-2 #end_num,
#progress-bar-container.step-3 #icon_start_check,
#progress-bar-container.step-3 #icon_end_check {
  display: block;
}

@media (min-width: 960px) {
  .auth-modal-wrapper {
    border: var(--popup-border-width) solid var(--color-border);
    border-radius: var(--popup-corner-radius);
  }
  .auth-modal-wrapper.inner-success .auth-modal-container {
    align-items: center;
  }
  .auth-modal-content {
    padding: 60px 0 80px;
  }
  .auth-modal-title {
    max-width: 379px;
    letter-spacing: 0;
    font-size: calc(46px * var(--font-body-scale));
    line-height: calc(54px * var(--font-body-scale));
  }
  .auth-modal-content {
    width: 379px;
  }
  #progress-bar-container {
    margin-bottom: 100px;
  }
  spz-sidebar.auth-modal-sidebar[side='bottom'] {
    top: 20px;
    bottom: 20px;
    inset-inline-end: 0 !important;
    inset-inline-start: 0 !important;
    transform: translateX(calc(100vw - 968px)) !important;
    animation-name: sidebar-slide-out-right;
    max-width: 948px !important;
    width: 100vw !important;
    max-height: calc(100vh - 40px) !important;
    min-height: 45px !important;
  }
  spz-sidebar.auth-modal-sidebar[side='bottom'][open] {
    animation-name: sidebar-slide-in-right;
  }
  html[dir='rtl'] spz-sidebar.auth-modal-sidebar[side='bottom'] {
    transform: translateX(calc(-1 * (100vw - 968px))) !important;
    animation-name: sidebar-slide-out-left;
  }
  html[dir='rtl'] spz-sidebar.auth-modal-sidebar[side='bottom'][open] {
    animation-name: sidebar-slide-in-left;
  }
  @keyframes sidebar-slide-in-left {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(-23%);
    }
  }
  @keyframes sidebar-slide-out-left {
    from {
      transform: translateX(-23%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes sidebar-slide-in-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(23%);
    }
  }
  @keyframes sidebar-slide-out-right {
    from {
      transform: translateX(23%);
    }
    to {
      transform: translateX(100%);
    }
  }
}
.inner-auth {
  height: 80vh;
}
.inner-success {
  height: 45vh;
}
.overflow-hidden-drawer {
  overflow: hidden !important;
}
@media (min-width: 960px) {
  .inner-auth,
  .inner-succes {
    height: 100%;
  }
}

/*
 * 一步式登录 / 注册流程（spz-auth）
 * 显隐由组件打在节点上的 [hidden] 负责，这里只写视觉。
 */
/* 组件就绪前隐藏，避免闪步骤（就绪后打 data-ready）；步骤显隐统一 display:none */
.auth-flow:not([data-ready]) {
  visibility: hidden;
}
.auth-flow [hidden] {
  display: none !important;
}
.auth-flow {
  display: block;
  width: 100%;
}
.auth-flow__title {
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--color-foreground-heading);
}
.auth-flow__welcome {
  margin-bottom: 16px;
}
.auth-flow__desc {
  margin-bottom: 6px;
}
/* 验证码 / 补资料 / 成功页共用的「✉ 邮箱」回显行 */
.auth-flow__email-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 24px;
  color: var(--color-foreground-heading);
  word-break: break-all;
}
.auth-flow__email-icon {
  flex-shrink: 0;
}
.auth-flow__dot {
  margin: 0 4px;
}
.auth-flow__field + .auth-flow__field {
  margin-top: 16px;
}
.auth-flow__forgot {
  display: block;
  margin-top: 8px;
  color: var(--color-text-2);
}
.auth-flow__password-actions {
  z-index: 1;
  position: absolute;
  top: 15px;
  inset-inline-end: 15px;
  display: flex;
  align-items: center;
}
.auth-flow__password-visibility-icon {
  position: relative;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.auth-flow__password-visibility-icon:not(.visible) .icon-eye,
.auth-flow__password-visibility-icon.visible .icon-eyelash {
  display: none;
}
/* 验证码分格：真实值在视觉隐藏的 .auth-flow__code-value 里 */
.auth-flow__code {
  position: relative;
}
.auth-flow__code-boxes {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 300px;
  margin-inline: auto;
  direction: ltr;
}
.auth-flow__code-box {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 48px;
  height: 44px;
  padding: 0;
  text-align: center;
  font-size: 18px;
  line-height: 44px;
  outline: 0;
  caret-color: var(--color-input-text);
}
.auth-flow__code-box:focus,
.auth-flow__code-box[data-filled] {
  border-color: var(--color-foreground);
}
.auth-flow__code-value {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.auth-flow__resend {
  position: relative;
}
/* 动作按钮区（主 CTA + resend）统一顶部间距 20px */
.auth-flow__actions {
  margin-top: 20px;
}
.auth-flow__back {
  margin-top: 20px;
}
.auth-flow__back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-2);
}
.auth-flow__switch a + a {
  -webkit-margin-start: 12px;
          margin-inline-start: 12px;
}
.auth-flow__divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: var(--color-text-3, rgba(0, 0, 0, 0.4));
}
.auth-flow__divider::before,
.auth-flow__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.auth-flow__divider span {
  padding: 0 12px;
}
.auth-flow[data-loading] .auth-flow__actions .button {
  opacity: 0.6;
}
.auth-flow__success-icon {
  color: var(--color-success, #3bb346);
}
.auth-flow__success-title {
  margin-top: 20px;
}
.auth-flow__success .auth-flow__email-line {
  margin: 8px 0 0;
}
.auth-flow__badge {
  display: inline-block;
  margin: 12px 0 24px;
  padding: 3px 10px;
  border-radius: 4px;
  color: var(--color-success, #3bb346);
  background-color: var(--color-success-background, rgba(59, 179, 70, 0.1));
}
.auth-flow__success-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--color-text-2);
  text-decoration: underline;
}
.auth-flow__success-text {
  margin: 20px 0 30px;
}
@media (min-width: 960px) {
  .auth-flow__success-text {
    margin: 30px 0 40px;
  }
}

/* 订阅勾选框（原先写在注册弹窗的内联 style 里，随一步式改造统一收到这里） */
.form_checkbox-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 16px;
}
/* 验证码步的订阅框居中（signup 表单里的保持左对齐） */
.auth-flow[data-step='code'] .form_checkbox-container {
  justify-content: center;
}
.form_checkbox {
  position: absolute;
  inset-inline-start: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 0;
  outline: none;
}
.form_checkbox-label {
  position: relative;
  width: 16px;
  height: 16px;
  -webkit-margin-end: 8px;
          margin-inline-end: 8px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.form_checkbox:not(:checked) + .form_checkbox-label .icon_checkbox_check {
  display: none;
}

/* 注册邮箱验证：内联验证码单框，发码 / 重发 / 倒计时内嵌右侧 */
.auth-flow__code-inline {
  position: relative;
  /* 显式补间距，不依赖 .auth-flow__field 相邻兄弟选择器 */
  margin-top: 16px;
}
.auth-flow__code-inline .form_input {
  -webkit-padding-end: 88px;
          padding-inline-end: 88px;
}
.auth-flow__code-send {
  position: absolute;
  top: 0;
  inset-inline-end: 16px;
  height: 44px;
  line-height: 44px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--color-primary);
}
.auth-flow__code-send--disabled {
  color: var(--color-text-3);
  pointer-events: none;
  cursor: default;
}
.auth-flow__code-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  /* 颜色继承默认正文色，与密码校验提示 .form-tips-error 一致（原 text-3 浅灰偏淡，QA 要求对齐密码提示） */
}
.auth-flow__code-hint .atlas-icon {
  flex-shrink: 0;
}

/*
 * ─────────── 步骤显隐覆盖（一步式 vs 非一步式）───────────
 * 绝大多数显隐由组件打 [hidden]（auth-step / auth-if / auth-method）。
 * 下面几条只补「同一步骤下 一步式 vs 非一步式 表现不同」这类 marker 表达不了的情形。
 * data-one-step / data-step 是组件打在 host(<spz-auth>) 上的状态；被隐藏的邮箱框带
 * auth-keep，display:none 不影响其参与提交。
 */
/* 一步式 password 步（中间步）：邮箱走回显，隐藏可编辑框 / social / 方式切换 */
.auth-flow[data-one-step][data-step='password'] .auth-flow__email-field,
.auth-flow[data-one-step][data-step='password'] .auth-flow__social-block,
.auth-flow[data-one-step][data-step='password'] .auth-flow__switch {
  display: none;
}
/* signup 步邮箱：一步式隐藏输入框（走回显）/ 非一步式隐藏回显行（走输入框） */
.auth-flow[data-one-step][data-step='signup'] .auth-flow__email-field {
  display: none;
}
.auth-flow:not([data-one-step])[data-step='signup'] .auth-flow__email-line {
  display: none;
}