/* ==========================================================================
   TAGJÁ — página pública de assinatura (/assinar)
   Estilo "pesado" do redesenho. Carregado DEPOIS de /admin/admin.css, de onde
   reaproveita as variáveis e classes base da marca:
     --roxo (marinho #142B4F) · --dourado (#FFD700) · --pag (#f8f9fc fundo claro)
     --card (#fff) · --muted · --borda · --good · --bad
   Paleta restrita à marca: marinho + dourado + fundo claro + branco
   (o tom #fffdf2 é um branco levemente dourado, já usado no restante do site).
   Sem JS inline (CSP script-src 'self'); todo comportamento vive em assinar.js.
   Mobile-first: uma coluna no celular; no desktop, formulário à esquerda e
   resumo do plano sticky à direita.
   ========================================================================== */

/* Página um pouco mais larga p/ acomodar formulário + resumo lado a lado. */
.wrap { max-width: 1040px; }

/* Topbar: mesmo padrão da landing (logo 46px, também no celular, como aprovado). */
.topbar .brand img { height: 46px; }
/* O /assinar mantém o topo aprovado em uma linha (o admin.css quebra linha só nas áreas internas). */
.topbar { flex-wrap: nowrap; }
.topo-acoes { display: flex; align-items: center; gap: 16px; }
.topo-link { color: var(--tj-branco); text-decoration: none; font-weight: 600; font-size: 14px; }
.topo-link:hover { color: var(--dourado); }
/* Telas muito estreitas (≤360px): as ações descem para a 2ª linha em vez de criar rolagem
   lateral. A 375px e acima o topo continua em uma linha, como aprovado; o logo segue 46px. */
@media (max-width: 360px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topo-acoes { gap: 12px; }
}

.ouro { color: var(--dourado); }
.trial-badge {
  display: inline-block; background: var(--dourado); color: var(--roxo);
  font-weight: 800; font-size: 12px; letter-spacing: .6px;
  padding: 5px 12px; border-radius: 999px;
}

/* =============================== LAYOUT ================================== */
.assinar-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }

@media (min-width: 900px) {
  .assinar-grid {
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
    grid-template-areas:
      "hero   hero"
      "form   resumo";
    column-gap: 24px;
    align-items: start;
  }
  .trial-hero     { grid-area: hero; }
  .assinar-form   { grid-area: form; }
  .assinar-resumo { grid-area: resumo; align-self: start; position: sticky; top: 84px; }
}

/* =============================== HERO (chamariz) ======================== */
.trial-hero {
  background: var(--roxo); color: var(--tj-branco);
  border: 1px solid var(--roxo); border-top: 4px solid var(--dourado);
  border-radius: 14px; padding: 28px 24px 26px;
}
.trial-hero .trial-badge { margin-bottom: 14px; }
.trial-title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 900; color: var(--tj-branco); }
.trial-sub { margin: 10px 0 0; font-size: 16px; color: rgba(255, 255, 255, .85); }
.trial-sub strong { color: var(--tj-branco); }

/* Linha do tempo: 3 marcos (Hoje -> Dia 7 -> Dia 8). */
.timeline { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.tl-step { position: relative; padding: 0 10px; text-align: center; }
.tl-step::before {
  content: ""; position: absolute; top: 16px; left: 50%;
  width: 100%; height: 2px; background: rgba(255, 215, 0, .35); z-index: 0;
}
.tl-step:last-child::before { display: none; }
.tl-dot {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  background: var(--dourado); color: var(--roxo); font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.tl-body { display: block; }
.tl-when { display: block; font-weight: 800; font-size: 15px; color: var(--tj-branco); }
.tl-what { display: block; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .8); margin-top: 4px; }
.tl-step.tl-pay .tl-what { color: var(--dourado); font-weight: 600; }
/* Sem o marco "Dia 7: lembrete" (só aparece quando o servidor envia o lembrete): 2 marcos. */
.timeline.sem-lembrete { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 620px) {
  .trial-title { font-size: 24px; }
  .trial-sub { font-size: 15px; }
  .timeline { grid-template-columns: 1fr; margin-top: 18px; }
  .tl-step { display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 0 14px; text-align: left; padding: 0 0 20px; }
  .tl-step::before { top: 34px; bottom: 0; left: 16px; width: 2px; height: auto; }
  .tl-step:last-child { padding-bottom: 0; }
  .tl-dot { margin: 0; }
  .timeline.sem-lembrete { grid-template-columns: 1fr; }
}

/* =============================== RESUMO DO PLANO ======================== */
/* <details>: aberto por padrão. No desktop a "alavanca" some e ele fica sempre
   visível (sticky); no celular vira bloco recolhível. */
.assinar-resumo {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: 14px; overflow: hidden;
}
.resumo-toggle {
  list-style: none; cursor: pointer; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 800; color: var(--roxo); font-size: 15px;
  background: var(--tj-dourado-50); border-bottom: 1px solid var(--borda);
}
.resumo-toggle::-webkit-details-marker { display: none; }
.resumo-toggle::after { content: "▾"; color: var(--muted); transition: transform .2s; }
.assinar-resumo[open] .resumo-toggle::after { transform: rotate(180deg); }
.resumo-toggle-plano { font-weight: 700; color: var(--muted); font-size: 13px; text-align: right; }
.resumo-corpo { padding: 16px 18px 18px; }

.resumo-plano-nome { font-size: 18px; font-weight: 800; color: var(--roxo); }
.resumo-preco { margin: 6px 0 2px; }
.resumo-preco .v { font-size: 30px; font-weight: 900; color: var(--tj-texto); }
.resumo-preco .mes { color: var(--muted); font-weight: 700; font-size: 14px; }
.resumo-cota { color: var(--muted); font-size: 13px; }
#btnTrocarPlano { margin-top: 12px; }
.resumo-sep { height: 1px; background: var(--borda); margin: 16px 0; }
.resumo-dia8-tit { font-weight: 800; color: var(--roxo); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }
.resumo-lista { list-style: none; margin: 0; padding: 0; }
.resumo-lista li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 5px 0; font-size: 14px; }
.resumo-lista li strong { color: var(--tj-texto); white-space: nowrap; }
.resumo-lista li.sub { display: block; color: var(--muted); font-size: 12.5px; padding: 2px 0 0; }
.resumo-obs { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; background: var(--pag); border-radius: 8px; padding: 8px 10px; }
.resumo-hoje { margin-top: 14px; background: var(--tj-dourado-50); border: 1px solid var(--dourado); border-radius: 10px; padding: 10px 12px; font-weight: 700; color: var(--roxo); text-align: center; }

@media (min-width: 900px) {
  .resumo-toggle { display: none; }
  .assinar-resumo:not([open]) > .resumo-corpo { display: block; }
}

/* =============================== FORMULÁRIO ============================= */
.fs { background: var(--card); border: 1px solid var(--borda); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.fs-tit { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--roxo); margin: 0 0 16px; }
.fs-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--roxo); color: var(--tj-branco); font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

.campos { display: grid; grid-template-columns: 1fr; gap: 14px 16px; }
.campos label, .campos .campo { margin: 0; }
.campos input, .campos select { margin-top: 6px; }
.ajuda { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.ajuda.ajuda-colada { margin-top: 2px; }

@media (min-width: 560px) {
  .campos.cols-2 { grid-template-columns: 1fr 1fr; }
  .campos.endereco { grid-template-columns: 170px 1fr 92px; }
}

/* Identificador (slug) gerado automaticamente, com opção de editar. */
.campo-slug .slug-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.slug-label { font-size: 13px; color: var(--muted); }
.link-editar { border: 0; background: transparent; color: var(--roxo); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; font-family: inherit; }
.slug-preview { margin-top: 6px; background: var(--pag); border: 1px dashed var(--borda); border-radius: 8px; padding: 10px 12px; }
.slug-preview .val { color: var(--roxo); font-weight: 700; font-size: 15px; word-break: break-all; }
.slug-input { margin-top: 6px !important; }

/* Senha com botão mostrar/ocultar. */
.senha-wrap { position: relative; display: block; margin-top: 6px; }
.senha-wrap input { margin-top: 0; padding-right: 86px; }
.senha-toggle { position: absolute; top: 0; right: 0; height: 100%; border: 0; background: transparent; cursor: pointer; color: var(--roxo); font-weight: 700; font-size: 13px; padding: 0 12px; font-family: inherit; }

/* Bloco de pagamento (Pix Automático + forma de pagar a implementação) dentro da seção de acesso. */
.pag-bloco { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda); }
.pag-label { display: block; font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.metodo-op { position: relative; margin: 0; display: block; }
.metodo-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.metodo-card {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 13px 10px; border: 1.5px solid var(--roxo); border-radius: 10px;
  font-weight: 700; color: var(--roxo); font-size: 14px; cursor: pointer; background: var(--tj-branco);
  transition: border-color .15s, background .15s, box-shadow .15s, color .15s; height: 100%;
}
/* Selecionado: navy preenchido + borda dourada (cores da logo). */
.metodo-op input:checked + .metodo-card { border-color: var(--dourado); background: var(--roxo); color: var(--tj-branco); box-shadow: 0 0 0 2px var(--dourado) inset; }
.metodo-op input:focus-visible + .metodo-card { box-shadow: 0 0 0 3px var(--tj-foco-anel); }

@media (max-width: 440px) { .metodos { grid-template-columns: 1fr; } }

/* =============================== CTA + SELOS =========================== */
.cta-bloco { margin-top: 4px; }

/* Pop-up: endereço fora de São Paulo (capital) — navy + dourado da marca */
.cta-sub { text-align: center; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.selos { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; margin: 16px 0 0; }
.selo-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--roxo); font-weight: 600; }
.selo-item .ic { flex: none; }
.tit-ic { vertical-align: -3px; margin-right: 4px; }
.btn-add-loja .ic { flex: none; }
#formErro { margin: 14px 0 0; text-align: center; }

/* =============================== ESCOLHA DE PLANO ====================== */
.planos-intro { text-align: center; margin: 8px 0 22px; }
.planos-intro h1 { font-size: 26px; margin: 12px 0 8px; color: var(--roxo); }
.planos-intro .muted { max-width: 560px; margin: 0 auto; font-size: 14px; }

.planos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 4px; }
.plano-card { position: relative; background: var(--card); border: 1px solid var(--borda); border-radius: 16px; padding: 26px 20px 22px; display: flex; flex-direction: column; }
.plano-card.destaque { border: 2px solid var(--dourado); box-shadow: var(--tj-sombra-card); }
.plano-card .selo { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--dourado); color: var(--roxo); font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.plano-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--roxo); }
.plano-card .preco { font-size: 32px; font-weight: 900; color: var(--tj-texto); line-height: 1; }
.plano-card .preco .mes { font-size: 14px; font-weight: 700; color: var(--muted); }
.plano-card .cota { align-self: flex-start; background: var(--tj-dourado-50); color: var(--roxo); border: 1px solid var(--dourado); font-weight: 800; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; margin: 12px 0 16px; }
.plano-feats { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; }
.plano-feats li { position: relative; padding: 7px 0 7px 26px; font-size: 13.5px; line-height: 1.4; }
.plano-feats li::before { content: "✓"; position: absolute; left: 0; top: 7px; color: var(--good); font-weight: 900; }
.btn-escolher { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 12px 16px; border-radius: 999px; font-size: 14px; font-weight: 800; cursor: pointer; background: var(--dourado); color: var(--roxo); border: 1px solid var(--dourado); font-family: inherit; }
.btn-escolher:hover { filter: brightness(.96); }

/* =============================== MEI + AVISO CNPJ ===================== */
/* Checkbox em linha (MEI, aceite dos termos). */
.campo-check { display: flex; flex-direction: row; align-items: center; gap: 9px; font-size: 14px; color: var(--tj-texto); cursor: pointer; }
.campo-check input[type="checkbox"] { margin: 0; width: 17px; height: 17px; flex: none; accent-color: var(--roxo); cursor: pointer; }
.aviso-cnpj { color: var(--bad); font-weight: 600; }

/* Destaque de campo com erro devolvido pelo backend. */
.campo-erro, .campos input.campo-erro, .campos select.campo-erro {
  border-color: var(--bad) !important;
  box-shadow: 0 0 0 2px var(--tj-erro-anel);
}

/* =============================== AVISO PIX AUTOMÁTICO ================= */
.pix-aviso {
  background: var(--tj-dourado-50); border: 1px solid var(--dourado); border-radius: 10px;
  padding: 11px 13px; margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--roxo);
}
.pix-aviso strong { color: var(--roxo); }

/* =============================== BLOCOS DE LOJA (GOLD) =============== */
.loja-bloco { border: 1px solid var(--borda); border-radius: 12px; padding: 16px; margin-bottom: 14px; background: var(--pag); }
.loja-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.loja-tit { color: var(--roxo); font-size: 15px; font-weight: 800; }
.loja-remover { border: 1px solid var(--borda); background: var(--tj-branco); color: var(--bad); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 5px 12px; border-radius: 999px; font-family: inherit; }
.loja-remover:hover { border-color: var(--bad); }
.loja-bloco .campos { margin-bottom: 12px; }
.loja-bloco .campos:last-child { margin-bottom: 0; }
.btn-add-loja { display: inline-flex; align-items: center; gap: 6px; background: var(--tj-branco); border: 1.5px dashed var(--roxo); color: var(--roxo); font-weight: 800; font-size: 14px; cursor: pointer; padding: 11px 18px; border-radius: 10px; font-family: inherit; }
.btn-add-loja:hover { background: var(--tj-dourado-50); }
.aviso-lojas { margin-top: 12px; background: var(--pag); border-radius: 8px; padding: 9px 11px; }

/* =============================== REVELAÇÃO DO VALOR ================== */
/* Revelação e Termos usam o modal largo (.tj-modal.destaque.largo, em /marca/tagja-componentes.css). */
.rev-corpo { margin: 2px 0 14px; }
.rev-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.rev-rot { color: var(--tj-texto); font-size: 14px; }
.rev-val { color: var(--roxo); font-size: 15px; white-space: nowrap; text-align: right; }
.rev-sub { margin: 4px 0 2px; font-size: 12.5px; color: var(--muted); }
.rev-dia8 { margin: 14px 0 0; background: var(--tj-dourado-50); border: 1px solid var(--dourado); border-radius: 10px; padding: 11px 13px; font-weight: 700; color: var(--roxo); font-size: 14px; }
.rev-encargos { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rev-termos { margin: 16px 0 6px; align-items: flex-start; }
.rev-termos span { line-height: 1.4; }
.link-termos { display: inline-block; border: 0; background: transparent; color: var(--roxo); font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 0; text-decoration: underline; font-family: inherit; margin-bottom: 4px; }
.rev-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
/* Pop-up "Confirme seu e-mail" (mesmo modal .tj-modal.destaque; só o campo do código é novo). */
.codigo-input { letter-spacing: 8px; font-size: 22px; font-weight: 800; text-align: center; font-family: monospace; color: var(--roxo); }
.ver-info { margin: 8px 0 0; min-height: 1em; }
#verTrocarEmail { margin-top: 10px; }
/* Pop-up de agendamento */
.ag-acoes { margin-top: 10px; gap: 10px; }
.ag-ok-msg { color: var(--good); font-weight: 600; }

/* =============================== TERMOS DE USO ====================== */
.termos-versao { font-size: 12.5px; margin: 0 0 12px; }
.termos-conteudo { max-height: 55vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.6; color: var(--tj-texto); }
.termos-conteudo h3, .termos-conteudo h4 { color: var(--roxo); margin: 14px 0 6px; }
.termos-conteudo h3:first-child, .termos-conteudo h4:first-child { margin-top: 0; }
.termos-conteudo p, .termos-conteudo li { margin: 6px 0; }
.termos-conteudo ul, .termos-conteudo ol { padding-left: 20px; }

/* =============================== TELA DE AUTORIZAÇÃO (SUCESSO) ====== */
.aviso-teste { background: var(--tj-dourado-50); border: 1px solid var(--dourado); border-radius: 10px; padding: 11px 13px; margin: 14px 0 0; font-size: 13.5px; color: var(--roxo); font-weight: 600; }
.qr-img { display: block; width: 220px; max-width: 70%; height: auto; margin: 16px auto 4px; border: 1px solid var(--borda); border-radius: 12px; padding: 8px; background: var(--tj-branco); }
.brcode-label { margin: 16px 0 6px; font-size: 13px; }
.brcode-wrap { display: flex; gap: 8px; align-items: stretch; }
.brcode-input { flex: 1; min-width: 0; font-family: monospace; font-size: 12.5px; }
.brcode-wrap .btn { flex: none; }
/* Botões/links grandes na tela de sucesso. */
.btn-link { text-decoration: none; text-align: center; }
a.btn-cta.btn-link { margin-top: 16px; }
.suc-tit { color: var(--roxo); }
.caixa-info { background: var(--pag); margin: 12px 0 0; }
.caixa-info .linha-info { margin: 4px 0; }
.caixa-info .linha-info.mt { margin-top: 6px; }
.passos { margin: 14px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--tj-texto); }
.passos li { margin: 4px 0; }
.suc-acao { margin-top: 14px; }
/* Resposta do "Já autorizei — entrar" (autorização ainda pendente/recusada): mesmo aviso dourado da tela. */
.aviso-autorizacao { background: var(--tj-dourado-50); border: 1px solid var(--dourado); border-radius: 10px; padding: 11px 13px; margin: 14px 0 0; font-size: 13.5px; color: var(--roxo); font-weight: 600; }
.btn.suc-agendar { margin-top: 10px; width: 100%; }