/* Importa a fonte Poppins do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* Cor personalizada solicitada */
  --gcp-primary: #F5A623;    /* destaque - cor laranja/amarela */
  --gcp-muted:   #9ca3af;    /* cinza do "pendente" */
  --gcp-border:  #e5e7eb;    /* borda pills */
  --gcp-bg:      #ffffff;    /* fundo pills */
  --gcp-text:    #1f1f1f;    /* texto */
}

.gcp-progress { 
  margin: 8px 0 16px; 
  display: flex;
  justify-content: flex-end; /* alinha à direita */
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600; /* peso semi-bold */
}
.gcp-progress__list {
  display: flex;
  align-items: baseline; /* linha de base comum */
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
}
.gcp-progress__item {
  display: inline-block;
}
.gcp-progress__link,
.gcp-progress__stub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  box-sizing: border-box;
  border: 1px solid var(--gcp-border);
  background: var(--gcp-bg);
  border-radius: 999px;
  color: #505050;
  text-decoration: none;
  white-space: nowrap;
}

/* bolinha com o número da etapa */
.gcp-progress__index {
  width: 24px;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid currentColor; /* borda mais fina */
  display: inline-block;
}

/* Estados */
.gcp-progress__item.is-complete .gcp-progress__index {
  background: var(--gcp-primary);
  color: #fff;
  border-color: var(--gcp-primary);
}

.gcp-progress__item.is-current .gcp-progress__link,
.gcp-progress__item.is-current .gcp-progress__stub {
  border-color: var(--gcp-primary);
  border-width: 1px; /* borda mais fina */
}

/* Item atual: laranja no círculo, número e texto */
.gcp-progress__item.is-current .gcp-progress__index {
  color: var(--gcp-primary); /* número laranja */
  border-color: var(--gcp-primary); /* borda do círculo laranja */
  border-width: 1px;
}

.gcp-progress__item.is-current .gcp-progress__label {
  color: var(--gcp-primary); /* texto laranja */
}

/* Item pendente: cinza */
.gcp-progress__item.is-pending .gcp-progress__index {
  color: var(--gcp-muted);
  border-color: var(--gcp-muted);
  border-width: 1px;
}

/* Mobile bem pequeno: mostra apenas os números (sem rótulos) */
@media (max-width: 480px) {
  .gcp-progress__label { display: none; }
  .gcp-progress__link, .gcp-progress__stub { 
    justify-content: center; 
    padding: 6px 8px;
    min-width: 40px;
  }
  .gcp-progress__list {
    gap: 4px; /* reduz espaço entre itens no mobile */
  }
}

/* Tablets e telas médias */
@media (max-width: 768px) {
  .gcp-progress {
    margin: 4px 0 8px;
  }
  .gcp-progress__list {
    gap: 6px;
  }
  .gcp-progress__link, .gcp-progress__stub {
    padding: 6px 10px;
    font-size: 14px;
  }
}