/* ==========================================================
   Tânia Bragança — Formulário de Triagem — v0.2
   Paleta: Sálvia #6E9785 | Cinza-verde #5F625B | Creme #EEEADF | Grafite #2F2F2F
   Ajustes desta versão: fundo mais claro, Montserrat em tudo,
   zero border-radius (tudo em ângulo reto), hover sempre em verde
   (com !important pra não deixar nenhum CSS do tema vazar rosa por cima).
   ========================================================== */

.tf {
  --tf-bg: #E8F0EA;      /* verde-sálvia bem clarinho */
  --tf-text: #2F2F2F;    /* grafite */
  --tf-cream: #EEEADF;
  --tf-sage: #6E9785;    /* verde-sálvia — cor de destaque/ação/hover */
  --tf-sage-dark: #587a68;
  --tf-gray: #5F625B;    /* cinza-verde — seleção */

  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--tf-bg);
  color: var(--tf-text);
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
}

/* Honeypot invisível */
.tf-hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Barra de progresso ---------- */
.tf-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(47, 47, 47, 0.08);
  z-index: 10;
}

.tf-progress-bar {
  height: 100%;
  background: var(--tf-sage) !important;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Palco ---------- */
.tf-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tf-question {
  width: 100%;
  max-width: 620px;
  animation: tfSlideIn 0.4s ease both;
}

.tf-question.tf-leaving { animation: tfSlideOut 0.25s ease both; }

@keyframes tfSlideIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tfSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-28px); }
}

@media (prefers-reduced-motion: reduce) {
  .tf-question,
  .tf-question.tf-leaving { animation: none; }
  .tf-progress-bar { transition: none; }
}

/* ---------- Kicker: badge escuro, sem cantos ---------- */
.tf-kicker {
  display: inline-block;
  background: var(--tf-text) !important;
  color: var(--tf-cream) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 8px !important;
  padding: 12px 22px;
  margin: 0 0 16px;
}

.tf-kicker-serif {
  font-family: 'Montserrat', sans-serif !important;
  font-style: italic;
  font-weight: 600;
}

/* ---------- Título ---------- */
.tf-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(1.6rem, 4.2vw, 2.3rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 26px;
}

.tf-hint {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.5;
}

.tf-error {
  color: #A3342B;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 12px;
  min-height: 1.2em;
}

/* ---------- Input de texto: retangular, borda grafite ----------
   !important + seletor composto: o tema/Elementor tem regras
   específicas pra input que sobrescrevem o estilo do form */
.tf .tf-input {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 2px solid var(--tf-text) !important;
  border-radius: 8px !important;
  background: var(--tf-bg) !important;
  box-shadow: none !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.15rem !important;
  color: var(--tf-text) !important;
  padding: 17px 26px !important;
  outline: none !important;
  transition: border-color 0.2s;
}

.tf .tf-input::placeholder { color: rgba(47, 47, 47, 0.45); }

/* Hover e foco (enquanto preenche): borda vira sálvia */
.tf .tf-input:hover,
.tf .tf-input:focus {
  border-color: var(--tf-sage) !important;
}

/* ---------- Opções: retangular, número em quadrado ---------- */
.tf-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tf-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--tf-text) !important;
  background: var(--tf-bg) !important;
  border: 2px solid var(--tf-text) !important;
  border-radius: 8px !important;
  padding: 15px 22px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Hover: sempre verde-sálvia — !important pra não deixar nenhum
   estilo de tema (ex: cor de acento rosa do Elementor) vazar por cima */
.tf-option:hover {
  border-color: var(--tf-sage) !important;
  background: rgba(110, 151, 133, 0.08) !important;
  color: var(--tf-text) !important;
}

/* Selecionada: fundo sálvia sólido + texto creme */
.tf-option.tf-selected,
.tf-option.tf-selected:hover {
  border-color: var(--tf-sage) !important;
  color: var(--tf-cream) !important;
  background: var(--tf-sage) !important;
}

/* Número da opção: quadrado fino com algarismo */
.tf-option-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  width: 30px;
  height: 30px;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* Badge "atenção prioritária": sempre verde-sálvia, sem cantos */
.tf-option-badge {
  position: absolute;
  top: -13px;
  right: 26px;
  background: var(--tf-sage) !important;
  color: var(--tf-cream) !important;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1;
  padding: 6px 14px;
  border-radius: 8px !important;
  white-space: nowrap;
  z-index: 1;
}

/* ---------- Ações / Botão OK: retangular, sálvia ---------- */
.tf-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 34px;
}

.tf-btn {
  width: 100%;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tf-cream) !important;
  background: var(--tf-sage) !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  padding: 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.tf-btn:hover {
  background: var(--tf-sage-dark) !important;
}

/* ---------- Voltar (todas as perguntas, menos a primeira) ---------- */
.tf-back {
  display: block;
  margin: 18px auto 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tf-text) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.5;
  cursor: pointer;
  padding: 8px 14px;
}

.tf-back:hover,
.tf-back:focus,
.tf-back:active {
  opacity: 0.85;
  color: var(--tf-sage) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------- Pular (ex.: "Prefiro contar direto no WhatsApp") ---------- */
.tf-skip {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--tf-text) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.65;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: center;
}

.tf-skip:hover,
.tf-skip:focus,
.tf-skip:active {
  opacity: 1;
  color: var(--tf-sage) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------- Tela de obrigado ---------- */
.tf-thanks { text-align: left; }

.tf-thanks .tf-title { font-size: clamp(1.7rem, 4.8vw, 2.4rem); }

.tf-thanks-text {
  font-size: 1.15rem;
  line-height: 1.55;
  margin: 16px 0 18px;
  max-width: 560px;
}

.tf-thanks-text strong { font-weight: 700; }

/* Badge "Atenção!" — sálvia escuro, sem cantos */
.tf-kicker--destaque {
  background: var(--tf-sage-dark) !important;
  margin-bottom: 22px;
}

/* Card com fundo grafite — sem cantos */
.tf-gradient-card {
  background: var(--tf-text);
  border-radius: 8px;
  color: var(--tf-cream);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.55;
  padding: 36px 32px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 30px;
}

/* Botão WhatsApp: retangular, sálvia, flutuando suave */
.tf-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tf-cream) !important;
  background: var(--tf-sage);
  border-radius: 8px;
  padding: 19px;
  text-decoration: none;
  animation: tfFloat 2.4s ease-in-out infinite;
  transition: background 0.15s;
}

.tf-wa:hover {
  background: var(--tf-sage-dark) !important;
  animation-play-state: paused;
}

/* Flutuação sutil: sobe 6px e volta, como se respirasse */
@keyframes tfFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .tf-wa { animation: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .tf-stage { padding: 20px 18px; align-items: flex-start; padding-top: 12vh; }
  .tf-option { padding: 14px 18px; font-size: 1rem; }
  .tf-kicker { font-size: 0.88rem; padding: 11px 18px; }
}