/* =====================================================
   BM-STEPPER — BizMetry Design System
   ===================================================== */

/* ─── Design tokens (inherit from parent context) ── */
.bm-stepper {
  --bm-primary:      #667eea;
  --bm-primary-dark: #764ba2;
  --bm-gradient:     linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --bm-done-bg:      linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --bm-active-glow:  rgba(102, 126, 234, 0.18);
  --bm-inactive:     #d0d4e4;
  --bm-connector:    #e2e6f0;
  --bm-text-active:  #667eea;
  --bm-text-done:    #7986cb;
  --bm-text-idle:    #9aa0b8;
  --bm-ease:         all 0.22s ease;

  /* ── Layout: full-width flat band, no card ── */
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0;
  width:           100%;
  padding:         20px 24px;
  background:      transparent;   /* wrapper provides the background */
  border-radius:   0;
  box-shadow:      none;
  margin:          0;
  position:        relative;      /* no sticky — wizard wrapper handles positioning */
  z-index:         1;
  user-select:     none;
}

/* ─── Step ───────────────────────────────────────── */
.bm-stepper .bm-step {
  position:    relative;
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

/* ─── Circle ─────────────────────────────────────── */
.bm-stepper .bm-step .circle {
  width:           36px;
  height:          36px;
  min-width:       36px;
  min-height:      36px;
  border-radius:   50%;
  border:          2px solid var(--bm-inactive);
  color:           var(--bm-text-idle);
  background:      #ffffff;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     700;
  padding:         0;
  margin-right:    10px;
  transition:      var(--bm-ease);
  box-shadow:      none;
  cursor:          default;
}

.bm-stepper .bm-step .circle.clickable {
  cursor: pointer;
}

.bm-stepper .bm-step .circle.clickable:hover {
  border-color: var(--bm-primary);
  color:        var(--bm-primary);
  background:   rgba(102, 126, 234, 0.06);
  box-shadow:   0 0 0 4px var(--bm-active-glow);
}

/* ─── Circle — active ────────────────────────────── */
.bm-stepper .bm-step.is-active .circle {
  border-color: var(--bm-primary);
  color:        var(--bm-primary);
  background:   #ffffff;
  font-weight:  700;
  box-shadow:   0 0 0 4px var(--bm-active-glow);
}

/* ─── Circle — completed ─────────────────────────── */
.bm-stepper .bm-step.is-completed .circle {
  background:   var(--bm-done-bg);
  border-color: transparent;
  color:        #ffffff;
  box-shadow:   0 2px 8px rgba(102, 126, 234, 0.3);
}

/* ─── md-icon inside circle ──────────────────────── */
.bm-stepper .bm-step .circle md-icon {
  font-size:  18px !important;
  width:      18px !important;
  height:     18px !important;
  color:      inherit !important;
  line-height: 18px;
}

/* ─── Label ──────────────────────────────────────── */
.bm-stepper .bm-step .label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--bm-text-idle);
  white-space: nowrap;
  margin-right: 16px;
  transition:  color 0.2s ease;
  letter-spacing: 0.1px;
}

.bm-stepper .bm-step.is-active .label {
  color:       var(--bm-text-active);
  font-weight: 700;
}

.bm-stepper .bm-step.is-completed .label {
  color: var(--bm-text-done);
}

/* ─── Connector ──────────────────────────────────── */
.bm-stepper .connector {
  width:         72px;
  height:        3px;
  background:    var(--bm-connector);
  border-radius: 2px;
  overflow:      hidden;
  margin-left:   12px;
  margin-right:  8px;
  flex-shrink:   0;
}

.bm-stepper .connector .bar {
  height:        100%;
  background:    var(--bm-gradient);
  border-radius: 2px;
  width:         0%;
  transition:    width 0.3s ease;
}