/* ─────────────────────────────────────────────
   HORIZONTAL PROGRESS BAR (8 numbered circles)
   ───────────────────────────────────────────── */

/* Wrapper row */

@media (max-width: 767px) {
    #ibc-step-progress-bar .ibc-step-circle {
    position: relative;
    width: 30px ! important;
    height: 30px ! important;
    border-radius: 50%;
    background: #ccc;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 33px ! important;
    text-align: center;
    flex-shrink: 0;
    transition: background .25s ease;
}
  
}



#ibc-step-progress-bar{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:12px;                       /* space between circles */
    margin:32px auto 24px;          /* distance from page content */
    max-width:100%;
    overflow-x:auto;                /* allows sideways scroll on small screens */
}

/* Default (inactive) circle */
#ibc-step-progress-bar .ibc-step-circle{
    position:relative;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#ccc;               /* grey for not-yet-reached steps */
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:42px;              /* perfectly centres number */
    text-align:center;
    flex-shrink:0;                 /* keeps fixed width */
    transition:background .25s ease;
}

#ibc-step-progress-bar .ibc-step-circle:not(:last-child)::after{
    content:'';
    position:absolute;
    top:50%;
    left:100%;
    width:68px;               /* ← was 80px, now 68px            */
    height:4px;
    transform:translateY(-50%);
    background:#ccc;
    z-index:-1;
}
#ibc-step-progress-bar .ibc-step-circle.completed:not(:last-child)::after{
    background:#f8ab53;       /* same green for completed spans */
}
/* Current active circle – ORANGE */
#ibc-step-progress-bar .ibc-step-circle.active{
    background:#f8ab53;            /* Duolingo-style orange */
}

/* Steps already completed – GREEN */
#ibc-step-progress-bar .ibc-step-circle.completed{
    background:#f8ab53;            /* green */
}

/* Connector line: appears after every circle except the last */
/* Hide the connector that follows the second-to-last circle */
#ibc-step-progress-bar .ibc-step-circle:nth-last-child(2)::after{
    display:none !important;
}