/* ========================================
   auth-dialog.css - index.html 登录弹窗统一样式
   统一字体: Poppins, Montserrat, Alibaba PuHuiTi, SourceHanSansCN, sans-serif
   统一字间距: -0.5px
   
   注意：此文件必须在 index.css 之后引入！
======================================== */

/* 全局字体变量 */
:root {
  --auth-font-family: "Poppins", "Montserrat", "Alibaba PuHuiTi", "SourceHanSansCN", sans-serif;
  --auth-letter-spacing: -0.5px;
  --auth-primary-color: #667eea;
  --auth-text-dark: #222222;
  --auth-text-gray: #666666;
  --auth-text-light: #939BA2;
  --auth-border-color: #D1D7DB;
  --auth-bg-white: #FFFFFF;
}

/* ========================================
   遮罩层 - 使用 !important 确保覆盖原样式
======================================== */
#barrier.barrier {
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.65) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: none !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 99999 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#barrier.barrier.barrier_show {
  align-items: center !important;
  justify-content: center !important;
  
  
  
  
  display: flex !important;
}

/* ========================================
   登录弹窗容器 - 统一尺寸 480px
======================================== */
#barrier.barrier > .login_wrp {
  width: 480px !important;
  min-width: 480px !important;
  max-height: 90vh !important;
  background: var(--auth-bg-white) !important;
  border-radius: 20px !important;
  padding: 36px !important;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  font-family: var(--auth-font-family) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
  margin: 0 !important;
  overflow-y: auto !important;
  /* 不设置 min-height，让内容自然撑开 */
}

/* 关闭按钮 */
#barrier .login_wrp .close_img {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
  padding: 5px !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s !important;
  z-index: 10 !important;
}

#barrier .login_wrp .close_img:hover {
  opacity: 1 !important;
}

/* 弹窗标题 */
#barrier .login_wrp > .title {
  font-family: var(--auth-font-family) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--auth-text-dark) !important;
  text-align: center !important;
  margin-bottom: 5px !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.2 !important;
}

/* ========================================
   登录方式切换 Tabs
======================================== */
#barrier .login-tabs {
  display: flex !important;
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #eee !important;
  background: transparent !important;
}

#barrier .login-tab {
  flex: 1 !important;
  text-align: center !important;
  padding: 12px 0 !important;
  cursor: pointer !important;
  font-family: var(--auth-font-family) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--auth-text-gray) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

#barrier .login-tab.active {
  color: var(--auth-primary-color) !important;
  border-bottom-color: var(--auth-primary-color) !important;
}

#barrier .login-tab:hover {
  color: var(--auth-primary-color) !important;
}

/* ========================================
   微信登录内容 - display 由 JS 控制
======================================== */
#barrier #wechat-login-content {
  padding: 25px 0 !important;
  /* display 由 JS 控制，不在这里设置 */
}

#barrier .login_wrp .tips {
  font-family: var(--auth-font-family) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
  font-size: 14px !important;
  color: var(--auth-text-light) !important;
  text-align: center !important;
  margin: 0 0 10px 0 !important;
}

/* 二维码容器 */
#barrier .login_wrp .code {
  width: 200px !important;
  height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 20px auto !important;
  position: relative !important;
}

#barrier .login_wrp .code img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
}

#barrier .login_wrp .code .blur {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 99 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(6px) !important;
  border-radius: 8px !important;
}

/* 协议提示 */
#barrier .login_wrp ._tips {
  font-family: var(--auth-font-family) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
  font-size: 14px !important;
  color: var(--auth-text-gray) !important;
  text-align: center !important;
  line-height: 1.8 !important;
  margin: 15px 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#barrier .login_wrp ._tips a {
  color: var(--auth-primary-color) !important;
  text-decoration: none !important;
}

#barrier .login_wrp ._tips a:hover {
  text-decoration: underline !important;
}

/* 同意/不同意按钮 */
#barrier .login_wrp .agreement,
#barrier .login_wrp .unagreement {
  display: inline-block !important;
  width: calc(50% - 15px) !important;
  height: 48px !important;
  margin: 8px 5px !important;
  border-radius: 24px !important;
  font-family: var(--auth-font-family) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-align: center !important;
  line-height: 48px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

#barrier .login_wrp .agreement {
  background: var(--auth-primary-color) !important;
  color: white !important;
  border: none !important;
}

#barrier .login_wrp .agreement:hover {
  background: #5a6fd6 !important;
}

#barrier .login_wrp .unagreement {
  background: #f5f5f5 !important;
  color: var(--auth-text-gray) !important;
  border: 1px solid var(--auth-border-color) !important;
}

#barrier .login_wrp .unagreement:hover {
  background: #e8e8e8 !important;
}

/* 协议按钮容器居中 */
#barrier #agreement_wrp {
  text-align: center !important;
}

/* 微信二维码容器 - display 由 JS 控制 */
#barrier .wx_code {
  display: none; /* 初始隐藏，JS 设置 display:flex 时会覆盖 */
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  /* min-height 不在这里设置，避免隐藏时占用空间 */
}

/* ========================================
   密码登录内容 - 初始隐藏，切换时由 JS 控制
======================================== */
#barrier #password-login-content {
  padding: 20px 0 !important;
  display: none; /* 初始隐藏，不用 !important 让 JS 可以覆盖 */
}

/* 装饰图 */
#barrier .pwd-login-draw {
  width: 140px !important;
  height: auto !important;
  margin: 15px auto 20px !important;
  display: block !important;
}

/* 注册提示 */
#barrier .pwd-login-tips {
  text-align: center !important;
  margin-bottom: 30px !important;
  font-family: var(--auth-font-family) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
}

#barrier .pwd-login-tips span {
  color: var(--auth-text-gray) !important;
  font-size: 14px !important;
}

#barrier .pwd-login-tips a {
  color: var(--auth-primary-color) !important;
  margin-left: 5px !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

#barrier .pwd-login-tips a:hover {
  text-decoration: underline !important;
}

#barrier .pwd-login-tips a img {
  width: 12px !important;
  vertical-align: middle !important;
  margin-left: 2px !important;
}

/* 输入框容器 */
#barrier .pwd-login-form {
  padding: 0 10px !important;
}

#barrier .pwd-login-input-wrap {
  margin-bottom: 18px !important;
  position: relative !important;
}

#barrier .pwd-login-input-wrap .input-icon {
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  opacity: 0.5 !important;
}

#barrier .pwd-login-input-wrap input {
  width: 100% !important;
  padding: 14px 15px 14px 45px !important;
  border: 1px solid var(--auth-border-color) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  font-family: var(--auth-font-family) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
  font-size: 15px !important;
  color: var(--auth-text-dark) !important;
  transition: border-color 0.3s !important;
  outline: none !important;
  background: white !important;
}

#barrier .pwd-login-input-wrap input::placeholder {
  color: var(--auth-text-light) !important;
}

#barrier .pwd-login-input-wrap input:focus {
  border-color: var(--auth-primary-color) !important;
}

/* 登录按钮 */
#barrier .pwd-login-btn {
  background: var(--auth-text-dark) !important;
  color: white !important;
  text-align: center !important;
  padding: 14px !important;
  border-radius: 28px !important;
  margin: 30px 10px 0 !important;
  cursor: pointer !important;
  font-family: var(--auth-font-family) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  transition: background 0.3s !important;
}

#barrier .pwd-login-btn:hover {
  background: #333 !important;
}

#barrier .pwd-login-btn.disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* 忘记密码 */
#barrier .pwd-login-forget {
  text-align: center !important;
  margin-top: 15px !important;
  color: var(--auth-text-light) !important;
  font-family: var(--auth-font-family) !important;
  letter-spacing: var(--auth-letter-spacing) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: color 0.3s !important;
}

#barrier .pwd-login-forget:hover {
  color: var(--auth-primary-color) !important;
}

/* ========================================
   响应式适配
======================================== */
@media screen and (max-width: 520px) {
  #barrier.barrier > .login_wrp {
    width: 90vw !important;
    min-width: auto !important;
    padding: 25px !important;
  }
  
  #barrier .login_wrp > .title {
    font-size: 24px !important;
  }
  
  #barrier .login_wrp .code {
    width: 180px !important;
    height: 180px !important;
  }
  
  #barrier .login_wrp .agreement,
  #barrier .login_wrp .unagreement {
    width: calc(50% - 10px) !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 14px !important;
  }
}