/* ============================================
   PRIMEIROS SABORES — Onboarding Quiz
   ============================================ */

.quiz-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}

/* Topo: voltar + progresso */
.quiz-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 6px;
}
.quiz-back {
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  border: none; background: transparent;
  font-size: 1.4rem; color: var(--color-brown);
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.quiz-back:active { background: var(--color-border-light); }
.quiz-back[hidden] { visibility: hidden; }
.quiz-progress {
  flex: 1; height: 8px;
  background: var(--color-border-light);
  border-radius: 8px; overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-coral), var(--color-amber));
  border-radius: 8px;
  transition: width 350ms ease;
}
.quiz-brand { font-size: 1.5rem; flex-shrink: 0; }

/* Conteúdo do passo */
.quiz-root {
  flex: 1;
  padding: 12px 22px 28px;
  display: flex;
  flex-direction: column;
}
.quiz-step {
  animation: quizIn 320ms ease;
  display: flex;
  flex-direction: column;
  flex: 1;
}
@keyframes quizIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.quiz-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--color-brown);
  line-height: 1.2;
  margin: 6px 0 8px;
}
.quiz-sub {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin-bottom: 18px;
}
.quiz-eyebrow {
  display: inline-block;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--color-secondary); background: var(--color-secondary-light);
  padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 10px;
  align-self: flex-start;
}

/* Opções */
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 15px 16px;
  cursor: pointer;
  font-weight: 700; color: var(--color-text-primary);
  transition: all var(--transition);
  text-align: left;
  font-size: 0.98rem;
}
.quiz-option:active { transform: scale(0.99); }
.quiz-option .opt-emoji { font-size: 1.3rem; flex-shrink: 0; }
.quiz-option .opt-check {
  margin-left: auto; width: 24px; height: 24px; border-radius: var(--radius-full);
  border: 2px solid var(--color-border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem;
  transition: all var(--transition);
}
.quiz-option.selected {
  border-color: var(--color-coral);
  background: var(--color-coral-light);
}
.quiz-option.selected .opt-check {
  background: var(--color-coral); border-color: var(--color-coral);
}

/* Mensagem contextual pós-seleção */
.quiz-ctx {
  margin-top: 14px;
  background: var(--color-secondary-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 0.9rem;
  color: var(--color-secondary-dark);
  animation: quizIn 260ms ease;
}
.quiz-ctx.warm { background: var(--color-amber-light); color: var(--color-amber-dark); }

/* Campo de texto */
.quiz-input {
  width: 100%; box-sizing: border-box;
  padding: 16px 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-body); font-size: 1.15rem; font-weight: 700;
  color: var(--color-text-primary); background: var(--color-bg-card);
  text-align: center;
}
.quiz-input:focus { outline: none; border-color: var(--color-coral); }
.quiz-microtext { font-size: 0.85rem; color: var(--color-text-secondary); text-align: center; margin-top: 12px; }

/* Rodapé com CTA fixo por passo */
.quiz-actions { margin-top: auto; padding-top: 20px; }
.quiz-btn {
  width: 100%; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 800; font-size: 1.05rem;
  padding: 17px 24px; border-radius: var(--radius-pill);
  border: none; cursor: pointer;
  background: var(--color-coral); color: #fff;
  box-shadow: 0 8px 20px rgba(242,112,89,0.32);
  transition: all var(--transition);
}
.quiz-btn:hover { background: var(--color-coral-dark); transform: translateY(-1px); }
.quiz-btn:disabled { background: var(--color-border); color: var(--color-text-light); box-shadow: none; cursor: not-allowed; transform: none; }
.quiz-hint { text-align: center; font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 12px; }

/* Passo 1 — promessa (hero) */
.quiz-hero { text-align: center; align-items: center; justify-content: center; }
.quiz-hero-img {
  width: 100%;
  max-width: 300px;
  margin: 6px auto 4px;
  display: block;
  border-radius: var(--radius-xl);
}
.quiz-hero-mascot {
  width: 150px; height: 150px; margin: 10px auto 6px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 50% 40%, var(--color-coral-light), var(--color-bg-warm));
  display: flex; align-items: center; justify-content: center;
  font-size: 4.6rem; position: relative;
}
.quiz-hero-mascot .float {
  position: absolute; font-size: 1.4rem; animation: floaty 3s ease-in-out infinite;
}
.quiz-hero-mascot .f1 { top: 6px; right: 14px; }
.quiz-hero-mascot .f2 { bottom: 12px; left: 8px; animation-delay: .6s; }
.quiz-hero-mascot .f3 { top: 30px; left: 2px; animation-delay: 1.2s; }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-7px);} }
.quiz-hero .quiz-title { font-size: 1.9rem; }
.quiz-timechip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-lanche-bg, #E8F5E9); color: var(--color-lanche-text);
  font-weight: 800; font-size: 0.8rem; padding: 6px 14px; border-radius: var(--radius-pill);
  margin: 6px 0 4px;
}

/* Passo 8 — processando */
.quiz-processing { align-items: center; justify-content: center; text-align: center; }
.quiz-spinner {
  width: 64px; height: 64px; margin: 0 auto 22px;
  border: 5px solid var(--color-coral-light);
  border-top-color: var(--color-coral);
  border-radius: 50%;
  animation: quizspin 0.9s linear infinite;
}
@keyframes quizspin { to { transform: rotate(360deg); } }
.quiz-proc-steps { list-style: none; padding: 0; margin: 20px 0 0; text-align: left; max-width: 280px; }
.quiz-proc-steps li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; color: var(--color-text-light); font-weight: 700;
  transition: color var(--transition);
}
.quiz-proc-steps li.done { color: var(--color-text-primary); }
.quiz-proc-steps li .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color:#fff; flex-shrink: 0; }
.quiz-proc-steps li.done .dot { background: var(--color-lanche-text); border-color: var(--color-lanche-text); }

/* Passo 9 — diagnóstico */
.quiz-diag-card {
  background: var(--color-bg-card); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.quiz-reco { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--color-divider); }
.quiz-reco:first-child { border-top: none; }
.quiz-reco .r-icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-coral-light); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.quiz-reco .r-text { font-size: 0.92rem; color: var(--color-text-body); font-weight: 600; }

/* Passo 10 — showcase */
.quiz-feature {
  display: flex; gap: 14px; align-items: center;
  background: var(--color-bg-card); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-xs, var(--shadow-card));
}
.quiz-feature .fe-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }
.quiz-feature h3 { font-size: 1.05rem; color: var(--color-text-primary); margin: 0 0 3px; }
.quiz-feature p { margin: 0; font-size: 0.86rem; color: var(--color-text-secondary); }

/* Passo 11 — paywall */
.quiz-offer {
  background: linear-gradient(160deg, #fff, var(--color-coral-light));
  border: 2px solid var(--color-coral); border-radius: var(--radius-2xl);
  padding: 24px; text-align: center; box-shadow: var(--shadow-lg); margin-bottom: 16px;
}
.quiz-offer .tag { display:inline-block; font-size:0.75rem; font-weight:800; background: var(--color-amber-light); color: var(--color-amber-dark); padding:4px 12px; border-radius: var(--radius-pill); }
.quiz-offer .price { font-family: var(--font-display); font-weight: 800; color: var(--color-coral); font-size: 2.8rem; line-height: 1; margin: 10px 0 2px; }
.quiz-offer .once { font-weight: 800; color: var(--color-secondary); font-size: 0.9rem; }
.quiz-incl { list-style: none; padding: 0; margin: 16px 0 0; text-align: left; }
.quiz-incl li { position: relative; padding: 6px 0 6px 28px; color: var(--color-text-body); font-size: 0.92rem; }
.quiz-incl li::before { content: '✓'; position: absolute; left: 4px; color: var(--color-lanche-text); font-weight: 800; }
.quiz-secure { text-align: center; font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 12px; }

.quiz-selcount { font-size: 0.8rem; color: var(--color-text-light); margin-top: 8px; transition: color var(--transition); }
.quiz-selcount.warn { color: var(--color-coral); font-weight: 800; }

/* Shake ao tentar exceder o limite de seleção */
@keyframes quizShake { 10%,90%{transform:translateX(-1px);} 30%,70%{transform:translateX(3px);} 50%{transform:translateX(-4px);} }
.quiz-option.shake { animation: quizShake 0.35s; border-color: var(--color-coral); }

/* Trust row (prova social de lançamento) */
.quiz-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
  margin: 8px 0 4px;
}
.quiz-trust span {
  font-size: 0.8rem; font-weight: 800; color: var(--color-text-secondary);
}

/* Âncora de preço */
.quiz-offer .anchor { font-size: 0.9rem; color: var(--color-text-secondary); font-weight: 700; }
.quiz-offer .anchor s { color: var(--color-text-light); }

/* Garantia no paywall */
.quiz-guarantee {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-secondary-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.quiz-guarantee .qg-badge { font-size: 2rem; flex-shrink: 0; }
.quiz-guarantee strong { color: var(--color-secondary-dark); font-size: 0.95rem; }
.quiz-guarantee span { font-size: 0.85rem; color: var(--color-text-secondary); }