/* 1. Contenitore principale */
.archi-hs-form {
    width: 100%;
    max-width: 100%;
    background: transparent; /* Usa #f4f4f4 se vuoi mantenere lo sfondo grigio della form precedente */
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* 2. Struttura del modulo: Forza il 100% di larghezza su tutti i wrapper di HubSpot */
.archi-hs-form form,
.archi-hs-form .hs-form,
.archi-hs-form .hs-form-html {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* 3. Campi di input (testo, email, numeri), textarea e select (Tendine) */
.archi-hs-form .hs-input,
.archi-hs-form input[type="text"],
.archi-hs-form input[type="email"],
.archi-hs-form input[type="tel"],
.archi-hs-form input[type="number"],
.archi-hs-form select,
.archi-hs-form textarea {
    width: 100% !important;         /* Occupa tutto lo spazio orizzontale */
    max-width: 100% !important;
    padding: 15px 20px !important;  /* Spazio interno confortevole */
    border: 2px solid rgb(73, 80, 87) !important; /* Colore richiesto per i bordi */
    background-color: #fff !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;  /* Metti 4px o 8px se nella jpg i bordi sono leggermente arrotondati */
    font-family: 'Quicksand', sans-serif !important;
    font-size: 16px !important;
    color: rgb(73, 80, 87) !important;
    outline: none !important;
}

/* Rimuove lo stile di default bruttino che HubSpot dà ai campi select */
.archi-hs-form select.hs-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* 4. Etichette dei campi (Labels) */
.archi-hs-form .hs-form-field > label {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    display: block !important;
    margin-bottom: 10px !important; /* Spazio tra la label e il campo */
}

/* Assicura che i contenitori dei singoli campi prendano tutta la larghezza */
.archi-hs-form .hs-form-field {
    width: 100% !important;
    margin-bottom: 25px !important; /* Spazio tra un campo e l'altro */
}

/* 5. Intestazioni e paragrafi (se presenti nel modulo) */
.archi-hs-form h3 {
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 400 !important;
    font-size: 50px !important;
    line-height: 1.2 !important;
    margin-bottom: 2rem !important;
}

/* ---------------------------------------------------
   ALLINEAMENTO ORIZZONTALE PER CHECKBOX E RADIO (Correzione definitiva)
------------------------------------------------------ */
/* ---------------------------------------------------
   STILE DEI PALLINI E QUADRATINI (Tramite Variabili HubSpot)
------------------------------------------------------ */
.archi-hs-form {
    /* Stili per i Radio (Pallini) */
    --hsf-default-field-radio__background-color: #ffffff !important; /* Sfondo bianco anziché grigio */
    --hsf-default-field-radio__border-color: #000000 !important;     /* Bordo nero */
    --hsf-default-field-radio__border-width: 1px 1px 1px 1px !important; /* Spessore 1px */
    --hsf-default-field-radio__border-style: solid !important;

    /* Stili per i Checkbox (Quadratini) - Nel caso ne avessi nel form */
    --hsf-default-field-checkbox__background-color: #ffffff !important;
    --hsf-default-field-checkbox__border-color: #000000 !important;
    --hsf-default-field-checkbox__border-width: 1px 1px 1px 1px !important;
    --hsf-default-field-checkbox__border-style: solid !important;
}

/* Fallback di sicurezza: Se per caso qualche stile di HubSpot 
   dovesse sovrascrivere le variabili, forziamo il bordo direttamente
*/
.archi-hs-form .hsfc-RadioInput,
.archi-hs-form .hsfc-CheckboxInput {
    border: 1px solid #000 !important;
    background-color: #fff !important;
}

/* 1. Trasforma solo il contenitore delle opzioni in una riga orizzontale */
.archi-hs-form .hsfc-RadioFieldGroup__Options,
.archi-hs-form .hsfc-CheckboxFieldGroup__Options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 25px !important;        /* Distanza orizzontale tra un'opzione e l'altra */
    width: 100% !important;
    margin-top: 15px !important; /* Spazio verticale sotto la domanda principale */
}

/* 2. Assicura che i contenitori delle singole opzioni si affianchino correttamente */
.archi-hs-form .hsfc-RadioFieldGroup__Options > div,
.archi-hs-form .hsfc-CheckboxFieldGroup__Options > div {
    display: inline-block !important; /* Meglio di flex per non rompere il pallino di HubSpot */
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Rimuove margini extra dalla label, ma lascia intatto il pallino disegnato da HubSpot */
.archi-hs-form .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel,
.archi-hs-form .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel {
    margin-bottom: 0 !important;
    width: auto !important;
    cursor: pointer !important;
}


.archi-hs-form p {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 100 !important;
}

/* 6. Pulsante di invio */
.archi-hs-form .hs-submit {
    width: 100% !important;
    text-align: right !important; /* Mantiene il bottone a destra come nel CSS originale */
    margin-top: 30px !important;
}

.archi-hs-form .hs-submit input[type="submit"],
.archi-hs-form .hs-button,
.archi-hs-form .hsfc-Button{
    padding: 20px 40px !important;
    background-color: #707070 !important;
    border: 2px solid #707070 !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    width: auto !important; /* Il bottone non si allarga al 100%, segue il suo contenuto */
}

/* Effetto hover sul pulsante per un tocco di classe */
.archi-hs-form .hs-submit input[type="submit"]:hover,
.archi-hs-form .hs-button:hover {
    background-color: transparent !important;
    color: #707070 !important;
}

/* Fix per ripulire eventuali problemi di float */
.archi-hs-form::after,
.archi-hs-form .hs-form::after {
    content: "";
    display: table;
    clear: both;
}