/* 密码框下方的规则清单
   ⭐ 站主 2026-09-09：「这一块不要明着写出来」——密码框还空着的时候不显示，
      客户一开始打字才滑出来（渐进披露，GitHub / Google 都是这个做法）。
      好处是页面清爽、不摆一堆"未完成"给人压力，而实时打勾的指导作用一点没丢。
   ⛔ 用 max-height + opacity 过渡而不是直接 display:none —— 直接切会让下面的字段
      猛地被顶下去一大截，眼睛要重新找位置。 */
.bskes-pw-hint {
	margin-top: 0;
	padding: 0 12px;
	border-radius: 5px;
	background: #f6f8fa;
	border: 0 solid #e3e8ee;
	font-size: 13px;
	line-height: 1.7;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .22s ease, opacity .18s ease, margin-top .22s ease, padding .22s ease, border-width .22s ease;
}
.bskes-pw-hint.is-open {
	max-height: 340px;
	opacity: 1;
	margin-top: 8px;
	padding: 9px 12px;
	border-width: 1px;
}
@media (prefers-reduced-motion: reduce) {
	.bskes-pw-hint { transition: none; }
}
.bskes-pw-hint__title {
	font-weight: 600;
	color: #4b5563;
	margin-bottom: 3px;
}
.bskes-pw-hint ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bskes-pw-hint li {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #6b7280;
	margin: 0;
}
/* 小圆点：没满足是空心灰，满足了变绿勾 */
.bskes-pw-mark {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	border-radius: 50%;
	border: 1.5px solid #c7cdd6;
	position: relative;
}
.bskes-pw-hint li.is-ok {
	color: #1a7f4b;
}
.bskes-pw-hint li.is-ok .bskes-pw-mark {
	background: #1a7f4b;
	border-color: #1a7f4b;
}
.bskes-pw-hint li.is-ok .bskes-pw-mark::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 3.5px;
	height: 7px;
	border: solid #fff;
	border-width: 0 1.6px 1.6px 0;
	transform: rotate(45deg);
}
/* 已经开始输入、但这一条还没满足 —— 琥珀色，比灰醒目，又不像红色那样一上来就吓人。
   ⭐ 分三级：没打字＝灰（中性）→ 打了字还差＝琥珀（提醒）→ 点提交被拦＝红（这时才该醒目）。
   站主 2026-09-08 反馈「灰色空心圈不够刺眼，客户可能扫一眼就略过去」。 */
.bskes-pw-hint.is-touched li:not(.is-ok) {
	color: #a15c00;
}
.bskes-pw-hint.is-touched li:not(.is-ok):not(.is-advice) .bskes-pw-mark {
	border-color: #d98a00;
	background: #fff8e8;
}
/* 圈里画一根横杠：一眼看出「这条还没过」，不只是"没打勾" */
.bskes-pw-hint.is-touched li:not(.is-ok):not(.is-advice) .bskes-pw-mark::after {
	content: "";
	position: absolute;
	left: 2.5px;
	top: 5px;
	width: 6px;
	height: 1.6px;
	background: #d98a00;
	border-radius: 1px;
}

/* 点了提交却没过 —— 这时才用红色，并抖一下把视线拉过来 */
.bskes-pw-hint.is-blocked {
	background: #fdf3f3;
	border-color: #f0c4c4;
	animation: bskes-pw-shake .34s ease;
}
.bskes-pw-hint.is-blocked .bskes-pw-hint__title {
	color: #b32d2e;
}
.bskes-pw-hint.is-blocked li:not(.is-ok):not(.is-advice) {
	color: #b32d2e;
	font-weight: 600;
}
.bskes-pw-hint.is-blocked li:not(.is-ok):not(.is-advice) .bskes-pw-mark {
	border-color: #b32d2e;
	background: #fdeaea;
}
.bskes-pw-hint.is-blocked li:not(.is-ok):not(.is-advice) .bskes-pw-mark::after {
	background: #b32d2e;
}
@keyframes bskes-pw-shake {
	0%,100% { transform: translateX(0); }
	25%     { transform: translateX(-4px); }
	75%     { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
	.bskes-pw-hint.is-blocked { animation: none; }
}
/* 被拦时密码框自己也标出来，免得客户不知道是哪个框的问题 */
input.bskes-pw-invalid {
	border-color: #b32d2e !important;
	box-shadow: 0 0 0 2px rgba(179,45,46,.14) !important;
}

/* 「建议」项：它拦不住提交，所以不能跟硬规则长得一样 */
.bskes-pw-hint li.is-advice {
	color: #8a94a3;
}
.bskes-pw-hint li.is-advice .bskes-pw-mark {
	border-style: dashed;
}
.bskes-pw-hint.is-touched li.is-advice:not(.is-ok) {
	color: #8a94a3;
}
.bskes-pw-hint li.is-advice.is-ok {
	color: #1a7f4b;
}

/* WooCommerce 用这个壳子装 WordPress 那句「至少 12 个字符」的提示。
   内容已经在 PHP 那边置空了，但空壳仍会占一行高度，一并收掉。 */
.woocommerce-password-hint {
	display: none !important;
}