/* ==========================================================================
   Loan Lead Form — Component Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Card wrapper (padding is intentionally inherited from main.css shared rule)
   -------------------------------------------------------------------------- */

.loan-lead-card__title {
	margin: 0 0 var(--space-2);
	font-size: clamp(1.45rem, 2vw, 1.8rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-primary-dark);
}

.loan-lead-card__subtitle {
	margin: 0 0 var(--space-5);
	font-size: var(--font-size-sm);
	line-height: 1.65;
	color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Step progress indicator
   -------------------------------------------------------------------------- */

.llf-stepper {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0 0 var(--space-6);
}

.llf-stepper__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	flex: 0 0 auto;
}

.llf-stepper__dot {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	border: 2px solid var(--color-border);
	background: var(--color-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-xs);
	font-weight: 800;
	color: var(--color-text-muted);
	transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.llf-stepper__step--active .llf-stepper__dot,
.llf-stepper__step--done .llf-stepper__dot {
	background: var(--color-cta);
	border-color: var(--color-cta);
	color: #ffffff;
}

.llf-stepper__label {
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.llf-stepper__step--active .llf-stepper__label,
.llf-stepper__step--done .llf-stepper__label {
	color: var(--color-cta-dark);
}

.llf-stepper__line {
	flex: 1;
	height: 2px;
	background: var(--color-border);
	margin: 0 var(--space-2);
	margin-bottom: 22px; /* align with dot center, accounting for label below */
	border-radius: 1px;
	transition: background var(--transition-base);
}

.llf-stepper__line--done {
	background: var(--color-cta);
}

/* --------------------------------------------------------------------------
   Multi-step panels
   -------------------------------------------------------------------------- */

.llf-step {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.llf-step--hidden {
	display: none;
}

/* --------------------------------------------------------------------------
   Form base
   -------------------------------------------------------------------------- */

.loan-lead-form {
	display: flex;
	flex-direction: column;

	/* Theme tokens — override these in dark-section wrappers */
	--llf-label-color: var(--color-primary);
	--llf-input-bg: #ffffff;
	--llf-input-color: var(--color-text-primary);
	--llf-hint-color: var(--color-text-secondary);
}

/* Dark-section override: any wrapper with class loan-info-page--dark,
   editorial-contact-panel, or data-theme="dark" gets white labels */
.loan-info-page--dark .loan-lead-form,
.editorial-contact-panel .loan-lead-form,
[data-theme="dark"] .loan-lead-form {
	--llf-label-color: rgba(255, 255, 255, 0.92);
	--llf-hint-color: rgba(219, 231, 255, 0.78);
}

.loan-lead-form__row--split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

@media (max-width: 768px) {
	.loan-lead-form__row--split {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}
}

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */

.loan-lead-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.loan-lead-form__field > span:first-child,
.loan-lead-form__field > legend,
.llf-pill-field > span:first-child {
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--llf-label-color);
}

.loan-lead-form__field input[type="text"],
.loan-lead-form__field input[type="email"],
.loan-lead-form__field input[type="tel"],
.loan-lead-form__field select {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 0.7rem var(--space-3);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	background: var(--llf-input-bg);
	color: var(--llf-input-color);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
	appearance: none;
	-webkit-appearance: none;
}

.loan-lead-form__field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.5rem;
}

.loan-lead-form__field input:focus,
.loan-lead-form__field select:focus {
	outline: none;
	border-color: var(--color-cta);
	box-shadow: 0 0 0 3px rgba(var(--color-cta-rgb), 0.15);
	background: #ffffff;
}

/* Valid state (after user touches the field) */
.loan-lead-form__field input.is-touched:valid,
.loan-lead-form__field select.is-touched:valid,
.loan-lead-form.is-submitted .loan-lead-form__field input:valid,
.loan-lead-form.is-submitted .loan-lead-form__field select:valid {
	border-color: rgba(16, 185, 129, 0.5);
	background: rgba(16, 185, 129, 0.03);
}

/* Invalid state */
.loan-lead-form__field input.is-touched:invalid:not(:focus),
.loan-lead-form__field select.is-touched:invalid:not(:focus),
.loan-lead-form.is-submitted .loan-lead-form__field input:invalid:not(:focus),
.loan-lead-form.is-submitted .loan-lead-form__field select:invalid:not(:focus) {
	border-color: var(--color-error);
	box-shadow: 0 0 0 1px rgba(223, 27, 65, 0.12);
	background: rgba(223, 27, 65, 0.03);
}

/* Inline error message */
.loan-lead-form__error {
	display: none;
	font-size: var(--font-size-xs);
	color: var(--color-error);
	font-weight: 600;
	margin-top: 2px;
}

.loan-lead-form__error:not(:empty) {
	display: block;
}

.loan-lead-form__hint {
	font-size: var(--font-size-xs);
	color: var(--llf-hint-color);
}

/* --------------------------------------------------------------------------
   Insurance pill selector
   -------------------------------------------------------------------------- */

/* .llf-pill-field > span:first-child is now covered by the combined label rule above */

.llf-pill-select {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	margin-top: var(--space-1);
}

.llf-pill-select__option {
	cursor: pointer;
}

/* Hide the native radio */
.llf-pill-select__option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.llf-pill-select__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.65rem var(--space-3);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #ffffff;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text-secondary);
	text-align: center;
	transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
	user-select: none;
}

.llf-pill-select__btn svg {
	flex-shrink: 0;
	opacity: 0.55;
	transition: opacity var(--transition-base);
}

.llf-pill-select__option:hover .llf-pill-select__btn {
	border-color: rgba(var(--color-cta-rgb), 0.4);
	background: rgba(var(--color-cta-rgb), 0.04);
	color: var(--color-cta-dark);
}

.llf-pill-select__option input[type="radio"]:checked ~ .llf-pill-select__btn {
	border-color: var(--color-cta);
	background: rgba(var(--color-cta-rgb), 0.08);
	color: var(--color-cta-dark);
	box-shadow: 0 0 0 3px rgba(var(--color-cta-rgb), 0.12);
	font-weight: 700;
}

.llf-pill-select__option input[type="radio"]:checked ~ .llf-pill-select__btn svg {
	opacity: 1;
}

/* Focus-visible ring for keyboard nav */
.llf-pill-select__option input[type="radio"]:focus-visible ~ .llf-pill-select__btn {
	outline: 2px solid var(--color-cta);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Step 2 action row (Back + Submit side by side)
   -------------------------------------------------------------------------- */

.llf-step2-actions {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3);
	align-items: center;
	margin-top: var(--space-2);
}

/* Ghost back button — .btn-ghost is defined in main.css; form-specific sizing overrides only */
.llf-step2-actions .btn-ghost {
	padding: 0.65rem var(--space-4);
	font-size: var(--font-size-sm);
	white-space: nowrap;
}

/* Next button (Step 1) */
.llf-next-btn {
	width: 100%;
	justify-content: center;
	margin-top: var(--space-2);
}

.llf-next-btn svg {
	flex-shrink: 0;
}

/* Submit button */
.loan-lead-form__submit {
	width: 100%;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Trust row (below submit button)
   -------------------------------------------------------------------------- */

.llf-trust-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: var(--space-3) 0 0;
	font-size: var(--font-size-xs);
	color: var(--color-text-secondary);
	line-height: 1.4;
}

.llf-trust-row svg {
	flex-shrink: 0;
	opacity: 0.6;
}

.llf-trust-sep {
	opacity: 0.4;
}

/* --------------------------------------------------------------------------
   Submit spinner animation
   -------------------------------------------------------------------------- */

.llf-spinner {
	animation: llf-spin 0.75s linear infinite;
}

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

/* --------------------------------------------------------------------------
   Form response messages
   -------------------------------------------------------------------------- */

.loan-lead-form__response {
	margin-bottom: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: 500;
	display: none;
}

.loan-lead-form__response--success {
	background: rgba(0, 212, 170, 0.1);
	color: #065F46;
	border: 1px solid var(--color-success);
	display: block;
}

.loan-lead-form__response--error {
	background: rgba(223, 27, 65, 0.08);
	color: #991B1B;
	border: 1px solid var(--color-error);
	display: block;
}

/* --------------------------------------------------------------------------
   Submit loading state
   -------------------------------------------------------------------------- */

.btn--loading {
	position: relative;
	pointer-events: none;
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Shake animation (invalid submit attempt)
   -------------------------------------------------------------------------- */

@keyframes llf-shake {
	0%, 100% { transform: translateX(0); }
	15%, 45%, 75% { transform: translateX(-5px); }
	30%, 60%, 90% { transform: translateX(5px); }
}

.llf-shake {
	animation: llf-shake 0.4s ease;
}

/* --------------------------------------------------------------------------
   Mobile responsive
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.llf-pill-select {
		grid-template-columns: 1fr;
	}

	.llf-step2-actions {
		grid-template-columns: 1fr;
	}

	.llf-back-btn {
		order: 2;
		justify-content: center;
	}

	.loan-lead-form__submit {
		order: 1;
	}
}

@media (prefers-color-scheme: dark) {
	.loan-lead-card__title {
		color: #E2E8F0;
	}

	.loan-lead-card__subtitle {
		color: #CBD5E1;
	}

	/* Variable override must live in forms.css — it loads after main.css so the
	   main.css dark-mode variable declaration loses the cascade */
	.loan-lead-form {
		--llf-label-color: #CBD5E1;
		--llf-hint-color: rgba(219, 231, 255, 0.78);
	}

	.loan-lead-form__field input,
	.loan-lead-form__field select {
		background: #172440;
		border-color: rgba(148, 163, 184, 0.25);
		color: #E2E8F0;
	}

	.loan-lead-form__field input::placeholder,
	.loan-lead-form__field select::placeholder {
		color: rgba(203, 213, 225, 0.45);
	}
}

/* --------------------------------------------------------------------------
   TOC checkbox styling
   -------------------------------------------------------------------------- */

.loan-lead-form__field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-3);
	margin: var(--space-2) 0;
	cursor: pointer;
}

.loan-lead-form__field--checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	cursor: pointer;
	border-radius: 4px;
	border: 1.5px solid var(--color-border);
	accent-color: var(--color-cta);
}

.loan-lead-form__field--checkbox span {
	font-size: var(--font-size-sm);
	font-weight: 500;
	line-height: 1.5;
	color: var(--llf-label-color);
}

.loan-lead-form__field--checkbox a {
	color: var(--color-cta);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.loan-lead-form__field--checkbox a:hover {
	color: var(--color-primary);
}