/*
 * Impact — sign in / create account / reset password.
 *
 * Renders inside BeTheme's #Wrapper > #Content, so a number of the theme's
 * element-level rules (input width/margin, button padding+gap, a:hover colour,
 * a global h3 font-size override) tie or beat these class selectors. The
 * !important flags below are load-bearing for exactly those properties — see
 * IMPACT_dashboard_change_log.md, "theme cascade".
 */

.impact-auth {
	--ia-red: #c00000;
	--ia-red-2: #d20000;
	--ia-orange: #c84a1c;
	--ia-warm: #ffb020;
	--ia-teal: #2b6475;
	--ia-deep: #173642;
	--ia-green: #2aa000;
	--ia-slate: #3d4752;
	--ia-muted: #6b7480;
	--ia-label: #8a8f97;
	--ia-line: #e4ded4;
	--ia-hair: #ede9e2;
	--ia-sand: #f4f1eb;
	--ia-grad-product: linear-gradient(135deg, #c00000, #d20000 35%, #c84a1c 70%, #ffb020);

	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	align-items: stretch;
	margin: 0 auto 48px;
	max-width: 1240px;
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 30px rgba(11, 26, 33, .12);
	color: var(--ia-slate);
	font-family: 'IBM Plex Sans', sans-serif;
	text-align: left;
}

.impact-auth--single {
	display: block;
	max-width: 560px;
}

/* ---------------------------------------------------------------- resets */

.impact-auth *,
.impact-auth *::before,
.impact-auth *::after {
	box-sizing: border-box;
}

.impact-auth p {
	margin: 0;
}

.impact-auth ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.impact-auth li::before {
	content: none;
}

/* BeTheme styles `.woocommerce form.login / .register / .lost_reset_password`
   directly (display:flex, align-items:center, centred paragraphs, full-width
   .button). That selector outranks our class, so undo it explicitly. */
.impact-auth form.login,
.impact-auth form.register,
.impact-auth form.lost_reset_password {
	display: none !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 16px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}

.impact-auth form.is-open {
	display: flex !important;
}

.impact-auth form p {
	width: auto !important;
	float: none !important;
	text-align: left !important;
}

/* `.woocommerce form.login .button{width:100%}` — only the primary action
   should stretch. */
.impact-auth .impact-auth__btn {
	width: auto !important;
}

.impact-auth form > .impact-auth__btn--red,
.impact-auth .impact-auth__stepbody > .impact-auth__btn--red {
	width: 100% !important;
}

.impact-auth input[type="text"],
.impact-auth input[type="email"],
.impact-auth input[type="tel"],
.impact-auth input[type="password"] {
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ia-slate) !important;
	font: 400 15px/1.4 'IBM Plex Sans', sans-serif !important;
	height: auto !important;
}

.impact-auth input::placeholder {
	color: #a9a49b;
	opacity: 1;
}

.impact-auth input[type="checkbox"],
.impact-auth input[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.impact-auth__i {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
	overflow: visible;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ side panel */

.impact-auth__side {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 56px 60px;
	background: var(--ia-grad-product);
	color: #fff;
}

.impact-auth__eyebrow {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.impact-auth__eyebrow--deep {
	background: var(--ia-deep);
}

.impact-auth__side-title {
	max-width: 420px;
	margin: 0 !important;
	color: #fff !important;
	font-size: 34px !important;
	font-weight: 700 !important;
	line-height: 1.16 !important;
	letter-spacing: -.015em;
}

.impact-auth__lead {
	max-width: 430px;
	color: rgba(255, 255, 255, .84);
	font-size: 15.5px;
	line-height: 1.6;
}

.impact-auth__benefits {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.impact-auth__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: rgba(255, 255, 255, .9);
	font-size: 14.5px;
	line-height: 1.5;
}

.impact-auth__benefits li i {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .14);
}

.impact-auth__benefits li i svg {
	width: 13px !important;
	height: 13px !important;
}

.impact-auth__benefits li b {
	color: #fff;
	font-weight: 600;
}

.impact-auth__chips {
	display: none;
	flex-wrap: wrap;
	gap: 8px;
}

.impact-auth__chips span {
	padding: 6px 11px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 12px;
}

/* ------------------------------------------------------------- form pane */

.impact-auth__pane {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 52px 56px;
	background: #fff;
}

.impact-auth__top {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.impact-auth__title {
	margin: 0 !important;
	color: var(--ia-slate) !important;
	font-size: 28px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -.01em;
}

.impact-auth__rule {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--ia-red);
}

.impact-auth__sub {
	max-width: 430px;
	color: var(--ia-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

.impact-auth--single .impact-auth__top {
	align-items: flex-start;
}

/* tabs */

.impact-auth__tabs {
	display: flex;
	gap: 6px;
	padding: 4px;
	border-radius: 7px;
	background: var(--ia-sand);
}

.impact-auth__tabs button {
	flex: 1;
	display: block !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 5px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ia-muted) !important;
	font: 500 14.5px/1.3 'IBM Plex Sans', sans-serif !important;
	text-align: center;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.impact-auth__tabs button.is-on {
	background: #fff !important;
	color: var(--ia-slate) !important;
	box-shadow: 0 1px 3px rgba(11, 26, 33, .12) !important;
}

/* form + fields */

.impact-auth__form {
	display: none;
	flex-direction: column;
	gap: 16px;
}

.impact-auth__form.is-open {
	display: flex;
}

.impact-auth__field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.impact-auth__field > label,
.impact-auth__label {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--ia-label) !important;
	font: 500 12px/1.3 'IBM Plex Sans', sans-serif !important;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.impact-auth__input {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--ia-line);
	border-radius: 6px;
	background: #fff;
}

.impact-auth__input:focus-within {
	border-color: var(--ia-teal);
	box-shadow: 0 0 0 3px rgba(43, 100, 117, .12);
}

.impact-auth__input > svg {
	width: 16px !important;
	height: 16px !important;
	color: #a9a49b;
}

/* WooCommerce's own JS-injected password toggle — we ship our own, styled to
   match, so hide the native one rather than fight its absolute positioning. */
.impact-auth .show-password-input {
	display: none !important;
}

.impact-auth__eye {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #a9a49b !important;
	cursor: pointer;
}

.impact-auth__eye svg {
	width: 16px !important;
	height: 16px !important;
}

.impact-auth__hint,
.impact-auth__note {
	color: var(--ia-label);
	font-size: 12.5px;
	line-height: 1.5;
}

.impact-auth__note {
	padding: 14px 16px;
	border-radius: 7px;
	background: var(--ia-sand);
	color: #5d6570;
	font-size: 13.5px;
}

.impact-auth__two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.impact-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* checkbox */

/* WooCommerce ships `form .form-row label{display:block}` and BeTheme has its
   own label rules — both outrank a bare class selector here. */
.impact-auth__check {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 0 !important;
	color: #5d6570 !important;
	font: 400 13.5px/1.5 'IBM Plex Sans', sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}

.impact-auth__box {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 1px solid #d5cec3;
	border-radius: 4px;
	background: #fff;
	color: #fff;
}

.impact-auth__box svg {
	width: 11px !important;
	height: 11px !important;
	opacity: 0;
}

.impact-auth__check input:checked + .impact-auth__box {
	border-color: var(--ia-red);
	background: var(--ia-red);
}

.impact-auth__check input:checked + .impact-auth__box svg {
	opacity: 1;
}

.impact-auth__check input:focus-visible + .impact-auth__box {
	box-shadow: 0 0 0 3px rgba(43, 100, 117, .25);
}

/* radio cards */

.impact-auth__radios {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.impact-auth__radio {
	display: flex !important;
	flex-direction: column;
	gap: 5px;
	margin: 0 !important;
	padding: 14px 16px;
	border: 1px solid var(--ia-line);
	border-radius: 7px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.impact-auth__radio b {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--ia-slate);
	font-size: 14.5px;
	font-weight: 600;
}

.impact-auth__radio b em {
	display: block;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1.5px solid #d5cec3;
	border-radius: 50%;
}

.impact-auth__radio span {
	padding-left: 24px;
	color: var(--ia-muted);
	font-size: 12.5px;
	line-height: 1.45;
}

.impact-auth__radio.is-on {
	border-color: var(--ia-red);
	box-shadow: 0 0 0 2px rgba(192, 0, 0, .1);
}

.impact-auth__radio.is-on b em {
	border-color: var(--ia-red);
	background: radial-gradient(circle, #c00000 0 44%, #fff 46%);
}

/* steps */

.impact-auth__steps {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ia-label);
	font-size: 12.5px;
}

.impact-auth__step {
	display: flex;
	align-items: center;
	gap: 8px;
}

.impact-auth__step b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ia-hair);
	color: var(--ia-label);
	font: 600 11.5px/1 'IBM Plex Mono', monospace;
}

.impact-auth__step.is-on {
	color: var(--ia-slate);
	font-weight: 500;
}

.impact-auth__step.is-on b {
	background: var(--ia-red);
	color: #fff;
}

.impact-auth__step-line {
	width: 26px;
	height: 1px;
	background: var(--ia-line);
}

.impact-auth__stepbody {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.impact-auth__form[data-step="1"] [data-impact-stepbody="2"],
.impact-auth__form[data-step="2"] [data-impact-stepbody="1"] {
	display: none;
}

.impact-auth__hooked {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Fields injected by the site's existing woocommerce_register_form hook
   (Company name, Company registration number / UTR) — match them to the
   fields above without needing to touch that code. */
.impact-auth__hooked > .form-row,
.impact-auth__hooked > p.form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 !important;
	padding: 0 !important;
}

/* Prose paragraphs (privacy notice) must stay block — as flex items every
   inline run would break onto its own line. */
.impact-auth__hooked .woocommerce-privacy-policy-text p {
	display: block;
	margin: 0 !important;
}

.impact-auth__hooked label {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--ia-label) !important;
	font: 500 12px/1.3 'IBM Plex Sans', sans-serif !important;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.impact-auth__hooked input[type="text"],
.impact-auth__hooked input[type="email"],
.impact-auth__hooked input[type="tel"] {
	padding: 12px 14px !important;
	border: 1px solid var(--ia-line) !important;
	border-radius: 6px !important;
	background: #fff !important;
}

.impact-auth__hooked input:focus {
	border-color: var(--ia-teal) !important;
	box-shadow: 0 0 0 3px rgba(43, 100, 117, .12) !important;
}

.impact-auth__hooked .woocommerce-privacy-policy-text {
	color: var(--ia-label);
	font-size: 12.5px;
	line-height: 1.5;
}

/* password strength */

.impact-auth__pwbar {
	display: flex;
	gap: 5px;
	margin-top: 2px;
}

.impact-auth__pwbar i {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: var(--ia-hair);
}

.impact-auth__pwbar i.is-on {
	background: var(--ia-green);
}

/* buttons */

.impact-auth__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px !important;
	width: auto;
	margin: 0 !important;
	padding: 14px 22px !important;
	border: 0 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	font: 500 15px/1.2 'IBM Plex Sans', sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	transition: background .15s, color .15s, box-shadow .15s;
}

.impact-auth__btn--red,
.impact-auth__btn--red:link,
.impact-auth__btn--red:visited {
	background: var(--ia-red) !important;
	color: #fff !important;
}

.impact-auth__btn--red:hover,
.impact-auth__btn--red:focus {
	background: var(--ia-red-2) !important;
	color: #fff !important;
}

.impact-auth__btn--line,
.impact-auth__btn--line:link,
.impact-auth__btn--line:visited {
	padding: 11px 18px !important;
	background: #fff !important;
	box-shadow: inset 0 0 0 1px var(--ia-line) !important;
	color: var(--ia-slate) !important;
	font-size: 14px !important;
}

.impact-auth__btn--line:hover,
.impact-auth__btn--line:focus {
	background: #f7f5f1 !important;
	color: var(--ia-slate) !important;
}

.impact-auth__submitrow {
	display: flex;
	gap: 10px;
}

.impact-auth__submitrow .impact-auth__btn--red {
	flex: 1 1 auto;
	width: auto !important;
}

/* separator + alt box */

.impact-auth__sep {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #a9a49b;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.impact-auth__sep::before,
.impact-auth__sep::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ia-hair);
}

.impact-auth__altbox {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--ia-hair);
	border-radius: 7px;
	background: #f7f5f1;
}

.impact-auth__altbox > div {
	flex: 1;
}

.impact-auth__altbox b {
	display: block;
	color: var(--ia-slate);
	font-size: 14.5px;
	font-weight: 600;
}

.impact-auth__altbox span {
	color: var(--ia-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* links + fine print */

.impact-auth a,
.impact-auth a:link,
.impact-auth a:visited {
	color: var(--ia-teal) !important;
	font-weight: 500;
	text-decoration: none !important;
}

.impact-auth a:hover,
.impact-auth a:focus {
	color: var(--ia-red) !important;
}

.impact-auth__link {
	font-size: 13.5px;
}

.impact-auth__linkbtn {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--ia-teal) !important;
	font: 500 12px/1.4 'IBM Plex Sans', sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}

.impact-auth__linkbtn:hover {
	color: var(--ia-red) !important;
}

.impact-auth__secline {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ia-label);
	font-size: 12px;
	line-height: 1.5;
}

.impact-auth__secline svg {
	width: 14px !important;
	height: 14px !important;
	color: var(--ia-green);
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.impact-auth__side {
		padding: 40px 36px;
	}

	.impact-auth__pane {
		padding: 40px 36px;
	}

	.impact-auth__side-title {
		font-size: 28px !important;
	}
}

@media (max-width: 900px) {
	.impact-auth {
		grid-template-columns: 1fr;
		margin-bottom: 36px;
	}

	.impact-auth__side {
		gap: 16px;
		padding: 28px 20px;
	}

	.impact-auth__side-title {
		font-size: 23px !important;
	}

	.impact-auth__lead {
		font-size: 14px;
	}

	.impact-auth__benefits {
		display: none;
	}

	.impact-auth__chips {
		display: flex;
	}

	.impact-auth__pane {
		gap: 18px;
		padding: 28px 20px 34px;
	}

	.impact-auth__title {
		font-size: 22px !important;
	}

	.impact-auth__two,
	.impact-auth__radios {
		grid-template-columns: 1fr;
	}

	.impact-auth__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.impact-auth__altbox {
		flex-direction: column;
		align-items: flex-start;
	}

	.impact-auth__altbox .impact-auth__btn {
		width: 100% !important;
	}

	.impact-auth__tabs button {
		padding: 10px 8px !important;
		font-size: 13.5px !important;
	}
}