html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

:root {
    --generali-color: #c5281c;
    --welion-red: #b43728;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Utility mancante in questa build Metronic/Bootstrap: senza min-width:0 un flex item
   non scende sotto la larghezza del suo contenuto, quindi text-truncate non tronca e i
   fratelli flex-shrink-0 (es. badge P.IVA) tracimano fuori dal contenitore. */
.min-w-0 {
    min-width: 0;
}

html {
    position: relative;
    min-height: 100%;
    /* Riserva sempre lo spazio della scrollbar verticale: evita il "salto" di layout alla sua
       comparsa/scomparsa e lo sfarfallio nei layout la cui altezza dipende dalla larghezza
       (es. card con aspect-ratio nel catalogo prodotti). */
    scrollbar-gutter: stable;
}

body {
    margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* OVERLOAD */
.menu-link > .menu-title {
    font-family: 'Poppins' !important;
}

.menu-link.active > .menu-title,
.menu-link.active > .menu-icon > i {
    color: var(--generali-color) !important;
}

.nav-line-tabs.nav-line-tabs-2x .nav-item .nav-link.active, 
.nav-line-tabs.nav-line-tabs-2x .nav-item .nav-link:hover:not(.disabled), 
.nav-line-tabs.nav-line-tabs-2x .nav-item.show .nav-link {
    color: var(--generali-color);
    border-bottom-width: 2px;
    font-weight: 500;
}
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled),
.nav-line-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--generali-color);
    color: var(--generali-color);
    transition: color .2s ease;
}

/* Custom typography */
.title-1 {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 600;
}

.title-1-bold {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.title-2 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.title-2-bold {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.title-3 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.title-3-bold {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.label-smallcaps {
    font-variant: small-caps;
    color: var(--bs-text-muted);
}

.label-smallcaps-generali {
    font-variant: small-caps;
    color: var(--generali-color);
}

/* Custom colors */
.bg-generali {
    background-color: var(--generali-color);
}

.text-generali {
    color: var(--generali-color)!important;
}

.generali-gradient {
    background: linear-gradient(180deg, var(--generali-color) 0%, #8b2f25 100%);
}

.bg-generali-gradient {
    background: linear-gradient(90deg, #C13A2A 0%, #FC5A5A 100%);
    border-radius: 20px;
}

/* Custom controls */
.btn-generali {
    color: #fff;
    background-color: var(--generali-color);
    border-color: var(--generali-color);
}

    .btn-generali:hover,
    .btn-generali:focus {
        color: #fff;
        background-color: #a71f15;
        border-color: #a71f15;
    }

    .btn-generali:active {
        color: #fff;
        background-color: #8d1a12;
        border-color: #8d1a12;
    }

.btn-generali-outline {
    color: var(--generali-color);
    background-color: #fff;
    border: 2px solid var(--generali-color) !important;
}

    .btn-generali-outline:hover,
    .btn-generali-outline:focus {
        color: #fff;
        background-color: var(--generali-color);
        border-color: var(--generali-color);
    }

    .btn-generali-outline:active {
        color: #fff;
        background-color: #8d1a12;
        border-color: #8d1a12;
    }

.webinar-img-wrapper {
    width: 181px;
    height: 117px;
    overflow: hidden;
    flex-shrink: 0;
}

.webinar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.welion-modal-content {
    background: white;
    border-radius: 18px;
}

.welion-card-container {
    width: 330px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    background: white;
}

/* Top section */
.welion-card-top {
    background: #C62827;
    color: white;
    padding: 24px 16px;
}

.welion-scadenza {
    font-size: 14px;
    margin-top: 25px;
    margin-bottom: 10px;
}

/* Divider (dotted) */
.welion-divider {
    border-bottom: 2px dashed white;
    background: #C62827;
}

/* Bottom section */
.welion-card-bottom {
    background: #C62827;
    color: white;
    padding: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.welion-nome {
    font-size: 18px;
    margin-bottom: 9px;
}

.welion-cf-box {
    background: white;
    color: #C62827;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    min-width: 180px;
    font-size: 14px;
    border: 1px solid #ddd;
}

.welion-logo {
    width: 160px;
}

.welion-generali-logo {
    width: 50px;
    opacity: .9;
}

.sinistro-row {
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb;
}

    .sinistro-row:hover {
        background-color: rgba(193, 28, 24, 0.05); /* light generali red tint */
    }

/* MARKETING */
.carousel-indicators-active-danger .active {
    background-color: var(--generali-red-dark) !important;
}

.pacchetto {
    cursor: pointer;
}

    .pacchetto:hover {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border: 1px solid #717375;
        background-color: white;
    }

    .pacchetto .separator {
        margin-top: 8px;
        margin-bottom: 6px;
    }

    .pacchetto.active {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border: 1px solid var(--generali-red) !important;
        background-color: white;
    }

/* ============================================================================
   ADESIONI — modulo Premessa (corpo HTML editoriale)
   Scope-ato su .contenuto-premessa per non sporcare il chrome della pagina.
   Stessi font del layout (Poppins/Roboto già caricati dal _Layout_NA) e
   palette riallineata al token --generali-color esistente.
   ============================================================================ */
.contenuto-premessa {
    --premessa-dark: #181c32;
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--premessa-dark);
    background-color: transparent;
}

    .contenuto-premessa h1,
    .contenuto-premessa .h1,
    .contenuto-premessa h2,
    .contenuto-premessa .h2,
    .contenuto-premessa h3,
    .contenuto-premessa .h3 {
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        color: var(--premessa-dark);
        margin: 1em 0 0.5em;
        line-height: 1.3;
    }

    .contenuto-premessa h1, .contenuto-premessa .h1 { font-size: 20px; }
    .contenuto-premessa h2, .contenuto-premessa .h2 { font-size: 18px; }
    .contenuto-premessa h3, .contenuto-premessa .h3 { font-size: 16px; }

    .contenuto-premessa p,
    .contenuto-premessa ul,
    .contenuto-premessa ol {
        margin: 0 0 1em;
    }

    .contenuto-premessa a {
        color: var(--generali-color);
        text-decoration: underline;
    }

        .contenuto-premessa a:hover {
            text-decoration: none;
        }

    .contenuto-premessa strong,
    .contenuto-premessa b {
        font-weight: 700;
    }

    .contenuto-premessa .text-dark {
        color: var(--premessa-dark) !important;
    }

    .contenuto-premessa .text-generali {
        color: var(--generali-color) !important;
    }

    .contenuto-premessa .bg-generali {
        background-color: var(--generali-color) !important;
        color: #fff;
    }

        .contenuto-premessa .bg-generali a,
        .contenuto-premessa .bg-generali strong,
        .contenuto-premessa .bg-generali b {
            color: #fff;
        }

    .contenuto-premessa table {
        width: 100%;
        border-collapse: collapse;
        border: 0;
        margin: 0 0 1em;
    }

        .contenuto-premessa table th,
        .contenuto-premessa table td {
            border: 0;
            padding: 0.5em 0.75em;
            vertical-align: top;
            text-align: left;
        }

        .contenuto-premessa table th {
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
        }

    .contenuto-premessa ::selection {
        background-color: var(--generali-color);
        color: #fff;
    }

    /* Guard per asset oversize prodotti dall'operatore TinyMCE: immagini incollate
       a piena risoluzione vanno limitate al container, mai sfondare il layout. */
    .contenuto-premessa img {
        max-width: 100%;
        height: auto;
    }

    /* Tabelle dentro il wrapper .table-responsive (aggiunto a runtime dallo script
       della view): rimuoviamo il "width: 100%" forzato così il browser preserva la
       larghezza naturale del contenuto e attiva lo scroll orizzontale quando serve.
       Senza questa override le celle si comprimono e il wrap forza testo verticale
       illeggibile invece di scrollare. */
    .contenuto-premessa .table-responsive > table {
        width: auto;
        min-width: 100%;
    }

/* ============================================================================
   ADESIONI — Pagina B Compilazione
   Pattern: sticky-top SelezionePolizza + box premio + progress indicator laterale.
   ============================================================================ */

/* Bullet numerico delle sezioni (step "1", "2", ...). Variante "active" = sfondo
   pieno generali, "pending" = bordo light con numero in muted. */
.adesione-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

/* Sticky-top di SelezionePolizza: l'utente la vede sempre durante lo scroll
   della pagina, mantiene contesto della scelta corrente. Attiva solo lg+ —
   su mobile lasciamo scroll lineare per non sacrificare verticale prezioso. */
@media (min-width: 992px) {
    .adesione-sticky-top {
        position: sticky;
        top: 16px;
        z-index: 10;
    }
}

/* Progress indicator laterale (sticky sotto lg, in linea col contenuto). */
.adesione-progress {
    padding: 1rem 0;
    top: 16px;
}

    .adesione-progress ol {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

@media (min-width: 992px) {
    .adesione-progress ol {
        flex-direction: column;
        overflow-x: visible;
        gap: 0.75rem;
    }
}

.adesione-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    background-color: #f6f6f7;
    color: #5c636a; /* A11Y-11: #6c757d su #f6f6f7 era ~4.3:1 */
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    transition: background-color .2s ease, color .2s ease;
    flex-shrink: 0;
}

.adesione-step-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #5c636a; /* A11Y-11 */
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.adesione-step-done {
    background-color: rgba(197, 40, 28, 0.08);
    color: var(--generali-color);
}

    .adesione-step-done .adesione-step-bullet {
        background-color: var(--generali-color);
        color: #fff;
    }

.adesione-step-current {
    background-color: rgba(197, 40, 28, 0.15);
    color: var(--generali-color);
    box-shadow: inset 3px 0 0 var(--generali-color);
}

/* Sezione "bloccata": opacità ridotta + niente interazione finché la polizza
   non è stata scelta. Si applica via JS aggiungendo/rimuovendo la classe sui
   .adesione-section successivi al primo. */
.adesione-section.is-locked {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.4);
    transition: opacity .25s ease, filter .25s ease;
}

/* Step "locked": niente attenuazione del testo (resterebbe sotto contrasto). Lo stato è
   già comunicato da done/current; il colore base #5c636a è conforme. Le SEZIONI locked
   restano attenuate ma sono inert (gating + esenti dal contrasto). */
.adesione-step.is-locked {
    opacity: 1;
}

/* ============================================================================
   ADESIONI — Box "La tua scelta" (layout compatto 2 righe)
   Riga 1 = titolo H3 sopra
   Riga 2 = grid "Polizza | Premio". Premio è sub-grid "Assicurato | Nucleo"
   (o solo Assicurato se Nucleo non visibile). Su mobile stack verticale.
   ============================================================================ */
.np-scelta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: 0.5rem 1.5rem;
    align-items: start;
}

    /* Variante quando nessun premio è da mostrare (entrambi i flag config off):
       collassa a colonna unica così la cella Polizza occupa tutta la larghezza. */
    .np-scelta-grid.np-scelta-grid-no-premio {
        grid-template-columns: 1fr;
    }

@media (max-width: 575.98px) {
    .np-scelta-grid {
        grid-template-columns: 1fr;
    }
}

.np-scelta-premi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}

    .np-scelta-premi[data-cols="1"] {
        grid-template-columns: 1fr;
    }

@media (max-width: 575.98px) {
    .np-scelta-premi {
        grid-template-columns: 1fr;
    }
}

.np-scelta-value {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    margin-top: 0.15rem;
}

.np-scelta-subhead {
    font-family: 'Roboto', sans-serif;
    font-variant: small-caps;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.1rem;
}

.np-scelta-importo {
    font-weight: 700;
}

.np-scelta-suffix {
    font-weight: 400;
    font-size: 13px;
    opacity: 0.7;
    margin-left: 0.15rem;
}

    /* Icone dentro la suffix: bypassano l'opacity ridotta del parent così
       l'eventuale info icon resta leggibile anche su sfondo dark. */
    .np-scelta-suffix .svg-inline--fa,
    .np-scelta-suffix i[class*="fa-"] {
        opacity: 1;
        font-size: 14px;
        vertical-align: -1px;
        margin-left: 0.2rem;
    }

.np-scelta-sep {
    margin: 0 0.4rem;
    opacity: 0.5;
}

/* ============================================================================
   ADESIONI — sezione Allegati / Documenti
   Una card per ogni TipoAllegatoConfig: titolo + badge obbligatorio/opzionale,
   uploader cliccabile, lista dei file caricati con possibilità di elimina.
   ============================================================================ */

.np-allegati-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.np-allegato-card {
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 1.25rem;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .np-allegato-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: 1.5rem;
        align-items: start;
    }
}

    .np-allegato-card:hover {
        border-color: rgba(197, 40, 28, 0.25);
    }

.np-allegato-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.np-allegato-uploader {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.np-allegato-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem;
    border: 2px dashed #d1d3d6;
    border-radius: 12px;
    background-color: #fafafa;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    margin-bottom: 0;
}

    .np-allegato-dropzone:hover {
        border-color: var(--generali-color);
        background-color: rgba(197, 40, 28, 0.03);
    }

    .np-allegato-dropzone:focus-within {
        outline: none;
        border-color: var(--generali-color);
        box-shadow: 0 0 0 0.2rem rgba(197, 40, 28, 0.18);
    }

.np-allegato-files {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.np-allegato-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background-color: rgba(197, 40, 28, 0.05);
    font-size: 14px;
}

.np-allegato-file-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #181c32;
    text-decoration: none;
    font-weight: 500;
}

    .np-allegato-file-name:hover {
        color: var(--generali-color);
        text-decoration: underline;
    }

.np-allegato-file-size {
    color: #5c636a; /* A11Y-11: #6c757d sotto soglia su sfondi tenui */
    font-size: 12px;
    flex-shrink: 0;
}

/* ============================================================================
   ADESIONI — sezione Nucleo familiare
   Switch principale "voglio estendere" + lista dinamica di card-membro.
   ============================================================================ */

.np-nucleo-switch .form-check-input {
    width: 3em;
    height: 1.5em;
    margin-top: 0.25rem;
}

.np-nucleo-switch .form-check-input:checked {
    background-color: var(--generali-color);
    border-color: var(--generali-color);
}

.np-nucleo-membri {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.np-nucleo-membro {
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 1.25rem;
    background-color: #fff;
    transition: border-color .15s ease;
}

    .np-nucleo-membro:hover {
        border-color: rgba(197, 40, 28, 0.25);
    }

.np-nucleo-membro-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #e9ecef;
}

/* Card tile selezionabili della scelta polizza. Griglia responsive: una colonna
   su xs, due su sm, tre su lg+. Pattern radiogroup, ciascuna tile è un <button>
   con role=radio e stato visivo via classe .is-selected. */
.np-polizza-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .np-polizza-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .np-polizza-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.np-polizza-tile {
    appearance: none;
    background-color: #fff;
    border: 2px solid #e9ecef;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .1s ease;
    font-family: 'Roboto', system-ui, sans-serif;
    color: #181c32;
}

    .np-polizza-tile:hover {
        border-color: rgba(197, 40, 28, 0.4);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    }

    .np-polizza-tile:focus-visible {
        outline: none;
        border-color: var(--generali-color);
        box-shadow: 0 0 0 0.2rem rgba(197, 40, 28, 0.18);
    }

    .np-polizza-tile.is-selected {
        border-color: var(--generali-color);
        background-color: rgba(197, 40, 28, 0.04);
        box-shadow: 0 4px 14px rgba(197, 40, 28, 0.55);
    }

.np-polizza-tile-num {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.np-polizza-tile-label {
    font-family: 'Roboto', sans-serif;
    font-variant: small-caps;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--generali-color);
}

.np-polizza-tile-num-value {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #181c32;
}

.np-polizza-tile-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--generali-color);
    line-height: 1.2;
}

.np-polizza-tile-price {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px dashed #e9ecef;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.np-polizza-tile-price-value {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #181c32;
}

.np-polizza-tile.is-selected .np-polizza-tile-price-value {
    color: var(--generali-color);
}

.np-polizza-tile-price-suffix {
    font-size: 12px;
    color: #5c636a; /* A11Y-11: #6c757d sotto soglia su sfondi tenui */
}

/* ============================================================================
   ADESIONI — strategia tipografica unificata
   ----------------------------------------------------------------------------
   Titoli e label adottano la palette --generali-color con weight light (300),
   per un look meno "premuto" e più premium. Le label sono sempre in small-caps.
   Quando questi elementi vivono dentro un contenitore .generali-gradient (box
   dark), il colore passa a bianco/bianco-soft per restare leggibile.
   ============================================================================ */

.adesione-titolo {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.2;
    color: var(--generali-color);
    margin-bottom: 0;
}

.adesione-sottotitolo {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.2;
    color: var(--generali-color);
    margin-bottom: 0;
}

.adesione-label {
    font-family: 'Roboto', sans-serif;
    font-variant: small-caps;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--generali-color);
    margin-bottom: 0.25rem;
}

/* Override per i contenitori con sfondo brand dark: i titoli e le label che
   in default sarebbero generali-red diventano bianchi, perché su sfondo rosso
   sarebbero illeggibili. */
.generali-gradient .adesione-titolo,
.generali-gradient .adesione-sottotitolo,
.bg-generali .adesione-titolo,
.bg-generali .adesione-sottotitolo {
    color: #fff;
}

.generali-gradient .adesione-label,
.bg-generali .adesione-label {
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   WELION CARD — flyer + overlay full-screen + carta tessera
   ========================================================================== */

/* ----- Flyer di accesso sulla Index — pannello compatto in fondo ------------- */
.welion-flyer {
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--welion-red) 0%, #8d2a1d 100%);
    color: #fff;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    box-shadow: 0 10px 28px -10px rgba(180, 55, 40, 0.55);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}

    .welion-flyer:hover,
    .welion-flyer:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 18px 36px -12px rgba(180, 55, 40, 0.7);
        outline: none;
    }

.welion-flyer__brand {
    flex-shrink: 0;
    width: 120px;
    max-width: 42%;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

.welion-flyer__body {
    flex: 1;
    min-width: 0;
}

.welion-flyer__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 4px 0;
    line-height: 1.25;
}

.welion-flyer__subtitle {
    font-size: .9rem;
    margin: 0;
    color: rgba(255,255,255,.85);
    line-height: 1.35;
}

.welion-flyer__cta {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background .25s ease, transform .25s ease;
}

.welion-flyer:hover .welion-flyer__cta {
    background: rgba(255,255,255,.3);
    transform: translateX(3px);
}


/* ----- Overlay full-screen --------------------------------------------------- */
.welion-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(10, 10, 12, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 32px 16px 48px;
    opacity: 0;
    transition: opacity .25s ease;
}

    .welion-overlay[hidden] { display: none; }

    .welion-overlay.is-visible { opacity: 1; }

.welion-overlay__inner {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: auto;
    transform: translateY(8px);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.welion-overlay.is-visible .welion-overlay__inner {
    transform: translateY(0);
}

.welion-overlay__close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background .2s ease;
    z-index: 1;
}

    .welion-overlay__close:hover,
    .welion-overlay__close:focus-visible {
        background: rgba(255,255,255,.22);
        outline: none;
    }

.welion-overlay__title {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    margin: 0;
    text-align: center;
}

.welion-overlay__subtitle {
    color: rgba(255,255,255,.7);
    font-size: .92rem;
    margin: 0 0 8px 0;
    text-align: center;
}

/* ----- Container idoneità (uno per polizza) --------------------------------- */
.welion-idoneita {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}

    .welion-idoneita.is-active {
        display: flex;
    }

/* ----- Carousel -------------------------------------------------------------- */
.welion-carousel {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

.welion-carousel__viewport {
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    perspective: 1200px;
}

.welion-carousel__track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 30px 0 0;
    border-radius: 16px;
    scrollbar-width: none;
}

    .welion-carousel__track::-webkit-scrollbar {
        display: none;
    }

.welion-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background .2s ease, transform .2s ease;
}

    .welion-arrow:hover:not(:disabled),
    .welion-arrow:focus-visible:not(:disabled) {
        background: rgba(255,255,255,.28);
        outline: none;
    }

    .welion-arrow:disabled {
        opacity: .3;
        cursor: default;
    }

@media (max-width: 575.98px) {
    .welion-arrow {
        position: absolute;
    }

        .welion-arrow--prev {
            left: -4px;
        }

        .welion-arrow--next {
            right: -4px;
        }

    .welion-carousel {
        position: relative;
    }
}

/* ----- La tessera -------------------------------------------------------------
   Aspect-ratio fedele a una tessera standard ID-1 piegata in due
   (85.6 × 53.98 × 2 = 85.6 × 107.96 mm → ratio ~0.793). */
.welion-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
    width: 100%;
    aspect-ratio: 85.6 / 107.96;
    max-width: 360px;
    margin: 0 auto;
    /* La "valle" della piega: rosso scuro che resta visibile nel piccolo gap tra
       le due metà, dando l'effetto del cartoncino piegato. */
    /*background: #6b1d14;*/
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px -25px rgba(0,0,0,.55),
                0 12px 22px -8px rgba(0,0,0,.35);
    position: relative;
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    will-change: transform;
    user-select: none;
}

    .welion-card:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 6px;
    }

.welion-card__top {
    flex: 1 1 50%;
    background: var(--welion-red);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    /* Angoli esterni grandi, angoli interni (verso la piega) ridotti = realismo piega */
    border-radius: 18px;
}

.welion-card__brand {
    width: 70%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

.welion-card__scadenza {
    color: rgba(255,255,255,.92);
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: .3px;
    font-family: 'Poppins', sans-serif;
}

/* La piega: piccolo solco di colore rosso scuro (background della .welion-card)
   con linea tratteggiata bianca a metà altezza. */
.welion-card__fold {
    height: 6px;
    background: transparent;
    position: relative;
    flex-shrink: 0;
}

    .welion-card__fold::after {
        content: '';
        position: absolute;
        left: 18px;
        right: 18px;
        top: 50%;
        height: 0;
        border-top: 1.5px dashed rgba(255,255,255,.55);
    }

.welion-card__bottom {
    flex: 1 1 50%;
    background: var(--welion-red);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.welion-card__bottom__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 22px;
}

.welion-card__nome {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    text-align: center;
    line-height: 1.25;
    letter-spacing: .3px;
}

.welion-card__cf {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: .92rem;
    color: rgba(255,255,255,.88);
    letter-spacing: 1.5px;
}

/* Cornice bianca centrale al fondo della metà inferiore: incornicia il logo Generali */
.welion-card__footer {
    background: #fff;
    padding: 14px 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .welion-card__footer img {
        height: 28px;
        width: auto;
        display: block;
        margin-left: 110px;
    }

/* ----- Selettore componenti del nucleo: un bottone-tab per soggetto ---------- */
.welion-member-switcher {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

.welion-member-switcher__btn {
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    font-size: .9rem;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s ease;
    font-family: 'Poppins', sans-serif;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .welion-member-switcher__btn:hover,
    .welion-member-switcher__btn:focus-visible {
        background: rgba(255,255,255,.18);
        color: #fff;
        outline: none;
    }

    .welion-member-switcher__btn.is-active {
        background: #fff;
        color: var(--welion-red);
        border-color: #fff;
        font-weight: 500;
    }

/* ----- Azioni footer --------------------------------------------------------- */
.welion-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
    width: 100%;
    max-width: 360px;
}

.welion-action {
    flex: 1 1 auto;
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: .92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .2s ease;
    min-height: 46px;
}

.welion-action--primary {
    background: #fff;
    color: var(--generali-color);
}

    .welion-action--primary:hover,
    .welion-action--primary:focus-visible {
        background: #f0f0f0;
        outline: none;
    }

    .welion-action--primary:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

.welion-action--ghost {
    background: transparent;
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.3);
}

    .welion-action--ghost:hover,
    .welion-action--ghost:focus-visible {
        background: rgba(255,255,255,.1);
        color: #fff;
        outline: none;
    }

/* ----- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .welion-overlay,
    .welion-overlay__inner,
    .welion-card,
    .welion-flyer {
        transition: none !important;
    }
}

/* ----- Body lock quando overlay aperto -------------------------------------- */
body.welion-overlay-open {
    overflow: hidden;
}

/* ----- Accessibilità: focus visibile sulle righe-elenco che aprono un drawer -
   (rb-row / sv-row / mr-row / trt-row). Rese azionabili da tastiera con
   role="button" + tabindex="0"; qui il focus deve essere ben percepibile. -------- */
[data-drawer-url] {
    cursor: pointer;
}
[data-drawer-url]:focus-visible {
    outline: 2px solid var(--generali-color, #c11c18);
    outline-offset: 2px;
}

/* ----- Accessibilità: skip-link "salta al contenuto" ------------------------
   Nascosto da .visually-hidden-focusable (Bootstrap) finché non riceve focus
   da tastiera; qui ne definiamo posizione e aspetto da visibile. ---------------- */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible {
    margin: .5rem;
    padding: .6rem 1rem;
    background: #fff;
    color: var(--generali-color, #c11c18);
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    outline: 2px solid var(--generali-color, #c11c18);
    outline-offset: 2px;
}

/* ----- Accessibilità: ripristino del focus visibile dove era stato rimosso con
   outline:none. Regole :focus-visible dedicate (solo tastiera) che, venendo dopo,
   sovrascrivono l'outline:none senza alterare hover/mouse. ---------------------- */
.np-allegato-dropzone:focus-within,
.np-polizza-tile:focus-visible {
    outline: 2px solid var(--generali-color, #c11c18);
    outline-offset: 2px;
}
.welion-flyer:focus-visible,
.welion-overlay__close:focus-visible,
.welion-arrow:focus-visible:not(:disabled),
.welion-member-switcher__btn:focus-visible,
.welion-action--primary:focus-visible,
.welion-action--ghost:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ----- Accessibilità: fallback di focus visibile da tastiera ------------------
   Il tema Metronic sopprime l'outline su vari controlli standard. Questi selettori
   per tag hanno bassa specificità: fanno da rete di sicurezza senza sovrascrivere
   le regole :focus-visible basate su classe definite sopra. ---------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--generali-color, #c11c18);
    outline-offset: 2px;
}

/* Controlli form (.form-select/.form-control/.form-check-input): il tema Metronic
   definisce :focus con specificità di classe e attenua/azzera l'outline. Qui usiamo
   la stessa specificità + !important così il focus da tastiera resta sempre visibile. */
.form-select:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--generali-color, #c11c18) !important;
    outline-offset: 1px;
}

/* Accordion (Bootstrap): l'outline esterno verrebbe coperto dalle righe adiacenti;
   lo portiamo all'interno e togliamo l'eventuale box-shadow tenue del tema. */
.accordion-button:focus-visible {
    outline: 2px solid var(--generali-color, #c11c18);
    outline-offset: -2px;
    box-shadow: none;
}

/* select2: il select nativo è sostituito da markup custom, quindi il focus-visible
   sul <select> non basta. Il focus reale vive sul .select2-selection (o sul campo di
   ricerca interno nei multi); evidenziamo anche quando il dropdown è aperto. */
.select2-container .select2-selection:focus,
.select2-container .select2-selection:focus-within,
.select2-container--open .select2-selection {
    outline: 2px solid var(--generali-color, #c11c18) !important;
    outline-offset: 2px;
}

/* Card di selezione (rb-option): il radio reale è visually-hidden ma resta focusabile
   da tastiera (Tab entra nel gruppo, le frecce scelgono). Evidenziamo la card quando il
   radio interno riceve il focus, così la selezione da tastiera è percepibile. */
.rb-option:has(.rb-option-input:focus-visible),
.rb-option:has(.rb-option-fallback-input:focus-visible) {
    outline: 2px solid var(--generali-color, #c11c18);
    outline-offset: 2px;
}

/* ----- Accessibilità (A11Y-11): contrasto del testo "muted" --------------------
   Il .text-muted del tema (#99a1b7) su sfondo chiaro dà ~2.45:1, sotto la soglia
   WCAG AA (4.5:1). Lo scuriamo al minimo necessario mantenendo la tinta grigio-azzurra
   originale: #667085 ≈ 4.7:1 su #f9f9f9, ~5:1 su bianco. !important per battere
   la regola con !important del bundle. -------------------------------------------- */
.text-muted,
.text-gray-400,
.text-gray-500,
.form-text {
    color: #667085 !important;
}
/* gray-600 era già più scuro (#78829d ~3.8:1): lo teniamo un gradino sotto per
   preservare la gerarchia, comunque conforme (~5.7:1 su sfondo chiaro). */
.text-gray-600 {
    color: #5b6273 !important;
}

/* A11Y-11: il colore link di default del tema (#1b84ff) dà ~3.4:1 su sfondo chiaro.
   Ridefiniamo le variabili Bootstrap del link con un blu conforme (~5.5:1). Tocca solo
   i link che usano il colore di default; quelli con classe esplicita (es. text-generali)
   mantengono il loro colore. */
:root {
    --bs-link-color: #0b5ed7;
    --bs-link-color-rgb: 11, 94, 215;
    --bs-link-hover-color: #094db1;
    --bs-link-hover-color-rgb: 9, 77, 177;
}

/* A11Y-11: gli alert "soft" del tema colorano il TESTO con la tinta vivace (es. warning
   #f6c000 su #fff8dd ~1.6:1). Ripristiniamo i colori-testo scuri "emphasis" di Bootstrap 5.3,
   conformi sui rispettivi sfondi chiari. Le icone con classe colore esplicita (text-warning…)
   restano vivaci per specificità. */
.alert-primary { --bs-alert-color: #084298; color: #084298; }
.alert-success { --bs-alert-color: #0f5132; color: #0f5132; }
.alert-info    { --bs-alert-color: #055160; color: #055160; }
.alert-warning { --bs-alert-color: #664d03; color: #664d03; }
.alert-danger  { --bs-alert-color: #842029; color: #842029; }
/* alert-light: il tema dà un testo quasi bianco (#f9f9f9, invisibile su sfondo chiaro) → testo scuro. */
.alert-light   { --bs-alert-color: #3f4254; color: #3f4254; }

/* A11Y-11: stessi badge "light" del tema — testo con tinta vivace su sfondo tenue
   (es. primary #1b84ff su #e9f3ff ~3.2:1). Colori-testo scuri "emphasis", conformi. */
.badge-light-primary { color: #084298 !important; }
.badge-light-success { color: #0f5132 !important; }
.badge-light-info    { color: #055160 !important; }
.badge-light-warning { color: #664d03 !important; }
.badge-light-danger  { color: #842029 !important; }

/* A11Y-11: bottoni "light" — testo vivace su sfondo tenue (es. danger #f8285a su #ffeef3
   ~3.4:1). Scuriamo SOLO lo stato base con specificità .btn.btn-light-* (niente !important):
   hover/active hanno specificità maggiore e mantengono il testo bianco su fondo pieno. */
.btn.btn-light-primary { color: #084298; }
.btn.btn-light-success { color: #0f5132; }
.btn.btn-light-info    { color: #055160; }
.btn.btn-light-warning { color: #664d03; }
.btn.btn-light-danger  { color: #842029; }

/* A11Y-11: utility di colore testo del tema (tinte vivaci) sotto soglia su sfondo chiaro
   (es. .text-success #17c653 ~2.15:1). Scurite agli emphasis conformi. !important perché
   le utility text di Bootstrap sono già !important. .text-info (viola ~6:1) resta invariato.
   NB: scurisce anche le icone che usano queste classi. */
.text-primary { color: #0a58ca !important; }
.text-success { color: #146c43 !important; }
.text-warning { color: #8a6500 !important; }
.text-danger  { color: #b02a37 !important; }

/* A11Y-11: le label dei controlli "nude" ereditano il muted del tema (#99a1b7 ~2.6:1).
   Le portiamo a un grigio conforme. Niente !important: le label con classe colore
   esplicita (text-gray-800, fw-semibold…) mantengono il loro colore. */
.form-check .form-check-label {
    color: #5c636a;
}

/* A11Y-11: bolla messaggio utente (chat supporto) — testo bianco su .bg-primary #1b84ff
   (~3.6:1). Scuriamo il fondo della sola bolla a un blu conforme (bianco ~5.8:1).
   Le icone bianche su bg-primary (grafica, soglia 3:1) restano invariate. */
.message-bubble.bg-primary {
    background-color: #0b5ed7 !important;
}

/* A11Y (1.4.1): i link nel contenuto HTML della premessa adesione arrivano dal DB con
   stile inline text-decoration:none e colore simile al testo → non distinguibili.
   Forziamo la sottolineatura (segnale non cromatico). !important per battere lo style inline. */
.contenuto-premessa a {
    text-decoration: underline !important;
}