/**
 * The logged-out views of /my-account/ (Log in, Create account, "Check your
 * email", lost and reset password): one card, the form on the left, what an
 * account is for on the right. The prototype's login page
 * (src/pages/Login.tsx). See docs/login.md.
 *
 * The frame is raskin_auth_frame_open() in includes/raskin/auth.php. The
 * login and registration forms are the parent theme's, so the second half
 * of this file dresses MyListing's markup: its floating labels become
 * labels above bordered 40px fields, its submit button the guide's primary
 * button with the arrow behind the label. The lost and reset password forms
 * are ours and use the same classes.
 *
 * Selectors carry `.sba-auth` plus the element's class, to outrank the
 * Global Kit's element rules and the parent theme's form styles; where the
 * parent uses !important, so does the rule that answers it.
 */

/* The parent theme's page wrapper is gray on account pages; the card sits
   on white, as in the prototype. */
#c27-site-wrapper:has(> .woocommerce > .sba-auth) {
	background-color: var(--sba-surface);
}

.sba-auth {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 16px;
	color: var(--sba-charcoal);
	font-size: 16px;
	line-height: 24px;
}

.sba-auth .sba-auth-card {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background: var(--sba-surface);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* ---- The form's side ---------------------------------------------------- */

/* A column, so the security notice, which the raskin-security-alerts plugin
   prints on the hook after the form, can be ordered first. */
.sba-auth .sba-auth-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px;
}

.sba-auth .sba-auth-main > .raskin-security-notice {
	order: -2;
	margin: 0 0 28px;
}

.sba-auth .sba-auth-main > .auth-notices,
.sba-auth .sba-auth-main > .woocommerce-info {
	order: -1;
}

.sba-auth .sba-auth-box {
	position: relative;
	padding: 20px !important;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background: var(--sba-surface);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.sba-auth .sba-auth-title {
	margin: 0 0 28px;
	color: var(--sba-charcoal);
	font-size: 30px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 36px;
}

.sba-auth .sba-auth-text {
	margin: 0 0 20px;
	color: var(--sba-charcoal);
	font-size: 16px;
	line-height: 24px;
}

.sba-auth .sba-auth-box > .sba-auth-text:last-child {
	margin-bottom: 0;
}

.sba-auth .sba-auth-subtitle {
	margin: 28px 0 8px;
	color: var(--sba-charcoal);
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

/* WooCommerce's notices above the form: a wrong password, an activated
   account, a reset password. One quiet line each, the error in red. */
.sba-auth .sba-auth-main .woocommerce-info,
.sba-auth .sba-auth-main .woocommerce-message,
.sba-auth .sba-auth-main .woocommerce-error {
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 0;
	border-radius: var(--sba-radius);
	background: var(--sba-muted);
	box-shadow: none;
	color: var(--sba-charcoal);
	font-size: 14px;
	line-height: 20px;
	list-style: none;
}

.sba-auth .sba-auth-main .woocommerce-error {
	background: var(--sba-red-light);
}

.sba-auth .sba-auth-main .woocommerce-info::before,
.sba-auth .sba-auth-main .woocommerce-message::before,
.sba-auth .sba-auth-main .woocommerce-error::before {
	content: none;
}

.sba-auth .sba-auth-main .woocommerce-error li {
	margin: 0;
	padding: 0;
}

/* A link in a notice is the guide's inline link (links.css): charcoal, a
   red underline at half strength 4px below, full red on hover and focus.
   The parent adds a gray bottom border on hover, a second line under the
   first; it is taken off. */
.sba-auth .sba-auth-main .woocommerce-info a,
.sba-auth .sba-auth-main .woocommerce-message a,
.sba-auth .sba-auth-main .woocommerce-error a {
	color: var(--sba-charcoal);
	font-weight: inherit;
	text-decoration: underline;
	text-decoration-color: hsl(var(--sba-red-hsl) / 0.5);
	text-underline-offset: 4px;
	transition: text-decoration-color var(--sba-duration-hover) ease;
}

.sba-auth .sba-auth-main .woocommerce-info a:hover,
.sba-auth .sba-auth-main .woocommerce-info a:focus,
.sba-auth .sba-auth-main .woocommerce-message a:hover,
.sba-auth .sba-auth-main .woocommerce-message a:focus,
.sba-auth .sba-auth-main .woocommerce-error a:hover,
.sba-auth .sba-auth-main .woocommerce-error a:focus {
	border-bottom: 0;
	color: var(--sba-charcoal);
	text-decoration: underline;
	text-decoration-color: var(--sba-red);
	text-underline-offset: 4px;
}

.sba-auth .sba-auth-switch {
	margin: 20px 0 0;
	color: var(--sba-charcoal);
	font-size: 14px;
	line-height: 20px;
}

/* ---- The link with the arrow -------------------------------------------- */

.sba-auth .sba-auth-link {
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

.sba-auth .sba-auth-link:hover,
.sba-auth .sba-auth-link:focus {
	color: var(--sba-red-darker);
}

.sba-auth .sba-auth-link:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-auth .sba-auth-link .sba-i {
	display: inline-block;
	margin-left: 4px;
	font-size: 16px;
	line-height: 1;
	vertical-align: -3px;
	transition: transform var(--sba-duration-hover) ease;
}

.sba-auth .sba-auth-link:hover .sba-i {
	transform: translateX(2px);
}

/* ---- What an account is for --------------------------------------------- */

.sba-auth .sba-auth-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	padding: 24px;
	background: var(--sba-muted);
}

/* The guide's hero eyebrow: 14px at weight 500, dark red, a 32px rule in
   front (sections.css has it for Elementor's heading widget). */
.sba-auth .sba-auth-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
}

.sba-auth .sba-auth-eyebrow::before {
	content: "";
	flex: 0 0 32px;
	height: 1px;
	background-color: currentColor;
}

.sba-auth .sba-auth-aside-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 30px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 36px;
}

.sba-auth .sba-auth-benefits {
	display: grid;
	gap: 16px;
	margin: 28px 0 32px;
	padding: 0;
	list-style: none;
}

.sba-auth .sba-auth-benefits li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 16px;
	line-height: 24px;
}

.sba-auth .sba-auth-tick {
	display: flex;
	flex: 0 0 20px;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--sba-red-light);
	color: var(--sba-red-dark);
	font-size: 14px;
	line-height: 1;
}

@media (min-width: 768px) {
	.sba-auth {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.sba-auth .sba-auth-main {
		padding: 32px;
	}

	.sba-auth .sba-auth-box {
		padding: 28px !important;
	}

	.sba-auth .sba-auth-aside {
		padding: 40px;
	}

	.sba-auth .sba-auth-aside-title {
		font-size: 36px;
		line-height: 40px;
	}
}

@media (min-width: 1024px) {
	.sba-auth .sba-auth-card {
		grid-template-columns: 5fr 7fr;
	}

	.sba-auth .sba-auth-main {
		padding: 40px;
	}

	.sba-auth .sba-auth-aside {
		padding: 56px;
	}
}

/* --------------------------------------------------------------------------
 * The parent theme's forms
 * -------------------------------------------------------------------------- */

/* Label above the field: the parent prints the input first and floats the
   label over it. Ordered rather than reversed, so what WooCommerce's
   password strength script inserts after the field stays below it. */
.sba-auth form.sign-in-form .form-group {
	display: flex;
	flex-direction: column;
	margin: 0 0 20px;
}

.sba-auth form.sign-in-form .form-group label {
	order: -1;
	position: static;
	margin: 0 0 8px;
	overflow: visible;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	pointer-events: auto;
	transition: none;
}

.sba-auth form.sign-in-form .form-group input {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--sba-input);
	border-radius: var(--sba-radius-md);
	background: var(--sba-surface);
	box-shadow: none;
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.sba-auth form.sign-in-form .form-group input:focus {
	border-color: var(--sba-input);
	outline: 2px solid var(--sba-ring);
	outline-offset: 1px;
}

/* The eye that shows the password, which the parent's script wraps around
   the field: centered on the 40px field under the 28px of label. */
.sba-auth form.sign-in-form .toggle-password {
	margin: 0 0 20px;
}

.sba-auth form.sign-in-form .toggle-password .form-group {
	margin-bottom: 0;
}

.sba-auth form.sign-in-form .toggle-password .form-group input {
	padding-right: 40px;
}

.sba-auth form.sign-in-form .show-toggle-password {
	top: 39px;
	right: 12px;
	line-height: 1;
}

/* The strength of a new password and WooCommerce's hint, under the field. */
.sba-auth form.sign-in-form .woocommerce-password-strength {
	margin: 8px 0 0;
	padding: 6px 12px;
	border: 0;
	border-radius: var(--sba-radius-md);
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: left;
}

.sba-auth form.sign-in-form .woocommerce-password-hint {
	display: block;
	margin: 8px 0 0;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

/* The guide's primary button, full width, the arrow behind the label in
   place of the parent's person in front of it. */
.sba-auth form.sign-in-form button[type="submit"] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--sba-radius-md);
	background: var(--sba-red-dark);
	color: var(--sba-red-contrast);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	transition: background-color var(--sba-duration-hover) ease;
}

.sba-auth form.sign-in-form button[type="submit"]:hover,
.sba-auth form.sign-in-form button[type="submit"]:focus {
	background: var(--sba-red-darker);
	color: var(--sba-red-contrast);
}

.sba-auth form.sign-in-form button[type="submit"]:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-auth form.sign-in-form button[type="submit"][disabled] {
	opacity: 0.5;
	cursor: default;
}

.sba-auth form.sign-in-form button[type="submit"] > i {
	display: none;
}

.sba-auth form.sign-in-form button[type="submit"]::after {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat;
}

.sba-auth form.sign-in-form .form-group:has(> button) {
	display: block;
	margin-bottom: 0;
}

/* Remember me, the terms and the privacy text. */
.sba-auth form.sign-in-form .form-info {
	margin: 20px 0 0;
}

.sba-auth form.sign-in-form .md-checkbox label {
	color: var(--sba-charcoal);
	font-size: 14px;
	line-height: 20px;
}

.sba-auth form.sign-in-form .terms-and-conditions {
	margin: 0 0 12px;
}

.sba-auth form.sign-in-form .woocommerce-privacy-policy-text p {
	margin: 0 0 20px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-auth form.sign-in-form .google-recaptcha {
	margin: 0 0 20px;
}

/* The parent centers the frame with margins of its own; here it lines up
   with the fields. */
.sba-auth .sign-in-box .g-recaptcha > div {
	margin: 0 !important;
}

/* reCAPTCHA's frame is 304px by 78px and does not shrink; below 480px the
   box is narrower than that, so the frame is scaled to fit. */
@media (max-width: 479px) {
	.sba-auth form.sign-in-form .google-recaptcha {
		height: 66px;
		transform: scale(0.85);
		transform-origin: 0 0;
	}
}

@media (max-width: 374px) {
	.sba-auth form.sign-in-form .google-recaptcha {
		height: 52px;
		transform: scale(0.66);
	}
}

.sba-auth form.sign-in-form .forgot-password {
	margin: 20px 0 0;
}

.sba-auth form.sign-in-form .forgot-password a {
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-auth form.sign-in-form .forgot-password a:hover,
.sba-auth form.sign-in-form .forgot-password a:focus {
	color: var(--sba-red-darker);
	text-decoration: underline;
}

.sba-auth form.sign-in-form .forgot-password a i {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.sba-auth .sba-auth-link .sba-i,
	.sba-auth form.sign-in-form button[type="submit"] {
		transition: none;
	}

	.sba-auth .sba-auth-link:hover .sba-i {
		transform: none;
	}
}