/* MultiStep Navigation specific styles */
.multistep-navigation {
	/* @apply flex justify-between items-center p-6 bg-gray-50 border-t border-gray-200; {tailwind} */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem;
	background-color: #f9fafb;
	border-top: 1px solid #e5e7eb;
}

.multistep-nav-left,
.multistep-nav-right {
	/* @apply flex items-center gap-3; {tailwind} */
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Button variants */
.btn-outline-gray {
	/* @apply px-6 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-300; {tailwind} */
	padding: 0.5rem 1.5rem;
	color: #4b5563;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	transition: background-color 0.2s, color 0.2s;
}

.btn-outline-gray:hover {
	background-color: #f3f4f6;
}

.btn-outline-gray:focus {
	outline: none;
	box-shadow: 0 0 0 2px #d1d5db;
}

.btn-outline-gray svg {
	/* @apply text-gray-500; {tailwind} */
	color: #6b7280;
}

/* Responsive behavior */
@media(max-width: 768px) {
	.multistep-navigation {
		/* @apply flex-col gap-4 p-4; {tailwind} */
		flex-direction: column;
		gap: 1rem;
		padding: 1rem;
	}

	.multistep-nav-left,
	.multistep-nav-right {
		/* @apply w-full justify-center; {tailwind} */
		width: 100%;
		justify-content: center;
	}

	.multistep-nav-left {
		/* @apply order-2; {tailwind} */
		order: 2;
	}

	.multistep-nav-right {
		/* @apply order-1; {tailwind} */
		order: 1;
	}

	.btn-outline-gray,
	.btn-secondary,
	.btn-primary {
		/* @apply w-full sm:w-auto; {tailwind} */
		width: 100%;
	}
}

@media(min-width: 640px) {

	.btn-outline-gray,
	.btn-secondary,
	.btn-primary {
		width: auto;
	}
}