/* Nestform Pro front styles: multi-step, repeaters, calculated fields */

.nest-form__step {
	display: flex;
	flex-direction: column;
	gap: var(--nest-form-gap);
	width: 100%;
}

.nest-form__step-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

.nest-form__step-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
}

.nest-form--steps .nest-form__fields {
	flex-direction: column;
	flex-wrap: nowrap;
}

.nest-form__step[hidden],
.nest-form__step.is-step-hidden {
	display: none !important;
}

.nest-form--success-replace .nest-form__progress {
	display: none !important;
}

.nest-form__progress {
	margin-bottom: 1rem;
}

.nest-form__progress-bar {
	height: 4px;
	margin-bottom: 0.5rem;
	background: color-mix(in srgb, var(--nest-form-border) 80%, transparent);
	border-radius: 999px;
	overflow: hidden;
}

.nest-form__progress-fill {
	display: block;
	height: 100%;
	background: var(--nest-form-accent);
	border-radius: 999px;
	transition: width 0.25s ease;
}

.nest-form__progress-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nest-form__progress-step {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	opacity: 0.55;
	font-size: 0.8125rem;
}

.nest-form__progress-step.is-active,
.nest-form__progress-step.is-done {
	opacity: 1;
}

.nest-form__progress-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--nest-form-border) 85%, #fff);
	font-size: 0.75rem;
	font-weight: 700;
}

.nest-form__progress-step.is-active .nest-form__progress-index,
.nest-form__progress-step.is-done .nest-form__progress-index {
	background: var(--nest-form-accent);
	color: var(--nest-form-accent-text);
}

.nest-form__progress-label {
	font-weight: 600;
}

.nest-form--steps .nest-form__actions {
	justify-content: flex-start;
}

.nest-form--steps .nest-form__next:not([hidden]),
.nest-form--steps .nest-form__submit:not([hidden]) {
	margin-left: auto;
}

/* Calculated + repeater */
.nest-form__input--calculated {
	background: var(--nest-form-surface-muted, #f3f4f6);
	cursor: default;
}

.nest-form__repeater {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

.nest-form__repeater-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: flex-start;
	padding: 1rem 1rem;
	border: 1px solid var(--nest-form-border, #e5e7eb);
	border-radius: var(--nest-form-radius, 6px);
	background: var(--nest-form-surface, #fafafa);
}

.nest-form__repeater-row-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.nest-form__repeater-subfield {
	flex: 1 1 12rem;
	min-width: 10rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.nest-form__repeater-subfield .nest-form__choices {
	width: 100%;
}

.nest-form__repeater-subfield .nest-form__choice,
.nest-form__repeater-subfield .nest-form__check {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

.nest-form__repeater-subfield .nest-form__radio,
.nest-form__repeater-subfield .nest-form__checkbox {
	flex: 0 0 auto;
	margin: 0.15rem 0 0;
}

.nest-form__repeater-add,
.nest-form__repeater-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--nest-form-control-min-h, 2.5rem);
	padding: var(--nest-form-btn-pad, 0.5rem 1rem);
	border-radius: var(--nest-form-radius, 6px);
	border: 1px solid var(--nest-form-border, #d1d5db);
	background: var(--nest-form-surface, #fff);
	color: var(--nest-form-text, #111827);
	font: inherit;
	font-weight: 600;
	line-height: var(--nest-form-line-height);
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
}

.nest-form__repeater-add {
	align-self: flex-start;
}

.nest-form__repeater-remove {
	margin-left: auto;
	flex: 0 0 auto;
}

.nest-form__repeater-add:hover,
.nest-form__repeater-remove:hover {
	border-color: var(--nest-form-accent, #2563eb);
	color: var(--nest-form-accent, #2563eb);
}

.nest-form__repeater-remove[hidden] {
	display: none !important;
}

/* Match action buttons for plugin skins */
.nest-form--skin-classic .nest-form__repeater-add,
.nest-form--skin-minimal .nest-form__repeater-add,
.nest-form--skin-soft .nest-form__repeater-add,
.nest-form--skin-card .nest-form__repeater-add,
.nest-form--skin-classic .nest-form__repeater-remove,
.nest-form--skin-minimal .nest-form__repeater-remove,
.nest-form--skin-soft .nest-form__repeater-remove,
.nest-form--skin-card .nest-form__repeater-remove {
	border-color: var(--nest-form-accent);
	color: var(--nest-form-accent);
	background: transparent;
}

.nest-form--skin-classic .nest-form__repeater-add:hover,
.nest-form--skin-minimal .nest-form__repeater-add:hover,
.nest-form--skin-soft .nest-form__repeater-add:hover,
.nest-form--skin-card .nest-form__repeater-add:hover,
.nest-form--skin-classic .nest-form__repeater-remove:hover,
.nest-form--skin-minimal .nest-form__repeater-remove:hover,
.nest-form--skin-soft .nest-form__repeater-remove:hover,
.nest-form--skin-card .nest-form__repeater-remove:hover {
	background: color-mix(in srgb, var(--nest-form-accent) 10%, transparent);
}

.nest-form--skin-classic .nest-form__repeater-subfield .checkbox,
.nest-form--skin-minimal .nest-form__repeater-subfield .checkbox,
.nest-form--skin-soft .nest-form__repeater-subfield .checkbox,
.nest-form--skin-card .nest-form__repeater-subfield .checkbox,
.nest-form--skin-classic .nest-form__repeater-subfield .radio,
.nest-form--skin-minimal .nest-form__repeater-subfield .radio,
.nest-form--skin-soft .nest-form__repeater-subfield .radio,
.nest-form--skin-card .nest-form__repeater-subfield .radio {
	accent-color: var(--nest-form-accent);
}
