/**
 * Formed Creative - User Registration (front end)
 */

.fmd-ur {
	--fmd-ur-accent: #2271b1;
	--fmd-ur-accent-text: #ffffff;
	--fmd-ur-border: #dcdcde;
	--fmd-ur-surface: #f6f7f7;
	--fmd-ur-radius: 8px;
	--fmd-ur-gap: 2.5rem;
}

/* ------------------------------------------------------------ Login view */

/*
 * "New customer?" column: heading above a box matching the WooCommerce
 * login form box (form.login), stretched to the same height with its
 * contents vertically centred.
 */
.fmd-ur {
	--fmd-ur-login-box-border: #cfc8d8;
	--fmd-ur-login-box-radius: 5px;
	--fmd-ur-login-box-padding: 20px;
	--fmd-ur-login-box-margin: 2em;
}

/*
 * Both columns use the same flex layout so heading/box margins behave
 * identically (flex items don't collapse margins) and the box tops line up.
 * The gap below each heading comes from the box's top margin only.
 */
.fmd-ur .fmd-ur-login,
.fmd-ur .fmd-ur-register-cta {
	display: flex;
	flex-direction: column;
}

.fmd-ur .fmd-ur-login > h2,
.fmd-ur .fmd-ur-register-cta > h2 {
	margin-bottom: 0;
}

.fmd-ur .fmd-ur-login > form.login {
	margin-top: var(--fmd-ur-login-box-margin);
}

.fmd-ur .fmd-ur-register-cta__box {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	margin: var(--fmd-ur-login-box-margin) 0;
	padding: var(--fmd-ur-login-box-padding);
	border: 1px solid var(--fmd-ur-login-box-border);
	border-radius: var(--fmd-ur-login-box-radius);
	background: #ffffff;
	text-align: center;
}

.fmd-ur .fmd-ur-register-cta__inner {
	width: 100%;
}

.fmd-ur .fmd-ur-register-cta__text p:last-child {
	margin-bottom: 1em;
}

.fmd-ur .fmd-ur-register-cta__action {
	margin: 0;
}

.fmd-ur-register-cta__button {
	display: inline-block;
}

/* ------------------------------------------------------------ Register view */

.fmd-ur-register__header {
	margin-bottom: 2rem;
	text-align: center;
}

.fmd-ur-register__intro p:last-child {
	margin-bottom: 0;
}

/* Toggle switch */
.fmd-ur-toggle {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 1.25rem;
	padding: 4px;
	border: 1px solid var(--fmd-ur-border);
	border-radius: 999px;
	background: var(--fmd-ur-surface);
	isolation: isolate;
}

.fmd-ur-toggle__slider {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border-radius: 999px;
	background: var(--fmd-ur-accent);
	transition: transform 0.25s ease;
	z-index: -1;
}

.fmd-ur-toggle[data-active="retail"] .fmd-ur-toggle__slider {
	transform: translateX(100%);
}

.fmd-ur-toggle__option {
	display: block;
	min-width: 10rem;
	padding: 0.65rem 1.5rem;
	border-radius: 999px;
	color: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: color 0.25s ease;
}

.fmd-ur-toggle__option:hover,
.fmd-ur-toggle__option:focus {
	color: inherit;
	text-decoration: none;
}

.fmd-ur-toggle__option.is-active,
.fmd-ur-toggle__option.is-active:hover,
.fmd-ur-toggle__option.is-active:focus {
	color: var(--fmd-ur-accent-text);
}

.fmd-ur-toggle__option:focus-visible {
	outline: 2px solid var(--fmd-ur-accent);
	outline-offset: 3px;
}

/* Panels: form left, benefits right */
.fmd-ur-panel {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: var(--fmd-ur-gap);
	align-items: start;
}

.fmd-ur-panel[hidden] {
	display: none !important;
}

.fmd-ur-panel__heading {
	margin-top: 0;
}

.fmd-ur-panel__form .woocommerce-form-register {
	margin: 0;
	padding: 0;
	border: 0;
}

.fmd-ur-benefits {
	padding: 1.75rem;
	border-top: 4px solid var(--fmd-ur-accent);
	border-radius: var(--fmd-ur-radius);
	background: var(--fmd-ur-surface);
}

.fmd-ur .fmd-ur-benefits__heading {
	margin-top: 0;
	text-align: center;
}

/* Benefits content (lists, paragraphs etc.) left aligned; heading stays centred */
.fmd-ur .fmd-ur-benefits__content,
.fmd-ur .fmd-ur-benefits__content p,
.fmd-ur .fmd-ur-benefits__content ul,
.fmd-ur .fmd-ur-benefits__content ol,
.fmd-ur .fmd-ur-benefits__content li,
.fmd-ur .fmd-ur-benefits__content h4,
.fmd-ur .fmd-ur-benefits__content h5,
.fmd-ur .fmd-ur-benefits__content h6,
.fmd-ur .fmd-ur-benefits__content blockquote {
	text-align: left;
}

.fmd-ur-benefits__content ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fmd-ur-benefits__content li {
	position: relative;
	margin-bottom: 0.75rem;
	padding-left: 1.75rem;
}

.fmd-ur-benefits__content li::before {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 0;
	width: 0.9em;
	height: 0.5em;
	border-bottom: 3px solid var(--fmd-ur-accent);
	border-left: 3px solid var(--fmd-ur-accent);
	transform: rotate(-45deg);
}

/* Trade Gravity Form: left aligned text, labels above inputs (this form only) */
.fmd-ur .fmd-ur-trade-form,
.fmd-ur .fmd-ur-trade-form .gform_wrapper,
.fmd-ur .fmd-ur-trade-form .gform_wrapper label,
.fmd-ur .fmd-ur-trade-form .gform_wrapper legend,
.fmd-ur .fmd-ur-trade-form .gform_wrapper .gfield_label,
.fmd-ur .fmd-ur-trade-form .gform_wrapper .gform-field-label,
.fmd-ur .fmd-ur-trade-form .gform_wrapper .gfield_description,
.fmd-ur .fmd-ur-trade-form .gform_wrapper .gform_required_legend,
.fmd-ur .fmd-ur-trade-form .gform_wrapper .validation_message,
.fmd-ur .fmd-ur-trade-form .gform_wrapper .gfield_validation_message,
.fmd-ur .fmd-ur-trade-form .gform_wrapper .gform_validation_errors,
.fmd-ur .fmd-ur-trade-form .gform_wrapper .gform_footer,
.fmd-ur .fmd-ur-trade-form .gform_wrapper .gform_page_footer,
.fmd-ur .fmd-ur-trade-form .gform_confirmation_message {
	text-align: left;
}

.fmd-ur-notice {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--fmd-ur-accent);
	background: var(--fmd-ur-surface);
}

.fmd-ur-register__login-link {
	margin-top: 2rem;
	text-align: center;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 768px) {
	.fmd-ur-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.fmd-ur-toggle {
		display: grid;
		width: 100%;
	}

	.fmd-ur-toggle__option {
		min-width: 0;
		padding: 0.65rem 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fmd-ur-toggle__slider,
	.fmd-ur-toggle__option {
		transition: none;
	}
}