/**
 * Registration form feedback.
 *
 * Only the pieces the theme does not already provide: the blocked-button state and
 * the "look here" highlight. The strength readout itself is styled by the theme's
 * own `.woocommerce-password-strength` rules so both register forms look identical.
 */

/* A blocked submit cannot be clicked anyway; letting the click through to the
   wrapper is what allows the form to explain itself. */
form.register .jph-submit-blocked,
form.woocommerce-form-register .jph-submit-blocked {
	pointer-events: none;
	cursor: not-allowed;
}

/* Readout layout: the Blocksy account panel puts the field inside a <p>, so give
   the message the same breathing room it has on the My Account page. */
.ct-panel form.register .woocommerce-password-strength,
.ct-panel form.woocommerce-form-register .woocommerce-password-strength,
.ct-account-forms form.register .woocommerce-password-strength {
	text-align: left;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
	padding: 4px 12px;
	margin-top: 0.5em;
	border-radius: 4px;
	color: #171713;
}

.ct-panel form.register .woocommerce-password-hint,
.ct-panel form.woocommerce-form-register .woocommerce-password-hint,
.ct-account-forms form.register .woocommerce-password-hint {
	display: block;
	margin-top: 0.5em;
	font-size: 12px;
	line-height: 1.5;
	color: #6b6b63;
}

/* Feedback when someone clicks the blocked Register button. */
.woocommerce-password-strength.jph-password-attention {
	animation: jph-password-attention 1.6s ease-out 1;
}

@keyframes jph-password-attention {
	0%,
	100% {
		box-shadow: none;
	}

	15% {
		box-shadow: 0 0 0 3px rgba(214, 47, 63, 0.35);
	}

	60% {
		box-shadow: 0 0 0 6px rgba(214, 47, 63, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-password-strength.jph-password-attention {
		animation: none;
		box-shadow: 0 0 0 3px rgba(214, 47, 63, 0.35);
	}
}