/* ==========================================================================
   checkout-funil.css (v=fun1)
   Pele do funil: molde de checkout enxuto vestido com os tokens da marca
   Meu Passaporte. Carregado por ULTIMO, depois de styles.css e de
   checkout-institucional.css: so sobrescreve, nenhuma classe, id ou
   comportamento do checkout.js muda.
   Fora do escopo, de proposito: tela do Pix (.pix-*, .pvdoc*, .paysec*) e
   tela pos-pago (.gcard*), validadas por conversao. As regras genericas que
   alcancariam essas telas (botoes, acoes) levam o guarda
   .co-body:not(.is-fase-final), classe que o script inline poe no body
   quando o cartao do formulario sai de cena.
   ========================================================================== */

.co-body {
  --f-navy: #0D3B6E;       /* barra superior e titulos fortes (tom do concorrente) */
  --f-blue: #1351B4;       /* primario: botoes, ativos, foco, precos */
  --f-blue-dark: #0F2D6B;  /* hover e pressionado */
  --f-bg: #EEF1F5;         /* fundo da pagina */
  --f-card: #ffffff;
  --f-border: #C6DBF2;     /* borda padrao (tinta azul) */
  --f-line: #E2E8F0;       /* divisorias neutras */
  --f-gray: #CBD5E1;       /* etapa futura (cinza) */
  --f-ink: #16202e;
  --f-soft: #5c6b7e;
  --f-err: #B40C02;
  --f-ok: #16A34A;
  --f-tint: #EFF6FF;       /* caixas informativas */
  --f-green-tint: #F0FFF4; /* badge de emergencia (tom do concorrente) */
  background: var(--f-bg);
}

/* ===== Barra superior com contexto ===== */
.co-header {
  background: var(--f-navy);
  border-bottom: 3px solid var(--f-blue);
}
.co-header .container { max-width: 1128px; padding: 0 16px; }
.co-header .co-header__inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.co-header .brand { display: inline-flex; align-items: center; flex: none; }
.co-header .brand img { height: 34px; width: auto; display: block; }
.co-header__ctx {
  font-size: .76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62vw;
}
@media (max-width: 480px) {
  .co-header__ctx { max-width: 52vw; }
}

/* A faixa "(*) Preenchimento Obrigatorio" nao faz parte deste molde */
.wizreq { display: none; }

/* ===== Titulo e subtitulo ===== */
.co-intro {
  width: 100%;
  max-width: 1128px;
  margin: 22px auto 0;
  padding: 0 16px;
}
.co-title {
  margin: 0;
  text-align: left;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--f-navy);
}
.co-lead {
  margin: 6px 0 0;
  max-width: 780px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--f-soft);
}

/* ===== Grade: cartao + OrderCard lateral (so no desktop) ===== */
.co-main { max-width: 1128px; margin-top: 18px; }
.co-aside { display: none; }
@media (min-width: 1024px) {
  .co-main {
    max-width: 1128px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .co-card { grid-column: 1; grid-row: 1; }
  .co-aside {
    display: none;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 24px;
    margin-top: 0;
  }
  .co-pixview, .co-guide, .co-triagem { grid-column: 1 / -1; }
}

/* ===== Cartao principal ===== */
.co-card {
  background: var(--f-card);
  border: 1px solid var(--f-border);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(3, 32, 63, .08);
  padding: 26px 28px 24px;
}
@media (max-width: 600px) { .co-card { padding: 20px 16px 18px; } }

/* ===== Stepper de 5 fases (pintado 100% por CSS via data-etapa) ===== */
.progress { margin: 0; }
.fsteps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.fsteps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 44px;
}
.fsteps__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--f-gray);
  background: #fff;
  font-size: .68rem;
  font-weight: 800;
  color: var(--f-soft);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fsteps__label {
  font-size: .66rem;
  font-weight: 700;
  color: var(--f-soft);
  white-space: nowrap;
}
.fsteps__bar {
  flex: 1 1 auto;
  min-width: 14px;
  height: 2px;
  margin-top: 11px;
  border-radius: 2px;
  background: var(--f-gray);
}

/* Passo atual: azul */
#coCard[data-etapa="1"] .fsteps__item[data-fase="1"] .fsteps__dot,
#coCard[data-etapa="2"] .fsteps__item[data-fase="2"] .fsteps__dot,
#coCard[data-etapa="3"] .fsteps__item[data-fase="3"] .fsteps__dot {
  border-color: var(--f-blue);
  background: var(--f-blue);
  color: #fff;
}
#coCard[data-etapa="1"] .fsteps__item[data-fase="1"] .fsteps__label,
#coCard[data-etapa="2"] .fsteps__item[data-fase="2"] .fsteps__label,
#coCard[data-etapa="3"] .fsteps__item[data-fase="3"] .fsteps__label {
  color: var(--f-blue);
  font-weight: 800;
}

/* Passo concluido: verde com check */
#coCard[data-etapa="2"] .fsteps__item[data-fase="1"] .fsteps__dot,
#coCard[data-etapa="3"] .fsteps__item[data-fase="1"] .fsteps__dot,
#coCard[data-etapa="3"] .fsteps__item[data-fase="2"] .fsteps__dot {
  position: relative;
  border-color: var(--f-ok);
  background: var(--f-ok);
  color: transparent;
}
#coCard[data-etapa="2"] .fsteps__item[data-fase="1"] .fsteps__dot::after,
#coCard[data-etapa="3"] .fsteps__item[data-fase="1"] .fsteps__dot::after,
#coCard[data-etapa="3"] .fsteps__item[data-fase="2"] .fsteps__dot::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
}
#coCard[data-etapa="2"] .fsteps__bar[data-bar="1"],
#coCard[data-etapa="3"] .fsteps__bar[data-bar="1"],
#coCard[data-etapa="3"] .fsteps__bar[data-bar="2"] {
  background: var(--f-ok);
}

@media (max-width: 480px) {
  .fsteps__label { display: none; }
  .fsteps__item { min-width: 32px; }
}

/* Legenda fina "parte X de N" do passo 3 (form + pagamento). O estilo fica
   aqui; a visibilidade e decidida pelo data-etapa nas regras logo abaixo. */
.progress__label {
  margin-top: 8px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--f-soft);
}
/* Legenda so no passo 3 (form + pagamento). O #id supera o
   ".progress__label { display:none }" do checkout-institucional. */
#coCard[data-etapa="3"] .progress__label { display: block; }
/* Aviso de rascunho nao aparece na tela de plano (passo 2) */
#coCard[data-etapa="2"] .co-draft { display: none; }

/* ===== Titulos de etapa e secoes ===== */
.step-head { margin: 20px 0 0; }
.step-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--f-navy);
}
@media (min-width: 768px) { .step-title { font-size: 1.16rem; } }
.step-sub { font-size: .8rem; color: var(--f-soft); }

.co-card .co-section {
  margin-top: 26px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.co-card .co-section h2 {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--f-blue);
  font-size: .95rem;
  font-weight: 800;
  color: var(--f-navy);
}
.co-card .co-sub { font-size: .8rem; color: var(--f-soft); }
.co-card .co-section > .co-sub {
  margin-top: 10px;
  padding-bottom: 0;
  border-bottom: none;
}

/* Caixas internas (filiacao, nome anterior, passaporte anterior) */
.fbox, .nomebox {
  background: #F8FAFD;
  border: 1px solid var(--f-line);
  border-radius: 4px;
}
.fbox__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--f-navy);
}
.fbox__tag::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--f-blue);
}
.checkline { font-size: .8rem; }

/* ===== Labels, campos e estados ===== */
.flabel { font-size: .78rem; font-weight: 700; color: #23324a; }
.flabel b { color: var(--f-err); }
.co-card input[type="text"],
.co-card input[type="email"],
.co-card input[type="tel"],
.co-card select {
  height: 46px;
  padding: 0 13px;
  font-size: 16px; /* 16px evita o zoom automatico do iOS no foco */
  border: 1.5px solid var(--f-border);
  border-radius: 3px;
  color: var(--f-ink);
  box-shadow: none;
}
.co-card select { padding: 0 42px 0 13px; }
.co-card input::placeholder { color: #9AABc4; }
.co-card input:hover:not(:focus):not(:disabled),
.co-card select:hover:not(:focus):not(:disabled) { border-color: var(--f-blue); }
.co-card input:focus,
.co-card select:focus {
  border-color: var(--f-blue);
  box-shadow: 0 0 0 3px rgba(14, 78, 150, .133);
}
.co-card input.err,
.co-card select.err {
  border-color: var(--f-err);
  box-shadow: 0 0 0 3px rgba(180, 12, 2, .1);
}
.co-card input.ok,
.co-card select.ok { border-color: rgba(14, 78, 150, .333); }
.co-main .ferr { color: var(--f-err); font-size: .74rem; font-weight: 600; }
.co-draft {
  background: var(--f-tint);
  border: 1px solid var(--f-border);
  color: var(--f-blue-dark);
}

/* ===== Botoes (guardados: a tela do Pix e o guia ficam como estao) ===== */
.co-body:not(.is-fase-final) .co-main .btn--navy,
.co-body:not(.is-fase-final) .co-main .btn--back {
  height: 48px;
  padding: 0 24px;
  border-radius: 3px;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.co-body:not(.is-fase-final) .co-main .btn--navy {
  background: var(--f-blue);
  box-shadow: none;
}
.co-body:not(.is-fase-final) .co-main .btn--navy:hover {
  background: var(--f-blue-dark);
  box-shadow: none;
}
.co-body:not(.is-fase-final) .co-main .btn--navy:active { background: var(--f-navy); }
.co-body:not(.is-fase-final) .co-main .btn--navy:disabled { background: #E2E8F0; color: #94A3B8; }
.co-body:not(.is-fase-final) .co-main .btn--back {
  background: transparent;
  border: 1.5px solid var(--f-gray);
  color: var(--f-soft);
}
.co-body:not(.is-fase-final) .co-main .btn--back:hover {
  border-color: var(--f-blue);
  color: var(--f-blue);
  background: #fff;
}
.co-body:not(.is-fase-final) .co-main .cepline__btn {
  height: 46px;
  padding: 0 16px;
  font-size: .8rem;
  color: var(--f-blue);
  border-color: var(--f-border);
}
.co-body:not(.is-fase-final) .co-main .co-actions {
  border-top: 1px solid var(--f-line);
  padding-top: 20px;
  margin-top: 28px;
}

/* ===== Revisao ===== */
.rev-card { border-radius: 4px; border-color: var(--f-line); }
.rev-card__head { background: #F8FAFD; }
.rev-card__title svg { color: var(--f-blue); }
.rev-grid small { color: var(--f-blue); }
.rev-edit {
  border-radius: 3px;
  border-color: var(--f-border);
  color: var(--f-blue);
}
.rev-edit:hover {
  border-color: var(--f-blue);
  background: var(--f-tint);
  color: var(--f-blue-dark);
}

/* ===== Triagem (so aparece sem ?tipo= na URL) ===== */
body.co-triagem-aberta #coIntro,
body.co-triagem-aberta #coCard,
body.co-triagem-aberta #coAside { display: none; }
.co-triagem {
  max-width: 640px;
  margin: 26px auto 0;
  background: var(--f-card);
  border: 1px solid var(--f-border);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(3, 32, 63, .08);
  padding: 26px 22px 24px;
}
@media (min-width: 1024px) { .co-triagem { justify-self: center; width: 100%; } }
.co-triagem h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--f-navy);
}
.co-triagem__sub { margin: 6px 0 18px; font-size: .82rem; color: var(--f-soft); }
.tri-grid { display: grid; gap: 10px; }
.tri-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1.5px solid var(--f-border);
  border-radius: 3px;
  padding: 14px 16px;
  transition: border-color .15s ease, background .15s ease;
}
.tri-card:hover {
  border-color: var(--f-blue);
  background: rgba(14, 78, 150, .031);
}
.tri-card__radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--f-gray);
  border-radius: 50%;
  transition: border-color .15s ease;
}
.tri-card:hover .tri-card__radio { border-color: var(--f-blue); }
.tri-card__body { display: grid; gap: 2px; min-width: 0; }
.tri-card__body strong { font-size: .92rem; font-weight: 800; color: var(--f-navy); }
.tri-card__body span { font-size: .78rem; line-height: 1.5; color: var(--f-soft); }
.tri-card__body em {
  font-style: normal;
  font-size: .74rem;
  font-weight: 700;
  color: var(--f-blue);
}

/* ===== Tela de plano e pagamento ===== */
/* ===== Cards de plano (clone do concorrente: limpo, sem radio visivel) ===== */
.plan-grid { display: grid; gap: 14px; margin: 4px 0 20px; }
.plan-card {
  display: block;
  position: relative;
  background: #fff;
  border: 1.5px solid #D7DEE7;
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* radio some da vista, mas segue no DOM pro motor ler a selecao */
.plan-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.plan-card:hover { border-color: #9DB4D6; }
.plan-card:has(input:checked),
.plan-card.is-sel {
  border-color: var(--f-blue);
  box-shadow: inset 0 0 0 1px var(--f-blue);
}
.plan-card__body { display: block; min-width: 0; }
.plan-card__name {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--f-navy);
}
.plan-card__price {
  display: block;
  margin-top: 4px;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.015em;
  color: var(--f-blue);
}
.plan-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 10px 0 4px;
  padding: 7px 11px;
  font-size: .8rem;
  font-weight: 800;
  color: #166534;
  background: var(--f-green-tint);
  border: 1px solid #BBE7C7;
  border-radius: 7px;
}
.plan-card__badge svg { flex: none; color: #16A34A; }
.plan-card__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.plan-card__list li {
  position: relative;
  padding-left: 24px;
  font-size: .86rem;
  line-height: 1.45;
  color: #52627a;
}
.plan-card__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-size: .9rem;
  font-weight: 900;
  color: #16A34A;
}

/* Resumo "Plano selecionado" (acima dos botoes do passo 2): nome a esquerda,
   valor grande em azul a direita; empilha em telas estreitas */
.plan-selected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  margin: 2px 0 4px;
  padding: 12px 14px;
  background: rgba(14, 78, 150, .04);
  border: 1px solid rgba(14, 78, 150, .2);
  border-radius: 4px;
}
.plan-selected__lab { font-size: .8rem; color: var(--f-soft); }
.plan-selected__lab b { color: var(--f-navy); font-weight: 800; }
.plan-selected__val {
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--f-blue);
  white-space: nowrap;
}

.orderinfo {
  border-radius: 4px;
  border: 1px solid rgba(14, 78, 150, .18);
  background: linear-gradient(180deg, rgba(14, 78, 150, .05), rgba(14, 78, 150, .015));
}
.order {
  margin-top: 14px;
  background: rgba(14, 78, 150, .039);
  border: 1.5px solid rgba(14, 78, 150, .2);
  border-radius: 4px;
  padding: 4px 16px;
}
.order__row--total { font-weight: 900; color: var(--f-blue); }
.order__row--total span:last-child { font-size: 1.16rem; }

.gru-note {
  margin-top: 12px;
  background: var(--f-tint);
  border: 1px solid var(--f-border);
  border-radius: 3px;
  padding: 12px 14px;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--f-blue-dark);
}
.free-note { margin: 10px 0 0; font-size: .74rem; line-height: 1.5; color: var(--f-soft); }
.co-payment .decl {
  margin-top: 16px;
  background: var(--f-tint);
  border: 1px solid var(--f-border);
  border-radius: 3px;
  padding: 14px;
}
.co-payment .decl__text { font-size: .76rem; line-height: 1.55; color: var(--f-blue-dark); }
.co-payment .btn--block { margin-top: 18px; }

/* ===== Rodape de confianca (selos) ===== */
.trustrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  list-style: none;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--f-line);
}
.trustrow li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--f-soft);
}
.trustrow svg { color: var(--f-blue); flex-shrink: 0; }
/* A barra de confianca do card aparece no passo 2 (plano); no passo 3 o proprio
   bloco de pagamento ja traz os seus selos, entao a do card sai. */
#coCard[data-etapa="3"] .trustrow--card { display: none; }

/* ===== OrderCard lateral ===== */
.order-card { border-radius: 4px; border-color: var(--f-border); }
.order-card__total strong { color: var(--f-blue); }

/* ===== Rodape ===== */
.footer--checkout { margin-top: 40px; background: var(--f-navy); }
.footer--checkout a { color: #BFD7F2; text-decoration: underline; }
.footer--checkout a:hover { color: #fff; }
.footer--checkout .footer__aviso { color: rgba(255, 255, 255, .62); }
.footer--checkout .footer__cnpj { color: rgba(255, 255, 255, .55); font-size: 12.5px; }

/* ==========================================================================
   CLONE FINO DO CONCORRENTE (passo 2, plano): intro fora, stepper largo,
   titulo grande, botoes lado a lado. Sobrescreve o que veio acima.
   ========================================================================== */

/* O funil dele nao tem paragrafo de intro: vai direto pro stepper + card */
.co-intro { display: none; }

/* Stepper: 3 bolinhas espalhadas na largura, linhas ligando (como o dele) */
.fsteps { margin: 4px 0 6px; align-items: center; }
.fsteps__dot {
  width: 30px;
  height: 30px;
  font-size: .8rem;
  border-width: 2px;
}
.fsteps__bar { height: 3px; margin-top: 0; align-self: center; }
@media (max-width: 480px) { .fsteps__item { min-width: 30px; } }

/* Titulo do passo grande, navy, como o dele */
.co-card .step-title { font-size: 1.5rem; line-height: 1.2; }
@media (min-width: 768px) { .co-card .step-title { font-size: 1.6rem; } }
.co-card .step-sub { font-size: .9rem; line-height: 1.55; margin-top: 8px; }

/* Divisor abaixo do subtitulo do plano (o dele tem uma linha fina) */
#coPlan .step-head { padding-bottom: 18px; border-bottom: 1px solid var(--f-line); margin-bottom: 18px; }

/* Botoes do plano lado a lado: Voltar (contorno, menor) e Avancar (azul, maior) */
#coPlan .co-actions { display: flex; flex-direction: row; gap: 12px; border-top: 1px solid var(--f-line); padding-top: 18px; margin-top: 4px; }
#coPlan .co-actions #planVoltar { flex: 0 0 auto; min-width: 120px; order: 1; }
#coPlan .co-actions #planAvancar { flex: 1 1 auto; order: 2; }

/* ==========================================================================
   REVISAO E CONFIRMACAO (etapa 4): titulo com check + divisor azul, barra do
   plano, secoes em grade de caixinhas, garantia (verde), declaracao passiva
   (azul) e ciencia obrigatoria discreta acima do botao. Classes proprias
   (rv-*/rvsec/rvgrid/rvbox) pra nao brigar com o .rev-* antigo.
   ========================================================================== */
.co-step[data-step="4"] .step-head {
  padding-bottom: 16px;
  border-bottom: 2px solid var(--f-blue);
  margin-bottom: 4px;
}
.co-step[data-step="4"] .step-title { display: flex; align-items: center; gap: 9px; }
.co-step[data-step="4"] .step-title svg { color: var(--f-blue); flex: none; }

/* Barra do plano: faixa cinza clara, nome + descritor a esquerda, total azul a direita */
.rv-planbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 18px 0 22px;
  padding: 14px 18px;
  background: #F1F5FA;
  border: 1px solid var(--f-line);
  border-radius: 8px;
}
.rv-planbar__info { display: grid; gap: 2px; min-width: 0; }
.rv-planbar__lab {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-soft);
}
.rv-planbar__name { font-size: .92rem; line-height: 1.35; color: var(--f-ink); }
.rv-planbar__name b { font-weight: 800; color: var(--f-navy); }
.rv-planbar__price {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.015em;
  color: var(--f-blue);
  white-space: nowrap;
}

/* Secao: card branco com cabecalho cinza (rotulo + barrinha azul + Editar) */
.rvsec {
  margin: 0 0 16px;
  background: var(--f-card);
  border: 1px solid var(--f-line);
  border-radius: 8px;
  overflow: hidden;
}
.rvsec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: #F8FAFD;
  border-bottom: 1px solid var(--f-line);
}
.rvsec__label {
  position: relative;
  padding-left: 12px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--f-navy);
}
.rvsec__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--f-blue);
}
.rvsec__edit {
  flex: none;
  font-family: inherit;
  font-size: .76rem;
  font-weight: 700;
  color: var(--f-blue);
  background: #fff;
  border: 1px solid var(--f-border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.rvsec__edit:hover { border-color: var(--f-blue); background: var(--f-tint); color: var(--f-blue-dark); }

/* Grade de campos: 1 coluna no celular, 2 colunas no desktop */
.rvgrid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
@media (min-width: 768px) { .rvgrid { grid-template-columns: 1fr 1fr; } }
/* :not([hidden]) preserva o esconder por atributo do #rvNumeroAnteriorWrap
   (o checkout.js alterna a caixa "Numero anterior" via .hidden) */
.rvgrid .rvbox { display: none; }
.rvgrid .rvbox:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  background: #F6F8FB;
  border: 1px solid var(--f-line);
  border-radius: 6px;
  min-width: 0;
}
.rvbox small {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--f-soft);
}
.rvbox span { font-size: .9rem; font-weight: 600; color: var(--f-ink); overflow-wrap: break-word; }

/* Garantia de 7 dias (verde) */
.rv-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 13px 15px;
  background: var(--f-green-tint);
  border: 1px solid #BBE7C7;
  border-radius: 8px;
}
.rv-guarantee svg { flex: none; color: #16A34A; margin-top: 1px; }
.rv-guarantee p { margin: 0; font-size: .78rem; line-height: 1.55; color: #256b3d; }
.rv-guarantee b { color: #14532d; font-weight: 800; }

/* Declaracao passiva (azul) */
.rv-declare {
  margin-top: 12px;
  padding: 13px 15px;
  background: var(--f-tint);
  border: 1px solid var(--f-border);
  border-radius: 8px;
}
.rv-declare p { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--f-blue-dark); }

/* Ciencia obrigatoria: discreta, logo acima do botao (vence o .decl base) */
.co-step[data-step="4"] .decl--rev {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 14px;
  padding: 13px 15px;
  background: #F8FAFD;
  border: 1px solid var(--f-line);
  border-radius: 8px;
  cursor: pointer;
}
.co-step[data-step="4"] .decl--rev input { margin-top: 2px; flex: none; }
.co-step[data-step="4"] .decl--rev .decl__text { font-size: .72rem; line-height: 1.5; color: var(--f-soft); }