/* Checkout em modal - YesAgile.
   Escopo todo prefixado com .yac- para nao colidir com o Divi. */

/* Paleta institucional. #154569 e o azul escuro do cabecalho; #309EFF e o azul
   claro ja usado nos links do site. Substituem o verde e o antigo #1a8cff.
   Declarados no overlay para nao vazarem para o resto da pagina. */
.yac-overlay {
	--yac-azul: #154569;
	--yac-azul-claro: #309EFF;

	position: fixed;
	inset: 0;
	/* Translucido com blur: o cliente quer ver a pagina por tras do modal.
	   Isso so funciona porque o layout de tras foi consertado (ver o rodape
	   grudado no fim, mais abaixo) -- antes o blur so borraria um rodape
	   flutuando no meio da tela em vez de resolver. */
	background: rgba(10, 26, 47, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: 24px 16px;

	/* Quem rola e o .yac-modal. O overlay so rola no desktop, onde ele tem
	   respiro em volta da caixa. No celular ele para de rolar (ver o media
	   query no fim do arquivo): dois containers rolaveis aninhados fazem o
	   Safari escolher o errado. */
	overscroll-behavior: contain;
}

.yac-overlay[hidden] { display: none !important; }

body.yac-travado { overflow: hidden; }

.yac-modal {
	position: relative;
	background: #fff;
	border-radius: 10px;
	width: 100%;
	max-width: 860px; /* cabe o checkout completo, que agora mora aqui dentro */
	padding: 28px 28px 32px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px); /* iOS: ver nota sobre 100vh no fim do arquivo */
	overflow-y: auto;

	/* iOS/WebKit: sem isto o Safari as vezes ignora o gesto de arrastar dentro de
	   uma caixa rolavel que esta sobre um overlay position:fixed. Obsoleto no
	   Safari moderno, mas inofensivo e ainda necessario em versoes antigas. */
	-webkit-overflow-scrolling: touch;

	/* Equivalente moderno: diz ao navegador que o gesto vertical aqui e rolagem,
	   e nao um gesto que a pagina deva interceptar. */
	touch-action: pan-y;
}

.yac-fechar {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: 0;
	font-size: 30px;
	line-height: 1;
	color: #6b7a90;
	cursor: pointer;
	padding: 4px 8px;
}
.yac-fechar:hover { color: #0a1a2f; }

.yac-titulo { margin: 0 0 18px; font-size: 22px; }

/* Trilha de etapas */
.yac-passos {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	counter-reset: yac;
}
.yac-passos li {
	flex: 1;
	counter-increment: yac;
	font-size: 13px;
	color: #8a97a8;
	border-top: 3px solid #e3e8ef;
	padding-top: 8px;
}
.yac-passos li::before { content: counter(yac) ". "; }
.yac-passos li.ativo { color: var(--yac-azul); border-top-color: var(--yac-azul); font-weight: 600; }
.yac-passos li.concluido { color: var(--yac-azul-claro); border-top-color: var(--yac-azul-claro); }

/* Cartao do curso */
.yac-curso {
	display: block; /* sem imagem: o cartao e so texto, como no esboco aprovado */
	background: #f5f8fc;
	border: 1px solid #e3e8ef;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 22px;
}
.yac-curso-info h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.yac-curso-preco { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
/* Multiplicador de inscricoes: o cartao mostra o preco unitario e o rodape
   mostra o total. Sem esta linha, a diferenca entre os dois nao tem explicacao
   na tela -- e o total passa a ser a unica coisa capaz de denunciar uma
   quantidade errada. */
.yac-curso-multiplicador {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--yac-azul);
}
.yac-curso-instrutor { margin: 0 0 4px; font-size: 14px; color: #4a5768; }
.yac-curso-instrutor a { text-decoration: underline; }
.yac-curso-vagas { margin: 0 0 4px; font-size: 13px; color: #4a5768; }
.yac-curso-vagas.yac-poucas { color: #b32d2e; font-weight: 600; }
.yac-curso-pix { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--yac-azul); }
.yac-curso-pix strong { font-size: 17px; }

/* Aviso de economia ao lado da opcao Pix */
.yac-pix-aviso { display: block; margin-top: 4px; color: var(--yac-azul); font-size: 14px; font-weight: 600; }

/* Navegacao entre etapas */
.yac-nav { margin: 18px 0 0; }
.yac-avancar,
.yac-voltar {
	border: 0;
	border-radius: 6px;
	padding: 12px 22px;
	font-size: 15px;
	cursor: pointer;
}
.yac-avancar { background: var(--yac-azul); color: #fff; width: 100%; }
.yac-avancar:hover, .yac-avancar:focus-visible { background: var(--yac-azul-claro); }
.yac-voltar { background: none; color: #4a5768; padding-left: 0; text-decoration: underline; }

.yac-invalido { border-color: #b32d2e !important; }

/* Fica no lugar do checkout enquanto ele esta dentro do modal, para poder
   devolve-lo a pagina quando o cliente fechar. */
.yac-marcador { display: none; }

.yac-carregando { padding: 40px 0; text-align: center; color: #6b7a90; }
.yac-erro { padding: 24px 0; text-align: center; }
.yac-erro p:first-child { color: #b32d2e; font-weight: 600; }

/* O checkout herda o visual do tema; so apertamos o espacamento no modal. */
.yac-checkout .woocommerce-billing-fields h3,
.yac-checkout #order_review_heading { font-size: 17px; margin: 0 0 12px; }
.yac-checkout .form-row { margin-bottom: 12px; }

@media (max-width: 600px) {
	.yac-modal {
		padding: 22px 16px 26px;
		border-radius: 0;

		/* Sem desconto de margem aqui: no celular a caixa ocupa a tela toda.
		   O dvh e o que importa (ver nota no fim do arquivo); o vh fica como
		   reserva para navegador antigo que nao conhece dvh. */
		max-height: 100vh;
		max-height: 100dvh;
		height: 100dvh;
	}

	/* No celular o overlay nao rola: ele so posiciona. Se ele tambem for
	   rolavel, o gesto de arrastar pode ser capturado por ele em vez de pelo
	   modal, e o resultado e uma tela que parece travada. */
	.yac-overlay {
		padding: 0;
		overflow: hidden;
		align-items: stretch;
	}

	.yac-passos li { font-size: 11px; }
}

/* select2 (Tipo de Pessoa, Pais, Estado) por cima do modal.

   O select2 pendura a lista de opcoes direto no <body>, fora do .yac-modal, e
   com z-index bem abaixo do overlay (100000). Sem isto a lista abre ATRAS do
   modal: no desktop da para digitar e apertar Enter sem ver nada, no celular
   parece que o campo simplesmente nao abre.

   Preso a body.yac-travado (classe que so existe com o modal aberto) para nao
   mudar o empilhamento do select2 no resto do site. */
body.yac-travado .select2-container,
body.yac-travado .select2-dropdown {
	z-index: 100010;
}

/* ---------------------------------------------------------------------------
   Nota sobre 100vh no iOS (bug relatado num iPhone real, nao em emulador)
   ---------------------------------------------------------------------------
   No Safari do iPhone, 100vh nao e a altura visivel: e a altura da tela com as
   barras do navegador RETRAIDAS. Num iPhone de 812px logicos, 100vh vale 812px,
   mas com a barra de endereco em cima e a de navegacao embaixo sobra por volta
   de 635px. Ou seja, "max-height: 100vh" nao limita nada -- a caixa fica mais
   alta que a area visivel, o proprio .yac-modal nunca precisa rolar, e a parte
   de baixo do formulario fica inalcancavel. Foi o que o Gustavo viu: conteudo
   de 1734px, "visivel" 812px, e nada rolava.

   100dvh (dynamic viewport height) e a altura realmente visivel, e ela se
   ajusta quando as barras aparecem e somem. Por isso a declaracao vem duas
   vezes: navegador que nao conhece dvh ignora a segunda linha e fica com o vh;
   quem conhece usa a segunda e sobrescreve a primeira.

   Junto com isso, tres coisas ajudam o gesto de arrastar a chegar no lugar
   certo: -webkit-overflow-scrolling: touch (Safari antigo), touch-action:
   pan-y (declara que o gesto vertical ali e rolagem) e tirar a rolagem do
   overlay no celular, para nao existir container rolavel aninhado.

   Nada disso se prova em emulador -- so num iPhone de verdade.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Etapa de pagamento em abas (item 5)
   ---------------------------------------------------------------------------
   So apresentacao. Os <input type="radio"> nativos continuam no DOM, com os
   mesmos name/value/id, e continuam sendo o que o WooCommerce le. O que muda e
   que eles ficam invisiveis e quem aparece e a <label> -- que ja aponta para o
   radio pelo for=, entao clicar na aba marca o radio pelo caminho nativo do
   navegador, sem JS nenhum no meio.

   display:contents no <li> promove input, label e .payment_box a itens flex do
   proprio <ul>. Sem isso a caixa do gateway ficaria presa dentro da largura de
   uma aba (1/3 da linha). Com isso ela vira uma faixa de largura total abaixo
   da barra, que e o desenho do esboco.
   --------------------------------------------------------------------------- */
.yac-modal .wc_payment_methods {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border-bottom: 2px solid #e3e8ef;
}

.yac-modal .wc_payment_methods > li.wc_payment_method { display: contents; }

/* Fora da vista, dentro do formulario. Nunca display:none: campo com
   display:none continua enviado, mas para de receber foco por teclado. */
.yac-modal .wc_payment_methods > li > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.yac-modal .wc_payment_methods > li > label {
	flex: 1 1 0;
	min-width: 92px;
	margin: 0;
	padding: 13px 8px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7a90;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s, border-color 0.15s;
}

.yac-modal .wc_payment_methods > li > label:hover { color: var(--yac-azul-claro); }

.yac-modal .wc_payment_methods > li > input[type="radio"]:checked + label {
	color: var(--yac-azul);
	border-bottom-color: var(--yac-azul);
}

/* Foco por teclado precisa aparecer: o radio esta invisivel, entao o anel vai
   na aba. :focus-visible so acende na navegacao por teclado. */
.yac-modal .wc_payment_methods > li > input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--yac-azul-claro);
	outline-offset: -2px;
}

/* A caixa do gateway ocupa a linha inteira, depois de todas as abas.

   O SELETOR E LONGO POR NECESSIDADE, nao por gosto. Contra esta caixa existe

       .woocommerce-checkout #payment div.payment_box { padding: 1em; margin: ... }

   com (1,2,1). O seletor curto que estava aqui tinha (0,3,0) e perdia: o
   padding: 16px 0 4px e o margin: 0 NUNCA chegaram na tela desde que foram
   escritos -- computavam 14,72px nos quatro lados e 14,72px 0 de margem. O que
   sobrevivia daquela regra era so o flex e o order, porque o WooCommerce nao
   declara esses dois, e isso escondeu o resto.

   Os 14,72px laterais eram os que empurravam os campos do cartao 15px para
   dentro em relacao as abas PIX/BOLETO/CREDITO. Some o padding lateral, some o
   desalinhamento.

   Este e o terceiro lugar da mesma familia: regra escrita, regra perdida por
   especificidade, defeito atribuido a outra coisa. O background logo abaixo ja
   tinha precisado de !important pelo mesmo tipo de disputa, e o diagnostico da
   epoca parou no fundo em vez de olhar o padding e a margem do MESMO elemento.
   Quando uma declaracao nao chega na tela, conferir as vizinhas dela. */
body.yac-travado .yac-modal #payment .wc_payment_methods > li > div.payment_box {
	flex: 0 0 100%;
	order: 99;
	margin: 0;
	padding: 16px 0 4px;
	background: none;
	font-size: 14px;
}
.yac-modal .wc_payment_methods > li > .payment_box::before { display: none; }
.yac-modal .wc_payment_methods > li > .payment_box p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Cupom dentro do formulario (item 7)
   ---------------------------------------------------------------------------
   A barra "Tem um cupom?" do WooCommerce fica FORA do form.checkout, e o modal
   move so o form. Resultado de hoje: com o modal aberto a barra fica atras do
   overlay e ninguem consegue aplicar cupom. Isso e bug, nao estetica.

   O formulario nativo de cupom continua existindo, intacto, com o nonce dele --
   ele so sai de vista. Quem aparece e o campo discreto abaixo, que repassa o
   valor para ele e dispara o submit nativo.
   --------------------------------------------------------------------------- */
body.yac-travado .woocommerce-form-coupon-toggle,
body.yac-travado form.checkout_coupon { display: none !important; }

.yac-cupom { margin: 18px 0 4px; }

.yac-cupom-rotulo {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a97a8;
}

.yac-cupom-linha { display: flex; gap: 8px; }

.yac-cupom-linha input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.yac-cupom-aplicar {
	flex: 0 0 auto;
	border: 1px solid var(--yac-azul);
	background: none;
	color: var(--yac-azul);
	border-radius: 6px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.yac-cupom-aplicar:hover,
.yac-cupom-aplicar:focus-visible {
	background: var(--yac-azul-claro);
	border-color: var(--yac-azul-claro);
	color: #fff;
}
.yac-cupom-aplicar[disabled] { opacity: 0.5; cursor: default; }

.yac-cupom-aviso { margin: 8px 0 0; font-size: 13px; color: #b32d2e; }

/* Botao nativo de finalizar: a cor vem do Divi, aqui dentro passa a ser a
   institucional. So dentro do modal. */
.yac-modal #place_order {
	background: var(--yac-azul);
	border-color: var(--yac-azul);
	color: #fff;
	width: 100%;
}
.yac-modal #place_order:hover,
.yac-modal #place_order:focus-visible {
	background: var(--yac-azul-claro);
	border-color: var(--yac-azul-claro);
	color: #fff;
}

@media (max-width: 600px) {
	/* Tres abas na largura do celular: fonte menor antes de quebrar linha. */
	.yac-modal .wc_payment_methods > li > label {
		min-width: 0;
		padding: 12px 4px;
		font-size: 12px;
		letter-spacing: 0.02em;
	}
	.yac-cupom-linha { flex-direction: column; }
	.yac-cupom-aplicar { padding: 12px 18px; }
}

/* ---------------------------------------------------------------------------
   Ordem dos campos (item 3) — enforcada aqui, e nao so no PHP
   ---------------------------------------------------------------------------
   O PHP ja entrega a ordem certa: conferido buscando o HTML cru de
   /finalizar-compra/, que sai nome, e-mail, WhatsApp, tipo de pessoa, CPF,
   empresa, CNPJ, pais, CEP, numero.

   So que no navegador a ordem sai outra. Algum JS de terceiro (o Brazilian
   Market mexe justamente nesses campos) reordena o wrapper depois do
   carregamento -- medido comparando o HTML do servidor com o DOM final.

   Brigar por prioridade no PHP nao resolve um reordenamento que acontece
   depois, no DOM. A ordem visual entao e fixada por flex order, que independe
   da posicao dos nos. Escopo no .yac-modal: o resto do site nao muda.
   --------------------------------------------------------------------------- */
.yac-modal .woocommerce-billing-fields__field-wrapper {
	display: flex;
	flex-direction: column;
}

/* Campo novo que apareca um dia, sem order proprio, vai para o fim em vez de
   pular para o topo (flex usa 0 por padrao, e 0 vem antes de 10). */
.yac-modal .woocommerce-billing-fields__field-wrapper > .form-row { order: 500; }

.yac-modal #billing_persontype_field { order: 10; }
.yac-modal #billing_first_name_field { order: 20; }
.yac-modal #billing_email_field      { order: 30; }
.yac-modal #billing_phone_field      { order: 40; }
.yac-modal #billing_cpf_field        { order: 50; }
.yac-modal #billing_cnpj_field       { order: 60; }
.yac-modal #billing_country_field    { order: 70; }
.yac-modal #billing_postcode_field   { order: 80; }
.yac-modal #billing_number_field     { order: 90; }

/* Empilhado em coluna, meia-largura nao faz sentido e o float atrapalha. */
.yac-modal .woocommerce-billing-fields__field-wrapper > .form-row {
	float: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* O bloco de pagamento do WooCommerce vem com fundo cinza e um triangulo
   apontando para a opcao marcada -- desenho de lista, nao de abas. Dentro do
   modal ele fica liso.

   O !important e necessario: o fundo cinza vem de regra de terceiro com
   especificidade maior (o site tem YellowPencil, que gera CSS proprio). Fica
   preso ao .yac-modal, entao nao vaza para o checkout fora do modal. */
.yac-modal #payment,
.yac-modal #payment .payment_box,
.yac-modal #payment ul.payment_methods li { background: none !important; }
.yac-modal #payment .payment_box::before,
.yac-modal #payment div.payment_box::before { display: none !important; }
.yac-modal #payment ul.payment_methods { border-bottom: 2px solid #e3e8ef; }
.yac-modal #payment .place-order { padding: 0; }

/* Resposta do cupom, reinserida dentro do modal. */
.yac-cupom-aviso-wrap { margin: 14px 0 0; }
.yac-cupom-aviso-wrap ul { margin: 0; padding: 0; list-style: none; }
.yac-cupom-aviso-wrap .woocommerce-error li,
.yac-cupom-aviso-wrap .woocommerce-error { color: #b32d2e; font-size: 14px; }
.yac-cupom-aviso-wrap .woocommerce-message,
.yac-cupom-aviso-wrap .woocommerce-message li { color: var(--yac-azul); font-size: 14px; font-weight: 600; }


/* ---------------------------------------------------------------------------
   Rodape no fim da pagina enquanto o modal esta aberto
   ---------------------------------------------------------------------------
   Com o formulario movido para dentro do modal, o #main-content colapsa
   (medido: 208px numa janela de 836px) e o rodape sobe junto, parando no meio
   da tela. Com o overlay opaco isso nao aparecia; com o overlay translucido,
   aparece -- e e a primeira coisa que se ve por tras do blur.

   A estrutura do Divi aqui e
   #page-container > #et-boc > (header, #et-main-area > (#main-content, footer))
   entao a corrente de flex precisa descer os tres niveis: parar em
   #page-container nao empurraria nada, porque quem cresce e o avo do rodape.

   Tudo preso a body.yac-travado, que so existe com o modal aberto: o layout da
   propria pagina com o modal fechado, e o do resto do site, ficam intocados.
   --------------------------------------------------------------------------- */
body.yac-travado #page-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh; /* iOS: mesma razao da nota no fim deste arquivo */
}

body.yac-travado #et-boc,
body.yac-travado #et-main-area {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

/* flex-basis auto + grow: o miolo ocupa a sobra e empurra o rodape para baixo,
   sem encolher se o conteudo for maior que a tela. */
body.yac-travado #main-content { flex: 1 0 auto; }

@media (max-width: 600px) {
	/* Blur e caro em GPU e o celular e onde o modal mais pesa. Menos desfoque
	   aqui: o efeito continua legivel e o custo cai. */
	.yac-overlay {
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
}

/* Navegador sem backdrop-filter (Firefox antigo, WebView velha) nao mostra
   desfoque nenhum, e ai 0.72 deixa a pagina legivel demais atras do modal.
   Sem o desfoque, escurece mais para compensar. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.yac-overlay { background: rgba(10, 26, 47, 0.88); }
}

/* ---------------------------------------------------------------------------
   Rodada de retorno do cliente
   --------------------------------------------------------------------------- */

/* Dia e horario da turma no cartao do curso (item 4). Aparece nas duas etapas
   porque o cartao mora fora dos [data-etapa] -- e o que o cliente pediu: ver
   qual dia esta comprando tambem na hora de pagar. */
.yac-curso-quando { margin: 0 0 4px; font-size: 14px; color: #4a5768; }
.yac-curso-quando strong { color: #2b3a4d; }

/* Espaco entre o ultimo campo e o botao de avancar (item 7).
 *
 * O clear e o que resolve de verdade. O #customer_details do WooCommerce tem
 * duas colunas flutuantes -- dados a esquerda, observacoes a direita -- e o
 * .yac-nav e um irmao delas. Sem limpar os floats ele nao ia para baixo do
 * formulario: subia para o vao ao lado da coluna curta. Medido em 1385px de
 * largura: coluna de dados terminando em 1052px e o botao comecando em 499px,
 * ou seja, o botao ficava ao lado dos campos, nao embaixo deles.
 *
 * Em largura de celular as colunas empilham, o clear vira inofensivo e ninguem
 * nota -- foi por isso que passou no teste antes: eu conferi na largura errada.
 *
 * E padding, nao margin: elemento que limpa float tem a margem superior
 * absorvida pela clearance. Com margin-top: 22px o respiro media 0; com
 * padding-top: 22px mede 22 nas duas larguras. */
.yac-modal #customer_details .yac-nav {
	clear: both;
	margin-top: 0;
	padding-top: 22px;
}

/* Espaco entre o cupom e o botao de finalizar (item 7). */
.yac-modal .place-order .yac-cupom { margin-bottom: 22px; }

/* A mensagem de dados pessoais foi movida para depois do botao (item 6):
   afasta e diminui, porque ali ela e rodape e nao instrucao. */
.yac-modal .place-order .woocommerce-terms-and-conditions-wrapper {
	margin-top: 18px;
	font-size: 13px;
	color: #6b7a90;
}
.yac-modal .place-order .woocommerce-privacy-policy-text p { margin: 0; font-size: 13px; }

/* Etapa Pronto: bloco de confirmacao centralizado (item 8). */
.yac-modal .woocommerce-order > .woocommerce-notice,
.yac-modal .woocommerce-order > .woocommerce-thankyou-order-received,
.yac-modal .woocommerce-order .woocommerce-order-overview {
	text-align: center;
}

.yac-modal .woocommerce-order .woocommerce-order-overview {
	list-style: none;
	margin: 18px 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	border: 0;
}

.yac-modal .woocommerce-order .woocommerce-order-overview li {
	border: 0;
	margin: 0;
	padding: 0;
	float: none;
	font-size: 13px;
	color: #6b7a90;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.yac-modal .woocommerce-order .woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	color: var(--yac-azul);
	text-transform: none;
	letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   Avisos legiveis dentro do modal (item 1 da homologacao)
   ---------------------------------------------------------------------------
   Medido no staging: a lista de erros saia com texto rgb(255,255,255) sobre
   fundo rgb(246,245,248). Contraste 1,09:1, quando o minimo legivel e 4,5:1 --
   o cliente lia so os <strong>, que herdavam outra cor.

   A cor branca nao vem daqui: percorri a cadeia de ancestrais e o branco comeca
   no proprio .woocommerce-error (o pai esta em #666), ou seja, uma regra de
   terceiro que este arquivo nao consegue ler. Por isso fundo E cor sao
   declarados juntos: assim o contraste nao depende de quem ganha a briga do
   fundo.

   Contraste do que ficou, calculado e nao estimado:
     erro    #8a1f1f sobre #fdecea = 8,00:1  (AAA)
     sucesso #154569 sobre #eaf3fa = 8,96:1  (AAA)
   --------------------------------------------------------------------------- */
.yac-modal .woocommerce-error,
.yac-modal .woocommerce-error li,
.yac-modal .woocommerce-NoticeGroup .woocommerce-error,
.yac-modal .woocommerce-NoticeGroup .woocommerce-error li {
	color: #8a1f1f !important;
}

.yac-modal .woocommerce-error {
	background: #fdecea !important;
	border-top: 0;
	border-left: 3px solid #b32d2e;
	border-radius: 4px;
	list-style: none;
	margin: 0 0 18px;
	padding: 14px 16px;
	font-size: 14px;
}

.yac-modal .woocommerce-error li { margin: 0 0 4px; padding: 0; }
.yac-modal .woocommerce-error li:last-child { margin-bottom: 0; }
.yac-modal .woocommerce-error::before { display: none; }

.yac-modal .woocommerce-message,
.yac-modal .woocommerce-message li,
.yac-modal .woocommerce-info,
.yac-modal .woocommerce-info li {
	color: var(--yac-azul) !important;
}

.yac-modal .woocommerce-message,
.yac-modal .woocommerce-info {
	background: #eaf3fa !important;
	border-top: 0;
	border-left: 3px solid var(--yac-azul-claro);
	border-radius: 4px;
	list-style: none;
	margin: 0 0 18px;
	padding: 14px 16px;
	font-size: 14px;
	font-weight: 600;
}

.yac-modal .woocommerce-message::before,
.yac-modal .woocommerce-info::before { display: none; }

/* O aviso do cupom usa a mesma familia, entao herda o tratamento acima. */
.yac-cupom-aviso-wrap .woocommerce-error,
.yac-cupom-aviso-wrap .woocommerce-message { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Aviso por campo (item 3)
   --------------------------------------------------------------------------- */
.yac-erro-campo {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 600;
	color: #b32d2e;
	white-space: nowrap;
}

.yac-linha-invalida input,
.yac-linha-invalida select,
.yac-linha-invalida textarea,
.yac-modal .yac-invalido {
	border-color: #b32d2e !important;
}

/* ---------------------------------------------------------------------------
   Tela Pronto (item 4)
   --------------------------------------------------------------------------- */
.yac-pronto-titulo {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: var(--yac-azul);
	line-height: 1.3;
}

.yac-pronto-texto {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 400;
	color: #4a5768;
	line-height: 1.5;
}

/* Botao do boleto e o de copiar o Pix com o mesmo peso do botao principal:
   e a acao que falta para a inscricao valer. */
.yac-modal .woocommerce-order .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: var(--yac-azul) !important;
	border-color: var(--yac-azul) !important;
	color: #fff !important;
	border-radius: 6px;
	padding: 13px 22px;
	font-size: 15px;
}

.yac-modal .woocommerce-order .button:hover,
.yac-modal .woocommerce-order .button:focus-visible {
	background: var(--yac-azul-claro) !important;
	border-color: var(--yac-azul-claro) !important;
}

/* O resumo do pedido desce para depois da acao de pagamento (feito no JS):
   aqui ele so ganha cara de rodape. */
.yac-modal .woocommerce-order .woocommerce-order-overview { margin-top: 26px; }

/* ---------------------------------------------------------------------------
   Trio dia / horario / instrutor no cartao do curso
   ---------------------------------------------------------------------------
   Eram tres blocos com line-height de 27px e margem propria, o que dava
   aparencia de linha em branco entre eles. Aqui viram um grupo: mesma altura
   de linha, respiro pequeno entre as linhas e um respiro maior separando o
   grupo do que vem antes e depois.

   "Instrutor:" ganhou <strong> no template para ficar igual a "Dia:" e
   "Horario:" -- os tres rotulos com o mesmo peso. */
.yac-curso-quando,
.yac-curso-instrutor {
	margin: 0 0 2px;
	font-size: 14px;
	line-height: 1.4;
	color: #4a5768;
}

.yac-curso-quando strong,
.yac-curso-instrutor strong { color: #2b3a4d; font-weight: 700; }

.yac-curso-quando:first-of-type { margin-top: 10px; }
.yac-curso-instrutor { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Rodinha de carregamento dentro do modal
   ---------------------------------------------------------------------------
   O WooCommerce bloqueia o formulario no envio e o bloco de totais a cada
   update_checkout, com o blockUI. O veu branco aparece normal dentro do modal,
   mas a rodinha nao: a regra que a desenha esta escopada em

       .woocommerce .blockUI.blockOverlay::before

   e a cadeia de ancestrais aqui dentro e form.checkout > #yac-corpo >
   .yac-modal > #yac-overlay -- sem nenhum .woocommerce no caminho. Medido: o
   mesmo no clonado para dentro de um wrapper .woocommerce ganha content e
   animation; no lugar original os dois computam none.

   Resultado para quem compra: o formulario desbota 60% e nada mais acontece,
   o que se le como "nao fez nada" -- que era a reclamacao.

   Por que NAO resolver poendo a classe .woocommerce no modal: isso arrastaria
   todo o resto do CSS escopado em .woocommerce (do WooCommerce e do Divi) para
   dentro do modal, e mexeria num layout ja aprovado.

   Por que a rodinha e desenhada aqui em vez de reaproveitar a do WooCommerce:
   o url() do loader.svg e relativo A FOLHA em que a regra esta escrita.
   Copiada para este arquivo, apontaria para dentro do nosso plugin e nao
   resolveria. Borda girando nao depende de arquivo nenhum, e ainda sai na cor
   institucional.

   Pega os dois casos porque os dois overlays nascem dentro do modal: o do
   formulario no envio e o do bloco de totais no recalculo.
   --------------------------------------------------------------------------- */
.yac-modal .blockUI.blockOverlay::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 3px solid rgba(21, 69, 105, 0.25);
	border-top-color: var(--yac-azul);
	border-radius: 50%;
	animation: yac-girando 0.8s linear infinite;
}

@keyframes yac-girando { to { transform: rotate(360deg); } }

/* Quem pediu menos movimento no sistema ve um anel parado em vez da rodinha:
   continua sendo sinal de "estou trabalhando", sem animacao. */
@media (prefers-reduced-motion: reduce) {
	.yac-modal .blockUI.blockOverlay::before {
		animation: none;
		border-top-color: rgba(21, 69, 105, 0.25);
		border-left-color: var(--yac-azul);
	}
}

/* --- Dois da fila do cliente --- */

/* Respiro antes de "Detalhes do pagamento" e "Detalhes do pedido". */
.yac-modal .woocommerce-order section.woocommerce-order-details { margin-top: 30px; }
.yac-modal .woocommerce-order section.woocommerce-order-details:first-of-type { margin-top: 22px; }

/* Campos do cartao mais juntos, em qualquer largura.

   DUAS COISAS DERAM ERRADO AQUI, e as duas valem a leitura antes de encostar.

   A primeira: o bloco nasceu dentro de um @media (max-width: 600px) na 1.8.1,
   entao o desktop nunca foi atendido.

   A segunda, que a primeira escondia: nem no celular funcionava. Quem manda na
   linha e uma regra do proprio WooCommerce,

       .woocommerce-checkout #payment div.payment_box .form-row { margin: 0 0 1em; }

   que nao esta em media query nenhuma e tem um id na frente. Contra ela, tres
   classes perdem em qualquer largura -- e perdiam desde que este ajuste foi
   escrito. Medido: 14,72px em 1280px e 14,72px dentro da faixa da media query.
   O rotulo funcionava por acaso, porque ali o WooCommerce nao concorre.

   POR QUE ESPECIFICIDADE E NAO !important. Sao problemas diferentes com a
   mesma cara. O !important do #billing_company_field existe contra style
   INLINE, que nenhum seletor alcanca -- la nao ha escolha. Aqui e so uma regra
   de folha de estilo com um id a mais: da para ganhar sendo mais especifico, e
   ai a declaracao continua sobrescrevivel por quem vier depois. !important
   resolveria hoje e cobraria amanha, de quem precisar mexer nisso.

   O body.yac-travado nao e enfeite: e o que poe a conta acima da regra do
   WooCommerce sem inventar seletor, usando o mesmo escopo que o resto do modal
   ja usa. Tirar ele daqui devolve o bug, silenciosamente. */
body.yac-travado .yac-modal #payment div.payment_box .form-row {
	margin-bottom: 8px;

	/* O padding e que mandava, nao a margem.
	   .woocommerce-checkout #payment div.form-row { padding: 1em } -- 14,72px
	   em cima, embaixo e nos lados, porque 1em = o font-size da linha. O vao
	   que a pessoa enxerga entre um campo e o rotulo seguinte era
	   14,72 + margem + 14,72; mexer so na margem trocava 14,72 por 8 num
	   total de 44, e sobrava 37. A linha media 78px para um input de 24px.
	   Os lados tambem saem: eram eles que recuavam os campos do cartao em
	   relacao as abas PIX/BOLETO/CREDITO e ao texto do gateway logo acima. */
	padding: 0;
}
body.yac-travado .yac-modal #payment div.payment_box .form-row label { margin-bottom: 2px; }
body.yac-travado .yac-modal #payment div.payment_box p { margin-bottom: 8px; }

/* "Data de expiracao" e uma linha de formulario sem campo nenhum -- so o
   rotulo do par Mes/Ano que vem depois. Com a margem das outras linhas ela
   flutua no meio do nada, longe do que nomeia. Colada, volta a parecer o
   rotulo que e.

   :has() em vez de um id: o formulario e do gateway, e id de terceiro muda sem
   avisar. "Linha sem campo dentro" descreve o que a regra realmente quer.
   Onde :has() nao existir, a linha so mantem os 8px das outras -- degrada em
   espacamento, nunca em campo somido. */
body.yac-travado .yac-modal #payment div.payment_box .form-row:not(:has(input, select, textarea)) {
	margin-bottom: 2px;
}

/* Campo de quantidade de inscrições (só Pessoa Jurídica). */
.yac-modal #yac_inscricoes_field { order: 65; }
.yac-modal #yac_inscricoes { max-width: 140px; }

/* O "(opcional)" do WooCommerce nao vale para este campo: ele so existe em
   Pessoa Juridica, e ali sempre tem valor. Some no CSS, e nao no PHP, porque
   marcar o campo como required faria o WooCommerce cobra-lo tambem em Pessoa
   Fisica, onde ele nem aparece. */
.yac-modal #yac_inscricoes_field label .optional { display: none; }

/* Campo de empresa: existe no formulário, some da tela.
   Ele voltou porque o Brazilian Market exige billing_company em Pessoa
   Jurídica lendo o $_POST cru — sem o input, o valor que o servidor escrevia
   em posted_data não era visto e nenhuma compra de PJ passava. Quem preenche
   é o espelharEmpresa() no JS; aqui só se esconde.
   !important porque o próprio Brazilian Market dá .show() nessa linha em PJ,
   e display inline ganharia do seletor.
   Escopado ao modal de propósito: sem JS o modal não existe, e aí o campo
   aparece de verdade e dá para preencher à mão, em vez de travar a compra. */
.yac-modal #billing_company_field { display: none !important; }

/* Caixa de "Informação adicional".
   A altura vem do rows=8 no PHP, que acompanha o tamanho da fonte. O
   min-height aqui é seguro contra tema: uma regra de terceiro que declare
   height ou rows fixos em textarea passaria por cima do atributo, e o campo
   voltaria às duas linhas sem ninguém entender por quê — foi assim que o
   espaçamento do cartão ficou três versões no ar sem existir. 8em fica logo
   abaixo de oito linhas, então não briga com o rows; só impede o colapso.
   resize: vertical porque turma grande é o caso que motivou tudo isto. */
.yac-modal #order_comments {
	resize: vertical;
	min-height: 8em; /* celular: pouco abaixo das oito linhas do rows, so rede */
}

/* No computador as oito linhas sobram pouco e a coluna da direita fica quase
   vazia: medido em 1280px, 154px de caixa contra 579px (PF) e 650px (PJ) de
   coluna ao lado -- mais de 360px de nada embaixo do campo.

   O NUMERO NAO VEIO DA COLUNA, veio do uso. Daria para ir a 520/590px e
   emparelhar as duas colunas, que e mais ou menos o print do Binho, mas isso e
   desenhar pelo vazio: uma caixa de texto de trinta linhas em branco vira
   buraco. O pedido #80071 tem dez participantes, e nome + e-mail + telefone
   nesta largura ocupam cerca de duas linhas cada. Vinte linhas e o tamanho do
   conteudo real que o campo recebe. Sobra folga na coluna de proposito, e quem
   tiver turma maior puxa pelo resize.

   370px = 20 linhas EXATAS. A linha e 18px, medida por diferenca de
   scrollHeight com 40 e 60 linhas de conteudo (1088 - 728 = 360 para 20
   linhas) -- e nao os 19,25px de 154/8, que embutem os 10px de padding e
   borda. Com box-sizing: border-box: 370 - 4 - 4 - 1 - 1 = 360, e 360/18 = 20.
   Fechar em linha inteira evita a meia linha cortada na borda de baixo, que e
   o unico defeito visivel que uma altura em px consegue produzir aqui.

   min-height e nao height: e a MESMA propriedade redefinida por media query,
   em vez de duas regras diferentes disputando o mesmo elemento. Assim so ha um
   lugar onde a altura minima e decidida, em qualquer largura.

   981px, e nao 768px: o breakpoint segue as COLUNAS, nao o tamanho da tela. O
   Divi empilha em max-width: 980px, entao as duas colunas so existem a partir
   de 981px. Com 769px havia uma faixa de 212px -- tablet, e janela de
   navegador nao maximizada -- onde o formulario ja estava empilhado e a caixa
   ja tinha crescido: exatamente o buraco que esta altura existe para evitar,
   aparecendo onde ninguem tinha olhado. A caixa cresce quando ha uma coluna
   vazia do lado, nao quando a tela e grande. */
@media (min-width: 981px) {
	.yac-modal #order_comments { min-height: 370px; }
}

/* Asterisco de obrigatório sem o pontilhado do navegador.
   O <abbr title> ganha um underline pontilhado da folha de estilo padrão do
   navegador, e por isso aparece igual no computador e no celular. Só os campos
   do Brazilian Market usam <abbr>; os outros já saem limpos, então o pontinho
   marcava uns campos e não outros sem querer dizer nada.
   O title fica: é ele que diz "obrigatório" a quem usa leitor de tela. */
.yac-modal .form-row label abbr[title] {
	text-decoration: none;
	border-bottom: 0;
	cursor: inherit;
}

/* Aviso de quando o acompanhamento do Pix desiste de perguntar sozinho.
   Aparece só depois do teto de tentativas: até lá a tela se atualiza sem que
   ninguém precise fazer nada. */
.yac-modal .yac-status-parou {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid #e3e8ef;
	border-radius: 8px;
	background: #f5f8fc;
	font-size: 14px;
	color: #4a5768;
}
.yac-modal .yac-status-atualizar {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--yac-azul);
	text-decoration: underline;
	cursor: pointer;
}
.yac-modal .yac-status-atualizar:hover { color: var(--yac-azul-claro); }