/* fv2026 — checkout step indicator (order-steps.tpl). Linked from the template itself because it is
   also shown on the authentication page. */
.fv-passos { margin: 0 0 24px; }
.fv-passos ol.step { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.fv-passos ol.step > li { position: relative; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; background: none; border: 0; }
/* connector line between circles */
.fv-passos ol.step > li::before { content: ""; position: absolute; top: 17px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px; background: var(--fv-linea, #dde4da); }
.fv-passos ol.step > li.first::before { display: none; }
.fv-passos ol.step > li.step_done::before, .fv-passos ol.step > li.step_current::before { background: var(--fv-verde, #2e6b3a); }
.fv-passos ol.step > li > a, .fv-passos ol.step > li > span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 4px; text-align: center; text-decoration: none; color: var(--fv-gris, #4c5a50); font-size: 15px; line-height: 1.3; }
.fv-passos .fv-paso-n {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--fv-borde, #c5d0c2); background: #fff; color: var(--fv-gris, #4c5a50); font-size: 15px; font-weight: 500;
}
.fv-passos li.step_done .fv-paso-n { border-color: var(--fv-verde, #2e6b3a); color: var(--fv-verde, #2e6b3a); background: var(--fv-verde-claro, #eaf1e7); }
.fv-passos li.step_done a { color: var(--fv-tinta, #14231a); }
.fv-passos li.step_done a:hover .fv-paso-t { text-decoration: underline; text-underline-offset: 3px; }
.fv-passos li.step_current .fv-paso-n { border-color: var(--fv-verde, #2e6b3a); background: var(--fv-verde, #2e6b3a); color: #fff; font-weight: 600; }
.fv-passos li.step_current .fv-paso-t { color: var(--fv-tinta, #14231a); font-weight: 600; }
.fv-passos-movil { display: none; }

/* Promotional message from dwbbarheader (DWB_Mensaje) */
.fv-aviso-promo { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--fv-r-m, 12px); background: var(--fv-promo-fondo, #fff0e2); color: var(--fv-promo, #8a3a0c); font-size: 15px; }
.fv-aviso-promo * { color: inherit !important; background: none !important; font-size: inherit !important; }
.fv-aviso-promo a { text-decoration: underline !important; font-weight: 600; }
.fv-aviso-promo .arrowError, .fv-aviso-promo .clear { display: none; }

@media (max-width: 767px) {
  .fv-passos { margin-bottom: 16px; }
  .fv-passos-movil { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 15px; color: var(--fv-gris, #4c5a50); }
  .fv-passos-barra { flex: 1; height: 6px; border-radius: 3px; background: var(--fv-linea, #dde4da); overflow: hidden; }
  .fv-passos-barra > span { display: block; height: 100%; background: var(--fv-verde, #2e6b3a); border-radius: 3px; }
  .fv-passos ol.step > li::before { top: 13px; left: calc(-50% + 16px); right: calc(50% + 16px); }
  .fv-passos .fv-paso-n { width: 28px; height: 28px; font-size: 13px; }
  .fv-passos .fv-paso-n svg { width: 13px; height: 13px; }
  .fv-passos ol.step > li > a, .fv-passos ol.step > li > span { font-size: 13px; gap: 4px; padding: 0 2px; }
  .fv-passos li:not(.step_current) .fv-paso-t { color: var(--fv-gris-2, #566259); }
}