.wopb-wrap{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:nowrap;overflow:auto;padding:18px 12px;border-radius:8px;}
.wopb-step{display:flex;flex-direction:column;align-items:center;min-width:120px;text-align:center;}
.wopb-circle{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:4px solid #d0d0d0;background:#fff;box-shadow:0 6px 18px rgba(12,12,12,0.04);font-weight:700;}
.wopb-text{margin-top:8px;font-size:13px;color:#555;max-width:110px;word-wrap:break-word;}
.wopb-connector{height:6px;flex:1;background:#e0e0e0;border-radius:6px;margin:0 6px;min-width:40px;max-width:120px;}
/* states */
.wopb-step.completed .wopb-circle{background:linear-gradient(180deg,#2b8a4a,#1f6f3e);border-color:transparent;color:#fff;}
.wopb-step.current .wopb-circle{background:linear-gradient(180deg,#ffb84d,#ff9a1a);border-color:transparent;color:#fff;}
.wopb-step.upcoming .wopb-circle{background:#f5f5f5;border-color:#cfcfcf;color:#888;}
.wopb-step.cancelled .wopb-circle{background:linear-gradient(180deg,#e74c3c,#c0392b);border-color:transparent;color:#fff;}
/* small screens */
@media (max-width:600px){
  .wopb-step{min-width:84px;}
  .wopb-text{font-size:12px;}
  .wopb-circle{width:38px;height:38px;}
}