/* The standalone door. It borrows the row's look from inline.css and adds only
   what a box standing on its own needs: a width, a title, and the one email
   field that starts everything. */

/* The door decides its own look, wherever it is pasted. Dropped into the header
   window it was coming out centred, and on the account page the code boxes were
   inheriting the site's near-invisible field style: the same box looked like two
   different things (Matteo). Left-aligned everywhere, by his choice. */
.wpcev-portal {
	max-width: 420px;
	margin: 0 auto;
	padding: 4px 0;
	color: #2c3a30;
	text-align: left;
}

.wpcev-portal h2,
.wpcev-portal p,
.wpcev-portal label,
.wpcev-portal span,
.wpcev-portal div {
	text-align: left;
}

.wpcev-portal-title {
	margin: 0 0 16px;
	font-size: 20px;
	line-height: 1.3;
	color: #1f2a21;
}

.wpcev-portal-field {
	margin: 0 0 10px;
}

.wpcev-portal-field label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	color: #5b6b5f;
}

/* Dressed like every other field on the site — same border, same corners, same
   height — because a box a customer cannot recognise as a field is a box they
   do not fill in (Matteo, looking at the account page). Our own paler green was
   invisible against a white page. */
/* Written strongly enough to win: the theme dresses every input on the site
   through one long rule that loads after ours, and with a plain single-class
   selector the field came out with an almost-white border and square corners —
   invisible on a white page. */
/* Field and button on one line, like the password row further down — in the
   narrow window in the header the button was dropping onto a line of its own
   (Matteo). It still wraps under on a phone, where there is no room. */
.wpcev-portal .wpcev-portal-go-row {
	align-items: stretch;
}

.wpcev-portal .wpcev-portal-field input[type="email"],
.wpcev-portal-field input {
	flex: 1 1 200px;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 12px;
	border: 1px solid #bfbfbf;
	border-radius: 4px;
	background: #fff;
	color: #1f2a21;
	font-size: 15px;
}

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

.wpcev-portal .wpcev-block {
	margin-top: 4px;
}

.wpcev-portal form {
	margin: 0;
}

.wpcev-portal-privacy {
	display: block;
	margin: 10px 0 0;
	color: #5b6b5f;
}

.wpcev-portal [hidden] {
	display: none !important;
}

/* The header window carries a door on every page, so the notices need their own
   look here too — they are found by class now, not by name. */
.wpcev-portal .wpcev-notice:empty {
	margin: 0;
}

/* The buttons too: inside a form the theme dresses submit buttons its own way,
   and the door ended up with one green button and one black one (Matteo's
   screenshot of the refused password). Written strongly enough to win. */
.wpcev-portal button.wpcev-button,
.wpcev-portal .wpcev-portal-login button[type="submit"] {
	padding: 12px 20px;
	border: 0;
	border-radius: 4px;
	background: #4a7050;
	color: #fff;
	font-size: 15px;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.wpcev-portal button.wpcev-button:hover,
.wpcev-portal .wpcev-portal-login button[type="submit"]:hover {
	background: #3d5d42;
	color: #fff;
}

/* The six boxes, identical wherever the door is: white, a border you can see,
   and the same size. On the account page the site was painting them grey on
   grey. */
.wpcev-portal .wpcev-portal-digits {
	display: flex;
	gap: 8px;
	max-width: 320px;
}

.wpcev-portal .wpcev-portal-code .wpcev-portal-digits input[type="text"] {
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding: 0;
	border: 1px solid #bfbfbf;
	border-radius: 4px;
	background: #fff;
	color: #1f2a21;
	font-size: 22px;
	line-height: 46px;
	text-align: center;
}

/* Including while being typed into: the site has its own idea of what a focused
   field looks like, and the boxes changed colour under the customer's fingers. */
.wpcev-portal .wpcev-portal-code .wpcev-portal-digits input[type="text"]:focus {
	border-color: #4a7050;
	outline: 2px solid #4a7050;
	outline-offset: 1px;
}

/* The password fields inside the door follow the same dress code. */
.wpcev-portal .wpcev-row input[type="password"],
.wpcev-portal .wpcev-portal-known input[type="password"],
.wpcev-portal .wpcev-portal-choose input[type="password"] {
	min-height: 48px;
	border: 1px solid #bfbfbf;
	border-radius: 4px;
	background: #fff;
}

/* WooCommerce's own two columns stay in the page and keep working; they are
   only taken out of sight, and only while this door is on screen — switch the
   requirement off and the shop's own page comes straight back. */
.woocommerce-account #customer_login {
	display: none;
}