/* ==========================================================================
   Login and Registration pages: the BAC Market account panel
   --------------------------------------------------------------------------
   The same panel as the signed-out prompt on the BAC Market reports
   (BAC Market Reports' .bacm-auth__panel): Continue with Google, an "or"
   rule, then User Registration's own form, with a link under it to the
   other page (no tabs here: each page holds one form).

   The selectors deliberately repeat the plugin's (.bacm .bacm-auth ...) so
   they weigh the same against User Registration's styles, and this file is
   loaded before User Registration's (functions.php, priority 9), as the
   plugin's is. Both pages then come out the way the reports panel does.

   Only loaded on /login/, /registration/ and /lost-password/. The markup
   around the form is added in functions.php (bacmart_auth_wrap_form).
   ========================================================================== */

.bacm.bacm-auth-page {
	--bacm-paper: #ffffff;
	--bacm-shade: #f7f7f8;
	--bacm-rule: #e4e4e6;
	--bacm-rule-firm: #101012;
	--bacm-ink: #101012;
	--bacm-muted: #6e6e76;
	--bacm-faint: #9a9aa2;
	--bacm-faint-text: #6b6b6b;
	--bacm-accent: #d32b93;
	--bacm-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	box-sizing: border-box;
	width: 100%;
	/* Wider than the page's text column (Gutenberg's constrained layout). */
	max-width: 760px !important;
	margin-inline: auto !important;
	color: var(--bacm-ink);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.bacm.bacm-auth-page *,
.bacm.bacm-auth-page *::before,
.bacm.bacm-auth-page *::after {
	box-sizing: border-box;
}

.bacm.bacm-auth-page :focus-visible {
	outline: 2px solid var(--bacm-ink);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ panel */

.bacm .bacm-auth__panel {
	position: relative;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 28px;
	border: 1px solid var(--bacm-rule);
	background: var(--bacm-paper);
	text-align: left;
}

/* -------------------------------------------------- Continue with Google */

.bacm a.bacm-auth__google,
.bacm a.bacm-auth__google:is(:link, :visited) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 42px;
	padding: 11px 22px;
	border: 1px solid var(--bacm-rule-firm);
	border-radius: 0;
	background: var(--bacm-paper);
	box-shadow: none;
	color: var(--bacm-ink);
	font-family: var(--bacm-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

/* Google asks for its button to stay light: hover is a grey fill with the
   text kept dark, not the black fill of the other buttons. */
.bacm a.bacm-auth__google:is(:hover, :focus-visible) {
	border-color: var(--bacm-rule-firm);
	background: var(--bacm-shade);
	color: var(--bacm-ink);
}

.bacm .bacm-auth__google .bacm-auth__g {
	flex: 0 0 auto;
}

.bacm .bacm-auth__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	font-family: var(--bacm-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bacm-faint-text);
}

.bacm .bacm-auth__or::before,
.bacm .bacm-auth__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--bacm-faint);
}

/* One Google button for the panel: hide the one Social Connect adds to the
   form, and the login form's own Register link (the tabs replace it). */
.bacm .bacm-auth--google .user-registration-social-connect-networks,
.bacm .bacm-auth .user-registration-register {
	display: none !important;
}

/* ----------------------------------------------- User Registration's form */

.bacm .bacm-auth .user-registration,
.bacm .bacm-auth .ur-frontend-form {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.bacm .bacm-auth .ur-form-row {
	gap: 12px;
	margin: 0;
	padding: 0;
}

.bacm .bacm-auth .ur-form-row > .ur-form-grid {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.bacm .bacm-auth .ur-button-container {
	width: 100%;
	margin: 8px 0 0 !important;
	padding: 0 !important;
}

.bacm .bacm-auth .form-row,
.bacm .bacm-auth .user-registration-form-row {
	margin: 0 0 14px;
	padding: 0;
}

.bacm .bacm-auth label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--bacm-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bacm-muted);
}

.bacm .bacm-auth label.user-registration-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	letter-spacing: 0.08em;
}

.bacm .bacm-auth input:is([type="text"], [type="email"], [type="password"]) {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--bacm-rule);
	border-radius: 0;
	background: var(--bacm-paper);
	box-shadow: none;
	color: var(--bacm-ink);
	font-family: inherit;
	font-size: 16px; /* 16px keeps phones from zooming in on focus */
	line-height: 1.3;
}

.bacm .bacm-auth input:is([type="text"], [type="email"], [type="password"]):focus {
	border-color: var(--bacm-ink);
	outline: 1px solid var(--bacm-ink);
	outline-offset: 0;
}

/* Submit and Login: black, square, mono capitals; pink on hover. */
.bacm .bacm-auth :is(button[type="submit"], input[type="submit"], .ur-submit-button),
.bacm .bacm-auth :is(button[type="submit"], input[type="submit"], .ur-submit-button):is(:hover, :focus, :active) {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 44px !important;
	margin: 6px 0 0 !important;
	padding: 11px 22px !important;
	border: 1px solid var(--bacm-ink) !important;
	border-radius: 0 !important;
	background: var(--bacm-ink) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: var(--bacm-mono) !important;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.08em !important;
	line-height: 1;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background 0.14s ease, border-color 0.14s ease;
}

.bacm .bacm-auth :is(button[type="submit"], input[type="submit"], .ur-submit-button):is(:hover, :focus-visible) {
	border-color: var(--bacm-accent) !important;
	background: var(--bacm-accent) !important;
	color: #fff !important;
}

.bacm .bacm-auth .user-registration-LostPassword {
	margin: 0;
	font-size: 14px;
}

.bacm .bacm-auth .user-registration-LostPassword a {
	color: var(--bacm-ink) !important;
	font-weight: 600;
}

/* --------------------------------------------- fields in pairs, wide panel */

/* Sign in: Username or Email beside Password; the rest runs across. */
.bacm .bacm-auth .user-registration-form-login .ur-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 14px;
	width: 100% !important;
}

.bacm .bacm-auth .user-registration-form-login .ur-form-grid > * {
	grid-column: 1 / -1;
}

.bacm .bacm-auth .user-registration-form-login .ur-form-grid > :is([data-field="username"], [data-field="password"]) {
	grid-column: auto;
}

/* Create account: Email beside Password. */
.bacm .bacm-auth .ur-form-grid:has(> .field-user_email) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 14px;
}

.bacm .bacm-auth .ur-form-grid:has(> .field-user_email) > * {
	grid-column: 1 / -1;
}

.bacm .bacm-auth .ur-form-grid:has(> .field-user_email) > :is(.field-user_email, .field-user_pass) {
	grid-column: auto;
}

.bacm .bacm-auth .ur-field-item .form-row {
	margin-bottom: 14px;
}

/* Remember me on the left, Lost your password? on the right. */
.bacm .bacm-auth .user-registration-before-login-btn {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 4px;
}

/* The Cloudflare check, centred. */
.bacm .bacm-auth .cf-turnstile {
	display: flex;
	justify-content: center;
	margin: 2px 0 14px;
}

/* -------------------------------------------------- icons inside the fields */

.bacm .bacm-auth input:is([type="email"], [name="username"], [name="user_login"], [name="user_email"], [type="password"], [name="first_name"], [name="last_name"]),
.bacm .bacm-auth input.bacm-auth__shown {
	padding-left: 40px !important;
	background-repeat: no-repeat !important;
	background-position: 13px 50% !important;
	background-size: 17px 17px !important;
}

.bacm .bacm-auth input:is([type="email"], [name="username"], [name="user_login"], [name="user_email"]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e76' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") !important;
}

.bacm .bacm-auth input:is([type="password"], .bacm-auth__shown) {
	padding-right: 46px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='1'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3M12 14.5v2'/%3E%3C/svg%3E") !important;
}

.bacm .bacm-auth input:is([name="first_name"], [name="last_name"]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e76' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c0-4.1 3.4-7.5 7.5-7.5s7.5 3.4 7.5 7.5'/%3E%3C/svg%3E") !important;
}

/* Show / hide password: ours (auth-pages.js), so both forms get the same
   one; User Registration's own eye is hidden. */
.bacm .bacm-auth .bacm-auth__field {
	position: relative;
	display: block;
}

.bacm .bacm-auth .password_preview {
	display: none !important;
}

.bacm button.bacm-auth__reveal,
.bacm button.bacm-auth__reveal:is(:hover, :focus, :active) {
	position: absolute;
	top: 50%;
	right: 4px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--bacm-muted);
	transform: translateY(-50%);
	cursor: pointer;
}

.bacm button.bacm-auth__reveal:hover {
	color: var(--bacm-ink);
}

/* ------------------------------------------------ switch under the form */

.bacm .bacm-auth__switch {
	margin: 16px 0 0;
	color: var(--bacm-muted);
	font-size: 14px;
	text-align: center;
}

.bacm .bacm-auth__switch a,
.bacm .bacm-auth__switch a:is(:link, :visited) {
	margin: 0 0 0 4px;
	color: var(--bacm-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bacm .bacm-auth__switch a:hover {
	color: var(--bacm-accent);
}

/* ------------------------------------------------ lost / reset password */

/* The page's own heading already says Lost Password, so User Registration's
   "Lost your password?" line is hidden; its "we'll send you reset
   instructions" line stays as the panel's intro. */
.bacm .bacm-auth--lost .ur-lost-password-title {
	display: none !important;
}

.bacm .bacm-auth--lost .ur-lost-password-content-container {
	margin: 0 0 18px;
	padding: 0;
	text-align: left;
}

.bacm .bacm-auth--lost .ur-lost-password-message {
	margin: 0;
	color: var(--bacm-muted);
	font-size: 15px;
}

/* One field per row (User Registration floats them in halves), on the reset
   form's two password fields too. */
.bacm .bacm-auth--lost :is(.form-row-first, .form-row-last) {
	float: none !important;
	width: 100% !important;
}

/* Our envelope icon (above) replaces User Registration's own. Its field
   wrapper is a div inside a <p>, which browsers move out after the label,
   so the label row loses its gap and the wrapper takes it instead. */
.bacm .bacm-auth--lost .ur-input-with-icon {
	position: relative;
	display: block;
	margin: 0 0 14px;
}

.bacm .bacm-auth--lost .form-row:has(+ .ur-input-with-icon) {
	margin-bottom: 0;
}

.bacm .bacm-auth--lost .ur-input-with-icon > .input-icon {
	display: none !important;
}

/* Notices (unknown email, "check your inbox"): square, like the rest. */
.bacm .bacm-auth--lost :is(.user-registration-error, .user-registration-message, .user-registration-info) {
	margin: 0 0 18px;
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
}

/* ------------------------------------------- my account (signed out) */

/* WooCommerce's My Account and User Registration's /my-account-2/ frame the
   login form in two columns, a "Login" title beside the form. In the panel
   it is one column, and the page heading already names the page. */
.bacm .bacm-auth .ct-woo-unauthorized,
.bacm .bacm-auth .ur-frontend-form.login-registration,
.bacm .bacm-auth .login-registration > .ur-form-row,
.bacm .bacm-auth .login-registration > .ur-form-row > .ur-form-grid {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.bacm .bacm-auth .login-registration .ur-form-title {
	display: none !important;
}

/* ------------------------------------------------------------- phones */

@media (max-width: 640px) {
	.bacm .bacm-auth__panel {
		padding: 20px 16px;
	}

	.bacm .bacm-auth .user-registration-form-login .ur-form-grid,
	.bacm .bacm-auth .ur-form-grid:has(> .field-user_email) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bacm.bacm-auth-page *,
	.bacm.bacm-auth-page *::before,
	.bacm.bacm-auth-page *::after {
		transition: none !important;
	}
}