/*
 * BB Auth page — guest /my-account/. Scoped to body.bb-auth.
 * Wraps WC's native #customer_login two-column login+register form into
 * a split-screen layout with a brand panel on the left.
 * Tokens (--bb-red, --bb-line, --bb-mute, --bb-soft) come from bb-shell.css.
 */

/* Free the page container from Shoptimizer's narrow article width. */
body.bb-auth .col-full,
body.bb-auth #primary,
body.bb-auth #main {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
}
body.bb-auth .entry-content { margin: 0 !important; padding: 0 !important; }
/* Hide the stock "My Account" h1 — the brand panel + form headings carry the page. */
body.bb-auth .entry-title,
body.bb-auth h1.entry-title { display: none; }

.bb-auth-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: calc(100vh - 200px);
	background: var(--bb-soft, #f6f6f7);
}

/* ── BRAND PANEL ─────────────────────────────────────────────────────── */
.bb-auth-brand {
	background: linear-gradient(135deg, #1f1f1f 0%, #2b2b30 60%, #B8141B 140%);
	color: #fff;
	padding: 56px 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.bb-auth-brand::before {
	content: "";
	position: absolute;
	right: -120px;
	top: -120px;
	width: 360px;
	height: 360px;
	border-radius: 999px;
	background: radial-gradient(closest-side, rgba(229,27,35,0.35), transparent);
	pointer-events: none;
}
.bb-auth-brand__logo {
	display: inline-block;
	margin-bottom: 32px;
	max-width: 140px;
}
.bb-auth-brand__logo img {
	width: 140px;
	height: auto;
	filter: brightness(0) invert(1); /* white version of the BB logo */
	display: block;
}
.bb-auth-brand__h {
	font-size: 44px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0 0 16px;
	color: #fff;
	text-wrap: balance;
}
.bb-auth-brand__h em {
	font-style: italic;
	color: #FFB400;
	font-weight: 800;
}
.bb-auth-brand__sub {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 32px;
	max-width: 460px;
}
.bb-auth-brand__bullets {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bb-auth-brand__bullets li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}
.bb-auth-brand__bullets li span:last-child b {
	display: block;
	font-weight: 700;
	color: #fff;
	font-size: 14px;
	margin-bottom: 2px;
}
.bb-auth-brand__ic {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	display: grid;
	place-items: center;
	color: #FFB400;
}
.bb-auth-brand__ic svg { width: 18px; height: 18px; }
.bb-auth-brand__help {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	width: fit-content;
	transition: background .15s ease;
}
.bb-auth-brand__help:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
.bb-auth-brand__help-ic {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: #22c55e;
	color: #fff;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

/* ── FORMS SIDE ──────────────────────────────────────────────────────── */
.bb-auth-cards {
	padding: 56px 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
}
body.bb-auth #customer_login {
	display: flex;
	flex-direction: column;
	gap: 36px;
	max-width: 460px;
	width: 100%;
	margin: 0 auto;
}
body.bb-auth #customer_login::before,
body.bb-auth #customer_login::after,
body.bb-auth .u-columns::before,
body.bb-auth .u-columns::after { content: none; }
body.bb-auth .u-column1,
body.bb-auth .u-column2 {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.bb-auth .u-column2 {
	padding-top: 28px !important;
	border-top: 1px solid var(--bb-line, #e8e8eb);
}

/* Form headings */
body.bb-auth #customer_login h2 {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	color: #1f1f1f;
}
body.bb-auth .u-column1 h2::after {
	content: "Sign in to track orders, save addresses & checkout faster.";
	display: block;
	font-size: 14px;
	color: #6b7280;
	font-weight: 500;
	margin-top: 6px;
	letter-spacing: 0;
}
body.bb-auth .u-column2 h2::after {
	content: "New here? Create an account to get faster checkout, order tracking & saved addresses.";
	display: block;
	font-size: 14px;
	color: #6b7280;
	font-weight: 500;
	margin-top: 6px;
	letter-spacing: 0;
}

/* Form fields */
body.bb-auth .woocommerce-form .form-row {
	margin: 16px 0 0 !important;
	padding: 0 !important;
}
body.bb-auth .woocommerce-form .form-row label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #1f1f1f;
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}
body.bb-auth .woocommerce-form .form-row label .required { color: var(--bb-red, #E51B23); margin-left: 2px; }
body.bb-auth .woocommerce-form input[type="text"],
body.bb-auth .woocommerce-form input[type="email"],
body.bb-auth .woocommerce-form input[type="password"] {
	width: 100% !important;
	padding: 13px 14px !important;
	border: 1.5px solid var(--bb-line, #e8e8eb) !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	background: #fff !important;
	color: #1f1f1f !important;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-shadow: none !important;
}
body.bb-auth .woocommerce-form input[type="text"]:focus,
body.bb-auth .woocommerce-form input[type="email"]:focus,
body.bb-auth .woocommerce-form input[type="password"]:focus {
	border-color: var(--bb-red, #E51B23) !important;
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(229,27,35,0.12) !important;
}

/* Remember-me checkbox + submit row */
body.bb-auth .woocommerce-form-login__rememberme {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #4b4b4b;
	cursor: pointer;
	margin-top: 14px;
}
body.bb-auth .woocommerce-form-login__rememberme input[type="checkbox"] {
	accent-color: var(--bb-red, #E51B23);
	width: 16px;
	height: 16px;
	margin: 0;
}
body.bb-auth .woocommerce-form-login button,
body.bb-auth .woocommerce-form-register button,
body.bb-auth .woocommerce-Button {
	background: var(--bb-red, #E51B23) !important;
	color: #fff !important;
	border: 0 !important;
	width: 100%;
	padding: 14px 16px !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	cursor: pointer;
	margin-top: 18px !important;
	letter-spacing: 0.01em;
	transition: background .15s ease;
}
body.bb-auth .woocommerce-form-login button:hover,
body.bb-auth .woocommerce-form-register button:hover,
body.bb-auth .woocommerce-Button:hover {
	background: var(--bb-red-deep, #B8141B) !important;
	color: #fff !important;
}

/* Lost password link */
body.bb-auth .woocommerce-LostPassword {
	margin-top: 14px !important;
	font-size: 13px;
}
body.bb-auth .woocommerce-LostPassword a {
	color: var(--bb-red, #E51B23) !important;
	font-weight: 600;
	text-decoration: none;
}
body.bb-auth .woocommerce-LostPassword a:hover { text-decoration: underline; }

/* WC notices on guest /my-account/ (login error, etc.) */
body.bb-auth .woocommerce-notices-wrapper,
body.bb-auth .woocommerce-message,
body.bb-auth .woocommerce-error,
body.bb-auth .woocommerce-info {
	max-width: 460px;
	margin: 0 auto 18px;
	border-radius: 10px;
}

/* Mobile — stack vertically, brand panel becomes top hero */
@media (max-width: 900px) {
	.bb-auth-wrap { grid-template-columns: 1fr; min-height: 0; }
	.bb-auth-brand { padding: 40px 28px; }
	.bb-auth-brand__h { font-size: 30px; }
	.bb-auth-brand__bullets { display: none; }   /* hide on mobile to keep form above the fold */
	.bb-auth-brand__help { display: none; }
	.bb-auth-cards { padding: 32px 24px; }
}

/* ────────────────────────────────────────────────────────────────────── */
/* ── BB Auth — Lost Password / Reset (round 14) ────────────────────────── */
/* ────────────────────────────────────────────────────────────────────── */
/* form-lost-password.php renders ONLY a .woocommerce-ResetPassword form (no
 * #customer_login two-column wrapper). It still sits inside .bb-auth-cards
 * via the round-14 brand hooks, so the right side gets the same split-screen.
 * lost-password-confirmation.php renders just a notice + paragraph after the
 * reset email is sent — those get the same card frame too. */

/* The form is a sibling of any notices inside .bb-auth-cards — center it
 * and make it look like the login section. */
body.bb-auth .woocommerce-ResetPassword {
	max-width: 460px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

/* Inject a "Forgot your password?" heading + subtitle via :before pseudo-block. */
body.bb-auth .woocommerce-ResetPassword::before {
	content: "Forgot your password?";
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #1f1f1f;
	line-height: 1.2;
	margin-bottom: 6px;
	display: block;
}

/* The form's intro <p> is the WC default copy — restyle it as the subtitle. */
body.bb-auth .woocommerce-ResetPassword > p:first-of-type {
	font-size: 14px;
	color: #6b7280;
	font-weight: 500;
	margin: 0 0 24px;
	line-height: 1.55;
}

/* Username/email field row */
body.bb-auth .woocommerce-ResetPassword .form-row {
	margin: 0 !important;
	padding: 0 !important;
}
body.bb-auth .woocommerce-ResetPassword .form-row-first {
	width: 100% !important;
	float: none !important;
	margin-right: 0 !important;
	display: block !important;
}
body.bb-auth .woocommerce-ResetPassword label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #1f1f1f;
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}
body.bb-auth .woocommerce-ResetPassword label .required { color: var(--bb-red, #E51B23); }
body.bb-auth .woocommerce-ResetPassword input[type="text"],
body.bb-auth .woocommerce-ResetPassword input[type="email"] {
	width: 100% !important;
	padding: 13px 14px !important;
	border: 1.5px solid var(--bb-line, #e8e8eb) !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	background: #fff !important;
	color: #1f1f1f !important;
	box-shadow: none !important;
}
body.bb-auth .woocommerce-ResetPassword input[type="text"]:focus,
body.bb-auth .woocommerce-ResetPassword input[type="email"]:focus {
	border-color: var(--bb-red, #E51B23) !important;
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(229,27,35,0.12) !important;
}

/* Reset submit button — full BB primary */
body.bb-auth .woocommerce-ResetPassword button[type="submit"],
body.bb-auth .woocommerce-ResetPassword .woocommerce-Button {
	background: var(--bb-red, #E51B23) !important;
	color: #fff !important;
	border: 0 !important;
	width: 100%;
	padding: 14px 16px !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	cursor: pointer;
	margin-top: 22px !important;
	transition: background .15s ease;
}
body.bb-auth .woocommerce-ResetPassword button[type="submit"]:hover,
body.bb-auth .woocommerce-ResetPassword .woocommerce-Button:hover {
	background: var(--bb-red-deep, #B8141B) !important;
}

/* "Back to sign in" link injected via ::after */
body.bb-auth .woocommerce-ResetPassword::after {
	content: "← Back to sign in";
	display: block;
	text-align: center;
	margin-top: 18px;
	font-size: 13px;
	color: var(--bb-red, #E51B23);
	font-weight: 600;
	cursor: pointer;
}

/* Make ::after clickable via wrapping anchor (JS could enhance later);
 * for now the WC defaults link back via the WC menu in nav, so the ::after
 * is informational. Use real <a> in template override if true link needed. */

/* lost-password-confirmation message (post-submit) — wrap notices + paragraph
 * in a card-shaped frame. The .woocommerce-message above the <p> gets
 * styled by the existing notices rule; the <p> gets centered. */
body.bb-auth .bb-auth-cards > .woocommerce-message + p,
body.bb-auth .bb-auth-cards > .woocommerce-notices-wrapper + p {
	max-width: 460px;
	margin: 0 auto 18px;
	font-size: 14px;
	color: #4b4b4b;
	line-height: 1.55;
	text-align: center;
}

/* Notices inside the cards area (e.g. "Password reset email has been sent.") */
body.bb-auth .bb-auth-cards .woocommerce-message,
body.bb-auth .bb-auth-cards .woocommerce-error,
body.bb-auth .bb-auth-cards .woocommerce-info {
	max-width: 460px;
	margin: 0 auto 18px;
	border-radius: 10px;
	border: 1px solid #d1fae5;
	background: #f0fdf4;
	color: #065f46;
	padding: 14px 18px;
	font-size: 13px;
	line-height: 1.5;
	list-style: none;
}
body.bb-auth .bb-auth-cards .woocommerce-error {
	border-color: #fee2e2;
	background: #fef2f2;
	color: #b91c1c;
}