/**
 * Forumax Setup Wizard Styles
 *
 * Redesigned to follow the Jobus onboarding wizard aesthetic:
 * clean top bar, numbered steps, large card, left-aligned content.
 *
 * @package Forumax
 * @since   2.2.0
 */

// ─── Font Import ──────────────────────────────────────────────────────────────
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

// Variables
$setup-primary:       #6831c1;
$setup-primary-dark:  #541fa3;
$setup-primary-light: #8652e0;
$setup-primary-bg:    rgba(104, 49, 193, 0.08);
$setup-secondary:     #f1bd6c;
$setup-success:       #10b981;
$setup-info:          #3b82f6;
$setup-bg:            #ffffff;
$setup-page-bg:       #f8fafc;
$setup-border:        #e2e8f0;
$setup-border-light:  #f1f5f9;
$setup-text:          #0f172a;
$setup-text-secondary:#334155;
$setup-text-muted:    #64748b;
$setup-card-shadow:   0 20px 40px -4px rgba(0, 0, 0, 0.08), 0 8px 16px -4px rgba(0, 0, 0, 0.04);


// ─── WordPress Admin UI Overrides ─────────────────────────────────────────────
body.forumax-setup-page {
	&.admin-bar {
		padding-top: 0 !important;
	}

	#wpadminbar {
		display: none !important;
	}

	#adminmenu,
	#adminmenuback,
	#adminmenuwrap,
	#adminmenushadow {
		display: none !important;
	}

	.update-nag,
	.notice,
	.error,
	.success,
	.warning,
	#wpfooter,
	.wp-header-end {
		display: none !important;
	}

	#wpwrap {
		background: $setup-page-bg;
	}

	#wpcontent,
	#wpbody {
		margin-left: 0 !important;
		padding: 0 !important;
		float: none;
	}

	html,
	#wpwrap,
	#wpcontent {
		height: 100%;
		min-height: 100vh;
		overflow-y: auto;
	}
}

// ─── Page Layout ──────────────────────────────────────────────────────────────
.forumax-setup-wrap {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

	display: flex;
	flex-direction: column;
	align-items: center;

	* {
		box-sizing: border-box;
	}
}

// ─── Top Bar ──────────────────────────────────────────────────────────────────
.forumax-setup-topbar {
	width: 100%;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(226, 232, 240, 0.8);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
	height: 64px;
	flex-shrink: 0;


	.forumax-setup-logo {
		img {
			height: 32px;
			width: auto;
			display: block;
		}
	}

	.forumax-btn-skip-top {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: $setup-text-muted;
		font-size: 14px;
		font-weight: 500;
		text-decoration: none;
		padding: 6px 0;
		transition: color 0.2s ease;

		.dashicons {
			font-size: 14px;
			width: 14px;
			height: 14px;
		}

		&:hover {
			color: $setup-text;
		}
	}
}

// ─── Step Indicator Bar ───────────────────────────────────────────────────────
.forumax-setup-steps-bar {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 28px 40px 0;
}

.forumax-progress-steps {
	display: flex;
	align-items: center;
	gap: 0;
}

.forumax-progress-step {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	cursor: pointer;
	user-select: none;

	&:hover:not(.active) {
		.forumax-step-circle {
			border-color: rgba($setup-primary, 0.4);
			color: $setup-primary;
		}

		.forumax-step-label {
			color: $setup-text-secondary;
		}
	}

	// Connecting line between steps
	&:not(:last-child)::after {
		content: '';
		display: block;
		width: 72px;
		height: 2px;
		background: $setup-border;
		margin: 0 8px;
		transition: background 0.3s ease;
		flex-shrink: 0;
	}

	&.completed:not(:last-child)::after {
		background: $setup-success;
	}

	.forumax-step-circle {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: #fff;
		border: 2px solid $setup-border;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		font-weight: 700;
		color: $setup-text-muted;
		transition: all 0.3s ease;
		flex-shrink: 0;
		position: relative;

		// Number shown by default
		.frmx-step-number {
			line-height: 1;
		}

		// Check icon hidden by default
		.frmx-step-check {
			display: none;
			font-size: 16px;
			width: 16px;
			height: 16px;
			color: #fff;
		}
	}

	.forumax-step-label {
		font-size: 14px;
		font-weight: 500;
		color: $setup-text-muted;
		white-space: nowrap;
		transition: color 0.3s ease;

		@media (max-width: 768px) {
			display: none;
		}
	}

	// Active step
	&.active {
		.forumax-step-circle {
			background: $setup-primary;
			border-color: $setup-primary;
			color: #fff;
		}

		.forumax-step-label {
			color: $setup-primary;
			font-weight: 600;
		}
	}

	// Completed step
	&.completed {
		.forumax-step-circle {
			background: $setup-success;
			border-color: $setup-success;

			.frmx-step-number {
				display: none;
			}

			.frmx-step-check {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.forumax-step-label {
			color: $setup-success;
		}
	}
}

// ─── Wizard Card ──────────────────────────────────────────────────────────────
.forumax-setup-card {
	width: 100%;
	max-width: 660px;
	background: $setup-bg;
	border-radius: 20px;
	box-shadow: $setup-card-shadow;
	border: 1px solid rgba(255, 255, 255, 0.6);
	margin: 28px 40px 40px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}


.forumax-setup-card-body {
	padding: 40px 48px 32px;
	flex: 1;

	@media (max-width: 640px) {
		padding: 28px 24px 24px;
	}
}

// ─── Step Content ─────────────────────────────────────────────────────────────
.forumax-setup-step {
	display: none;
}

// Step heading
.forumax-setup-step-title {
	font-size: 24px;
	font-weight: 700;
	color: $setup-text;
	margin: 0 0 8px;
	line-height: 1.3;
}

.forumax-setup-step-desc {
	font-size: 15px;
	color: $setup-text-muted;
	margin: 0 0 32px;
	line-height: 1.6;
}

// ─── Welcome Step  ────────────────────────────────────────────────────────────
.forumax-welcome-emoji {
	font-size: 36px;
	line-height: 1;
	margin-bottom: 16px;
	display: block;
}

.forumax-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 28px;

	@media (max-width: 560px) {
		grid-template-columns: 1fr;
	}
}

.forumax-feature-item {
	text-align: center;
	padding: 20px 16px;
	background: $setup-border-light;
	border-radius: 12px;
	border: 1px solid $setup-border;
	transition: all 0.25s ease;

	.forumax-feature-icon {
		width: 48px;
		height: 48px;
		margin: 0 auto 14px;
		background: $setup-primary-bg;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;

		.dashicons {
			font-size: 22px;
			width: 22px;
			height: 22px;
			color: $setup-primary;
		}
	}

	h3 {
		margin: 0 0 6px;
		font-size: 14px;
		font-weight: 600;
		color: $setup-text-secondary;
	}

	p {
		margin: 0;
		font-size: 13px;
		color: $setup-text-muted;
		line-height: 1.5;
	}

	&:hover {
		border-color: rgba($setup-primary, 0.3);
		background: rgba($setup-primary, 0.03);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}
}

.forumax-info-box {
	display: flex;
	gap: 12px;
	padding: 14px 18px;
	background: rgba($setup-info, 0.06);
	border: 1px solid rgba($setup-info, 0.18);
	border-radius: 10px;
	color: darken($setup-info, 10%);
	font-size: 14px;
	line-height: 1.6;
	margin-top: 20px;

	.dashicons {
		flex-shrink: 0;
		font-size: 18px;
		width: 18px;
		height: 18px;
		margin-top: 2px;
	}
}

// ─── Color Picker Field ───────────────────────────────────────────────────────
.forumax-color-field {
	.forumax-color-input-wrap {
		display: flex;
		align-items: center;
		gap: 12px;

		input[type='color'] {
			-webkit-appearance: none;
			appearance: none;
			border: 2px solid $setup-border;
			border-radius: 10px;
			width: 48px;
			height: 48px;
			padding: 3px;
			cursor: pointer;
			transition: border-color 0.2s ease, box-shadow 0.2s ease;
			background: none;

			&::-webkit-color-swatch-wrapper {
				padding: 0;
			}

			&::-webkit-color-swatch {
				border: none;
				border-radius: 7px;
			}

			&::-moz-color-swatch {
				border: none;
				border-radius: 7px;
			}

			&:hover,
			&:focus {
				border-color: $setup-primary;
				box-shadow: 0 0 0 3px rgba($setup-primary, 0.1);
				outline: none;
			}
		}
	}

	.forumax-color-hex-input {
		width: 120px;
		padding: 11px 14px;
		border: 1.5px solid $setup-border;
		border-radius: 8px;
		font-size: 14px;
		font-family: 'SF Mono', 'Fira Code', monospace, inherit;
		color: $setup-text;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		background: #fff;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;

		&:focus {
			outline: none;
			border-color: $setup-primary;
			box-shadow: 0 0 0 3px rgba($setup-primary, 0.1);
		}
	}
}

// ─── Section Heading (inside steps) ──────────────────────────────────────────
.forumax-section-heading {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 600;
	color: $setup-text;
}

.forumax-section-subheading {
	font-size: 13px;
	color: $setup-text-muted;
	margin: 0 0 20px;
	line-height: 1.5;
}

.forumax-section + .forumax-section {
	margin-top: 32px;
}

// ─── Toggle Row (Jobus-style) ─────────────────────────────────────────────────
.forumax-toggle-rows {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.forumax-toggle-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: $setup-border-light;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.2s ease;
	margin-bottom: 0 !important;

	input[type='checkbox'] {
		display: none;
	}

	.frmx-row-icon {
		width: 36px;
		height: 36px;
		border-radius: 8px;
		background: #fff;
		border: 1px solid $setup-border;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		.dashicons {
			font-size: 18px;
			width: 18px;
			height: 18px;
			color: $setup-text-muted;
		}
	}

	.frmx-row-body {
		flex: 1;
		min-width: 0;

		.frmx-row-title {
			display: block;
			font-size: 14px;
			font-weight: 600;
			color: $setup-text-secondary;
			margin-bottom: 2px;
		}

		.frmx-row-desc {
			display: block;
			font-size: 13px;
			color: $setup-text-muted;
			line-height: 1.4;
		}
	}

	// Toggle switch on the right
	.frmx-toggle-switch {
		position: relative;
		width: 42px;
		height: 24px;
		background: #d1d5db;
		border-radius: 12px;
		transition: background 0.2s ease;
		flex-shrink: 0;

		&::after {
			content: '';
			position: absolute;
			top: 3px;
			left: 3px;
			width: 18px;
			height: 18px;
			background: #fff;
			border-radius: 50%;
			transition: transform 0.2s ease;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
		}
	}

	input[type='checkbox']:checked ~ .frmx-toggle-switch {
		background: $setup-primary;

		&::after {
			transform: translateX(18px);
		}
	}

	&:hover {
		background: rgba($setup-primary, 0.04);
	}
}

// ─── Form Fields ──────────────────────────────────────────────────────────────
.forumax-form-group {
	margin-bottom: 20px;

	label:not(.forumax-toggle-row) {
		display: block;
		font-size: 14px;
		font-weight: 600;
		color: $setup-text-secondary;
		margin-bottom: 8px;
	}

	input[type='text'],
	input[type='number'],
	textarea,
	select {
		width: 100%;
		padding: 11px 14px;
		border: 1.5px solid $setup-border;
		border-radius: 8px;
		font-size: 14px;
		color: $setup-text;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
		font-family: inherit;
		background: #fff;

		&:focus {
			outline: none;
			border-color: $setup-primary;
			box-shadow: 0 0 0 3px rgba($setup-primary, 0.1);
		}

		&::placeholder {
			color: #9ca3af;
		}
	}

	textarea {
		resize: vertical;
		min-height: 84px;
	}

	.forumax-field-description {
		margin: 6px 0 0;
		font-size: 13px;
		color: $setup-text-muted;
		line-height: 1.4;
	}
}

// ─── Compact Inline Field Row (label + small input side by side) ───────────
.forumax-form-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 4px;

	& > label {
		flex: 0 0 auto;
		font-size: 14px;
		font-weight: 600;
		color: $setup-text-secondary;
		white-space: nowrap;
		margin-bottom: 0;
	}

	.forumax-inline-field {
		display: flex;
		align-items: center;
		gap: 12px;

		input[type='number'] {
			width: 80px;
			padding: 9px 12px;
			border: 1.5px solid $setup-border;
			border-radius: 8px;
			font-size: 14px;
			color: $setup-text;
			font-family: inherit;
			background: #fff;
			text-align: center;
			transition: border-color 0.2s ease, box-shadow 0.2s ease;

			&:focus {
				outline: none;
				border-color: $setup-primary;
				box-shadow: 0 0 0 3px rgba($setup-primary, 0.1);
			}
		}

		.forumax-field-description {
			margin: 0;
			font-size: 13px;
			color: $setup-text-muted;
		}
	}
}


.forumax-option-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;

	@media (max-width: 560px) {
		grid-template-columns: 1fr;
	}
}

.forumax-option-card {
	cursor: pointer;

	input[type='radio'] {
		display: none;
	}

	.forumax-option-content {
		padding: 18px 14px;
		background: $setup-border-light;
		border: 1.5px solid $setup-border;
		border-radius: 12px;
		text-align: center;
		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

		.dashicons {
			font-size: 28px;
			width: 28px;
			height: 28px;
			color: $setup-text-muted;
			margin-bottom: 10px;
			transition: transform 0.25s ease;
		}

		h4 {
			margin: 0 0 4px;
			font-size: 14px;
			font-weight: 600;
			color: $setup-text-secondary;
		}

		p {
			margin: 0;
			font-size: 12px;
			color: $setup-text-muted;
			line-height: 1.4;
		}
	}

	input[type='radio']:checked ~ .forumax-option-content {
		background: $setup-primary-bg;
		border-color: $setup-primary;

		.dashicons {
			color: $setup-primary;
		}

		h4 {
			color: $setup-primary;
		}
	}

	&:hover .forumax-option-content {
		border-color: rgba($setup-primary, 0.4);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
		
		.dashicons {
			transform: scale(1.1);
		}
	}
}

// ─── Layout Options (Appearance step) ────────────────────────────────────────
.forumax-layout-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 28px;

	@media (max-width: 560px) {
		grid-template-columns: 1fr;
	}
}

.forumax-layout-option {
	cursor: pointer;

	input[type='radio'] {
		display: none;
	}

	.forumax-layout-preview {
		border-radius: 8px;
		overflow: hidden;
		border: 1.5px solid $setup-border;
		transition: all 0.2s ease;
		background: #fff;

		.forumax-layout-preview-img {
			height: 64px;
			background: $setup-border-light;
			border-bottom: 1px solid $setup-border;
			display: flex;
			align-items: center;
			justify-content: center;

			.dashicons {
				font-size: 28px;
				width: 28px;
				height: 28px;
				color: #9ca3af;
			}
		}

		.forumax-layout-info {
			padding: 10px;
			text-align: center;

			.forumax-layout-title {
				display: block;
				font-size: 13px;
				font-weight: 600;
				color: $setup-text-secondary;
			}

			.forumax-layout-desc {
				display: block;
				font-size: 11px;
				color: $setup-text-muted;
				margin-top: 2px;
				line-height: 1.3;
			}
		}
	}

	input[type='radio']:checked ~ .forumax-layout-preview {
		border-color: $setup-primary;
		box-shadow: 0 0 0 2px rgba($setup-primary, 0.15);

		.forumax-layout-preview-img {
			background: $setup-primary-bg;

			.dashicons {
				color: $setup-primary;
			}
		}

		.forumax-layout-title {
			color: $setup-primary;
		}
	}

	&:hover .forumax-layout-preview {
		border-color: rgba($setup-primary, 0.4);
	}
}

// ─── Advanced Config Info Box ─────────────────────────────────────────────────
.forumax-advanced-box {
	display: flex;
	gap: 12px;
	padding: 16px 18px;
	background: rgba($setup-success, 0.06);
	border: 1px solid rgba($setup-success, 0.2);
	border-radius: 10px;
	margin-top: 8px;

	.frmx-adv-icon {
		font-size: 18px;
		flex-shrink: 0;
		line-height: 1.5;
	}

	.frmx-adv-body {
		.frmx-adv-title {
			display: block;
			font-size: 14px;
			font-weight: 600;
			color: darken($setup-success, 10%);
			margin-bottom: 4px;
		}

		.frmx-adv-desc {
			display: block;
			font-size: 13px;
			color: $setup-text-muted;
			line-height: 1.5;
			margin-bottom: 8px;
		}

		.frmx-adv-link {
			font-size: 13px;
			font-weight: 600;
			color: darken($setup-success, 5%);
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

// ─── Complete Step ────────────────────────────────────────────────────────────
.forumax-success-circle {
	width: 88px;
	height: 88px;
	margin: 0 auto 24px;
	background: $setup-primary;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: frmx-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

	.dashicons {
		font-size: 48px;
		width: 48px;
		height: 48px;
		color: #fff;
	}
}

@keyframes frmx-success-pop {
	0%   { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

.forumax-complete-title {
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 8px;
	color: $setup-text;
}

.forumax-complete-desc {
	font-size: 15px;
	text-align: center;
	color: $setup-text-muted;
	margin: 0 0 32px;
	line-height: 1.6;
}

.forumax-next-steps {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
}

.forumax-next-step-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: $setup-border-light;
	border: 1.5px solid $setup-border;
	border-radius: 12px;
	text-decoration: none;
	transition: all 0.2s ease;

	.forumax-next-step-icon {
		width: 40px;
		height: 40px;
		background: $setup-primary-bg;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		.dashicons {
			font-size: 20px;
			width: 20px;
			height: 20px;
			color: $setup-primary;
		}
	}

	.forumax-next-step-content {
		flex: 1;

		h3 {
			margin: 0 0 2px;
			font-size: 14px;
			font-weight: 600;
			color: $setup-text-secondary;
		}

		p {
			margin: 0;
			font-size: 13px;
			color: $setup-text-muted;
		}
	}

	> .dashicons {
		flex-shrink: 0;
		font-size: 16px;
		width: 16px;
		height: 16px;
		color: #9ca3af;
		transition: transform 0.2s ease, color 0.2s ease;
	}

	&:hover {
		border-color: rgba($setup-primary, 0.35);
		background: rgba($setup-primary, 0.04);

		> .dashicons {
			transform: translateX(3px);
			color: $setup-primary;
		}
	}
}

// ─── Upgrade Banner ───────────────────────────────────────────────────────────
.forumax-upgrade-banner {
	margin: 28px 48px;
	padding: 22px 28px;
	background: linear-gradient(135deg, $setup-primary 0%, $setup-primary-light 100%);
	border-radius: 12px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	@media (max-width: 560px) {
		flex-direction: column;
		text-align: center;
		margin-left: 24px;
		margin-right: 24px;
	}

	.forumax-upgrade-content {
		display: flex;
		align-items: center;
		gap: 14px;
		flex: 1;

		.dashicons {
			font-size: 36px;
			width: 36px;
			height: 36px;
			color: $setup-secondary;
			flex-shrink: 0;
		}

		h3 {
			margin: 0 0 3px;
			font-size: 16px;
			font-weight: 700;
			color: #fff;
		}

		p {
			margin: 0;
			font-size: 13px;
			opacity: 0.9;
		}
	}

	.forumax-btn-upgrade {
		background: $setup-secondary;
		color: #1e1e2f;
		padding: 10px 20px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		transition: all 0.2s ease;
		white-space: nowrap;
		border: none;

		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		}
	}
}

// ─── Card Footer / Navigation ─────────────────────────────────────────────────
.forumax-setup-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 48px 28px;
	border-top: 1px solid $setup-border-light;

	@media (max-width: 560px) {
		padding: 16px 24px 24px;
		flex-direction: column-reverse;
		gap: 10px;
	}
}

// ─── Buttons ──────────────────────────────────────────────────────────────────
.forumax-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	border: none;
	font-family: inherit;
	line-height: 1.4;

	.dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}

	&.forumax-btn-primary {
		background: $setup-primary;
		color: #fff;
		box-shadow: 0 2px 4px rgba($setup-primary, 0.2);

		&:hover {
			background: $setup-primary-dark;
			transform: translateY(-2px);
			box-shadow: 0 6px 16px rgba($setup-primary, 0.35);
			color: #fff;
		}
	}

	&.forumax-btn-secondary {
		background: #fff;
		color: $setup-text-secondary;
		border: 1.5px solid $setup-border;

		&:hover {
			border-color: #9ca3af;
			color: $setup-text;
		}
	}

	&.forumax-btn-welcome {
		margin-top: 28px;
	}
}

// Navigation button initial state (JS toggles)
.forumax-btn-prev,
.forumax-btn-finish {
	display: none;
}

// ─── Field Validation ─────────────────────────────────────────────────────────
.forumax-field-error {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.forumax-error-msg {
	color: #ef4444;
	font-size: 13px;
	margin: 4px 0 0;
	animation: frmx-error-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes frmx-error-shake {
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
	40%, 60% { transform: translate3d(4px, 0, 0); }
}

// ─── Setup UI Transitions ─────────────────────────────────────────────────────
.forumax-step-animating {
	animation: frmx-step-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes frmx-step-enter {
	0% {
		opacity: 0;
		transform: translateY(12px) scale(0.99);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

