/*
 * Customer login. The .customer-login-step rules style the step content (forms,
 * fields, errors, OAuth buttons) and work inside either the page wrap
 * (.loginscreen.customer-login) or the modal (.customer-login-modal).
 */

/* Page wrap chrome (used by tpl.login_page.php) */
.loginscreen.customer-login {
	padding: 60px 20px 80px;
}

.loginscreen.customer-login .miniwrap {
	max-width: 480px;
	margin: 0 auto;
	padding: 40px 32px;
	background: #FFF;
	border: 1px solid var(--border-gray);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(34, 29, 28, 0.06);
	box-sizing: border-box;
}

/* Step content */
.customer-login-step .title {
	font-family: lora, serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	text-align: center;
	margin: 0 0 12px;
	color: var(--black);
}

.customer-login-step .intro {
	text-align: center;
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 20px;
	color: var(--black);
	opacity: 0.75;
}

.customer-login-step .error {
	background: rgba(215, 65, 65, 0.08);
	color: var(--error-red);
	border: 1px solid rgba(215, 65, 65, 0.25);
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 20px;
	font-size: 13px;
	text-align: center;
}

.customer-login-step .notice {
	background: rgba(42, 166, 107, 0.08);
	color: var(--button-green);
	border: 1px solid rgba(42, 166, 107, 0.25);
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 20px;
	font-size: 13px;
	text-align: center;
}

.customer-login-step form fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

.customer-login-step ul.struct {
	list-style: none;
	margin: 0;
	padding: 0;
}

.customer-login-step ul.struct li {
	display: block;
	margin: 0 0 16px;
}

.customer-login-step ul.struct li label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--black);
	margin: 0 0 6px;
}

.customer-login-step ul.struct li.required label::after {
	content: " *";
	color: var(--orange);
}

.customer-login-step input[type="email"],
.customer-login-step input[type="password"],
.customer-login-step input[type="text"] {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--black);
	background: #FFF;
	border: 1px solid var(--border-gray);
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.customer-login-step input[type="email"]:focus,
.customer-login-step input[type="password"]:focus,
.customer-login-step input[type="text"]:focus {
	outline: none;
	border-color: var(--orange);
	box-shadow: 0 0 0 3px rgba(255, 130, 80, 0.15);
}

.customer-login-step input[disabled],
.customer-login-step input[readonly] {
	background: #f7f7f7;
	color: rgba(0, 0, 0, 0.55);
	cursor: not-allowed;
}

.customer-login-step #customer-login-otp {
	text-align: center;
	font-size: 24px;
	letter-spacing: 12px;
	font-weight: 600;
}

.customer-login-step .buttons {
	margin: 24px 0 0;
}

.customer-login-step .button.wide {
	display: block;
	width: 100%;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
}

.customer-login-step form.processing button[type="submit"] {
	opacity: 0.6;
	cursor: wait;
}

.customer-login-step .oauth-separator {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 28px 0 20px;
	color: var(--black);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.55;
}

.customer-login-step .oauth-separator::before,
.customer-login-step .oauth-separator::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border-gray);
}

.customer-login-step .oauth-login {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.customer-login-step .oauth-login .button.wide {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	line-height: 48px;
	border-radius: 24px;
	font-weight: 500;
	white-space: nowrap;
}

.customer-login-step .button.google-login {
	background: #FFF;
	color: var(--black);
	border: 1px solid var(--border-gray);
}

.customer-login-step .button.google-login::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z'/%3E%3Cpath fill='%23FF3D00' d='M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.611 20.083H42V20H24v8h11.303c-.792 2.237-2.231 4.166-4.087 5.571.001-.001.002-.001.003-.002l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.customer-login-step .button.google-login:hover {
	background: var(--light-brown);
	color: var(--black);
	border-color: var(--black);
}

.customer-login-step .button.facebook-login {
	background: #1877F2;
	color: #FFF;
	border: 1px solid #1877F2;
}

.customer-login-step .button.facebook-login::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.customer-login-step .button.facebook-login:hover {
	background: #166FE5;
	color: #FFF;
	border-color: #166FE5;
}

.customer-login-step .customer-login-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 16px 0 0;
	font-size: 13px;
}

.customer-login-step .customer-login-secondary .customer-login-sep {
	opacity: 0.4;
}

.customer-login-step .customer-login-secondary a,
.customer-login-step .customer-login-secondary button.linklike {
	color: var(--black);
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	opacity: 0.7;
	text-decoration: none;
}

.customer-login-step .customer-login-secondary a:hover,
.customer-login-step .customer-login-secondary button.linklike:hover {
	opacity: 1;
	text-decoration: underline;
}

.customer-login-step .customer-login-secondary .inline-form {
	display: inline;
	margin: 0;
}

@media (max-width: 480px) {
	.loginscreen.customer-login {
		padding: 30px 16px 40px;
	}
	.loginscreen.customer-login .miniwrap {
		padding: 32px 20px;
		border-radius: 12px;
	}
	.customer-login-step .title {
		font-size: 22px;
	}
}