/*
 * Formulário de configuração na página do produto.
 *
 * As cores saem do tema, não daqui: cada uma é lida como
 * `var( --wp--preset--color--… )`, que é o nome que o WordPress dá às cores
 * cadastradas no tema. Assim o formulário segue a paleta da gráfica sozinho,
 * sem ninguém precisar repetir os códigos de cor em dois lugares.
 *
 * Toda variável vem com um valor de reserva depois da vírgula. É ele que vale
 * se o plugin for instalado num tema que não tenha essas cores — o formulário
 * continua legível em qualquer lugar, que é o que se espera de um plugin.
 */

.grafica-form {
	margin: 0 0 1.5em;
	padding: 1.2em 1.4em;
	border: 1px solid var( --wp--preset--color--borda, rgba( 0, 0, 0, .12 ) );
	border-radius: 6px;
	background: var( --wp--preset--color--base, rgba( 0, 0, 0, .015 ) );
}

/*
 * Cada etapa é um <fieldset> com <legend>: é o agrupamento que o leitor de tela
 * já entende, e o que faz os botões de uma etapa serem lidos como um conjunto.
 * O visual padrão do fieldset (moldura) não serve aqui e é zerado.
 */
.grafica-campo {
	margin: 0 0 1.1em;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* Etapa da cascata que ainda não chegou a vez. */
.grafica-campo[hidden] {
	display: none;
}

.grafica-campo-titulo {
	display: flex;
	align-items: center;
	gap: .5em;
	margin-bottom: .45em;
	padding: 0;
	font-weight: 600;
}

/*
 * O número do passo. Existe para o cliente enxergar que é uma sequência curta —
 * seis campos empilhados sem numeração parecem uma ficha sem fim.
 */
.grafica-campo-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var( --wp--preset--color--marca-clara, rgba( 34, 113, 177, .12 ) );
	color: var( --wp--preset--color--marca, #2271b1 );
	font-size: .8em;
	font-weight: 700;
	flex: 0 0 auto;
}

.grafica-campo > label {
	display: block;
	margin-bottom: .35em;
	font-weight: 600;
}

/*
 * Botões no lugar da lista suspensa.
 *
 * O rádio continua sendo um <input type="radio"> de verdade — só sai de vista.
 * É ele que responde ao teclado, ao leitor de tela e ao envio do formulário;
 * o <label> por cima é só a aparência.
 */
.grafica-botoes {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

.grafica-botao {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: .55em .9em;
	border: 1px solid var( --wp--preset--color--borda, rgba( 0, 0, 0, .22 ) );
	border-radius: 6px;
	background: var( --wp--preset--color--base, #fff );
	line-height: 1.3;
	cursor: pointer;
}

.grafica-botao input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* O escolhido, na cor da marca. */
.grafica-botao:has( input:checked ) {
	border-color: var( --wp--preset--color--marca, #2271b1 );
	background: var( --wp--preset--color--marca-clara, rgba( 34, 113, 177, .1 ) );
	box-shadow: inset 0 0 0 1px var( --wp--preset--color--marca, #2271b1 );
	font-weight: 600;
}

/*
 * Reserva para navegador antigo, sem `:has()`: ali a moldura não muda, mas o
 * texto do escolhido ainda fica na cor da marca e em negrito. Dá para enxergar
 * o que está marcado de qualquer jeito.
 */
.grafica-botao input:checked + span {
	color: var( --wp--preset--color--marca-escura, #135e96 );
	font-weight: 600;
}

/* O anel de foco tem de aparecer no que se vê, não no rádio escondido. */
.grafica-botao:has( input:focus-visible ) {
	outline: 2px solid var( --wp--preset--color--marca, #2271b1 );
	outline-offset: 2px;
}

.grafica-lista {
	width: 100%;
	max-width: 380px;
	padding: .55em .7em;
	line-height: 1.4;
}

/*
 * Quantidade cobrada por degrau.
 *
 * O produto não tem lote fechado: o cliente digita quantas peças quer. O que os
 * atalhos acima da caixa mostram é onde o preço por unidade muda — comprar a
 * partir de certa quantidade sai mais barato, e isso precisa estar à vista na
 * hora de decidir o número, não escondido no total depois.
 *
 * São <button>, não rádio: nenhum deles é "a escolha". A escolha é o número na
 * caixa; o botão só o preenche.
 */
.grafica-degraus {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-bottom: .7em;
}

.grafica-degrau {
	flex-direction: column;
	align-items: flex-start;
	gap: .1em;
	min-height: 44px;
	font: inherit;
	text-align: left;
}

.grafica-degrau-quantas {
	font-size: .85em;
	color: var( --wp--preset--color--contraste-suave, #50575e );
}

.grafica-degrau-valor {
	font-weight: 700;
}

.grafica-degrau-cada {
	margin-left: .3em;
	font-size: .8em;
	font-weight: 400;
	color: var( --wp--preset--color--contraste-suave, #50575e );
}

/* O degrau em que a quantidade digitada caiu. */
.grafica-degrau--ativo {
	border-color: var( --wp--preset--color--marca, #2271b1 );
	background: var( --wp--preset--color--marca-clara, rgba( 34, 113, 177, .1 ) );
	box-shadow: inset 0 0 0 1px var( --wp--preset--color--marca, #2271b1 );
}

.grafica-degrau--ativo .grafica-degrau-quantas {
	color: var( --wp--preset--color--marca-escura, #135e96 );
}

.grafica-degrau:focus-visible {
	outline: 2px solid var( --wp--preset--color--marca, #2271b1 );
	outline-offset: 2px;
}

/* A caixa de digitar, com a mesma moldura dos outros campos. */
.grafica-qtd-livre {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}

.grafica-qtd-livre input {
	box-sizing: border-box;
	width: 7em;
	min-height: 44px;
	padding: .55em .7em;
	border: 1px solid var( --wp--preset--color--borda, rgba( 0, 0, 0, .22 ) );
	border-radius: 6px;
	background: var( --wp--preset--color--base, #fff );
	font: inherit;
	line-height: 1.4;
}

.grafica-qtd-livre input:focus-visible {
	outline: 2px solid var( --wp--preset--color--marca, #2271b1 );
	outline-offset: 1px;
}

.grafica-qtd-unidade {
	color: var( --wp--preset--color--contraste-suave, #50575e );
}

/* Campos de medidas (m²) */
.grafica-dimensoes {
	display: flex;
	align-items: center;
	gap: .8em;
	flex-wrap: wrap;
}

.grafica-dimensoes label {
	display: flex;
	flex-direction: column;
	font-size: .9em;
}

.grafica-dimensoes label span {
	margin-bottom: .3em;
	font-weight: 600;
	opacity: .8;
}

.grafica-dimensoes input[type="number"] {
	width: 110px;
	padding: .55em .7em;
	border: 1px solid var( --wp--preset--color--borda, rgba( 0, 0, 0, .22 ) );
	border-radius: 6px;
	background: var( --wp--preset--color--base, #fff );
	line-height: 1.4;
}

.grafica-dimensoes input[type="number"]:focus {
	outline: 2px solid var( --wp--preset--color--marca, #2271b1 );
	outline-offset: 1px;
	border-color: var( --wp--preset--color--marca, #2271b1 );
}

.grafica-dimensoes-x {
	font-size: 1.2em;
	font-weight: 700;
	opacity: .5;
	margin-top: 1.3em;
}

.grafica-campo .required {
	border: 0;
	color: var( --wp--preset--color--erro, #b32d2e );
	text-decoration: none;
}

.grafica-campo .required[hidden] {
	display: none;
}

/* Criação de arte */

/*
 * A área da arte só aparece quando a escolha fecha: pedir um PDF a quem ainda
 * não sabe quanto vai custar é pedir na hora errada.
 */
.grafica-arte[hidden] {
	display: none;
}

.grafica-criar-arte > label {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	font-weight: 400;
	cursor: pointer;
}

.grafica-criar-arte > label input {
	flex: 0 0 auto;
}

/* O adicional inteiro muda de linha junto; nunca sobra um parêntese isolado. */
.grafica-criar-arte-preco {
	white-space: nowrap;
}

.grafica-aviso-arte {
	display: block;
	margin-top: .5em;
	padding: .7em .9em;
	border-left: 3px solid var( --wp--preset--color--marca, #2271b1 );
	background: rgba( 34, 113, 177, .07 );
	background: var( --wp--preset--color--marca-clara, rgba( 34, 113, 177, .07 ) );
	font-size: .9em;
	line-height: 1.5;
}

/* Envio da arte */

.grafica-upload[hidden] {
	display: none;
}

/*
 * A área de envio tem cara de área de envio: moldura tracejada, como em todo
 * lugar onde se solta arquivo. Antes era um botão de escolher arquivo solto no
 * meio do formulário, visualmente igual aos outros campos — e mandar a arte é o
 * passo que trava o pedido inteiro quando o cliente não percebe que existe.
 */
.grafica-upload {
	min-width: 0;
	padding: 1em 1.1em;
	border: 2px dashed var( --wp--preset--color--borda, rgba( 0, 0, 0, .18 ) );
	border-radius: 8px;
	background: var( --wp--preset--color--base-suave, rgba( 0, 0, 0, .02 ) );
}

.grafica-upload input[type="file"] {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 380px;
	overflow: hidden;
	font-size: .9em;
	text-overflow: ellipsis;
}

.grafica-upload input[type="file"]::file-selector-button {
	min-height: 40px;
	margin-right: .65em;
	padding: .45em .75em;
	border: 1px solid var( --wp--preset--color--borda, rgba( 0, 0, 0, .22 ) );
	border-radius: 4px;
	background: var( --wp--preset--color--base, #fff );
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.grafica-upload input[type="file"]::file-selector-button:hover {
	border-color: var( --wp--preset--color--marca, #2271b1 );
}

.grafica-upload-dica {
	display: block;
	margin-top: .4em;
	font-size: .85em;
	opacity: .75;
}

.grafica-progresso {
	margin-top: .7em;
	height: 6px;
	max-width: 380px;
	border-radius: 3px;
	background: rgba( 0, 0, 0, .1 );
	overflow: hidden;
}

.grafica-progresso-barra {
	width: 0;
	height: 100%;
	background: var( --wp--preset--color--marca, #2271b1 );
	transition: width .15s linear;
}

.grafica-arquivo-ok {
	display: flex;
	align-items: center;
	gap: .7em;
	margin-top: .6em;
	padding: .55em .8em;
	border-radius: 4px;
	background: rgba( 0, 128, 0, .08 );
	background: var( --wp--preset--color--sucesso-clara, rgba( 0, 128, 0, .08 ) );
	font-size: .9em;
}

.grafica-arquivo-ok::before {
	content: "✓";
	font-weight: 700;
	color: var( --wp--preset--color--sucesso, #1a7f37 );
}

.grafica-arquivo-remover {
	padding: 0;
	border: 0;
	background: none;
	color: var( --wp--preset--color--erro, #b32d2e );
	font-size: .9em;
	text-decoration: underline;
	cursor: pointer;
}

/* Resumo */

/*
 * O resumo mora fora do formulário, dentro da `.grafica-acao`, junto do botão
 * de comprar — é o que permite ao tema grudar o conjunto no rodapé do celular
 * com CSS puro, sem mover nada de lugar. Por isso ele traz a própria moldura,
 * em vez de contar com a caixa do formulário em volta.
 */
.grafica-resumo {
	margin: 0 0 1em;
	padding-top: 1em;
	border-top: 1px solid var( --wp--preset--color--borda, rgba( 0, 0, 0, .12 ) );
}

/*
 * O que já foi escolhido, numa linha só. Depois de rolar seis campos, é aqui
 * que o cliente confere o que montou antes de comprar.
 */
.grafica-escolha {
	margin: 0 0 .5em;
	font-size: .9em;
	line-height: 1.5;
	opacity: .85;
}

.grafica-escolha[hidden] {
	display: none;
}

.grafica-resumo-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
}

.grafica-resumo-rotulo {
	font-weight: 600;
	text-transform: uppercase;
	font-size: .8em;
	letter-spacing: .04em;
	opacity: .7;
}

.grafica-resumo-total strong {
	font-size: 1.6em;
	line-height: 1.2;
}

.grafica-resumo-prazo {
	margin: .4em 0 0;
	font-size: .88em;
	opacity: .8;
}

.grafica-erro {
	margin: .6em 0 0;
	padding: .6em .8em;
	border-left: 3px solid var( --wp--preset--color--erro, #b32d2e );
	background: rgba( 179, 45, 46, .07 );
	background: var( --wp--preset--color--erro-clara, rgba( 179, 45, 46, .07 ) );
	font-size: .9em;
}

.grafica-erro[hidden],
.grafica-resumo-prazo[hidden],
.grafica-progresso[hidden],
.grafica-arquivo-ok[hidden],
.grafica-aviso-arte[hidden] {
	display: none;
}

/* Características que não variam neste produto — texto, não campo */

.grafica-fixas {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
	font-size: .9em;
	opacity: .8;
}

.grafica-fixas span {
	font-weight: 600;
}

/*
 * O próximo passo da cascata. Não é erro nem aviso: é a instrução do que fazer
 * para o preço aparecer, e por isso vem em tom informativo.
 */

.grafica-falta {
	margin: .5em 0 0;
	padding: .5em .75em;
	border-left: 3px solid var( --wp--preset--color--marca, #2271b1 );
	background: rgba( 34, 113, 177, .07 );
	background: var( --wp--preset--color--marca-clara, rgba( 34, 113, 177, .07 ) );
	font-size: .9em;
}

.grafica-falta[hidden] {
	display: none;
}

/* Vitrine */

.grafica-desde {
	font-size: .8em;
	opacity: .7;
}

/* Selo no admin e no carrinho */

.grafica-selo-arte {
	display: inline-block;
	padding: .15em .5em;
	border-radius: 3px;
	background: var( --wp--preset--color--atencao, #f0b849 );
	color: var( --wp--preset--color--contraste, #1d2327 );
	font-size: .8em;
	font-weight: 700;
	white-space: nowrap;
}

@media ( max-width: 600px ) {
	.grafica-form {
		padding: 1em;
	}

	.grafica-lista,
	.grafica-upload input[type="file"] {
		max-width: 100%;
	}

	/* No celular o botão precisa ser alvo de dedo, não de mouse. */
	.grafica-botao {
		padding: .7em 1em;
	}
}

/* Solicitações de privacidade e pós-venda */

.grafica-solicitacao {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.1rem 1.25rem;
	margin-top: 2rem;
	padding: clamp( 1.25rem, 3vw, 2rem );
	border: 1px solid var( --wp--preset--color--borda, #dce1ec );
	border-radius: 4px;
	background: var( --wp--preset--color--base, #fff );
	box-shadow: 0 8px 28px rgba( 7, 21, 59, .08 );
}

.grafica-solicitacao__campo,
.grafica-solicitacao__declaracao,
.grafica-solicitacao__aviso {
	margin: 0;
}

.grafica-solicitacao__campo:nth-of-type( 5 ),
.grafica-solicitacao__declaracao,
.grafica-solicitacao__aviso {
	grid-column: 1 / -1;
}

.grafica-solicitacao label {
	display: block;
	margin-bottom: .4rem;
	font-weight: 700;
}

.grafica-solicitacao input[type="text"],
.grafica-solicitacao input[type="email"],
.grafica-solicitacao select,
.grafica-solicitacao textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: .7rem .8rem;
	border: 1px solid #9aa6b7;
	border-radius: 3px;
	background: #fff;
	color: #12181f;
	font: inherit;
}

.grafica-solicitacao textarea {
	min-height: 9rem;
	resize: vertical;
}

.grafica-solicitacao input:focus-visible,
.grafica-solicitacao select:focus-visible,
.grafica-solicitacao textarea:focus-visible,
.grafica-solicitacao__enviar:focus-visible {
	outline: 3px solid var( --wp--preset--color--marca, #1d5fd1 );
	outline-offset: 2px;
}

.grafica-solicitacao small {
	display: block;
	margin-top: .35rem;
	color: var( --wp--preset--color--contraste-suave, #5c6675 );
}

.grafica-solicitacao__declaracao label {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	font-weight: 600;
}

.grafica-solicitacao__declaracao input {
	flex: 0 0 auto;
	width: 1.2rem;
	height: 1.2rem;
	margin-top: .15rem;
}

.grafica-solicitacao__aviso {
	padding: .85rem 1rem;
	border-left: 4px solid var( --wp--preset--color--ciano, #00a7d7 );
	background: #f2f7ff;
	font-size: .92rem;
}

.grafica-solicitacao__enviar {
	grid-column: 1 / -1;
	justify-self: start;
	min-height: 48px;
	padding: .75rem 1.2rem;
	border: 0;
	border-radius: 3px;
	background: var( --wp--preset--color--acao, #d64d11 );
	color: #fff;
	font: inherit;
	font-weight: 750;
	cursor: pointer;
}

.grafica-solicitacao__erros,
.grafica-protocolo {
	margin: 1.5rem 0;
	padding: 1rem 1.15rem;
	border-left: 4px solid var( --wp--preset--color--erro, #b32d2e );
	background: #fff4f4;
}

.grafica-protocolo {
	border-left-color: var( --wp--preset--color--sucesso, #147d3f );
	background: #effaf3;
}

.grafica-protocolo h2,
.grafica-protocolo p:last-child {
	margin-bottom: 0;
}

.grafica-solicitacao__isca {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media ( max-width: 700px ) {
	.grafica-solicitacao {
		grid-template-columns: minmax( 0, 1fr );
	}

	.grafica-solicitacao__campo,
	.grafica-solicitacao__declaracao,
	.grafica-solicitacao__aviso,
	.grafica-solicitacao__enviar {
		grid-column: 1;
	}
}