/**
 * Anonkit Quorum - Frontend Styles
 *
 * Minimal, theme-friendly form styling.
 * Uses CSS custom properties for easy theming.
 */

/* Custom properties for theming */
.stc-registration-form-wrapper {
	--stc-primary-color: #0073aa;
	--stc-primary-hover: #005177;
	--stc-error-color: #dc3232;
	--stc-success-color: #46b450;
	--stc-border-color: #ddd;
	--stc-text-color: #333;
	--stc-bg-color: #fff;
	--stc-spacing: 1rem;
	--stc-border-radius: 4px;
}

/* Form wrapper */
.stc-registration-form-wrapper {
	width: 100%;
}

/* Form layout */
.stc-registration-form {
	display: flex;
	flex-direction: column;
	gap: var(--stc-spacing);
}

/* Form rows */
.stc-form-row {
	display: flex;
	gap: var(--stc-spacing);
}

.stc-form-row-half > .stc-form-field {
	flex: 1;
}

.stc-form-row-thirds > .stc-form-field {
	flex: 1;
}

@media (max-width: 600px) {
	.stc-form-row {
		flex-direction: column;
	}
}

/* Form fields */
.stc-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.stc-form-field label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--stc-text-color);
}

.stc-required {
	color: var(--stc-error-color);
}

.stc-form-field input,
.stc-form-field select {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--stc-border-color);
	border-radius: var(--stc-border-radius);
	font-size: 1rem;
	line-height: 1.4;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stc-form-field input:focus,
.stc-form-field select:focus {
	outline: none;
	border-color: var(--stc-primary-color);
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

.stc-form-field input.stc-field-error,
.stc-form-field select.stc-field-error {
	border-color: var(--stc-error-color);
}

/* Submit button */
.stc-form-submit {
	margin-top: var(--stc-spacing);
}

.stc-submit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background-color: var(--stc-primary-color);
	color: #fff;
	border: none;
	border-radius: var(--stc-border-radius);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.stc-submit-button:hover {
	background-color: var(--stc-primary-hover);
}

.stc-submit-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.stc-submit-button .stc-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid transparent;
	border-top-color: #fff;
	border-radius: 50%;
	animation: stc-spin 0.8s linear infinite;
}

@keyframes stc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Messages */
.stc-form-messages {
	display: none;
}

.stc-form-messages.stc-has-message {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: var(--stc-border-radius);
	margin-bottom: var(--stc-spacing);
}

.stc-form-messages.stc-error {
	background-color: #fbeaea;
	border: 1px solid var(--stc-error-color);
	color: var(--stc-error-color);
}

.stc-form-messages.stc-success {
	background-color: #ecf7ed;
	border: 1px solid var(--stc-success-color);
	color: #1e4620;
}

.stc-form-messages ul {
	margin: 0.5rem 0 0 1.25rem;
	padding: 0;
}

.stc-form-messages li {
	margin: 0.25rem 0;
}

/* Form error state */
.stc-form-error {
	padding: 1rem;
	background-color: #fbeaea;
	border: 1px solid var(--stc-error-color);
	border-radius: var(--stc-border-radius);
	color: var(--stc-error-color);
	text-align: center;
}

/* Success message */
.stc-success-message {
	text-align: center;
	padding: 2rem;
	background-color: #ecf7ed;
	border: 1px solid var(--stc-success-color);
	border-radius: var(--stc-border-radius);
}

.stc-success-icon {
	width: 60px;
	height: 60px;
	background-color: var(--stc-success-color);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
}

.stc-success-title {
	margin: 0 0 0.5rem;
	color: #1e4620;
}

.stc-success-details {
	margin-bottom: 1rem;
	color: var(--stc-text-color);
}

.stc-success-note {
	font-size: 0.9rem;
	color: #666;
	margin: 1rem 0;
}

.stc-register-another {
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	background-color: transparent;
	color: var(--stc-primary-color);
	border: 1px solid var(--stc-primary-color);
	border-radius: var(--stc-border-radius);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.stc-register-another:hover {
	background-color: var(--stc-primary-color);
	color: #fff;
}

/* Committee member message (shown when committee member tries to register) */
.stc-committee-message {
	text-align: center;
	padding: 2rem;
	background-color: #fff8e6;
	border: 1px solid #f0c36d;
	border-radius: var(--stc-border-radius);
	animation: stc-fade-in 0.3s ease-out;
}

.stc-committee-icon {
	width: 60px;
	height: 60px;
	background-color: #f0c36d;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
}

.stc-committee-title {
	margin: 0 0 1rem;
	color: #856404;
	font-size: 1.5rem;
}

.stc-committee-details {
	margin-bottom: 1rem;
	color: var(--stc-text-color);
	line-height: 1.6;
}

.stc-committee-details p {
	margin: 0.5rem 0;
}

.stc-committee-note {
	font-size: 0.9rem;
	color: #666;
	margin: 1rem 0;
	font-style: italic;
}

.stc-back-to-start {
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	background-color: transparent;
	color: var(--stc-primary-color);
	border: 1px solid var(--stc-primary-color);
	border-radius: var(--stc-border-radius);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.stc-back-to-start:hover {
	background-color: var(--stc-primary-color);
	color: #fff;
}

/* ========================================
   Loading State
   ======================================== */

.stc-loading-state {
	text-align: center;
	padding: 3rem 2rem;
	animation: stc-fade-in 0.3s ease-out;
}

.stc-loading-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
	color: var(--stc-primary-color);
}

.stc-loading-state p {
	color: #666;
	font-size: 1rem;
	margin: 0;
}

/* Hourglass flip animation for loading */
.stc-hourglass-spin {
	animation: stc-hourglass-flip 1.5s ease-in-out infinite;
}

/* ========================================
   Stepped Registration Form Styles
   ======================================== */

/* Step containers */
.stc-step {
	animation: stc-fade-in 0.3s ease-out;
}

@keyframes stc-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Step headers */
.stc-step-header {
	margin-bottom: var(--stc-spacing);
}

.stc-step-header h3 {
	margin: 0 0 0.5rem;
	color: var(--stc-text-color);
	font-size: 1.5rem;
}

.stc-step-description {
	color: #666;
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

/* Step 1: Email lookup */
.stc-step-1 .stc-form-field {
	max-width: 400px;
}

.stc-step-1 .stc-form-field input {
	font-size: 1.1rem;
	padding: 0.875rem 1rem;
}

/* Loading spinner in button */
.stc-loading-spinner {
	display: inline-flex;
	align-items: center;
	margin-left: 0.5rem;
	animation: stc-hourglass-flip 1.5s ease-in-out infinite;
}

@keyframes stc-hourglass-flip {
	0%, 100% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
}

/* Back button */
.stc-back-button {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.75rem;
	background: none;
	border: none;
	color: var(--stc-primary-color);
	font-size: 0.9rem;
	cursor: pointer;
	transition: color 0.2s ease;
	margin-bottom: 0.5rem;
}

.stc-back-button:hover {
	color: var(--stc-primary-hover);
	text-decoration: underline;
}

/* Welcome messages in step 2 header */
.stc-step-welcome {
	margin-top: 0.5rem;
}

.stc-step-welcome p {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var(--stc-border-radius);
}

.stc-welcome-back {
	background-color: #ecf7ed;
	border: 1px solid var(--stc-success-color);
	color: #1e4620;
}

.stc-new-registration {
	background-color: #f0f6fc;
	border: 1px solid #0073aa;
	color: #004a6e;
}

/* Readonly fields */
.stc-readonly-field {
	background-color: #f5f5f5;
	color: #666;
	cursor: not-allowed;
}

.stc-field-note {
	font-size: 0.8rem;
	color: #888;
	margin-top: 0.25rem;
}

/* Conditional fields - animated reveal */
.stc-conditional-field {
	animation: stc-slide-down 0.3s ease-out;
}

@keyframes stc-slide-down {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Hint text below conditional fields */
.stc-field-hint {
	font-size: 0.8rem;
	color: #6b7280;
	margin: 0.25rem 0 0;
}

/* ========================================
   Multi-Position Section
   ======================================== */

.stc-positions-section {
	margin-bottom: var(--stc-spacing);
}

.stc-positions-label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--stc-text-color);
	margin-bottom: 0.25rem;
}

#stc-positions-container {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.stc-position-row {
	padding: 0.75rem;
	background: #f9f9f9;
	border: 1px solid var(--stc-border-color);
	border-radius: var(--stc-border-radius);
	animation: stc-slide-down 0.3s ease-out;
}

.stc-position-row-main {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.stc-position-select-wrapper {
	flex: 1;
}

.stc-position-select {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--stc-border-color);
	border-radius: var(--stc-border-radius);
	font-size: 1rem;
	line-height: 1.4;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stc-position-select:focus {
	outline: none;
	border-color: var(--stc-primary-color);
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

.stc-remove-position {
	background: var(--stc-error-color);
	color: white;
	border: none;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 0.2s ease;
}

.stc-remove-position:hover {
	background: #c82333;
}

.stc-position-other-wrapper {
	margin-top: 0.5rem;
	animation: stc-slide-down 0.3s ease-out;
}

.stc-position-other-input {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--stc-border-color);
	border-radius: var(--stc-border-radius);
	font-size: 1rem;
	box-sizing: border-box;
}

.stc-position-dates {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
	animation: stc-slide-down 0.3s ease-out;
}

.stc-date-field {
	flex: 1;
}

.stc-date-field label {
	display: block;
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 0.25rem;
}

.stc-date-field input[type="date"] {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--stc-border-color);
	border-radius: var(--stc-border-radius);
	font-size: 0.9rem;
	box-sizing: border-box;
}

@media (max-width: 480px) {
	.stc-position-dates {
		flex-direction: column;
	}
}

/* Add Position Button */
.stc-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 1rem;
	background-color: transparent;
	color: var(--stc-primary-color);
	border: 1px solid var(--stc-primary-color);
	border-radius: var(--stc-border-radius);
	font-size: 0.9rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.stc-btn-secondary:hover {
	background-color: var(--stc-primary-color);
	color: #fff;
}

/* ========================================
   Position Report Form - Minimal Styles
   Uses shared registration form styles
   ======================================== */

/* Position report wrapper uses registration form wrapper styling */
.stc-position-report-wrapper {
	/* Inherits from .stc-registration-form-wrapper */
}

/* Form description text */
.stc-form-description {
	margin-bottom: var(--stc-spacing, 1rem);
	color: #666;
	font-size: 0.95rem;
	line-height: 1.5;
}

.stc-form-description p {
	margin: 0;
}

/* Readonly fields (reporter info) */
.stc-readonly {
	background-color: #f5f5f5 !important;
	color: #666 !important;
	cursor: not-allowed;
}

/* Login required message */
.stc-login-required {
	text-align: center;
	padding: 2rem;
}

.stc-login-required p {
	margin: 0 0 1rem;
}

/* Conflict notice in success */
.stc-conflict-notice {
	background-color: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: var(--stc-border-radius, 4px);
	padding: 0.75rem 1rem;
	color: #856404;
	font-size: 0.9rem;
	margin-top: 0.5rem;
}

/* New member notice in success */
.stc-new-member-notice {
	background-color: #d4edda;
	border: 1px solid #28a745;
	border-radius: var(--stc-border-radius, 4px);
	padding: 0.75rem 1rem;
	color: #155724;
	font-size: 0.9rem;
	margin-top: 0.5rem;
}