/* ============================================================
   Sem Via — visual baseado no boleto Sem Parar (semparar.com.br/boleto)
   cores extraidas do CSS oficial deles
   ============================================================ */

:root {
  --cherry: #d60b52;        /* botao principal (btn-cherry) */
  --cherry-hover: #ac1e50;  /* hover do botao */
  --bg: #f9f9f9;            /* fundo da pagina (boleto-component) */
  --texto: #212529;
  --texto-suave: #525252;   /* textos secundarios */
  --borda: #bfbfbf;         /* borda do card de boleto */
  --placeholder: #888;
  --verde-ok: #1f9d55;
  --vermelho: #d93b3b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- topbar branca (estilo sem parar) ---------- */
.topbar {
  background: #fff;
  position: relative;
  z-index: 50;
  border-bottom: 1px solid #f0f0f0;
}

.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 800;
  color: var(--texto);
  text-decoration: none;
  letter-spacing: -0.4px;
}

/* quadradinho amarelo = tag (oculto ate o conteudo decidir o modo do logo) */
.logo-tag {
  width: 30px;
  height: 22px;
  background: #ffcc00;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
  visibility: hidden;
}
.logo-tag::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 6px;
  width: 4px;
  height: 10px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
}

.logo-footer { font-size: 20px; color: #fff; }

/* ---------- menu do topo (copia o header do sem parar) ---------- */
.menu-principal {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
}

.menu-item { position: relative; }

.menu-item-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  padding: 10px 0;
  line-height: 100%;
}

.menu-item-titulo svg { color: #505050; }

/* icone substituido por emoji/texto via admin */
.icone-svg { display: inline-flex; align-items: center; }
.icone-emoji { font-size: 24px; line-height: 1; }
.opcao-icone .icone-emoji { font-size: 28px; }
.como-icone .icone-emoji { font-size: 26px; }
.logo-emoji { font-size: 26px; line-height: 1; }

.menu-item-titulo:hover,
.menu-item:hover > .menu-item-titulo { color: var(--cherry); }
.menu-item-titulo:hover svg,
.menu-item:hover > .menu-item-titulo svg { color: var(--cherry); }

/* dropdowns do menu (abrem no hover, como no site deles) */
.menu-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: -14px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  padding: 16px 22px 20px;
  min-width: 250px;
  display: none;
  text-align: left;
  z-index: 60;
}

.menu-item:hover > .menu-dropdown,
.menu-item:focus-within > .menu-dropdown { display: block; }

.menu-dropdown-titulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #9a9a9a;
  margin: 0 0 4px;
}

.menu-dropdown a {
  display: block;
  font-size: 15px;
  color: var(--texto);
  text-decoration: none;
  padding: 8px 0;
  line-height: 1.35;
}
.menu-dropdown a:hover { color: var(--cherry); text-decoration: underline; }
.menu-dropdown small { color: #8a8a8a; font-size: 12px; }

.contato-bloco { margin: 8px 0 2px; font-size: 15px; }
.contato-bloco span { display: block; font-size: 12.5px; color: #8a8a8a; margin-top: 2px; }

/* lado direito: botao cherry "peca sua tag" + minha conta */
.planos-e-conta {
  display: flex;
  align-items: center;
  gap: 22px;
}

.btn-pecatag {
  background: var(--cherry);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  padding: 9px 18px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.btn-pecatag:hover { background: var(--cherry-hover); color: #fff; }

/* link cherry so no menu mobile (igual ao deles) */
.menu-mobile-pecatag { display: none; }

/* hamburger (mobile) */
.btn-hamburguer {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--texto);
}

/* "Minha Conta" com dropdown (igual ao deles) */
.minha-conta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
  padding: 2px 6px;
}
.minha-conta:hover { color: var(--cherry); }
.minha-conta:hover .icone-conta { color: var(--cherry); }

.icone-conta { color: var(--texto); }

/* dropdown "Acesse sua conta / ou assine um plano" */
.minha-conta-wrap { position: relative; }

.links-menu-aberto {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  padding: 20px 24px;
  min-width: 210px;
  text-align: left;
  display: none;
  z-index: 60;
}

.minha-conta-wrap:hover .links-menu-aberto,
.minha-conta-wrap:focus-within .links-menu-aberto { display: block; }

.links-menu-aberto::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 26px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
  transform: rotate(45deg);
}

.links-menu-aberto .conta-aberto {
  display: block;
  font-size: 18px;
  color: var(--texto);
  text-decoration: none;
  line-height: 124%;
}
.links-menu-aberto .conta-aberto:hover { color: var(--cherry); }

.links-menu-aberto .planos-aberto {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 300;
  color: #525252;
  text-decoration: underline;
}
.links-menu-aberto .planos-aberto:hover { color: var(--cherry); }

/* ---------- area principal (copia do boleto-component) ---------- */
.boleto-component {
  background: var(--bg);
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 60px;
  position: relative;
  overflow: hidden;
}

.boleto-conteudo {
  width: 100%;
  max-width: 26rem;      /* 416px igual ao #boleto-cpf-cnpj deles */
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.boleto-titulo {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--texto);
}

.boleto-texto {
  font-size: 18px;
  font-weight: 300;
  color: var(--texto-suave);
  line-height: 1.55;
  margin: 0 0 34px;
}

/* ---------- form com label flutuante (estilo custom-label deles) ---------- */
.boleto-form { text-align: center; }

.campo-form {
  position: relative;
  margin: 0 auto 28px;
  max-width: 400px;
}

.campo-form input {
  width: 100%;
  height: 54px;
  padding: 18px 14px 6px;
  font-size: 17px;
  color: var(--texto);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--borda);
  outline: none;
  transition: border-color 0.2s ease;
}

.campo-form input:focus { border-bottom-color: var(--cherry); }

.campo-form label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--placeholder);
  pointer-events: none;
  transition: all 0.25s ease;
  background: transparent;
}

/* label flutua quando foca ou digita */
.campo-form input:focus + label,
.campo-form input:not(:placeholder-shown) + label {
  top: 7px;
  transform: translateY(0);
  font-size: 12px;
  color: var(--cherry);
  font-weight: 600;
}

/* botao Continuar (copia do .submit-btn) */
.boleto-form button {
  display: inline-block;
  width: 100%;
  max-width: 260px;
  height: 54px;
  background: var(--cherry);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 124%;
  letter-spacing: -0.4px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.boleto-form button:hover { background: var(--cherry-hover); }
.boleto-form button:disabled { opacity: 0.65; cursor: default; }

.mensagem {
  margin: 18px auto 0;
  font-size: 14px;
  min-height: 18px;
}
.mensagem.erro { color: var(--vermelho); }
.mensagem.ok { color: var(--verde-ok); }

/* ---------- "veja como e simples" (copia do howToPay) ---------- */
.como-pagar {
  background: #fff;
  border-top: 1px solid #ececec;
  padding: 56px 20px 60px;
}

.como-titulo {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 36px;
  line-height: 1.25;
}

.como-lista {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 0 auto 30px;
  padding: 0;
  max-width: 880px;
  flex-wrap: wrap;
}

.como-lista li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 300px;
  text-align: center;
}

.como-icone {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid #e3e3e3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--texto-suave);
}

.como-lista p { font-size: 15px; color: var(--texto-suave); line-height: 1.6; margin: 0; }

.como-obs {
  text-align: center;
  font-size: 13.5px;
  color: var(--texto-suave);
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 14px 18px;
  max-width: 640px;
  margin: 30px auto 10px;
  line-height: 1.6;
}

/* ---------- resultado da consulta ---------- */
.resultado-wrap { margin: 40px auto 80px; }

.resultado {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 12px;
  overflow: hidden;
}
.resultado:empty { display: none; }

.resultado-header {
  padding: 20px 24px;
  border-bottom: 1px solid #eef0f4;
  font-weight: 700;
}

.lista-boletos { list-style: none; margin: 0; padding: 0; }

.lista-boletos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid #f1f2f5;
}
.lista-boletos li:last-child { border-bottom: none; }

.boleto-info strong { display: block; font-size: 15px; }
.boleto-info span { font-size: 13px; color: #666; }

.status-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin-left: 10px;
}
.status-pill.pago { background: #e5f6ea; color: var(--verde-ok); }
.status-pill.pendente { background: #fff1e3; color: #c96a00; }

.btn-download {
  background: var(--cherry);
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
}
.btn-download:hover { background: var(--cherry-hover); }

/* ---------- footer ---------- */
.footer {
  background: var(--texto);
  color: #ced4da;
  padding: 48px 0;
  font-size: 13px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.footer-empresa { line-height: 1.8; opacity: 0.8; margin: 14px 0 0; }

.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-linhas { display: flex; flex-direction: column; gap: 8px; }

.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col strong { color: #fff; margin-bottom: 6px; }
.footer-col a { color: #ced4da; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   fluxo assistido (espera / opcoes / pagamento)
   seguindo o mesmo visual do boleto
   ============================================================ */

/* topo das outras telas */
.topbar-fluxo .logo { font-size: 20px; }

.pagina-fluxo {
  background: var(--bg);
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 16px;
}

/* card central (copia do boleto-card: branco, borda bfbfbf, raio 12) */
.card-fluxo {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 38px 34px;
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.card-fluxo h1 { font-size: 26px; font-weight: 700; margin: 0 0 10px; }
.card-fluxo p { font-size: 15.5px; font-weight: 300; color: var(--texto-suave); line-height: 1.6; margin: 0 0 6px; }

/* spinner (espera) */
.spinner {
  width: 54px;
  height: 54px;
  margin: 6px auto 20px;
  border: 5px solid #e9e9e9;
  border-top-color: var(--cherry);
  border-radius: 50%;
  animation: girar 0.9s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.dica-espera { font-size: 12.5px !important; color: #9aa0a6 !important; margin-top: 16px !important; }

/* tela de opcoes */
.card-opcoes { max-width: 560px; }

.debt-aviso {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--texto-suave);
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 18px 0 26px;
}

.valor-debito {
  display: inline-block;
  font-size: 26px;
  color: var(--cherry);
  font-weight: 700;
}

.opcoes-botoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.btn-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 10px 16px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.btn-opcao:hover {
  transform: translateY(-3px);
  border-color: var(--cherry);
  box-shadow: 0 10px 24px rgba(214, 11, 82, 0.1);
}
.btn-opcao:disabled { opacity: 0.6; cursor: default; transform: none; }

.opcao-icone { font-size: 26px; line-height: 1; color: var(--texto-suave); }
.btn-pix:hover .opcao-icone { color: var(--verde-ok); }
.btn-boleto:hover .opcao-icone { color: var(--cherry); }
.btn-cartao:hover .opcao-icone { color: #ff8a00; }

.opcao-titulo { font-weight: 700; font-size: 16px; }
.opcao-desc { font-size: 12px; color: #9aa0a6; }

/* tela de pagamento */
.card-pagamento { max-width: 540px; }

.bloco-cobranca { margin-top: 8px; text-align: left; }

.cobranca-titulo { font-weight: 700; font-size: 14px; margin: 0 0 8px; text-align: center; }

.caixa-codigo {
  background: var(--bg);
  border: 1px dashed #aab6cc;
  border-radius: 12px;
  padding: 16px;
  font-family: Consolas, monospace;
  font-size: 12.5px;
  word-break: break-all;
  line-height: 1.6;
  color: #333f55;
  max-height: 130px;
  overflow-y: auto;
  text-align: left;
}

.btn-copiar, .btn-link-pagamento {
  display: inline-block;
  margin: 14px auto 0;
  background: var(--cherry);
  color: #fff;
  border: none;
  padding: 13px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.btn-copiar:hover, .btn-link-pagamento:hover { background: var(--cherry-hover); }

.cobranca-dica {
  font-size: 13px;
  color: #8a919a;
  margin-top: 14px;
  line-height: 1.6;
  text-align: center;
}

/* form do cartao (underline como o de cpf) */
.form-cartao { text-align: left; margin-top: 10px; }

.campo-cartao { position: relative; margin-bottom: 22px; }

.campo-cartao input {
  width: 100%;
  height: 50px;
  padding: 16px 12px 4px;
  font-size: 15.5px;
  color: var(--texto);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--borda);
  outline: none;
  transition: border-color 0.2s ease;
}

.campo-cartao input:focus { border-bottom-color: var(--cherry); }

.campo-cartao label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 14.5px;
  color: var(--placeholder);
  pointer-events: none;
  transition: all 0.25s ease;
}

.campo-cartao input:focus + label,
.campo-cartao input:not(:placeholder-shown) + label {
  top: 3px;
  transform: translateY(0);
  font-size: 11.5px;
  color: var(--cherry);
  font-weight: 600;
}

.linha-cartao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-cartao button {
  width: 100%;
  margin-top: 10px;
  background: var(--cherry);
  color: #fff;
  border: none;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.form-cartao button:hover { background: var(--cherry-hover); }

/* responsivo */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .como-lista { gap: 34px; }
}

/* backdrop escuro quando o drawer mobile esta aberto */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 90;
}
.menu-backdrop.visivel { opacity: 1; pointer-events: auto; }

body.menu-travado { overflow: hidden; }

/* cabecalho e rodape do drawer (so existem no mobile) */
.menu-drawer-header { display: none; }
.menu-drawer-footer { display: none; }
.seta-menu { display: none; }

/* ---------- menu mobile (drawer deslizante) ---------- */
@media (max-width: 1020px) {
  .topbar { position: static; z-index: auto; }

  .btn-hamburguer { display: flex; }

  .menu-principal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 350px);
    background: #fff;
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.2);
    transform: translateX(-105%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 22px 26px;
    overflow-y: auto;
    z-index: 100;
    overscroll-behavior: contain;
  }

  .menu-principal.aberto { transform: translateX(0); }

  /* topo do drawer: logo + botao fechar */
  .menu-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 6px;
  }

  .logo-drawer { font-size: 20px; }

  .btn-fechar-menu {
    background: none;
    border: none;
    cursor: pointer;
    color: #505050;
    padding: 8px;
    margin-right: -8px;
  }

  /* botao cherry "peca sua tag" no topo do drawer */
  .menu-mobile-pecatag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 8px;
    padding: 13px 16px;
    border-radius: 10px;
    background: var(--cherry);
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-bottom: none;
  }

  /* itens do menu: linha inteira clicavel com borda embaixo */
  .menu-item { width: 100%; }

  .menu-item-titulo {
    width: 100%;
    justify-content: flex-start;
    gap: 14px;
    padding: 17px 0;
    font-size: 16px;
    border-bottom: 1px solid #eee;
  }

  .menu-item-titulo svg { flex: none; }

  /* setinha do acordeao (gira quando abre) */
  .seta-menu {
    display: block;
    width: 10px;
    height: 10px;
    margin-left: auto;
    margin-right: 4px;
    border-right: 2px solid #9a9a9a;
    border-bottom: 2px solid #9a9a9a;
    transform: rotate(45deg);
    transition: transform 0.22s ease;
  }
  .seta-menu.aberta { transform: rotate(225deg); border-color: var(--cherry); }

  /* acordeon: abre suave pelo max-height */
  .menu-dropdown {
    position: static;
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 6px 40px;
    min-width: 0;
    background: #fff;
    text-align: left;
  }

  .menu-dropdown.aberto { max-height: 640px; }

  .menu-dropdown a {
    padding: 10px 0;
    margin: 0;
    font-size: 14.5px;
    color: #525252;
  }

  .menu-dropdown-titulo { margin: 12px 0 0; }

  .contato-bloco { margin: 10px 0 2px; }
  .contato-bloco span { margin-top: 3px; }

  /* rodape do drawer: minha conta + telefone */
  .menu-drawer-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
  }

  .drawer-conta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: var(--texto);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
  }
  .drawer-conta svg { color: #505050; }

  .drawer-telefone {
    padding: 6px 0 4px;
    color: #525252;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.55;
  }
}

@media (max-width: 640px) {
  .opcoes-botoes { grid-template-columns: 1fr; }
  .boleto-titulo { font-size: 26px; }
  .boleto-texto { font-size: 16px; }
  .card-fluxo { padding: 30px 22px; }
  .topbar-inner { padding: 10px 16px; gap: 12px; }
  .logo { font-size: 19px; }
  .logo-tag { width: 24px; height: 17px; }
  .btn-pecatag { padding: 8px 14px; font-size: 13px; }
  .minha-conta span { font-size: 12px; }
}