:root{
    --gdpbs-bar-h:6px;
    --gdpbs-pt-diam:30px;
    --gdpbs-pt-bg:#fff;
    --gdpbs-pt-col:#7097b6;
    --gdpbs-bar-set:repeating-linear-gradient(45deg,#1ea4ec 0 4px,#1f8bc5 4px 10px);
}

/* ---------------- container ------------------------------------------*/
.gdpbs-progress{
    --gdpbs-step-share:calc(100% / var(--gdpbs-steps));
    position:relative;
    margin:40px 0 30px;
    min-height:calc(var(--gdpbs-pt-diam) + 20px);
    counter-reset:gstep;
}

/* ---------------- baseline (linea azzurra) ---------------------------*/
.gdpbs-progress__base{
    position:absolute;
    left:calc(var(--gdpbs-step-share) / 2);   /* inizio: centro 1° cerchio */
    right:calc(var(--gdpbs-step-share) / 2);  /* fine:   centro ultimo     */
    top:calc(var(--gdpbs-pt-diam) / 2 - var(--gdpbs-bar-h) / 2);
    height:var(--gdpbs-bar-h);
    background:#b7d4e8;
    border-radius:var(--gdpbs-bar-h);
    z-index:0;
}

/* ---------------- barra riempita (strisce) ---------------------------*/
.gdpbs-progress__bar{
    position:absolute;
    left:calc(var(--gdpbs-step-share) / 2);
    top:calc(var(--gdpbs-pt-diam) / 2 - var(--gdpbs-bar-h) / 2);
    height:var(--gdpbs-bar-h);
    width:0;                                  /* cresce via JS */
    background:var(--gdpbs-bar-set);
    border-radius:var(--gdpbs-bar-h);
    transition:width .8s cubic-bezier(.915,.015,.3,1.005);
    z-index:1;
}

/* ---------------- step / cerchi --------------------------------------*/
.gdpbs-progress__step{
    float:left;
    width:var(--gdpbs-step-share);
    text-align:center;
    font-size:14px;
    position:relative;
    cursor:pointer;
    counter-increment:gstep;
}
.gdpbs-progress__step::before{
    content:counter(gstep);
    position:relative;
    z-index:2;
    display:inline-block;
    width:var(--gdpbs-pt-diam);height:var(--gdpbs-pt-diam);
    line-height:calc(var(--gdpbs-pt-diam) - 2px);
    margin-bottom:10px;
    background:var(--gdpbs-pt-bg);
    color:var(--gdpbs-pt-col);
    border-radius:50%;
    border:3px solid var(--bs-primary);
    transition:all .3s;
}
.gdpbs-progress__label{display:block;font-weight:600;color:#23577c;}
.gdpbs-progress__label:empty{display:none;}

.gdpbs-progress__step.active::before{
    background:var(--bs-primary);border-color:var(--bs-primary);color:#fff;
}
.gdpbs-progress__step.completed::before{
    background:var(--bs-primary);border-color:var(--bs-primary);color:#fff;
}

/* ---------------- pulsanti Avanti / Indietro -------------------------*/
.gd-nav{
    margin-top:20px;
    display:flex;
    justify-content:space-between;
    gap:10px;
}
.gd-nav button{
    background:var(--bs-primary,#0d6efd);
    border:none;
    color:#fff;
    padding:8px 22px;
    border-radius:.375rem;
    font-size:14px;
    cursor:pointer;
    transition:opacity .2s;
}
.gd-nav button:hover{opacity:.9;}

/* ---------------- utility --------------------------------------------*/
.gd-pagebreak-marker{display:none!important;}
.gdpbs-progress::after{content:'';display:block;clear:both;}