/**
 * Zimpli registration form — UX layout.
 *
 * Sections are wrapped into `.zimpli-section-card` divs by the sidecar JS at
 * DOMContentLoaded. CSS Grid is scoped *inside* each card so short fields tagged
 * `.form-row-half` pair up two-per-row on viewports >= 600px, and so the cards
 * themselves stack vertically inside whatever outer container (Elementor, theme)
 * holds #wwlc-registration-form.
 */

#wwlc-registration-form .zimpli-section-card {
	background: #f4f4f5;
	border: 1px solid #e4e4e7;
	border-radius: 8px;
	padding: 1.25rem 1.5rem 0.75rem;
	margin: 0 0 1rem;
}

#wwlc-registration-form .zimpli-section-title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
}

/* High-contrast input treatment inside the section cards. The theme
   renders inputs with a near-white background that disappears against
   the card. We force white + a visible border so fields read as fields. */
#wwlc-registration-form .zimpli-section-card input[type="text"],
#wwlc-registration-form .zimpli-section-card input[type="email"],
#wwlc-registration-form .zimpli-section-card input[type="password"],
#wwlc-registration-form .zimpli-section-card input[type="url"],
#wwlc-registration-form .zimpli-section-card input[type="tel"],
#wwlc-registration-form .zimpli-section-card input[type="number"],
#wwlc-registration-form .zimpli-section-card input[type="search"],
#wwlc-registration-form .zimpli-section-card textarea,
#wwlc-registration-form .zimpli-section-card select,
#wwlc-registration-form .zimpli-section-card .select2-selection {
	background-color: #ffffff !important;
	border: 1px solid #d4d4d8 !important;
	color: #18181b;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Selects need explicit, self-contained sizing + arrow. The theme's own select
   styling only lands on selects that are visible at page load, so the Billing
   "Country" select — which sits in the Billing card that's display:none by
   default (same-as-shipping) — collapsed to a 2px, text-clipped box when later
   revealed (card 24). Style every card select identically so it renders
   correctly regardless of load-time visibility. */
#wwlc-registration-form .zimpli-section-card select {
	min-height: 41px;
	line-height: 1.4;
	padding: 8px 2.75rem 8px 0.75rem !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2352525b' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 12px 8px !important;
}

#wwlc-registration-form .zimpli-section-card input:focus,
#wwlc-registration-form .zimpli-section-card textarea:focus,
#wwlc-registration-form .zimpli-section-card select:focus,
#wwlc-registration-form .zimpli-section-card .select2-container--focus .select2-selection {
	border-color: #d23a2c !important;
	box-shadow: 0 0 0 3px rgba(210, 58, 44, 0.15);
	outline: none;
}

/* Preserve the existing error state styling but make it clearly red. */
#wwlc-registration-form .zimpli-section-card .wwlc_form_field.err {
	background-color: #fff1f0 !important;
	border-color: #dc2626 !important;
}

/* Labels: a touch heavier so the field/label hierarchy is obvious. */
#wwlc-registration-form .zimpli-section-card label {
	color: #18181b;
	font-weight: 600;
	margin-bottom: 0.35rem;
	display: block;
}

#wwlc-registration-form .zimpli-section-card label .optional {
	color: #71717a;
	font-weight: 400;
}

#wwlc-registration-form .zimpli-section-card > .content-field-wrap {
	/* The heading lives inside the card via JS-move; its own wrapper shouldn't
	   add extra spacing on top of the card padding. */
	margin: 0;
}

/* Hide WWLC's "Log In | Lost Password" links on the registration page.
   New leads aren't expected to be existing users — surfacing those routes
   alongside the registration form is just noise. */
#wwlc-registration-form > #log-in,
#wwlc-registration-form > #lost-password {
	display: none !important;
}

/* Register submit button. The Elementor / WC global button color is stored
   in the DB and renders the label near-black, which fails contrast on the
   brand-red background. Force white the same way zimpli-login-buttons does
   for the login surfaces. */
#wwlc-registration-form #wwlc-register,
#wwlc-registration-form input#wwlc-register,
#wwlc-registration-form button#wwlc-register {
	color: #ffffff !important;
}
#wwlc-registration-form #wwlc-register:hover,
#wwlc-registration-form #wwlc-register:focus {
	color: #ffffff !important;
}

/* Submit/login/lost-password row and the same-as-shipping toggle row sit outside
   the cards as direct children of #wwlc-registration-form and should remain
   full-width block elements. */
#wwlc-registration-form > .form-controls-section,
#wwlc-registration-form > .register-button-container,
#wwlc-registration-form > #log-in,
#wwlc-registration-form > #lost-password,
#wwlc-registration-form > #wwlc_billing_same_as_shipping_field {
	display: block;
	width: 100%;
}

@media (min-width: 600px) {
	#wwlc-registration-form .zimpli-section-card {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
		row-gap: 0;
		align-items: start;
	}
	#wwlc-registration-form .zimpli-section-card > * {
		grid-column: 1 / -1;
		margin-bottom: 0.75rem;
	}
	#wwlc-registration-form .zimpli-section-card > .form-row-half {
		grid-column: span 1;
	}
}

/* ---- Multi-step wizard ---- */
#wwlc-registration-form .zimpli-stepper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 6px;
}
#wwlc-registration-form .zimpli-stepper-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #999;
	font-size: 0.9rem;
	font-weight: 500;
	transition: color 0.2s ease;
}
#wwlc-registration-form .zimpli-stepper-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #e5e5e5;
	color: #555;
	font-weight: 600;
	font-size: 0.85rem;
	transition: background 0.2s ease, color 0.2s ease;
}
#wwlc-registration-form .zimpli-stepper-item.active {
	color: #222;
}
#wwlc-registration-form .zimpli-stepper-item.active .zimpli-stepper-num {
	background: #d23a2c;
	color: #fff;
}
#wwlc-registration-form .zimpli-stepper-item.completed .zimpli-stepper-num {
	background: #16a34a;
	color: #fff;
}
#wwlc-registration-form .zimpli-stepper-item.completed .zimpli-stepper-num::before {
	content: '✓';
}
#wwlc-registration-form .zimpli-stepper-item.completed .zimpli-stepper-num {
	font-size: 0;
}
#wwlc-registration-form .zimpli-stepper-item.completed .zimpli-stepper-num::before {
	font-size: 0.85rem;
}
#wwlc-registration-form .zimpli-stepper-sep {
	color: #ccc;
	font-size: 1rem;
	user-select: none;
}

/* Navigation buttons inside each step. */
#wwlc-registration-form .zimpli-step-nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin: 0.5rem 0 1.5rem;
}
#wwlc-registration-form .zimpli-step-nav .zimpli-step-back {
	margin-right: auto;
}
#wwlc-registration-form .zimpli-step-nav .button {
	cursor: pointer;
}

/* Completed steps are revisit-able (click / Enter / Space). */
#wwlc-registration-form .zimpli-stepper-item.completed {
	cursor: pointer;
}
#wwlc-registration-form .zimpli-stepper-item:focus-visible {
	outline: 2px solid #d23a2c;
	outline-offset: 2px;
	border-radius: 4px;
}

/* aria-live error summary that appears at the top of a step on bad submit. */
#wwlc-registration-form .zimpli-step-summary {
	background: #fff1f0;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: 6px;
	padding: 0.625rem 0.875rem;
	margin: 0 0 1rem;
	font-size: 0.9rem;
}

/* Inline per-field error message (1.2). The error text sits below the
   input/select; the .err background on the input itself signals which
   row needs attention. */
#wwlc-registration-form .form-row .inline-error {
	display: block;
	color: #b91c1c;
	font-size: 0.85rem;
	margin: 0.25rem 0 0;
}

/* Why-we-ask help tooltip (2.2). The button lives inline next to the
   label text; the .zimpli-help span is a sibling that JS toggles. */
#wwlc-registration-form .zimpli-help-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 0.4rem;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	color: #525252;
	background: #e4e4e7;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}
#wwlc-registration-form .zimpli-help-btn:hover,
#wwlc-registration-form .zimpli-help-btn:focus-visible {
	background: #d23a2c;
	color: #fff;
	outline: none;
}
#wwlc-registration-form .zimpli-help {
	display: block;
	margin: 0.35rem 0 0;
	padding: 0.5rem 0.75rem;
	background: #fafaf9;
	border-left: 3px solid #d23a2c;
	border-radius: 4px;
	color: #3f3f46;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4;
}
/* Restore user-agent semantics for [hidden] — our display:block above
   would otherwise override it. */
#wwlc-registration-form .zimpli-help[hidden] {
	display: none;
}

/* Live password requirements checklist (1.1). Rules stack vertically on
   all viewports — at 5-across they read like a key/legend rather than a
   checklist and the user has to scan horizontally to find which one is
   still failing. */
#wwlc-registration-form .zimpli-pwd-rules {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.85rem;
	color: #71717a;
}
#wwlc-registration-form .zimpli-pwd-rules li {
	position: relative;
	padding-left: 1.25rem;
	line-height: 1.6;
	transition: color 0.15s ease;
}
#wwlc-registration-form .zimpli-pwd-rules li::before {
	content: '•';
	position: absolute;
	left: 0.25rem;
	color: #a1a1aa;
	font-weight: 700;
}
#wwlc-registration-form .zimpli-pwd-rules li.ok {
	color: #16a34a;
}
#wwlc-registration-form .zimpli-pwd-rules li.ok::before {
	content: '✓';
	color: #16a34a;
}

@media (max-width: 599.98px) {
	/* Mobile stepper (1.6): hide the "→" separators and the text label
	   beside each numbered circle, then draw a single progress bar across
	   the bottom of the stepper card. The bar's filled width comes from
	   the --progress custom property (0..1) set by JS in showStep(). */
	#wwlc-registration-form .zimpli-stepper {
		padding: 0.625rem 0.875rem 0.875rem;
		gap: 0.5rem;
		position: relative;
		justify-content: space-between;
	}
	#wwlc-registration-form .zimpli-stepper-sep {
		display: none;
	}
	#wwlc-registration-form .zimpli-stepper-item {
		font-size: 0.8rem;
	}
	#wwlc-registration-form .zimpli-stepper-label {
		display: none;
	}
	#wwlc-registration-form .zimpli-stepper-num {
		width: 22px;
		height: 22px;
		font-size: 0.75rem;
	}
	#wwlc-registration-form .zimpli-stepper::after {
		content: '';
		position: absolute;
		left: 0.625rem;
		right: 0.625rem;
		bottom: 0.375rem;
		height: 3px;
		background: #e5e5e5;
		border-radius: 2px;
		overflow: hidden;
		background-image: linear-gradient(to right, #d23a2c, #d23a2c);
		background-repeat: no-repeat;
		background-size: calc(var(--progress, 0) * 100%) 100%;
	}
	#wwlc-registration-form .zimpli-step-nav {
		flex-direction: column-reverse;
	}
	#wwlc-registration-form .zimpli-step-nav .zimpli-step-back {
		margin-right: 0;
	}
	#wwlc-registration-form .zimpli-step-nav .button {
		width: 100%;
	}
}