/* SQUARE: public web pages (login page included). Tokens and fonts come from square_ui.css. */
.page-card-head img.app-logo,
.login-content img.app-logo {
	max-height: 48px;
	width: auto;
}

/* Sign-in, password and message pages: the first impression of the product. Scoped to the page card, so a website page is not affected. */
body[data-path="login"],
body[data-path="update-password"],
body[data-path="message"] {
	font-family: var(--sq-body);
	min-height: 100vh;
	background:
		radial-gradient(900px 520px at 8% -10%, color-mix(in srgb, var(--sq-m) 28%, transparent), transparent 62%),
		radial-gradient(760px 460px at 100% 112%, color-mix(in srgb, var(--sq-m) 18%, transparent), transparent 62%),
		var(--sq-canvas);
	background-attachment: fixed;
}

body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card,
.page-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--sq-radius-xl);
	border: 1px solid var(--sq-line);
	box-shadow: var(--sq-shadow-window);
}

.page-card h4,
.page-card .page-card-head h4,
.page-card-head h1,
.page-card h1 {
	font-family: var(--sq-display);
	font-weight: 700;
	letter-spacing: -0.005em;
}

.page-card .form-control {
	border-radius: var(--sq-radius-md);
	font-family: var(--sq-body);
}

.page-card .form-control:focus {
	border-color: var(--sq-m-solid);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-m-solid) 22%, transparent);
}

/* The main button in the brand colour; the alternative sign-in options stay neutral.
 * Specificity is raised past Frappe's nested .page-card .page-card-actions .btn-login rule (which paints it gray-900). */
body[data-path="login"] .page-card .page-card-actions .btn-login:not(.btn-login-option),
.page-card .btn-primary {
	background: var(--sq-m-solid);
	border-color: var(--sq-m-solid);
	border-radius: var(--sq-radius-md);
	color: var(--sq-on-solid);
	font-weight: 600;
}

body[data-path="login"] .page-card .page-card-actions .btn-login:not(.btn-login-option):hover,
body[data-path="login"] .page-card .page-card-actions .btn-login:not(.btn-login-option):focus,
body[data-path="login"] .page-card .page-card-actions .btn-login:not(.btn-login-option):active,
.page-card .btn-primary:hover,
.page-card .btn-primary:focus {
	background: color-mix(in srgb, var(--sq-m-solid) 86%, var(--sq-ink));
	border-color: color-mix(in srgb, var(--sq-m-solid) 86%, var(--sq-ink));
	color: var(--sq-on-solid);
}

/* Message pages (refusal, not found): the same main button. */
.error-page .btn-primary {
	background: var(--sq-m-solid);
	border-color: var(--sq-m-solid);
	border-radius: var(--sq-radius-md);
	color: var(--sq-on-solid);
	font-weight: 600;
}

.error-page .btn-primary:hover,
.error-page .btn-primary:focus {
	background: color-mix(in srgb, var(--sq-m-solid) 86%, var(--sq-ink));
	border-color: color-mix(in srgb, var(--sq-m-solid) 86%, var(--sq-ink));
	color: var(--sq-on-solid);
}

.error-page .page-card-head {
	font-family: var(--sq-display);
	font-weight: 700;
	color: var(--sq-ink);
}