/* Prevent the compatibility and conditional controls from flashing before the step interface is ready. */
form:has(#form_id_2221) > ._um_row_1,
form:has(#form_id_2221) .um-field-18plus {
	display: none !important;
}

.zak-registration-flow .zak-registration-shell {
	--zak-primary: #245ca6;
	--zak-border: #d9e1ea;
	--zak-soft: #f3f7fb;
	margin-bottom: 1.5rem;
}

.zak-registration-flow .zak-registration-callout {
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	border-left: 5px solid var(--zak-primary);
	border-radius: 6px;
	background: #fff7d6;
	color: #2a2a2a;
	font-size: 1rem;
	line-height: 1.55;
}

.zak-registration-flow .zak-registration-progress {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.45rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.zak-registration-flow .zak-registration-progress li {
	display: grid;
	min-height: 2.5rem;
	place-items: center;
	border: 2px solid var(--zak-border);
	border-radius: 999px;
	background: #fff;
	color: #536174;
	font-weight: 700;
}

.zak-registration-flow .zak-registration-progress li.is-current {
	border-color: var(--zak-primary);
	background: var(--zak-primary);
	color: #fff;
}

.zak-registration-flow .zak-registration-progress li.is-complete {
	border-color: #2e7d32;
	background: #e9f6ea;
	color: #205d24;
}

.zak-registration-flow .zak-age-status {
	margin: 0.4rem 0 0;
	padding: 0;
	color: #536174;
	font-size: 0.95rem;
	font-weight: 600;
}

.zak-registration-flow .zak-age-status:empty {
	display: none;
}

.zak-registration-flow .zak-registration-step {
	padding: 1.25rem;
	border: 1px solid var(--zak-border);
	border-radius: 10px;
	background: #fff;
}

.zak-registration-flow .zak-registration-step[hidden],
.zak-registration-flow .zak-condition-hidden {
	display: none !important;
}

.zak-registration-flow .um-field-single_parent_custody:not([hidden]) {
	display: block !important;
}

.zak-registration-flow .zak-registration-step h2 {
	margin: 0 0 0.35rem;
	font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.zak-registration-flow .zak-step-description {
	margin: 0 0 1.25rem;
	color: #536174;
}

.zak-registration-flow .zak-step-navigation {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
}

.zak-registration-flow .zak-step-navigation button {
	min-width: 8rem;
	padding: 0.8rem 1.1rem;
	border: 2px solid var(--zak-primary);
	border-radius: 6px;
	cursor: pointer;
	font-weight: 700;
}

.zak-registration-flow .zak-step-previous {
	background: #fff;
	color: var(--zak-primary);
}

.zak-registration-flow .zak-step-next {
	margin-left: auto;
	background: var(--zak-primary);
	color: #fff;
}

.zak-registration-flow .zak-invalid {
	padding: 0.75rem;
	border: 2px solid #b3261e;
	border-radius: 6px;
	background: #fff7f6;
}

.zak-registration-flow .zak-client-error {
	margin-top: 0.45rem;
	color: #b3261e;
	font-weight: 700;
}

.zak-registration-flow .zak-privacy-link {
	margin-top: 0.5rem;
	font-size: 0.95rem;
}

.zak-registration-flow .zak-group-age-exception {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0.75rem 0 0;
	color: #334155;
	font-weight: 600;
	cursor: pointer;
}

.zak-registration-flow .zak-group-age-exception input {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.1rem 0 0;
	accent-color: #245ca6;
}

.zak-registration-flow .um-field {
	margin-bottom: 1rem;
}

.zak-registration-flow .zak-birth-date-control {
	position: relative;
	width: 100%;
}

.zak-registration-flow .zak-birth-date-display {
	width: 100%;
	max-width: none;
	padding-right: 3rem;
}

.zak-registration-flow .zak-birth-date-calendar {
	position: absolute;
	right: 0.35rem;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #334155;
	cursor: pointer;
}

.zak-registration-flow .zak-birth-date-calendar:hover,
.zak-registration-flow .zak-birth-date-calendar:focus-visible {
	background: #edf2ee;
	color: #074d02;
}

/* Keep Ultimate Member / Select2 dropdown arrows vertically centred in taller fields. */
.zak-registration-flow .select2-container .select2-selection--single .select2-selection__arrow,
.zak-registration-flow .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50% !important;
	transform: translateY(-50%);
}

@media (max-width: 640px) {
	.zak-registration-flow .zak-registration-progress {
		gap: 0.25rem;
	}

	.zak-registration-flow .zak-registration-progress li {
		min-height: 2rem;
		font-size: 0.8rem;
	}

	.zak-registration-flow .zak-registration-step {
		padding: 1rem;
	}

	.zak-registration-flow .zak-step-navigation {
		flex-direction: column-reverse;
	}

	.zak-registration-flow .zak-step-navigation button {
		width: 100%;
	}
}