/**
 * QLA Login Styles
 *
 * Button and success message for the magic link trigger on all three login
 * surfaces: wp-login.php, WooCommerce /my-account/, and CheckoutWC modal.
 *
 * Strategy: lean on each surface's existing form styles. Only add what is
 * needed to make the button read as a secondary action and the success message
 * read as a positive notice.
 *
 * @since 1.0.0
 */

/* ==========================================================================
   Hidden trigger container (CheckoutWC always-present pattern).
   ========================================================================== */

.qla-magic-link-trigger--hidden {
	display: none;
}

/* ==========================================================================
   Magic link button — secondary / outline style.
   ========================================================================== */

.qla-magic-link-btn {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 10px 16px;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 3px;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.qla-magic-link-btn:hover {
	background-color: rgba( 0, 0, 0, 0.05 );
}

.qla-magic-link-btn:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.qla-magic-link-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* wp-login.php — match WordPress login button sizing and border-radius. */
.login .qla-magic-link-btn {
	padding: 8px 12px;
	border-radius: 3px;
	font-size: 14px;
}

/* WooCommerce /my-account/ — match WooCommerce button sizing. */
.woocommerce-account .qla-magic-link-btn {
	padding: 10px 16px;
	border-radius: 3px;
}

/* CheckoutWC modal — match CheckoutWC modal button style. */
#cfw-login-modal .qla-magic-link-btn {
	padding: 10px 16px;
	border-radius: 3px;
}

/* ==========================================================================
   Success message — positive notice style.
   ========================================================================== */

.qla-magic-link-success {
	margin-bottom: 16px;
	padding: 12px 16px;
	background-color: #ecf7ed;
	border: 1px solid #c3e6c5;
	border-radius: 3px;
	color: #2d6a30;
	font-size: inherit;
	line-height: 1.5;
}

/* ==========================================================================
   My Account login page redesign — card layout.
   All rules scoped to .woocommerce-account:not(.logged-in) to avoid
   affecting the logged-in dashboard or other surfaces.
   ========================================================================== */

/* 0. Hide the "LOG IN TO VIEW & MANAGE YOUR ACCOUNT" heading row and its
   separator. This GeneratePress container sits between the nav and the card
   area; hiding it lets the sign-in card be the sole visual focus. */
.woocommerce-account:not(.logged-in) .gb-container-20d2bacc {
	display: none;
}

/* 1. Card layout. */

.woocommerce-account:not(.logged-in) .u-columns.col2-set {
	display: block;
	max-width: 440px;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 80, 18, 1, 0.06 ), 0 8px 28px rgba( 80, 18, 1, 0.08 );
	position: relative;
	/* overflow: hidden removed — it clipped the submit button, divider, and
	   magic-link button that extend beyond the card's theme-set height. The
	   ::before gradient bar is a normal-flow block and does not need overflow
	   clipping. */
}

/* Override theme's fixed height (style.css sets #customer_login height: 450px)
   which clips the card contents. Auto height lets the card grow to fit.
   Also remove the theme's bg-image from the card (it belongs on the wrapper). */
.woocommerce-account:not(.logged-in) #customer_login {
	height: auto;
	background-image: none;
	margin-top: 0;
}

/* Background image behind the card — wood-texture covers the content area,
   matching the reference design at handlaidtrack.com. Applied to the
   GeneratePress container that wraps the WooCommerce login form. */
.woocommerce-account:not(.logged-in) .gb-container-e9b60586 {
	background-image: url( '/wp-content/uploads/curved-trackwork-bg.jpg' );
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding-bottom: 50px;
}

.woocommerce-account:not(.logged-in) .u-columns.col2-set::before {
	content: '';
	display: block;
	height: 3px;
	background: linear-gradient( to right, #200A01, #501201 );
}

.woocommerce-account:not(.logged-in) .u-column1 {
	width: 100%;
	float: none;
	padding: 40px 36px 36px;
}

/* Override theme's #customer_login .u-column1 padding-right: 50px. */
.woocommerce-account:not(.logged-in) #customer_login .u-column1 {
	padding: 40px 36px 36px;
}

.woocommerce-account:not(.logged-in) .u-column2 {
	display: none;
}

/* Hide error notices in their original position (above the card); JS relocates
   them into the card. Prevents a flash of the error in its original position.
   Includes Wordfence Login Security wrapper (.wfls-login-message). */
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper,
.woocommerce-account:not(.logged-in) .wfls-login-message {
	display: none;
}

/* 2. Heading area (injected by JS). */

.qla-login-heading {
	font-size: 22px;
	font-weight: 700;
	color: #501201;
	line-height: 1.3;
	text-align: center;
}

.qla-login-subtext {
	font-size: 14px;
	color: #5a6578;
	margin-top: 6px;
	line-height: 1.5;
	text-align: center;
}

/* 3. Form field refinements. */

/* Hide default "Login" h2 — replaced by JS-injected heading. */
.woocommerce-account:not(.logged-in) .u-column1 > h2 {
	display: none;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login label {
	font-size: 13px;
	font-weight: 600;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login input[type="text"],
.woocommerce-account:not(.logged-in) .woocommerce-form-login input[type="password"],
.woocommerce-account:not(.logged-in) .woocommerce-form-login input[type="email"] {
	border: 1.5px solid #e2e6eb;
	padding: 12px 14px;
	font-size: 15px;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login input[type="text"]:focus,
.woocommerce-account:not(.logged-in) .woocommerce-form-login input[type="password"]:focus,
.woocommerce-account:not(.logged-in) .woocommerce-form-login input[type="email"]:focus {
	border-color: #8A5426;
	box-shadow: 0 0 0 3px rgba( 138, 84, 38, 0.15 );
	outline: none;
}

/* Username and password rows — labels stacked above inputs (block layout). */
.woocommerce-account:not(.logged-in) .woocommerce-form-login p.form-row-wide {
	display: block;
}

/* Password field wrapper — horizontal layout so input and toggle sit side-by-side. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login .password-input {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
}

/* Password input fills available width.
   margin-bottom: 0 overrides theme's #customer_login .form-row #password { margin-bottom: 20px }
   (2 IDs = higher specificity) which inflates the flex container and misaligns the show-password icon.
   Target both type="password" and type="text" — WooCommerce toggles the type on show/hide. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login .password-input input[type="password"],
.woocommerce-account:not(.logged-in) .woocommerce-form-login .password-input input[type="text"] {
	flex: 1;
	padding-right: 44px; /* space for the icon */
	margin-bottom: 0 !important;
}

/* Show-password toggle — compact icon at right edge.
   #customer_login ID needed to override theme's #customer_login button { width: 230px }. */
.woocommerce-account:not(.logged-in) #customer_login .show-password-input {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 35px;
	height: 35px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8a95a5;
}

/* Remember me + lost password row — flex with wrap so button goes to new line.
   Uses #customer_login to match the theme's ID-based specificity, which sets
   flex-direction: row-reverse and justify-content: flex-end on .remember-me-row. */
.woocommerce-account:not(.logged-in) #customer_login .u-column1 .remember-me-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 18px;
}

/* Lost password paragraph — hidden after JS moves the link into the form-row. */
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword.qla-moved {
	display: none;
}

/* Submit button — full-width on its own line via flex order. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login button[type="submit"] {
	display: block;
	width: 100%;
	flex: 0 0 100%;
	order: 10;
	background: #8A5426;
	color: #fff;
	border: 2px solid #8A5426;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 24px;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login button[type="submit"]:hover {
	background: #6A3A0F;
	box-shadow: 0 4px 12px rgba( 138, 84, 38, 0.25 );
}

/* Lost password link (in original position or after JS moves it into form-row). */
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a,
.woocommerce-account:not(.logged-in) .woocommerce-form-login p.form-row a[href*="lost-password"] {
	color: #501201;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a:hover,
.woocommerce-account:not(.logged-in) .woocommerce-form-login p.form-row a[href*="lost-password"]:hover {
	text-decoration: underline;
}

/* 4. Error notice — simple red text line at top of card.
   Uses negative margins to occupy the .u-column1 top padding area so the
   heading stays in the same position — NO content shift. No box, no borders.
   Theme's style.css sets border-top, font-size: 20px, padding-left: 80px,
   color, and background on .woocommerce-error[role="alert"] with !important,
   so we must counter with !important. */

.woocommerce-account:not(.logged-in) .u-column1 .woocommerce-error {
	position: relative;
	margin: -28px 0 16px;
	background: none !important;
	border: none !important;
	color: #CE1616 !important;
	list-style: none;
	padding: 0 !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	outline: none; /* Remove focus ring — role="alert" announces to AT without it. */
}

.woocommerce-account:not(.logged-in) .u-column1 .woocommerce-error li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Hide theme's ::before icon and Wordfence red icon circle. */
.woocommerce-account:not(.logged-in) .u-column1 .woocommerce-error::before {
	display: none !important;
}

/* Error link styling — hide "Lost your password?" since it's redundant
   with the "Forgot password?" link already in the form. */
.woocommerce-account:not(.logged-in) .u-column1 .woocommerce-error a {
	color: #CE1616 !important;
	font-weight: 500;
}

/* Override Wordfence Login Security error wrapper if relocated into the card. */
.woocommerce-account:not(.logged-in) .u-column1 .wfls-login-message {
	display: block;
}

/* 5. Divider. */

.qla-login-divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 22px 0;
}

.qla-login-divider::before,
.qla-login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e2e6eb;
}

.qla-login-divider__text {
	font-size: 12px;
	font-weight: 600;
	color: #8a95a5;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* 6. Magic link button (My Account override). */

.woocommerce-account:not(.logged-in) .qla-magic-link-trigger {
	width: 100%;
}

/* Override theme's #customer_login button { width: 230px } which constrains
   the magic-link button. ID selector needed to beat ID-based theme specificity. */
.woocommerce-account:not(.logged-in) #customer_login .qla-magic-link-btn {
	display: block;
	width: 100%;
	background: transparent;
	color: #8A5426;
	border: 2px solid #8A5426;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	border-radius: 0;
	margin-top: 0;
}

.woocommerce-account:not(.logged-in) #customer_login .qla-magic-link-btn:hover {
	background: #8A5426;
	color: #fff;
	box-shadow: 0 4px 12px rgba( 138, 84, 38, 0.25 );
}

/* 7. Helper text. */

.qla-login-helper {
	text-align: center;
	font-size: 12px;
	color: #8a95a5;
	margin-top: 10px;
	line-height: 1.5;
}

/* 8. Success state. */

.qla-login-success {
	text-align: center;
	padding: 20px 0 8px;
}

.qla-login-success__icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 24px;
	background: #FEF0DA;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qla-login-success__icon svg {
	width: 36px;
	height: 36px;
	fill: #501201;
}

.qla-login-success__heading {
	font-size: 22px;
	font-weight: 700;
	color: #501201;
	margin-bottom: 12px;
}

.qla-login-success__text {
	font-size: 14px;
	color: #5a6578;
	line-height: 1.7;
	max-width: 340px;
	margin: 0 auto;
}

.qla-login-success__text + .qla-login-success__text {
	margin-top: 8px;
}

.qla-login-success__text strong {
	color: #501201;
	font-weight: 600;
}

.qla-login-success__retry {
	margin-top: 28px;
	font-size: 13px;
	color: #8a95a5;
	line-height: 1.6;
}

.qla-login-success__retry a {
	color: #501201;
	font-weight: 500;
	text-decoration: none;
}

.qla-login-success__retry a:hover {
	text-decoration: underline;
}

.qla-login-success__back {
	display: inline-block;
	margin-top: 24px;
	font-size: 14px;
	font-weight: 600;
	color: #501201;
	text-decoration: none;
}

.qla-login-success__back:hover {
	color: #200A01;
}

/* 9. Below-card register link. */

.qla-login-register {
	text-align: center;
	margin-top: 24px;
	margin-bottom: 40px;
	font-size: 14px;
	color: #8A5426;
}

.qla-login-register a {
	color: #8A5426;
	font-weight: 600;
	text-decoration: underline;
}

.qla-login-register a:hover {
	text-decoration: none;
}

/* 10. Registration view. */

.qla-create-account-btn {
	display: block;
	width: 100% !important;
	background: #8A5426;
	color: #fff;
	border: 2px solid #8A5426;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	cursor: pointer;
	text-align: center;
	margin-top: 20px;
}

.qla-create-account-btn:hover {
	background: #6A3A0F;
	box-shadow: 0 4px 12px rgba( 138, 84, 38, 0.25 );
}

.qla-create-account-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.qla-register-error {
	background: #fef7ec;
	border-left: 3px solid #f0c36d;
	color: #7a5a0b;
	padding: 12px 16px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.qla-register-error a {
	color: #501201;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.qla-register-error a:hover {
	text-decoration: underline;
}

/* 11. Responsive (max-width: 480px). */

@media ( max-width: 480px ) {
	.woocommerce-account:not(.logged-in) .u-columns.col2-set {
		max-width: none;
	}

	.woocommerce-account:not(.logged-in) .u-column1 {
		padding: 28px 22px 24px;
	}

	.qla-login-heading {
		font-size: 20px;
	}

	/* Error text — adjust top margin for reduced padding. */
	.woocommerce-account:not(.logged-in) .u-column1 .woocommerce-error {
		margin: -16px 0 12px;
	}
}

/* ==========================================================================
   12. Lost-password and reset-password page card styling.
   Scoped to .woocommerce-account:not(.logged-in) to avoid logged-in pages.
   The form itself is styled as the card (no .u-columns wrapper on these pages).
   ========================================================================== */

/* Card layout — form is the card container. */
.woocommerce-account:not(.logged-in) form.woocommerce-ResetPassword.lost_reset_password {
	max-width: 440px;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 80, 18, 1, 0.06 ), 0 8px 28px rgba( 80, 18, 1, 0.08 );
	position: relative;
	overflow: hidden;
	padding: 40px 36px 36px;
}

/* Gradient maroon top bar (matches login card ::before). */
.woocommerce-account:not(.logged-in) form.woocommerce-ResetPassword.lost_reset_password::before {
	content: '';
	display: block;
	height: 3px;
	background: linear-gradient( to right, #200A01, #501201 );
	/* Pull padding back so bar spans full card width. */
	margin: -40px -36px 36px;
}

/* Hide the notices wrapper above the form (WC default position). */
.woocommerce-lost-password .woocommerce-notices-wrapper {
	display: none;
}

/* Hide the default WooCommerce description paragraph — JS replaces with heading/subtext. */
.woocommerce-lost-password form.lost_reset_password > p:first-of-type {
	display: none;
}

/* Hide the theme's "Password Reset" h3 — QLA JS injects its own heading. */
form.lost_reset_password .password-reset-header {
	display: none;
}

/* Form rows — force full-width (WC uses form-row-first at ~48% for two-column). */
form.lost_reset_password .form-row {
	width: 100%;
	float: none;
}

/* Label styling — matches login page. */
form.lost_reset_password label {
	font-size: 13px;
	font-weight: 600;
}

/* Input field styling — matches login page. */
form.lost_reset_password input[type="text"],
form.lost_reset_password input[type="email"],
form.lost_reset_password input[type="password"] {
	border: 1.5px solid #e2e6eb;
	padding: 12px 14px;
	font-size: 15px;
}

/* Input focus state — matches login page. */
form.lost_reset_password input[type="text"]:focus,
form.lost_reset_password input[type="email"]:focus,
form.lost_reset_password input[type="password"]:focus {
	border-color: #8A5426;
	box-shadow: 0 0 0 3px rgba( 138, 84, 38, 0.15 );
	outline: none;
}

/* Submit button — full-width brown, matches login page.
   Theme sets .lost_reset_password .form-row .wc_reset_password-button { width: 230px }
   (3 classes) — our selector must match or exceed that specificity. */
.woocommerce-account form.lost_reset_password .form-row button[type="submit"],
.woocommerce-account form.lost_reset_password .form-row input[type="submit"] {
	display: block;
	width: 100%;
	background: #8A5426;
	color: #fff;
	border: 2px solid #8A5426;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 24px;
}

/* Submit button hover — matches login page. */
.woocommerce-account form.lost_reset_password .form-row button[type="submit"]:hover,
.woocommerce-account form.lost_reset_password .form-row input[type="submit"]:hover {
	background: #6A3A0F;
	box-shadow: 0 4px 12px rgba( 138, 84, 38, 0.25 );
}

/* 12b. Lost-password confirmation card ("reset email sent" page).
   Uses the same card shell as the form but wraps .qla-login-success content. */

.qla-lost-password-card {
	max-width: 440px;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 80, 18, 1, 0.06 ), 0 8px 28px rgba( 80, 18, 1, 0.08 );
	position: relative;
	overflow: hidden;
	padding: 40px 36px 36px;
}

.qla-lost-password-card::before {
	content: '';
	display: block;
	height: 3px;
	background: linear-gradient( to right, #200A01, #501201 );
	margin: -40px -36px 36px;
}

/* "Remember your password? Sign in" link below the lost-password card. */
.woocommerce-lost-password .qla-login-register {
	color: #98692B;
}

.woocommerce-lost-password .qla-login-register a {
	color: #98692B;
	font-weight: 700;
	text-decoration: underline;
}

.woocommerce-lost-password .qla-login-register a:hover {
	text-decoration: none;
}

/* Responsive — card and form go full-width below 480px. */
@media ( max-width: 480px ) {
	.woocommerce-account:not(.logged-in) form.woocommerce-ResetPassword.lost_reset_password {
		max-width: none;
		padding: 28px 22px 24px;
	}

	.woocommerce-account:not(.logged-in) form.woocommerce-ResetPassword.lost_reset_password::before {
		margin: -28px -22px 28px;
	}

	.qla-lost-password-card {
		max-width: none;
		padding: 28px 22px 24px;
	}

	.qla-lost-password-card::before {
		margin: -28px -22px 28px;
	}
}

/* ==========================================================================
   13. CheckoutWC login modal overrides.
   Scoped to #cfw_login_modal_form (the form rendered inside the CheckoutWC
   modal, #cfw-login-modal context). When qla-login is deactivated this
   stylesheet is not loaded and CheckoutWC reverts to its defaults.
   ========================================================================== */

/* 13a. Modal box — narrow card-like width, padding, and border-radius to
   match my-account card. CheckoutWC uses .cfw-modal:not(.cfw-full-screen)
   with !important on max-width; both selectors have equal specificity, so
   the later one in source order wins. Since CheckoutWC loads after us, we
   double-up the :not() to increase specificity. */

.cfw-modal:not(.cfw-full-screen):not(.cfw-full-screen) {
	max-width: 500px !important;
}

.cfw-modal {
	padding: 40px 36px 36px !important;
	border-radius: 0 !important;
}

/* 13b. Accent bar — injected as div.qla-checkout-accent-bar by JS, positioned
   absolute at the top of .cfw-modal (which is position:relative). */

.qla-checkout-accent-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient( to right, #200A01, #501201 );
	z-index: 1;
	pointer-events: none;
}

/* 13c. Heading — shared between login and lost-password forms. */

#cfw_login_modal_form h3,
#cfw_lost_password_form h3 {
	font-size: 22px;
	font-weight: 700;
	color: #501201;
	line-height: 1.3;
	margin-bottom: 20px;
	letter-spacing: normal;
}

/* 13d. Subtext paragraph. CheckoutWC .cfw-modal p sets margin-bottom with
   !important, so we must counter it here. */

#cfw_login_modal_form .cfw-mb,
#cfw_lost_password_form .cfw-mb {
	font-size: 14px;
	color: #5a6578;
	line-height: 1.5 !important;
	margin-bottom: 21px !important;
	letter-spacing: normal;
}

/* 13e. Labels (floating labels used by CheckoutWC). */

#cfw_login_modal_form .cfw-floatable-label,
#cfw_lost_password_form .cfw-floatable-label {
	font-size: 13px;
	font-weight: 600;
	color: #501201;
}

/* 13f. Input fields. CheckoutWC form.woocommerce-form-login .form-row
   input.input-text uses border shorthand with !important, so we must set
   border-width, border-color, and border-radius individually. */

#cfw_login_modal_form .input-text,
#cfw_lost_password_form .input-text {
	border-width: 1.5px !important;
	border-style: solid !important;
	border-color: #e2e6eb !important;
	border-radius: 4px !important;
	padding: 12px 14px;
	font-size: 15px;
}

/* When the floating label is active, push typed text below the label.
   Total vertical padding (22+6=28px) + 15px font fits within 45px field. */
#cfw_login_modal_form .cfw-label-is-floated .input-text,
#cfw_lost_password_form .cfw-label-is-floated .input-text {
	padding-top: 22px !important;
	padding-bottom: 6px !important;
}

#cfw_login_modal_form .input-text:focus,
#cfw_lost_password_form .input-text:focus {
	border-color: #8A5426 !important;
	box-shadow: 0 0 0 3px rgba( 138, 84, 38, 0.15 );
	outline: none;
}

/* 13g. Submit button — override CheckoutWC green .cfw-primary-btn. */

#cfw_login_modal_form #cfw-login-btn.cfw-primary-btn {
	width: 100%;
	background: #8A5426 !important;
	color: #fff !important;
	border: 2px solid #8A5426 !important;
	border-radius: 0 !important;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	cursor: pointer;
}

#cfw_login_modal_form #cfw-login-btn.cfw-primary-btn:hover {
	background: #6A3A0F !important;
	border-color: #6A3A0F !important;
	box-shadow: 0 4px 12px rgba( 138, 84, 38, 0.25 );
}

/* 13h. Button wrapper — tighten margin to match my-account. */

#cfw_login_modal_form .cfw-login-modal-navigation {
	margin: 24px 0 0;
}

/* 13i. Error alert — override CheckoutWC red bar + error box. */

#cfw-login-alert-container .cfw-alert-error {
	background: #fef7ec;
	border-top: none !important;
	border-left: 3px solid #f0c36d;
	color: #7a5a0b;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	border-radius: 0;
}

/* 13j. Footer (remember-me + lost password) — flex row layout. */

#cfw_login_modal_form .cfw-login-modal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 13k. Remember-me — dark maroon label, smaller checkbox. CheckoutWC uses
   !important on checkbox width/height, so we counter. */

#cfw_login_modal_form .woocommerce-form__label-for-checkbox {
	font-size: 13px;
	font-weight: 600;
	color: #501201;
}

#cfw_login_modal_form .woocommerce-form__input-checkbox {
	width: 13px !important;
	min-width: 13px !important;
	height: 13px !important;
}

/* 13l. Lost password link. CheckoutWC .lost_password a uses color with
   !important via CSS variable, so we must counter. */

#cfw_login_modal_form .lost_password a {
	color: #501201 !important;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

#cfw_login_modal_form .lost_password a:hover {
	text-decoration: underline;
}

/* 13m. Magic link button — brown outline (matches my-account pattern). */

#cfw_login_modal_form .qla-magic-link-btn {
	display: block;
	width: 100%;
	background: transparent;
	color: #8A5426;
	border: 2px solid #8A5426;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	border-radius: 0;
	margin-top: 0;
}

#cfw_login_modal_form .qla-magic-link-btn:hover {
	background: #8A5426;
	color: #fff;
	box-shadow: 0 4px 12px rgba( 138, 84, 38, 0.25 );
}

/* 13n. "or" divider — confirm scoped style inside modal. */

#cfw_login_modal_form .qla-login-divider {
	margin: 22px 0;
}

/* 13o. Helper text — confirm scoped style inside modal. */

#cfw_login_modal_form .qla-login-helper {
	margin-top: 10px;
}

/* 13p. Success message — positive notice for magic link sent state. */

#cfw_login_modal_form .qla-magic-link-success {
	background: #ecf7ed;
	border: none;
	border-left: 3px solid #c3e6c5;
	color: #2d6a30;
	padding: 12px 16px;
	font-size: 14px;
	border-radius: 0;
}

/* 13q. Responsive — modal is already responsive (CheckoutWC handles it),
   but remove any excess top padding at narrow widths if needed. */

@media ( max-width: 480px ) {
	.cfw-modal {
		padding: 28px 22px 24px !important;
	}

	#cfw_login_modal_form h3,
	#cfw_lost_password_form h3 {
		font-size: 20px;
	}
}

/* 13r. Lost-password form — submit button override (green → brown). */

#cfw_lost_password_form .cfw-primary-btn {
	width: 100%;
	background: #8A5426 !important;
	color: #fff !important;
	border: 2px solid #8A5426 !important;
	border-radius: 0 !important;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	cursor: pointer;
}

#cfw_lost_password_form .cfw-primary-btn:hover {
	background: #6A3A0F !important;
	border-color: #6A3A0F !important;
	box-shadow: 0 4px 12px rgba( 138, 84, 38, 0.25 );
}

/* 13s. Close button — positioned top-right of .cfw-modal (position:relative). */

.qla-modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: none;
	cursor: pointer;
	color: #5a6578;
	padding: 4px;
	z-index: 1001;
	line-height: 0;
}

.qla-modal-close:hover {
	color: #501201;
}

/* 13t. "Back to sign in" link below the reset button. */

#cfw_lost_password_form .qla-login-register {
	text-align: center;
	margin-top: 24px;
	font-size: 14px;
	color: #5a6578;
}

#cfw_lost_password_form .qla-login-register a {
	color: #501201;
	font-weight: 600;
	text-decoration: none;
}

#cfw_lost_password_form .qla-login-register a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   14. Checkout page — suppress WooCommerce "account exists" notices.
   When QLA Login is active, the modal handles the login prompt. Hide
   any redundant WC notice bars that appear behind or above the modal.
   Scoped to the checkout body class to avoid hiding notices on other pages.
   ========================================================================== */

/* Hide the WC notice injected by the fasttracks plugin's return_customer_login().
   The #user-status span is the fingerprint — its presence confirms this is
   specifically the "account already registered" notice. */
body.woocommerce-checkout .woocommerce-error:has( #user-status ) {
	display: none !important;
}

/* Belt-and-suspenders: hide the top-level WooCommerce notices wrapper on
   checkout. The .woocommerce-notices-wrapper on the checkout page is used
   exclusively for "account exists" type notices — CheckoutWC renders its
   own notice system inside the checkout form. */
body.woocommerce-checkout .woocommerce-notices-wrapper {
	display: none !important;
}