/* Spoon Me Loyalty -- join/register landing page. Loads on top of
   ljc-card-page.css (shared background, .ljc-page container, .ljc-logo) and
   restyles WooCommerce's own login/register form markup -- reused as-is via
   wc_get_template() -- to match the card page's look instead of hand
   rebuilding the form. */

.ljc-join-page {
	justify-content: flex-start;
	padding-top: calc(env(safe-area-inset-top, 0px) + 36px);
}

.ljc-join-page .ljc-logo {
	margin: 0 auto 4%;
}

.ljc-join-heading {
	text-align: center;
	font-size: clamp(1.3rem, 6vw, 1.6rem);
	font-weight: 800;
	color: #3c3c40;
	margin: 0 0 6px;
}

.ljc-join-sub {
	text-align: center;
	font-size: 0.92rem;
	font-weight: 500;
	color: #8a8a8f;
	margin: 0 0 6%;
	line-height: 1.4;
}

/* ---- WooCommerce login/register markup, restyled ---- */

.ljc-join-forms #customer_login {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
}

.ljc-join-forms .u-column1.col-1,
.ljc-join-forms .u-column2.col-2 {
	width: 100%;
	float: none;
	margin: 0;
}

/* Register first, Login hidden until the visitor asks for it. */
.ljc-join-forms .u-column1.col-1 {
	order: 2;
	display: none;
}

.ljc-join-forms .u-column2.col-2 {
	order: 1;
}

#ljc-join-root.ljc-show-login .ljc-join-forms .u-column1.col-1 {
	display: block;
}

#ljc-join-root.ljc-show-login .ljc-join-forms .u-column2.col-2 {
	display: none;
}

/* We already show our own heading/subtext above, so hide WooCommerce's
   redundant "Register" / "Login" column headings. */
.ljc-join-forms #customer_login h2 {
	display: none;
}

.ljc-join-forms form.woocommerce-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ljc-join-forms .woocommerce-form-row {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ljc-join-forms .woocommerce-form-row label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #8a8a8f;
}

.ljc-join-forms .woocommerce-form-row label .required {
	color: #a9772f;
	text-decoration: none;
}

.ljc-join-forms input.input-text {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	font-size: 1rem;
	font-family: inherit;
	color: #3c3c40;
	background: #fbf5ee;
	border: 1px solid rgba(60, 60, 64, 0.15);
	border-radius: 10px;
	appearance: none;
}

.ljc-join-forms input.input-text:focus {
	outline: none;
	border-color: #a9772f;
	background: #ffffff;
}

.ljc-join-forms p:has(> em),
.ljc-join-forms p.form-row > em {
	font-size: 0.8rem;
	color: #8a8a8f;
	margin: -4px 0 0;
}

.ljc-join-forms .form-row {
	margin: 4px 0 0;
}

.ljc-join-forms button[type="submit"] {
	appearance: none;
	border: none;
	width: 100%;
	padding: 14px 16px;
	margin-top: 4px;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #fff;
	background: #a9772f;
	border-radius: 12px;
	cursor: pointer;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.ljc-join-forms button[type="submit"]:active {
	filter: brightness(0.9);
}

.ljc-join-forms .woocommerce-LostPassword {
	text-align: center;
	margin: 2px 0 0;
	font-size: 0.85rem;
}

.ljc-join-forms .woocommerce-LostPassword a {
	color: #8a8a8f;
}

/* WooCommerce error/notice list (wrong password, email already registered, etc). */
.ljc-join-forms ul.woocommerce-error,
.ljc-join-page ul.woocommerce-error {
	list-style: none;
	margin: 0 0 5%;
	padding: 12px 14px;
	background: #fbeaea;
	border: 1px solid rgba(178, 58, 58, 0.25);
	border-radius: 10px;
	color: #8a2f2f;
	font-size: 0.85rem;
}

.ljc-join-forms ul.woocommerce-error li {
	margin: 0;
}

.ljc-join-toggle-wrap {
	text-align: center;
	margin: 6% 0 0;
}

.ljc-join-toggle {
	font-size: 0.9rem;
	font-weight: 700;
	color: #a9772f;
	text-decoration: underline;
	text-underline-offset: 2px;
}