/* ===========================================================
   Form Flex — Workmedia Blocos
   Estilo do formulário no front-end.
   NÃO declara font-size/weight/family em elementos com
   controles de tipografia do Elementor.
   =========================================================== */

.wm-ff {
	border-radius: 12px;
	box-sizing: border-box;
}

.wm-ff *,
.wm-ff *::before,
.wm-ff *::after {
	box-sizing: border-box;
}

.wm-ff-grid {
	display: grid;
	gap: 16px;
}

.wm-ff-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wm-ff-label {
	margin-bottom: 6px;
	font-weight: 600;
	line-height: 1.3;
}

.wm-ff-req {
	color: #e53935;
}

.wm-ff-field input,
.wm-ff-field textarea,
.wm-ff-field select {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wm-ff-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

.wm-ff-field textarea {
	resize: vertical;
	min-height: 96px;
}

.wm-ff-field input:focus,
.wm-ff-field textarea:focus,
.wm-ff-field select:focus {
	outline: none;
	border-color: #0066ff;
	box-shadow: 0 0 0 3px rgba(0, 102, 255, .12);
}

/* Estado de erro */
.wm-ff-field.wm-ff-invalid input,
.wm-ff-field.wm-ff-invalid textarea,
.wm-ff-field.wm-ff-invalid select {
	border-color: #e53935;
	box-shadow: 0 0 0 3px rgba(229, 57, 53, .10);
}

.wm-ff-erro {
	display: none;
	margin-top: 5px;
	color: #e53935;
	font-size: .85em;
	line-height: 1.3;
}

.wm-ff-field.wm-ff-invalid .wm-ff-erro {
	display: block;
}

/* Serviços (checkboxes) */
.wm-ff-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	padding-top: 2px;
}

.wm-ff-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	line-height: 1.3;
}

.wm-ff-check input {
	width: 18px;
	height: 18px;
	accent-color: #0066ff;
	cursor: pointer;
	flex: 0 0 auto;
}

/* Honeypot — fora da tela */
.wm-ff-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* reCAPTCHA */
.wm-ff-recaptcha,
.wm-ff-recaptcha-v3 {
	margin-top: 16px;
}

/* Botão */
.wm-ff-submit {
	margin-top: 18px;
	padding: 13px 30px;
	border: none;
	border-radius: 8px;
	background: #0066ff;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease;
	font-family: inherit;
}

.wm-ff-submit:hover {
	filter: brightness(1.07);
}

.wm-ff-submit:active {
	transform: translateY(1px);
}

.wm-ff-submit:disabled {
	opacity: .6;
	cursor: progress;
}

/* Feedback de envio */
.wm-ff-feedback {
	margin-top: 14px;
	font-weight: 600;
	line-height: 1.4;
	display: none;
}

.wm-ff-feedback.wm-ok {
	display: block;
	color: #1b8f4a;
}

.wm-ff-feedback.wm-fail {
	display: block;
	color: #e53935;
}

/* Span helpers (fallback se grid-column inline faltar) */
.wm-span-1 { grid-column: span 1; }
.wm-span-2 { grid-column: span 2; }
.wm-span-3 { grid-column: span 3; }
.wm-span-4 { grid-column: span 4; }

/* No mobile, tudo ocupa a largura toda */
@media (max-width: 767px) {
	.wm-ff-field {
		grid-column: span 1 !important;
	}
}