/**
 * BoldForm Pro — Multi-page form styles.
 *
 * @package BoldFormPro
 */

/* ─ CSS Variables (overridable via inline style on .boldform-pro-steps) ─ */
.boldform-pro-steps {
	--bp-accent: var(--bf-button-bg, #2f80ed);
	--bp-btn: var(--bf-button-bg, #2f80ed);
	--bp-btn-text: var(--bf-button-text, #fff);
	--bp-btn-radius: var(--bf-button-radius, 16px);
	width: 100%;
}

.boldform-pro-steps__header {
	margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════
   PROGRESS BAR (style: bar)
   ═══════════════════════════════════════════ */

.boldform-pro-steps__progress {
	width: 100%;
	height: 7px;
	background: #e5e7eb;
	border-radius: 100px;
	overflow: hidden;
	margin-bottom: 0.6rem;
}

.boldform-pro-steps__progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--bp-accent), color-mix(in srgb, var(--bp-accent) 75%, #fff));
	border-radius: 100px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.boldform-pro-steps__counter {
	font-size: 0.85rem;
	color: #6b7280;
	font-weight: 500;
}

.boldform-pro-steps__title {
	color: #374151;
	font-weight: 600;
}

/* ═══════════════════════════════════════════
   STEP DOTS (style: steps)
   ═══════════════════════════════════════════ */

.boldform-pro-steps__dots {
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin-bottom: 0.5rem;
	overflow-x: auto;
}

.boldform-pro-steps__dot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	flex-shrink: 0;
}

.boldform-pro-steps__dot-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #6b7280;
	font-size: 0.85rem;
	font-weight: 700;
	border: 2px solid #e5e7eb;
	transition: all 0.25s;
	position: relative;
}

.boldform-pro-steps__dot-label {
	font-size: 0.72rem;
	color: #9ca3af;
	white-space: nowrap;
	text-align: center;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.25s;
}

.boldform-pro-steps__dot.is-active .boldform-pro-steps__dot-num {
	background: var(--bp-accent);
	border-color: var(--bp-accent);
	color: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 18%, transparent);
}

.boldform-pro-steps__dot.is-active .boldform-pro-steps__dot-label {
	color: var(--bp-accent);
	font-weight: 600;
}

.boldform-pro-steps__dot.is-complete .boldform-pro-steps__dot-num {
	background: var(--bp-accent);
	border-color: var(--bp-accent);
	color: var(--bp-btn-text, #fff);
	font-size: 0;
}

.boldform-pro-steps__dot.is-complete .boldform-pro-steps__dot-num::after {
	content: '';
	display: block;
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -2px);
	position: absolute;
}

.boldform-pro-steps__connector {
	flex: 1;
	height: 2px;
	background: #e5e7eb;
	min-width: 16px;
	transition: background 0.25s;
	margin-top: 16px;
}

.boldform-pro-steps__connector.is-filled {
	background: var(--bp-accent);
}

/* ═══════════════════════════════════════════
   STEP HEADINGS (style: headings)
   ═══════════════════════════════════════════ */

.boldform-pro-steps__headings {
	display: flex;
	gap: 0;
	margin-bottom: 0;
	border-bottom: 2px solid #e5e7eb;
	justify-content: space-between;
}

.boldform-pro-steps__headings::-webkit-scrollbar {
	height: 4px;
}

.boldform-pro-steps__headings::-webkit-scrollbar-track {
	background: transparent;
}

.boldform-pro-steps__headings::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 2px;
}

.boldform-pro-steps__heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	font-size: 0.88rem;
	color: #9ca3af;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all 0.25s;
	white-space: nowrap;
}

.boldform-pro-steps__heading-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #6b7280;
	font-size: 0.75rem;
	font-weight: 700;
	flex-shrink: 0;
	transition: all 0.25s;
	position: relative;
}

.boldform-pro-steps__heading.is-active {
	color: #111827;
	font-weight: 600;
	border-bottom-color: var(--bp-accent);
}

.boldform-pro-steps__heading.is-active .boldform-pro-steps__heading-num {
	background: var(--bp-accent);
	color: var(--bp-btn-text, #fff);
}

.boldform-pro-steps__heading.is-complete {
	color: #6b7280;
}

.boldform-pro-steps__heading.is-complete .boldform-pro-steps__heading-num {
	background: var(--bp-accent);
	color: var(--bp-btn-text, #fff);
	font-size: 0;
}

.boldform-pro-steps__heading.is-complete .boldform-pro-steps__heading-num::after {
	content: '';
	display: block;
	width: 8px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
	position: absolute;
}

/* ═══════════════════════════════════════════
   STYLE-SPECIFIC VISIBILITY
   Hide elements not relevant to the selected style.
   ═══════════════════════════════════════════ */

/* bar: show progress + counter, hide dots + headings */
.boldform-pro-steps--bar .boldform-pro-steps__dots,
.boldform-pro-steps--bar .boldform-pro-steps__headings { display: none !important; }

/* steps: show dots only, hide bar + counter + headings */
.boldform-pro-steps--steps .boldform-pro-steps__progress,
.boldform-pro-steps--steps .boldform-pro-steps__counter,
.boldform-pro-steps--steps .boldform-pro-steps__headings { display: none !important; }

/* headings: show headings only, hide dots + counter + progress bar */
.boldform-pro-steps--headings .boldform-pro-steps__dots,
.boldform-pro-steps--headings .boldform-pro-steps__counter,
.boldform-pro-steps--headings .boldform-pro-steps__progress { display: none !important; }

/* headings row needs its own bottom spacing since bar is gone */
.boldform-pro-steps--headings .boldform-pro-steps__headings {
	margin-bottom: 1.25rem;
}

/* ═══════════════════════════════════════════
   PAGE PANELS
   ═══════════════════════════════════════════ */

.boldform-pro-steps__page {
	display: none;
}

.boldform-pro-steps__page.is-active {
	display: grid;
	gap: 24px;
	animation: boldformStepIn 0.2s ease-out;
}

@keyframes boldformStepIn {
	from { opacity: 0.7; transform: translateX(6px); }
	to   { opacity: 1;   transform: translateX(0); }
}

/* ═══════════════════════════════════════════
   NAVIGATION BUTTONS
   ═══════════════════════════════════════════ */

.boldform-pro-steps__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.boldform-pro-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: none;
	cursor: pointer;
	font-weight: 600;
	background: var(--bp-btn);
	color: var(--bp-btn-text);
	border-radius: var(--bp-btn-radius);
	transition: opacity 0.18s ease, transform 0.18s ease;
	line-height: 1.4;
	box-shadow: none;
}

.boldform-pro-btn:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.boldform-pro-btn:active {
	transform: translateY(0);
}

.boldform-pro-btn:focus-visible {
	outline: 2px solid var(--bp-btn);
	outline-offset: 2px;
}

.boldform-pro-btn--secondary:focus-visible {
	outline-color: #6b7280;
}

.boldform-pro-btn .dashicons {
	font-size: 1em;
	width: 1em;
	height: 1em;
	line-height: 1em;
}

/* Button sizes — match the form's submit button sizing */
.boldform-pro-btn--small {
	padding: 10px 24px;
	font-size: 14px;
}

.boldform-pro-btn--medium {
	padding: 14px 32px;
	font-size: 16px;
}

.boldform-pro-btn--large {
	padding: 18px 42px;
	font-size: 18px;
}

/* Secondary (previous) button */
.boldform-pro-btn--secondary {
	background: #f3f4f6;
	color: #374151;
}

.boldform-pro-btn--secondary:hover {
	background: #e5e7eb;
}

/* ═══════════════════════════════════════════
   LAST STEP: Previous left, Submit right
   ═══════════════════════════════════════════ */

.boldform-pro-steps__nav .boldform-lite-form__actions,
.boldform-pro-steps__nav .boldform-pro-steps__submit-moved {
	margin-left: auto;
}

.boldform-pro-steps__nav .boldform-lite-form__actions {
	display: flex !important;
	padding: 0;
	margin: 0;
	margin-left: auto;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 640px) {
	.boldform-pro-steps__dot-label,
	.boldform-pro-steps__heading-text {
		display: none;
	}

	.boldform-pro-steps__heading {
		padding: 0.6rem 0.75rem;
	}

	.boldform-pro-steps__nav {
		flex-wrap: wrap;
	}

	.boldform-pro-btn--small {
		padding: 8px 18px;
		font-size: 13px;
	}

	.boldform-pro-btn--medium {
		padding: 10px 24px;
		font-size: 14px;
	}

	.boldform-pro-btn--large {
		padding: 14px 32px;
		font-size: 16px;
	}
}

/* Static step-1 preview inside page-builder editors (Gutenberg / Elementor).
   The step JS does not run there, so the form is frozen on step 1. The submit
   button (a sibling rendered after the steps wrapper) is hidden so the preview
   matches the front-end step-1 state — Next visible, Prev + Submit hidden. If
   the submit sits inside the last page it is already hidden (page not active). */
.boldform-pro-steps--preview ~ .boldform-lite-form__actions {
	display: none !important;
}