/* =========================
   STEPPER PILLS -> CARD LOOK
   - Desktop: grid 8 kolom
   - Mobile: 1 baris sejajar (scroll horizontal)
   ========================= */

#stepperPills{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

/* Tablet: tetap grid tapi 4 kolom */
@media (max-width: 992px){
  #stepperPills{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Mobile: paksa 1 line sejajar 8 tombol (bisa swipe) */
@media (max-width: 520px){
  #stepperPills{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;         /* Firefox */
  }
  #stepperPills::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

  #stepperPills .ppdb-pill{
    flex: 0 0 54px;               /* lebar kartu per angka */
    width: auto;
    padding: 10px 0;
  }
}

/* tombol angka */
#stepperPills .ppdb-pill{
  width: 100%;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 .35rem 1rem rgba(58,59,69,.10);
  padding: 10px 8px;
  font-weight: 900;
  color: #3a3b45;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}

/* hover */
#stepperPills .ppdb-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 .55rem 1.2rem rgba(58,59,69,.14);
  border-color: rgba(0,0,0,.16);
}

/* ACTIVE = TEAL FULL */
#stepperPills .ppdb-pill.active{
  background: #00806f;
  border-color: #00806f;
  color: #ffffff;
  box-shadow: 0 .6rem 1.4rem rgba(0,128,111,.35);
}

/* hover saat active */
#stepperPills .ppdb-pill.active:hover{
  background: #009688;
  border-color: #009688;
}

/* DONE (opsional) */
#stepperPills .ppdb-pill.done{
  border-color: rgba(25,135,84,.35);
  background: rgba(25,135,84,.06);
}