@import url("https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css");
        /* Reset CSS */
        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
      video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    /* Aggiungi box-sizing per un layout più prevedibile */
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
        html
        {
           /* height: 100%; */
            
            color: #000;
            font-family: sans-serif;
        }

body {
    /* height: 100%; RIMOSSO */
    /* overflow: hidden; RIMOSSO */
    min-height: 100vh; /* Assicura che il body sia alto almeno quanto la viewport */
    color: #000;
    font-family: sans-serif;
    /* Opzionale: Aggiungi un po' di padding per distanziare il container dai bordi su mobile */
    padding: 20px 0; /* Esempio: 20px sopra/sotto, 0 destra/sinistra */
    /* Puoi usare Flexbox sul body per centrare se preferisci, ma margin:auto sul container è più semplice per questo caso */
}



       #bg { /* Il background fisso va bene */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('sfondo.jpg'); /* Assicurati che il percorso sia corretto */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
}

.form-wrapper { /* Rinominata da .container */
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 900px;   /* Ora non ci sono conflitti! */
    width: calc(100% - 30px);
    background-color: rgba(240, 240, 240, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid #aaa;
}
/* Stili Form (Lascia come sono o aggiusta se necessario) */
.form-row {
    display: flex;
    flex-wrap: wrap; /* Questo permette alle colonne di andare a capo su mobile */
    margin-bottom: 1rem;
    margin-left: -0.5rem; /* Compensa il padding delle colonne */
    margin-right: -0.5rem; /* Compensa il padding delle colonne */
}


.form-col {
    flex-grow: 1; /* Permette alle colonne di crescere */
    flex-basis: 0; /* Base di partenza per la crescita */
    min-width: 300px; /* Larghezza minima prima di andare a capo */
    padding-left: 0.5rem; /* Spazio tra colonne */
    padding-right: 0.5rem; /* Spazio tra colonne */
    margin-bottom: 1rem; /* Aggiungi spazio sotto quando le colonne vanno a capo */
}
       
 .input,
.textarea,
.select select {
    background-color: #fff;
    color: #333;
    width: 100%; /* Assicura che gli input riempiano la colonna */
}
        .input::placeholder,
        .textarea::placeholder {
            color: #777;
        }

        .help {
            color: #555;
        }

 .form-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: center; /* Centra il titolo */
}

/* Stili per il visualizzatore di larghezza (per debug) */
#debug-width-display {
    position: fixed; /* Lo fissa rispetto alla viewport */
    bottom: 10px;     /* Distanza dal basso */
    right: 10px;      /* Distanza da destra */
    background-color: rgba(0, 0, 0, 0.7); /* Sfondo scuro semitrasparente */
    color: white;     /* Testo bianco */
    padding: 5px 10px; /* Padding interno */
    border-radius: 4px; /* Angoli arrotondati */
    font-size: 14px;    /* Dimensione font */
    font-family: monospace; /* Font a larghezza fissa per i numeri */
    z-index: 9999;     /* Assicura che sia sopra gli altri elementi */
    pointer-events: none; /* Fa sì che non intercetti i click del mouse */
}

/* Aggiungi media query per aggiustamenti fini su mobile se necessario */
@media screen and (max-width: 768px) { /* O potresti abbassare questo breakpoint se necessario, es: 620px */
    .form-wrapper {
        /* Questa regola width: calc(100% - 20px) si applicherà */
        /* quando lo schermo è sotto i 768px E la larghezza calcolata */
        /* sarebbe comunque inferiore a 600px. */
        width: calc(100% - 20px);
        padding: 15px;
    }
    .form-title {
        font-size: 1.6em;
    }
    .form-col {
         min-width: 100%;
         padding-left: 0;
         padding-right: 0;
    }
    .form-row {
        margin-left: 0;
        margin-right: 0;
    }
}