/**
 * WP LeadFlow — frontend form styles.
 */

.leadflow-form-wrapper {
	--lf-primary: #4f46e5;
	--lf-bg: #ffffff;
	--lf-text: #1f2937;
	--lf-label: #374151;
	--lf-button: #4f46e5;
	--lf-button-text: #ffffff;
	--lf-radius: 8px;
	--lf-gap: 18px;
	--lf-font-size: 15px;
	--lf-label-weight: 600;
	--lf-border: #d1d5db;
	--lf-error: #dc2626;
	--lf-width: 640px;

	max-width: var(--lf-width);
	background: var(--lf-bg);
	color: var(--lf-text);
	font-size: var(--lf-font-size);
	line-height: 1.55;
	box-sizing: border-box;
}

.leadflow-form-wrapper *,
.leadflow-form-wrapper *::before,
.leadflow-form-wrapper *::after { box-sizing: inherit; }

.leadflow-form-title { margin: 0 0 14px; }

.leadflow-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lf-gap);
}

.leadflow-field { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.leadflow-field.leadflow-w-50 { flex: 1 1 calc(50% - (var(--lf-gap) / 2)); min-width: 180px; }
.leadflow-field.leadflow-w-33 { flex: 1 1 calc(33.333% - (var(--lf-gap) * 2 / 3)); min-width: 150px; }
.leadflow-conditional-hidden { display: none; }

.leadflow-label {
	font-weight: var(--lf-label-weight);
	color: var(--lf-label);
	font-size: calc(var(--lf-font-size) - 1px);
}

.leadflow-required { color: var(--lf-error); margin-left: 2px; }

.leadflow-form input[type="text"],
.leadflow-form input[type="email"],
.leadflow-form input[type="tel"],
.leadflow-form input[type="url"],
.leadflow-form input[type="number"],
.leadflow-form input[type="password"],
.leadflow-form input[type="date"],
.leadflow-form input[type="time"],
.leadflow-form input[type="datetime-local"],
.leadflow-form input[type="file"],
.leadflow-form select,
.leadflow-form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius);
	background: #fff;
	color: var(--lf-text);
	font-size: var(--lf-font-size);
	font-family: inherit;
	line-height: 1.4;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.leadflow-form textarea { resize: vertical; min-height: 90px; }

.leadflow-form input:focus,
.leadflow-form select:focus,
.leadflow-form textarea:focus {
	outline: 0;
	border-color: var(--lf-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lf-primary) 18%, transparent);
}

.leadflow-field.has-error input,
.leadflow-field.has-error select,
.leadflow-field.has-error textarea { border-color: var(--lf-error); }

.leadflow-error { color: var(--lf-error); font-size: calc(var(--lf-font-size) - 3px); display: none; }
.leadflow-field.has-error .leadflow-error { display: block; }

.leadflow-description { color: #6b7280; font-size: calc(var(--lf-font-size) - 3px); }

.leadflow-choices { display: flex; flex-direction: column; gap: 8px; }
.leadflow-choice { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: calc(var(--lf-font-size) - 1px); }
.leadflow-choice input { margin-top: 3px; flex: 0 0 auto; }

.leadflow-subfields { display: flex; flex-wrap: wrap; gap: 10px; }
.leadflow-subfield { flex: 1 1 calc(50% - 5px); min-width: 140px; display: flex; flex-direction: column; gap: 3px; }
.leadflow-subfield.leadflow-w-100 { flex: 1 1 100%; }
.leadflow-subfield small { color: #6b7280; font-size: calc(var(--lf-font-size) - 4px); }

.leadflow-heading { margin: 4px 0 0; font-size: calc(var(--lf-font-size) + 5px); font-weight: 700; }
.leadflow-paragraph { margin: 0; color: #4b5563; }
.leadflow-divider { border: 0; border-top: 1px solid var(--lf-border); margin: 4px 0; }

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

/* Buttons */
.leadflow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid var(--lf-button);
	border-radius: var(--lf-radius);
	background: var(--lf-button);
	color: var(--lf-button-text);
	font-size: var(--lf-font-size);
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: filter .12s ease, transform .06s ease;
}
.leadflow-btn:hover { filter: brightness(.93); color: var(--lf-button-text); }
.leadflow-btn:active { transform: translateY(1px); }
.leadflow-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--lf-primary) 40%, transparent); outline-offset: 2px; }
.leadflow-btn[disabled] { opacity: .6; cursor: not-allowed; }

.leadflow-btn-secondary { background: transparent; color: var(--lf-text); border-color: var(--lf-border); }
.leadflow-btn-secondary:hover { background: #f3f4f6; color: var(--lf-text); }

.leadflow-step-nav { display: flex; gap: 10px; margin-top: var(--lf-gap); flex-wrap: wrap; }

/* Spinner */
.leadflow-spinner { display: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: leadflow-spin .7s linear infinite; }
.leadflow-form.is-submitting .leadflow-submit .leadflow-spinner { display: inline-block; }
.leadflow-form.is-submitting .leadflow-submit { opacity: .75; pointer-events: none; }
@keyframes leadflow-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .leadflow-spinner { animation-duration: 2s; } }

/* Steps */
.leadflow-step { display: none; }
.leadflow-step.is-active { display: block; }
.leadflow-step-title { margin: 0 0 var(--lf-gap); font-size: calc(var(--lf-font-size) + 3px); font-weight: 700; }

.leadflow-progress { margin-bottom: calc(var(--lf-gap) * 1.2); }
.leadflow-progress-track { height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.leadflow-progress-fill { display: block; height: 100%; background: var(--lf-primary); transition: width .25s ease; }
.leadflow-progress-steps { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.leadflow-progress-step { font-size: calc(var(--lf-font-size) - 4px); color: #9ca3af; font-weight: 600; }
.leadflow-progress-step.is-active { color: var(--lf-primary); }
.leadflow-progress-step.is-done { color: #16a34a; }

/* Messages */
.leadflow-form-message { margin-top: var(--lf-gap); font-size: calc(var(--lf-font-size) - 1px); }
.leadflow-form-message:empty { margin-top: 0; }
.leadflow-form-message.is-success { padding: 14px 16px; border-radius: var(--lf-radius); background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.leadflow-form-message.is-error { padding: 14px 16px; border-radius: var(--lf-radius); background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }

.leadflow-notice { padding: 12px 16px; border-radius: 8px; background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; font-size: 14px; }
.leadflow-notice-error { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }

@media (max-width: 600px) {
	.leadflow-field.leadflow-w-50,
	.leadflow-field.leadflow-w-33,
	.leadflow-subfield { flex: 1 1 100%; }
	.leadflow-step-nav .leadflow-btn { flex: 1 1 auto; }
	.leadflow-progress-steps { display: none; }
}