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

:root {
	--pm-drf-text-muted: #6b7280;
	--pm-drf-text-label: #374151;
	/* WCAG 2.2 AA: #595959 on white = 7.0:1, on #f3f4f6 = 6.78:1.
	   Was #9ca3af = 2.53:1 on white / 2.30:1 on step bg (fail). */
	--pm-drf-text-muted-light: #595959;
	--pm-drf-required: #dc2626;
	--pm-drf-border: #d1d5db;
	--pm-drf-bg-input: #ffffff;
	--pm-drf-step-bg: #f3f4f6;
	--pm-drf-step-border: #d1d5db;
	--pm-drf-step-active-bg: #ecfdf5;
	--pm-drf-step-active-border: #2d6a4f;
	--pm-drf-step-active-text: #2d6a4f;
	--pm-drf-step-done-bg: #d1fae5;
	--pm-drf-step-done-border: #059669;
	--pm-drf-step-done-text: #059669;
	--pm-drf-focus-border: #2d6a4f;
	--pm-drf-btn-bg: #2d6a4f;
	--pm-drf-btn-hover: #1b4332;
	--pm-drf-btn-disabled: #9ca3af;
	--pm-drf-alert-success-bg: #d1fae5;
	--pm-drf-alert-success-text: #065f46;
	--pm-drf-alert-success-border: #a7f3d0;
	--pm-drf-alert-error-bg: #fee2e2;
	--pm-drf-alert-error-text: #991b1b;
	--pm-drf-alert-error-border: #fca5a5;
	--pm-drf-alert-info-bg: #dbeafe;
	--pm-drf-alert-info-text: #1e40af;
	--pm-drf-alert-info-border: #93c5fd;
	--pm-drf-info-box-bg: #f9fafb;
	--pm-drf-info-box-border: #e5e7eb;
	--pm-drf-expiry-text: #9ca3af;
	--pm-drf-resend-text: #f59e0b;
	--pm-drf-success-heading: #059669;
	--pm-drf-focus-outline: #0073aa;
}

/* 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: var(--pm-drf-text-muted);
	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: var(--pm-drf-step-bg);
	border-bottom: 3px solid var(--pm-drf-step-border);
	font-size: 0.85rem;
	color: var(--pm-drf-text-muted-light);
	transition: all 0.3s ease;
}

.demo-registration-form .progress-step.active {
	background: var(--pm-drf-step-active-bg);
	border-bottom-color: var(--pm-drf-step-active-border);
	color: var(--pm-drf-step-active-text);
	font-weight: 600;
}

.demo-registration-form .progress-step.completed {
	background: var(--pm-drf-step-done-bg);
	border-bottom-color: var(--pm-drf-step-done-border);
	color: var(--pm-drf-step-done-text);
}

/* 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: var(--pm-drf-text-label);
	font-size: 0.9rem;
}

.demo-registration-form .required {
	color: var(--pm-drf-required);
}

.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 var(--pm-drf-border);
	border-radius: 6px;
	font-size: 1rem;
	background: var(--pm-drf-bg-input);
	transition: border-color 0.2s;
	box-sizing: border-box;
}

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

.demo-registration-form small {
	display: block;
	margin-top: 0.25rem;
	color: var(--pm-drf-text-muted-light);
	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: var(--pm-drf-btn-bg);
	color: var(--pm-drf-bg-input);
	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: var(--pm-drf-btn-hover);
}

.demo-registration-form .btn:disabled {
	background: var(--pm-drf-btn-disabled);
	cursor: not-allowed;
}

.demo-registration-form .btn-secondary {
	background: transparent;
	color: var(--pm-drf-btn-bg);
	border: 1px solid var(--pm-drf-btn-bg);
}

.demo-registration-form .btn-secondary:hover,
.demo-registration-form .btn-secondary:focus {
	background: var(--pm-drf-step-active-bg);
}

.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 var(--pm-drf-border);
	border-radius: 8px;
	background: var(--pm-drf-bg-input);
}

.demo-registration-form .code-digit:focus {
	border-color: var(--pm-drf-focus-border);
	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: var(--pm-drf-alert-success-bg);
	color: var(--pm-drf-alert-success-text);
	border: 1px solid var(--pm-drf-alert-success-border);
}

.demo-registration-form .alert-error {
	background: var(--pm-drf-alert-error-bg);
	color: var(--pm-drf-alert-error-text);
	border: 1px solid var(--pm-drf-alert-error-border);
}

.demo-registration-form .alert-info {
	background: var(--pm-drf-alert-info-bg);
	color: var(--pm-drf-alert-info-text);
	border: 1px solid var(--pm-drf-alert-info-border);
}

/* Info Box */
.demo-registration-form .info-box {
	background: var(--pm-drf-info-box-bg);
	border: 1px solid var(--pm-drf-info-box-border);
	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 var(--pm-drf-info-box-border);
}

.demo-registration-form .expiry-note {
	text-align: center;
	color: var(--pm-drf-expiry-text);
	font-size: 0.85rem;
	margin-top: 1.5rem;
}

/* Resend cooldown */
.demo-registration-form .resend-cooldown {
	text-align: center;
	color: var(--pm-drf-resend-text);
	font-size: 0.85rem;
}

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

.demo-success-message h2 {
	color: var(--pm-drf-success-heading);
	margin-bottom: 1rem;
}

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

.demo-action .btn-primary {
	display: inline-block;
	padding: 0.875rem 2.5rem;
	background: var(--pm-drf-btn-bg);
	color: var(--pm-drf-bg-input);
	text-decoration: none;
	border-radius: 6px;
	font-size: 1.1rem;
	font-weight: 600;
}

.demo-action .btn-primary:hover,
.demo-action .btn-primary:focus {
	background: var(--pm-drf-btn-hover);
	color: var(--pm-drf-bg-input);
}

/* 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;
	}
}

/* Focus indicators for keyboard accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--pm-drf-focus-outline);
	outline-offset: 2px;
}

/* Accessibility: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}