/* ==========================================================================
   SPORT e CULTURA SENZA BARRIERE
   Grafica per il formulario di iscrizione LimeSurvey (tema Fruity)

   Progetti finanziati dal PR FSE+ Toscana 2021-2027,
   Strategia regionale per le Aree interne, con il sostegno dell'Unione europea.
   Colori ripresi dalla striscia loghi FSE+ (blu emblema UE) e dai manifesti
   A3 (blu e arancio della prima opzione).

   Dove incollarlo: tema Fruity esteso, file css/custom.css
   Funziona con LimeSurvey 3, 4, 5 e 6.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@600;700;800&display=swap');


/* --------------------------------------------------------------------------
   1. COLORI, CARATTERI E MISURE
   Per cambiare l'aspetto basta modificare questi valori.
   -------------------------------------------------------------------------- */
:root {
  --ssb-blu:            #003399;  /* blu dell'emblema europeo */
  --ssb-blu-scuro:      #002a80;  /* blu al passaggio del mouse */
  --ssb-blu-notte:      #0b1f4d;  /* titoli */
  --ssb-blu-medio:      #2f5fa8;  /* montagne e sfumature */
  --ssb-cielo:          #e8eef8;  /* fondi chiari */
  --ssb-arancio:        #e07000;  /* accento dei manifesti, solo decorativo */
  --ssb-arancio-scuro:  #b85500;  /* arancio leggibile con testo bianco */
  --ssb-arancio-chiaro: #fff3e6;  /* fondo dei riquadri di avviso */
  --ssb-giallo-ue:      #ffcc00;  /* stelle UE, solo decorativo */
  --ssb-rosso:          #b3261e;  /* errori */
  --ssb-rosso-chiaro:   #fdeceb;
  --ssb-testo:          #1f2937;
  --ssb-testo-tenue:    #4b5563;
  --ssb-bordo:          #c9d3e3;
  --ssb-sfondo:         #f5f7fb;
  --ssb-bianco:         #ffffff;

  --ssb-font-titoli: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --ssb-font-testo:  'Atkinson Hyperlegible', 'Segoe UI', Arial, sans-serif;

  --ssb-raggio:  14px;
  --ssb-ombra:   0 2px 10px rgba(11, 31, 77, .07);
  --ssb-altezza-logo: 56px;
}

/* Variante con i colori della SECONDA opzione dei manifesti (marrone e turchese).
   Per usarla togliere i segni di commento qui sotto.
:root {
  --ssb-blu:            #5e2614;
  --ssb-blu-scuro:      #4a1d0f;
  --ssb-blu-notte:      #4a1d0f;
  --ssb-blu-medio:      #2a8c8d;
  --ssb-cielo:          #e6f4f4;
  --ssb-arancio:        #49b7b8;
  --ssb-arancio-scuro:  #1f7a7b;
  --ssb-arancio-chiaro: #ecf7f7;
  --ssb-sfondo:         #fdfdf9;
}
*/


/* --------------------------------------------------------------------------
   2. BASE DELLA PAGINA
   -------------------------------------------------------------------------- */
html { font-size: 112.5%; }   /* 18 px: testo piu grande e leggibile */

body.fruity {
  background-color: var(--ssb-sfondo);
  color: var(--ssb-testo);
  font-family: var(--ssb-font-testo);
  line-height: 1.6;
}

body.fruity h1, body.fruity h2, body.fruity h3, body.fruity h4,
body.fruity .group-title, body.fruity .btn {
  font-family: var(--ssb-font-titoli);
}

body.fruity a { color: var(--ssb-blu); text-underline-offset: 3px; }
body.fruity a:hover { color: var(--ssb-blu-scuro); }

/* Contorno ben visibile per chi naviga con la tastiera */
body.fruity a:focus-visible,
body.fruity button:focus-visible,
body.fruity .btn:focus-visible,
body.fruity input:focus-visible,
body.fruity select:focus-visible,
body.fruity textarea:focus-visible {
  outline: 3px solid var(--ssb-arancio);
  outline-offset: 2px;
  box-shadow: none;
}

body.fruity .outerframe { margin-top: 1.25rem; }


/* --------------------------------------------------------------------------
   3. BARRA IN ALTO CON LA STRISCIA DEI LOGHI FSE+
   La striscia si carica come "Logo" nelle opzioni del tema.
   -------------------------------------------------------------------------- */
body.fruity #survey-nav,
body.fruity .navbar {
  background:
    linear-gradient(90deg, var(--ssb-blu) 0 72%, var(--ssb-arancio) 72% 100%) bottom / 100% 6px no-repeat,
    var(--ssb-bianco) !important;
  border-bottom: 0 !important;
  box-shadow: 0 3px 12px rgba(11, 31, 77, .08) !important;
}

body.fruity #survey-nav > .container-fluid,
body.fruity .navbar > .container,
body.fruity .navbar > .container-fluid {
  padding-top: 8px;
  padding-bottom: 14px;   /* spazio per la riga blu e arancio */
  flex-wrap: wrap;
}

body.fruity .navbar .logo-container {
  display: block !important;   /* visibile anche sul telefono */
  padding: 0;
  margin: 0;
  height: auto;
  min-height: 0;
}

body.fruity .navbar .logo-container img,
body.fruity .navbar img.logo {
  height: var(--ssb-altezza-logo);
  max-height: none;
  width: auto;
  max-width: 100%;
  padding: 0;
  object-fit: contain;
}

body.fruity .navbar-brand:not(.logo-container) {
  font-family: var(--ssb-font-titoli);
  font-weight: 700;
  color: var(--ssb-blu-notte);
  white-space: normal;
}

body.fruity .navbar .nav-link,
body.fruity .navbar .navbar-nav > li > a {
  color: var(--ssb-blu) !important;
  font-size: 1rem;
}

@media (max-width: 767.98px) {
  :root { --ssb-altezza-logo: 34px; }
  body.fruity .navbar .logo-container { order: -1; width: 100%; }
  body.fruity .navbar .logo-container img,
  body.fruity .navbar img.logo { height: auto; max-height: var(--ssb-altezza-logo); }
}


/* --------------------------------------------------------------------------
   4. PAGINA DI BENVENUTO (parti generate da LimeSurvey)
   -------------------------------------------------------------------------- */
body.fruity .survey-name {
  font-family: var(--ssb-font-titoli);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--ssb-blu-notte);
  text-align: left !important;
  margin: .5rem 0 1rem;
  line-height: 1.2;
}

body.fruity .survey-description {
  color: var(--ssb-testo-tenue) !important;
  text-align: left !important;
}
body.fruity .survey-description:empty { display: none; }

/* il testo di benvenuto nasce grande e colorato: lo riportiamo normale */
body.fruity .survey-welcome {
  font-family: var(--ssb-font-testo);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ssb-testo) !important;
  text-align: left;
}

body.fruity .number-of-questions {
  color: var(--ssb-testo-tenue) !important;
  font-size: .9rem;
  margin-top: 1rem;
}


/* --------------------------------------------------------------------------
   5. ELEMENTI DEL TESTO DI BENVENUTO (classi ssb-)
   -------------------------------------------------------------------------- */

/* 5.1 Riquadro di apertura con montagne, come nei manifesti */
.ssb-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 0 2rem;
  padding: 2rem 2rem 4.5rem;
  min-height: 260px;
  color: var(--ssb-bianco);
  background: linear-gradient(165deg, #5a86c4 0%, var(--ssb-blu-medio) 45%, var(--ssb-blu) 100%);
  border-radius: 28px 28px 28px 90px;
  box-shadow: 0 10px 28px rgba(0, 51, 153, .22);
}

/* due file di colline disegnate con una maschera, il colore segue le variabili */
.ssb-hero::before,
.ssb-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.ssb-hero::before {   /* Monte Amiata sullo sfondo */
  height: 62%;
  background: rgba(255, 255, 255, .16);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V118C110 112 210 100 310 98C400 96 450 78 540 56C610 38 660 14 730 16C800 18 850 46 915 68C990 92 1090 96 1200 102V200Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V118C110 112 210 100 310 98C400 96 450 78 540 56C610 38 660 14 730 16C800 18 850 46 915 68C990 92 1090 96 1200 102V200Z'/%3E%3C/svg%3E");
}
.ssb-hero::after {    /* colline in primo piano */
  height: 34%;
  background: rgba(11, 31, 77, .38);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V120C140 84 250 104 380 86C500 70 570 112 700 104C820 96 900 54 1030 66C1110 74 1160 90 1200 86V200Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V120C140 84 250 104 380 86C500 70 570 112 700 104C820 96 900 54 1030 66C1110 74 1160 90 1200 86V200Z'/%3E%3C/svg%3E");
}

.ssb-occhiello {
  margin: 0 0 1rem;
  padding-right: 72px;   /* spazio per la pallina */
  font-family: var(--ssb-font-titoli);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

/* scritta a blocchi come nei manifesti */
.ssb-marchio {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 1.25rem;
}
.ssb-marchio span {
  display: inline-block;
  font-family: var(--ssb-font-titoli);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ssb-bianco);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}
.ssb-marchio .ssb-riga-1 {
  padding: .3em .45em .25em;
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  background: var(--ssb-blu);
}
.ssb-marchio .ssb-riga-2 {
  padding: .35em .6em;
  font-size: clamp(1rem, 3vw, 1.35rem);
  letter-spacing: .03em;
  background: var(--ssb-arancio-scuro);
}

/* pallina arancio con le scie gialle */
.ssb-palla {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  /* cucitura bianca disegnata dentro la pallina */
  background:
    radial-gradient(circle at 118% 30%, transparent 0 55%, #fff 56% 61%, transparent 62%),
    var(--ssb-arancio);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}
.ssb-palla::after {    /* scie */
  content: "";
  position: absolute;
  top: -26px;
  right: 40px;
  width: 64px;
  height: 46px;
  background: repeating-linear-gradient(0deg, var(--ssb-giallo-ue) 0 3px, transparent 3px 11px);
  transform: rotate(32deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
          mask-image: linear-gradient(90deg, transparent, #000 70%);
}

.ssb-hero-testo {
  position: relative;
  max-width: 34em;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ssb-bianco);
}
.ssb-hero-testo strong { color: var(--ssb-bianco); }

@media (max-width: 575.98px) {
  .ssb-hero { padding: 1.5rem 1.25rem 4rem; border-radius: 20px 20px 20px 56px; }
  .ssb-palla { width: 44px; height: 44px; top: 1.2rem; right: 1.2rem; }
  .ssb-palla::after { width: 48px; height: 34px; right: 30px; top: -20px; }
}

/* 5.2 Sezioni e titoli */
.ssb-sezione { margin: 0 0 2rem; }

.ssb-titolo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .75rem;
  font-family: var(--ssb-font-titoli);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ssb-blu-notte);
}
.ssb-titolo::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 6px;
  border-radius: 3px;
  background: var(--ssb-arancio);
}

.ssb-sezione p { margin: 0 0 .75rem; }

/* 5.3 Comuni come etichette */
.ssb-comuni {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .25rem 0 1rem;
  padding: 0;
  list-style: none;
}
.ssb-comuni li {
  padding: .3rem .8rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ssb-blu);
  background: var(--ssb-cielo);
  border: 1px solid #c8d6ef;
  border-radius: 999px;
}

/* 5.4 Elenchi puntati */
.ssb-elenco { margin: .25rem 0 0; padding-left: 1.3rem; }
.ssb-elenco li { margin-bottom: .35rem; padding-left: .2rem; }
.ssb-elenco li::marker { color: var(--ssb-arancio); font-size: 1.2em; }

/* 5.5 Riquadro di avviso (minori) */
.ssb-avviso {
  position: relative;
  margin: 0 0 2rem;
  padding: 1.1rem 1.25rem 1.1rem 4.2rem;
  background: var(--ssb-arancio-chiaro);
  border-left: 6px solid var(--ssb-arancio);
  border-radius: 0 var(--ssb-raggio) var(--ssb-raggio) 0;
}
.ssb-avviso::before {
  content: "!";
  position: absolute;
  left: 1.1rem;
  top: 1.05rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  font-family: var(--ssb-font-titoli);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ssb-bianco);
  background: var(--ssb-arancio-scuro);
  border-radius: 50%;
}
.ssb-avviso-titolo {
  margin: 0 0 .25rem;
  font-family: var(--ssb-font-titoli);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ssb-blu-notte);
}
.ssb-avviso p:last-child { margin-bottom: 0; }

/* 5.6 Passaggi numerati */
.ssb-passi {
  counter-reset: passo;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}
.ssb-passi li {
  counter-increment: passo;
  position: relative;
  padding: 3.4rem 1.1rem 1.1rem;
  background: var(--ssb-bianco);
  border: 1px solid var(--ssb-bordo);
  border-radius: var(--ssb-raggio);
  box-shadow: var(--ssb-ombra);
}
.ssb-passi li::before {
  content: counter(passo);
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-family: var(--ssb-font-titoli);
  font-weight: 800;
  color: var(--ssb-bianco);
  background: var(--ssb-blu);
  border-radius: 50%;
}
.ssb-passi li:last-child::before { background: var(--ssb-arancio-scuro); }
.ssb-passi strong {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--ssb-font-titoli);
  color: var(--ssb-blu-notte);
}

/* 5.7 Cose da avere pronte */
.ssb-checklist { margin: .25rem 0 0; padding: 0; list-style: none; }
.ssb-checklist li {
  position: relative;
  margin-bottom: .5rem;
  padding-left: 2rem;
}
.ssb-checklist li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .3em;
  width: .55rem;
  height: 1rem;
  border: solid var(--ssb-blu);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* 5.8 Scadenza */
.ssb-scadenza {
  display: inline-block;
  margin: .25rem 0 0;
  padding: .55rem 1rem;
  font-weight: 700;
  color: var(--ssb-blu-notte);
  background: var(--ssb-cielo);
  border-radius: 10px;
}

/* 5.9 Aiuto e contatti */
.ssb-aiuto {
  margin: 0 0 2rem;
  padding: 1.1rem 1.25rem;
  background: var(--ssb-bianco);
  border: 2px solid var(--ssb-cielo);
  border-radius: var(--ssb-raggio);
}
.ssb-aiuto p { margin: 0 0 .35rem; }
.ssb-aiuto p:last-child { margin-bottom: 0; }

/* 5.10 Riga finale con finanziamento e loghi */
.ssb-finanziamento {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ssb-bordo);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ssb-testo-tenue);
}
.ssb-finanziamento p { margin: 0 0 .5rem; }
.ssb-loghi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1rem;
}
.ssb-loghi img {
  height: 64px;
  width: auto;
  max-width: 100%;
  padding: 6px 10px;
  background: var(--ssb-bianco);
  border-radius: 8px;
}
.ssb-striscia img { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 0 1.5rem; }


/* --------------------------------------------------------------------------
   6. PAGINE DELLE DOMANDE
   -------------------------------------------------------------------------- */

/* barra di avanzamento */
body.fruity .progress {
  height: 18px;
  background-color: var(--ssb-cielo);
  border-radius: 999px;
  box-shadow: none;
  overflow: hidden;
}
body.fruity .progress-bar {
  background: linear-gradient(90deg, var(--ssb-blu), var(--ssb-blu-medio));
  box-shadow: none;
  font-size: .7rem;
  font-weight: 700;
  line-height: 18px;
}

/* titolo e descrizione del gruppo di domande */
body.fruity .group-title {
  font-weight: 800;
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  color: var(--ssb-blu-notte);
  text-align: left !important;
  margin: 1rem 0 .5rem;
}
body.fruity .group-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  margin-top: .5rem;
  border-radius: 3px;
  background: var(--ssb-arancio);
}
body.fruity .group-description {
  color: var(--ssb-testo-tenue);
  margin-bottom: 1.25rem;
}

/* ogni domanda dentro una scheda */
body.fruity .question-container {
  margin: 0 0 1.25rem;
  padding: 1.25rem 1.4rem;
  background: var(--ssb-bianco);
  border: 1px solid var(--ssb-bordo);
  border-radius: var(--ssb-raggio);
  box-shadow: var(--ssb-ombra);
}
body.fruity .question-container.input-error,
body.fruity .question-container.has-error {
  border: 2px solid var(--ssb-rosso);
  background: var(--ssb-rosso-chiaro);
  box-shadow: var(--ssb-ombra);
}
body.fruity .input-error .form-control,
body.fruity .input-error .form-select {
  border-color: var(--ssb-rosso);
  color: var(--ssb-testo);
}

body.fruity .question-title-container { padding: 0; margin-bottom: .75rem; }
body.fruity .question-text {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--ssb-blu-notte);
}
body.fruity .question-number,
body.fruity .question-code { color: var(--ssb-testo-tenue) !important; font-size: .85rem; }
body.fruity .asterisk,
body.fruity .question-title-container .text-danger {
  color: var(--ssb-arancio-scuro) !important;
  font-weight: 800;
}

/* suggerimenti e messaggi di controllo */
body.fruity .ls-questionhelp,
body.fruity .question-help-container {
  color: var(--ssb-testo-tenue);
  font-size: .95rem;
}
body.fruity .question-valid-container { color: var(--ssb-testo-tenue); font-size: .95rem; }
body.fruity .ls-em-error,
body.fruity .em_error,
body.fruity .question-valid-container .text-danger,
body.fruity .input-error .ls-em-tip {
  color: var(--ssb-rosso) !important;
  font-weight: 700;
}

body.fruity .answer-container { padding-top: .25rem; }

/* campi di testo, date ed elenchi a tendina */
body.fruity .form-control,
body.fruity .form-select,
body.fruity select,
body.fruity textarea {
  min-height: 3rem;
  padding: .55rem .85rem;
  font-family: var(--ssb-font-testo);
  font-size: 1.05rem;
  color: var(--ssb-testo);
  background-color: var(--ssb-bianco);
  border: 2px solid var(--ssb-bordo);
  border-radius: 10px;
  box-shadow: none;
}
body.fruity .form-control:focus,
body.fruity .form-select:focus,
body.fruity select:focus,
body.fruity textarea:focus {
  border-color: var(--ssb-blu);
  box-shadow: 0 0 0 4px rgba(0, 51, 153, .15);
  outline: none;
}
body.fruity .form-control::placeholder { color: #8a94a6; }

/* risposte a scelta: righe ampie e facili da toccare
   Il cerchietto e il quadratino non sono quelli del browser: LimeSurvey li
   disegna con label::before (il bordo) e label::after (il pallino o la spunta).
   Qui li riposizioniamo dentro la riga, centrati in verticale sull'etichetta.
   Per centrarli usiamo i margini e non transform, cosi le animazioni di Fruity
   (che usano transform) non li spostano. */
body.fruity .answers-list { padding-left: 0; }
body.fruity .radio-list li,
body.fruity .checkbox-list li { margin-right: 0; }

body.fruity .radio-item,
body.fruity .checkbox-item {
  position: relative;
  margin: 0 0 .5rem;
  padding: 0;                    /* lo spazio interno ora sta nell'etichetta */
  background: var(--ssb-bianco);
  border: 2px solid var(--ssb-cielo);
  border-radius: 10px;
  transition: background-color .15s, border-color .15s;
}
body.fruity .radio-item:hover,
body.fruity .checkbox-item:hover {
  background: var(--ssb-cielo);
  border-color: #c8d6ef;
}
body.fruity .radio-item:has(input:checked),
body.fruity .checkbox-item:has(input:checked) {
  background: var(--ssb-cielo);
  border-color: var(--ssb-blu);
}

/* nelle caselle a scelta multipla l'etichetta sta dentro .row > .col-auto:
   la allarghiamo a tutta la riga, cosi si puo cliccare ovunque */
body.fruity .checkbox-item > .row { margin: 0; }
body.fruity .checkbox-item > .row > [class*="col"] { flex: 1 1 auto; width: 100%; padding: 0; }

/* etichetta: tutta la riga e cliccabile, a sinistra lo spazio per il cerchietto */
body.fruity .radio-item label,
body.fruity .checkbox-item label {
  display: block;
  position: relative;
  margin: 0;
  padding: .75rem 1rem .75rem 3.1rem;
  min-height: 3rem;
  font-size: 1.02rem;
  line-height: 1.45;
  cursor: pointer;
}

/* bordo del cerchietto e del quadratino */
body.fruity .radio-item label::before,
body.fruity .checkbox-item label::before {
  box-sizing: border-box;
  left: 1rem;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 0;
  border: 2px solid #8a9bb8;
  background-color: var(--ssb-bianco);
}
body.fruity .checkbox-item label::before { border-radius: 5px; }
body.fruity .radio-item input[type=radio]:checked + label::before,
body.fruity .checkbox-item input[type=checkbox]:checked + label::before {
  border-color: var(--ssb-blu);
}

/* pallino interno del cerchietto */
body.fruity .radio-item label::after {
  box-sizing: border-box;
  left: calc(1rem + 6px);
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 0;
  background-color: var(--ssb-blu);
}

/* quadratino pieno con la spunta bianca */
body.fruity .checkbox-item label::after {
  box-sizing: border-box;
  left: 1rem;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 0;
  padding: 0;
  border-radius: 5px;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
}
body.fruity .checkbox-item input[type=checkbox]:checked + label::after,
body.fruity .checkbox-item input[type=radio]:checked + label::after {
  padding: 0;
  background-color: var(--ssb-blu);
  color: var(--ssb-bianco);
}

/* l'input vero resta invisibile ma sta sotto il cerchietto */
body.fruity .radio-item input[type=radio],
body.fruity .checkbox-item input[type=checkbox] {
  left: 1rem;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 0;
}

/* opzione "Altro" con il campo di testo accanto */
body.fruity .radio-text-item.row,
body.fruity .checkbox-text-item.row {
  margin-left: 0;
  margin-right: 0;
  align-items: center;
}
body.fruity .radio-text-item .othertext-label-checkox-container,
body.fruity .checkbox-text-item .othertext-label-checkox-container { position: static; padding: 0; }
body.fruity .radio-text-item .other-text-item,
body.fruity .checkbox-text-item .other-text-item { flex: 1 1 12em; padding: .5rem 1rem .5rem 0; }

/* contorno ben visibile quando si arriva alla risposta con la tastiera */
body.fruity .checkbox-item input[type=checkbox]:focus-visible + label::before,
body.fruity .radio-item input[type=radio]:focus-visible + label::before {
  border-color: var(--ssb-blu);
  box-shadow: 0 0 0 3px rgba(224, 112, 0, .55);
  outline: none;
}
body.fruity .form-check-input:checked {
  background-color: var(--ssb-blu);
  border-color: var(--ssb-blu);
}
body.fruity input[type=radio],
body.fruity input[type=checkbox] { accent-color: var(--ssb-blu); }

/* tabelle (domande a matrice) */
body.fruity .ls-answers table thead th,
body.fruity .ls-answers table .ls-heading th,
body.fruity .ls-answers table .ls-heading td {
  background: var(--ssb-cielo);
  color: var(--ssb-blu-notte);
  font-weight: 700;
}
body.fruity .ls-answers .table > :not(caption) > * > *,
body.fruity .ls-answers .table td,
body.fruity .ls-answers .table th { border-color: #dfe6f1; }

/* avvisi di sistema (domande obbligatorie mancanti e simili) */
body.fruity .alert {
  border: 0;
  border-left: 6px solid var(--ssb-blu);
  border-radius: 0 10px 10px 0;
  background: var(--ssb-cielo);
  color: var(--ssb-blu-notte);
}
body.fruity .alert-danger,
body.fruity .alert-warning {
  border-left-color: var(--ssb-rosso);
  background: var(--ssb-rosso-chiaro);
  color: #6b1510;
}


/* --------------------------------------------------------------------------
   7. PULSANTI AVANTI, INDIETRO, INVIA
   -------------------------------------------------------------------------- */
body.fruity .navigator { margin: 1.75rem 0 2.5rem; }

body.fruity .btn {
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: 10px;
  padding: .7rem 1.6rem;
  font-size: 1.02rem;
}

body.fruity .btn-primary,
body.fruity .ls-move-btn.btn-primary {
  background-color: var(--ssb-blu);
  border: 2px solid var(--ssb-blu);
  color: var(--ssb-bianco);
}
body.fruity .btn-primary:hover,
body.fruity .btn-primary:focus,
body.fruity .btn-primary:active {
  background-color: var(--ssb-blu-scuro) !important;
  border-color: var(--ssb-blu-scuro) !important;
  color: var(--ssb-bianco) !important;
}

/* il pulsante finale "Invia" in arancio, per distinguerlo */
body.fruity #ls-button-submit[value="movesubmit"] {
  background-color: var(--ssb-arancio-scuro);
  border-color: var(--ssb-arancio-scuro);
}
body.fruity #ls-button-submit[value="movesubmit"]:hover,
body.fruity #ls-button-submit[value="movesubmit"]:focus {
  background-color: #9a4700 !important;
  border-color: #9a4700 !important;
}

body.fruity .btn-outline-secondary,
body.fruity .btn-default,
body.fruity #ls-button-previous {
  background-color: var(--ssb-bianco);
  border: 2px solid var(--ssb-blu);
  color: var(--ssb-blu);
}
body.fruity .btn-outline-secondary:hover,
body.fruity .btn-default:hover,
body.fruity #ls-button-previous:hover {
  background-color: var(--ssb-cielo) !important;
  border-color: var(--ssb-blu) !important;
  color: var(--ssb-blu) !important;
}

@media (max-width: 575.98px) {
  body.fruity .navigator .btn { width: 100%; padding: .8rem 1rem; }
}


/* --------------------------------------------------------------------------
   8. PAGINA FINALE (domanda inviata)
   -------------------------------------------------------------------------- */
body.fruity .completed-wrapper {
  margin: 1rem 0 2rem;
  padding: 1.75rem 1.5rem;
  background: var(--ssb-bianco);
  border: 1px solid var(--ssb-bordo);
  border-top: 6px solid var(--ssb-blu);
  border-radius: var(--ssb-raggio);
  box-shadow: var(--ssb-ombra);
  text-align: left;
}
body.fruity .completed-text { color: var(--ssb-testo); font-size: 1rem; }
body.fruity .completed-text h2,
body.fruity .completed-text h3 { color: var(--ssb-blu-notte); }


/* --------------------------------------------------------------------------
   9. ACCESSIBILITA E STAMPA
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.fruity *, body.fruity *::before, body.fruity *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  html { font-size: 100%; }
  body.fruity { background: #fff; }
  .ssb-hero { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.fruity .question-container { box-shadow: none; break-inside: avoid; }
}