/* O revestimento do bloco de checkout do WooCommerce.

   A marcação aqui é de terceiro: os campos de CPF e WhatsApp, a recusa de CPF já
   inscrito e a cobrança vivem dentro do bloco, e refazer o formulário jogaria as
   três regras de inscrição fora. O tema reveste a superfície e nunca a estrutura.

   Toda regra desta folha nasce de `.preenchimento`, que é marcação do tema. O
   escopo faz duas coisas: garante especificidade maior que a das classes de
   componente do bloco sem precisar de `!important`, e impede que qualquer coisa
   escrita aqui alcance outra página. Onde o bloco já resolve bem, não há regra. */

/* O que sai

   O resumo do pedido repetia o preço quatro vezes numa caixa lateral, e o preço
   desta página já mora na espinha, ao vivo (assets/site/js/checkout.js). A nota
   do pedido não tem para onde ir numa inscrição: quem precisa falar com a equipe
   usa o WhatsApp do rodapé. O país é sempre o Brasil, e um seletor de uma opção
   só é uma pergunta sem resposta possível. */
/* O bloco imprime o resumo duas vezes, e são elementos diferentes: a caixa
   lateral na medida larga e uma segunda cópia junto do botão na estreita. Mirar
   no bloco do resumo, e não só na caixa que o hospeda, é o que alcança as duas. */
.preenchimento .wp-block-woocommerce-checkout-order-summary-block,
.preenchimento .wc-block-checkout__sidebar,
.preenchimento .wc-block-checkout__order-notes,
.preenchimento .wc-block-components-address-form__country {
	display: none;
}

.preenchimento .wc-block-components-sidebar-layout {
	display: block;
}

.preenchimento .wc-block-checkout__main {
	width: 100%;
	max-width: none;
	padding: 0;
}

.preenchimento .wc-block-checkout__form {
	max-width: none;
}

/* Passos */

.preenchimento .wc-block-components-checkout-step {
	margin-block: 0 var(--e6);
	padding: 0;
	border: 0;
}

/* A espinha fica grudada no topo, e o navegador não sabe disso quando rola até um
   campo pela tabulação ou até o primeiro erro do envio: sem a margem de rolagem,
   o campo em foco para exatamente atrás da barra vermelha. */
.preenchimento .wc-block-components-checkout-step,
.preenchimento .wc-block-components-text-input,
.preenchimento .wc-blocks-components-select {
	scroll-margin-top: calc(var(--altura-espinha) + var(--e5));
}

/* O fio de 1px que costura a ficha do curso separa um passo do outro, e a folga
   acima do título é maior que a de baixo: o rótulo pertence ao que vem depois
   dele, e não ao que ficou para trás. O primeiro passo abre o documento e não
   recebe fio, que ali leria como borda solta da folha. */
.preenchimento .wc-block-components-checkout-step + .wc-block-components-checkout-step {
	margin-top: var(--e7);
	padding-top: var(--e6);
	border-top: 1px solid var(--linha);
}

.preenchimento .wc-block-components-checkout-step__heading {
	margin: 0 0 var(--e4);
}

.preenchimento .wc-block-components-checkout-step__title {
	font-family: var(--display);
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.preenchimento .wc-block-components-checkout-step__description {
	margin-top: var(--e2);
	color: var(--tinta-media);
	font-size: .9375rem;
}

/* Campos

   Fio de 1px, canto curto e altura de campo de formulário sério. O corpo fica em
   1rem cheio porque abaixo disso o navegador do iPhone dá zoom no campo ao
   receber o foco, e a página inteira sai do lugar no meio do preenchimento.

   A cadeia longa espelha a que o bloco usa: `.wc-block-components-form
   .wc-block-components-text-input input[type="text"]` pesa três classes mais o
   elemento, e uma regra de duas classes perde para ela em silêncio. Espelhar,
   em vez de acrescentar `!important`, deixa visível contra o que se está
   competindo e não fecha a porta para quem vier depois. */
.preenchimento .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-text-input input,
.preenchimento .wc-block-components-form .wc-block-components-checkout-step .wc-blocks-components-select__select {
	height: 3.375rem;
	padding: 1.35rem .85rem .35rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--texto);
	font-size: 1rem;
	font-weight: 500;
	transition: border-color .18s var(--saida), box-shadow .18s var(--saida);
}

.preenchimento .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-text-input input:hover,
.preenchimento .wc-block-components-form .wc-block-components-checkout-step .wc-blocks-components-select__select:hover {
	border-color: var(--tinta-suave);
}

/* O anel de foco é azul, como em todo o tema: o vermelho aqui seria lido como
   erro no campo em que a pessoa acabou de entrar. */
.preenchimento .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-text-input input:focus,
.preenchimento .wc-block-components-form .wc-block-components-checkout-step .wc-blocks-components-select__select:focus {
	outline: 0;
	border-color: var(--azul);
	box-shadow: 0 0 0 3px var(--azul-tenue);
}

.preenchimento .wc-block-components-text-input label,
.preenchimento .wc-blocks-components-select__label {
	left: .9rem;
	color: var(--tinta-suave);
	font-family: var(--texto);
	font-size: 1rem;
	font-weight: 500;
}

.preenchimento .wc-block-components-text-input.is-active label,
.preenchimento .wc-blocks-components-select__label {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
}

/* O CEP abre o endereço e fica sozinho na primeira linha, na largura do que se
   digita nele: um campo curto num campo largo pede mais do que o que cabe. A
   caixa toma a linha inteira e o campo é que encolhe, porque uma caixa estreita
   deixaria o nome subir para o lado dele.

   A cadeia longa não é enfeite: a largura dos campos do endereço vem de
   `.wc-block-checkout__billing-fields .wc-block-components-address-form
   .wc-block-components-text-input`, e vencer três classes por ordem de
   carregamento seria confiar numa fila que qualquer plugin reordena. */
.preenchimento .wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-address-form__postcode {
	--largura-do-cep: 15rem;

	flex: 0 0 100%;
}

.preenchimento .wc-block-components-address-form__postcode input {
	max-width: var(--largura-do-cep);
}

/* Enquanto o CEP não está completo, o resto do endereço não existe: ele vai ser
   preenchido pela consulta, e mostrar cinco campos vazios que o próximo passo
   sobrescreve é pedir trabalho para jogar fora. */
.preenchimento__interior:not(.esta-com-endereco) .wc-block-components-address-form__address_1,
.preenchimento__interior:not(.esta-com-endereco) .wc-block-components-address-form__address_2,
.preenchimento__interior:not(.esta-com-endereco) .wc-block-components-address-form__city,
.preenchimento__interior:not(.esta-com-endereco) .wc-block-components-address-form__state,
.preenchimento__interior:not(.esta-com-endereco) .wc-block-components-address-form__franci-bairro,
.preenchimento__interior:not(.esta-com-endereco) .wc-block-components-address-form__franci-complemento {
	display: none;
}

/* A rua e o número dividem a linha na proporção do que se escreve em cada um, e
   não em metades: nome de rua é longo e número quase nunca passa de quatro
   dígitos. As duas larguras somam a linha inteira de propósito: numa grade que
   quebra por transbordo, sobrar espaço é o mesmo que convidar a cidade a subir
   para o lado do número. */
.preenchimento .wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-address-form__address_1 {
	--largura-do-numero: 9rem;

	flex: 1 1 calc(100% - var(--largura-do-numero) - var(--e3));
}

.preenchimento .wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-address-form__address_2 {
	flex: 0 0 9rem;
}

/* A consulta ao CEP passa pela rede e demora o que a rede demorar. A varredura na
   base do campo é o aviso de que a espera é do sistema, e não de um campo que
   parou de aceitar dígitos. */
.preenchimento .wc-block-components-address-form__postcode::after {
	content: '';
	position: absolute;
	inset: auto auto 1px 1px;
	width: calc(var(--largura-do-cep) - 2px);
	height: 2px;
	border-radius: 0 0 var(--raio) var(--raio);
	background: linear-gradient(90deg, transparent, var(--vermelho), transparent);
	opacity: 0;
	transform: translateX(-100%);
}

.esta-buscando-cep .wc-block-components-address-form__postcode::after {
	opacity: 1;
	animation: franci-varredura 1.1s var(--saida) infinite;
}

@keyframes franci-varredura {
	to {
		transform: translateX(100%);
	}
}

/* Escolha de pagamento

   Cada meio é um registro com fio próprio, e o escolhido acende no vermelho de
   marca sobre o rosa do tema: é a mesma dupla que a ficha do curso usa para
   marcar a turma em uso. */
/* A caixa é o par inteiro, escolha mais formulário, e não só a linha da escolha:
   com a borda no rótulo, o vermelho da opção em uso terminava no meio da caixa e
   os campos do cartão continuavam dentro de um fio cinza que não era de ninguém. */
.preenchimento .wc-block-components-radio-control-accordion-option {
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	transition: border-color .18s var(--saida);
}

.preenchimento .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option {
	margin-top: var(--e3);
}

.preenchimento .wc-block-components-radio-control-accordion-option:hover {
	border-color: var(--tinta-suave);
}

.preenchimento .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--vermelho);
}

.preenchimento .wc-block-components-radio-control__option {
	padding: var(--e4) var(--e4) var(--e4) 3rem;
	border: 0;
	border-radius: 0;
	background: var(--papel);
	font-size: .9375rem;
	transition: background-color .18s var(--saida);
}

.preenchimento .wc-block-components-radio-control__option-checked {
	border-bottom: 1px solid var(--vermelho);
	background: var(--vermelho-tenue);
}

.preenchimento .wc-block-components-radio-control__input {
	left: var(--e4);
	accent-color: var(--vermelho);
}

.preenchimento .wc-block-components-radio-control__label {
	font-weight: 600;
}

.preenchimento .wc-block-components-radio-control__description {
	color: var(--tinta-media);
	font-size: .875rem;
}

.preenchimento .wc-block-components-radio-control-accordion-content {
	padding: var(--e5) var(--e4);
	border: 0;
}

/* Os campos do cartão são iframes do Mercado Pago, e o que está dentro deles não
   é nosso: o tema alinha a moldura e o rótulo à mesma gramática dos outros
   campos, para o formulário não trocar de desenho no passo que cobra. */
.preenchimento .mp-checkout-custom-card-input {
	height: 3.375rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
}

.preenchimento .mp-input-label {
	color: var(--tinta-media);
	font-family: var(--texto);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
}

/* Caixas de marcação */

.preenchimento .wc-block-components-checkbox__input {
	accent-color: var(--vermelho);
}

.preenchimento .wc-block-components-checkbox__label {
	color: var(--tinta-media);
	font-size: .9375rem;
}

/* Termos e ação */

.preenchimento .wc-block-checkout__terms {
	margin-block: var(--e6) var(--e4);
	padding-top: var(--e5);
	border-top: 1px solid var(--linha);
	color: var(--tinta-media);
	font-size: .875rem;
	line-height: 1.6;
}

.preenchimento .wc-block-checkout__terms a {
	color: var(--tinta);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.preenchimento .wc-block-checkout__actions {
	padding: 0;
}

/* O botão que cobra é o botão primário do tema, na medida grande: ele é a última
   coisa que a pessoa faz na página e não divide peso com nada. */
.preenchimento .wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 3.5rem;
	padding: .95rem 1.5rem;
	border: 0;
	border-radius: var(--raio);
	background: var(--vermelho);
	box-shadow: var(--sombra-1);
	color: #fff;
	font-family: var(--texto);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -.005em;
	transition: background-color .18s var(--saida), box-shadow .18s var(--saida), transform .09s var(--saida);
}

.preenchimento .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: var(--vermelho-forte);
	box-shadow: var(--sombra-2);
}

.preenchimento .wc-block-components-checkout-place-order-button:active:not(:disabled) {
	transform: translateY(1px);
}

.preenchimento .wc-block-components-checkout-place-order-button:disabled {
	background: var(--papel-alt);
	box-shadow: none;
	color: var(--tinta-suave);
	cursor: not-allowed;
}

/* Erros e avisos */

.preenchimento .wc-block-components-validation-error {
	color: var(--vermelho-forte);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.45;
}

.preenchimento .wc-block-components-form .wc-block-components-checkout-step .has-error input,
.preenchimento .wc-block-components-form .wc-block-components-checkout-step .has-error .wc-blocks-components-select__select {
	border-color: var(--vermelho);
}

.preenchimento .wc-block-components-form .wc-block-components-checkout-step .has-error input:focus,
.preenchimento .wc-block-components-form .wc-block-components-checkout-step .has-error .wc-blocks-components-select__select:focus {
	border-color: var(--vermelho);
	box-shadow: 0 0 0 3px var(--vermelho-tenue);
}

.preenchimento .wc-block-components-notice-banner {
	border-radius: var(--raio);
	font-size: .9375rem;
}

.preenchimento .wc-block-components-notice-banner.is-error {
	border-color: var(--vermelho);
	background: var(--vermelho-tenue);
	color: var(--vermelho-forte);
}

@media (max-width: 560px) {
	.preenchimento .wc-block-components-address-form__postcode input {
		max-width: none;
	}

	/* O bloco continua desenhando duas colunas em telefone largo, e meia coluna
	   corta o rótulo mais longo do endereço no meio da palavra. Rua e número
	   continuam na mesma linha, porque o número é curto e a dupla é a razão de ele
	   existir; o resto empilha. */
	.preenchimento .wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-address-form__franci-bairro,
	.preenchimento .wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-address-form__franci-complemento {
		flex: 0 0 100%;
	}
}