/* bb-login-page.css — WP 核心登录系页面（2026-10-03 · 分栏式布局 v3）
 *
 * 覆盖：wp-login.php 的 登录 / 注册 / 忘记密码 / ?action=rp（重设密码）/ 错误提示页
 * 布局：**左品牌区 + 右表单区**分栏（宽屏）；窄屏自动叠成单列
 * 品牌区：**上**=眉标+站点 logo；**下**=业务要点 + 语言切换器（贴底 ✓）
 *         （语言切换器由 bb-companion 的 login_footer JS 从 body 搬进 #login h1 ✓）
 * 材质：底 #2f3034 柔光 · 面板 #474951 · 外框 16px #2F3034 · 24px 圆角
 *       输入井 #3B3D44 · 主按钮实心紫 var(--bb-accent,#635DFF) · 链接淡紫 #B9B3FF · 成功绿 / 失败红
 */

/* ---------- 页面与外壳 ---------- */
body.login {
	background-color: #2f3034;
	background-image:
		radial-gradient(1100px 720px at 20% 16%, rgba(99, 93, 255, 0.10), transparent 62%),
		radial-gradient(900px 620px at 84% 88%, rgba(99, 93, 255, 0.06), transparent 62%);
	background-attachment: fixed;
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 20px;
	box-sizing: border-box;
	font-family: Ubuntu, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
body.login #login {
	width: 100%;
	max-width: 1000px;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	background: #474951;
	border: 16px solid #2f3034;
	border-radius: 24px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

/* =========================================================
   左：品牌区 —— 上（眉标+logo） / 下（要点+语言）
   用 flex 的 order 控制顺序：伪元素天然在子节点前后 ✗
   → ::before / a / ::after / .language-switcher 全部显式 order ✓
   再用 logo 的 margin-bottom:auto 把下方内容整体推到底部 ✓
   ========================================================= */
body.login #login h1 {
	grid-column: 1;
	grid-row: 1 / 99;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0;
	padding: 52px 42px;
	background-color: #2f3034;
	background-image: radial-gradient(420px 420px at 14% 92%, rgba(99, 93, 255, 0.16), transparent 72%);
	text-align: left;
}
/* ① 顶部 · 眉标 */
body.login #login h1::before {
	order: 1;
	content: var(--bb-login-kicker, "一站式印刷服务");
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.24em;
	color: #7b8291;
}
/* ② 顶部 · 站点 logo（margin-bottom:auto → 把要点/语言推到贴底 ✓）*/
body.login #login h1 a {
	order: 2;
	background-image: var(--bb-login-logo, url("/wp-content/uploads/2023/03/cropped-logoh3-02-01.webp")) !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	width: 190px !important;
	height: 45px !important;
	margin: 0 0 auto !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
	box-shadow: none !important;
}
/* ③ 贴底 · 业务要点 */
body.login #login h1::after {
	order: 3;
	content: var(--bb-login-points-a, "画册 · 海报 · 包装 · 手提袋")
	         "\A" var(--bb-login-points-b, "设计 · 打样 · 印刷 · 装订");
	white-space: pre-line;
	position: relative;
	padding-left: 18px;
	font-size: 13px;
	line-height: 2.1;
	letter-spacing: 0.04em;
	color: #9ba0ac;
	border-left: 2px solid var(--bb-accent,#635DFF);
}
/* ④ 贴底 · 语言切换器（JS 从 body 搬进 #login h1 后成为最后子节点 ✓）*/
body.login #login h1 .language-switcher {
	order: 4;
	position: static;
	margin: 26px 0 0;
	padding: 0;
	text-align: left;
	opacity: 1;
	z-index: auto;
}
body.login #login h1 .language-switcher form {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
body.login #login h1 .language-switcher label {
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	line-height: 1;
	color: #7b8291;
}
body.login #login h1 .language-switcher label .dashicons {
	width: 17px;
	height: 17px;
	font-size: 17px;
	color: #7b8291;
}
/* 下拉：暗色井 + 自绘小箭头（去掉系统样式 ✓ 更统一 ✓）*/
body.login #login h1 .language-switcher select {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 6px 28px 6px 11px;
	background-color: #3b3d44;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398a0ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
	border: 1px solid #565962;
	border-radius: 8px;
	color: #c9cdd6;
	font-size: 12px;
	line-height: 1.5;
	transition: border-color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
body.login #login h1 .language-switcher select:hover { border-color: #6c707a; }
body.login #login h1 .language-switcher select:focus {
	border-color: #7b6bff;
	box-shadow: 0 0 0 3px rgba(99, 93, 255, 0.18);
	outline: none;
}
/* 更改按钮：幽灵小胶囊（与右侧链接/次按钮同款 ✓）*/
body.login #login h1 .language-switcher .button,
body.login #login h1 .language-switcher .button-secondary {
	margin: 0 !important;
	padding: 0 14px !important;
	height: 30px !important;
	line-height: 28px !important;
	font-size: 12px !important;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid rgba(123, 107, 255, 0.5) !important;
	border-radius: 8px !important;
	color: #b9b3ff !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
}
body.login #login h1 .language-switcher .button:hover {
	background: rgba(123, 107, 255, 0.14) !important;
	border-color: rgba(123, 107, 255, 0.85) !important;
	color: #fff !important;
}

/* ---------- 右：表单与提示 ---------- */
body.login #login > form {
	grid-column: 2;
	box-sizing: border-box;
	margin: 0;
	padding: 54px 52px 8px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #c9cdd6;
}
body.login #login > form p { margin: 0 0 20px; }
body.login #login > form label {
	display: block;
	margin: 0 0 8px !important;
	font-size: 12px !important;
	letter-spacing: 0.06em;
	color: #98a0ad !important;
}
body.login #login > form .input,
body.login #login > form input[type="text"],
body.login #login > form input[type="password"],
body.login #login > form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	background: #3b3d44 !important;
	border: 1px solid #565962 !important;
	border-radius: 10px !important;
	padding: 13px 15px !important;
	min-height: 48px;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #eef0f4 !important;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color 0.22s ease-out, background 0.22s ease-out, box-shadow 0.22s ease-out;
}
body.login #login > form input[type="text"]:hover,
body.login #login > form input[type="password"]:hover,
body.login #login > form input[type="email"]:hover,
body.login #login > form .input:hover { border-color: #6c707a !important; }
body.login #login > form input:focus {
	background: #383a41 !important;
	border-color: #7b6bff !important;
	box-shadow: 0 0 0 3px rgba(99, 93, 255, 0.18) !important;
	outline: none !important;
}
/* 记住我 */
body.login #login .forgetmenot {
	float: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px !important;
	font-size: 13px;
	color: #98a0ad;
}
body.login #login .forgetmenot label { margin: 0 !important; font-size: 13px !important; color: #98a0ad !important; }
body.login input[type="checkbox"] { accent-color: var(--bb-accent,#635DFF); margin: 0; }
/* 主按钮：整宽实心紫 */
body.login #login .submit {
	float: none !important;
	margin: 8px 0 0 !important;
	clear: both;
}
body.login #login > form .submit input,
body.login #login > form .submit button,
body.login .wp-core-ui .button-primary {
	width: 100% !important;
	display: block !important;
	box-sizing: border-box;
	background: var(--bb-accent,#635DFF) !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%) !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 14px 22px !important;
	height: auto !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em;
	color: #fff !important;
	text-shadow: none !important;
	box-shadow: 0 8px 22px rgba(99, 93, 255, 0.32) !important;
	transition: background 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
body.login .wp-core-ui .button-primary:hover {
	background: #554ff0 !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%) !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(99, 93, 255, 0.4) !important;
}
body.login .wp-core-ui .button-primary:focus-visible {
	outline: 2px solid rgba(123, 107, 255, 0.85) !important;
	outline-offset: 3px !important;
}
/* 次按钮（幽灵）*/
body.login .button,
body.login .button-secondary {
	background: transparent !important;
	border: 1.5px solid rgba(123, 107, 255, 0.55) !important;
	border-radius: 10px !important;
	color: #b9b3ff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
body.login .wp-pwd .button.wp-hide-pw {
	background: transparent !important;
	border: 0 !important;
	color: #98a0ad !important;
	box-shadow: none !important;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
}
/* ---------- 表单标题（按动作区分 ✓ WP 的 body 自带 login-action-*）---------- */
body.login #login > form::before {
	display: block;
	margin: 0 0 26px;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.35;
	color: #f2f3f6;
}
body.login #login > form::after { display: block; content: none; }
body.login.login-action-login #login > form::before { content: var(--bb-login-title-login, "欢迎回来"); }
body.login.login-action-register #login > form::before { content: var(--bb-login-title-register, "创建账号"); }
body.login.login-action-lostpassword #login > form::before { content: var(--bb-login-title-lost, "找回密码"); }
body.login.login-action-rp #login > form::before { content: var(--bb-login-title-rp, "设置新密码"); }
body.login.login-action-resetpass #login > form::before { content: var(--bb-login-title-rp, "设置新密码"); }

/* ---------- 提示条 ---------- */
body.login #login .message,
body.login #login .success,
body.login #login .notice,
body.login #login #login_error {
	grid-column: 2;
	box-sizing: border-box;
	margin: 40px 52px 0 !important;
	padding: 12px 15px !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	font-size: 13px !important;
	line-height: 1.8 !important;
}
body.login #login .message,
body.login #login .success,
body.login #login .notice {
	color: #b7f0c2 !important;
	background: rgba(26, 173, 25, 0.12) !important;
	border-color: rgba(26, 173, 25, 0.35) !important;
}
body.login #login #login_error {
	color: #ffc9c9 !important;
	background: rgba(220, 38, 38, 0.12) !important;
	border-color: rgba(220, 38, 38, 0.35) !important;
}
body.login #login .message + form,
body.login #login .success + form,
body.login #login #login_error + form { padding-top: 22px; }

/* ---------- 底部链接 ---------- */
body.login #nav,
body.login #backtoblog {
	grid-column: 2;
	margin: 0 !important;
	padding: 18px 52px 0 !important;
	font-size: 13px;
	text-align: left;
	display: flex;
	gap: 18px;
}
body.login #nav { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 10px !important; padding-top: 20px !important; }
body.login #backtoblog { padding-top: 6px !important; padding-bottom: 42px !important; }
body.login #nav a,
body.login #backtoblog a,
body.login #login .message a { color: #b9b3ff !important; text-decoration: none; transition: color 0.2s ease-out; }
body.login #nav a:hover,
body.login #backtoblog a:hover { color: #fff !important; }

/* ---------- 密码强度 / 说明 ---------- */
body.login .pw-weak,
body.login .indicator-hint,
body.login #resetpassform p.description { color: #98a0ad !important; font-size: 12px; }
body.login #pass-strength-result {
	background: #3b3d44 !important;
	border: 1px solid #565962 !important;
	border-radius: 8px;
	color: #c9cdd6 !important;
	margin: 6px 0 10px;
}
body.login #pass-strength-result.strong,
body.login #pass-strength-result.good {
	background: rgba(26, 173, 25, 0.18) !important;
	border-color: rgba(26, 173, 25, 0.4) !important;
	color: #b7f0c2 !important;
}
body.login #pass-strength-result.bad,
body.login #pass-strength-result.short {
	background: rgba(220, 38, 38, 0.16) !important;
	border-color: rgba(220, 38, 38, 0.4) !important;
	color: #ffc9c9 !important;
}

/* ---------- 兜底：JS 未搬走时（极少数情况）仍贴右下角 ✓ ---------- */
body.login > .language-switcher {
	position: fixed;
	left: auto;
	right: 16px;
	bottom: 12px;
	margin: 0;
	text-align: right;
	opacity: 0.7;
	z-index: 10;
}
body.login > .language-switcher:hover { opacity: 1; }

/* ---------- 窄屏：叠成单列 ---------- */
@media (max-width: 900px) {
	body.login { padding: 24px 14px; align-items: flex-start; }
	body.login #login { grid-template-columns: 1fr; }
	body.login #login h1 {
		grid-column: 1;
		grid-row: auto;
		padding: 40px 26px 32px;
		align-items: center;
		text-align: center;
		background-image: radial-gradient(260px 260px at 50% 100%, rgba(99, 93, 255, 0.14), transparent 70%);
	}
	body.login #login h1::before { margin-bottom: 14px; font-size: 11px; letter-spacing: 0.2em; }
	body.login #login h1 a {
		background-position: center center !important;
		margin: 0 0 20px !important; /* 窄屏不再推底 ✓ */
	}
	body.login #login h1::after {
		padding-left: 0;
		border-left: 0;
		text-align: center;
		font-size: 12px;
	}
	body.login #login h1 .language-switcher { margin-top: 18px; }
	body.login #login > form { grid-column: 1; padding: 34px 26px 4px; }
	body.login #login .message,
	body.login #login .success,
	body.login #login .notice,
	body.login #login #login_error { grid-column: 1; margin: 26px 26px 0 !important; }
	body.login #nav,
	body.login #backtoblog { grid-column: 1; padding: 16px 26px 0 !important; }
	body.login #backtoblog { padding-bottom: 30px !important; }
}