/**
 * ODS — Start dispute form modern override
 *
 * Caricare esclusivamente nella pagina start_dispute.php,
 * DOPO /public/form3.css e il CSS di Choices.js.
 *
 * Questo file modifica solo la presentazione: non richiede variazioni
 * agli ID dei campi, al salvataggio asincrono o alla validazione esistente.
 */

/* --------------------------------------------------------------------------
   Design tokens locali
   -------------------------------------------------------------------------- */

body {
  --ods-color-primary: #182c78;
  --ods-color-primary-hover: #102160;
  --ods-color-accent: #0878d1;
  --ods-color-success: #197a3a;
  --ods-color-danger: #c6283d;
  --ods-color-text: #172033;
  --ods-color-muted: #5f6b7a;
  --ods-color-border: #d8dee8;
  --ods-color-border-strong: #b7c1cf;
  --ods-color-surface: #ffffff;
  --ods-color-surface-soft: #f5f7fb;
  --ods-color-page: #f7f8fb;
  --ods-focus-ring: 0 0 0 4px rgba(8, 120, 209, 0.16);
  --ods-shadow-card: 0 18px 45px rgba(18, 36, 78, 0.08);
  --ods-shadow-field: 0 1px 2px rgba(18, 36, 78, 0.04);
  --ods-radius-card: 24px;
  --ods-radius-field: 13px;

}

.content {
  background: var(--ods-color-page);
  color: var(--ods-color-text);
  font-size: 16px !important;
  line-height: 1.65;
  padding-bottom: 1px;
  /* Review PR13 14/08, P2 "sfondo interrotto": su step corti il grigio
     finiva prima del fondo della viewport, lasciando una fascia bianca.
     svh = viewport visibile su iOS (100vh sborderebbe sotto la barra
     Safari); il fallback vh copre i browser senza unita' nuove. */
  min-height: 100vh;
  min-height: 100svh;
}

/* Stessa cintura sul body: se .content per qualunque ragione resta corto,
   sotto c'e' ancora il grigio della pagina, mai il bianco del body nudo. */
body.ods-form-page {
  background: var(--ods-color-page);
}

.content,
.content input,
.content textarea,
.content select,
.content button {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   Tipografia e struttura generale
   -------------------------------------------------------------------------- */

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  color: var(--ods-color-text);
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.content h1,
.content .h1 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.6rem, 2.15vw, 2.15rem);
  font-weight: 760 !important;
  line-height: 1.18;
}

.content h2,
.content .h2 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500 !important;
  line-height: 1.3;
  color: var(--ods-color-muted);
}

.content h5,
.content .h5 {
  margin-top: 1.5rem;
  margin-bottom: 0.9rem;
  font-size: 1.06rem;
  font-weight: 750;
  line-height: 1.35;
}

.content p,
.content li {
  color: var(--ods-color-text);
  font-size: 1rem;
  line-height: 1.7;
}

.content p > i,
.content .text-muted,
.content small {
  color: var(--ods-color-muted);
}

.content a {
  color: var(--ods-color-primary);
  text-underline-offset: 0.18em;
}

.content a:hover {
  color: var(--ods-color-primary-hover);
}

.content > .container:first-child {
  padding-top: clamp(0.5rem, 2vw, 1.5rem);
}

.marginMobile {
  margin-bottom: 2rem !important;
}

/* --------------------------------------------------------------------------
   Sezioni del form
   -------------------------------------------------------------------------- */

:is(#section0, #section1, #section2, #section3, #section4, #section5) {
  scroll-margin-top: 22px;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .question-box {
  position: relative;
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  overflow: visible;
  background: var(--ods-color-surface);
  border: 1px solid rgba(183, 193, 207, 0.7);
  border-radius: var(--ods-radius-card);
  box-shadow: var(--ods-shadow-card);
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .question-box::before {
  position: absolute;
  top: 0;
  left: clamp(1.5rem, 3.2vw, 2.75rem);
  width: 58px;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--ods-color-primary), var(--ods-color-accent));
  border-radius: 0 0 999px 999px;
}

/* Un solo linguaggio visivo per tutte le note che aiutano a compilare il
   modulo. Il contesto decide soltanto margini e disposizione del contenuto. */
.content .ods-helper {
  margin: 1rem 0;
  padding: 0.75rem 0.875rem;
  color: #3f4b61;
  background: #edf3fb;
  border: 0;
  border-left: 3px solid var(--ods-color-primary, #182c78);
  border-radius: 0 10px 10px 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.content .ods-helper strong,
.content .ods-helper b {
  color: var(--ods-color-text, #172033);
}

.ticketId {
  margin-bottom: 1rem;
  color: var(--ods-color-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.075em;
}

.infoAlreadyStart {
  margin: 0;
  padding: 1rem 1.25rem;
  color: #ffffff !important;
  background: linear-gradient(25deg, #5e7297, #404d64);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(23, 36, 61, 0.14);
}

.infoAlreadyStart a {
  color: #ffffff;
  font-weight: 750;
}

.info-stop {
  padding: 1.1rem 1.25rem;
  color: #982238;
  background: #fff4f6;
  border: 1px solid #efb9c3;
  border-left: 5px solid var(--ods-color-danger);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(198, 40, 61, 0.07);
  font-size: 1rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Campi e label — desktop/tablet
   -------------------------------------------------------------------------- */

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating {
  margin-bottom: 1rem;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-control,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-select,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .choices__inner {
  color: var(--ods-color-text);
  background-color: #ffffff;
  border-color: var(--ods-color-border);
  border-radius: var(--ods-radius-field) !important;
  box-shadow: var(--ods-shadow-field);
  font-size: 1rem !important;
  font-weight: 450;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-control,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-select {
  height: 62px;
  min-height: 62px;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) textarea.form-control {
  min-height: 180px;
  padding-top: 1.75rem;
  line-height: 1.6;
  resize: vertical;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-control:hover:not(:disabled),
:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-select:hover:not(:disabled),
:is(#section0, #section1, #section2, #section3, #section4, #section5) .choices__inner:hover {
  border-color: var(--ods-color-border-strong);
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-control:focus,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-select:focus,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .choices.is-focused .choices__inner,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .choices.is-open .choices__inner {
  background-color: #ffffff;
  border-color: var(--ods-color-accent);
  box-shadow: var(--ods-focus-ring);
  outline: none;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-control:disabled,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-select:disabled {
  color: #798291;
  background: #f0f2f6;
  border-color: #e0e4ea;
  opacity: 1;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > label {
  width: auto;
  color: #536072 !important;
  font-size: 0.94rem;
  font-weight: 650;
  letter-spacing: 0;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-control:focus ~ label,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-control:not(:placeholder-shown) ~ label,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-select ~ label {
  color: var(--ods-color-primary) !important;
}

/*
 * I SEGNAPOSTO SI DEVONO VEDERE, A QUALSIASI LARGHEZZA.
 *
 * Bootstrap dentro .form-floating rende il placeholder trasparente
 * (public/styles.css:2598-2600): serve a lui come sensore per
 * :placeholder-shown, non e' una scelta di stile. Il sandbox lo riaccendeva
 * gia', ma solo dentro @media (max-width: 767.98px) — sotto i 768px l'esempio
 * si vedeva, sopra no. Un esempio invisibile non aiuta nessuno, quindi la
 * regola vale ora a ogni larghezza; il blocco mobile resta e ripete lo stesso
 * valore, quindi non cambia nulla sul telefono.
 */
:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-control::placeholder {
  color: #8a95a5;
  opacity: 1;
}

.errore {
  margin-top: 0.4rem;
  padding-left: 0.15rem;
  color: var(--ods-color-danger);
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0.025em;
  text-transform: none;
}

/* Choices.js */

:is(#section0, #section1, #section2, #section3, #section4, #section5) .choices {
  margin-bottom: 0;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .choices__inner {
  min-height: 54px;
  padding: 0.65rem 0.75rem 0.35rem;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .choices__list--multiple .choices__item {
  margin: 0 0.35rem 0.35rem 0;
  padding: 0.38rem 0.6rem;
  color: #ffffff;
  background: var(--ods-color-primary);
  border: 0;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .choices__list--dropdown,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .choices__list[aria-expanded] {
  margin-top: 0.35rem;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--ods-color-border);
  border-radius: 13px;
  box-shadow: 0 18px 45px rgba(18, 36, 78, 0.16);
}

/* --------------------------------------------------------------------------
   Card radio
   -------------------------------------------------------------------------- */


:is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input-element {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input {
  position: relative;
  height: calc(100% - 20px);
  min-height: 146px;
  margin: 10px 6px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--ods-color-border);
  border-radius: 16px;
  box-shadow: 0 5px 16px rgba(18, 36, 78, 0.05);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input .card-header {
  padding: 0.85rem 1rem 0.65rem;
  color: var(--ods-color-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 750;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input .card-body {
  padding: 0 1rem 1rem;
  color: var(--ods-color-muted);
  font-size: 0.93rem;
  line-height: 1.55;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) label:hover > .card-input {
  transform: translateY(-2px);
  border-color: #9facbf;
  box-shadow: 0 10px 24px rgba(18, 36, 78, 0.09);
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input-element:focus-visible + .card-input {
  border-color: var(--ods-color-accent);
  box-shadow: var(--ods-focus-ring);
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input-element:checked + .card-input {
  background: #f5f9ff;
  border-color: var(--ods-color-primary);
  box-shadow: 0 0 0 2px rgba(24, 44, 120, 0.11), 0 12px 28px rgba(18, 36, 78, 0.1);
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input-element:checked + .card-input::after {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  content: "✓";
  color: #ffffff;
  background: var(--ods-color-primary);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   Upload e file caricati
   -------------------------------------------------------------------------- */

.upload-area {
  padding: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--ods-color-muted);
  background: #f8faff;
  border: 1.5px dashed #9eabc0;
  border-radius: 17px;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.upload-area:hover,
.upload-area:focus-within {
  background: #f2f7fd;
  border-color: var(--ods-color-accent);
  box-shadow: 0 0 0 4px rgba(8, 120, 209, 0.08);
}

.upload-area.dragging {
  background: #effaf3;
  border-color: var(--ods-color-success);
  transform: scale(1.005);
}

.upload-area > i {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ods-color-primary);
  font-size: 2rem;
}

.upload-area p {
  margin-bottom: 0.9rem;
}

.custom-file-upload {
  display: inline-flex;
  width: auto;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.05rem;
  color: #ffffff;
  background: var(--ods-color-primary);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.upload-area:hover .custom-file-upload {
  background: var(--ods-color-primary-hover);
}

.file-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.single-file {
  display: flex;
  width: auto !important;
  min-width: 0;
  align-items: center;
  min-height: 72px;
  margin: 0;
  padding: 0.85rem 2.6rem 0.85rem 0.9rem;
  background: #ffffff;
  border: 1px solid var(--ods-color-border);
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(18, 36, 78, 0.05);
  text-transform: none !important;
}

.single-file a {
  display: block;
  min-width: 0;
  align-items: initial;
  justify-content: flex-start;
  color: var(--ods-color-primary) !important;
  font-size: 0.8rem !important;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}

.single-file .remove-image {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--ods-color-danger);
  background: #fff1f3;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 800;
}

.upload-status {
  margin-top: 0.65rem;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Consensi e pulsante finale
   -------------------------------------------------------------------------- */

#section5 .ods-decl-group {
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#section5 .form-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 44px;
  align-items: start;
  padding-left: 0;
}

#section5 .form-check-input {
  float: none;
  width: 21px;
  height: 21px;
  margin: 0.12rem 0 0;
  border-color: #9aa6b7;
  border-radius: 6px;
}

#section5 .form-check-input:focus {
  border-color: var(--ods-color-accent);
  box-shadow: var(--ods-focus-ring);
}

#section5 .form-check-input:checked {
  background-color: var(--ods-color-success);
  border-color: var(--ods-color-success);
}

#section5 .form-check-label {
  width: auto;
  color: #334057;
  font-size: 0.93rem;
  line-height: 1.55;
}

#submit-button {
  min-height: 54px;
  padding: 0.85rem 1.5rem;
  background: var(--ods-color-success) !important;
  border: 1px solid var(--ods-color-success);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(25, 122, 58, 0.18);
  font-size: 1rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.015em;
  text-transform: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#submit-button:not(:disabled):hover {
  background: #12672f !important;
  box-shadow: 0 16px 30px rgba(25, 122, 58, 0.24);
  transform: translateY(-1px);
}

#submit-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(25, 122, 58, 0.18), 0 12px 24px rgba(25, 122, 58, 0.18);
}

#submit-button:disabled {
  color: #737d8c !important;
  background: #e4e7ec !important;
  border-color: #e4e7ec;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* Durante la verifica di sicurezza e l'invio nessun controllo del modulo deve
   restare azionabile. L'overlay e' solo presentazione (i click sono fermati in
   cattura dal form), cosi' un eventuale challenge Turnstile resta utilizzabile. */
html.ods-submission-pending,
body.ods-submission-pending {
  overflow: hidden;
  overscroll-behavior: none;
  cursor: wait;
}

.ods-submission-lock {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(244, 247, 252, 0.82);
  backdrop-filter: blur(2px);
  pointer-events: none;
  touch-action: none;
  overscroll-behavior: contain;
}

.ods-submission-lock[hidden] {
  display: none;
}

.ods-submission-lock__panel {
  display: flex;
  max-width: min(92vw, 420px);
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.2rem;
  color: var(--ods-color-text, #172033);
  background: #ffffff;
  border: 1px solid var(--ods-color-border, #d8dee8);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(18, 36, 78, 0.18);
  font-weight: 750;
}

.ods-submission-lock__panel .spinner-border {
  flex: 0 0 auto;
  color: var(--ods-color-primary, #182c78);
}

.ods-submission-lock__label {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Navigazione verticale e separatori desktop
   -------------------------------------------------------------------------- */

.nav__wrapper .nav__counter {
  color: var(--ods-color-muted);
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-weight: 650;
}

.nav__wrapper .nav li.active .nav__counter,
.nav__wrapper .nav li.active .nav__title {
  color: var(--ods-color-primary);
}

.nav__wrapper .nav li::after {
  border-color: #c7cfdb;
}

.dashed-line-with-arrow {
  height: 90px;
  background: repeating-linear-gradient(to bottom, #aeb7c4 0, #aeb7c4 4px, transparent 4px, transparent 9px);
}

.dashed-line-with-arrow::after {
  border-top-color: #8e99a9;
}

.dashed-line-with-arrow .label,
.dashed-line-with-arrow > .label {
  color: #697586;
  background: var(--ods-color-page);
  font-weight: 650;
  letter-spacing: 0.035em;
}

/* --------------------------------------------------------------------------
   Barra di completamento
   -------------------------------------------------------------------------- */

.ods-progress-sticky {
  bottom: 0;
  margin-bottom: 0;
  padding: 0.8rem 1rem 1rem;
  background: rgba(247, 248, 251, 0.92);
  border-top: 1px solid rgba(183, 193, 207, 0.65);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 28px rgba(18, 36, 78, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ods-progress-label {
  color: var(--ods-color-muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.ods-progress-label strong {
  color: var(--ods-color-success);
}

.ods-progress-bar {
  height: 8px;
  background: #dfe4eb;
}

.ods-progress-fill {
  background: linear-gradient(90deg, var(--ods-color-primary), var(--ods-color-success));
}

/*
 * La traccia sopra il campo data.
 *
 * Aveva `white-space: nowrap`: a 390px la riga italiana misurava 420px e i
 * suoi ultimi 30 finivano fuori dallo schermo, tagliati (il documento non
 * scrollava neppure in orizzontale, quindi il testo era irrecuperabile).
 * Nessuna lingua ci sta su una riga sola a quella larghezza, quindi il vincolo
 * era sbagliato in partenza e non solo in italiano: ora la riga va a capo.
 */
.date-format-hint {
    color: #667085;
    font-size: 0.85em;
    font-weight: 600;
    display: block;
    overflow-wrap: anywhere;
}

.logo-app-mobile {
  display: none;
}


/* ==========================================================================
   Scelta motivazione tramite pulsanti
   ========================================================================== */

.ods-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
}

/*
 * Il select resta attivo per logica e validazione,
 * ma non è visibile all'utente.
 */
.ods-issue-choice-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ods-issue-choice {
  position: relative;
  margin-top: 0.75rem;
  margin-bottom: 1.2rem;
}

.ods-issue-choice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.ods-issue-choice-button {
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem 1rem;
  color: var(--ods-color-text);
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--ods-color-border);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(18, 36, 78, 0.04);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.ods-issue-choice-button:hover {
  background: #f8faff;
  border-color: var(--ods-color-border-strong);
  box-shadow: 0 8px 20px rgba(18, 36, 78, 0.07);
  transform: translateY(-1px);
}

.ods-issue-choice-button:focus-visible {
  border-color: var(--ods-color-accent);
  outline: none;
  box-shadow: var(--ods-focus-ring);
}

.ods-issue-choice-indicator {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border: 2px solid #a9b3c1;
  border-radius: 50%;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.ods-issue-choice-text {
  display: block;
  min-width: 0;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.45;
}

.ods-issue-choice-button.is-selected {
  color: var(--ods-color-primary);
  background: #f4f8ff;
  border-color: var(--ods-color-primary);
  box-shadow:
    0 0 0 2px rgba(24, 44, 120, 0.08),
    0 10px 24px rgba(18, 36, 78, 0.08);
}

.ods-issue-choice-button.is-selected
.ods-issue-choice-indicator {
  background: var(--ods-color-primary);
  border-color: var(--ods-color-primary);
  box-shadow: inset 0 0 0 5px #ffffff;
}

.ods-issue-choice-button.is-selected
.ods-issue-choice-text {
  font-weight: 720;
}

.ods-issue-choice-error {
  display: none;
  margin-top: 0.55rem;
}

/* ==========================================================================
   Contenuti illegali — Choices desktop / card multiple mobile
   ========================================================================== */

.ods-illegal-content-field {
  position: relative;
}

.ods-illegal-content-label {
  display: block;
  margin-bottom: 0.55rem;
  color: #334057;
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.4;
}

.ods-illegal-content-cards {
  display: none;
}

.ods-illegal-content-error {
  display: none;
  margin-top: 0.55rem;
}

@media (max-width: 767.98px) {

  /*
   * Su mobile Choices non viene inizializzato.
   * Il select resta nel DOM come sorgente dati.
   */
  .ods-illegal-content-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /*
   * Protezione nel caso la pagina venga ridimensionata
   * dopo che Choices era già stato inizializzato.
   */
  .ods-illegal-content-field > .choices {
    display: none !important;
  }

  .ods-illegal-content-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .ods-illegal-content-card {
    display: grid;
    width: 100%;
    min-height: 58px;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.82rem 0.9rem;
    color: var(--ods-color-text);
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--ods-color-border);
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(18, 36, 78, 0.04);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
      background-color 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease,
      transform 0.18s ease;
  }

  .ods-illegal-content-card:hover {
    background: #f8faff;
    border-color: var(--ods-color-border-strong);
  }

  .ods-illegal-content-card:focus-visible {
    border-color: var(--ods-color-accent);
    outline: none;
    box-shadow: var(--ods-focus-ring);
  }

  .ods-illegal-content-card-indicator {
    position: relative;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    background: #ffffff;
    border: 2px solid #a9b3c1;
    border-radius: 7px;
    transition:
      background-color 0.18s ease,
      border-color 0.18s ease;
  }

  .ods-illegal-content-card-text {
    min-width: 0;
    font-size: 0.91rem;
    font-weight: 600;
    line-height: 1.45;
  }

  .ods-illegal-content-card.is-selected {
    color: var(--ods-color-primary);
    background: #f4f8ff;
    border-color: var(--ods-color-primary);
    box-shadow:
      0 0 0 2px rgba(24, 44, 120, 0.08),
      0 9px 22px rgba(18, 36, 78, 0.07);
  }

  .ods-illegal-content-card.is-selected
  .ods-illegal-content-card-indicator {
    color: #ffffff;
    background: var(--ods-color-primary);
    border-color: var(--ods-color-primary);
  }

  .ods-illegal-content-card.is-selected
  .ods-illegal-content-card-indicator::after {
    content: "✓";
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
  }

  .ods-illegal-content-card.is-selected
  .ods-illegal-content-card-text {
    font-weight: 720;
  }
}

@media (max-width: 767.98px) {
  .ods-issue-choice {
    margin-top: 0.6rem;
  }

  .ods-issue-choice-list {
    gap: 0.6rem;
  }

  .ods-issue-choice-button {
    min-height: 58px;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.8rem 0.85rem;
    border-radius: 12px;
  }

  .ods-issue-choice-indicator {
    width: 22px;
    height: 22px;
  }

  .ods-issue-choice-text {
    font-size: 0.91rem;
    line-height: 1.42;
  }
}


/* --------------------------------------------------------------------------
   Mobile: label esterne, tipografia e spaziature touch-friendly
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

  /* Il vecchio blocco introduttivo e' gia' invisibile su mobile tramite
     #info-desktop, ma il suo contenitore continuava a occupare margini sopra
     la card email. Fuori dal layout significa che resta soltanto lo spazio
     necessario alla topbar fissa. */
  .ods-form-page .content > .ods-preform-intro {
    display: none !important;
  }

  /* Su uno schermo stretto ogni pagina contiene gia' un solo passaggio: una
     seconda cornice non aggiunge gerarchia e sottrae larghezza ai campi. Il
     viewport diventa la superficie, con un unico gutter laterale da 16px. */
  body.ods-form-page {
    background: #ffffff;
  }

  .ods-form-page .content {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .logo-app-mobile {
    display: block;
    width: 160px;
    float: left;
  }

  .logInToggler {
    display: none;
  }

  .sidebar {
    display: none;
  }

    #info-desktop {
        display: none;
    }


  .content {
    padding: 0 0.65rem 1px;
    font-size: 16px !important;
    line-height: 1.6;
  }

  .content > .container:first-child {
    padding-top: 0.25rem;
  }

  .content .container {
    padding-right: 0.35rem;
    padding-left: 0.35rem;
  }

  .marginMobile {
    margin-bottom: 1rem !important;
  }

  .content h1,
  .content .h1 {
    font-size: clamp(1.42rem, 7vw, 1.75rem);
    line-height: 1.22;
  }

  .content h2,
  .content .h2 {
    font-size: 1.08rem;
  }

  .content h5,
  .content .h5 {
    margin-top: 1.25rem;
    font-size: 1rem;
  }

  .content p,
  .content li {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) {
    padding-right: 0;
    padding-left: 0;
    scroll-margin-top: 10px;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .row > [class*="col-"] {
    min-width: 0;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .question-box {
    margin-bottom: 0;
    padding: 0.75rem 0 1.25rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .question-box::before {
    display: none;
  }

  .ticketId {
    margin-bottom: 0.8rem;
    font-size: 0.69rem;
  }

  /* Floating label Bootstrap -> label statica sopra il campo. */
  :is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    margin-bottom: 1rem;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > label {
    position: static;
    order: -1;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 0.15rem;
    overflow: visible;
    color: #334057 !important;
    font-size: 0.86rem;
    font-weight: 720;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
    pointer-events: auto;
    border: 0;
    opacity: 1 !important;
    transform: none !important;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > label::after {
    display: none !important;
    content: none !important;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-control,
  :is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-select {
    order: 0;
    width: 100%;
    height: auto;
    min-height: 52px;
    padding: 0.78rem 0.9rem !important;
    font-size: 16px !important; /* evita lo zoom automatico su iOS */
    line-height: 1.35;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-select {
    padding-right: 2.35rem !important;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > textarea.form-control {
    min-height: 165px;
    padding-top: 0.85rem !important;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-control::placeholder {
    color: #8a95a5;
    opacity: 1;
  }

  .errore {
    order: 1;
    margin-top: 0;
    font-size: 0.74rem;
  }

  /* Radio card più compatte e facilmente toccabili. */
  :is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input {
    min-height: 0;
    height: auto;
    margin: 0.35rem 0 0.65rem;
    border-radius: 14px;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input .card-header {
    padding: 0.8rem 2.8rem 0.35rem 0.85rem;
    font-size: 0.96rem;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input .card-body {
    padding: 0 0.85rem 0.85rem;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input-element:checked + .card-input::after {
    top: 0.65rem;
    right: 0.65rem;
  }

  /* Testi che introducono i campi: più vicini al controllo relativo. */
  :is(#section0, #section1, #section2, #section3, #section4, #section5) p.mt-4.mb-0,
  :is(#section0, #section1, #section2, #section3, #section4, #section5) p.mt-4.mb-1,
  :is(#section0, #section1, #section2, #section3, #section4, #section5) p.mt-3.mb-0 {
    margin-top: 1.15rem !important;
    margin-bottom: 0.55rem !important;
    font-size: 0.94rem;
  }

  .upload-area {
    padding: 1.25rem 0.85rem;
    border-radius: 14px;
  }

  .upload-area p,
  .upload-area small {
    font-size: 0.83rem;
    line-height: 1.5;
  }

  .custom-file-upload {
    min-height: 44px;
    padding: 0.7rem 1rem;
  }

  .file-preview {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .single-file {
    min-height: 64px;
  }

  #section5 .form-check {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0.65rem;
  }

  #section5 .form-check-input {
    width: 20px;
    height: 20px;
  }

  #section5 .form-check-label {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  #submit-button {
    width: 100%;
    min-height: 54px;
    margin-top: 1.1rem !important;
  }

  .infoAlreadyStart,
  .info-stop {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* Separatore compatto; evita oltre 100 px di scroll fra le sezioni. */
  .dashed-line-with-arrow {
    height: 48px;
  }

  .dashed-line-with-arrow .label,
  .dashed-line-with-arrow > .label {
    min-width: 150px;
    font-size: 0.65rem;
  }

  .ods-progress-sticky {
    padding: 0.68rem 0.75rem 0.8rem;
    border-radius: 14px 14px 0 0;
  }

  .ods-progress-label {
    margin-bottom: 0.45rem;
    font-size: 0.76rem;
  }
}

/* Schermi molto piccoli */
@media (max-width: 374px) {
  .content {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
  }

  :is(#section0, #section1, #section2, #section3, #section4, #section5) .question-box {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
  }

  .content h1,
  .content .h1 {
    font-size: 1.35rem;
  }
}

/* --------------------------------------------------------------------------
   Accessibilità e preferenze utente
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .content *,
  .content *::before,
  .content *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-contrast: more) {
  :is(#section0, #section1, #section2, #section3, #section4, #section5) .question-box,
  :is(#section0, #section1, #section2, #section3, #section4, #section5) .form-control,
  :is(#section0, #section1, #section2, #section3, #section4, #section5) .form-select,
  :is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input {
    border-color: #697586;
  }
}
/* ==========================================================================
   ODS — Accordion mobile
   Queste regole devono restare IN FONDO al file di override.
   ========================================================================== */

/*
 * Il JavaScript genera toggle e pulsanti anche quando la pagina viene aperta
 * da desktop. Per impostazione predefinita li nascondiamo sempre; saranno
 * mostrati soltanto quando il body riceve la classe ods-mobile-accordion.
 */
.ods-accordion-toggle,
.ods-accordion-next {
  display: none !important;
}

.ods-accordion-panel[hidden] {
  display: none !important;
}

/* Mantiene invariata la versione desktop one-page. */
@media (min-width: 768px) {
  .ods-accordion-toggle,
  .ods-accordion-next {
    display: none !important;
  }

  .ods-accordion-panel {
    display: block !important;
  }
}

@media (max-width: 767.98px) {

  /*
   * Nasconde l'intera riga dei separatori tra le sezioni, non soltanto
   * la freccia interna: in questo modo non resta spazio verticale vuoto.
   */
  body.ods-mobile-accordion #messaggioErrore + .row,
  body.ods-mobile-accordion #section2 + .row,
  body.ods-mobile-accordion #section3 + .row,
  body.ods-mobile-accordion #section4 + .row {
    display: none !important;
  }

  /* Fallback per eventuali separatori aggiuntivi. */
  body.ods-mobile-accordion .dashed-line-with-arrow {
    display: none !important;
  }

  body.ods-mobile-accordion :is(
    #section1,
    #section2,
    #section3,
    #section4,
    #section5
  ) {
    margin-bottom: 0.8rem;
  }

  /*
   * Intestazione cliccabile dell'accordion.
   */
  body.ods-mobile-accordion .ods-accordion-toggle {
    display: flex !important;
    width: 100%;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin: 0;
    padding: 0.9rem 1rem;
    color: var(--ods-color-text);
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--ods-color-border);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(18, 36, 78, 0.07);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
      border-color 0.18s ease,
      box-shadow 0.18s ease,
      background-color 0.18s ease,
      transform 0.18s ease;
  }

  body.ods-mobile-accordion .ods-accordion-toggle:hover {
    border-color: var(--ods-color-border-strong);
  }

  body.ods-mobile-accordion .ods-accordion-toggle:focus-visible {
    border-color: var(--ods-color-accent);
    outline: none;
    box-shadow: var(--ods-focus-ring);
  }

  body.ods-mobile-accordion .ods-accordion-toggle[aria-expanded="true"] {
    color: var(--ods-color-primary);
    background: #f5f9ff;
    border-color: rgba(24, 44, 120, 0.55);
    box-shadow:
      0 0 0 2px rgba(24, 44, 120, 0.08),
      0 10px 26px rgba(18, 36, 78, 0.09);
  }

  body.ods-mobile-accordion .ods-accordion-toggle-title {
    display: block;
    min-width: 0;
    color: inherit;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -0.015em;
  }

  body.ods-mobile-accordion .ods-accordion-toggle-icon {
    position: relative;
    display: grid;
    width: 32px;
    min-width: 32px;
    height: 32px;
    place-items: center;
    color: var(--ods-color-primary);
    background: #eef3ff;
    border-radius: 50%;
  }

  body.ods-mobile-accordion .ods-accordion-toggle-icon::before {
    content: "+";
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-1px);
  }

  body.ods-mobile-accordion
    .ods-accordion-toggle[aria-expanded="true"]
    .ods-accordion-toggle-icon {
    color: #ffffff;
    background: var(--ods-color-primary);
  }

  body.ods-mobile-accordion
    .ods-accordion-toggle[aria-expanded="true"]
    .ods-accordion-toggle-icon::before {
    content: "−";
  }

  /*
   * Contenuto della sezione aperta.
   */
  body.ods-mobile-accordion .ods-accordion-panel {
    margin-top: 0.65rem;
  }

  body.ods-mobile-accordion .ods-accordion-panel .question-box {
    margin-bottom: 0;
  }

  /*
   * Il titolo è già riportato nel toggle; su mobile lo nascondiamo nel
   * pannello per evitare la ripetizione. L'eventuale h2 della sezione 5 resta.
   */
  body.ods-mobile-accordion
    .ods-accordion-panel
    .question-box
    > h1,
  body.ods-mobile-accordion
    .ods-accordion-panel
    .question-box
    > .h1 {
    display: none;
  }

  /*
   * Pulsante per passare alla sezione successiva.
   */
  body.ods-mobile-accordion .ods-accordion-next {
    display: inline-flex !important;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 1.8rem 0 0;
    padding: 0.8rem 1.15rem;
    color: #ffffff;
    text-align: center;
    background: var(--ods-color-primary);
    border: 1px solid var(--ods-color-primary);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(24, 44, 120, 0.18);
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
      background-color 0.18s ease,
      box-shadow 0.18s ease,
      transform 0.18s ease;
  }

  body.ods-mobile-accordion .ods-accordion-next::after {
    content: "→";
    font-size: 1.12rem;
    line-height: 1;
  }

  body.ods-mobile-accordion .ods-accordion-next:not(:disabled):hover {
    background: var(--ods-color-primary-hover);
    box-shadow: 0 15px 28px rgba(24, 44, 120, 0.23);
    transform: translateY(-1px);
  }

  body.ods-mobile-accordion .ods-accordion-next:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 4px rgba(8, 120, 209, 0.18),
      0 12px 24px rgba(24, 44, 120, 0.18);
  }

  body.ods-mobile-accordion .ods-accordion-next:disabled {
    color: #737d8c;
    background: #e4e7ec;
    border-color: #e4e7ec;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
  }
}

@media (max-width: 767.98px) {
  /*
   * Il padding mobile dei container è 0.35rem.
   * Allineiamo il gutter Bootstrap delle row per evitare
   * che i margini negativi escano dal viewport.
   */
  .content .row:not(.gx-0) {
    --bs-gutter-x: 0.7rem;
  }

  .infoAlreadyStart {
    display: block;
    padding: 0.75rem 0.9rem;
    color: #33415c !important;
    background: #f4f7fb;
    border: 1px solid var(--ods-color-border, #d8dee8);
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: left;
  }

  .infoAlreadyStart b {
    font-weight: 600;
  }

  .infoAlreadyStart a {
    color: var(--ods-color-primary, #182c78);
    font-weight: 750;
    white-space: nowrap;
  }

  /*
   * Protezione per elementi fixed parzialmente esterni,
   * come il pulsante laterale di assistenza.
   */
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }
}

@media (max-width: 767.98px) {
  #section5 .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #section5 .form-check-input {
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    margin-top: 0.1rem;
    cursor: pointer;
  }

  #section5 .form-check-label {
    flex: 1 1 auto;
    font-size: 0.96rem;
    line-height: 1.45;
    cursor: pointer;
  }
}

/* ---------------------------------------------------------------------------
   Passo 0 — "email prima di tutto": il gate
   ---------------------------------------------------------------------------
   Finche' l'email di contatto non e' salvata su temp_issues, le sezioni 1-5 e
   la navigazione laterale restano nascoste. Lo stato di partenza e' reso lato
   server (start_dispute.php aggiunge .ods-email-gate-pending su .content e
   .ods-email-gate-hidden su #navbar-example), e viene rimosso via JS quando
   save_contact_email.php conferma il salvataggio.

   Il gate e' volutamente FAIL-OPEN: se il browser non capisce :is(), o se il
   CSS non viene caricato, il form resta interamente visibile e il vecchio
   comportamento e' preservato. Meglio un form senza gate che un form
   irraggiungibile. Stessa ragione per il <noscript> in start_dispute.php.
   --------------------------------------------------------------------------- */

.ods-email-gate-hidden {
  display: none !important;
}

.content.ods-email-gate-pending :is(#section1, #section2, #section3, #section4, #section5) {
  display: none !important;
}

/*
   #odsProgressBox sta FUORI da #section5 (start_dispute.php:2326, la sezione
   chiude a :2320): senza questa regola la barra "completamento compilazione"
   resterebbe appiccicata sopra un form invisibile, per giunta ferma a 0%
   perche' l'IntersectionObserver osserva #submit-button, che sotto gate e'
   display:none e quindi non interseca mai.
*/
.content.ods-email-gate-pending #odsProgressBox {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Passo 0 — completamento del dominio email
   ---------------------------------------------------------------------------
   Comportamento in public/ods-email-suggest.js. Qui c'e' solo la presentazione.

   Il contenitore e' relativo e la lista e' assoluta: la lista deve COPRIRE il
   pulsante "Continua" invece di spingerlo giu'. Un elenco che sposta il
   pulsante sotto il dito mentre l'utente sta per premerlo e' il modo piu'
   rapido di far toccare la cosa sbagliata su un telefono.

   Il ripiego per browser senza `hidden` di default (il reset di Bootstrap non
   copre gli elementi custom) e' esplicito: [hidden] { display: none }.
   --------------------------------------------------------------------------- */

.ods-email-suggest {
  position: relative;
}

.ods-email-suggest-list[hidden] {
  display: none;
}

.ods-email-suggest-list {
  position: absolute;
  top: calc(100% - 0.5rem);
  left: 0;
  right: 0;
  z-index: 1080;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--ods-color-surface);
  border: 1px solid var(--ods-color-border-strong);
  border-radius: var(--ods-radius-field);
  box-shadow: 0 14px 32px rgba(18, 36, 78, 0.16);
  max-height: 60vh;
  overflow-y: auto;
  /* Su iOS l'elenco deve poter scorrere col dito senza catturare la pagina. */
  -webkit-overflow-scrolling: touch;
}

/*
   48px di altezza minima: il vincolo del brief e' >= 44px, e 48 lascia margine
   al padding verticale del testo quando il dominio va a capo su schermi stretti.
*/
.ods-email-suggest-option {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 48px;
  padding: 0.55rem 0.85rem;
  border-radius: calc(var(--ods-radius-field) - 4px);
  color: var(--ods-color-text);
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
  /* Il tocco non deve selezionare il testo della voce ne' far comparire la
     lente di ingrandimento di iOS: e' un bersaglio, non un paragrafo. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  word-break: break-word;
}

/*
   La parte gia' digitata resta in grigio, il dominio proposto e' quello che
   cambia: l'utente deve capire in mezzo secondo COSA sta per aggiungere.
*/
.ods-email-suggest-local {
  color: var(--ods-color-muted);
}

.ods-email-suggest-domain {
  color: var(--ods-color-primary);
  font-weight: 600;
}

.ods-email-suggest-option.is-active,
.ods-email-suggest-option:hover {
  background: var(--ods-color-surface-soft);
}

/*
   L'evidenziazione da tastiera non puo' essere il solo colore di sfondo: chi
   ha una vista ridotta o un monitor scadente non lo distingue. Il filetto a
   sinistra e' il segnale ridondante.
*/
.ods-email-suggest-option.is-active {
  box-shadow: inset 3px 0 0 var(--ods-color-accent);
}

@media (prefers-contrast: more) {
  .ods-email-suggest-option.is-active {
    outline: 2px solid var(--ods-color-primary);
    outline-offset: -2px;
  }
}

/*
   Nome accessibile e annunci della regione live: presenti per lo screen
   reader, invisibili a schermo. L'operatore ha chiesto meno testo in pagina.
*/
.ods-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   INTERVENTO 3 — aiuto per piattaforma sui dati dell'account.
   Markup reso da app_pages/_account_help.php, acceso da public/ods-account-help.js.
   Testo dal CMS (messaggi.progressivo 942001-942015).

   Scelte, e perche':
   - riquadro chiaro con barra a sinistra: si legge come "aiuto", non come un
     altro campo da riempire, e non compete con le etichette blu dei campi;
   - passi numerati veri (<ol>): l'operatore ha chiesto "passo per passo, non
     un paragrafo";
   - niente accordion, niente "mostra di piu'": e' breve per costruzione, e un
     tocco in piu' sul telefono e' un tocco in piu' per abbandonare;
   - nessun logo di piattaforma: qui c'e' solo testo (i loghi hanno il vincolo
     di compliance dell'intervento 1, e 16 piattaforme su 30 non possono averlo).
   =========================================================================== */

.ods-ah {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem 0.8rem;
  border: 1px solid var(--ods-color-border);
  border-left: 4px solid var(--ods-color-accent);
  border-radius: 10px;
  background: var(--ods-color-surface-soft);
  color: var(--ods-color-text);
  /* 14px / 1.42. Misurato a 390x844 sulla guida piu' lunga (Facebook):
     535px con la prima stesura, 505px dopo aver sfoltito la copy, 488px con
     questa tipografia. Sotto i 14px la leggibilita' cade e il guadagno non
     vale il costo: l'ulteriore compressione, se servira', va cercata
     togliendo il percorso nelle impostazioni, non rimpicciolendo il testo. */
  font-size: 0.875rem;
  line-height: 1.42;
}

.ods-ah[hidden],
.ods-ah__pane[hidden] {
  display: none;
}

.ods-ah__lead {
  margin: 0 0 0.45rem;
  font-weight: 700;
  color: var(--ods-color-primary);
}

.ods-ah__field {
  margin: 0.6rem 0 0.15rem;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--ods-color-muted);
  text-transform: uppercase;
}

.ods-ah__field:first-of-type {
  margin-top: 0;
}

.ods-ah__steps {
  margin: 0;
  padding-left: 1.25rem;
}

.ods-ah__steps li {
  margin: 0 0 0.15rem;
}

.ods-ah__steps li:last-child {
  margin-bottom: 0;
}

/* L'indirizzo di un profilo va a capo dove serve: a 390px una stringa lunga
   come "linkedin.com/in/" dentro un <code> non deve allargare la pagina.
   E' lo stesso errore gia' trovato su .date-format-hint (white-space: nowrap,
   394px dentro un contenitore di 337px). */
.ods-ah code {
  padding: 0.05em 0.3em;
  border-radius: 4px;
  background: rgba(24, 44, 120, 0.07);
  color: var(--ods-color-primary);
  font-size: 0.9em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ods-ah__note {
  margin: 0.6rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ods-color-border);
  color: var(--ods-color-muted);
  font-size: 0.8125rem;
}

.ods-ah__note strong {
  color: var(--ods-color-text);
}

/* Il testo rende esplicita la regola del gruppo senza aggiungere un'altra
   card dentro la card. La banda laterale aiuta a trovarlo, mentre il fondo
   molto leggero non compete con i campi da compilare. */
.ods-account-identification-note {
  display: grid;
  gap: 0.18rem;
}

.ods-account-identification-note strong {
  color: var(--ods-color-text);
  font-weight: 720;
}

/* ===========================================================================
   QUARTA REVIEW OSTILE (2026-08-11), punto 1 — i due campi FACOLTATIVI chiusi.
   Markup: app_pages/start_dispute.php, blocco <details class="ods-optional-extra">.
   Testo del sommario: app_pages/_optional_fields.php.

   Scelte, e perche':
   - il sommario NON sembra un campo: nessun bordo da input, testo in colore
     smorzato, freccia che ruota. Deve leggersi come "qui dentro c'e' altro,
     se ti serve", non come "un altro dato da trovare";
   - riga alta 44px minimi (48 con il padding): e' l'area toccabile minima del
     brief, misurata a 390x844;
   - `list-style: none` + `::-webkit-details-marker` spento: senza, Safari
     mette il suo triangolino accanto al nostro e ne restano due;
   - il fuoco da tastiera resta visibile (`:focus-visible`), perche' <details>
     e' l'unico modo per arrivare ai due campi quando e' chiuso.
   =========================================================================== */

.ods-optional-extra {
  margin: 0 0 1rem;
  border: 1px solid var(--ods-color-border);
  border-radius: 10px;
  background: #fff;
}

.ods-optional-extra__summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  color: var(--ods-color-muted);
  font-size: 0.9375rem;
  line-height: 1.3;
  list-style: none;
}

.ods-optional-extra__summary::-webkit-details-marker {
  display: none;
}

/* La freccia: un solo carattere disegnato in CSS, cosi' non serve una icona
   nuova e non cambia la dimensione del pacchetto. */
.ods-optional-extra__summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease-in-out;
}

.ods-optional-extra[open] > .ods-optional-extra__summary::before {
  transform: rotate(45deg);
}

.ods-optional-extra__summary:focus-visible {
  outline: 3px solid var(--ods-color-accent);
  outline-offset: 2px;
  border-radius: 10px;
}

.ods-optional-extra__body {
  padding: 0.25rem 0.85rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .ods-optional-extra__summary::before {
    transition: none;
  }
}


/* ==========================================================================
   ETICHETTA SOPRA IL CAMPO, A OGNI LARGHEZZA — non solo su telefono.

   La regola dei segnaposto visibili (riga ~281) vale a ogni larghezza dal
   10/08; la regola gemella che toglie l'etichetta da DENTRO il campo stava
   pero' solo nel blocco mobile. Risultato su desktop, visto negli screenshot
   dell'operatore il 12/08: l'etichetta flottante di Bootstrap a riposo
   (grande, dentro il campo) SOPRA il segnaposto — "Descrizione del problema"
   stampata sull'esempio. Due testi uno sull'altro.

   Qui lo stesso schema del blocco mobile, senza media query: il wrapper
   diventa colonna, l'etichetta e' statica e viene prima, il campo torna a
   padding normale (quello flottante di Bootstrap riservava spazio in alto
   per un'etichetta che ora non ci abita piu').
   ========================================================================== */

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > label {
  position: static;
  order: -1;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0 0.15rem;
  overflow: visible;
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
  pointer-events: auto;
  border: 0;
  opacity: 1 !important;
  transform: none !important;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > label::after {
  display: none !important;
  content: none !important;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-control,
:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > .form-select {
  order: 0;
  width: 100%;
  height: auto;
  min-height: 52px;
  padding: 0.78rem 0.9rem;
  line-height: 1.35;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .form-floating > textarea.form-control {
  min-height: 165px;
  padding-top: 0.85rem;
}

.errore {
  order: 1;
}


/* ==========================================================================
   LA SIDEBAR SE NE VA, E IL VUOTO CON LEI — operatore, 12/08.

   "La sidebar e' completamente inutile: deve essere tolta o semplificata
   molto. Non mettere niente in mezzo, se non e' necessario."

   Via la banda scura fissa da 300px (logo + titolo di servizio + illustrazione)
   e via la colonnina dei passi 1..5 (.nav__wrapper): la navigazione vera e'
   dentro il modulo (Procedi / Indietro / Passo N di 5). Il contenuto torna
   a tutta larghezza, centrato dalle colonne Bootstrap che gia' ha.

   E LA SCALA DI FRECCE FANTASMA: col cancello del passo 0 ancora chiuso le
   sezioni sono nascoste ma i connettori "PROCEDI... PROCEDI... MANCA POCO"
   restavano in pagina, uno sotto l'altro, su niente (screenshot operatore).
   I connettori esistono solo quando esistono le sezioni.
   ========================================================================== */

.sidebar,
.nav__wrapper {
  display: none !important;
}

.content,
body .content {
  margin-left: 0 !important;
}

.content.ods-email-gate-pending .dashed-line-with-arrow,
.content.ods-email-gate-pending .dashed-line-with-arrow + *,
.content.ods-email-gate-pending .row.pb-5.pt-2 {
  display: none !important;
}

/* Il CONTINUA del passo 0, sotto tutto: largo, comodo, auto-layout — niente
   colonne affiancate che si disallineano al cambio di aspect ratio. */
.ods-step0-stack {
  display: flex;
  flex-direction: column;
}

.ods-step0-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  /* Niente max-width (12/08 sera: "non e' che si ferma a meta'"): il
     CONTINUA occupa il contenitore come il campo email sopra, a ogni
     larghezza. Prima si fermava a 420px, ~60% della colonna desktop. */
  min-height: 54px;
  margin-top: 1rem;
  padding: 0.8rem 1.15rem;
  border-radius: 12px;
  font-size: 0.98rem !important;
  font-weight: 750 !important;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none !important;
}

.ods-step0-cta::after {
  content: "→";
  font-size: 1.12rem;
  line-height: 1;
}

/* ods-mobile.css conserva un minimo storico da 44px sull'id del gate; la
   maggiore specificita' di questa regola porta il bottone alla stessa altezza
   dei "Procedi" del flusso. */
#contactEmailSubmit.ods-step0-cta {
  min-height: 52px;
}

/* --------------------------------------------------------------------------
   ESITO DEGLI ALLEGATI (2026-08-17, review PR13 P0 "upload senza feedback"):
   un chip per file — nome + stato: in corso (spinner), caricato, fallito col
   perche'. I testi arrivano localizzati da _upload_copy.php.
   -------------------------------------------------------------------------- */

.ods-upload-batch {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.ods-upload-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid #dfe3ee;
  border-radius: 10px;
  background: #fff;
  font-size: 0.92rem;
}

.ods-upload-item .ods-upload-name {
  font-weight: 600;
  overflow-wrap: anywhere;   /* nomi file lunghi: si spezzano, non sbordano */
  min-width: 0;
}

.ods-upload-item .ods-upload-state {
  margin-left: auto;
  flex-shrink: 0;
  color: #5a6274;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-align: right;
}

/* In corso: anello che gira. Fermo se l'utente preferisce niente movimento. */
.ods-upload-item.is-loading .ods-upload-state::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid #c9cfdf;
  border-top-color: #182c78;
  border-radius: 50%;
  animation: ods-upload-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ods-upload-item.is-loading .ods-upload-state::before { animation: none; }
}

@keyframes ods-upload-spin { to { transform: rotate(360deg); } }

.ods-upload-item.is-ok {
  border-color: #9fc5a4;
}
.ods-upload-item.is-ok .ods-upload-state { color: #2e7d32; }
.ods-upload-item.is-ok .ods-upload-state::before {
  content: '✓';
  font-weight: 700;
}

.ods-upload-item.is-error {
  border-color: #e2a9a5;
  background: #fdf6f5;
}
.ods-upload-item.is-error .ods-upload-state {
  color: #b3261e;
  white-space: normal;       /* il perche' puo' essere lungo: va a capo */
}

/* Nota breve (rimozione riuscita/fallita) sotto la lista dei file. */
.ods-upload-note {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: #5a6274;
}
.ods-upload-note.is-error { color: #b3261e; }

/* --------------------------------------------------------------------------
   IL BOTTONE "i" DELLE DESCRIZIONI (operatore 17/08: le code esplicative in
   corsivo spariscono dietro un tocco — ods-info-toggle.js).
   -------------------------------------------------------------------------- */

.ods-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-inline-start: 0.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ods-color-primary, #182c78);
  vertical-align: middle;
  transform: translateY(-1px);
  cursor: pointer;
}

/* Nei paragrafi il testo e la "i" restano nello stesso flusso inline. Il JS
   aggiunge uno spazio non separabile prima del bottone, cosi' l'icona non
   resta orfana sulla riga seguente. Il dettaglio aperto prende una riga
   intera e lascia aria prima del controllo successivo. */
.has-ods-info {
  display: block;
}

.has-ods-info > .ods-info-btn {
  margin-inline-start: 0;
  vertical-align: middle;
}

.has-ods-info > .ods-info-detail {
  display: block;
}

.ods-info-btn:hover,
.ods-info-btn:focus-visible,
.ods-info-btn.is-open {
  background: #e8edf8;
}

.ods-info-btn:focus-visible {
  outline: none;
  box-shadow: var(--ods-focus-ring);
}

.ods-info-detail {
  display: block;
}

.ods-info-detail[hidden] {
  display: none;
}

.ods-info-detail i {
  font-style: normal;   /* dentro il pannello il corsivo non serve piu' */
}

/* I titoli delle due aree allegati sono etichette di campo, non testo
   introduttivo: stessa scala, peso e colore delle label del modulo. */
.content p.ods-upload-heading {
  color: #536072 !important;
  font-size: 0.86rem !important;
  font-weight: 720;
  line-height: 1.35 !important;
  margin-bottom: 0.65rem !important;
  padding-inline: 0.15rem;
}

/* --------------------------------------------------------------------------
   RIFINITURE DALLA REVIEW PR13 14/08 (P2), 2026-08-17.
   -------------------------------------------------------------------------- */

/* "Motivazioni multiple": su desktop il multi-select usa Choices.js e i tag
   con etichette lunghe andavano su due righe deformando il contenitore. I
   tag ora si allineano, vanno a capo DENTRO il proprio riquadro e non
   sbordano mai dal campo. */
.ods-illegal-content-field .choices__inner {
  min-height: 62px;
  padding: 8px 10px;
}

/* Choices porta un rettangolo grigio dietro al segnaposto/campo di ricerca:
   dentro un contenitore gia' bianco sembra una toppa. */
.ods-illegal-content-field .choices__input {
  background-color: transparent !important;
}

.ods-illegal-content-field .choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
  color: #ffffff !important;
  background-color: var(--ods-color-primary) !important;
  border: 1px solid var(--ods-color-primary) !important;
  border-radius: 8px !important;
  margin: 3px 6px 3px 0;
}

#section5 .form-check-label a {
  overflow-wrap: anywhere;
}

/* "Controlli incoerenti" (P2): le due scelte SI/NO portano un indicatore
   radio visibile ANCHE da spente — su desktop la carta "NO" sembrava un
   pannello di testo, non un'opzione selezionabile. Stesso linguaggio dei
   cerchi delle motivazioni. */
:is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input .card-header::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.55rem;
  vertical-align: -0.22em;
  border: 2px solid #a9b3c1;
  border-radius: 50%;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

:is(#section0, #section1, #section2, #section3, #section4, #section5) .card-input-element:checked + .card-input .card-header::before {
  border-color: var(--ods-color-primary);
  background: radial-gradient(circle, var(--ods-color-primary) 0 4.5px, transparent 5.5px);
}

/* La "i" DENTRO il campo (19/08): in alto a destra del contenitore, sopra il
   testo; il pannello si apre sotto il campo. */
.ods-has-field-info {
  position: relative;
}

.ods-field-info-btn {
  position: absolute;
  top: -4px;
  right: 0.15rem;
  z-index: 3;
  margin-inline-start: 0;
  background: #f1f4fb;
}

.ods-has-field-info > label {
  padding-right: 2.4rem !important;
}

/* Tre conferme visibili: termini, presa visione privacy e attestazioni sul
   reclamo. Le quattro attestazioni restano leggibili come elenco e la terza
   checkbox le conferma insieme senza confonderle con termini o privacy. */
#section5 .ods-decl-inline-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

#section5 .ods-decl-inline-link:hover,
#section5 .ods-decl-inline-link:focus-visible {
  color: var(--ods-color-primary);
}

/* Le due conferme brevi hanno lo stesso ritmo verticale (utility mt-3 nel
   markup) e il checkbox e' centrato rispetto alla relativa etichetta. La
   conferma interna al riquadro fattuale resta invece allineata in alto. */
#section5 .ods-decl-group > .form-check {
  align-items: center;
}

#section5 .ods-decl-group > .form-check > .form-check-input {
  margin-top: 0;
}

#section5 .ods-decl-facts {
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #dfe3ee;
  border-radius: 12px;
}

#section5 .ods-decl-list {
  color: #46536a;
  font-size: 0.9rem;
  line-height: 1.5;
}

#section5 .ods-decl-list li + li {
  margin-top: 0.65rem;
}

#section5 .ods-decl-confirm {
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 2px solid #dfe3ee !important;
}

#section5 .ods-decl-confirm .form-check-label {
  color: var(--ods-color-text);
  font-size: 1rem;
}