/* ============================================
   企业微信扫码登录样式 - 新布局模式
   ============================================ */

/* 登录二维码基础样式 */
.login-qrcode {
    display: block;
}

/* 横幅内部显示容器：固定宽高与右侧 login-box-wrap 一致，切换企业微信/钉钉时白框不抖动 */
.banner-inner-show-new {
    position: relative;
    background: rgba(255,255,255,0.5);
    border-radius: 20px 0px 0px 20px;
    backdrop-filter: blur(6px);
    height: 594px;
    min-height: 594px;
    box-sizing: border-box;
}

/* 背景样式 */
.inner-bg-1 {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    backdrop-filter: blur(6px);
}

/* 登录框包装器 */
.lzu-login>.main>.banner>.inner>.login-box-wrap {
    background: #fff;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    height: 594px;
    top: 22px;
}

/* 新布局模式下的企业微信扫码登录样式 */
.login-qrcode-wechat-new,
.login-qrcode-dingtalk-new,
.login-qrcode-yixiaoyuan-new {
    padding: 0;
    box-sizing: border-box;
}

/* 登录表单容器 */
.login-qrcode-wechat-new .loginForm,
.login-qrcode-dingtalk-new .loginForm,
.login-qrcode-yixiaoyuan-new .loginForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 600px;
}

/* 二维码容器 */
.login-qrcode-wechat-new .qrcode-container,
.login-qrcode-dingtalk-new .qrcode-container,
.login-qrcode-yixiaoyuan-new .qrcode-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-qrcode-wechat-new .winxin-desc{
    position: relative;
    display: inline-block;
}

.login-qrcode-wechat-new .winxin-desc h1{
    font-size: 14px;
    width: 320px;
    text-align: left;
    cursor: pointer;
    font-weight: normal;
}
.login-qrcode-wechat-new .dingding-desc{
    position: relative;
    display: inline-block;
}

.login-qrcode-wechat-new .dingding-desc h1{
    font-size: 14px;
    width: 320px;
    text-align: left;
    cursor: pointer;
    font-weight: normal;
}

/* 易校园说明：行为与企业微信/钉钉一致（hover 延时展开 content） */
.login-qrcode-wechat-new .yixiaoyuan-desc{
    position: relative;
    display: none;
}

/* 仅在并存模式切换到易校园时展示一行标题 */
.login-qrcode-banner-combined.scan-type-yixiaoyuan .yixiaoyuan-desc{
    display: inline-block;
}

.login-qrcode-wechat-new .yixiaoyuan-desc h1{
    font-size: 14px;
    width: 320px;
    text-align: left;
    cursor: pointer;
    font-weight: normal;
}

.login-qrcode-wechat-new .winxin-desc .content,
.login-qrcode-wechat-new .dingding-desc .content,
.login-qrcode-wechat-new .yixiaoyuan-desc .content{
    display: none;
    position: absolute;
    left: 0;
    top: 28px;
    max-width: 460px;
    padding: 8px 12px;
    background:rgb(255, 255, 255,0.92);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    font-size: 12px;
    line-height: 18px;
    color: #333333;
    z-index: 9999; /* 保证层级最高，避免被遮挡 */
    box-sizing: border-box;
}

.login-qrcode-wechat-new .winxin-desc .content::after,
.login-qrcode-wechat-new .dingding-desc .content::after,
.login-qrcode-wechat-new .yixiaoyuan-desc .content::after{
    content: "";
    position: absolute;
    top: -6px;
    left: 18px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent rgb(255, 255, 255,0.92) transparent;
}

.login-qrcode-wechat-new .winxin-desc .content a,
.login-qrcode-wechat-new .dingding-desc .content a,
.login-qrcode-wechat-new .yixiaoyuan-desc .content a{
    color: #0066cc;
    text-decoration: underline;
}
.login-qrcode-wechat-new .winxin-desc .content h2,
.login-qrcode-wechat-new .dingding-desc .content h2,
.login-qrcode-wechat-new .yixiaoyuan-desc .content h2{
    font-size: 12px;
    margin: 0 0 2px 0;
    font-weight: normal;
    color: #333333;
}

.login-qrcode-wechat-new .winxin-desc .content p,
.login-qrcode-wechat-new .dingding-desc .content p,
.login-qrcode-wechat-new .yixiaoyuan-desc .content p{
    margin: 0;
    color: #333333;
}

/* 二维码默认容器（企业微信 / 仅钉钉 单独模式保持一致） */
.login-qrcode-wechat-new .qrcode-container .qywxEwmBox-default,
.login-qrcode-dingtalk-new .qrcode-container .qywxEwmBox-default,
.login-qrcode-yixiaoyuan-new .qrcode-container .qywxEwmBox-default {
    display: flex;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 380px;
    overflow: hidden;
    border-radius: 16px;
    border: 4px solid rgba(255, 255, 255, 0.4);
}

/* 使用说明容器 */
.login-qrcode-wechat-new .qrcode-usage-info,
.login-qrcode-dingtalk-new .qrcode-usage-info,
.login-qrcode-yixiaoyuan-new .qrcode-usage-info {
    width: 84%;
    padding: 20px 30px;
    position: absolute;
    margin-top: auto;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    font-size: 14px;
    bottom: 30px;
}

/* 使用说明标题 */
.login-qrcode-wechat-new .qrcode-usage-title,
.login-qrcode-dingtalk-new .qrcode-usage-title,
.login-qrcode-yixiaoyuan-new .qrcode-usage-title {
    text-align: left;
    font-style: normal;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #333333;
    position: relative;
}

.login-qrcode-wechat-new .qrcode-usage-title img,
.login-qrcode-dingtalk-new .qrcode-usage-title img,
.login-qrcode-yixiaoyuan-new .qrcode-usage-title img{
    position: relative;
    top: 5px;
    margin-right: 8px;
}

/* 使用说明提示文字 */
.login-qrcode-wechat-new .qrcode-usage-tip,
.login-qrcode-dingtalk-new .qrcode-usage-tip,
.login-qrcode-yixiaoyuan-new .qrcode-usage-tip {
    margin-bottom: 5px;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
}

/* 使用说明链接 */
.login-qrcode-wechat-new .qrcode-usage-link,
.login-qrcode-dingtalk-new .qrcode-usage-link,
.login-qrcode-yixiaoyuan-new .qrcode-usage-link {
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    color: #3153c7;
}

/* 使用说明链接 - 悬停状态 */
.login-qrcode-wechat-new .qrcode-usage-link:hover,
.login-qrcode-dingtalk-new .qrcode-usage-link:hover,
.login-qrcode-yixiaoyuan-new .qrcode-usage-link:hover {
    text-decoration: underline;
}

/* Loading 遮罩层：企业微信 & 仅钉钉单独模式保持一致的大卡片样式 */
.login-qrcode-wechat-new .wecom-loading-mask,
.login-qrcode-dingtalk-new .wecom-loading-mask,
.login-qrcode-yixiaoyuan-new .wecom-loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    z-index: 100;
    height: 594px;
}

/* ============================================
   新版布局 - 企业微信与钉钉并存（其他登录方式）
   ============================================ */
.login-qrcode-banner-combined .wecom-loading-mask-combined {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 100;
    height: 594px;
}

.login-qrcode-banner-combined .qrcode-usage-info-combined {
    margin-bottom: 0;
    position: relative;
    bottom: auto;
}

/* 并存模式：左侧与右侧等高，避免切换钉钉时白框高度变化 */
.login-qrcode-banner-combined .loginForm {
    height: 594px;
    min-height: 594px;
}

.login-qrcode-banner-combined .qrcode-container-combined {
    margin-top: 12px;
}

.login-qrcode-banner-combined .qrcode-container-combined .qywxEwmBox-default {
    margin-top: 20px;
    width: 320px;
    height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: #ffffff;
    border: 4px solid rgba(255, 255, 255, 0.4);
}

/* 易校园：生成二维码（非 iframe 嵌套页面） */
.login-qrcode-banner-combined.scan-type-yixiaoyuan .qrcode-container-combined .qywxEwmBox-default {
    overflow: hidden;
    align-items: center;
}

.login-qrcode-banner-combined .yixiaoyuan-qrcode-wrapper,
.login-qrcode-banner-combined .yixiaoyuan-qrcode-inner,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qrcode-wrapper,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qrcode-inner {
    width: 100%;
    height: 100%;
}

.login-qrcode-banner-combined .yixiaoyuan-qrcode-inner,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qrcode-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    box-sizing: border-box;
}

/* 标题文案（风格参考截图） */
.login-qrcode-banner-combined .yixiaoyuan-qr-title,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qr-title {
    width: 100%;
    text-align: center;
    color: #111;
}

.login-qrcode-banner-combined .yixiaoyuan-qr-h1,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qr-h1 {
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
}

.login-qrcode-banner-combined .yixiaoyuan-qr-h2,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qr-h2 {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
    line-height: 18px;
}

/* 二维码区域：白底圆角卡片 + 中心 logo */
.login-qrcode-banner-combined .yixiaoyuan-qr-wrap,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qr-wrap {
    position: relative;
    width: 256px;
    height: 256px;
    border-radius: 20px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-qrcode-banner-combined .yixiaoyuan-qr-box,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qr-box {
    width: 220px;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 0 0 1.5px rgba(49, 83, 199, 0.18);
}

.login-qrcode-banner-combined .yixiaoyuan-qr-box img,
.login-qrcode-banner-combined .yixiaoyuan-qr-box canvas,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qr-box img,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qr-box canvas {
    display: block;
    width: 280px;
    height: 280px;
    border-radius: 0;
}

.login-qrcode-banner-combined .yixiaoyuan-qr-logo,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qr-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.95);
    pointer-events: none;
}

.login-qrcode-banner-combined .yixiaoyuan-qr-logo img,
.login-qrcode-yixiaoyuan-new .yixiaoyuan-qr-logo img {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: block;
}

.login-qrcode-banner-combined .yixiaoyuan-qrcode-tip {
    display: inline-block;
    font-size: 14px;
    color: #3153c7;
    text-decoration: none;
}

.login-qrcode-banner-combined .yixiaoyuan-qrcode-tip:hover {
    text-decoration: underline;
}

.login-qrcode-banner-combined .qrcode-usage-tip-scan-hint {
    font-size: 14px;
    color: #353535;
    margin-top: 5px;
    text-align: center;
    text-align: left;
    width: 320px;
}

.login-qrcode-banner-combined .qrcode-usage-info-tips {
    bottom: 70px;
}

/* 其他登录方式（横幅下方卡片样式） */
.other-login-methods {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    padding: 10px 26px 8px;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 260px;
}

.other-login-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #333333;
    margin-bottom: 8px;
}

.other-login-label span {
    margin: 0 10px;
    white-space: nowrap;
}

.other-login-label .left-line,
.other-login-label .right-line {
    display: inline-block;
    width: 100px;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
}

.other-login-label .right-line {
    transform: scaleX(-1);
}

.other-login-icons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    width: 320px;
}

.other-login-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: #000000;
    width: 56px;
    font-size: 12px;
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.other-login-item .img-wrap{
    position: relative;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.other-login-item .img-wrap img {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: #f5f6fa;
    object-fit: contain;
    margin: 8px auto;
}

.other-login-item .img-wrap .checked {
    display: none;
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
}

.other-login-item .text {
    line-height: 1;
    margin-top: 10px;
}

.other-login-item-active {
    font-weight: 600;
}

.other-login-item-active .img-wrap .checked{
    display: block;
}

/* 钉钉 iframe 外层专用包裹器，可单独控制钉钉码样式 */
.dingtalk-qrcode-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background:#ffffff;
}

/* 钉钉二维码：初始隐藏 + 准备好后一次性展示（减少闪烁） */
.dingtalk-qrcode-wrapper--init-hidden{
    opacity: 0;
    visibility: hidden;
}
.dingtalk-qrcode-wrapper--visible{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}


/* 并存模式 banner：钉钉加载动画在白色二维码小卡片内居中偏上一点 */
.login-qrcode-banner-combined #banner-scan-qrcode-container .wecom-loading-mask .wecom-loading-spinner {
    transform: translateY(-80px);
}

/* Tab 中钉钉扫码样式，参考 banner 钉钉码 */
.login-qrcode-dingtalk .loginForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.login-qrcode-dingtalk .qywxEwmBox-default {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 钉钉 tab 下的二维码卡片略加宽，展示更舒展 */
    width: 520px;
    height: 380px;
    margin-top: 24px;
    overflow: hidden;
    border-radius: 12px;
    border: none;
}

/* 仅钉钉 banner：加载动画在白色二维码小卡片内居中偏上一点 */
.login-qrcode-dingtalk-new #banner-dingtalk-qrcode-container .wecom-loading-mask .wecom-loading-spinner {
    transform: translateY(-80px);
}

/* 钉钉二维码 iframe 紧凑样式 */
.dingtalk-qrcode-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    &--init-hidden {
        opacity: 0;
        visibility: hidden;
    }
    &--visible {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease;
    }
}
.dingtalk-qrcode-inner {
    overflow: hidden;
    width: 100%;
    height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    iframe {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) scale(0.75);
        width: 1380px !important;
        height: 650px !important;
        top: -65px;
        margin-top: 0;
    }
}