.pfa-box { margin-top: 1.5em; }

/* Signing in by phone is the main path, so it reads like one rather than an
   alternative tucked under a password form. */
.pfa-box--primary {
	margin: 0 0 2em;
	padding: 1.5em;
	border: 1px solid #d8e0e8;
	border-radius: 6px;
	background: #fbfcfd;
}

.pfa-heading {
	margin: 0 0 0.3em;
	font-size: 1.25em;
}

.pfa-lede {
	margin: 0 0 1em;
	color: #5b6874;
}

/* WooCommerce prints its own "Login" heading straight after the sign-in box.
   With the password form folded away it is a heading for a single link, so it
   goes. The profile box is a different thing and keeps whatever follows it. */
.pfa-box--primary:not(.pfa-profile) + h2 {
	display: none;
}

.pfa-password-fallback {
	margin: 0.5em 0 1em;
}

.pfa-password-fallback > summary {
	cursor: pointer;
	color: #1f5fa9;
	font-size: 0.92em;
	list-style: none;
}

.pfa-password-fallback > summary::-webkit-details-marker {
	display: none;
}

.pfa-password-fallback > summary::before {
	content: "\203a";
	display: inline-block;
	margin-right: 0.45em;
	transform: rotate(90deg);
}

.pfa-password-fallback[open] > summary::before {
	transform: rotate(-90deg);
}

.pfa-divider {
	display: flex;
	align-items: center;
	gap: .75em;
	margin: 1.5em 0 1em;
	color: #6b7784;
	font-size: .875em;
}
.pfa-divider::before,
.pfa-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .25;
}

.pfa-label {
	display: block;
	margin: .75em 0 .35em;
	font-weight: 600;
	font-size: .9em;
}
.pfa-optional { font-weight: 400; color: #6b7784; }

.pfa-row { display: flex; gap: .5em; flex-wrap: wrap; }
.pfa-row .pfa-input { flex: 1 1 12em; min-width: 0; }

.pfa-input {
	padding: .65em .75em;
	border: 1px solid #c8d0d8;
	border-radius: 4px;
	font-size: 1em;
	background: #fff;
}
.pfa-input:focus-visible { outline: 2px solid #1f5fa9; outline-offset: 1px; }
.pfa-input--code { letter-spacing: .4em; font-variant-numeric: tabular-nums; }

.pfa-button { white-space: nowrap; }
.pfa-button[disabled] { opacity: .6; cursor: progress; }

.pfa-hint { margin: .5em 0 0; font-size: .85em; color: #6b7784; }

.pfa-link {
	background: none;
	border: 0;
	padding: 0;
	color: #1f5fa9;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

.pfa-message { margin: .75em 0 0; padding: .6em .8em; border-radius: 4px; font-size: .9em; }
.pfa-message--error { background: #fdeaea; color: #8a1c1c; }
.pfa-message--ok { background: #e8f5ec; color: #15662f; }

@media (max-width: 480px) {
	.pfa-row { flex-direction: column; }
	.pfa-button { width: 100%; }
}

/* ------------------------------------------------- complete your details --- */

.pfa-profile-form {
	margin: 0;
}

.pfa-field-row {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}

.pfa-field {
	flex: 1 1 12em;
	min-width: 0;
}

.pfa-profile .pfa-input {
	width: 100%;
}

.pfa-signed-in-as {
	margin: 1em 0 1.2em;
	padding: 0.6em 0.8em;
	background: #eef3f8;
	border-radius: 4px;
	font-size: 0.9em;
	color: #41505e;
}

.pfa-profile .pfa-button {
	width: auto;
}

@media (max-width: 560px) {
	.pfa-field-row {
		flex-direction: column;
		gap: 0;
	}
}