/* ==========================================================
   A JANELA DO PAGAMENTO (ADR-015, #498)
   ==========================================================
   O miolo dela — o formulário do cartão — NÃO é estilizado aqui: é um
   iframe do Mercado Pago, e CSS de fora não atravessa iframe. O que
   combina a cara dele com a do site é a opção `visual.style.theme` que
   o js/pagamento.js passa ao montar o Brick, claro ou escuro conforme
   o tema do mural.

   O que esta folha faz é a moldura: o véu, a caixa, o preço, o recado
   e as duas linhas de rodapé — quem vende, e onde o cartão é digitado.
   ========================================================== */

/* 500 é o que os outros modais do site usam (o Entrar, a Conta, os
   idiomas). MEDIDO: com 90 a janela era montada e ficava ATRÁS da
   estante — existia no DOM, media 1298×914, e não aparecia. */
.pagar {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: 1rem;
}
.pagar[hidden] { display: none; }
.pagar__fundo {
  position: absolute; inset: 0; background: rgba(10, 12, 16, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.pagar__caixa {
  position: relative; width: min(30rem, 100%); max-height: 92vh; overflow-y: auto;
  padding: 1.6rem 1.5rem 1.3rem; border-radius: 18px;
  background: var(--papel, #fff); color: var(--ink, #14161a);
  box-shadow: 0 24px 60px rgba(10, 12, 16, .35);
}
.pagar__x {
  position: absolute; right: .7rem; top: .7rem; display: grid; place-items: center;
  width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 9px;
  background: none; color: var(--suave, #5b6472); cursor: pointer;
}
.pagar__x:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.pagar__x svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; }

.pagar__titulo { margin: 0 2rem .15rem 0; font: 700 1.25rem 'Space Grotesk', system-ui, sans-serif; }
.pagar__valor { margin: 0 0 1.1rem; font: 600 1rem 'Inter', system-ui, sans-serif; color: var(--suave, #5b6472); }

/* O Brick desenha dentro daqui. A altura mínima segura o pulo da
   caixa entre o clique e o formulário aparecer — sem ela, a janela
   nasce rasa e cresce de repente na cara de quem vai pagar. */
.pagar__forma { min-height: 18rem; }

.pagar__recado {
  margin: .8rem 0 0; padding: .6rem .8rem; border-radius: 10px;
  font: 500 .9rem 'Inter', system-ui, sans-serif;
  background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d;
}
.pagar__recado--ruim { background: color-mix(in srgb, #ff0a2b 12%, transparent); color: #c20019; }
.pagar__recado[hidden] { display: none; }

/* quem vende, e onde o cartão é digitado */
/* O botão das outras formas: discreto, porque o cartão é o caminho
   principal — mas sublinhado e clicável, porque esconder uma forma de
   pagar é perder a venda de quem não tem cartão. */
.pagar__outras {
  display: block; width: 100%; margin-top: .9rem; padding: .55rem 0;
  border: 0; background: none; cursor: pointer;
  font: 600 .85rem 'Inter', system-ui, sans-serif;
  color: var(--pp-acento, #ff0a2b); text-decoration: underline; text-underline-offset: 3px;
}
.pagar__outras:hover { filter: brightness(.9); }
.pagar__outras[disabled] { opacity: .55; cursor: default; text-decoration: none; }

/* O aviso dos Termos usa a classe da janela de entrar (`modal__legal`)
   para herdar o tom dela, mais estas medidas, porque a janela de
   pagar mede em rem e o resto do modal mede em vh. */
.pagar__legal {
  margin: .9rem 0 0 !important; font: 500 .72rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--suave, #5b6472);
}
.pagar__quem, .pagar__seguro {
  margin: .9rem 0 0; font: 500 .78rem 'Inter', system-ui, sans-serif;
  color: var(--suave, #5b6472); line-height: 1.45;
}
.pagar__quem[hidden] { display: none; }
.pagar__seguro { display: flex; align-items: flex-start; gap: .4rem; }
.pagar__seguro svg {
  flex: none; width: .95rem; height: .95rem; margin-top: .1rem;
  fill: none; stroke: currentColor; stroke-width: 2;
}

.pagar__sair {
  display: block; width: 100%; margin-top: 1.1rem; padding: .7rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 11px;
  background: none; color: inherit; cursor: pointer;
  font: 600 .9rem 'Inter', system-ui, sans-serif;
}
.pagar__sair:hover { background: color-mix(in srgb, currentColor 7%, transparent); }

/* ---------- o que muda nos cartões de plano ---------- */
/* O total do ano, embaixo do preço do mês. No plano anual o cartão
   mostra quanto sai POR MÊS, que é como o olho compara com o mensal —
   e esta linha diz quanto é cobrado de uma vez, porque esconder isso
   seria a mesma desonestidade de mostrar um preço e cobrar outro. */
.plano__total {
  display: block; margin-top: -.2rem;
  font: 500 .78rem 'Inter', system-ui, sans-serif; color: var(--suave, #5b6472);
}
.plano__total[hidden] { display: none; }

/* O "Em preparação" vira "Assinar" quando há preço e chave. O desenho
   é o do botão cheio da vitrine, e não o do desabilitado. */
.plano__assinar {
  cursor: pointer; opacity: 1;
  background: var(--pp-acento, #ff0a2b); color: #fff; border-color: transparent;
}
.plano__assinar:hover { filter: brightness(1.06); }

/* ---------- a aba Pagamentos da conta ---------- */
/* As medidas aqui são em `vh`, e não em `rem`, porque é assim que a
   conta inteira é medida no clean.css — misturar as duas faria esta
   aba encolher e crescer fora de passo com as vizinhas. */
.conta__linha {
  display: flex; justify-content: space-between; gap: 1.6vh;
  padding: .9vh 0; border-bottom: .12vh solid var(--borda);
}
.conta__linha:last-of-type { border-bottom: 0; }
.conta__linha span { color: var(--suave); }
.conta__linha b { font-weight: 700; text-align: right; }

.conta__nota {
  margin: 1.2vh 0 !important; padding: 1.1vh 1.4vh; border-radius: 1vh;
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.conta__nota[hidden], .conta__recado[hidden] { display: none; }

.conta__recado {
  margin: 1.2vh 0 0 !important; padding: 1.1vh 1.4vh; border-radius: 1vh;
  background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d !important;
}
.conta__recado--ruim { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red-tinta) !important; }

.conta__cobrancas { list-style: none; margin: 0; padding: 0; }
.conta__cobrancas li {
  display: flex; justify-content: space-between; gap: 1.6vh;
  padding: .9vh 0; border-bottom: .12vh solid var(--borda);
  font-size: max(1.4vh, 11.2px); color: var(--suave);
}
.conta__cobrancas li:last-child { border-bottom: 0; }
.conta__cobrancas b { color: var(--ink); font-weight: 700; }
.conta__cobrancas[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pagar__fundo { -webkit-backdrop-filter: none; backdrop-filter: none; }
}