/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1000; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 10% auto; /* 10% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 600px;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-header {
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.modal-body {
	padding: 20px 0;
	text-align: center;
}

.modal-body #modal-prompt {
	margin-bottom: 20px;
	font-size: 1.1em;
}

.modal-body #modal-gif {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
	margin-bottom: 20px;
}

.modal-body #modal-input {
	width: 80%;
	padding: 10px;
	font-size: 1em;
}

.modal-footer {
	text-align: right;
}

#modal-progress-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 10px;
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
	width: 100%;
	box-sizing: border-box;
}

/* Contains a circle and the line that follows it */
.progress-step {
	display: flex;
	align-items: center;
	flex: 1 1 auto; /* Allow step to grow and shrink */
}

.progress-circle {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	flex-shrink: 0; /* Prevent circle from shrinking */
	transition: all 0.4s ease;
	z-index: 2;
	position: relative;
}

.progress-line {
	height: 4px;
	width: 100%;
	transition: background-color 0.4s ease;
	/* Pull the line back to connect cleanly with the circle */
	margin-left: -2px; 
	margin-right: -2px;
	z-index: 1;
}

.progress-ellipsis {
	color: #cccccc;
	font-weight: bold;
	padding: 0 10px;
}

/* --- State Coloring (to match your image) --- */

/* Completed Step (e.g., step 1, 2 in your image) */
.progress-step.completed .progress-circle {
	background-color: #84c551; /* Green */
	color: white;
}
.progress-step.completed .progress-line {
	background-color: #84c551; /* Green */
}

/* Active Step (e.g., step 3 in your image) */
.progress-step.active .progress-circle {
	background-color: #cccccc; /* Gray */
	color: black;
}
.progress-step.active .progress-line {
	background-color: #cccccc; /* Gray */
}

/* Pending Step (e.g., step 4 in your image) */
.progress-step.pending .progress-circle {
	background-color: #cccccc; /* Gray */
	color: black;
}
.progress-step.pending .progress-line {
	background-color: #cccccc; /* Gray */
}