/* Shared offer creation wizard */
.offer-wizard-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--spacing-xs-plus);
  position: relative;
}

/* Contagem de passos via data-attribute (sem inline style): posiciona a linha
   conectora ::after. Admin usa 7 passos; parceiro 5. Faixa coberta: 1–10. */
.offer-wizard-steps[data-step-count="1"] { --offer-wizard-step-count: 1; }
.offer-wizard-steps[data-step-count="2"] { --offer-wizard-step-count: 2; }
.offer-wizard-steps[data-step-count="3"] { --offer-wizard-step-count: 3; }
.offer-wizard-steps[data-step-count="4"] { --offer-wizard-step-count: 4; }
.offer-wizard-steps[data-step-count="5"] { --offer-wizard-step-count: 5; }
.offer-wizard-steps[data-step-count="6"] { --offer-wizard-step-count: 6; }
.offer-wizard-steps[data-step-count="7"] { --offer-wizard-step-count: 7; }
.offer-wizard-steps[data-step-count="8"] { --offer-wizard-step-count: 8; }
.offer-wizard-steps[data-step-count="9"] { --offer-wizard-step-count: 9; }
.offer-wizard-steps[data-step-count="10"] { --offer-wizard-step-count: 10; }

.offer-wizard-progress-card {
  overflow: hidden;
}

.offer-wizard-progress-card .responsive-tabs-shell {
  margin-bottom: 0;
}

.row.offer-wizard-steps {
  margin-right: 0;
  margin-left: 0;
}

.offer-wizard-steps::after {
  content: "";
  position: absolute;
  top: 18px;
  right: calc(50% / var(--offer-wizard-step-count, 7));
  left: calc(50% / var(--offer-wizard-step-count, 7));
  z-index: 0;
  height: 2px;
  background: var(--color-border-subtle);
}

.offer-wizard-steps .wizard-step {
  display: flex;
  min-width: 0;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-inline: var(--spacing-2xs);
}

.offer-wizard-steps > .col {
  width: auto;
  max-width: none;
  flex: initial;
}

.offer-wizard-steps .step-indicator {
  flex: 0 0 36px;
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  /* Pendente: círculo com ponto interno CINZA (não fica totalmente vazio). */
  background: var(--color-surface-card);
  border: 2px solid var(--color-border-subtle);
  color: var(--bs-secondary-color);
  font-size: 1rem;
  font-weight: 700;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Etapa PENDENTE: ponto interno cinza-claro — padroniza com o auth-stepper, evita o
   círculo totalmente vazio. A ATUAL (cor da marca) e a CONCLUÍDA (check) sobrescrevem. */
.offer-wizard-steps .step-indicator::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-gray-300);
}

/* Concluída mostra o check (bi-check-lg via JS), não o ponto. */
.offer-wizard-steps .wizard-step.is-complete .step-indicator::after {
  display: none;
}

.offer-wizard-steps .step-label {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.offer-wizard-steps .step-help {
  margin-bottom: 0;
  font-size: 0.6875rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.offer-wizard-steps .wizard-step.is-active .step-indicator {
  /* Atual: círculo VAZIO realçado (contorno na cor da marca). */
  background: var(--color-surface-card);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.offer-wizard-steps .wizard-step.is-active .step-indicator::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.offer-wizard-steps .wizard-step.is-active .step-label {
  color: var(--color-primary);
}

.offer-wizard-steps .wizard-step.is-complete .step-indicator {
  /* Concluída: círculo PREENCHIDO com check. */
  background: var(--bs-success);
  border-color: var(--bs-success);
  color: var(--color-text-on-brand);
}

.offer-wizard-steps .wizard-step.is-complete .step-label {
  color: var(--bs-success);
}

@media (max-width: 767.98px) {
  .offer-wizard-progress-card .card-body {
    display: flex;
    min-height: 10.5rem;
    align-items: center;
  }

  .offer-wizard-progress-card .responsive-tabs-shell {
    display: flex;
    align-items: center;
    padding-inline: 2.5rem;
  }

  .offer-wizard-progress-card .responsive-tabs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 1;
  }

  .offer-wizard-progress-card .responsive-tabs-arrow--left {
    left: 0.25rem;
  }

  .offer-wizard-progress-card .responsive-tabs-arrow--right {
    right: 0.25rem;
  }

  .offer-wizard-steps {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .offer-wizard-steps::after {
    top: 2.875rem;
    right: 5rem;
    left: 5rem;
    display: block;
  }

  .offer-wizard-steps .wizard-step {
    flex: 0 0 10rem;
    min-width: 10rem;
    min-height: 6rem;
    justify-content: center;
    scroll-snap-align: start;
  }

  /* px + !important escopado ao wizard (vence a regra do responsive-tabs-shell que herda a
     densidade compacta). Mantém o limite do policy visual: label >= 12px, help >= 10px. */
  .offer-wizard-progress-card .step-label,
  .offer-wizard-steps .step-label {
    font-size: 13px !important;
  }

  .offer-wizard-progress-card .step-help,
  .offer-wizard-steps .step-help {
    font-size: 11px !important;
  }
}