/* ==========================================================================
   style.css
   Estilos do formulário centralizado (uma pergunta por vez, em um cartão
   no meio da tela). Mesma estrutura usada no site de BPC para idosos —
   só a cor de marca (variáveis abaixo) muda para o azul/petróleo da
   Laiza de Souza Advocacia.
   1. Variáveis de tema
   2. Reset básico
   3. Fundo + centralização
   4. Cabeçalho (logo + nome do escritório)
   5. Cartão da pergunta atual
   6. Campo de texto
   7. Botões de opção (múltipla escolha)
   8. Botão "Continuar"
   9. Tela de cálculo (transição)
   10. Botão final (CTA WhatsApp)
   11. Responsividade
   ========================================================================== */

/* ---------- 1. VARIÁVEIS DE TEMA ---------- */
:root {
  --cor-primaria-1: #145c6e;
  --cor-primaria-2: #3f8fa3;
  --cor-primaria-gradiente: linear-gradient(135deg, var(--cor-primaria-1), var(--cor-primaria-2));

  --cor-whatsapp: #22c55e;
  --cor-whatsapp-escuro: #16a34a;

  --cor-fundo: #f2f6f7;
  --cor-texto: #202b2d;
  --cor-texto-suave: #5c6b6e;
  --cor-borda: #dde6e8;

  --fonte-base: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- 2. RESET BÁSICO ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  min-height: 100dvh;
  font-family: var(--fonte-base);
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

/* ---------- 3. FUNDO + CENTRALIZAÇÃO ---------- */
#form-wrapper {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 32px 16px 48px;
}

/* ---------- 4. CABEÇALHO ---------- */
.form-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 28px;
  max-width: 480px;
}

.form-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-primaria-gradiente);
  box-shadow: 0 4px 16px rgba(20, 92, 110, 0.3);
}

.form-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.form-avatar-iniciais {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
}

#form-titulo {
  font-size: 1.15rem;
  font-weight: 700;
}

#form-subtitulo {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

/* ---------- 5. CARTÃO DA PERGUNTA ATUAL ---------- */
#form-conteudo {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: center;
}

.form-card {
  width: 100%;
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 8px 30px rgba(32, 43, 45, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.form-card--visivel {
  opacity: 1;
  transform: translateY(0);
}

.form-texto {
  font-size: 1.05rem;
  line-height: 1.5;
}

.form-texto-sub {
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
  margin-top: -8px;
}

/* ---------- 6. CAMPO DE TEXTO ---------- */
.form-input {
  width: 100%;
  border: 1.5px solid var(--cor-borda);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  color: var(--cor-texto);
  margin-top: 4px;
}

.form-input:focus {
  border-color: var(--cor-primaria-1);
}

/* Campo de texto maior (usado na pergunta de relato livre) */
.form-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.4;
}

/* ---------- 7. BOTÕES DE OPÇÃO (múltipla escolha) ---------- */
.grupo-opcoes-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.btn-opcao-form {
  width: 100%;
  background: #fff;
  color: var(--cor-texto);
  border: 1.5px solid var(--cor-borda);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 0.98rem;
  font-family: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.btn-opcao-form:hover:not(:disabled) {
  border-color: var(--cor-primaria-1);
  background: #f2fafb;
}

.btn-opcao-form:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- 8. BOTÃO "CONTINUAR" ---------- */
.btn-continuar {
  margin-top: 6px;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--cor-primaria-gradiente);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.btn-continuar:hover:not(:disabled) {
  opacity: 0.92;
}

.btn-continuar:active:not(:disabled) {
  transform: scale(0.99);
}

.btn-continuar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- 9. TELA DE CÁLCULO (transição entre perguntas com desvio) ---------- */
.form-calculando {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--cor-borda);
  border-top-color: var(--cor-primaria-1);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
  flex-shrink: 0;
}

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

/* ---------- 10. BOTÃO FINAL (CTA WhatsApp) ---------- */
.btn-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cor-whatsapp);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 14px 18px;
  border-radius: 10px;
  margin-top: 4px;
  transition: background 0.15s ease;
  text-align: center;
}

.btn-cta-whatsapp:hover {
  background: var(--cor-whatsapp-escuro);
}

.btn-cta-whatsapp--secundario {
  background: #fff;
  color: var(--cor-texto);
  border: 1.5px solid var(--cor-borda);
}

.btn-cta-whatsapp--secundario:hover {
  background: #f2fafb;
  border-color: var(--cor-primaria-1);
}

/* ---------- 11. RESPONSIVIDADE ---------- */
@media (max-width: 420px) {
  .form-card {
    padding: 26px 20px;
    border-radius: 14px;
  }

  #form-wrapper {
    padding: 24px 12px 36px;
  }
}

@media (min-width: 700px) {
  #form-wrapper {
    padding-top: 8vh;
  }
}