/* ═══════════════════════════════════════════════════════
   TokenizaBrasil — Leads CSS (tb-leads.css) v3.0
   Pop-up, formulário inline, estados de sucesso/erro
═══════════════════════════════════════════════════════ */

/* ── Variáveis reutilizadas ──────────────────────── */
:root {
  --tb-lead-blue:  #0D7CFF;
  --tb-lead-green: #00E5A0;
  --tb-lead-dark:  #0A0F1E;
  --tb-lead-card:  #1A2340;
  --tb-lead-muted: #8899BB;
  --tb-lead-radius: 14px;
  --tb-lead-font: 'Inter', sans-serif;
  --tb-lead-font-d: 'Space Grotesk', sans-serif;
}

/* ══════════════════════════════════════════════════
   POP-UP OVERLAY
══════════════════════════════════════════════════ */
.tb-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tb-popup-overlay.tb-popup-open { opacity: 1; }

.tb-popup {
  background: #fff;
  border-radius: 20px;
  max-width: 460px;
  width: 100%;
  position: relative;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s ease;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.tb-popup-overlay.tb-popup-open .tb-popup {
  transform: translateY(0) scale(1);
}

.tb-popup-close {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(0,0,0,.06);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #666;
  transition: background .2s, color .2s;
  z-index: 2;
}

.tb-popup-close:hover { background: rgba(0,0,0,.12); color: #0A0F1E; }

.tb-popup-body {
  padding: 36px 32px 28px;
}

/* Cabeçalho colorido do popup */
.tb-popup::before {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(90deg, #0D7CFF 0%, #00E5A0 100%);
}

.tb-popup-badge {
  display: inline-block;
  background: rgba(0,184,126,.1);
  color: #00875A;
  border: 1px solid rgba(0,184,126,.25);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  letter-spacing: .05em;
  margin-bottom: 14px;
  font-family: var(--tb-lead-font);
}

.tb-popup-titulo {
  font-family: var(--tb-lead-font-d);
  font-size: 22px;
  font-weight: 700;
  color: #0A0F1E;
  line-height: 1.2;
  margin: 0 0 10px;
}

.tb-popup-subtitulo {
  font-size: 14px;
  color: #5566AA;
  line-height: 1.6;
  margin: 0 0 16px;
  font-family: var(--tb-lead-font);
}

.tb-popup-beneficios {
  list-style: none;
  padding: 0; margin: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.tb-popup-beneficios li {
  font-size: 13px;
  color: #334477;
  font-family: var(--tb-lead-font);
  background: #F0F4FF;
  border-radius: 6px;
  padding: 7px 10px;
  line-height: 1.4;
}

@media (max-width: 420px) {
  .tb-popup-beneficios { grid-template-columns: 1fr; }
  .tb-popup-body { padding: 28px 20px 20px; }
  .tb-popup-titulo { font-size: 19px; }
}

/* ══════════════════════════════════════════════════
   FORMULÁRIO INLINE [tb_lead_form]
══════════════════════════════════════════════════ */
.tb-lead-form-wrap {
  background: linear-gradient(135deg, #0A0F1E 0%, #1A2340 100%);
  border-radius: var(--tb-lead-radius);
  padding: 36px;
  max-width: 560px;
  margin: 32px auto;
  border: 1px solid #2A3A5E;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.tb-lead-form-inner { max-width: 420px; margin: 0 auto; }

.tb-lead-guia-badge {
  display: inline-block;
  background: rgba(0,229,160,.12);
  color: #00E5A0;
  border: 1px solid rgba(0,229,160,.3);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  letter-spacing: .05em;
  margin-bottom: 14px;
  font-family: var(--tb-lead-font);
}

.tb-lead-titulo {
  font-family: var(--tb-lead-font-d);
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  color: #EEF2FF;
  margin: 0 0 10px;
  line-height: 1.2;
}

.tb-lead-subtitulo {
  font-size: 14px;
  color: #8899BB;
  line-height: 1.6;
  margin: 0 0 24px;
  font-family: var(--tb-lead-font);
}

/* ══════════════════════════════════════════════════
   CAMPOS — usados tanto no popup quanto no inline
══════════════════════════════════════════════════ */
.tb-lead-field {
  margin-bottom: 12px;
}

.tb-lead-form input[type="text"],
.tb-lead-form input[type="email"],
.tb-lead-form input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--tb-lead-font);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  /* Inline (dark) */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: #EEF2FF;
}

.tb-lead-form input::placeholder { color: #8899BB; }

.tb-lead-form input:focus {
  border-color: #0D7CFF !important;
  box-shadow: 0 0 0 3px rgba(13,124,255,.2) !important;
}

/* Popup usa fundo claro */
.tb-popup .tb-lead-form input[type="text"],
.tb-popup .tb-lead-form input[type="email"],
.tb-popup .tb-lead-form input[type="tel"] {
  background: #F0F4FF;
  border: 1px solid #D0DAEE;
  color: #0A0F1E;
}

.tb-popup .tb-lead-form input::placeholder { color: #8899BB; }

.tb-lead-submit {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #0D7CFF 0%, #0060CC 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--tb-lead-font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(13,124,255,.4);
  margin-top: 4px;
}

.tb-lead-submit:hover  { opacity: .93; box-shadow: 0 6px 22px rgba(13,124,255,.55); }
.tb-lead-submit:active { transform: scale(.98); }
.tb-lead-submit:disabled { opacity: .6; cursor: not-allowed; }

.tb-lead-privacidade {
  font-size: 12px;
  color: #8899BB;
  text-align: center;
  margin: 10px 0 0;
  font-family: var(--tb-lead-font);
}

.tb-popup .tb-lead-privacidade { color: #AAB8CC; }

/* ══════════════════════════════════════════════════
   ESTADO DE SUCESSO
══════════════════════════════════════════════════ */
.tb-lead-sucesso {
  text-align: center;
  padding: 10px 0;
}

.tb-lead-sucesso-icone {
  font-size: 48px;
  margin-bottom: 12px;
  animation: tbBounce .5s ease;
}

@keyframes tbBounce {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.tb-lead-sucesso h4 {
  font-family: var(--tb-lead-font-d);
  font-size: 20px;
  font-weight: 700;
  color: #0A0F1E;
  margin: 0 0 8px;
}

.tb-lead-form-wrap .tb-lead-sucesso h4 { color: #EEF2FF; }
.tb-lead-form-wrap .tb-lead-sucesso p  { color: #8899BB; }

.tb-lead-sucesso p {
  font-size: 14px;
  color: #5566AA;
  line-height: 1.6;
  margin: 0 0 16px;
  font-family: var(--tb-lead-font);
}

.tb-lead-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 24px;
  background: #00E5A0;
  color: #0A0F1E !important;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--tb-lead-font);
  transition: opacity .2s, transform .15s;
  box-shadow: 0 4px 14px rgba(0,229,160,.35);
}

.tb-lead-download-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════
   ESTADO DE ERRO
══════════════════════════════════════════════════ */
.tb-lead-erro {
  background: rgba(255, 107, 107, .12);
  border: 1px solid rgba(255, 107, 107, .3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #FF6B6B;
  margin-top: 10px;
  font-family: var(--tb-lead-font);
  line-height: 1.5;
}

.tb-popup .tb-lead-erro { color: #C0392B; background: #FFF0F0; border-color: #FFCCCC; }

/* ══════════════════════════════════════════════════
   RESPONSIVO
══════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .tb-lead-form-wrap {
    padding: 24px 20px;
    margin: 24px 0;
    border-radius: 10px;
  }
}