/* ---------------------------------------------------------------------------
   CHECKOUT TRANSPARENTE do PAGAR.ME (18/09) — loja ANOVA.

   O formulario de cartao e HTML NOSSO: o Pagar.me nao tem widget pronto equivalente ao Brick do
   Mercado Pago. Entao a aparencia tambem e nossa, e usa os tokens de cor que a loja ja define
   (--green, --border, --text, --text-soft, --red) para nao criar um segundo tema.

   Carregado nas duas lojas. Na Zeleno nada disto aparece, porque o formulario so e desenhado
   quando o servidor diz que a loja cobra pelo Pagar.me.

   REMOCAO: apagar o <link> no index.html, rodar `npm run build` e apagar este arquivo.
   --------------------------------------------------------------------------- */

/* Escolha do meio de pagamento. Fica FORA do <form> de proposito: o tokenizador do Pagar.me
   intercepta o submit e leva junto o que estiver dentro do formulario. */
.pagarme-meios {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.pagarme-meio {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  background: #fff;
}

.pagarme-meio:has(input:checked) {
  border-color: var(--green, #1f7a4d);
  box-shadow: inset 0 0 0 1px var(--green, #1f7a4d);
}

.pagarme-meio input {
  accent-color: var(--green, #1f7a4d);
}

.pagarme-form {
  display: grid;
  gap: 12px;
}

.pagarme-campo {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--text-soft, #667);
}

.pagarme-campo input,
.pagarme-campo select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 14px;
  font-size: 15px;
  color: var(--text, #222);
  background: #fff;
}

.pagarme-campo input:focus,
.pagarme-campo select:focus {
  outline: none;
  border-color: var(--green, #1f7a4d);
}

/* Mes, ano e CVV lado a lado. Em tela estreita continuam em tres colunas de proposito:
   quebrar essa linha empurra o botao de pagar para fora da primeira dobra. */
.pagarme-linha {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* Bandeira reconhecida pelo tokenizador, ao lado do rotulo do numero. */
.pagarme-bandeira {
  font-style: normal;
  font-size: 12px;
  color: var(--green, #1f7a4d);
}

.pagarme-pix-explicacao {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft, #667);
}

/* Caixa do Pix. Verde de proposito: nao ha erro nenhum aqui, o cliente so precisa pagar. */
.pagarme-pix {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 18px;
  background: #fbfdfc;
  color: var(--green, #1f7a4d);
}

.pagarme-pix-qr {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  display: block;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 16px;
  padding: 10px;
  background: #fff;
}

.pagarme-pix textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 14px;
  font-size: 12px;
  color: var(--text, #222);
  background: #fff;
  resize: none;
}

.pagarme-pix button {
  border: none;
  background: var(--green, #1f7a4d);
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
}

.pagarme-pix-aviso {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft, #667);
}

.pagarme-aviso {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft, #667);
}

/* ---------------------------------------------------------------------------
   DOIS CARTOES (23/09). Cada cartao num bloco proprio, e a divisao do valor ANTES deles — o cliente
   decide quanto vai em cada um antes de comecar a digitar numero.
   --------------------------------------------------------------------------- */

/* Fica FORA do <form>, como o seletor de meio: nao e dado de cartao. */
.pagarme-divisao {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

/* ATENCAO: sem esta linha o bloco aparece SEMPRE. O atributo `hidden` esconde pelo `display: none` da
   folha do navegador, e a regra de classe acima vence — entao o campo de divisao apareceria tambem
   nos modos de um cartao e de Pix, pedindo um valor que nao existe ali. Vale para qualquer elemento
   deste arquivo que combine `hidden` com `display` proprio. */
.pagarme-divisao[hidden] {
  display: none;
}

.pagarme-divisao-resto {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft, #667);
}

.pagarme-cartao-bloco {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 18px;
  background: #fff;
}

.pagarme-cartao-bloco legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 900;
  color: var(--green, #1f7a4d);
}