/*
 * Sowelo Leads — Estilos do formulário multi-step.
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa — www.dantetesta.com.br
 */

/* ---- Honeypot anti-spam (invisível para humanos, visível para bots) ---- */
.sowelo-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Fieldset / Step ---- */
.form-step { border: none; padding: 0; margin: 0; }
.form-step[hidden] { display: none; }

.form-step-title {
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.form-step-num {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-neon);
	background: rgba(0, 229, 255, 0.1);
	border: 1px solid rgba(0, 229, 255, 0.25);
	border-radius: 99px;
	padding: 0.2rem 0.625rem;
}

/* ---- Groups ---- */
.form-group {
	margin-bottom: 1rem;
}
.form-group label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 0.375rem;
}
.form-group input {
	width: 100%;
	background: rgba(5, 7, 15, 0.7);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	padding: 0.75rem 1rem;
	transition: border-color var(--transition), box-shadow var(--transition);
	outline: none;
}
.form-group input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(41, 171, 226, 0.15);
}
.form-group input.error {
	border-color: #ef4444;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.form-group input::placeholder { color: var(--color-text-muted); opacity: 0.7; }

/* ---- Opções (radio) ---- */
.form-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
}

.form-option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	background: rgba(5, 7, 15, 0.5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.75rem 1rem;
	cursor: pointer;
	transition: all var(--transition);
	font-size: 0.875rem;
	color: var(--color-text-muted);
}
.form-option:hover {
	border-color: var(--color-primary);
	color: var(--color-text);
	background: rgba(41, 171, 226, 0.06);
}
.form-option input[type="radio"] {
	width: 16px;
	height: 16px;
	min-width: 16px;
	accent-color: var(--color-primary);
	cursor: pointer;
	margin: 0;
	padding: 0;
}
.form-option:has(input:checked) {
	border-color: var(--color-primary);
	background: rgba(41, 171, 226, 0.1);
	color: var(--color-text);
}

/* ---- Navegação ---- */
.form-nav {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
	align-items: center;
}
.form-nav .btn { flex: 1; justify-content: center; }
.form-btn-submit[hidden],
.form-btn-prev[hidden]  { display: none; }

/* ---- Mensagem de resultado ---- */
.form-message {
	padding: 1rem;
	border-radius: var(--radius-sm);
	font-size: 0.9375rem;
	font-weight: 500;
	margin-top: 1rem;
	text-align: center;
}
.form-message[hidden] { display: none; }
.form-message.success {
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.3);
	color: #86efac;
}
.form-message.error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #fca5a5;
}

/* ---- LGPD ---- */
.form-lgpd {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	margin-top: 1rem;
	text-align: center;
}
.form-lgpd a { color: var(--color-primary); }

/* ---- Sucesso com link WA ---- */
.form-wa-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(135deg, #25D366, #128C7E);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.625rem 1.25rem;
	border-radius: 99px;
	margin-top: 0.75rem;
	text-decoration: none;
	transition: transform var(--transition), box-shadow var(--transition);
}
.form-wa-link:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

@media (max-width: 480px) {
	.form-options { grid-template-columns: 1fr; }
}