.vcp-barra-inferiore {
    display: block;
    border-top: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo-traslucido);
    background: var(--vcp-colore-superficie);
    box-shadow: var(--vcp-ombra-barra);
}

/* Senza sfocatura uno sfondo traslucido lascerebbe leggere i campi che scorrono
   sotto i pulsanti: la trasparenza arriva solo insieme al filtro. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vcp-barra-inferiore {
        background: var(--vcp-colore-superficie-traslucida);
        -webkit-backdrop-filter: var(--vcp-sfocatura-barra);
        backdrop-filter: var(--vcp-sfocatura-barra);
    }
}

.vcp-barra-inferiore__contenuto {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--vcp-spazio-12);
    max-width: var(--vcp-pagina-larghezza-massima);
    margin: 0 auto;
    padding:
        var(--vcp-spazio-12)
        max(var(--vcp-spazio-16), env(safe-area-inset-right))
        max(var(--vcp-spazio-20), env(safe-area-inset-bottom))
        max(var(--vcp-spazio-16), env(safe-area-inset-left));
}

.vcp-barra-inferiore__indietro {
    display: none;
    align-items: center;
    gap: var(--vcp-spazio-8);
    height: var(--vcp-altezza-48);
    margin-right: auto;
    padding: 0 var(--vcp-spazio-20);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo-campo);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-superficie);
    font-size: var(--vcp-testo-15);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-testo-etichetta);
    transition: border-color var(--vcp-durata-rapida);
}

.vcp-barra-inferiore__indietro:hover {
    border-color: var(--vcp-colore-bordo-forte);
}

.vcp-barra-inferiore__indietro i {
    font-size: var(--vcp-testo-13);
}

.vcp-barra-inferiore__totale {
    display: flex;
    flex-direction: column;
    margin-right: auto;
}

.vcp-barra-inferiore__totale-etichetta {
    font-size: var(--vcp-testo-11);
    color: var(--vcp-colore-testo-secondario);
}

.vcp-barra-inferiore__totale-importo {
    font-size: var(--vcp-testo-17);
    font-weight: var(--vcp-peso-grassetto);
    line-height: var(--vcp-interlinea-stretta);
}

.vcp-barra-inferiore__avanti {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--vcp-spazio-10);
    height: var(--vcp-altezza-52);
    padding: 0 var(--vcp-spazio-28);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-primario);
    box-shadow: var(--vcp-ombra-invito);
    font-size: var(--vcp-testo-16);
    font-weight: var(--vcp-peso-semigrassetto);
    white-space: nowrap;
    color: var(--vcp-colore-su-primario);
    transition:
        background-color var(--vcp-durata),
        opacity var(--vcp-durata);
}

.vcp-barra-inferiore__avanti:not([aria-disabled]):hover {
    background: var(--vcp-colore-primario-attivo);
}

.vcp-barra-inferiore--con-totale .vcp-barra-inferiore__avanti {
    flex: none;
}

.vcp-barra-inferiore--pubblica .vcp-barra-inferiore__avanti {
    background: var(--vcp-colore-accento);
    box-shadow: var(--vcp-ombra-invito-accento);
}

.vcp-barra-inferiore--pubblica .vcp-barra-inferiore__avanti:not([aria-disabled]):hover {
    background: var(--vcp-colore-accento-attivo);
}

.vcp-barra-inferiore__avanti-icona {
    display: inline-grid;
    font-size: var(--vcp-testo-13);
}

.vcp-barra-inferiore__caricamento {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.vcp-barra-inferiore__rotella {
    display: inline-grid;
}

/* Etichetta e icona restano al loro posto, solo trasparenti: tengono ferma la
   larghezza del pulsante e continuano a dargli il nome per gli screen reader,
   cosa che visibility: hidden toglierebbe. */
.vcp-barra-inferiore--in-corso .vcp-barra-inferiore__avanti-etichetta,
.vcp-barra-inferiore--in-corso .vcp-barra-inferiore__avanti-icona {
    opacity: 0;
}

.vcp-barra-inferiore--in-corso .vcp-barra-inferiore__avanti {
    cursor: progress;
}

.vcp-barra-inferiore--disabilitato .vcp-barra-inferiore__avanti {
    box-shadow: none;
    opacity: var(--vcp-opacita-disattivato);
    cursor: not-allowed;
}

@media (min-width: 860px) {
    .vcp-barra-inferiore__contenuto {
        padding: var(--vcp-spazio-14) var(--vcp-spazio-48);
    }

    .vcp-barra-inferiore__indietro {
        display: flex;
    }

    .vcp-barra-inferiore__totale {
        margin-right: var(--vcp-spazio-4);
    }

    .vcp-barra-inferiore__avanti {
        flex: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .vcp-barra-inferiore__rotella {
        animation: vcp-barra-inferiore-gira var(--vcp-durata-pulsazione) linear infinite;
    }

    @keyframes vcp-barra-inferiore-gira {
        to {
            transform: rotate(360deg);
        }
    }
}