/* ============================================================
   26373 专属身份入驻：导航入口 + hover 五卡面板 + 五弹框
   规格来源：蓝湖主画板 MasterJSON 实测标注 + 弹框HTML还原稿
   约束：不修改既有 CSS；类名统一 join- 前缀
   ============================================================ */

/* ---------- 入口 li.nav-join（用户区：未登录在「登录」左、已登录在「会员管理中心」左；图标 28×28 + 文字 14px Regular #252B3A） ---------- */
.hw-header .nav-join .join-nav-icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 6px;
  margin-top: -4px;
  display: inline-block;
}
.hw-header .nav-join a {
  color: #252B3A;
  font-weight: 400;
  font-size: 14px;
}

/* ---------- hover 下拉面板（1006×163，白底，圆角 0 0 4 4，阴影 0 1px 6px 1px rgba(0,5,41,.16)） ---------- */
.join-panel {
  display: none;
  position: absolute;
  right: 0;
  top: 75px;
  width: 1006px;
  height: 163px;
  background: #FFFFFF;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 6px 1px rgba(0, 5, 41, 0.16);
  z-index: 1002;
}
.join-panel.show { display: block; }
.join-panel .join-card {
  float: left;
  width: 20%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  padding-top: 24px;
}
.join-panel .join-card + .join-card { border-left: 1px solid #E1E1E3; }
.join-panel .join-card-title {
  font-size: 16px;
  line-height: 25px;
  font-weight: 700;
  color: #252B3A;
}
.join-panel .join-card-desc {
  margin-top: 8px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: #575D6C;
}
.join-panel .join-card-btn {
  display: block;
  margin: 14px auto 0;
  width: 91px;
  height: 28px;
  line-height: 26px;
  border: 1px solid #D90E19;
  border-radius: 2px;
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 400;
  color: #D90E19;
  cursor: pointer;
}

/* ---------- 遮罩（fixed 全屏 rgba(3,0,41,.5)，z-index 10000） ---------- */
.join-mask {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 0, 41, 0.5);
  z-index: 10000;
}
.join-mask.show { display: block; }
body.join-lock { overflow: hidden; }

/* ---------- 弹窗基类（fixed 居中，z-index 10001） ---------- */
.join-popup {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  z-index: 10001;
}
.join-popup.show { display: block; }
.join-popup-a { width: 997px; height: 510px; }
.join-popup-b, .join-popup-d { width: 890px; height: 433px; }
.join-popup-c, .join-popup-e { width: 890px; height: 401px; }

/* ---------- 弹窗关闭按钮（12×12 灰叉；A 用还原稿原坐标，其余右上角等效位） ---------- */
.join-popup .join-close {
  position: absolute;
  left: 858px;
  top: 20px;
  width: 12px;
  height: 12px;
  cursor: pointer;
  z-index: 3;
}
.join-popup-a .join-close { left: 965px; }
.join-popup .join-close::before, .join-popup .join-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: #575D6C;
}
.join-popup .join-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.join-popup .join-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- 弹框A：左权益（图标42×42 / 标题14 Bold / 描述12 Medium） ---------- */
.join-popup-a .join-benefit-title {
  position: absolute;
  left: 172px;
  top: 35px;
  width: 120px;
  height: 33px;
  font-size: 24px;
  font-weight: bold;
  color: #252B3A;
  line-height: 33px;
}
.join-popup-a .join-benefit { position: absolute; left: 27px; width: 410px; }
.join-popup-a .join-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
}
.join-popup-a .join-b-name {
  position: absolute;
  left: 50px;
  top: -1px;
  height: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #252B3A;
  line-height: 20px;
}
.join-popup-a .join-b-desc {
  position: absolute;
  left: 50px;
  top: 25px;
  height: 17px;
  font-size: 12px;
  font-weight: 500;
  color: #575D6C;
  line-height: 17px;
  white-space: nowrap;
}

/* ---------- 弹框A：右区（标题/描述/二维码占位/扫码提示） ---------- */
.join-popup-a .join-r-title {
  position: absolute;
  left: 630px;
  top: 35px;
  width: 192px;
  height: 33px;
  font-size: 24px;
  font-weight: bold;
  color: #252B3A;
  line-height: 33px;
}
.join-popup-a .join-r-desc {
  position: absolute;
  left: 541px;
  top: 79px;
  width: 370px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #252B3A;
  line-height: 20px;
}
.join-popup-a .join-qr {
  position: absolute;
  left: 677px;
  top: 137px;
  width: 98px;
  height: 98px;
}
.join-popup-a .join-r-note {
  position: absolute;
  left: 601px;
  top: 244px;
  width: 251px;
  height: 17px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: #8A8E99;
  line-height: 17px;
}

/* ---------- 弹框A：4 步骤 + 截图 + 播放 + 箭头 + 红框标注 ---------- */
.join-popup-a .join-step {
  position: absolute;
  top: 280px;
  width: 17px;
  height: 17px;
  border: 1px solid #D90E19;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  color: #D90E19;
  display: flex;
  align-items: center;
  justify-content: center;
}
.join-popup-a .join-step-label {
  position: absolute;
  top: 300px;
  height: 17px;
  font-size: 12px;
  font-weight: 500;
  color: #252B3A;
  line-height: 17px;
  white-space: nowrap;
}
.join-popup-a .join-shot {
  position: absolute;
  top: 325px;
  border: 1px solid #FFA7A7;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.join-popup-a .join-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.join-popup-a .join-play { position: absolute; top: 392px; width: 18px; height: 18px; }
.join-popup-a .join-arrow { position: absolute; top: 390px; width: 20px; height: 22px; }
.join-popup-a .join-mark { position: absolute; border: 0.6px solid #D90E19; border-radius: 2px; cursor: pointer; z-index: 2; }

/* ---------- 弹框B/C/D/E：左右背景面板 + 标题（左板铺 background.png，884×866 为面板 @2x 切图） ---------- */
.join-panel-l, .join-panel-r { position: absolute; top: 0; height: 100%; background: #FFFFFF; }
.join-panel-l {
  left: 0;
  width: 445px;
  background: #FFFFFF url("../../img/nav/background.png") no-repeat center / 100% 100%;
}
.join-panel-r { left: 439px; width: 451px; }
.join-popup-e .join-panel-r { left: 442px; }
/* 弹框A 左区背景板（997 宽弹框取左半 500px，内容 DOM 顺序靠后自然覆盖） */
.join-popup-a .join-panel-l { width: 500px; }
.join-p-title {
  position: absolute;
  height: 33px;
  font-size: 24px;
  font-weight: bold;
  color: #252B3A;
  z-index: 1;
}

/* ---------- 弹框B/C/D/E：左栏权益（B/C 文字 rel85；D/E rel69） ---------- */
.join-benefit2 { position: absolute; left: 85px; width: 336px; z-index: 1; }
.join-benefit3 { position: absolute; left: 69px; width: 358px; z-index: 1; }
.join-benefit2 .join-icon, .join-benefit3 .join-icon { position: absolute; left: -50px; top: 1px; width: 42px; height: 42px; }
.join-benefit2 .join-b-name, .join-benefit3 .join-b-name {
  height: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #252B3A;
  line-height: 20px;
}
.join-benefit2 .join-b-desc, .join-benefit3 .join-b-desc {
  margin-top: 6px;
  height: 17px;
  font-size: 12px;
  font-weight: 500;
  color: #575D6C;
  line-height: 17px;
  white-space: nowrap;
}

/* ---------- 弹框B/D：右栏表单（真实登录链路：手机号/图形码/短信码，输入框 368×46 #F3F4F8 圆角4） ---------- */
.join-input {
  position: absolute;
  left: 481px;
  width: 368px;
  height: 46px;
  background: #F3F4F8;
  border-radius: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
}
.join-inp {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #252B3A;
  box-sizing: border-box;
}
.join-inp::placeholder { color: #999999; }
.join-input.join-inp-code { width: 119px; flex: none; }
.join-code-img {
  position: absolute;
  left: 600px;
  width: 119px;
  height: 46px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1;
}
.join-input .join-get-code { position: absolute; right: 14px; top: 13px; font-size: 14px; color: #D90E19; cursor: pointer; }
.join-get-code.disabled { color: #999999; cursor: default; }
.join-refresh { position: absolute; left: 737px; font-size: 14px; color: #D90E19; cursor: pointer; z-index: 1; }
.join-btn {
  position: absolute;
  left: 481px;
  width: 368px;
  height: 40px;
  background: #D90E19;
  border-radius: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
}
.join-btn.disabled { opacity: .6; cursor: default; }
.join-agreement {
  position: absolute;
  left: 485px;
  font-size: 12px;
  font-weight: 500;
  color: #575D6C;
  white-space: nowrap;
  z-index: 1;
}
.join-agreement a { color: #D90E19; text-decoration: none; }

/* ---------- 弹框C/E：右栏已入驻提示 ---------- */
.join-tip {
  position: absolute;
  left: 476px;
  top: 101px;
  width: 378px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #575D6C;
  line-height: 20px;
  z-index: 1;
}
.join-popup-e .join-tip { left: 479px; }
.join-account {
  position: absolute;
  left: 481px;
  top: 169px;
  width: 368px;
  height: 46px;
  background: #F3F4F8;
  border-radius: 4px;
  z-index: 1;
  cursor: pointer;
}
.join-popup-e .join-account { left: 484px; }
.join-account .join-val { position: absolute; left: 14px; top: 13px; font-size: 14px; color: #666666; }
.join-account .join-ok { position: absolute; right: 14px; top: 14px; width: 18px; height: 18px; }
/* 取消勾选态：隐藏红勾，画空框占位（进入按钮同步置灰） */
.join-account.unchecked .join-ok { display: none; }
.join-account.unchecked::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid #C2C4CC;
  border-radius: 2px;
  background: #FFFFFF;
}
.join-popup-c .join-btn, .join-popup-e .join-btn { top: 293px; }
.join-switch {
  position: absolute;
  left: 637px;
  top: 343px;
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #D90E19;
  line-height: 20px;
  cursor: pointer;
  z-index: 1;
}
.join-popup-e .join-switch { left: 640px; }

/* ---------- 步骤图放大层（fixed 全屏，z-index 10002） ---------- */
.join-steps-zoom {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10002;
}
.join-steps-zoom.show { display: block; }
.join-z-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(3, 0, 41, 0.5); }
/* 四图横排模式：四张放大图一屏展示，两两之间箭头；mark 红框百分比定位随图等比缩放。
   宽度预算：4×20vw(图) + 3×1vw(箭头) + 3×5vw(间距) ≈ 86vw，任意视口不溢出 */
.join-z-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 5vw;
}
.join-z-item { position: relative; z-index: 1; }
.join-z-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 20vw;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border: 1px solid #FFA7A7;
  border-radius: 20px;
  background: #FFFFFF;
  box-sizing: border-box;
}
.join-z-arrow { flex: none; width: 1vw; min-width: 14px; height: auto; }
.join-z-mark { position: absolute; border: 2px solid #D90E19; border-radius: 10px; z-index: 2; }
.join-z-close { position: absolute; right: 40px; top: 40px; width: 32px; height: 32px; cursor: pointer; z-index: 3; }
.join-z-close::before, .join-z-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 3px;
  background: #FFFFFF;
  border-radius: 2px;
}
.join-z-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.join-z-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- 弹框B/D：多账号选择视图（对齐登录页账号列表，账号多时出滚动条） ---------- */
.join-accounts { position: absolute; left: 481px; top: 101px; width: 368px; z-index: 2; }
.join-acc-list { max-height: 230px; overflow-y: auto; min-height: 230px; }
.join-acc-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 0;
  border: 1px solid #E1E1E3;
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
  margin-bottom: 12px;
}
.join-acc-item:last-child { margin-bottom: 0; }
.join-acc-item.active { border: 2px solid #D90E19; }
.join-acc-avatar { width: 68px; height: 68px; margin: 0 12px 0 18px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.join-acc-name { font-size: 16px; font-weight: bold; color: #252B3A; line-height: 22px; }
.join-acc-main { background: #FF6403; color: #FFFFFF; font-size: 12px; font-weight: normal; padding: 2px 5px; margin-right: 6px; border-radius: 2px; vertical-align: 2px; }
.join-acc-store { color: #FF6403; }
.join-acc-time { margin-top: 6px; font-size: 12px; color: #575D6C; line-height: 17px; }
.join-acc-btns { margin-top: 20px; display: flex; justify-content: space-between; }
.join-acc-back {
  width: 176px;
  height: 40px;
  border: 1px solid #D90E19;
  border-radius: 4px;
  box-sizing: border-box;
  color: #D90E19;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.join-acc-sure {
  width: 176px;
  height: 40px;
  background: #D90E19;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.join-acc-sure.disabled { opacity: .6; cursor: default; }

/* ---------- 未注册确认弹框（z-index 10003 > 放大层 10002） ---------- */
.join-confirm { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10003; }
.join-confirm.show { display: block; }
.join-confirm-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(3, 0, 41, 0.5); }
.join-confirm-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 36px 32px 28px;
  box-sizing: border-box;
  text-align: center;
}
.join-confirm-txt { font-size: 16px; color: #252B3A; line-height: 24px; }
.join-confirm-btns { margin-top: 28px; display: flex; justify-content: center; gap: 20px; }
.join-confirm-cancel, .join-confirm-ok {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.join-confirm-cancel { border: 1px solid #D90E19; color: #D90E19; }
.join-confirm-ok { background: #D90E19; color: #FFFFFF; }
#join_popup_wholesaler {width: 1010px}
#join_popup_wholesaler .join-panel-l {width: 480px}