/* The row under the email field — site palette: green #4a7050, red #cf2e2e, 8px radius.
   It sits inside the form, so it borrows the form's width and never covers anything. */

.wpcev {
	margin: 0 0 18px;
}

.wpcev[hidden],
.wpcev-block[hidden] {
	display: none;
}

/* Anything inside the row that the script hides must actually disappear: the
   rules below set display on their own, and a display rule beats the browser's
   own handling of the hidden attribute. Without this the six boxes and the
   "send it again" line stayed on screen next to the "Send me the code" button —
   three ways to do one thing, before the code had even been sent. */
.wpcev [hidden] {
	display: none !important;
}

.wpcev-block {
	padding: 14px 16px;
	border: 1px solid #c7d3c9;
	border-left: 3px solid #4a7050;
	border-radius: 8px;
	background: #f7faf8;
	color: #2c3a30;
}

.wpcev-line {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
}

.wpcev-line strong {
	color: #1f2a21;
}

.wpcev-line b {
	color: #1f2a21;
	word-break: break-all;
}

.wpcev-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
	margin-bottom: 8px;
}

.wpcev-row input[type="password"] {
	flex: 1 1 220px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #c7d3c9;
	border-radius: 8px;
	background: #fff;
	color: #1f2a21;
	font-size: 15px;
}

.wpcev-row input[type="password"]:focus {
	outline: 2px solid #4a7050;
	outline-offset: 1px;
}

.wpcev-button {
	flex: 0 0 auto;
	padding: 10px 18px;
	border: 0;
	border-radius: 8px;
	background: #4a7050;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
}

.wpcev-button:hover {
	background: #3d5d42;
}

.wpcev-digits {
	display: flex;
	gap: 8px;
	max-width: 320px;
	margin-bottom: 10px;
}

.wpcev-digits input {
	width: 100%;
	aspect-ratio: 1 / 1.15;
	padding: 0;
	border: 1px solid #c7d3c9;
	border-radius: 8px;
	background: #fff;
	color: #1f2a21;
	font-size: 22px;
	text-align: center;
}

.wpcev-digits input:focus {
	outline: 2px solid #4a7050;
	outline-offset: 1px;
}

.wpcev-reveal {
	margin-bottom: 10px;
	padding: 8px 10px;
	border: 1px solid #cf2e2e;
	border-radius: 8px;
	background: #fff6f6;
	color: #cf2e2e;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
}

.wpcev-reveal[hidden] {
	display: none;
}

.wpcev-notice {
	font-size: 13px;
	line-height: 1.4;
}

.wpcev-notice:not(:empty) {
	margin-bottom: 8px;
}

.wpcev-notice.is-error {
	color: #cf2e2e;
}

.wpcev-notice.is-ok {
	color: #4a7050;
}

.wpcev-link {
	padding: 0;
	border: 0;
	background: none;
	color: #4a7050;
	font-size: 13px;
	line-height: 1.5;
	text-decoration: underline;
	cursor: pointer;
}

.wpcev-small {
	display: inline-block;
	font-size: 13px;
	line-height: 1.5;
	color: #5b6b5f;
}

.wpcev-small a,
a.wpcev-small {
	color: #4a7050;
}

.wpcev-done {
	border-left-color: #4a7050;
	background: #eef5f0;
	color: #25422c;
	font-size: 14px;
}

@media (max-width: 480px) {
	.wpcev-digits {
		gap: 6px;
	}

	.wpcev-button {
		flex: 1 1 100%;
	}
}