/**
 * forms-cf7.css — grid e controles dos formulários Contact Form 7.
 *
 * Os formulários do site (Contato, Proposta, Canton Fair, Trabalhe Conosco,
 * Newsletter) usam a marcação `.row > .col-50 / .col-100 / .col-35 / .col-30`,
 * mas nenhuma folha de estilo do tema definia essas classes: o `display:flex`
 * vinha por acidente da regra `.ekit-wid-con .row` do elementskit-lite e cada
 * campo era dimensionado pelo conteúdo (selects com 113px, inputs com 318px).
 *
 * Especificidade: o elementskit (`.ekit-wid-con .row`) e o CSS por página do
 * Elementor (`.elementor-XXXX .elementor-element-YYY .ekit-form form select`)
 * carregam depois deste arquivo e são mais específicos. Por isso o grid usa
 * `form.wpcf7-form ...` e os controles usam a cadeia
 * `form.wpcf7-form .row .wpcf7-form-control-wrap .wpcf7-form-control` — o
 * bastante para ganhar do Elementor sem precisar de `!important`.
 *
 * Spec: docs/FORMS.md
 *
 * @package Guelcos
 */

/* ── Grid ─────────────────────────────────────────────────────────────────── */

/* Gutter por `gap`, não por margem negativa: o elementskit força
   `margin: 0 -15px` na `.row` e isso fazia os campos vazarem 7px de cada lado
   do container do formulário no mobile. */
form.wpcf7-form .row {
	display: flex;
	flex-wrap: wrap;
	width: auto;
	margin-right: 0;
	margin-left: 0;
	gap: 0 16px;
}

/* elementskit-lite injeta ::before/::after (display:table) em toda `.row`;
   dentro de um flex container eles viram dois itens fantasmas. */
form.wpcf7-form .row::before,
form.wpcf7-form .row::after {
	display: none;
}

form.wpcf7-form .row > [class*="col-"] {
	box-sizing: border-box;
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0;
}

form.wpcf7-form .row > .col-100 {
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 768px) {

	form.wpcf7-form .row > .col-50 {
		flex: 0 0 calc(50% - 8px);
		max-width: calc(50% - 8px);
	}

	form.wpcf7-form .row > .col-35 {
		flex: 0 0 calc(35% - 11px);
		max-width: calc(35% - 11px);
	}

	form.wpcf7-form .row > .col-30 {
		flex: 0 0 calc(30% - 11px);
		max-width: calc(30% - 11px);
	}
}

/* Espaçamento vertical uniforme entre campos (CF7 embrulha tudo em <p>). */
form.wpcf7-form .row > [class*="col-"] > p {
	margin: 0 0 16px;
}

form.wpcf7-form .row > [class*="col-"] label {
	display: block;
	width: 100%;
	margin: 0;
}

form.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	position: relative;
	width: 100%;
}

/* ── Controles ────────────────────────────────────────────────────────────── */

form.wpcf7-form .row .wpcf7-form-control-wrap .wpcf7-form-control {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 52px;
	padding: 14px 16px;
	line-height: 1.4;
}

form.wpcf7-form .row .wpcf7-form-control-wrap textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}

/* iOS Safari dá zoom automático ao focar campo com fonte menor que 16px.
   No desktop mantemos os 14px do design original. */
form.wpcf7-form .row .wpcf7-form-control-wrap .wpcf7-form-control {
	font-size: 14px;
}

/* `!important` aqui é intencional: o CSS por página do Elementor
   (`.elementor-8902 .elementor-element.elementor-element-XXX .ekit-form form
   input:not([type="submit"]):not(...)`) tem especificidade alta demais para ser
   vencida por seletor, e 14px no mobile faz o iOS dar zoom no foco. */
@media (max-width: 767px) {

	form.wpcf7-form .row .wpcf7-form-control-wrap .wpcf7-form-control {
		font-size: 16px !important;
	}
}

/* Select: remove a seta nativa (que some quando a largura é forçada em 100%)
   e desenha uma própria, em SVG inline, para ficar igual em todos os browsers. */
form.wpcf7-form .row .wpcf7-form-control-wrap select.wpcf7-form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 44px;
	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'%3E%3Cpath fill='none' stroke='%236d7680' stroke-width='2' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	cursor: pointer;
	text-overflow: ellipsis;
}

form.wpcf7-form .row select::-ms-expand {
	display: none;
}

/* ── Botão ────────────────────────────────────────────────────────────────── */

/* A largura do submit vem do Elementor (CSS por página, `.ekit-form form
   input[type="submit"] { width: 100% }`) — aqui só garantimos altura clicável. */
form.wpcf7-form .row input[type="submit"] {
	min-height: 52px;
	cursor: pointer;
}

/* ── Validação ────────────────────────────────────────────────────────────── */

form.wpcf7-form .row span.wpcf7-not-valid-tip {
	position: static;
	display: block;
	margin-top: 4px;
	background: none;
}