/**
 * Demo Registration Form Styles
 *
 * Styles for the /try-demo/ registration form.
 * Mirrors registration-form.css structure for consistency.
 *
 * @package Platform
 * @since v4.6.0
 */

/* Container */
.demo-registration-form {
	max-width: 600px;
	margin: 0 auto;
	padding: 1.5rem;
}

.demo-registration-form h2 {
	text-align: center;
	margin-bottom: 0.5rem;
}

.demo-intro {
	text-align: center;
	color: #6b7280;
	margin-bottom: 2rem;
}

/* Progress Indicator */
.demo-registration-form .progress-indicator {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
	padding: 0;
	list-style: none;
}

.demo-registration-form .progress-step {
	flex: 1;
	text-align: center;
	padding: 0.75rem 0.5rem;
	background: #f3f4f6;
	border-bottom: 3px solid #d1d5db;
	font-size: 0.85rem;
	color: #9ca3af;
	transition: all 0.3s ease;
}

.demo-registration-form .progress-step.active {
	background: #ecfdf5;
	border-bottom-color: #2d6a4f;
	color: #2d6a4f;
	font-weight: 600;
}

.demo-registration-form .progress-step.completed {
	background: #d1fae5;
	border-bottom-color: #059669;
	color: #059669;
}

/* Form Steps */
.demo-registration-form .form-step {
	display: none;
}

.demo-registration-form .form-step.active {
	display: block;
}

/* Form Groups */
.demo-registration-form .form-group {
	margin-bottom: 1.25rem;
}

.demo-registration-form label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
	color: #374151;
	font-size: 0.9rem;
}

.demo-registration-form .required {
	color: #dc2626;
}

.demo-registration-form input[type="text"],
.demo-registration-form input[type="email"],
.demo-registration-form input[type="tel"],
.demo-registration-form select {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 1rem;
	background: #ffffff;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.demo-registration-form input:focus,
.demo-registration-form select:focus {
	border-color: #2d6a4f;
	box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.demo-registration-form small {
	display: block;
	margin-top: 0.25rem;
	color: #9ca3af;
	font-size: 0.8rem;
}

/* Phone Input */
.demo-registration-form .phone-input-wrapper {
	display: flex;
	gap: 0.5rem;
}

.demo-registration-form .country-code-select {
	width: auto;
	min-width: 140px;
	flex-shrink: 0;
}

.demo-registration-form .phone-number-wrapper {
	flex: 1;
}

.demo-registration-form .phone-number-wrapper input {
	width: 100%;
}

/* Buttons */
.demo-registration-form .btn {
	display: inline-block;
	padding: 0.75rem 2rem;
	background: #2d6a4f;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
	text-align: center;
}

.demo-registration-form .btn:hover,
.demo-registration-form .btn:focus {
	background: #1b4332;
}

.demo-registration-form .btn:disabled {
	background: #9ca3af;
	cursor: not-allowed;
}

.demo-registration-form .btn-secondary {
	background: transparent;
	color: #2d6a4f;
	border: 1px solid #2d6a4f;
}

.demo-registration-form .btn-secondary:hover,
.demo-registration-form .btn-secondary:focus {
	background: #ecfdf5;
}

.demo-registration-form #demo-submit-registration {
	width: 100%;
	margin-top: 1rem;
}

/* Verification Code Input */
.demo-registration-form .verification-code-input {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 2rem 0;
}

.demo-registration-form .code-digit {
	width: 3rem;
	height: 3.5rem;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	border: 2px solid #d1d5db;
	border-radius: 8px;
	background: #ffffff;
}

.demo-registration-form .code-digit:focus {
	border-color: #2d6a4f;
	box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15);
}

/* Text alignment */
.demo-registration-form .text-center {
	text-align: center;
}

.demo-registration-form .margin-top-20 {
	margin-top: 1.25rem;
}

/* Alerts */
.demo-registration-form .alert {
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
}

.demo-registration-form .alert-success {
	background: #d1fae5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.demo-registration-form .alert-error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}

.demo-registration-form .alert-info {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #93c5fd;
}

/* Info Box */
.demo-registration-form .info-box {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1.25rem;
	margin: 1.5rem 0;
}

.demo-registration-form .info-box ol {
	padding-left: 1.25rem;
	margin: 0.75rem 0;
}

.demo-registration-form .info-box li {
	margin-bottom: 0.375rem;
}

.demo-registration-form .info-note {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e5e7eb;
}

.demo-registration-form .expiry-note {
	text-align: center;
	color: #9ca3af;
	font-size: 0.85rem;
	margin-top: 1.5rem;
}

/* Resend cooldown */
.demo-registration-form .resend-cooldown {
	text-align: center;
	color: #f59e0b;
	font-size: 0.85rem;
}

/* Success Message */
.demo-success-message {
	text-align: center;
	padding: 2rem 0;
}

.demo-success-message h2 {
	color: #059669;
	margin-bottom: 1rem;
}

.demo-action {
	margin-top: 1.5rem;
}

.demo-action .btn-primary {
	display: inline-block;
	padding: 0.875rem 2.5rem;
	background: #2d6a4f;
	color: #ffffff;
	text-decoration: none;
	border-radius: 6px;
	font-size: 1.1rem;
	font-weight: 600;
}

.demo-action .btn-primary:hover,
.demo-action .btn-primary:focus {
	background: #1b4332;
	color: #ffffff;
}

/* Responsive */
@media (max-width: 600px) {
	.demo-registration-form {
		padding: 1rem;
	}

	.demo-registration-form .progress-step {
		font-size: 0.75rem;
		padding: 0.5rem 0.25rem;
	}

	.demo-registration-form .phone-input-wrapper {
		flex-direction: column;
	}

	.demo-registration-form .country-code-select {
		min-width: 100%;
	}

	.demo-registration-form .code-digit {
		width: 2.5rem;
		height: 3rem;
		font-size: 1.25rem;
	}
}