/* GeoDirectory PageBreak Steps – bar Box
   v0.4.1 – Desktop orizzontale, Mobile verticale (timeline)
*/

/* ----------------- Box ----------------- */
.step-wizard{ position: relative; margin-bottom: 30px; }
.step-wizard-list{
  background:#fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  color:#333;
  list-style:none;
  border-radius:10px;
  display:flex;
  align-items:center;
  padding:20px 8px 12px;
  position:relative;
  z-index:10;
  overflow:hidden;
}

/* ----------------- Items (orizzontale) ----------------- */
.step-wizard-item{
  padding:0 7px;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
}

/* connettore orizzontale */
.step-wizard-item + .step-wizard-item:after{
  content:"";
  position:absolute;
  left:0; top:20px;
  background: color-mix(in srgb, var(--bs-primary, #6f5a70) 80%, #ffffff 20%);
  width:100%; height:2px;
  transform: translateX(-50%);
  z-index:-1;
}

/* ----------------- Cerchio / check ----------------- */
.progress-count{
  height:40px; width:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-weight:600;
  margin:0 auto;
  position:relative;
  z-index:1;
  color:transparent;
}
.progress-count:after{
  content:"";
  height:40px; width:40px;
  background: var(--bs-primary, #6f5a70);
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  border-radius:50%;
  z-index:-1;
}
.progress-count:before{
  content:"";
  height:10px; width:20px;
  border-left:3px solid #fff;
  border-bottom:3px solid #fff;
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-60%) rotate(-45deg);
  transform-origin:center center;
}

/* stato futuro (pallino piccolo + label attenuata) */
.current-item ~ .step-wizard-item .progress-count:before{ display:none; }
.current-item ~ .step-wizard-item .progress-count:after{ height:10px; width:10px; }
.current-item ~ .step-wizard-item .progress-label{ opacity:.55; }

/* stato corrente (anello) */
.current-item .progress-count{ color: var(--bs-primary, #6f5a70); }
.current-item .progress-count:after{
  background:#fff;
  border:2px solid var(--bs-primary, #6f5a70);
}

/* Titoli */
.progress-label{
  font-size:14px;
  font-weight:600;
  margin-top:10px;
  line-height:1.2;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-width:none;
  overflow-wrap:normal;
  word-break:normal;
}

/* Contatore "corrente/totale" (desktop) */
.step-wizard[data-steps]:after{
  content: attr(data-current) " / " attr(data-steps);
  position:absolute;
  right:12px; top:8px;
  font-size:12px; color:#6c757d;
}

/* ----------------- NAV ----------------- */
.gd-step{
  position:relative;
  padding-bottom:48px;
  margin-bottom:12px;
}
.gd-step::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:#fff;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  border-radius:0;
  pointer-events:none;
}
.gd-nav{ margin-top:24px; display:flex; justify-content:center; gap:32px; }
.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; }

/* ===================================================================== */
/*                            MOBILE VERTICALE                           */
/* ===================================================================== */

.step-wizard.is-vertical:after{ display:none; } /* nasconde contatore */

/* Contenitore verticale */
.step-wizard-list.is-vertical{
  display:block;
  padding:14px 12px 6px 16px; /* aria a sinistra per linea + cerchi */
  position:relative;
}

/* LINEA VERTICALE UNICA (dal primo al last/ghost step) */
.step-wizard-list.is-vertical::before{
  content:"";
  position:absolute;
  left:20px;               /* centro del cerchio (40px/2) */
  top:44px;                /* 14 (padding top lista) + 10 (padding top item) + 20 (raggio cerchio) */
  bottom:44px;             /* 6 (padding bottom lista) + 18 (padding bottom item) + 20 (raggio cerchio) */
  width:2px;
  background: color-mix(in srgb, var(--bs-primary, #6f5a70) 80%, #ffffff 20%);
  z-index:0;
}

/* ogni riga step in verticale: griglia per allineare testo al centro del cerchio */
.step-wizard-list.is-vertical .step-wizard-item{
  display:grid;
  grid-template-columns: 40px 1fr; /* colonna cerchio + testo */
  align-items:center;              /* testo centrato verticalmente rispetto al cerchio */
  column-gap:12px;
  padding:10px 0 18px;
  text-align:left;
  flex:0 1 auto;     /* nessun allungamento a tutta larghezza */
  min-width:auto;
  position:relative;
}

/* disattiva i connettori per-item in verticale (usiamo quello unico del contenitore) */
.step-wizard-list.is-vertical .step-wizard-item + .step-wizard-item:after{ display:none; }

/* cerchio allineato a sinistra */
.step-wizard-list.is-vertical .progress-count{
  margin:0;          /* niente centering */
  justify-self:center;
}

/* testo libero a destra (può andare a capo) e allineato ai pallini */
.step-wizard-list.is-vertical .progress-label{
  margin-top:0;      /* centrato verticalmente */
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-width:none;
}

/* pallino piccolo per gli step futuri (restano invariati) */
.step-wizard-list.is-vertical .current-item ~ .step-wizard-item .progress-count:after{
  height:10px; width:10px;
}

/* ===================================================================== */
/*                    Fallback senza JS (solo mediaquery)                */
/*    Se per qualche motivo il JS non gira, sotto 680px usiamo verticale */
/* ===================================================================== */
@media (max-width: 680px){
  .step-wizard-list{
    display:block;
    padding:14px 12px 6px 16px;
    position:relative;
  }
  .step-wizard-list::before{
    content:"";
    position:absolute;
    left:20px;
    top:44px;
    bottom:44px;
    width:2px;
    background: color-mix(in srgb, var(--bs-primary, #6f5a70) 80%, #ffffff 20%);
    z-index:0;
  }
  .step-wizard-list .step-wizard-item{
    display:grid;
    grid-template-columns: 40px 1fr;
    align-items:center;
    column-gap:12px;
    padding:10px 0 18px;
    text-align:left; flex:0 1 auto; min-width:auto;
    position:relative;
  }
  .step-wizard-list .progress-count{ margin:0; justify-self:center; }
  .step-wizard-list .progress-label{
    margin-top:0; white-space:normal; overflow:visible; text-overflow:clip; max-width:none;
  }
  .step-wizard-list .step-wizard-item + .step-wizard-item:after{ display:none; }
  .step-wizard[data-steps]:after{ display:none; }
}
/* ===================================================================== */
/* Centra la linea verticale con i pallini (cerchio 40px, linea 2px) */
.step-wizard-list.is-vertical::before{
  left: 51px !important;   /* prova 21–22px a seconda del rendering */
}

/* Fallback mobile (quando non c’è la classe .is-vertical) */
@media (max-width:680px){
  .step-wizard-list::before{
    left: 51px !important;
  }
}

/* Fix: rimuovi il check dallo step corrente (evita la striscia bianca) */
.step-wizard-item.current-item .progress-count:before{
  display: none !important;
}