/* ==========================================================================
   Cão Tranquilo — quiz.css
   Estilos da landing (index.html): hero, quiz, upload de foto e processamento.
   ========================================================================== */

/* ---- App shell ---- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.screen { display: none; flex: 1; padding-block: var(--space-6); }
.screen.is-active { display: block; animation: fade-in var(--t); }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   HERO (tela inicial)
   ========================================================================== */
.hero { text-align: center; }
.hero__media {
  margin: var(--space-5) auto var(--space-6);
  max-width: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(160deg, #EAF1EE, #DCE8E3);
  aspect-ratio: 4 / 3;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero h1 { font-size: 1.95rem; margin-bottom: var(--space-3); }
.hero__sub { color: var(--color-text-soft); font-size: 1.05rem; max-width: 34ch; margin-inline: auto; }

.benefits {
  list-style: none;
  padding: 0;
  margin: var(--space-5) auto;
  display: grid;
  gap: var(--space-2);
  max-width: 320px;
  text-align: left;
}
.benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.95rem;
  color: var(--color-text);
}
.benefits li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.8rem;
}

.hero__cta { max-width: 380px; margin: var(--space-5) auto 0; }
.hero__micro { margin-top: var(--space-3); }

/* ==========================================================================
   QUIZ
   ========================================================================== */
.quiz { max-width: var(--maxw); margin-inline: auto; }

/* Barra de progresso */
.progress { margin-bottom: var(--space-6); }
.progress__track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-gray-200);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary-soft), var(--color-primary));
  transition: width var(--t);
}
.progress__label {
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-text-mute);
  font-weight: 600;
}

/* Pergunta */
.question__title {
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
}
.question__help {
  color: var(--color-text-soft);
  font-size: 0.95rem;
  margin-bottom: var(--space-5);
}

/* Opções (botões grandes) */
.options { display: grid; gap: var(--space-3); }
.option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  min-height: 60px;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.option:hover { border-color: var(--color-primary-soft); }
.option:active { transform: scale(0.995); }
.option.is-selected {
  border-color: var(--color-primary);
  background: #F1F7F4;
}
.option__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--color-primary);
}
/* Marca de seleção (checkbox/radio visual) */
.option__mark {
  margin-left: auto;
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-gray-300);
  display: grid; place-items: center;
  transition: all var(--t-fast);
}
.option.is-selected .option__mark {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.option.is-multi .option__mark { border-radius: 8px; }

/* Campo de texto */
.field { display: grid; gap: var(--space-2); }
.field input[type="text"] {
  width: 100%;
  min-height: 58px;
  padding: 0 var(--space-4);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 1.05rem;
  transition: border-color var(--t-fast);
}
.field input[type="text"]:focus { border-color: var(--color-primary); outline: none; }

/* Busca de raça */
.breed-search { margin-bottom: var(--space-3); }
.breed-search input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius);
  font-size: 1rem;
}
.breed-search input:focus { border-color: var(--color-primary); outline: none; }
.custom-breed { margin-top: var(--space-3); }

/* Mensagem de validação */
.form-error {
  color: var(--color-alert);
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 1.2em;
}

/* Navegação do quiz */
.quiz__nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  align-items: center;
}
.quiz__nav .btn--primary { flex: 1; }
.quiz__back {
  flex: 0 0 auto;
  width: auto;
  padding-inline: var(--space-4);
  color: var(--color-text-soft);
}

/* ==========================================================================
   UPLOAD DE FOTO (etapa opcional)
   ========================================================================== */
.photo-step { text-align: center; max-width: 440px; margin-inline: auto; }
.photo-step h2 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.photo-drop {
  margin: var(--space-5) 0;
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  background: var(--color-cream);
}
.photo-drop__preview {
  width: 140px; height: 140px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-surface);
  box-shadow: var(--shadow);
}
.photo-actions { display: grid; gap: var(--space-3); margin-top: var(--space-4); }

/* ==========================================================================
   TELA DE PROCESSAMENTO
   ========================================================================== */
.processing { text-align: center; max-width: 420px; margin-inline: auto; padding-top: var(--space-7); }
.spinner {
  width: 68px; height: 68px;
  margin: 0 auto var(--space-6);
  border-radius: 50%;
  border: 6px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.processing__msg {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  min-height: 1.6em;
  transition: opacity var(--t);
}
.processing__steps {
  list-style: none;
  padding: 0;
  margin: var(--space-6) auto 0;
  display: grid;
  gap: var(--space-2);
  max-width: 280px;
  text-align: left;
}
.processing__steps li {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-text-mute);
  transition: color var(--t);
}
.processing__steps li::before {
  content: "○";
  color: var(--color-gray-300);
}
.processing__steps li.done { color: var(--color-primary); }
.processing__steps li.done::before { content: "✓"; color: var(--color-primary); }

@media (min-width: 720px) {
  .hero h1 { font-size: 2.5rem; }
  .question__title { font-size: 1.75rem; }
}