/*
 * PureCSS.com
 * https://purecss.com/examples/multi-step-form/
 * Radio inputs control which step panel is visible — no JavaScript, no page reload.
 */

.demo-multi-step-form .msf-radio {
		display: none;
	}

.demo-multi-step-form .msf-wrap {
		max-width: 400px;
		margin: 0 auto;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		overflow: hidden;
	}

.demo-multi-step-form .msf-progress {
		display: flex;
		background: var(--surface-2);
		border-bottom: 1px solid var(--border);
	}

.demo-multi-step-form .msf-step-label {
		flex: 1;
		padding: .6rem;
		text-align: center;
		font-size: .75rem;
		color: var(--text-muted);
		font-weight: 500;
		position: relative;
	}

.demo-multi-step-form .msf-body {
		padding: 1.5rem;
	}

.demo-multi-step-form .msf-panel {
		display: none;
		flex-direction: column;
		gap: .75rem;
	}

:is(.demo-multi-step-form .msf-panel) h3 {
			font-size: 1.1rem;
			margin-bottom: .25rem;
		}

:is(.demo-multi-step-form .msf-panel) input[type="text"],:is(.demo-multi-step-form .msf-panel) input[type="email"],:is(.demo-multi-step-form .msf-panel) input[type="tel"] {
			width: 100%;
			padding: .65rem .9rem;
			background: var(--surface-2);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			color: var(--text);
			font-family: var(--font-sans);
			font-size: .95rem;
			outline: none;
			transition: border-color .2s;
		}

:is(.demo-multi-step-form .msf-panel) input:focus {
			border-color: var(--accent);
		}

.demo-multi-step-form .msf-actions {
		display: flex;
		gap: .5rem;
		margin-top: .5rem;
	}

.demo-multi-step-form .msf-btn {
		display: inline-block;
		padding: .6rem 1.2rem;
		background: var(--accent);
		color: var(--bg);
		border-radius: var(--radius);
		font-weight: 600;
		font-size: .9rem;
		cursor: pointer;
		text-align: center;
		user-select: none;
		transition: opacity .15s;
	}

:is(.demo-multi-step-form .msf-btn):hover {
			opacity: .85;
		}

.demo-multi-step-form .msf-btn-back {
		background: var(--surface-2);
		color: var(--text);
		border: 1px solid var(--border);
	}

.demo-multi-step-form .msf-success {
		text-align: center;
		padding: 1rem 0;
		color: var(--teal);
		font-size: 1rem;
	}

/* Show the active panel */
#msf-step1:checked ~ .msf-wrap .msf-panel-1 { display: flex; }
#msf-step2:checked ~ .msf-wrap .msf-panel-2 { display: flex; }
#msf-step3:checked ~ .msf-wrap .msf-panel-3 { display: flex; }

/* Active step indicator */
#msf-step1:checked ~ .msf-wrap .msf-step-label:nth-child(1),
#msf-step2:checked ~ .msf-wrap .msf-step-label:nth-child(2),
#msf-step3:checked ~ .msf-wrap .msf-step-label:nth-child(3) {
	color: var(--accent);
	border-bottom: 2px solid var(--accent);
	margin-bottom: -1px;
}