/* ==================================================
   VIPZUE — COMPONENTE GLOBAL / FORMULÁRIO DE DIAGNÓSTICO
   ================================================== */

.diag-form {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
}

.diag-form.is-open {
  display: block;
}

.diag-form__scrim {
  position: absolute;
  inset: 0;
  background: rgb(var(--carvao-rgb) / 0.82);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.diag-form.is-open .diag-form__scrim {
  opacity: 1;
}

.diag-form__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.98);
  width: min(94vw, 980px);
  max-height: 90vh;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, var(--grafite), var(--carvao) 70%);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7);
  display: grid;
  grid-template-columns: 1fr;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-strong), transform var(--dur-base) var(--ease-out-strong);
}

@media (min-width: 860px) {
  .diag-form__dialog {
    grid-template-columns: 0.85fr 1.15fr;
    max-height: 84vh;
  }
}

.diag-form.is-open .diag-form__dialog {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 640px) {
  /* Full-bleed continua (borda a borda, sem cantos), mas o conteúdo
     deixa de ser "esticado" para preencher a tela inteira: antes
     .diag-form__main ocupava 100vh por herdar stretch do grid, e com
     apenas uma pergunta isso deixava uma aba vazia enorme entre o campo
     e os botões — que ficavam presos lá embaixo, às vezes atrás da
     barra do navegador. Agora o bloco (pergunta + campo + botões) tem
     altura de conteúdo e fica centralizado na tela. dvh acompanha a
     altura visível real do navegador mobile, não a altura "cheia"
     teórica usada por vh. */
  .diag-form__dialog {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: none;
    display: flex;
    flex-direction: column;
  }
  .diag-form.is-open .diag-form__dialog {
    transform: none;
  }
}

.diag-form__bgword {
  position: absolute;
  bottom: -6%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-expressao);
  font-size: clamp(3rem, 3rem + 9vw, 9rem);
  color: var(--marrom);
  opacity: 0.22;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 640px) {
  /* No tamanho do desktop, "DIAGNÓSTICO" pressupõe um cartão alto — no
     card compacto e centralizado do mobile ela ficava grande demais e
     saía cortada pela borda, parecendo um erro de posicionamento. */
  .diag-form__bgword {
    bottom: 4%;
    font-size: clamp(2.25rem, 15vw, 3.5rem);
    opacity: 0.16;
  }
}

.diag-form__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.diag-form__close:hover,
.diag-form__close:focus-visible {
  color: var(--champagne);
  border-color: var(--border-strong);
  transform: rotate(90deg);
}

.diag-form__close svg {
  width: 16px;
  height: 16px;
}

.diag-form__aside {
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-xl) var(--space-lg);
  border-right: 1px solid var(--border-soft);
}

@media (min-width: 860px) {
  .diag-form__aside {
    display: flex;
  }
}

.diag-form__aside-text {
  margin-top: var(--space-md);
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 30ch;
}

.diag-form__progress-wrap {
  margin-top: auto;
}

.diag-form__progress-count {
  font-family: var(--font-acento);
  font-size: var(--fs-small);
  color: var(--champagne);
  letter-spacing: 0.04em;
}

.diag-form__progress-track {
  margin-top: 0.6rem;
  height: 2px;
  background: rgb(var(--champagne-rgb) / 0.16);
  border-radius: 2px;
  overflow: hidden;
}

.diag-form__progress-bar {
  height: 100%;
  width: 14.28%;
  background: linear-gradient(to right, var(--bronze), var(--champagne));
  transition: width var(--dur-base) var(--ease-out);
}

.diag-form__main {
  position: relative;
  z-index: 1;
  padding: var(--space-xl) var(--space-lg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#diag-form-form {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.diag-step {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  animation: diagStepIn var(--dur-base) var(--ease-out-strong);
}

.diag-step.is-active {
  display: flex;
}

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

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

.diag-step__question {
  font-family: var(--font-expressao);
  font-size: var(--fs-h3);
  color: var(--text-primary);
  max-width: 34ch;
}

.diag-field {
  width: 100%;
  padding: 0.9rem 1rem;
  background: rgb(var(--carvao-rgb) / 0.6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.diag-field::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.diag-field:focus-visible {
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px rgb(var(--champagne-rgb) / 0.14);
  outline: none;
}

.diag-field--area {
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-estrutura);
}

.diag-field__label {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.diag-field__hint {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  opacity: 0.7;
}

.diag-field__error {
  min-height: 1.1em;
  font-size: var(--fs-micro);
  color: #e8a389;
}

.diag-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem;
}

.diag-choice {
  padding: 0.85rem 1rem;
  text-align: left;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.diag-choice:hover {
  border-color: var(--border-strong);
}

.diag-choice.is-selected {
  border-color: var(--champagne);
  background: rgb(var(--champagne-rgb) / 0.12);
  color: var(--champagne-claro);
}

.diag-form__controls {
  margin-top: auto;
  padding-top: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.diag-form__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.diag-form__back:hover {
  color: var(--champagne);
}

.diag-form__back[hidden] {
  visibility: hidden;
}

.diag-success {
  margin: auto;
  max-width: 44ch;
  text-align: left;
}

.diag-success__headline {
  font-size: var(--fs-h2);
  margin-block: var(--space-sm);
}

.diag-success__text {
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

/* Precisa vir DEPOIS das regras base acima (mesma especificidade,
   então quem decide é a ordem no arquivo): as declarações de
   .diag-form__main, #diag-form-form e .diag-form__controls no topo do
   arquivo, dentro do @media de 640px, perdiam para estas por estarem
   antes na cascata. */
@media (max-width: 640px) {
  /* Antes .diag-form__main ocupava 100vh por herdar stretch do grid, e
     com apenas uma pergunta isso deixava uma aba vazia enorme entre o
     campo e os botões — que ficavam presos lá embaixo, às vezes atrás
     da barra do navegador. Agora o bloco de conteúdo tem altura própria
     e fica centralizado na tela full-bleed. */
  .diag-form__main {
    flex: 1;
    justify-content: center;
    padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
  }

  #diag-form-form {
    flex: none;
  }

  .diag-form__controls {
    margin-top: var(--space-lg);
    padding-top: 0;
  }
}