/* === Layout base === */
.tna-cards{font-family:inherit;color:#111827}
.tna-cards .title{font-size:14px;color:#6b7280;margin:0 0 6px}
.tna-cards .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tna-cards .input-wrap{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:10px 12px;height:48px;box-shadow:0 6px 18px rgba(17,24,39,.06);width:420px;max-width:100%}
.tna-currency{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:#eef2ff;color:#4338ca;font-weight:700;font-size:14px}
.tna-input{border:0;outline:0;width:100%;font-size:16px;background:transparent}

/* Botão preto */
.tna-btn{height:48px;padding:0 22px;border:0;border-radius:12px;cursor:pointer;background:#000;color:#fff;font-weight:800;box-shadow:0 10px 22px rgba(0,0,0,.25)}
.tna-btn:hover{filter:brightness(.97)}

/* Cotação abaixo e centralizada */
.tna-quote{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;height:48px;padding:6px 12px;justify-content:center}
.tna-quote .pill{background:#0f172a;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}
.tna-quote .val{font-weight:700}
.tna-quote--below{flex-basis:100%;justify-content:center;margin-top:8px}

/* Valor informado */
.tna-informed{text-align:center;margin:16px 0 8px}
.tna-informed .lbl{display:block;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#111827;margin-bottom:6px}
.tna-informed .pill{display:inline-block;background:#000;color:#fff;font-weight:800;padding:10px 18px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* Totais (bandeiras) */
.tna-totals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;max-width:680px}
.tna-total-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px 14px;box-shadow:0 6px 18px rgba(17,24,39,.06)}
.tna-flag{width:34px;height:34px;border-radius:999px;overflow:hidden;display:inline-flex}
.tna-total-txt{font-size:10px;line-height:1.2;color:#6b7280;text-transform:uppercase;font-weight:700;letter-spacing:.4px}
.tna-total-money{font-weight:800;font-size:16px;color:#111827;margin-top:2px}

/* Seções */
.tna-section-title{text-transform:uppercase;font-weight:800;letter-spacing:.4px;text-align:center;margin:14px 0 8px;color:#111827}
.tna-results{margin-top:14px}
.tna-results h4{margin:6px 0 4px;font-size:16px}
.tna-results p.muted{color:#6b7280;margin:0 0 12px;font-size:14px}

/* Cards Pix/TED e CC */
.tna-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:680px}
.tna-card{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;box-shadow:0 6px 18px rgba(17,24,39,.06)}
.tna-icon{width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.ico-pix{background:#16a34a}
.ico-ted{background:#a855f7}
.ico-cc{background:#7c3aed}
.tna-cc{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;box-shadow:0 6px 18px rgba(17,24,39,.06);max-width:680px;margin-top:10px}
.tna-cc .label{font-weight:800}
.tna-cc .value{font-weight:800}

/* Tabela de parcelas: zebra + hover em negrito */
.tna-cards details{margin-top:12px;max-width:800px}
.tna-cards table{width:100%;border-collapse:collapse}
.tna-cards th,.tna-cards td{padding:12px 14px;border-bottom:1px solid #e5e7eb;text-align:left}
.tna-cards thead th{background:#f8fafc}
.tna-cards table tbody tr:nth-child(odd)  td{background:#fff}
.tna-cards table tbody tr:nth-child(even) td{background:#f3f4f6}
.tna-cards table tbody tr:hover td{background:#e5e7eb;font-weight:700}

@media (max-width:740px){
  .tna-totals{grid-template-columns:1fr}
  .tna-grid{grid-template-columns:1fr}
}

/* === Centralizar exatamente entre os dois cards de totais (680px) === */

/* Centraliza o grid dos dois cards */
.tna-totals{
  margin: 10px auto 0;       /* antes tinha só margin-top */
  max-width: 680px;          /* já existia, mantemos */
}

/* COTAÇÃO: quebra a linha, usa a mesma largura e centraliza o conteúdo */
.tna-quote--below{
  flex-basis: 100%;
  max-width: 680px;
  margin: 12px auto 0;       /* centraliza o bloco */
  justify-content: center;   /* centraliza o texto/pílula */
}

/* VALOR INFORMADO: mesmo width e centralizado */
.tna-informed{
  max-width: 680px;
  margin: 16px auto 8px;     /* centraliza o bloco */
  text-align: center;        /* centraliza o texto/pílula */
}

/* Título "FORMAS DE PAGAMENTO": mesmo width e centralizado */
.tna-section-title{
  max-width: 680px;
  margin: 16px auto 8px;     /* centraliza o bloco */
  text-align: center;
}

/* Para manter toda a sequência alinhada na mesma coluna dos cards abaixo */
.tna-grid{ max-width: 680px; margin: 0 auto; }
.tna-cc  { max-width: 680px; margin: 10px auto; }

/* ====== Coluna central de 680px para TUDO ====== */

/* Rótulo acima do campo */
.tna-cards .title{
  max-width:680px;
  margin:0 auto 6px;          /* centraliza o rótulo */
}

/* Linha do formulário (input + botão) */
.tna-cards .row{
  max-width:680px;
  margin:0 auto;              /* centraliza o conjunto */
  justify-content:flex-start; /* alinha conteúdo à esquerda dentro da coluna */
}

/* Faz o input ocupar o espaço disponível da linha */
.tna-cards .input-wrap{
  flex:1 1 auto;              /* expande conforme a coluna */
  width:auto;                 /* ignora largura fixa anterior */
  min-width:0;
}

/* "Cotação" (já estava) — garante mesma coluna */
.tna-quote--below{
  flex-basis:100%;
  max-width:680px;
  margin:12px auto 0;         /* centraliza o bloco */
  justify-content:center;     /* conteúdo centralizado dentro do bloco */
}

/* "Valor informado" — mesma coluna */
.tna-informed{
  max-width:680px;
  margin:16px auto 8px;       /* centraliza o bloco */
  text-align:center;          /* texto/pílula centralizados */
}

/* Título "Formas de Pagamento" — mesma coluna */
.tna-section-title{
  max-width:680px;
  margin:16px auto 8px;       /* centraliza o bloco */
  text-align:center;
}

/* Grid (PIX/TED) e Cartão — já na mesma coluna */
.tna-grid{ max-width:680px; margin:0 auto; }
.tna-cc  { max-width:680px; margin:10px auto; }

/* "Ver opções de parcelamento" — mesma coluna */
.tna-cards details{
  max-width:680px !important; /* sobrescreve o valor antigo (800px) */
  margin:12px auto;           /* centraliza o bloco */
}
.tna-cards details > summary{
  padding:6px 0;
}
/* tabela continua 100% da largura do details */

/* Usar as fontes globais do site dentro do componente */
.tna-cards{
  font-family: var(--font-body, inherit);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Títulos do componente (se você estiver usando Mina nos headings do site) */
.tna-cards h1, .tna-cards h2, .tna-cards h3,
.tna-cards h4, .tna-cards h5, .tna-cards h6,
.tna-section-title{
  font-family: var(--font-heading, var(--font-body, inherit));
}

/* Inputs e botões herdam do container */
.tna-cards button,
.tna-cards input, .tna-cards select, .tna-cards textarea{
  font-family: inherit;
}

/* === TNA — Padronização de tamanhos usando a escala global do site === */
/* Usa as variáveis globais se existirem; caso não, aplica fallback */
.tna-cards{
  font-family: var(--font-body, inherit);
  font-size: var(--fs-300, 16px);
  line-height: var(--lh-relaxed, 1.65);
}

/* Título pequeno acima do campo */
.tna-cards .title{
  font-size: var(--fs-200, 14.5px) !important;
  line-height: var(--lh-normal, 1.5) !important;
}

/* Input e botão */
.tna-input{ font-size: var(--fs-300, 16px) !important; }
.tna-btn{   font-size: var(--fs-200, 14.5px) !important; font-weight: 800; }

/* Cápsula de cotação */
.tna-quote .pill{ font-size: var(--fs-100, 16px) !important; }
.tna-quote .val { font-size: var(--fs-200, 16px) !important; }

/* “Valor informado” */
.tna-informed .lbl { font-size: var(--fs-400, 20px) !important; }
.tna-informed .pill{ font-size: var(--fs-400, 18px) !important; }

/* Totais (legenda e valor) */
.tna-total-txt   { font-size: var(--fs-100, 12px) !important; line-height: var(--lh-normal, 1.5); }
.tna-total-money { font-size: var(--fs-500, 18px) !important; line-height: var(--lh-tight, 1.15); }

/* Título de seção “Formas de Pagamento” */
.tna-section-title{
  font-size: var(--fs-600, 20px) !important;
  line-height: var(--lh-tight, 1.15) !important;
}

/* Cards Pix/TED e Cartão */
.tna-card, .tna-cc{ font-size: var(--fs-300,18px) !important; }

/* Tabela de parcelamento */
.tna-cards thead th{ font-size: var(--fs-200, 14.5px) !important; }
.tna-cards tbody td{ font-size: var(--fs-200, 14.5px) !important; }

/* Garantir que o summary apareça visível, clicável e centralizado */
.tna-cards details {
  max-width: 680px !important;
  margin: 12px auto;
}
.tna-cards details > summary{
  display: block;          /* alguns temas zera o summary */
  cursor: pointer;
  text-align: center;
  font-weight: 800;
  padding: 8px 0;
}