/* VL Corsi – scheda corso e checkout. Mobile first. */

:root {
    --vl-corsi-accento: #1f5f99;
    --vl-corsi-accento-chiaro: #eef5fb;
    --vl-corsi-bordo: #c3c4c7;
    --vl-corsi-testo: #1d2327;
    --vl-corsi-errore: #b32d2e;
    --vl-corsi-ok: #1a7f37;
}

/* Scelta di chi paga */
.vl-pagatore {
    min-width: 0;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.vl-pagatore__domanda {
    margin-bottom: .6rem;
    padding: 0;
    font-weight: 600;
}

.vl-pagatore__opzioni {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

.vl-pagatore__opzione {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1rem 1rem 3rem;
    border: 2px solid var(--vl-corsi-bordo);
    border-radius: 8px;
    background: #fff;
    color: var(--vl-corsi-testo);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.vl-pagatore__opzione:hover {
    border-color: var(--vl-corsi-accento);
}

.vl-pagatore__opzione.is-selected {
    border-color: var(--vl-corsi-accento);
    background: var(--vl-corsi-accento-chiaro);
    box-shadow: 0 0 0 1px var(--vl-corsi-accento);
}

.vl-pagatore__radio {
    position: absolute;
    top: 1.15rem;
    left: 1rem;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--vl-corsi-accento);
}

.vl-pagatore__radio:focus-visible {
    outline: 3px solid var(--vl-corsi-accento);
    outline-offset: 2px;
}

.vl-pagatore__etichetta {
    font-weight: 600;
}

.vl-pagatore__prezzo {
    font-size: 1.25rem;
    font-weight: 700;
}

.vl-pagatore__totale {
    margin: .75rem 0 0;
    font-weight: 600;
}

/* Il menu delle variazioni e la domanda doppia del form restano nella pagina ma nascosti. */
.vl-pagatore-attivo table.variations,
.vl-pagatore-attivo .reset_variations,
.vl-pagatore-attivo .woocommerce-variation-price,
.vl-pagatore-apf-nascosto {
    display: none !important;
}

/* Prezzi in alto */
.vl-prezzi-pagatore {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.vl-prezzi-pagatore__sep {
    display: none;
}

/* Il widget prezzo di Elementor usa le iniziali maiuscole: qui il testo resta com'è scritto. */
.vl-prezzi-pagatore .vl-prezzo-pagatore__chi {
    font-size: .6em;
    font-weight: 400;
    text-transform: none;
}

.vl-prezzo-pagatore {
    transition: opacity .15s ease;
}

.vl-prezzo-pagatore.is-dimmed {
    opacity: .45;
}

/* Checkout: copia dei dati d'iscrizione */
.vl-corsi-copia-dati {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #f8f9fa;
    color: var(--vl-corsi-testo);
}

.vl-corsi-copia-dati:empty {
    display: none;
}

.vl-corsi-copia-dati__avviso {
    margin: 0;
    font-weight: 600;
    color: var(--vl-corsi-errore);
}

.vl-corsi-copia-dati__bottone.button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    background-color: #0073aa;
    color: #fff;
    white-space: normal;
    cursor: pointer;
}

.vl-corsi-copia-dati__esito {
    margin: 0;
    font-weight: 600;
    color: var(--vl-corsi-ok);
}

.vl-corsi-copia-dati__esito:empty {
    display: none;
}

/* Checkout: accesso ai corsi */
.vl-corsi-accesso {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 2px solid var(--vl-corsi-accento);
    border-radius: 8px;
    background: var(--vl-corsi-accento-chiaro);
    color: var(--vl-corsi-testo);
}

.vl-corsi-accesso__titolo {
    margin: 0 0 .5rem;
    font-size: 1.2em;
}

.vl-corsi-accesso__spiegazione {
    margin: 0 0 1rem;
}

/* Email di fatturazione nascosta: WooCommerce la mette comunque in un paragrafo .form-row. */
.form-row.vl-corsi-nascosto {
    display: none;
}

.vl-corsi-accesso__spiegazione p {
    margin: 0 0 .5rem;
}

.vl-corsi-accesso__spiegazione p:last-child {
    margin-bottom: 0;
}

.vl-corsi-accesso__regole,
.vl-corsi-accesso__login {
    margin: .5rem 0 0;
    font-size: .9em;
}

.vl-corsi-accesso__login a,
.vl-corsi-accesso__collegato strong {
    color: var(--vl-corsi-accento);
}

/* Etichette di stato: colore + icona + testo */
.vl-stato {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.6;
}

.vl-stato--pronto,
.vl-stato--iscritto {
    background: #e7f5ec;
    color: #146c2e;
}

.vl-stato--preparazione {
    background: var(--vl-corsi-accento-chiaro);
    color: var(--vl-corsi-accento);
}

.vl-stato--attesa {
    background: #fff4d6;
    color: #7a4f00;
}

.vl-stato--attivazione {
    background: #f2ecfa;
    color: #5b3591;
}

.vl-stato--scaduto {
    background: #f0f0f1;
    color: #50575e;
}

/* Pagina del corso per chi l'ha già acquistato: niente "Iscriviti" (il widget arriva dalla cache di Elementor) */
.vl-corso-acquistato .elementor-widget-button:has(a[href="#iscrizione_form"]),
.vl-corso-acquistato a[href="#iscrizione_form"] {
    display: none !important;
}

/* Pagina del corso: riquadro per chi l'ha acquistato */
.vl-corso-stato {
    max-width: 32rem;
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: #fff;
    color: var(--vl-corsi-testo);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

/* Dimensione in px: su desktop il tema riduce la dimensione di base e la scheda risulterebbe minuscola. */
.vl-corso-stato,
.vl-corso-stato p,
.vl-corso-stato a {
    font-size: 15px;
    line-height: 1.5;
}

.vl-corso-stato p {
    margin: 0 0 .5rem;
}

.vl-corso-stato p:last-child {
    margin-bottom: 0;
}

.vl-corso-stato .vl-corso-stato__titolo {
    font-size: 17px;
    font-weight: 700;
}

.vl-corso-stato--pronto .vl-corso-stato__icona,
.vl-corso-stato--preparazione .vl-corso-stato__icona,
.vl-corso-stato--iscritto .vl-corso-stato__icona {
    color: #146c2e;
}

.vl-corso-stato__azione .btn-course-popup {
    display: inline-block;
    cursor: pointer;
}

.vl-corso-stato a:not(.btn-course-popup):not(.vl-corso-stato__bottone-secondario) {
    color: var(--vl-corsi-accento);
    text-decoration: underline;
}

/* Chi non ha il corso: stessa scheda, con l'icona nel colore del sito. */
.vl-corso-stato--info .vl-corso-stato__icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: .15rem;
    border-radius: 50%;
    background: var(--vl-corsi-accento-chiaro);
    color: var(--vl-corsi-accento);
    font-size: .8rem;
    font-style: normal;
    font-weight: 700;
}

.vl-corso-stato__sezione {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid #dcdcde;
}

.vl-corso-stato .vl-corso-stato__bottone-secondario {
    display: block;
    padding: .7rem 1rem;
    border: 2px solid var(--vl-corsi-accento);
    border-radius: 6px;
    background: #fff;
    color: var(--vl-corsi-accento);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease;
}

.vl-corso-stato .vl-corso-stato__bottone-secondario:hover {
    background: var(--vl-corsi-accento-chiaro);
}

.vl-corso-stato .vl-corso-stato__bottone-secondario:focus-visible {
    outline: 3px solid var(--vl-corsi-accento);
    outline-offset: 2px;
}

.vl-corso-messaggio {
    margin: .5rem 0;
}

/* I miei corsi */
.vl-miei-corsi__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vl-corso-scheda {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
    color: var(--vl-corsi-testo);
}

.vl-corso-scheda--scaduto {
    opacity: .85;
}

.vl-corso-scheda__immagine {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.vl-corso-scheda__corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 1rem;
}

.vl-corso-scheda__titolo {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.vl-corso-scheda__titolo a {
    color: inherit;
    text-decoration: none;
}

.vl-corso-scheda__titolo a:hover,
.vl-corso-scheda__titolo a:focus-visible {
    text-decoration: underline;
}

.vl-corso-scheda__testo,
.vl-corso-scheda__scadenza {
    margin: 0;
    font-size: .95rem;
}

.vl-corso-scheda__testo a,
.vl-corso-scheda__link {
    text-decoration: underline;
}

.vl-corso-scheda__azione.button {
    margin-top: auto;
    padding: .7rem 1.2rem;
    border-radius: 6px;
    background: var(--vl-corsi-accento);
    color: #fff;
    font-weight: 700;
}

.vl-corso-scheda__azione--secondaria.button {
    border: 2px solid var(--vl-corsi-accento);
    background: #fff;
    color: var(--vl-corsi-accento);
}

.vl-miei-corsi__vuoto {
    padding: 1rem;
    border-radius: 10px;
    background: var(--vl-corsi-accento-chiaro);
}

.vl-miei-corsi__scaduti {
    margin-top: 1.5rem;
}

.vl-miei-corsi__scaduti > summary {
    margin-bottom: 1rem;
    font-weight: 700;
    cursor: pointer;
}

/* Bacheca dell'account */
.vl-bacheca-corsi {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--vl-corsi-accento);
    border-radius: 10px;
    background: var(--vl-corsi-accento-chiaro);
    color: var(--vl-corsi-testo);
}

.vl-bacheca-corsi__titolo {
    margin: 0 0 .75rem;
    font-size: 1.2rem;
}

.vl-bacheca-corsi__lista {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.vl-bacheca-corsi__lista li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
}

.vl-bacheca-corsi__bottone.button {
    background: var(--vl-corsi-accento);
    color: #fff;
}

/* Pagina dopo l'ordine */
.vl-grazie {
    max-width: 44rem;
    margin: 0 auto;
    color: var(--vl-corsi-testo);
}

.vl-grazie h2,
.vl-grazie h3 {
    color: inherit;
}

.vl-grazie__testata {
    margin: 0 0 1.5rem;
    padding: 1.5rem 1.25rem;
    border-radius: 12px;
    background: var(--vl-corsi-accento-chiaro);
    text-align: center;
}

.vl-grazie__testata--pronto,
.vl-grazie__testata--iscritto {
    background: #e7f5ec;
}

.vl-grazie__icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 0 .5rem;
    border-radius: 50%;
    background: #fff;
    font-size: 1.5rem;
}

.vl-grazie__titolo {
    margin: 0 0 .25rem;
    font-size: 1.6rem;
}

.vl-grazie__corso {
    margin: 0 0 .25rem;
    font-weight: 600;
}

.vl-grazie__ordine {
    margin: 0;
    font-size: .9rem;
}

.vl-grazie__sottotitolo {
    margin: 1rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.vl-grazie__nota-passi {
    margin: .35rem 0 0;
    font-size: .95rem;
}

.vl-grazie__nota-passi--elenco {
    margin: 0 0 1rem;
}

.vl-grazie__gia-inviata {
    font-weight: 700;
}

.vl-grazie__azione {
    margin: 1rem 0 0;
}

/* Selettori con .vl-grazie davanti: devono prevalere sugli stili dei bottoni di WooCommerce e del tema. */
.vl-grazie .vl-grazie__bottone.button {
    display: inline-block;
    padding: .8rem 1.5rem;
    border: 2px solid var(--vl-corsi-accento);
    border-radius: 6px;
    background: var(--vl-corsi-accento);
    color: #fff;
    font-weight: 700;
    text-transform: none;
}

.vl-grazie .vl-grazie__bottone--secondario.button {
    background: #fff;
    color: var(--vl-corsi-accento);
}

.vl-grazie .vl-grazie__bottone.button:focus-visible {
    outline: 3px solid var(--vl-corsi-accento);
    outline-offset: 2px;
}

.vl-grazie__scadenza {
    margin: .75rem 0 0;
}

.vl-grazie__passi h3,
.vl-grazie__accesso h3 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.vl-passi {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.vl-passo {
    position: relative;
    display: flex;
    gap: .9rem;
    padding: 0 0 1.25rem;
}

/* Linea verticale che collega i passi */
.vl-passo:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    bottom: 0;
    left: 1rem;
    width: 2px;
    background: #c3c4c7;
}

.vl-passo__numero {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid #8c8f94;
    border-radius: 50%;
    background: #fff;
    font-weight: 700;
}

.vl-passo.is-fatto .vl-passo__numero {
    border-color: #146c2e;
    background: #146c2e;
    color: #fff;
}

.vl-passo.is-attuale .vl-passo__numero {
    border-color: var(--vl-corsi-accento);
    background: var(--vl-corsi-accento);
    color: #fff;
}

.vl-passo__corpo {
    flex: 1;
    min-width: 0;
    padding-top: .2rem;
}

.vl-passo__titolo {
    margin: 0 0 .25rem;
    font-weight: 700;
}

.vl-passo:not(.is-fatto):not(.is-attuale) .vl-passo__titolo {
    color: #50575e;
}

.vl-passo__adesso {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--vl-corsi-accento);
    color: #fff;
    font-size: .75rem;
    vertical-align: middle;
}

.vl-passo__testo {
    margin: 0;
}

.vl-passo__testo a,
.vl-grazie__accesso a:not(.button) {
    text-decoration: underline;
}

.vl-dati {
    margin: .75rem 0 0;
    padding: .75rem 1rem;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
}

.vl-dati > summary,
.vl-grazie__dettagli > summary {
    font-weight: 700;
    cursor: pointer;
}

.vl-dati__elenco {
    margin: .75rem 0 0;
}

.vl-copia {
    padding: .5rem 0;
    border-top: 1px solid #f0f0f1;
}

.vl-copia__etichetta {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #50575e;
}

.vl-copia__valore {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.vl-copia__valore span {
    flex: 1 1 12rem;
}

/* L'IBAN a spaziatura fissa si legge e si controlla meglio. */
#vl-dato-iban {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .02em;
}

.vl-grazie .vl-copia__bottone {
    flex: none;
    min-height: 2.5rem;
    padding: .25rem .9rem;
    border: 1px solid var(--vl-corsi-accento);
    border-radius: 6px;
    background: #fff;
    color: var(--vl-corsi-accento);
    font-size: .9rem;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
}

.vl-grazie .vl-copia__bottone:hover {
    background: var(--vl-corsi-accento-chiaro);
}

.vl-grazie .vl-copia__bottone:focus-visible,
.vl-dati > summary:focus-visible,
.vl-grazie__dettagli > summary:focus-visible {
    outline: 3px solid var(--vl-corsi-accento);
    outline-offset: 2px;
}

.vl-dati__testo {
    margin: .75rem 0 0;
}

.vl-dati__testo pre {
    margin: 0 0 .5rem;
    padding: .75rem;
    border-radius: 6px;
    background: #f6f7f7;
    color: var(--vl-corsi-testo);
    font: inherit;
    font-size: .9rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.vl-grazie__nota {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid #146c2e;
    background: #f6f7f7;
}

.vl-grazie__dettagli {
    margin: 0 0 1.5rem;
    padding: .75rem 1rem;
    border: 1px solid #dcdcde;
    border-radius: 8px;
}

.vl-grazie__dettagli-corpo {
    margin-top: .75rem;
}

.vl-grazie__accesso {
    margin: 0 0 1.5rem;
    padding: 1.25rem;
    border: 2px solid var(--vl-corsi-accento);
    border-radius: 10px;
    background: var(--vl-corsi-accento-chiaro);
}

.vl-grazie__accesso p {
    margin: 0 0 .5rem;
}

.vl-grazie__accesso p:last-child {
    margin-bottom: 0;
}

@media (min-width: 560px) {
    .vl-pagatore__opzioni {
        grid-template-columns: 1fr 1fr;
    }

    .vl-miei-corsi__lista {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    }

    .vl-grazie__testata {
        padding: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vl-pagatore__opzione,
    .vl-prezzo-pagatore,
    .vl-corso-stato .vl-corso-stato__bottone-secondario {
        transition: none;
    }
}