/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* =====================================================
   WELCOME HERO – CARD LEGGIBILE SU SFONDO ILLUSTRATO
   ===================================================== */

.welcome-hero{
  position: relative;
  max-width: 980px;
  margin: 2rem auto 2rem;
  padding: 1.75rem 2rem 1.6rem;
  border-radius: 16px;
  color: #1f2937;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  backdrop-filter: blur(2px);
}

/* Titolo principale */
.welcome-hero h1{
  margin: 0 0 .4rem;
  font-size: 2rem;
  font-weight: 800;
  color: #8b1d3d;
}

/* Sottotitoli */
.welcome-hero h2{
  margin: 0 0 .8rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #374151;
}

/* Testi */
.welcome-hero p{
  margin: .45rem 0;
  line-height: 1.6;
  font-size: 15.5px;
}

/* Liste */
.welcome-hero ul{
  margin: .5rem 0 .8rem 1.2rem;
}

.welcome-hero li{
  margin: .3rem 0;
}

/* Bottone Avanti sotto la card */
.welcome-hero + .navigator,
.welcome-hero + .ls-move-buttons{
  max-width: 980px;
  margin: 0 auto 2rem;
  text-align: right;
}

/* Mobile */
@media (max-width: 768px){
  .welcome-hero{
    margin: 1.2rem 1rem 1.4rem;
    padding: 1.2rem 1.2rem 1.1rem;
    border-radius: 14px;
  }

  .welcome-hero h1{
    font-size: 1.6rem;
  }
}
/* =====================================================
   REGISTRAZIONE – BOX VERO (HTML REALE DELLA PAGINA)
   ===================================================== */

/* 1) Non far “respirare” il contenuto direttamente sul body */
#outerframeContainer {
  background: none !important;
}

/* 2) Il contenuto reale sta dentro #main-col > .container.
      Lo trasformo in un unico pannello opaco che contiene testo + form */
#outerframeContainer #main-col > .container {
  max-width: 980px !important;
  margin: 46px auto 56px auto !important;
  padding: 34px 40px 38px 40px !important;
  background: rgba(255,255,255,0.92) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(2px);
}

/* 3) La jumbotron del tema ha padding e look proprio.
      La rendo neutra perché ora il box è quello esterno */
#outerframeContainer #main-col > .container .jumbotron {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 18px 0 !important;
}

/* 4) Testo sopra: centrato e leggibile */
#outerframeContainer #main-col > .container .jumbotron p {
  max-width: 820px;
  margin: 0 auto 10px auto !important;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: #1f2937;
}

/* 5) Il blocco form deve stare “piatto” dentro al pannello */
#outerframeContainer #main-col > .container .register-form {
  margin: 0 !important;
  padding: 0 !important;
}

/* 6) Colonna bootstrap: evita offset laterali */
#outerframeContainer #main-col > .container .register-form .col-md-8.col-md-offset-2 {
  float: none !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 760px !important;
}

/* 7) Spaziatura campi */
#outerframeContainer #main-col > .container .register-form .form-group {
  margin: 0 0 18px 0 !important;
}

/* 8) Label più gradevoli e visibili */
#outerframeContainer #main-col > .container .register-form label,
#outerframeContainer #main-col > .container .register-form .control-label {
  display: block !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #1f2937 !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: 0.2px;
}

/* 9) Asterisco: pulito */
#outerframeContainer #main-col > .container .register-form .fa-asterisk,
#outerframeContainer #main-col > .container .register-form .asterisk {
  color: #8b1d3d !important;
  font-weight: 900 !important;
}

/* 10) Campi input coerenti */
#outerframeContainer #main-col > .container .register-form .form-control {
  height: 46px !important;
  border-radius: 10px !important;
  border: 1px solid #d1d5db !important;
  background: rgba(255,255,255,0.98) !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

/* Focus AICAT */
#outerframeContainer #main-col > .container .register-form .form-control:focus {
  outline: none !important;
  border-color: #8b1d3d !important;
  box-shadow: 0 0 0 2px rgba(139,29,61,0.16) !important;
}

/* 11) Riga “campi obbligatori” */
#outerframeContainer #main-col > .container .register-form .row[aria-hidden="true"] {
  max-width: 760px;
  margin: 8px auto 0 auto !important;
  font-size: 13px !important;
  color: #4b5563 !important;
}

/* 12) Pulsante: annulla offset bootstrap e mettilo a destra */
#outerframeContainer #main-col > .container .register-form .col-md-offset-7 {
  float: none !important;
  margin: 18px 0 0 0 !important;
  text-align: right !important;
}

/* Stile bottone */
#outerframeContainer #register_button {
  background-color: #8b1d3d !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  font-weight: 800 !important;
}

#outerframeContainer #register_button:hover {
  background-color: #6f1730 !important;
}

/* 13) Mobile */
@media (max-width: 900px) {
  #outerframeContainer #main-col > .container {
    margin: 18px 14px 24px 14px !important;
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }

  #outerframeContainer #main-col > .container .register-form .col-md-offset-7 {
    text-align: left !important;
  }
}
body { outline: 10px solid magenta !important; }

/* =====================================================
   DOMANDE – BOX SEMITRASPARENTI + LAYOUT COMPATTO
   (selettori basati sull’HTML incollato)
   ===================================================== */

/* Larghezza comoda del gruppo */
#outerframeContainer #main-col .group-container {
  max-width: 980px;
  margin: 34px auto 26px auto;
}

/* Titolo gruppo: più netto e meno aria sopra/sotto */
#outerframeContainer #main-col .group-title {
  margin: 8px 0 16px 0 !important;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: #1f2937;
}

/* Box domanda: semi trasparente + più “card” */
#outerframeContainer #main-col .question-container {
  background: rgba(255,255,255,0.90) !important;
  border: 1px solid rgba(230,230,230,0.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.14) !important;
  padding: 14px 16px !important;
  margin: 0 0 14px 0 !important;
  backdrop-filter: blur(2px);
}

/* Titolo domanda: più leggibile e vicino alle risposte */
#outerframeContainer #main-col .question-title-container {
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
}

/* Asterisco: più discreto e allineato */
#outerframeContainer #main-col .question-title-container .asterisk {
  margin-right: 8px;
  margin-top: 2px;
}

/* Il testo domanda (h3 nel tuo HTML) */
#outerframeContainer #main-col .ls-label-question.h3 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  color: #1f2937 !important;
  margin: 0 !important;
}

/* Riduci al minimo i contenitori “vuoti” che creano spazio */
#outerframeContainer #main-col .question-help-container,
#outerframeContainer #main-col .question-valid-container {
  padding: 0 !important;
  margin: 6px 0 0 0 !important;
}

/* I messaggi tipo “Scegliere solo una…”: più compatti e meno invadenti */
#outerframeContainer #main-col .ls-question-help .ls-question-message {
  margin: 6px 0 0 0 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: rgba(139,29,61,0.06) !important;
  color: #5b1a2e !important;
}

/* Risposte: attaccate al titolo, senza aria inutile */
#outerframeContainer #main-col .answer-container {
  padding: 0 !important;
  margin: 10px 0 0 0 !important;
}

/* Input e select coerenti, senza effetto “sparato” */
#outerframeContainer #main-col .question-container .form-control,
#outerframeContainer #main-col .question-container .list-question-select,
#outerframeContainer #main-col .question-container textarea {
  border-radius: 10px !important;
  border: 1px solid #d1d5db !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: none !important;
}

/* Focus coerente con AICAT */
#outerframeContainer #main-col .question-container .form-control:focus,
#outerframeContainer #main-col .question-container select:focus,
#outerframeContainer #main-col .question-container textarea:focus {
  outline: none !important;
  border-color: #8b1d3d !important;
  box-shadow: 0 0 0 2px rgba(139,29,61,0.16) !important;
}

/* Textarea a 1 riga: visivamente più stabile */
#outerframeContainer #main-col textarea.form-control.textarea {
  min-height: 46px !important;
  resize: vertical;
}

/* Yes/No a bottoni: meno “palestra anni 2000” */
#outerframeContainer #main-col .yesno-button.btn-group-justified > .btn,
#outerframeContainer #main-col .yesno-button .button-item.btn {
  border-radius: 10px !important;
  margin: 0 6px 0 0;
}

#outerframeContainer #main-col .yesno-button .button-item.btn:last-child {
  margin-right: 0;
}

/* Radio list: righe più compatte */
#outerframeContainer #main-col .radio-item {
  padding: 6px 0 !important;
}

/* Separatore leggero dentro la card (abbellimento sobrio) */
#outerframeContainer #main-col .question-container:after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 12px;
  background: rgba(0,0,0,0.06);
}

/* Navigator: allinealo allo stile che stai usando */
#outerframeContainer #ls-button-submit,
#outerframeContainer #ls-button-previous {
  border-radius: 10px !important;
  font-weight: 800 !important;
}

#outerframeContainer #ls-button-submit {
  background-color: #8b1d3d !important;
  border-color: #8b1d3d !important;
}

#outerframeContainer #ls-button-submit:hover {
  background-color: #6f1730 !important;
  border-color: #6f1730 !important;
}

/* Mobile: meno padding, stessa leggibilità */
@media (max-width: 900px) {
  #outerframeContainer #main-col .group-container {
    margin: 18px 14px 18px 14px;
  }

  #outerframeContainer #main-col .question-container {
    padding: 12px 12px !important;
    border-radius: 12px !important;
  }

  #outerframeContainer #main-col .ls-label-question.h3 {
    font-size: 16px !important;
  }
}
Ok. Quello che vedi “anomalo” nasce da tre cose.

1. La card è semi trasparente e sotto c’è un’immagine con forme rosse. Se il box non è abbastanza opaco, lo sfondo “sporca” tutto.
2. Il messaggio di help sta in .question-valid-container, che nel tuo caso prende tutta larghezza e crea aria.
3. Le radio hanno troppo spazio verticale perché la lista e i label hanno padding e line-height del tema.

Qui sotto trovi solo patch mirate, così non devi riscrivere tutto. Incollale dopo il CSS che hai già messo.

```css
/* =====================================================
   FIX RADIO “BRUTTO” + COMPATTEZZA + GROUP TITLE CARD
   ===================================================== */

/* 1) Box domande: un filo più opaco per evitare “trasparenza sporca” */
#outerframeContainer #main-col .question-container {
  background: rgba(255,255,255,0.94) !important;
}

/* 2) Riduci spazio tra titolo domanda e help */
#outerframeContainer #main-col .question-title-container {
  margin-bottom: 4px !important;
}

/* 3) Help e valid: più vicini e più compatti */
#outerframeContainer #main-col .question-help-container,
#outerframeContainer #main-col .question-valid-container {
  margin-top: 4px !important;
}

/* 4) Messaggio “Scegliere solo una…”: non deve sembrare una barra enorme */
#outerframeContainer #main-col .ls-question-help .ls-question-message {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  background: rgba(139,29,61,0.08) !important;
  border: 1px solid rgba(139,29,61,0.18) !important;
  line-height: 1.35 !important;
}

/* 5) Avvicina l’area risposte al blocco help */
#outerframeContainer #main-col .answer-container {
  margin-top: 8px !important;
}

/* 6) Radio list: togli aria inutile e rendi la riga “clickabile” */
#outerframeContainer #main-col .ls-answers.radio-list ul {
  margin: 0 !important;
  padding: 0 !important;
}

#outerframeContainer #main-col .radio-item {
  padding: 6px 0 !important;
  margin: 0 !important;
}

#outerframeContainer #main-col .radio-item label {
  display: inline-block !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  line-height: 1.25 !important;
  cursor: pointer;
}

/* Hover leggero sulla riga radio */
#outerframeContainer #main-col .radio-item:hover label {
  background: rgba(0,0,0,0.04) !important;
}

/* 7) Riduci spazio sotto la domanda, prima del separatore */
#outerframeContainer #main-col .question-container:after {
  margin-top: 10px !important;
}

/* 8) Titolo gruppo: card coerente con le domande */
#outerframeContainer #main-col .group-title {
  display: inline-block !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(230,230,230,0.9) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;
  backdrop-filter: blur(2px);
}

/* Centra davvero la “pill” del titolo gruppo */
#outerframeContainer #main-col .group-container {
  text-align: center;
}
#outerframeContainer #main-col .question-container {
  text-align: left;
}
```

/* =====================================================
   FIX RADIO “BRUTTO” + COMPATTEZZA + GROUP TITLE CARD
   ===================================================== */

/* 1) Box domande: un filo più opaco per evitare “trasparenza sporca” */
#outerframeContainer #main-col .question-container {
  background: rgba(255,255,255,0.94) !important;
}

/* 2) Riduci spazio tra titolo domanda e help */
#outerframeContainer #main-col .question-title-container {
  margin-bottom: 4px !important;
}

/* 3) Help e valid: più vicini e più compatti */
#outerframeContainer #main-col .question-help-container,
#outerframeContainer #main-col .question-valid-container {
  margin-top: 4px !important;
}

/* 4) Messaggio “Scegliere solo una…”: non deve sembrare una barra enorme */
#outerframeContainer #main-col .ls-question-help .ls-question-message {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  background: rgba(139,29,61,0.08) !important;
  border: 1px solid rgba(139,29,61,0.18) !important;
  line-height: 1.35 !important;
}

/* 5) Avvicina l’area risposte al blocco help */
#outerframeContainer #main-col .answer-container {
  margin-top: 8px !important;
}

/* 6) Radio list: togli aria inutile e rendi la riga “clickabile” */
#outerframeContainer #main-col .ls-answers.radio-list ul {
  margin: 0 !important;
  padding: 0 !important;
}

#outerframeContainer #main-col .radio-item {
  padding: 6px 0 !important;
  margin: 0 !important;
}

#outerframeContainer #main-col .radio-item label {
  display: inline-block !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  line-height: 1.25 !important;
  cursor: pointer;
}

/* Hover leggero sulla riga radio */
#outerframeContainer #main-col .radio-item:hover label {
  background: rgba(0,0,0,0.04) !important;
}

/* 7) Riduci spazio sotto la domanda, prima del separatore */
#outerframeContainer #main-col .question-container:after {
  margin-top: 10px !important;
}

/* 8) Titolo gruppo: card coerente con le domande */
#outerframeContainer #main-col .group-title {
  display: inline-block !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(230,230,230,0.9) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;
  backdrop-filter: blur(2px);
}

/* Centra davvero la “pill” del titolo gruppo */
#outerframeContainer #main-col .group-container {
  text-align: center;
}
#outerframeContainer #main-col .question-container {
  text-align: left;
}
/* =====================================================
   RADIO CHE DEBORDANO: FIX LAYOUT
   ===================================================== */

/* La lista non deve poter uscire dalla card */
#outerframeContainer #main-col .question-container {
  overflow: hidden !important;
}

/* Ogni riga radio: griglia 18px + testo, tutto dentro */
#outerframeContainer #main-col .radio-item {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;
  padding: 6px 0 !important;
}

/* Input radio: niente margini strani del tema */
#outerframeContainer #main-col .radio-item > input[type="radio"] {
  margin: 0 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
}

/* Label: occupa solo la seconda colonna e non si sposta */
#outerframeContainer #main-col .radio-item > label {
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  line-height: 1.25 !important;
  display: block !important;
}

/* Hover sobrio */
#outerframeContainer #main-col .radio-item:hover > label {
  background: rgba(0,0,0,0.04) !important;
}


/* =====================================================
   1) GROUP DESCRIPTION (well) COERENTE CON CARD
   ===================================================== */

/* Il “well” descrizione gruppo: stessa estetica delle card */
#outerframeContainer #main-col .group-description.well,
#outerframeContainer #main-col .group-description .well,
#outerframeContainer #main-col .group-description {
  background: rgba(255,255,255,0.90) !important;
  border: 1px solid rgba(230,230,230,0.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12) !important;
  backdrop-filter: blur(2px);
}

/* Spaziatura e testo del box descrizione */
#outerframeContainer #main-col .group-description {
  padding: 18px 18px !important;
  margin: 10px 0 16px 0 !important;
  text-align: center;
}

#outerframeContainer #main-col .group-description h1,
#outerframeContainer #main-col .group-description h2,
#outerframeContainer #main-col .group-description h3 {
  margin: 0 0 8px 0 !important;
  font-weight: 900 !important;
  color: #1f2937 !important;
}

#outerframeContainer #main-col .group-description p {
  margin: 0 !important;
  color: #374151 !important;
  line-height: 1.5 !important;
}


/* =====================================================
   2) RISPOSTE: ALLINEAMENTO PIÙ “CENTRATO” E PULITO
   ===================================================== */

/* Mantieni la domanda a sinistra, ma “blocca” le risposte su una colonna più stretta e centrata */
#outerframeContainer #main-col .question-container .answer-container {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Dropdown più centrato */
#outerframeContainer #main-col .question-container .list-question-select {
  width: 100% !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Numeric: spesso finisce in una colonna stretta (col-sm-1). La neutralizzo */
#outerframeContainer #main-col .question-container .numeric-item .col-sm-1 {
  width: 100% !important;
  float: none !important;
}

#outerframeContainer #main-col .question-container input.form-control.numeric,
#outerframeContainer #main-col .question-container .numeric-item input.form-control {
  width: 100% !important;
  max-width: 220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

/* Short text: centrato e con larghezza più comoda */
#outerframeContainer #main-col .question-container .text-item input.form-control {
  width: 100% !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Textarea: centrata */
#outerframeContainer #main-col .question-container textarea.form-control {
  width: 100% !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* RADIO: colonna risposte centrata + righe più “pulite” */
#outerframeContainer #main-col .ls-answers.radio-list {
  max-width: 520px;
  margin-left: auto !important;
  margin-right: auto !important;
}

#outerframeContainer #main-col .radio-item {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  column-gap: 12px !important;
  align-items: center !important;
  padding: 6px 0 !important;
}

/* Evita che il pallino resti “appeso” a sinistra */
#outerframeContainer #main-col .radio-item > input[type="radio"] {
  margin: 0 !important;
  position: static !important;
}

/* Etichetta coerente e meno “vuota” */
#outerframeContainer #main-col .radio-item > label {
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  line-height: 1.25 !important;
  display: block !important;
}

/* Hover sobrio */
#outerframeContainer #main-col .radio-item:hover > label {
  background: rgba(0,0,0,0.04) !important;
}

/* =====================================================
   MOBILE: lascia piena larghezza
   ===================================================== */
@media (max-width: 900px) {
  #outerframeContainer #main-col .question-container .answer-container {
    max-width: 100%;
  }
  #outerframeContainer #main-col .ls-answers.radio-list {
    max-width: 100%;
  }
  #outerframeContainer #main-col .question-container input.form-control.numeric {
    max-width: 100%;
    text-align: left;
  }
}
/* =====================================================
   RADIO “APPESO”: FIX DEFINITIVO (anche per "Altro")
   ===================================================== */

/* Azzera eventuali rientri e padding ereditati */
#outerframeContainer #main-col .ls-answers.radio-list ul {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ogni LI radio: griglia stabile e centrata */
#outerframeContainer #main-col .ls-answers.radio-list li.answer-item {
  list-style: none !important;
}

#outerframeContainer #main-col .ls-answers.radio-list li.radio-item {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  column-gap: 12px !important;
  align-items: center !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}

/* Input radio: annulla qualsiasi trick del tema */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item > input[type="radio"] {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  transform: none !important;
  float: none !important;
}

/* Label: seconda colonna, click facile */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item > label {
  grid-column: 2 !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  line-height: 1.25 !important;
  display: block !important;
}

/* Hover sobrio */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item:hover > label {
  background: rgba(0,0,0,0.04) !important;
}

/* --- CASO "ALTRO": struttura diversa, allineamento coerente --- */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item.form-inline {
  display: grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 8px !important;
  padding: 6px 0 !important;
}

/* Il blocco radio+label di "Altro" lo rendo uguale agli altri */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .othertext-label-checkox-container.radio-item {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  column-gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Input radio di "Altro" */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .othertext-label-checkox-container input[type="radio"] {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Label di "Altro" */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .othertext-label-checkox-container label {
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  line-height: 1.25 !important;
  display: block !important;
}

/* Campo testo di "Altro": centrato e coerente */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .other-text-item input[type="text"] {
  width: 100% !important;
  max-width: 520px !important;
  margin-left: 34px !important;   /* allinea al testo della label */
}
/* =====================================================
   RADIO "APPESI": sposto TUTTO il blocco radio+testo verso il centro
   ===================================================== */

/* Blocca la lista radio su una colonna più stretta e centrata */
#outerframeContainer #main-col .ls-answers.radio-list ul.list-unstyled {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

/* Ogni riga radio: aggiungo un padding-left comune così pallino+testo avanzano insieme */
#outerframeContainer #main-col .ls-answers.radio-list li.answer-item {
  padding-left: 60px !important;   /* qui regoli quanto “verso il centro” */
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

/* Righe radio normali: griglia stabile */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  column-gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Input radio: niente posizionamenti strani */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item > input[type="radio"] {
  position: static !important;
  margin: 0 !important;
  float: none !important;
}

/* Label più leggibile e coerente */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item > label {
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  line-height: 1.2 !important;
  display: block !important;
}

/* Hover */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item:hover > label {
  background: rgba(0,0,0,0.04) !important;
}

/* --- CASO "ALTRO" --- */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item.form-inline {
  padding-left: 60px !important;   /* stesso offset degli altri */
  padding-right: 12px !important;
}

#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .othertext-label-checkox-container.radio-item {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  column-gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
}

#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .othertext-label-checkox-container input[type="radio"] {
  position: static !important;
  margin: 0 !important;
  float: none !important;
}

#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .othertext-label-checkox-container label {
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
}

/* Campo testo Altro: allineato al testo, non al pallino */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .other-text-item input[type="text"] {
  width: 100% !important;
  max-width: 520px !important;
  margin-left: 34px !important; /* 22 + 12: stessa griglia */
}

/* Mobile: niente offset, altrimenti stringe troppo */
@media (max-width: 900px) {
  #outerframeContainer #main-col .ls-answers.radio-list li.answer-item,
  #outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item.form-inline {
    padding-left: 0 !important;
  }
  #outerframeContainer #main-col .ls-answers.radio-list ul.list-unstyled {
    max-width: 100% !important;
  }
  #outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .other-text-item input[type="text"] {
    margin-left: 0 !important;
    max-width: 100% !important;
  }
}
/* =========================================
   RADIO "APPESO": FIX basato su label senza padding
   ========================================= */

/* 1) Niente padding sul label: radio e testo tornano solidali */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item > label,
#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .othertext-label-checkox-container label {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* 2) Spostamento verso il centro: lo fai sulla riga, non sul label */
#outerframeContainer #main-col .ls-answers.radio-list ul.list-unstyled {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3) Righe radio: griglia stabile e “compatta” */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  column-gap: 12px !important;
  align-items: center !important;

  /* questo è l’offset che cercavi */
  padding-left: 60px !important;

  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin: 0 !important;
}

/* 4) Input radio: forzo dentro la griglia */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item > input[type="radio"] {
  position: static !important;
  margin: 0 !important;
  float: none !important;
}

/* 5) Hover: lo metto sul contenitore (non sul label) */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-item:hover {
  background: rgba(0,0,0,0.04) !important;
  border-radius: 10px !important;
}

/* --- "Altro" coerente --- */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item.form-inline {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .othertext-label-checkox-container.radio-item {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  column-gap: 12px !important;
  align-items: center !important;

  padding-left: 60px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin: 0 !important;
}

#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .othertext-label-checkox-container input[type="radio"] {
  position: static !important;
  margin: 0 !important;
  float: none !important;
}

/* Campo testo Altro: allineato al testo (seconda colonna) */
#outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .other-text-item input[type="text"] {
  width: 100% !important;
  max-width: 520px !important;
  margin-left: calc(60px + 22px + 12px) !important; /* offset + colonna radio + gap */
}

/* Mobile: tolgo offset e max-width */
@media (max-width: 900px) {
  #outerframeContainer #main-col .ls-answers.radio-list ul.list-unstyled {
    max-width: 100% !important;
  }
  #outerframeContainer #main-col .ls-answers.radio-list li.radio-item,
  #outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .othertext-label-checkox-container.radio-item {
    padding-left: 0 !important;
  }
  #outerframeContainer #main-col .ls-answers.radio-list li.radio-text-item .other-text-item input[type="text"] {
    margin-left: 0 !important;
    max-width: 100% !important;
  }
}