/* ==========================================================================
   Platty Microcredentials — ajustes sobre o checkout de quatro passos.

   Fica em arquivo separado, e não no pmc-course.css, por causa da ordem de
   carga: este arquivo declara pcs-checkout como dependência, então o
   WordPress garante que ele venha DEPOIS da folha do plugin de base. No
   pmc-course.css isso dependia de sorte — na página da cesta a ordem virava
   e a paleta da IHTE perdia para o azul-petróleo do plugin de origem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MC-042 — os selos do item no checkout e na cesta.

   Os dois selos entram pelo woocommerce_get_item_data, que o WooCommerce
   imprime como <dl class="variation"> com rótulo e valor. No produto de
   origem isso é "Date: … Time: …", e o rótulo faz falta. Aqui o valor já se
   explica sozinho ("Self-paced", "Certificate included"), então o rótulo sai
   da tela e o valor vira selo, como no desenho.

   O rótulo é escondido por posicionamento, não por display:none: ele continua
   a ser lido pelo leitor de tela, que é o que dá sentido ao par.
   -------------------------------------------------------------------------- */
.pcs-item__meta dl.variation { gap: 8px; align-items: center; }

.pcs-item__meta dl.variation dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pcs-item__meta dl.variation dd {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(59, 68, 181, .08);
  color: var(--pmc-azul, #3b44b5);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   MC-042 — o checkout de quatro passos na paleta da IHTE.

   O plugin de base declara a paleta dele em variáveis, com o comentário de
   que é para sobrescrevê-las. É o que fazemos: um bloco só, e o checkout
   inteiro passa a falar a língua do site, sem editar nada lá dentro.
   -------------------------------------------------------------------------- */
.pcs {
  --pcs-teal: #3b44b5;
  --pcs-teal-dark: #2f3691;
  --pcs-teal-soft: #eceefb;
  --pcs-ink: #12143a;
  --pcs-body: #5b6080;
  --pcs-muted: #8a8fae;
  --pcs-line: #e4e6f2;
}

/* O tema pinta TODO <button> de azul, com regra de alta especificidade. As
   abas dos passos são botões, então nasciam azul sobre azul: o rótulo do
   passo inativo ficava ilegível. Aqui elas voltam a ser texto puro, que é o
   que o plugin de base desenha. */
.pcs .pcs__tab,
.pcs .pcs__tab:hover,
.pcs .pcs__tab:focus {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* O botão de remover o item é só um ícone: o tema o pintava de azul, e a
   lixeira vermelha sumia dentro dele. O plugin de base já pede fundo nenhum,
   mas a folha dele carrega ANTES da do tema, então perde no desempate. */
.pcs .pcs-item__remove,
.pcs .pcs-item__remove:hover,
.pcs .pcs-item__remove:focus {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pcs .pcs-item__remove:hover { background: #fdecec !important; }

/* --------------------------------------------------------------------------
   MC-041 — a página da cesta.

   A marcação é a mesma do passo 1 do checkout, então quase todo o desenho já
   vem da folha do plugin de base. O que falta aqui é só a grade de duas
   colunas, que lá é feita pelo .pcs__layout do formulário.
   -------------------------------------------------------------------------- */
.pmc-cesta-pagina { padding-block: 8px 56px; }

.pmc-cesta-pagina__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .pmc-cesta-pagina__grade { grid-template-columns: minmax(0, 1fr); }
}

.pmc-cesta-pagina__cupom { margin: 0; }

/* O avançar é um link, não um botão: precisa se comportar como bloco para
   ocupar a largura do resumo, o que o .pcs-btn sozinho não garante em <a>. */
.pmc-cesta-pagina__avancar {
  display: flex;
  width: 100%;
  margin-top: 20px;
  justify-content: center;
}

/* O remover também virou link nesta página, pelo mesmo motivo do nonce; o
   plugin de base o desenha como <button>, então falta o alinhamento. */
.pmc-cesta-pagina .pcs-item__remove {
  display: grid;
  place-items: center;
  color: #e5484d;
  text-decoration: none;
}

.pmc-cesta-pagina .pcs-item__title a { color: inherit; text-decoration: none; }
.pmc-cesta-pagina .pcs-item__title a:hover { text-decoration: underline; }

/* O tema sublinha todo <a> e pinta o texto de azul. Na cesta, "Proceed to
   checkout" e "Continue shopping" são links com cara de botão: o sublinhado
   os denunciava, e o azul do tema sobre o azul do botão apagava o rótulo.
   A cor do plugin de base existe, mas a folha dele carrega antes da do tema
   e perde no desempate — esta carrega depois das duas. */
.pcs a.pcs-btn,
.pcs a.pcs-btn:hover,
.pcs a.pcs-item__remove { text-decoration: none !important; }

.pcs a.pcs-btn--primary,
.pcs a.pcs-btn--primary:hover,
.pcs a.pcs-btn--primary:focus { color: #fff !important; }

.pcs a.pcs-btn--ghost,
.pcs a.pcs-btn--ghost:hover,
.pcs a.pcs-btn--ghost:focus { color: var(--pcs-ink) !important; }

/* --------------------------------------------------------------------------
   MC-047 — o aceite dos termos no passo de confirmação.

   O plugin de base move o bloco .place-order do WooCommerce para dentro do
   passo 4, mas nunca o desenhou: no produto de origem não havia página de
   termos configurada, então o bloco chegava vazio. Com os termos ligados ele
   aparece cru, e ainda herda o corpo de 32px do tema.
   -------------------------------------------------------------------------- */
.pcs .pcs-place-order {
  margin-top: 20px;
  padding: 20px 24px;
  border: 1px solid var(--pcs-line);
  border-radius: var(--pcs-radius);
  background: var(--pcs-surface);
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.pcs .pcs-place-order p { margin: 0 0 12px; font-size: 14px !important; line-height: 1.55 !important; }
.pcs .pcs-place-order p:last-child { margin-bottom: 0; }

/* O plugin de base esconde o aviso de privacidade do WooCommerce. Aqui ele
   volta: a loja vende para o Reino Unido e para a Europa, e a hora de dizer
   como o dado sera usado e a hora de pedir o dado. Fica pequeno e discreto,
   acima do aceite. */
.pcs .pcs-place-order .woocommerce-privacy-policy-text {
  display: block !important;
  color: var(--pcs-body);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--pcs-line);
}

.pcs .pcs-place-order .woocommerce-privacy-policy-text p { font-size: 13px !important; }
.pcs .pcs-place-order .woocommerce-privacy-policy-text a { color: var(--pcs-teal); }

/* A caixa e o texto na mesma linha, com o texto alinhado pelo topo: em duas
   linhas ele não pode subir acima da caixa. */
.pcs .pcs-place-order .form-row.validate-required,
.pcs .pcs-place-order label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.pcs .pcs-place-order input#terms {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--pcs-teal);
  cursor: pointer;
}

.pcs .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--pcs-ink);
}

.pcs .woocommerce-terms-and-conditions-checkbox-text a {
  color: var(--pcs-teal);
  text-decoration: underline;
}

/* O asterisco de obrigatório vinha vermelho e do tamanho do texto, roubando a
   atenção de uma frase que já é curta. */
.pcs .pcs-place-order .required {
  color: var(--pcs-muted);
  text-decoration: none;
  font-size: 14px !important;
}

/* O botao nativo NAO recebe display:none aqui de proposito: o plugin de base
   ja o tira de vista por posicionamento, e escondê-lo de verdade quebraria o
   proxy do "Finish purchase" e o JS do gateway que escuta nele. */

/* O aviso de aceite pendente, ao lado da caixa. */
.pcs .pcs-place-order.pmc-termos--erro { border-color: var(--pcs-danger); }

.pcs .pmc-termos__aviso {
  margin: 10px 0 0 !important;
  color: var(--pcs-danger);
  font-size: 13px !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   O aviso do WooCommerce

   "Error and Correction has been added to your cart" saia com o visual de
   fabrica do nucleo: fundo #F6F5F8 — um cinza que nao existe no desenho, e a
   um passo do #F5F5F7 que existe —, tarja colorida em cima e um botao
   quadrado. Numa pagina de cartoes brancos com raio 20, ele era o unico
   elemento que denunciava que ali roda um WooCommerce.

   Achado pela varredura de cinzas de tests/fundos.spec.js.
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  padding: 20px 24px;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style: none;
}

/* A tarja colorida do nucleo e o ::before do icone saem: quem diz o que
   aconteceu e o texto. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-error { color: #b3261e; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  flex: none;
  order: 2;
  margin-left: auto;
  padding: 12px 24px;
  border: 1px solid #dddddd;
  border-radius: 500px;
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover { background: #f5f5f7; }

/* Em tela estreita o botao ocupa a linha inteira. Sem isto ele passava 22px
   da borda em 320 e a pagina rolava de lado — o aviso e o unico bloco do
   checkout com texto e botao na mesma linha. */
@media ( max-width: 600px ) {
  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button {
    flex: 1 1 100%;
    margin-left: 0;
    text-align: center;
  }
}


/* ==========================================================================
   checkout-for-me-figma — o checkout segundo o Figma 3815:2699

   Tudo por cima do platty-checkout-steps, que nao se edita. A geometria dele
   ja batia o desenho quase ao pixel (cartao do item 671x266, imagem 180x218,
   formulario com grelha 30/21): o que muda aqui e o que o desenho diz e ele
   nao dizia.
   ========================================================================== */

/* -- 1. As etapas (3815:2753)

   Inativas sao os mesmos chips brancos com texto preto, a 25% de opacidade —
   e assim no ficheiro, com `opacity: 0.25` no grupo. Antes as futuras vinham
   opacas e as ja feitas em cinzento: as tres pareciam botoes a clicar. */
.pcs .pcs__tab .pcs__tab-num,
.pcs .pcs__tab .pcs__tab-label,
.pcs .pcs__tab.is-done .pcs__tab-num,
.pcs .pcs__tab.is-done .pcs__tab-label {
	background: #FFFFFF;
	color: #000000;
}

.pcs .pcs__tab {
	opacity: .25;
	transition: opacity .2s ease;
}

.pcs .pcs__tab[aria-selected="true"] { opacity: 1; }

.pcs .pcs__tab[aria-selected="true"] .pcs__tab-num {
	background: #3B44B5;
	color: #FFFFFF;
	font-weight: 700 !important;
}

/* A ja concluida continua a poder ser clicada para voltar: ao passar o rato
   ela acende um pouco, para dizer isso sem precisar de uma cor so para ela. */
.pcs .pcs__tab.is-done:not([aria-selected="true"]):hover,
.pcs .pcs__tab.is-done:not([aria-selected="true"]):focus-visible { opacity: .6; }

/* No tablet a fileira do desenho (822px) nao cabe na coluna (705 a 850), e o
   plugin de base so traz a etapa atual para a vista abaixo de 768: no passo 4
   o chip "Confirmation" ficava cortado na borda. Com 14 de folga nos rotulos
   e 8 entre as etapas, as quatro cabem sem rolar. */
@media (min-width: 768px) and (max-width: 900px) {
	.pcs .pcs__tabs { gap: 8px; }
	.pcs .pcs__tab .pcs__tab-label { padding: 0 14px; }
}

/* -- 2. O cartao do item (3815:2784)

   As pilulas ficam presas ao pe do cartao, 12px acima da linha da duracao,
   como no desenho — e nao logo abaixo da descricao, onde subiam 44px quando
   a descricao cabia numa linha. */
.pcs .pcs-item__badges { margin-top: auto; }
.pcs .pcs-item__rodape { margin-top: 0; }

/* A descricao, no maximo em duas linhas: o cartao tem altura fixa no
   desenho, e uma frase comprida empurrava o preco para fora dele. */
.pcs .pcs-item__duration {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* A pilula da strand: a cor vem da regra que o PHP escreve para cada item
   (#pmc-checkout-strands); o caderno do desenho entra aqui, como mascara, e
   pinta-se com a cor do texto da pilula — branco no roxo, preto no laranja. */
.pcs .pcs-item__badges .pcs-badge:first-child:not(:only-child)::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12.9375 7.875C12.9375 8.02418 12.8782 8.16726 12.7727 8.27275C12.6673 8.37824 12.5242 8.4375 12.375 8.4375H7.875C7.72582 8.4375 7.58274 8.37824 7.47725 8.27275C7.37176 8.16726 7.3125 8.02418 7.3125 7.875C7.3125 7.72582 7.37176 7.58274 7.47725 7.47725C7.58274 7.37176 7.72582 7.3125 7.875 7.3125H12.375C12.5242 7.3125 12.6673 7.37176 12.7727 7.47725C12.8782 7.58274 12.9375 7.72582 12.9375 7.875ZM12.375 9.5625H7.875C7.72582 9.5625 7.58274 9.62176 7.47725 9.72725C7.37176 9.83274 7.3125 9.97582 7.3125 10.125C7.3125 10.2742 7.37176 10.4173 7.47725 10.5227C7.58274 10.6282 7.72582 10.6875 7.875 10.6875H12.375C12.5242 10.6875 12.6673 10.6282 12.7727 10.5227C12.8782 10.4173 12.9375 10.2742 12.9375 10.125C12.9375 9.97582 12.8782 9.83274 12.7727 9.72725C12.6673 9.62176 12.5242 9.5625 12.375 9.5625ZM15.75 3.375V14.625C15.75 14.9234 15.6315 15.2095 15.4205 15.4205C15.2095 15.6315 14.9234 15.75 14.625 15.75H3.375C3.07663 15.75 2.79048 15.6315 2.5795 15.4205C2.36853 15.2095 2.25 14.9234 2.25 14.625V3.375C2.25 3.07663 2.36853 2.79048 2.5795 2.5795C2.79048 2.36853 3.07663 2.25 3.375 2.25H14.625C14.9234 2.25 15.2095 2.36853 15.4205 2.5795C15.6315 2.79048 15.75 3.07663 15.75 3.375ZM3.375 14.625H5.0625V3.375H3.375V14.625ZM14.625 14.625V3.375H6.1875V14.625H14.625Z' fill='%23000'/%3E %3C/svg%3E") center / 18px 18px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12.9375 7.875C12.9375 8.02418 12.8782 8.16726 12.7727 8.27275C12.6673 8.37824 12.5242 8.4375 12.375 8.4375H7.875C7.72582 8.4375 7.58274 8.37824 7.47725 8.27275C7.37176 8.16726 7.3125 8.02418 7.3125 7.875C7.3125 7.72582 7.37176 7.58274 7.47725 7.47725C7.58274 7.37176 7.72582 7.3125 7.875 7.3125H12.375C12.5242 7.3125 12.6673 7.37176 12.7727 7.47725C12.8782 7.58274 12.9375 7.72582 12.9375 7.875ZM12.375 9.5625H7.875C7.72582 9.5625 7.58274 9.62176 7.47725 9.72725C7.37176 9.83274 7.3125 9.97582 7.3125 10.125C7.3125 10.2742 7.37176 10.4173 7.47725 10.5227C7.58274 10.6282 7.72582 10.6875 7.875 10.6875H12.375C12.5242 10.6875 12.6673 10.6282 12.7727 10.5227C12.8782 10.4173 12.9375 10.2742 12.9375 10.125C12.9375 9.97582 12.8782 9.83274 12.7727 9.72725C12.6673 9.62176 12.5242 9.5625 12.375 9.5625ZM15.75 3.375V14.625C15.75 14.9234 15.6315 15.2095 15.4205 15.4205C15.2095 15.6315 14.9234 15.75 14.625 15.75H3.375C3.07663 15.75 2.79048 15.6315 2.5795 15.4205C2.36853 15.2095 2.25 14.9234 2.25 14.625V3.375C2.25 3.07663 2.36853 2.79048 2.5795 2.5795C2.79048 2.36853 3.07663 2.25 3.375 2.25H14.625C14.9234 2.25 15.2095 2.36853 15.4205 2.5795C15.6315 2.79048 15.75 3.07663 15.75 3.375ZM3.375 14.625H5.0625V3.375H3.375V14.625ZM14.625 14.625V3.375H6.1875V14.625H14.625Z' fill='%23000'/%3E %3C/svg%3E") center / 18px 18px no-repeat;
}

/* "Estimated duration: **5 Hours**" — o numero em negrito, pelo pmc-checkout.js. */
.pcs .pcs-item__estimativa strong { font-weight: 600; }

/* A lixeira (3815:2793) fica dentro da folga do cartao, na linha de
   "Microcredentials", e nao colada ao canto. Uma regra antiga do plugin de
   base ainda a posiciona em absoluto contra o cartao inteiro; aqui a
   referencia passa a ser o bloco do titulo. Categoria e titulo deixam o
   espaco dela livre; a descricao continua com a largura toda, como no
   desenho. */
.pcs .pcs-item__topo { position: relative; }

.pcs .pcs-item__topo > .pcs-item__remove {
	top: 0;
	right: 0;
}

.pcs .pcs-item__topo .pcs-item__eyebrow,
.pcs .pcs-item__topo .pcs-item__title { padding-right: 40px; }

/* -- 3. A coluna de cada passo: 20px entre os blocos ("Left column" dos
   quatro passos) e os botoes 32px abaixo do ultimo cartao (3815:2823). O
   plugin de base usava 16 entre os blocos. */
.pcs .pcs__panel { gap: 20px; }
.pcs .pcs__panel > .pcs-actions { margin-top: 12px; }

/* O resumo cola 20px abaixo do cabecalho fixo do site, e nao 20px abaixo do
   topo da janela, por baixo dele. A altura do cabecalho vem do
   pmc-checkout.js. */
.pcs .pcs-summary { top: calc(var(--pmc-cabecalho, 0px) + 20px); }

/* Os dois botoes tem 48 de altura no desenho. O plugin de base dava 46 ao
   azul, por nao ter a borda de 1px do branco. */
.pcs .pcs-actions a.pcs-btn--primary,
.pcs .pcs-actions button.pcs-btn--primary,
.pcs .pcs-actions .pcs-btn--primary { height: 48px !important; }

/* No tablet os botoes tem a largura do texto, como no desktop, mas o plugin
   de base prende a seta na borda (absolute, a 20px) de 1023px para baixo —
   regra pensada para o botao de largura toda do telemovel. Aqui a seta
   passava por cima do texto. Volta ao fluxo, a 12px dele, como no desenho. */
@media (min-width: 768px) and (max-width: 1023px) {
	.pcs .pcs-actions .pcs-btn__icon { position: static; }
}

/* -- 4. Para quem e a compra (4159:1970)

   O pmc-checkout.js traz isto para cima do cartao de cobranca; sem JS fica
   dentro dele, no fim. Os 20 ate ao cartao sao o vao do painel. */
.pmc-perfil {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* Todos os estados juntos: o kit do Elementor pinta `button`. */
.pcs .pmc-perfil .pmc-perfil__opcao,
.pcs .pmc-perfil .pmc-perfil__opcao:hover,
.pcs .pmc-perfil .pmc-perfil__opcao:focus,
.pcs .pmc-perfil .pmc-perfil__opcao:active {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 47px;
	padding: 9px 24px;
	border: 1px solid #CECECE;
	border-radius: 30px;
	background: #FFFFFF;
	box-shadow: none;
	color: #000000;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 27px;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.pcs .pmc-perfil .pmc-perfil__opcao.is-ativo,
.pcs .pmc-perfil .pmc-perfil__opcao.is-ativo:hover,
.pcs .pmc-perfil .pmc-perfil__opcao.is-ativo:focus {
	border-color: #3B44B5;
	background: #3B44B5;
	color: #FFFFFF;
}

.pcs .pmc-perfil .pmc-perfil__opcao:focus-visible {
	outline: 2px solid #3B44B5;
	outline-offset: 2px;
}

/* Business ainda nao existe: visivel, para quem vem de empresa saber que
   vai existir, mas sem se fingir clicavel. */
.pcs .pmc-perfil .pmc-perfil__opcao[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.pmc-perfil__opcao svg {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

/* Dentro do cartao (sem JS), o seletor fica em baixo e precisa de ar. */
.pcs-card .pmc-perfil { margin: 32px 0 0; }

/* Compra de empresa (PMC_Vagas, 28/09): o que acontece depois do pagamento,
   e o aviso de "uma vaga por curso" na compra para si. */
.pmc-perfil__nota {
	flex: 1 0 100%;
	margin: 4px 0 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--pcs-teal-soft, #eceefb);
	color: var(--pcs-ink, #12143a);
	font-size: 15px;
	line-height: 1.5;
}

.pmc-perfil__nota[hidden] { display: none; }

.pmc-perfil__nota--erro {
	background: #fdecef;
	color: #8a1631;
}

/* Erro do "Continue" do passo 02 (pcs_step_errors): ocupa a linha inteira e
   substitui a nota vermelha, que diria a mesma coisa duas vezes. */
.pmc-perfil > .pcs-error { flex: 1 0 100%; }
.pmc-perfil.pcs-invalid [data-pmc-perfil-nota="varias"] { display: none !important; }

/* Nome da empresa e VAT: so com "For Business". O JS tira o `hidden` da
   linha; sem JS ficam visiveis, e o servidor so os exige com Business. */
.pcs .pcs-grid .form-row.pmc-campo-empresa[hidden] { display: none; }

/* Os icones dos dois campos, no mesmo mecanismo do plugin de base (mascara
   com a variavel --pcs-icon). */
.pmc-field--empresa { --pcs-icon: url("../img/checkout/buildings.svg"); }
.pmc-field--vat { --pcs-icon: url("../../../platty-checkout-steps/assets/icons/tag.svg"); }

/* -- 4b. O asterisco azul dos obrigatorios (3815:2989)

   "Full Name *" em preto com o asterisco em #3B44B5. A camada vem do
   pmc-checkout.js, que a senta onde o placeholder e escrito; o placeholder
   de verdade fica transparente por baixo. Com valor no campo, a camada sai. */
/* O plugin de base pinta o placeholder com `.pcs.pcs.pcs .pcs-grid .form-row
   input::placeholder` e !important: e preciso pesar mais. */
.pcs.pcs.pcs .pcs-grid .form-row input.pmc-com-dica::placeholder,
.pcs .pmc-com-dica::placeholder { color: transparent !important; opacity: 1; }

.pcs .pmc-dica {
	position: absolute;
	display: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #000000;
	pointer-events: none;
}

.pcs .pmc-com-dica:placeholder-shown + .pmc-dica { display: block; }

/* Nas listas (Country, Country Code) o plugin de base pinta tudo o que
   esta dentro da selecao de preto, com !important e peso (0,8,0). */
.pcs.pcs.pcs.pcs .pcs-grid .form-row .select2-container .select2-selection--single .pmc-dica__ast,
.pcs .pmc-dica__ast { color: #3B44B5 !important; }

/* -- 5. O pagamento (3815:3296 e 3815:3310)

   O fieldset do Stripe trazia a borda padrao do navegador — `2px groove` —,
   que era a caixa cinzenta a volta do cartao. */
.pcs #wc-stripe-upe-form,
.pcs fieldset.wc-payment-form {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* O titulo fica a 24 dos metodos e a 28 dos campos, e a frase de seguranca
   a 28 dos campos. O plugin de base dava 32 aos dois titulos e colava a
   frase no ultimo campo. */
.pcs .pcs__panel[data-pcs-panel="payment"] .pcs-card__head { margin-bottom: 24px; }
.pcs .pcs__panel[data-pcs-panel="payment"] .pcs-card--payment .pcs-card__head { margin-bottom: 28px; }
.pcs .pcs__panel[data-pcs-panel="payment"] .pcs-card--payment .pcs-secure { margin-top: 28px; }

/* O aviso de modo de teste do Stripe herdava os 32px do corpo do tema e
   ocupava meia tela. E so do ambiente de teste (em producao nao aparece),
   mas no dev e onde a cliente revê o fluxo. */
.pcs .payment_box p,
.pcs .payment_box .testmode-info,
.pcs .wc-stripe-upe-description,
.pcs .payment_method_stripe > .payment_box > p {
	margin: 0 0 20px;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 21px !important;
	color: #4C4C4C;
}

.pcs .payment_box p strong,
.pcs .payment_box .testmode-info strong { font-weight: 600; color: #000000; }

/* ...e sai da tela: no dev a equipa testa o fluxo como ele vai ser em
   producao, onde o aviso nao existe. O paragrafo e irmao do fieldset do
   cartao, nao o embrulha — o iframe do Stripe nao e tocado. */
.pcs .payment_box .testmode-info { display: none !important; }

.pcs .payment_box a { color: #3B44B5; }

/* As carteiras do Stripe: as pilulas que o gateway desenha dentro dos
   iframes, lado a lado com a do cartao, como no desenho (3815:3298). */
.pcs [data-pcs-wallets] #wc-stripe-express-checkout-element {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Tablet e desktop: tudo numa linha so (3815:3298) — o cartao primeiro, as
   carteiras a dividir o resto. O iframe do Stripe nasce com 300px e
   empurrava-as para a linha de baixo, e o plugin de base empilhava tudo,
   uma por linha, ate 1023px.

   As pilulas nao tem a largura do desenho (92px): o Stripe so desenha o
   botao a partir de ~150px. Com 100px o Apple Pay nao aparecia e o Google
   Pay saia cortado, uma bolha preta.

   No telemovel fica como o plugin de base faz — uma por linha, largas —, que
   e o que ja estava certo ali. */
@media (min-width: 768px) {
	.pcs .pcs-methods {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.pcs .pcs-method--gateway {
		order: 0;
		flex: 0 0 auto;
		width: auto;
	}

	.pcs .pcs-methods__wallets {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}

	.pcs [data-pcs-wallets] #wc-stripe-express-checkout-element {
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}

	.pcs [data-pcs-wallets] #wc-stripe-express-checkout-element > div {
		flex: 1 1 150px;
		width: auto;
		min-width: 150px;
	}
}

/* Tablet: as tres pilulas com a mesma largura. O cartao ganha uma parte da
   linha e as carteiras uma parte cada — quantas houver (o Android nao tem
   Apple Pay, o Firefox pode nao ter nenhuma). Sem carteira, o cartao fica
   com a linha toda.

   Para as partes sairem iguais, o cartao perde a folga lateral (o texto ja
   vem centrado) e a base das carteiras e so o vao de 10px entre elas. */
@media (min-width: 768px) and (max-width: 1023px) {
	.pcs .pcs-methods .pcs-method--gateway {
		flex: 1 1 0;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.pcs .pcs-methods__wallets { flex: 0 0 0; }
	.pcs .pcs-methods__wallets:has(#wc-stripe-express-checkout-element > div) { flex: 1 1 0; }
	.pcs .pcs-methods__wallets:has(#wc-stripe-express-checkout-element > div:nth-child(2)) { flex: 2 1 10px; }
	.pcs .pcs-methods__wallets:has(#wc-stripe-express-checkout-element > div:nth-child(3)) { flex: 3 1 20px; }
}

/* De 1024 a 1100px o layout ja tem duas colunas e a do pagamento fica
   estreita: as carteiras quebravam a meio, uma ao lado do cartao e a outra
   por baixo. Aqui vai uma por linha, com a largura toda, na ordem do
   desktop. */
@media (min-width: 1024px) and (max-width: 1100px) {
	.pcs .pcs-methods {
		flex-direction: column;
		align-items: stretch;
	}

	.pcs .pcs-method--gateway,
	.pcs .pcs-methods__wallets {
		flex: 0 0 auto;
		width: 100%;
	}

	.pcs [data-pcs-wallets] #wc-stripe-express-checkout-element {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.pcs [data-pcs-wallets] #wc-stripe-express-checkout-element > div {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
	}
}

/* -- 6. A revisao (3815:3791)

   O cartao do curso no passo 4 e o mesmo do passo 1 — o desenho nao o poe
   dentro de outro cartao, nem lhe da lapis de editar. O plugin de base
   embrulhava o clone num cartao com o lapis no canto, e os 24px de folga
   dele vem com !important. */
.pcs .pcs-card--review:has([data-pcs-review="order"]) {
	padding: 0 !important;
	border: 0;
	background: none;
	box-shadow: none;
}

.pcs .pcs-card--review:has([data-pcs-review="order"]) > .pcs-review__head--bare {
	display: none;
}

.pcs [data-pcs-review="order"] .pcs-items { margin: 0; }

/* "Review your entire purchase" fica a 20 do primeiro cartao, o vao do
   painel. O plugin de base somava mais 20 de margem. */
.pcs .pcs__panel[data-pcs-panel="confirmation"] .pcs-review__heading { margin: 0 !important; }

/* Os dados de cobranca em duas colunas tambem no tablet, como no desktop
   (pedido do Pedro): o plugin de base os poe numa coluna ate 900px, e no
   tablet sobrava metade do cartao vazia. Os pares e a ordem voltam aos do
   desenho — (nome, e-mail), (telefone, CEP), (endereco, cidade), (pais,
   regiao). No telemovel continua uma coluna so. */
@media (min-width: 768px) and (max-width: 900px) {
	.pcs .pcs-review__fields { flex-direction: row; }

	.pcs .pcs-review__fields > .pcs-review__field:nth-child(n) {
		flex: 0 0 calc((100% - 21px) / 2);
		order: 0;
	}
}

/* Cabecalho do cartao (titulo e lapis) a 24 do conteudo, e nao a 16. */
.pcs .pcs__panel[data-pcs-panel="confirmation"] .pcs-review__head { margin-bottom: 24px !important; }

/* A pilula do metodo: 48 de altura e 22 de folga lateral, sem borda. */
.pcs .pcs__panel[data-pcs-panel="confirmation"] .pcs-review__payment .pcs-method {
	padding: 14px 22px;
	border: 0;
}

/* "Important" e titulo de aviso, 20/600/26, a 10 do texto — nao titulo de
   cartao como os outros. */
.pcs .pcs__panel .pcs-card--note .pcs-note__title {
	margin: 0 0 10px !important;
	font-size: 20px !important;
	line-height: 26px !important;
}

/* O texto do aviso a 15px, e nao aos 16 do desenho (pedido do Pedro). */
.pcs .pcs__panel .pcs-card--note .pcs-note__text {
	font-size: 15px !important;
	line-height: 22px !important;
}

/* -- 7. O aceite dos termos (3815:3863): o seu proprio cartao, caixa de
   22px com raio 6. O texto e 15px e a nota de privacidade 13px, um pouco
   abaixo dos 16/14 do desenho (pedido do Pedro). */
.pcs .pcs-place-order {
	padding: 24px;
	border: 0;
	border-radius: 20px;
	background: #FFFFFF;
}

.pcs .pcs-place-order input#terms {
	width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 6px;
}

.pcs .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 15px !important;
	line-height: 22px !important;
	color: #000000;
}

.pcs .woocommerce-terms-and-conditions-checkbox-text a {
	color: #3B44B5;
	text-decoration: none;
}

.pcs .woocommerce-terms-and-conditions-checkbox-text a:hover { text-decoration: underline; }

/* Caixa de 22, 16 de vao e o texto numa coluna propria: a segunda linha
   alinha com a primeira, e nao por baixo da caixa. O `label.checkbox` do
   WooCommerce e `inline` com peso (0,3,2) — daqui o seletor comprido. A
   linha em si deixa de ser flex: o clearfix `::before` do .form-row virava
   item e empurrava tudo 10px. */
.pcs .pcs-place-order p.form-row.validate-required { display: block; }

/* Fonte zero no rotulo: o `&nbsp;` que o WooCommerce poe antes do asterisco
   virava item da grelha e abria uma segunda linha de 24px. O texto tem o
   tamanho dele proprio (acima). */
.pcs .pcs-place-order p.form-row label.woocommerce-form__label-for-checkbox {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 0 16px;
	align-items: start;
	margin: 0;
	font-size: 0;
	line-height: 0;
}

/* O asterisco sai da vista (o desenho nao o tem) mas fica para o leitor de
   ecra. */
.pcs .pcs-place-order p.form-row label .required {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* O aviso de dados pessoais faz de nota cinzenta do desenho, na coluna do
   texto: 13/19. */
.pcs.pcs .pcs-place-order .woocommerce-privacy-policy-text p {
	padding: 0;
	font-size: 13px !important;
	line-height: 19px !important;
}

/* -- 8. A verificacao com o banco (3815:3561)

   Aparece por cima do painel enquanto a compra e enviada, e muda para o
   texto do 3D Secure quando o Stripe abre a janela do banco. Por cima, e nao
   no lugar: o painel do pagamento nunca pode perder a altura (regra do
   plugin de base — o iframe do Stripe mede-se pelo pai). */
.pcs__panels { position: relative; }

/* O bloco sobreposto: o cartao e, por baixo, os dois botoes do desenho, a
   32 como nos outros passos. */
.pmc-verificando {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 5;
	display: none;
	flex-direction: column;
	gap: 32px;
}

.pcs[data-pmc-verificando] .pmc-verificando { display: flex; }

.pmc-verificando__cartao {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 48px 24px;
	border-radius: 20px;
	background: #FFFFFF;
	text-align: center;
}

/* O painel por baixo apaga, sem sumir e sem perder a altura. */
.pcs[data-pmc-verificando] .pcs__panel:not([data-pcs-inactive]) > * {
	opacity: 0;
	pointer-events: none;
}

.pmc-verificando__selo {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #EEF0FB;
	color: #3B44B5;
}

.pmc-verificando__selo svg { width: 34px; height: 34px; }

.pmc-verificando__titulo {
	margin: 0;
	font-size: 24px !important;
	font-weight: 600;
	line-height: 31px !important;
	color: #000000;
}

.pmc-verificando__texto {
	max-width: 511px;
	margin: 0;
	font-size: 16px !important;
	line-height: 24px !important;
	color: #4C4C4C;
}

.pmc-verificando__barra {
	position: relative;
	width: 100%;
	max-width: 480px;
	height: 6px;
	overflow: hidden;
	border-radius: 500px;
	background: #ECECF1;
}

.pmc-verificando__barra::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 40%;
	border-radius: 500px;
	background: #3B44B5;
	animation: pmc-verificando-anda 1.6s ease-in-out infinite;
}

@keyframes pmc-verificando-anda {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
	.pmc-verificando__barra::after { animation: none; }
}

.pmc-verificando__nota {
	margin: 0;
	font-size: 14px !important;
	line-height: 21px !important;
	color: #8C8C94;
}

/* "Verifying…": o azul apagado do desenho (3815:3710), sem clique. */
.pcs .pmc-verificando .pcs-btn--primary[disabled] {
	opacity: .4;
	cursor: default;
}

.pmc-verificando__roda {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: pmc-verificando-roda .8s linear infinite;
}

@keyframes pmc-verificando-roda { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.pmc-verificando__roda { animation: none; }
}

@media (max-width: 767px) {
	.pmc-verificando__cartao { padding: 36px 20px; gap: 20px; }
	.pmc-verificando__titulo { font-size: 20px !important; line-height: 27px !important; }
	.pmc-verificando__texto { font-size: 15px !important; line-height: 23px !important; }
}

/* -- 10. Revisao da designer (23/09/2026)

   Cesta vazia: o lugar do curso fica marcado — borda tracejada, fundo um
   pouco mais claro que a pagina, texto e botao ao centro, a altura do
   cartao de curso — e os botoes de passo saem: nao ha de onde voltar nem
   para onde avancar, so "Browse courses" (pedido do Pedro).

   "Nothing here yet." no tamanho do titulo do curso no cartao (22/600/29,
   preto), e "Browse courses" do tamanho dos outros botoes. */
.pcs .pcs-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	min-height: 266px;
	padding: 40px 24px;
	border: 1.5px dashed #CECECE;
	border-radius: 20px;
	background: rgba(255, 255, 255, .55);
	text-align: center;
}

.pcs .pcs__panel[data-pcs-panel="order"]:has(.pcs-empty) > .pcs-actions { display: none; }
.pcs .pcs-empty .pcs-empty__text {
	font-size: 22px !important;
	font-weight: 600;
	line-height: 29px !important;
	color: #000000;
}

.pcs .pcs-empty a.pcs-btn--ghost {
	height: 48px;
	min-height: 0;
	padding: 12px 28px;
	border: 1px solid #DDDDDD;
	border-radius: 500px;
	background: #FFFFFF;
	color: #000000 !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 22px !important;
}

/* Hover dos botoes de cada passo. O plugin de base tem hover, mas as regras
   de medida vieram depois com mais peso e apagavam-no: so o botao desligado
   (cesta vazia) mudava ao passar o rato. O azul escurece; o branco ganha a
   borda e o texto azuis, como os outros botoes vazados do site. */
.pcs .pcs-actions .pcs-btn,
.pcs .pcs-empty .pcs-btn,
.pcs .pcs-method--gateway {
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pcs .pcs-actions a.pcs-btn--primary:not([disabled]):hover,
.pcs .pcs-actions button.pcs-btn--primary:not([disabled]):hover,
.pcs .pcs-actions a.pcs-btn--primary:not([disabled]):focus-visible,
.pcs .pcs-actions button.pcs-btn--primary:not([disabled]):focus-visible {
	background: #2F3691;
	color: #FFFFFF;
}

.pcs .pcs-actions a.pcs-btn--ghost:hover,
.pcs .pcs-actions button.pcs-btn--ghost:hover,
.pcs .pcs-actions a.pcs-btn--ghost:focus-visible,
.pcs .pcs-actions button.pcs-btn--ghost:focus-visible,
.pcs .pcs-empty a.pcs-btn--ghost:hover,
.pcs .pcs-empty a.pcs-btn--ghost:focus-visible {
	border-color: #3B44B5;
	background: #FFFFFF;
	color: #3B44B5 !important;
}

/* A pilula "Credit / Debit Card" do passo 3 tambem responde ao rato. */
.pcs .pcs-methods .pcs-method--gateway:hover,
.pcs .pcs-methods .pcs-method--gateway:focus-visible {
	border-color: #2F3691;
	background: #2F3691;
	color: #FFFFFF;
}

/* As telas de espera saem da identidade de origem do plugin de base (verde
   agua) e ficam na da IHTE: fundo cinzento da pagina e roda azul. */
body.pcs-active {
	--pcs-teal: #3b44b5;
	--pcs-teal-dark: #2f3691;
	--pcs-teal-soft: #eceefb;
}

body.pcs-active .blockUI.blockOverlay {
	background: rgba(245, 245, 247, .92) !important;
}

body.pcs-active .blockUI.blockOverlay::before {
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	border: 4px solid #DDDDE3;
	border-top-color: #3B44B5;
	border-radius: 50%;
	background: none !important;
}

@media (max-width: 767px) {
	body.pcs-active .blockUI.blockOverlay::before {
		width: 48px;
		height: 48px;
	}
}

/* Compra por cartao: o cartao "Processing your payment" (secao 8) ja diz o
   que se passa. A camada do WooCommerce continua a travar os cliques, mas
   sem fundo nem roda por cima dele. */
body.pcs-active .pcs[data-pmc-verificando] .blockUI.blockOverlay {
	background: transparent !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.pcs-active .pcs[data-pmc-verificando] .blockUI.blockOverlay::before { content: none !important; }

/* Carteiras: a janela do Stripe vem por cima de tudo, com texto branco. A
   camada escurece como a do proprio Stripe, sem roda — a roda caia por baixo
   do texto dele, e o fundo claro apagava as letras. */
body.pcs-active.wc-stripe-ece-processing .blockUI.blockOverlay {
	background: rgba(40, 40, 40, .75) !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.pcs-active.wc-stripe-ece-processing .blockUI.blockOverlay::before { content: none !important; }

/* As listas de pais e de DDI tambem vinham em verde agua. */
body.pcs-active .select2-dropdown .select2-results__option--highlighted[aria-selected],
body.pcs-active .select2-dropdown .select2-results__option--highlighted {
	background-color: rgba(59, 68, 181, .08) !important;
	color: #3B44B5 !important;
}

body.pcs-active .select2-dropdown .select2-results__option[aria-selected="true"] {
	background-color: rgba(59, 68, 181, .05);
	color: #3B44B5;
}

body.pcs-active .select2-dropdown .select2-search__field:focus { border-color: #3B44B5; }

/* O aviso das carteiras sai do topo da pagina e vai para o resumo, por baixo
   do aviso do imposto (o pmc-checkout.js escreve-o la). */
body.pcs-active .ece-taxes-info { display: none !important; }

/* O resumo ja poe 20px entre os blocos: a segunda nota nao soma margem. */
.pcs .pcs-summary__nota + .pmc-nota-carteiras { margin-top: 0; }

/* -- 9. Telemovel

   O seletor de perfil ocupa a linha inteira, com as duas opcoes empilhadas:
   "For Business/Organisation" nao cabe ao lado de "For me" em 350px. */
/* A foto do curso volta ao inicio do cartao: a esquerda ate 601px, como no
   desktop, e em faixa no topo abaixo disso, como o plugin de base quer. Um
   `order: 2` que sobrou da grelha antiga de 767px mandava-a para a direita
   e, no telemovel, para baixo do texto. */
@media (max-width: 767px) {
	.pcs .pcs-item > .pcs-item__media { order: -1; }
}

/* A pilula da strand nunca quebra em duas linhas, como no catalogo e na
   pagina do curso (pedido do Pedro, 23/09/2026): "Inclusive Education and
   Learner Wellbeing" nao cabia em 294px a 14px. No telemovel desce para
   12px; se ainda nao couber, termina em reticencias. */
.pcs .pcs-item__badges .pcs-badge {
	max-width: 100%;
	white-space: nowrap;
}

.pcs .pcs-item__badges .pcs-badge > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 767px) {
	.pcs .pcs-item__badges .pcs-badge {
		font-size: 12px !important;
		line-height: 18px !important;
	}
}

/* O titulo "Checkout": encostado a esquerda, na mesma linha do resto da
   pagina. O tema (Hello Elementor) da 10px de folga lateral ao titulo da
   pagina abaixo de 576px, e so ele ficava 10px para dentro. */
body.woocommerce-checkout .page-header h1.entry-title { padding-inline: 0; }

/* No telemovel o titulo e de 42px, e nao os 54 do desktop (pedido do
   Pedro). O plugin de base fixa os 54 com !important. */
@media (max-width: 767px) {
	body.woocommerce-checkout .page-header h1.entry-title {
		font-size: 42px !important;
		line-height: 46px !important;
	}
}

@media (max-width: 600px) {
	/* Em coluna, o `flex: 1 0 100%` do erro vale para a ALTURA, e com wrap o
	   erro abria uma segunda coluna à direita dos botões: a página ganhava
	   rolagem lateral e o texto ficava fora da tela (relato 015, iPhone,
	   15/10). Sem wrap e sem a base de 100%, ele fica embaixo dos botões. */
	.pmc-perfil { flex-direction: column; flex-wrap: nowrap; }
	.pmc-perfil > .pcs-error { flex: 0 0 auto; width: 100%; }

	.pcs .pmc-perfil .pmc-perfil__opcao,
	.pcs .pmc-perfil .pmc-perfil__opcao:hover,
	.pcs .pmc-perfil .pmc-perfil__opcao:focus {
		justify-content: center;
		width: 100%;
		font-size: 16px;
	}
}

/* O banner de cookies no checkout. No resto do site ele é uma caixa de
   526 × 256 px no canto inferior esquerdo, exatamente onde ficam os botões
   de cada passo: sem resposta, escondia "Back to previous" e metade de
   "Continue to payment" (achado D-002 da rodada R001). Aqui ele vira uma
   barra baixa ao pé da tela, e a página ganha a altura dela em folga, para
   que nada fique por baixo sem poder ser rolado para cima. Só em telas
   largas: no telemóvel o banner já ocupa a largura toda. */
@media (min-width: 1025px) {
	body.woocommerce-checkout .cmplz-cookiebanner {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: none !important;
		max-height: 70vh;
		overflow-y: auto;
		border-radius: 0 !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-rows: auto !important;
		align-items: center;
		column-gap: 32px !important;
		row-gap: 8px !important;
		padding: 14px max(24px, calc((100vw - 1136px) / 2)) !important;
	}

	body.woocommerce-checkout .cmplz-cookiebanner .cmplz-header,
	body.woocommerce-checkout .cmplz-cookiebanner .cmplz-divider {
		display: none !important;
	}

	body.woocommerce-checkout .cmplz-cookiebanner .cmplz-body {
		grid-column: 1 !important;
		grid-row: 1;
		min-width: 0;
	}

	body.woocommerce-checkout .cmplz-cookiebanner .cmplz-message {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

	body.woocommerce-checkout .cmplz-cookiebanner .cmplz-buttons {
		grid-column: 2 !important;
		grid-row: 1;
		flex-wrap: nowrap;
	}

	body.woocommerce-checkout .cmplz-cookiebanner .cmplz-links,
	body.woocommerce-checkout .cmplz-cookiebanner .cmplz-documents {
		grid-column: 1 / -1 !important;
	}

	body.woocommerce-checkout:has(.cmplz-cookiebanner.cmplz-show) {
		padding-bottom: 110px;
	}
}

/* -- O − 01 + no passo 01 (relato 016, 15/10)

   O mesmo controle da cesta lateral (PMC_Drawer::controle_qtd, cores e
   botões em pmc-course.css), encostado no preço: a estimativa de duração
   fica à esquerda, e quantidade e preço à direita. */
.pcs .pcs-item__rodape .pmc-checkout-qtd { margin-left: auto; }