/* 2FA 验证页面 — 匹配 modown 主题风格 (v2 — 提升优先级)
   [本地改造 2026-11-10 之二] 两处 2FA 观感统一：
   · 后台 wp-login.php 的 2FA 页 → 本文件前面那套 body.login 规则
   · 前台（登录弹窗 + 独立登录页 /login/）的 2FA 步骤 → 由
     modown_c1_frontend_2fa_fragment() 输出的「表单片段」就地显示，
     复用同一批尺寸（带 .hs2-2fa 的那几组选择器），不再是注入一整张 wp-login 页面。
*/

/* 重置全局 */
body.login { background: #f5f5f5 !important; }
body.login #login { width: 400px; max-width: 90%; padding: 0; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); }
body.login #login h1 { display: none !important; }
body.login #login #login_error,
body.login #login .message { border: none !important; background: #fff; color: #e2401c; box-shadow: 0 0 20px rgba(0,0,0,.08) !important; border-radius: 12px; padding: 15px 20px; margin-bottom: 20px; font-size: 14px; border-left: 3px solid #e2401c; }
body.login #login .message { color: #46b450; border-left-color: #46b450; }

/* 表单卡片
   ⚠️ 前台独立登录页的主题登录表单也叫 id="loginform"（class="loginform"），
   不加 :not(.loginform) 就会把这个前台登录表单也套上「2FA 卡片」的
   白底 + 40/35 内边距 + 20px 圆角 + 阴影，把账密框从 340 压到 270。
   后台的两个表单（wp-login.php 的账密表单与插件的 2FA 表单）都没有这个 class，不受影响。 */
body.login div#login form#loginform,
body.login #loginform:not(.loginform) { background: #fff !important; border: none !important; box-shadow: 0 0 20px rgba(0,0,0,.08) !important; border-radius: 20px; padding: 40px 35px !important; margin-top: 0 !important; }
body.login #loginform:not(.loginform) p { margin-bottom: 0 !important; }
.hs2-2fa p { margin: 0 0 12px !important; }

/* 提示文字 */
body.login .two-factor-prompt,
.hs2-2fa .two-factor-prompt { color: #666 !important; font-size: 14px; text-align: center; margin-bottom: 25px !important; line-height: 1.6; }

/* 标签 */
body.login #loginform label,
.hs2-2fa label { display: block; font-size: 13px; color: #999; margin-bottom: 8px; font-weight: normal; }

/* 验证码输入框 */
body.login #loginform input.input.authcode,
.hs2-2fa input.input.authcode { width: 100% !important; height: 48px !important; padding: 12px 15px !important; font-size: 20px !important; letter-spacing: .4em; text-align: center; border: 1px solid #eaeaea !important; border-radius: 10px !important; background: #fafafa !important; color: #333 !important; transition: border-color 0.3s, box-shadow 0.3s; box-sizing: border-box; font-weight: 500; margin: 0 !important; min-height: auto !important; line-height: 1.5; box-shadow: none !important; }
body.login #loginform input.input.authcode:focus,
.hs2-2fa input.input.authcode:focus { border-color: var(--theme-color, #07c160) !important; box-shadow: 0 0 0 3px rgba(7,193,96,0.1) !important; background: #fff !important; outline: none; }
body.login #loginform input.input.authcode::placeholder,
.hs2-2fa input.input.authcode::placeholder { color: #ccc; letter-spacing: .2em; font-size: 16px; font-weight: normal; }

/* 提交按钮 —— [本地改造 2026-11-10] 纯色（原为渐变，两处登录观感不一致） */
body.login #loginform p.submit input#wp-submit,
body.login #loginform p.submit .button-primary,
body.login #loginform .submit .button,
.hs2-2fa .hs2-2fa-form p.submit input[type="submit"],
.hs2-2fa .hs2-2fa-form .button-primary { width: 100% !important; height: 48px !important; font-size: 16px !important; font-weight: 500 !important; border: none !important; border-radius: 10px !important; background: var(--theme-color, #07c160) !important; background-image: none !important; color: #fff !important; cursor: pointer; margin-top: 20px !important; transition: opacity 0.3s; float: none !important; padding: 0 24px !important; line-height: 48px !important; min-height: auto !important; text-shadow: none !important; }
body.login #loginform p.submit input#wp-submit:hover,
body.login #loginform .submit .button:hover,
.hs2-2fa .hs2-2fa-form p.submit input[type="submit"]:hover,
.hs2-2fa .hs2-2fa-form .button-primary:hover { opacity: 0.85 !important; }
body.login #loginform p.submit input#wp-submit:disabled,
body.login #loginform .submit .button:disabled,
.hs2-2fa .hs2-2fa-form p.submit input[type="submit"]:disabled,
.hs2-2fa .hs2-2fa-form .button-primary:disabled { opacity: 0.5 !important; cursor: not-allowed; }

/* 备用验证链接 */
body.login .backup-methods-wrap,
.hs2-2fa .backup-methods-wrap { background: transparent !important; text-align: center; padding: 0 !important; margin: 20px 0 !important; border: none !important; }
body.login .backup-methods-wrap p,
.hs2-2fa .backup-methods-wrap p { color: #999; font-size: 13px; margin-bottom: 8px; }
body.login .backup-methods-wrap ul,
.hs2-2fa .backup-methods-wrap ul { list-style: none; padding: 0; margin: 0; }
body.login .backup-methods-wrap ul li,
.hs2-2fa .backup-methods-wrap ul li { margin-bottom: 5px; }
body.login .backup-methods-wrap a,
.hs2-2fa .backup-methods-wrap a { color: var(--theme-color, #07c160); font-size: 13px; text-decoration: none; transition: opacity 0.3s; }
body.login .backup-methods-wrap a:hover,
.hs2-2fa .backup-methods-wrap a:hover { opacity: 0.7; }

/* 隐藏默认元素 */
body.login #backtoblog,
body.login #nav,
body.login .privacy-policy-page-link,
body.login .language-switcher { display: none !important; }

/* 移动端 */
@media (max-width: 480px) {
  body.login #loginform:not(.loginform) { padding: 30px 20px !important; border-radius: 16px; }
  body.login #loginform input.input.authcode,
  .hs2-2fa input.input.authcode { font-size: 18px !important; height: 44px !important; }
  body.login #loginform p.submit input#wp-submit,
  body.login #loginform .submit .button,
  .hs2-2fa .hs2-2fa-form p.submit input[type="submit"],
  .hs2-2fa .hs2-2fa-form .button-primary { height: 44px !important; font-size: 15px !important; line-height: 44px !important; }
}

/* ==========================================================================
   [本地改造 2026-11-10 之二] 前台（登录弹窗 + 独立登录页 /login/）的 2FA 步骤
   ─ 2FA 表单由 modown_c1_frontend_2fa_fragment() 以「片段」形式就地插入：
     独立登录页插进 <p class="sign-tips2">，登录弹窗插进 <div class="sign-tips">。
   ─ 为什么不是整页：前台登录是 AJAX，插件原本在 wp_login 里渲染一整张 wp-login
     页面（含 <style>/<link>/180px logo）再 exit，整页被 jQuery .html() 塞进登录框 ——
     登录框被撑高 109px，主题又用 top:50%+translateY(-50%) 居中，于是整体上移 124px，
     视口一矮就顶出上沿（就是「界面会移动 / 跑到左上」）。
   ─ 下面把片段摆平成正常内容，尺寸与后台 2FA 页共用上面同一批规则。
   ========================================================================== */

/* 片段本体 */
.hs2-2fa { width: 100%; box-sizing: border-box; color: #666; font-size: 14px; line-height: 1.6; }
.hs2-2fa * { box-sizing: border-box; }
.hs2-2fa .hs2-2fa-form { display: block; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; background: none !important; border: none !important; box-shadow: none !important; }

/* 独立登录页：.sign-tips2 默认 display:none（主题 login.css），装了 2FA 必须显示 */
body.login .sign-tips2:has(#authcode) {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	text-align: left !important;
	overflow: visible !important;
}

/* 独立登录页：2FA 时收起账密行与「登录」按钮。
   注意不能连 .sign-tips2 一起收 —— 2FA 表单就装在它里面。
   h2 站标保留：这样盒子高度几乎不变，主题 login.css 的垂直居中不会把盒子顶出去。 */
body.login .loginbox:has(#authcode) .part > form.loginform > *:not(.sign-tips2) {
	display: none !important;
}

/* 登录弹窗：.sign-tips 是主题的「一条红色提示条」
   （绝对定位吸底 / height:0 / overflow:hidden / 白字红底），装了 2FA 要变成正常块 */
.sign-tips:has(#authcode) {
	position: static !important;
	height: auto !important;
	overflow: visible !important;
	background: none !important;
	color: inherit !important;
	font-size: 14px !important;
	line-height: normal !important;
	padding: 30px 30px 0 !important;
	text-align: left !important;
}

/* 弹窗里 2FA 时收起登录表单本身（表单是 .sign-wrap 的直接子元素） */
.sign-wrap:has(#authcode) > form { display: none !important; }

/* 主题 login.css 的 .submit 是给「登录」按钮用的整块主题色，
   而插件的按钮外面包着 <p class="submit"> —— 还原成普通段落，别变成一条蓝条 */
.hs2-2fa p.submit {
	background: none !important;
	color: inherit !important;
	padding: 0 !important;
	width: auto !important;
	border: none !important;
	border-radius: 0 !important;
	text-align: left !important;
	margin: 0 !important;
	float: none !important;
}

/* 移动端（前台片段） */
@media (max-width: 480px) {
  .sign-tips:has(#authcode) { padding: 24px 20px 0 !important; }
}