/*
 * MU Lead Qualifier — form styles.
 * Defaults tuned to Flexistore brand (coral red + white + rounded).
 * Override any --mu-lqf-* custom property from your theme to re-skin per client.
 */

.mu-lqf-form {
	--mu-lqf-primary: #e94e1b;
	--mu-lqf-primary-hover: #d1441a;
	--mu-lqf-text: #0e1524;
	--mu-lqf-muted: #5b6472;
	--mu-lqf-border: #e4e7ec;
	--mu-lqf-surface: #ffffff;
	--mu-lqf-surface-alt: #f7f8fa;

	--mu-lqf-green: #2a7d2e;
	--mu-lqf-green-bg: #ecf7ed;
	--mu-lqf-yellow: #b8791a;
	--mu-lqf-yellow-bg: #fff4e0;
	--mu-lqf-red: #b32d2e;
	--mu-lqf-red-bg: #fdecea;

	--mu-lqf-radius: 16px;
	--mu-lqf-radius-input: 12px;
	--mu-lqf-radius-pill: 999px;
	--mu-lqf-shadow: 0 1px 2px rgba(14, 21, 36, 0.06);

	max-width: 720px;
	margin: 0 auto;
	color: var(--mu-lqf-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
}

.mu-lqf-form fieldset {
	background: var(--mu-lqf-surface);
	border: 1px solid var(--mu-lqf-border);
	border-radius: var(--mu-lqf-radius);
	padding: 1.5rem 1.75rem;
	margin: 0 0 1.25rem;
	box-shadow: var(--mu-lqf-shadow);
}

.mu-lqf-form legend {
	padding: 0 0.5rem;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--mu-lqf-text);
}

.mu-lqf-hint {
	font-size: 0.95rem;
	color: var(--mu-lqf-muted);
	margin: 0 0 1.25rem;
}

.mu-lqf-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.1rem;
	position: relative;
}

.mu-lqf-field:last-child {
	margin-bottom: 0;
}

.mu-lqf-row {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.1rem;
}

.mu-lqf-row .mu-lqf-field {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}

@media (max-width: 520px) {
	.mu-lqf-row {
		flex-direction: column;
		gap: 0;
		margin-bottom: 0;
	}
	.mu-lqf-row .mu-lqf-field {
		margin-bottom: 1.1rem;
	}
}

.mu-lqf-field label {
	font-weight: 600;
	margin-bottom: 0.4rem;
	color: var(--mu-lqf-text);
}

.mu-lqf-required {
	color: var(--mu-lqf-primary);
	margin-left: 2px;
}

.mu-lqf-field input,
.mu-lqf-field select {
	width: 100%;
	padding: 0.75rem 0.95rem;
	border: 1px solid var(--mu-lqf-border);
	border-radius: var(--mu-lqf-radius-input);
	font-size: 1rem;
	font-family: inherit;
	background: var(--mu-lqf-surface);
	color: var(--mu-lqf-text);
	transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}

.mu-lqf-field select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230e1524' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

/* Neutral focus ring — avoids collision with the red-means-bad-score semantics */
.mu-lqf-field input:focus,
.mu-lqf-field select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(14, 21, 36, 0.12);
}

.mu-lqf-question .mu-lqf-score-indicator {
	position: absolute;
	right: -14px;
	top: calc(50% + 0.35rem);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: transparent;
	pointer-events: none;
	transition: background-color 150ms ease;
}

.mu-lqf-green input,
.mu-lqf-green select {
	border-color: var(--mu-lqf-green);
	background-color: var(--mu-lqf-green-bg);
}
.mu-lqf-green .mu-lqf-score-indicator { background: var(--mu-lqf-green); }

.mu-lqf-yellow input,
.mu-lqf-yellow select {
	border-color: var(--mu-lqf-yellow);
	background-color: var(--mu-lqf-yellow-bg);
}
.mu-lqf-yellow .mu-lqf-score-indicator { background: var(--mu-lqf-yellow); }

.mu-lqf-red input,
.mu-lqf-red select {
	border-color: var(--mu-lqf-red);
	background-color: var(--mu-lqf-red-bg);
}
.mu-lqf-red .mu-lqf-score-indicator { background: var(--mu-lqf-red); }

.mu-lqf-missing input,
.mu-lqf-missing select {
	border-color: var(--mu-lqf-red);
	box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.15);
}

.mu-lqf-steps {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	color: var(--mu-lqf-muted);
	font-weight: 600;
}

.mu-lqf-step-dot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.85rem;
	border-radius: var(--mu-lqf-radius-pill);
	background: var(--mu-lqf-surface-alt);
	border: 1px solid var(--mu-lqf-border);
	transition: all 150ms ease;
}

.mu-lqf-step-dot span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mu-lqf-border);
	color: var(--mu-lqf-muted);
	font-size: 0.8rem;
	font-weight: 700;
}

.mu-lqf-step-dot.is-active {
	background: var(--mu-lqf-primary);
	color: #fff;
	border-color: var(--mu-lqf-primary);
}
.mu-lqf-step-dot.is-active span {
	background: #fff;
	color: var(--mu-lqf-primary);
}

.mu-lqf-step-dot.is-done {
	background: var(--mu-lqf-green-bg);
	color: var(--mu-lqf-green);
	border-color: var(--mu-lqf-green);
}
.mu-lqf-step-dot.is-done span {
	background: var(--mu-lqf-green);
	color: #fff;
}

.mu-lqf-step[hidden] { display: none; }

.mu-lqf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mu-lqf-summary {
	margin-top: 1rem;
	padding: 1rem 1.15rem;
	border-radius: var(--mu-lqf-radius-input);
	font-size: 0.95rem;
	line-height: 1.5;
	border: 1px solid var(--mu-lqf-border);
	background: var(--mu-lqf-surface-alt);
	color: var(--mu-lqf-text);
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.mu-lqf-summary.is-good {
	background: var(--mu-lqf-green-bg);
	border-color: var(--mu-lqf-green);
	color: var(--mu-lqf-green);
}

.mu-lqf-summary.is-mixed {
	background: var(--mu-lqf-yellow-bg);
	border-color: var(--mu-lqf-yellow);
	color: var(--mu-lqf-yellow);
}

.mu-lqf-summary.is-warning {
	background: var(--mu-lqf-red-bg);
	border-color: var(--mu-lqf-red);
	color: var(--mu-lqf-red);
}

.mu-lqf-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.5rem;
}

.mu-lqf-actions-split {
	justify-content: space-between;
	gap: 0.75rem;
}

.mu-lqf-next,
.mu-lqf-back {
	border: 1px solid var(--mu-lqf-border);
	background: var(--mu-lqf-surface);
	color: var(--mu-lqf-text);
	padding: 0.85rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: var(--mu-lqf-radius-pill);
	cursor: pointer;
	font-family: inherit;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.mu-lqf-next {
	background: var(--mu-lqf-primary);
	border-color: var(--mu-lqf-primary);
	color: #fff;
	box-shadow: 0 2px 6px rgba(233, 78, 27, 0.25);
}
.mu-lqf-next:hover { background: var(--mu-lqf-primary-hover); border-color: var(--mu-lqf-primary-hover); }
.mu-lqf-back:hover { background: var(--mu-lqf-surface-alt); }

.mu-lqf-submit {
	background: var(--mu-lqf-primary);
	color: #fff;
	border: 0;
	padding: 0.85rem 2rem;
	font-size: 1rem;
	font-weight: 700;
	border-radius: var(--mu-lqf-radius-pill);
	cursor: pointer;
	letter-spacing: 0.01em;
	transition: background-color 150ms ease, transform 80ms ease, opacity 150ms ease;
	box-shadow: 0 2px 6px rgba(233, 78, 27, 0.25);
}

.mu-lqf-submit:hover { background: var(--mu-lqf-primary-hover); }
.mu-lqf-submit:active { transform: translateY(1px); }
.mu-lqf-submit:disabled { opacity: 0.55; cursor: wait; box-shadow: none; }

.mu-lqf-submit.is-loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	opacity: 0.92;
	cursor: progress;
}
.mu-lqf-submit.is-loading:hover { background: var(--mu-lqf-primary); }
.mu-lqf-submit .mu-lqf-spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mu-lqf-spin 0.7s linear infinite;
	flex: 0 0 auto;
}
@keyframes mu-lqf-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.mu-lqf-submit .mu-lqf-spinner { animation-duration: 1.6s; }
}

.mu-lqf-feedback {
	margin-top: 1.25rem;
	padding: 0;
	border-radius: var(--mu-lqf-radius-input);
	font-size: 0.98rem;
}

.mu-lqf-feedback.mu-lqf-success {
	padding: 1rem 1.15rem;
	background: var(--mu-lqf-green-bg);
	color: var(--mu-lqf-green);
	border: 1px solid var(--mu-lqf-green);
}

.mu-lqf-feedback.mu-lqf-rejection {
	padding: 1rem 1.15rem;
	background: var(--mu-lqf-surface-alt);
	color: var(--mu-lqf-text);
	border: 1px solid var(--mu-lqf-border);
}

.mu-lqf-feedback.mu-lqf-error {
	padding: 1rem 1.15rem;
	background: var(--mu-lqf-red-bg);
	color: var(--mu-lqf-red);
	border: 1px solid var(--mu-lqf-red);
}

.mu-lqf-error {
	padding: 1rem 1.15rem;
	background: var(--mu-lqf-red-bg);
	color: var(--mu-lqf-red);
	border: 1px solid var(--mu-lqf-red);
	border-radius: var(--mu-lqf-radius-input);
}

@media (max-width: 520px) {
	.mu-lqf-form fieldset { padding: 1.15rem 1.1rem; }
	.mu-lqf-actions { justify-content: stretch; }
	.mu-lqf-submit { width: 100%; }
	.mu-lqf-question .mu-lqf-score-indicator { right: 0.9rem; top: auto; bottom: 1.1rem; }
}