@charset "UTF-8";

/* ========================================
   Qualificação Pré-Checkout — eNotas
   Visual baseado no protótipo de referência
   ======================================== */

/* ----------------------------------------
   00 — Variáveis
   ---------------------------------------- */
:root {
  --enotas-purple: #6C2BD9;
  --enotas-purple-dark: #5521B5;
  --enotas-purple-light: #EDE9FE;
  --enotas-green: #10B981;
  --enotas-red: #EF4444;
  --enotas-gray-50: #F9FAFB;
  --enotas-gray-100: #F3F4F6;
  --enotas-gray-200: #E5E7EB;
  --enotas-gray-500: #6B7280;
  --enotas-gray-700: #374151;
  --enotas-gray-900: #111827;
}

/* ----------------------------------------
   01 — Reset & Container Principal
   ---------------------------------------- */
#qualificacao-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--enotas-gray-50);
  color: var(--enotas-gray-900);
}

#qualificacao-page *,
#qualificacao-page *::before,
#qualificacao-page *::after {
  box-sizing: border-box;
}

/* Reset global WordPress overrides (tipografia.css, framework.css) */
#qualificacao-page h1,
#qualificacao-page h2,
#qualificacao-page h3,
#qualificacao-page h4,
#qualificacao-page h5,
#qualificacao-page h6 {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: normal !important;
  color: var(--enotas-gray-900) !important;
  font-weight: 700 !important;
}

#qualificacao-page p,
#qualificacao-page span,
#qualificacao-page a,
#qualificacao-page label,
#qualificacao-page li,
#qualificacao-page select,
#qualificacao-page div,
#qualificacao-page button,
#qualificacao-page input {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: inherit;
}

#qualificacao-page ul {
  padding: revert !important;
  margin: revert !important;
}

#qualificacao-page li {
  list-style: revert !important;
}

/* ----------------------------------------
   02 — Header
   ---------------------------------------- */
#qualificacao-header {
  width: 100%;
  background: #fff;
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--enotas-gray-200);
}

#qualificacao-header .qualificacao-logo {
  height: 32px;
  width: auto;
}

/* ----------------------------------------
   03 — Main Content
   ---------------------------------------- */
#qualificacao-page main {
  width: 100%;
  max-width: 640px;
  padding: 2rem 1.5rem;
  flex: 1;
}

/* ----------------------------------------
   04 — Hero (título + subtítulo)
   ---------------------------------------- */
.qualificacao-hero {
  text-align: center;
  margin-bottom: 2rem;
}

.qualificacao-hero h1 {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.5rem;
  color: var(--enotas-gray-900) !important;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: normal !important;
}

.qualificacao-hero p {
  color: var(--enotas-gray-500) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  margin: 0;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ----------------------------------------
   05 — Barra de Progresso
   ---------------------------------------- */
.qualificacao-progress {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.qualificacao-progress-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--enotas-gray-200);
  transition: background 0.3s;
}

.qualificacao-progress-step.active {
  background: var(--enotas-purple);
}

/* ----------------------------------------
   06 — Card
   ---------------------------------------- */
.qualificacao-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
}

/* ----------------------------------------
   07 — Etapas (genérico)
   ---------------------------------------- */
.qualificacao-etapa-pergunta {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
  color: var(--enotas-gray-900);
}

/* ----------------------------------------
   08 — Opções (radio buttons)
   ---------------------------------------- */
.qualificacao-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qualificacao-opcao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--enotas-gray-200);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.95rem;
  color: var(--enotas-gray-900);
  background: #fff;
}

.qualificacao-opcao:hover {
  border-color: var(--enotas-purple);
  background: var(--enotas-purple-light);
}

.qualificacao-opcao.selected {
  border-color: var(--enotas-purple);
  background: var(--enotas-purple-light);
}

.qualificacao-opcao input[type="radio"],
.qualificacao-opcao input[type="checkbox"] {
  display: none;
}

.qualificacao-opcao .radio-custom {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--enotas-gray-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.qualificacao-opcao.selected .radio-custom {
  border-color: var(--enotas-purple);
}

.qualificacao-opcao.selected .radio-custom::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--enotas-purple);
  border-radius: 50%;
}

/* ----------------------------------------
   09 — Campo de CNPJ
   ---------------------------------------- */
.qualificacao-campo-cnpj {
  margin-top: 0.5rem;
}

.qualificacao-campo-cnpj label {
  display: block;
  font-size: 0.875rem;
  color: var(--enotas-gray-500);
  margin-bottom: 0.5rem;
}

.qualificacao-campo-cnpj input[type="text"] {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--enotas-gray-200);
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  color: var(--enotas-gray-900);
}

.qualificacao-campo-cnpj input[type="text"]:focus {
  border-color: var(--enotas-purple);
}

.qualificacao-campo-cnpj input[type="text"].erro {
  border-color: var(--enotas-red);
}

.qualificacao-cnpj-hint {
  font-size: 0.8rem;
  color: var(--enotas-gray-500);
  margin-top: 0.35rem;
}

.qualificacao-cnpj-hint.erro {
  color: var(--enotas-red);
}

/* ----------------------------------------
   10 — Botões de Navegação
   ---------------------------------------- */
.qualificacao-nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.qualificacao-btn {
  padding: 0.75rem 1.75rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  text-decoration: none;
  font-family: inherit;
}

.qualificacao-btn-voltar {
  background: transparent;
  color: var(--enotas-gray-500);
  padding: 0.75rem 1.75rem;
}

.qualificacao-btn-voltar:hover {
  color: var(--enotas-gray-700);
}

.qualificacao-btn-avancar {
  background: var(--enotas-purple);
  color: #fff!important;;
}

.qualificacao-btn-avancar:hover {
  background: var(--enotas-purple-dark);
}

.qualificacao-btn-avancar:disabled {
  background: var(--enotas-gray-200);
  color: var(--enotas-gray-500);
  cursor: not-allowed;
}

/* ----------------------------------------
   11 — Telas de Resultado
   ---------------------------------------- */
.qualificacao-resultado {
  text-align: center;
  padding: 1.5rem 1rem 0.75rem;
}

.qualificacao-resultado-icone {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 2rem;
}

.qualificacao-resultado-icone.success {
  background: #D1FAE5;
}

.qualificacao-resultado-icone.blocked {
  background: #FEE2E2;
}

.qualificacao-resultado h2 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.75rem;
  color: var(--enotas-gray-900) !important;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: normal !important;
}

.qualificacao-resultado p {
  color: var(--enotas-gray-500) !important;
  line-height: 1.6 !important;
  margin: 0 0 1.5rem;
  font-size: 1rem !important;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Botão checkout (aprovado) */
.qualificacao-btn-checkout {
  display: inline-block;
  background: var(--enotas-purple);
  color: #fff !important;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.qualificacao-btn-checkout:hover {
  background: var(--enotas-purple-dark);
}

/* Botão voltar ao site (rejeição) */
.qualificacao-btn-contact {
  display: inline-block;
  background: var(--enotas-gray-100);
  color: var(--enotas-gray-700) !important;
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.qualificacao-btn-contact:hover {
  background: var(--enotas-gray-200);
}

/* ----------------------------------------
   12 — Disclaimer (Tela Aprovado)
   ---------------------------------------- */
.qualificacao-disclaimer {
  background: #FFF7ED;
  border: 1px solid #FDBA74;
  border-radius: 12px;
  padding: 1.25rem;
  margin: 0 0 1.5rem;
  text-align: left;
}

.qualificacao-disclaimer-titulo {
  font-weight: 600;
  color: #9A3412 !important;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.qualificacao-disclaimer ul {
  color: #78350F !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  padding-left: 1.25rem !important;
  margin: 0 !important;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  list-style: disc !important;
}

.qualificacao-disclaimer ul li {
  margin-bottom: 0.25rem;
  display: list-item !important;
  list-style: disc !important;
  color: #78350F !important;
  font-weight: 400 !important;
}

/* ----------------------------------------
   13 — Rodapé
   ---------------------------------------- */
#qualificacao-footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--enotas-gray-500) !important;
  font-size: 12px !important;
}

#qualificacao-footer p {
  margin: 0;
  font-size: 12px !important;
  color: var(--enotas-gray-500) !important;
  line-height: normal !important;
}

/* ----------------------------------------
   14 — Utilitários de Visibilidade
   ---------------------------------------- */
.qualificacao-oculto {
  display: none !important;
}

.qualificacao-step {
  display: none;
}

.qualificacao-step.active {
  display: block;
}

/* ----------------------------------------
   15 — Media Queries — Responsividade
   ---------------------------------------- */
@media only screen and (max-width: 480px) {
  .qualificacao-hero h1 {
    font-size: 1.35rem;
  }

  .qualificacao-hero p {
    font-size: 0.9rem;
  }

  .qualificacao-card {
    padding: 1.25rem;
    border-radius: 12px;
  }

  .qualificacao-etapa-pergunta {
    font-size: 1rem;
  }

  .qualificacao-opcao {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
  }

  .qualificacao-resultado h2 {
    font-size: 1.15rem;
  }

  .qualificacao-resultado p {
    font-size: 0.9rem;
  }

  .qualificacao-btn-checkout {
    padding: 0.875rem 2rem;
    font-size: 0.9rem;
  }
}