/* PIX na Loja Integrada — Instituto Bel Bordotti
   Paleta por tela: roxo da marca + texto escuro + neutro claro (verde so na tela de sucesso).
   Sem !important, estilizacao por classe, fonte >= 14px, transicoes <= 0.3s. */

:root {
  --pix-roxo: #7a2e6d;
  --pix-roxo-escuro: #5f2454;
  --pix-texto: #2b2b2b;
  --pix-neutro: #f4f0f3;
  --pix-borda: #d9cdd6;
  --pix-verde: #2e8b57;
}

/* Botao ao lado/abaixo do COMPRAR nativo */
.pix-loja-btn {
  display: inline-block;
  align-self: center; /* nao esticar na linha do seletor de quantidade */
  flex: 0 0 auto; /* nao deixar o flex espremer (senao o texto quebra em 2 linhas) */
  min-width: 178px; /* largura fixa garante ⚡+texto em UMA linha (o tema da LI espremia p/ 152px e quebrava) */
  box-sizing: border-box;
  margin: 0 0 0 10px;
  padding: 13px 16px;
  border: 2px solid var(--pix-roxo);
  border-radius: 4px;
  background: #fff;
  color: var(--pix-roxo);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap; /* icone + texto sempre na MESMA linha */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.pix-loja-btn:hover {
  background: var(--pix-roxo);
  color: #fff;
}
.pix-loja-ic {
  display: inline; /* tema da LI forca span{display:block}; manter o icone na linha */
  font-style: normal;
}

/* Overlay + modal */
.pix-loja-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 8, 18, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 12px;
  overflow-y: auto;
  z-index: 99999;
}
.pix-loja-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  color: var(--pix-texto);
  border-radius: 12px;
  padding: 22px 20px 24px;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: pix-in 0.2s ease;
}
@keyframes pix-in {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.pix-loja-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #999;
  cursor: pointer;
}
.pix-loja-h {
  margin: 0 0 14px;
  font-size: 20px;
  color: var(--pix-roxo-escuro);
}

.pix-loja-resumo {
  background: var(--pix-neutro);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.pix-loja-resumo div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.pix-loja-resumo span {
  color: #6b5f68;
}
.pix-loja-resumo b {
  text-align: right;
}

/* Formulario */
.pix-loja-campo,
.pix-loja-file {
  display: block;
  margin-bottom: 12px;
}
.pix-loja-campo span,
.pix-loja-file span {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
}
.pix-loja-form input,
.pix-loja-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px;
  font-size: 16px; /* evita zoom no iOS */
  border: 1px solid var(--pix-borda);
  border-radius: 8px;
  background: #fff;
  color: var(--pix-texto);
}
.pix-loja-form input:focus,
.pix-loja-form textarea:focus {
  outline: none;
  border-color: var(--pix-roxo);
}
.pix-loja-file {
  max-width: 100%;
  overflow: hidden;
}
.pix-loja-file input {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  font-size: 14px;
}
/* o seletor nativo de arquivo tem largura interna grande — nao deixar estourar */
.pix-loja-file input::file-selector-button {
  margin-right: 8px;
  padding: 6px 10px;
  border: 1px solid var(--pix-borda);
  border-radius: 6px;
  background: var(--pix-neutro);
  color: var(--pix-texto);
  font-size: 13px;
  cursor: pointer;
}

.pix-loja-lgpd {
  font-size: 13px;
  color: #6b5f68;
  margin: 4px 0 14px;
}
.pix-loja-erro {
  background: #fbe9ec;
  color: #a01c37;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 12px;
}
.pix-loja-submit {
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: 8px;
  background: var(--pix-roxo);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
.pix-loja-submit:hover {
  background: var(--pix-roxo-escuro);
}
.pix-loja-submit:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Pagamento PIX (etapa 2) */
.pix-loja-pix {
  margin-bottom: 14px;
}
.pix-loja-chave-wrap {
  background: var(--pix-neutro);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.pix-loja-chave-wrap > span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.pix-loja-chave {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.pix-loja-chave code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  background: #fff;
  border: 1px solid var(--pix-borda);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: monospace;
}
.pix-loja-copiar {
  border: 0;
  border-radius: 6px;
  background: var(--pix-roxo);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 0 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.pix-loja-copiar:hover {
  background: var(--pix-roxo-escuro);
}
.pix-loja-benef {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b5f68;
}

/* Sucesso */
.pix-loja-ok {
  text-align: center;
  padding: 8px 0;
}
.pix-loja-check {
  width: 56px;
  height: 56px;
  margin: 6px auto 10px;
  border-radius: 50%;
  background: var(--pix-verde);
  color: #fff;
  font-size: 30px;
  line-height: 56px;
}
.pix-loja-ok p {
  margin: 8px 0;
}

@media (min-width: 640px) {
  .pix-loja-btn {
    display: inline-block;
    width: auto;
    margin-top: 0;
    margin-left: 10px;
    vertical-align: top;
  }
}