/**
 * apb-password-rules.css — meter live 4 règles password.
 *
 * Markup rendu par apb_password_rules_widget() :
 *   .apb-pwd-rules
 *     .apb-pwd-rules__item           (4×)
 *       .apb-pwd-rules__icon         (état via .is-pass sur l'item parent)
 *
 * États : par défaut chips gris ○, deviennent verts ✓ quand l'item porte
 * .is-pass (toggle JS via apb-password-rules.js).
 *
 * S'aligne sur apb-tokens.css : --apb-ok pour le vert, --apb-ink-3 / --apb-line
 * pour le gris neutre. Compatible avec le legacy `html { font-size: 62.5% }`
 * de Bricks : tous les valeurs en `px` (pas de `rem`).
 */

.apb-pwd-rules {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 8px 0 4px;
	font-size: 13px;
	line-height: 1.4;
	font-family: inherit;
}

.apb-pwd-rules__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--apb-ink-3, #64748B);
	transition: color 160ms ease;
}

.apb-pwd-rules__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid var(--apb-line-strong, #D4CCB8);
	background: transparent;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
	color: transparent;
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
}

.apb-pwd-rules__icon::before {
	content: "";
	display: block;
}

/* État validé : chip vert avec checkmark. */
.apb-pwd-rules__item.is-pass {
	color: var(--apb-ok, #15803D);
	font-weight: 500;
}

.apb-pwd-rules__item.is-pass .apb-pwd-rules__icon {
	background: var(--apb-ok, #15803D);
	border-color: var(--apb-ok, #15803D);
	color: #fff;
}

.apb-pwd-rules__item.is-pass .apb-pwd-rules__icon::before {
	content: "\2713"; /* ✓ */
	color: #fff;
	font-size: 11px;
	line-height: 1;
}

/* Bouton submit désactivé : style cohérent avec les autres CTA APB. */
.apb-form button[type="submit"]:disabled,
.apb-vform button[type="submit"]:disabled,
.apb-devenir-pro button[type="submit"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}