/* ---------------------------------------------------------------------------
   7. Formulário de orçamento
   --------------------------------------------------------------------------- */

.magsil-orcamento {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	max-inline-size: 620px;
}

.magsil-campo {
	display: grid;
	gap: 0.45rem;
	margin: 0;
}

.magsil-campo label {
	font-size: var(--wp--preset--font-size--miudo);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafite);
}

/*
 * O box-sizing não é detalhe: sem ele o formulário vaza para fora da tela.
 *
 * O navegador não herda border-box para controles de formulário, e o reset do
 * WordPress não os cobre. Com content-box, os 100% de largura valem só para o
 * conteúdo e a padding é somada por fora: num celular de 390px, o campo media
 * 376px dentro de uma coluna de 342 — 34px além da borda direita, com a lateral
 * do campo cortada fora da tela em TODOS os campos do pedido de orçamento.
 *
 * Não aparecia como rolagem horizontal porque algo acima recorta o excesso, o
 * que é pior: em vez de poder arrastar para ver, a pessoa simplesmente não tinha
 * como alcançar a borda do campo.
 */
.magsil-campo input,
.magsil-campo textarea {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	padding: 0.85rem 1rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medio);
	color: var(--wp--preset--color--carvao);
	background-color: var(--wp--preset--color--branco);
	border: 1px solid var(--wp--preset--color--corda);
	/* Mesmo raio do botão: no formulário de orçamento os campos e o botão de
	   enviar ficam empilhados, e canto quadrado sobre canto arredondado a um
	   palmo de distância lê como descuido, não como escolha. */
	border-radius: 5px;
	transition: border-color 160ms ease;
}

.magsil-campo input::placeholder,
.magsil-campo textarea::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--grafite) 65%, transparent);
}

.magsil-campo input:focus,
.magsil-campo textarea:focus {
	border-color: var(--wp--preset--color--carvao);
	outline: 1px solid var(--wp--preset--color--carvao);
	outline-offset: 0;
}

.magsil-campo--consentimento label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.65rem;
	align-items: start;
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.55;
	color: var(--wp--preset--color--grafite);
}

/*
 * A caixa de marcar tem tamanho declarado, e não `auto`.
 *
 * Com `auto` dentro da grade, ela era esticada até a largura da primeira coluna
 * e saía com 148px de largura por 13 de altura — uma faixa achatada que não
 * parece caixa de marcar e é difícil de acertar com o dedo. O tamanho fixo
 * resolve as duas coisas, e o `flex-shrink` impede que a coluna a comprima
 * quando o texto ao lado for longo.
 *
 * 1.15rem porque o consentimento é obrigatório para enviar: é o controle que
 * mais custa caro quando alguém erra o toque e desiste do orçamento.
 */
.magsil-campo--consentimento input {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	flex-shrink: 0;
	margin-block-start: 0.2rem;
	accent-color: var(--wp--preset--color--terracota);
}

/*
 * "opcional" ao lado do rótulo.
 *
 * Marcar o opcional, e não o obrigatório, é o que reduz a leitura do formulário
 * a uma passada: sobraram três campos exigidos e quatro dispensáveis, e quem bate
 * o olho precisa ver de imediato o quanto pode pular.
 */
.magsil-campo__opcional {
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	color: color-mix(in srgb, var(--wp--preset--color--grafite) 75%, transparent);
}

.magsil-campo__opcional::before {
	content: "· ";
}

/* Invisível sem display:none — há robô que ignora campo escondido assim */
.magsil-orcamento__armadilha {
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------