/* ============================================================
   Wanted Property Request — Stepper navigation (4 etapas)
   Desktop: grid horizontal estilo card — 4 colunas plenas (a row
   inteira e do stepper, sem colunas fantasma).
   Mobile (<=575px): tab bar full-bleed (borda a borda da tela),
   linha de numeros + linha da etapa atual, sem scroll horizontal.
   ============================================================ */

.wizard-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Desktop: o wrapper de items vira ``display: contents`` para que os
   botoes fluam direto no grid do .wizard-stepper. A label da etapa
   atual nao aparece (ja existe no .wizard-step__header de cada step). */
.wizard-stepper__items {
  display: contents;
}

.wizard-stepper__current {
  display: none;
}

.wizard-stepper .stepper-item {
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 1rem;
  padding: 0.75rem 0.85rem;
  background-color: #ffffff;
  color: var(--gf-color-neutral-900);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  appearance: none;
}

.wizard-stepper .stepper-item:hover:not(.is-active) {
  border-color: var(--gf-color-primary-light);
}

.wizard-stepper .stepper-item .stepper-index {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.6rem;
  background-color: rgba(var(--gf-color-primary-rgb), 0.1);
  color: var(--gf-color-primary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
}

.wizard-stepper .stepper-item .stepper-label {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: normal;
}

.wizard-stepper .stepper-item.is-active {
  border-color: var(--gf-color-primary);
  box-shadow: 0 16px 30px -24px rgba(15, 23, 42, 0.5);
}

.wizard-stepper .stepper-item.is-active .stepper-index {
  background-color: var(--gf-color-primary);
  color: var(--gf-color-primary-contrast);
}

.wizard-stepper .stepper-item.is-complete .stepper-index {
  background-color: var(--gf-color-primary-soft);
  color: var(--gf-color-primary);
}

.wizard-stepper .stepper-item.has-validation-error {
  border-color: #dc2626;
}

.wizard-stepper .stepper-item.has-validation-error::after {
  content: '';
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #dc2626;
  border-radius: 50%;
  animation: wizard-pulse-error 2s infinite;
}

.wizard-stepper .stepper-item:focus-visible {
  outline: 3px solid var(--gf-color-focus-ring);
  outline-offset: 3px;
}

@keyframes wizard-pulse-error {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}

/* ============================================================
   Mobile (<=575px) — Tab bar estilo dashboard bottom-nav, mas
   posicionada no TOPO. Mesmo padrao visual: indicador 3px topo
   do item ativo, fundo pill no estado active, items distribuidos
   em flex 1 igual sem scroll horizontal.
   ============================================================ */
@media (max-width: 575.98px) {
  /* I1: tab bar mobile remodelada — 2 linhas verticais:
     1) Linha de numeros (.wizard-stepper__items) — 4 botoes compactos
        com APENAS o numero, alinhados uniformemente.
     2) Linha da label da etapa atual (.wizard-stepper__current) —
        unico texto, centralizado, troca conforme JS atualiza is-current.
     Full-bleed: margin-inline negativa estoura o gutter do container
     ate as bordas da viewport (o overflow-x: clip global em _base.css
     absorve o meio-scrollbar sem quebrar o sticky). */
  .wizard-stepper {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem 0.55rem;
    background: var(--gf-field-bg, #ffffff);
    border: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0;
    box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.35);
    margin-inline: calc(50% - 50vw);
    margin-bottom: 1.25rem;
    /* F2: sticky no topo mobile, logo abaixo do site-header (``.site-header-tw``
       eh sticky com z-index 50 / Tailwind ``z-50``). z-index AQUI precisa ser
       < 50 para o header e seus seletores (avatar-hub, unidade de area) ficarem
       SEMPRE por cima — senao o tab bar fura o header ao rolar / com menu aberto.
       Acima do conteudo do form (z auto) e abaixo do gf-select__panel (z 40). */
    position: sticky;
    top: var(--gf-header-height, 80px);
    z-index: 30;
    scroll-margin-top: var(--gf-header-height, 80px);
  }

  /* I1: wrapper dos botoes vira flex row horizontal. */
  .wizard-stepper__items {
    display: flex;
    gap: 0;
    width: 100%;
  }

  .wizard-stepper .stepper-item {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0.6rem;
    padding: 0.3rem 0.15rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 44px;
    text-align: center;
    color: var(--gf-color-neutral-600);
  }

  .wizard-stepper .stepper-item:hover:not(.is-active) {
    border-color: transparent;
    background-color: rgba(var(--gf-color-primary-rgb), 0.06);
  }

  .wizard-stepper .stepper-item .stepper-index {
    width: 1.85rem;
    min-width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    font-size: 0.88rem;
    font-weight: 700;
    /* J1: transition do scale + shadow para o "rise" 3D suave.
       cubic-bezier com leve overshoot (0.34, 1.56, 0.64, 1) gera
       um micro-bounce que reforca a sensacao de elevacao. */
    transition:
      transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.32s ease,
      background-color 0.2s ease,
      color 0.2s ease;
    will-change: transform;
  }

  /* I1: esconde a label individual dentro do botao — ela so vive
     no .wizard-stepper__current agora. */
  .wizard-stepper .stepper-item .stepper-label {
    display: none;
  }

  .wizard-stepper .stepper-item.is-active {
    background-color: transparent;
    box-shadow: none;
  }

  /* J1: estado ativo. Numeral pintado de primary, ESCALA 1.18 (sutil
     mas visivel) e elevado por uma sombra dupla (uma colorida + uma
     neutra), criando a sensacao 3D de "subiu da superficie". Sem
     barrinha embaixo — o destaque agora eh o proprio circulo. */
  .wizard-stepper .stepper-item.is-active .stepper-index {
    background-color: var(--gf-color-primary);
    color: var(--gf-color-primary-contrast, #ffffff);
    transform: scale(1.18);
    box-shadow:
      0 6px 14px -2px rgba(var(--gf-color-primary-rgb), 0.4),
      0 2px 5px -1px rgba(15, 23, 42, 0.18);
  }

  /* I1: linha de texto separada com a label da etapa ATUAL. Mostra
     apenas o span com .is-current; demais ficam display:none. */
  .wizard-stepper__current {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gf-color-primary);
    padding: 0.25rem 0.5rem 0.05rem;
    line-height: 1.25;
    min-height: 1.4rem;
  }

  .wizard-stepper__current-label {
    display: none;
  }

  .wizard-stepper__current-label.is-current {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-stepper .stepper-item.has-validation-error::after {
    animation: none;
  }
  /* J1: respeita preferencia do sistema — sem bounce/scale animation.
     Mantem o destaque visual (background + sombra) mas sem transicao. */
  .wizard-stepper .stepper-item .stepper-index {
    transition: none;
  }
  .wizard-stepper .stepper-item.is-active .stepper-index {
    transform: none;
  }
}

@media print {
  .wizard-stepper {
    display: none !important;
  }
}