/* ============================================
   自定义登录样式 - Custom WeChat Login Plugin
   ============================================ */

/* 整体背景 */
body.login {
    background: #FAF7F2;
    font-family:  sans-serif;
}


/* 登录容器布局 */
#login {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo样式 */
#login h1 a {
    background-size: contain;
    width: 200px;
    height: 100px;
    margin-bottom: 20px;
}

/* 切换布局包装容器 - 一次只显示一个 */
#login .login-layout-wrapper {
    width: 100%;
    max-width: 400px;
    margin: 0px auto;
    position: relative;
    min-height: 300px;
}

/* 登录表单在布局包装内 - 默认隐藏 */
.login-layout-wrapper > #loginform {
    display: none;
    background: transparent;
    box-shadow: none;
    width: 100%;
}

/* 二维码容器在布局包装内 - 默认显示 */
.login-layout-wrapper > .wechat-qr-container {
    display: flex;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.login form .input, .login input[type=password], .login input[type=text] {
    margin-bottom: 21px;

}

.login label {
    font-size: 13px;
    }

/* 切换到微信登录时：完全隐藏所有登录表单相关元素，显示二维码 */
.login-layout-wrapper.show-wechat #loginform {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.login-layout-wrapper.show-wechat #loginform * {
    display: none !important;
}

.login-layout-wrapper.show-wechat .wechat-qr-container {
    display: flex;
		transform:scale(0.7); 
	
}

/* 显示二维码时，显示切换到用户名登录按钮（微信首选登录按钮已隐藏） */
.login-layout-wrapper.show-wechat .switch-to-login-button {
    display: block;
}

.login-layout-wrapper.show-wechat .wechat-primary-login-button {
    display: none !important;
}

/* 切换到账号登录时：显示表单，隐藏二维码 */
.login-layout-wrapper.show-custom #loginform {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

.login-layout-wrapper.show-custom #loginform * {
    display: revert;
    pointer-events: auto !important;
}

.login-layout-wrapper.show-custom #loginform input,
.login-layout-wrapper.show-custom #loginform input[type="text"],
.login-layout-wrapper.show-custom #loginform input[type="password"],
.login-layout-wrapper.show-custom #loginform input[type="email"],
.login-layout-wrapper.show-custom #loginform input[type="checkbox"],
.login-layout-wrapper.show-custom #loginform input[type="submit"],
.login-layout-wrapper.show-custom #loginform button {
    display: revert !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* 特别确保密码输入框可以交互 */
.login-layout-wrapper.show-custom #loginform input[type="password"] {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: text !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    background: rgba(51, 51, 51, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.49) !important;
}

.login-layout-wrapper.show-custom .wechat-qr-container {
    display: none !important;
}

/* 显示表单时，隐藏切换到用户名登录按钮和微信首选登录按钮 */
.login-layout-wrapper.show-custom .switch-to-login-button {
    display: none !important;
}

.login-layout-wrapper.show-custom .wechat-primary-login-button {
    display: none !important;
}

/* 表单容器 - 素雅风格 */
.login form {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0px;
    border: none;
    margin-bottom: 20px;
}

/* 隐藏用户名和密码的标签，使用placeholder代替（但保留"记住我"的label） */
.login form label[for="user_login"],
.login form label[for="user_pass"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* 隐藏密码显示/隐藏按钮 */
.login form button.wp-hide-pw,
.login form button.hide-if-no-js,
.login form button[aria-label*="密码"],
.login form button[aria-label*="显示"],
.login form button[aria-label*="隐藏"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* 为输入框添加placeholder样式 */
.login form input[type="text"]::placeholder,
.login form input[type="password"]::placeholder,
.login form input[type="email"]::placeholder {
    color: #999;
    opacity: 0.7;
}

/* 输入框样式 - 参考btn2风格 */
.login form .input,
.login form input[type="text"],
.login form input[type="password"],
.login form input[type="email"] {
    font-family: var(--h1-font-family, inherit);
    font-style: normal;
    font-size: 12px;
    line-height: 1.20 !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 1.3em 3em;
    transition-duration: 0.3s;
    border-radius: 3em;
    transition-timing-function: ease;
    background: rgba(51, 51, 51, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.49);
    border-image: none;
    color: #333 !important;
    width: 100%;
    box-sizing: border-box;
    pointer-events: auto !important;
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
}

.login form .input:focus,
.login form input[type="text"]:focus,
.login form input[type="password"]:focus,
.login form input[type="email"]:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(51, 51, 51, 0.1);
}

/* Checkbox样式 - 参考btn2风格 */
.login form input[type="checkbox"] {
    font-family: var(--h1-font-family, inherit);
    font-style: normal;
    font-size: 12px;
    line-height: 1.20 !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    transition-duration: 0.3s;
    border-radius: 50%;
    transition-timing-function: ease;
    background: rgba(51, 51, 51, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.49);
    border-image: none;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    position: relative;
}

/* Checkbox选中状态 - 显示圆点 */
.login form input[type="checkbox"]:checked {
    background: rgba(51, 51, 51, 0.07);
    border-color: rgba(255, 255, 255, 0.49);
}

.login form input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #333333;
    border-radius: 50%;
    margin: 0;
}

/* 底部容器 - 包含记住我和导航链接，一行显示，居中，小字 */
.login .login-bottom-container {
    margin-top: 20px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    flex-wrap: wrap;
}

/* 记住我容器 */
.login .remember-me-container {
    display: flex;
    align-items: center;
    font-size: 13px;
}

/* 导航链接（忘记密码、注册） */
.login .login-bottom-container #nav {
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.login .login-bottom-container #nav a {
    font-size: 13px;
    color: #666;
    text-decoration: none;
}

.login .login-bottom-container #nav a:hover {
    color: #333;
    text-decoration: underline;
}

/* 按钮容器 - 并排显示，填充满容器 */
.login .button-container {
    display: flex !important;
    gap: 10px;
   
    align-items: stretch;
    width: 100%;
    flex-wrap: nowrap;
     margin:25px 0;
}

/* 主要登录按钮 - btn1主风格（在按钮容器内，左侧，占据剩余空间） */
.login .button-container .button-primary,
.login .button-container input[type="submit"].button-primary,
.login .button-container input[type="submit"],
.login .button-container #wp-submit {
    font-family: var(--h1-font-family, inherit);
    font-style: normal;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.2 !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 1.3em 3em;
    transition-duration: 0.3s;
    border-radius: 3.4em;
    transition-timing-function: ease;
    --btn-height: calc(1.2em + 2 * 1.3em);
    background: var(--color-black, #000000);
    border-color: transparent;
    border-image: none;
    color: var(--color-header-middle-bg, #ffffff) !important;
    border: none;
    cursor: pointer;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto;
}

.login .button-container .button-primary:hover,
.login .button-container input[type="submit"].button-primary:hover {
    opacity: 0.9;
    transition-duration: 0.3s;
}
.remember-me-container{
    font-style: 13px;
    color:#666 !important;

}

/* 微信登录按钮 - 圆形，使用SVG图标，微信深绿色背景（右侧，与登录按钮等高） */
.login .wechat-login-button {
    width: 50px;
    min-width: 50px;
    height: auto;
    min-height: 50px;
    border-radius: 50%;
    padding: 0;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    background: #07c160;
    border: none;
    cursor: pointer;
    flex: 0 0 50px;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    align-self: stretch;
}

.login .wechat-login-button svg,
.login .wechat-login-button img {
    width: 28px;
    height: 28px;
    display: block;
    filter: brightness(0) invert(1);
}

.login .wechat-login-button:hover {
    background: #06ad56;
    transition-duration: 0.3s;
    transform: scale(1.05);
}

/* 切换到用户名登录按钮（二维码外部）- btn2浅色风格 */
.login .switch-to-login-button {
    font-family: var(--h1-font-family, inherit);
    font-style: normal;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.20 !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 1.3em 3em;
    transition-duration: 0.3s;
    border-radius: 3em;
    transition-timing-function: ease;
    --btn-height: calc(1.20em + 2 * 1.3em);
    background: rgba(51, 51, 51, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.49);
    border-image: none;
    color: #333333 !important;
    text-align: center;
    text-decoration: none;
    display: block;
    cursor: pointer;
    margin: 0 auto ;
    width: auto;
    max-width: 200px;
}

.login .switch-to-login-button:hover {
    background: rgba(51, 51, 51, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
    color: #333333 !important;
    transition-duration: 0.3s;
}

/* 微信首选登录按钮（二维码外部，切换按钮下方）- btn1主风格 - 已隐藏 */
.login .wechat-primary-login-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

.login .wechat-primary-login-button:hover {
    display: none !important;
}

/* 忘记密码链接颜色 */
#nav a, #backtoblog a {
    color: #0073aa;
}

/* 自定义欢迎消息 */
.login #login_error, .login .message {
    border-left: 4px solid #0073aa;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ============================================
   隐藏语言切换器、返回链接和大写锁定警告
   ============================================ */

.language-switcher {
    display: none !important;
}

#backtoblog {
    display: none !important;
}

#caps-warning {
    display: none !important;
    visibility: hidden !important;
}

/* ============================================
   登录方式切换容器 - 隐藏
   ============================================ */

.login-method-tabs {
    display: none !important;
}

.login-method-tab {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    transition: all 0.3s;
}

.login-method-tab:hover {
    color: #0073aa;
}

.login-method-tab.active {
    color: #0073aa;
    border-bottom-color: #0073aa;
    font-weight: bold;
}

/* 如果登录表单不在包装容器内，也确保可见 */
body.login #loginform {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent;
    box-shadow: none;
}

/* 微信二维码容器 */
.wechat-qr-container {
    text-align: center;
    min-height: 400px;
    margin: 0 auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
}

.wechat-qr-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
	min-height:400px;

}
 
/* 二维码占位提示（当没有二维码时显示） */
.wechat-qr-container.placeholder .qr-placeholder-text {
    text-align: center;
    color: #999;
    font-size: 14px;
    line-height: 1.5;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* 微信按钮授权（手机端） */
.wechat-btn-container {
    text-align: center;
    padding: 20px;
}

.wechat-login-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #07c160;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    transition: background 0.3s;
}

.wechat-login-btn:hover {
    background: #06ad56;
    color: #fff;
}

/* 自定义登录表单 */
.custom-login-form {
    display: none;
}

.custom-login-form.active {
    display: block;
}

/* 确保登录表单可见（临时并排显示，不移动表单） */
body.login #loginform {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 当表单被移动到自定义容器后显示 */
.custom-login-form #loginform {
    display: block !important;
}

/* 确保自定义登录表单容器可见 */
.custom-login-form {
    min-height: 200px;
}

/* 如果没有微信登录选项，默认显示账号登录（通过JavaScript添加.no-wechat类） */

/* ============================================
   响应式设计 - 手机端样式
   ============================================ */

@media (max-width: 768px) {
    .login-content {
        flex-direction: column;
        align-items: center;
    }
    
    .login-method-tabs {
        display: none; /* 手机端隐藏切换标签 */
    }

    .wechat-btn-container {
        margin-bottom: 20px;
    }

    .custom-login-form {
        display: block !important; /* 手机端始终显示 */
        margin-top: 20px;
        width: 100%;
        max-width: 100%;
    }

    .custom-login-form #loginform {
        display: block !important;
    }

    .wechat-qr-container {
        width: 100%;
    }
    
    body.login #loginform {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   响应式设计 - PC端样式
   ============================================ */

@media (min-width: 769px) {
    .wechat-qr-container {
        display: flex;
    }

    /* 并排显示时，两个区域都显示 */
    .custom-login-form {
        display: block;
    }

    .wechat-btn-container {
        display: none; /* PC端隐藏按钮授权 */
    }
    
    /* 确保登录表单可见 */
    body.login #loginform {
        display: block !important;
    }
    
}