/* ods-select.css — selettore custom del form (intervento 1).
   Convive con start-dispute-modern.css: riusa le stesse variabili --ods-* e la
   stessa geometria dei campi, cosi' il controllo nostro non si distingue da un
   campo del form finche' non lo si apre.
   Nessun font, nessuna immagine, nessun CDN: solo regole. */

/* --------------------------------------------------------------------------
   Il <select> nativo resta nel DOM (e' la sorgente dati, l'id e' il nome del
   campo su Firestore): si toglie solo dalla vista e dal fuoco.
   NON si usa display:none — un elemento in display:none non e' misurabile e
   isVisible() del collector (ods-collector.js:435) lo scarterebbe.
   -------------------------------------------------------------------------- */
select.ods-select__native {
  position: absolute !important;
  /* MISURATO, e non e' come sembra: dentro il .form-floating (che e' display:flex,
     position:relative) Chrome NON usa il width dichiarato per questo select.
     computedStyleMap().get('width') dice 1px, offsetWidth ne dice 52 — lo stesso
     nodo clonato in <body> misura 1px. Gli inset espliciti qui sotto non lo
     cambiano: sono tenuti perche' rendono il box prevedibile, non perche' risolvano.
     Non e' un problema: clip-path lo ritaglia, opacity lo spegne, pointer-events lo
     esclude dal tocco (verificato con elementFromPoint, che restituisce il controllo
     nostro), e un box non nullo e' anzi cio' che serve a isVisible() del collector. */
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
  appearance: none;
}

/* --------------------------------------------------------------------------
   Il contenitore .form-floating che ospita un selettore nostro passa sempre a
   label statica sopra il campo — su telefono lo faceva gia'
   (start-dispute-modern.css:1090-1116), su desktop la label flottante coprirebbe
   l'icona. Una label sempre visibile e' anche l'unico modo di tenere in piedi
   l'associazione label/controllo che 18 label[for] del form hanno perso.
   -------------------------------------------------------------------------- */
.form-floating.ods-select-host {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  margin-bottom: 1rem;
}

/* Dentro una RIGA flessibile il margine sotto e' veleno: gonfia il margin-box
   (62 -> 78) e "centrato" diventa 8px piu' in alto — e' stato il disallineamento
   del bottone dell'hero E della pillola lingua, misurato due volte prima di
   trovare QUESTA riga. Nella riga il ritmo verticale non serve a niente. */
.hero-form .d-flex > .ods-select-host,
.custom-navbar .ods-select-host {
  margin: 0;              /* TUTTI: un margine parziale qui ha gia' rotto il
                             centro una volta (auto sopra + 0 sotto = pillola
                             incollata in basso). Centra align-self, i margini
                             stanno a zero e basta. */
  align-self: center;
}

/* SOLO la pillola della barra respira a sinistra: nell'hero quel mezzo rem
   spostava il selettore 8px a destra del testo (misurato: 80 contro 72). */
.custom-navbar .ods-select-host {
  margin-left: 0.5rem;
}
.form-floating.ods-select-host > label {
  position: static !important;
  order: -1;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0 0.15rem;
  overflow: visible;
  color: #334057 !important;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  pointer-events: auto;
  border: 0;
  opacity: 1 !important;
  transform: none !important;
}
.form-floating.ods-select-host > label::after { display: none !important; content: none !important; }
.form-floating.ods-select-host > .ods-select { order: 0; }
.form-floating.ods-select-host > .errore { order: 1; }

/* --------------------------------------------------------------------------
   Il controllo chiuso
   -------------------------------------------------------------------------- */
.ods-select { position: relative; width: 100%; }

.ods-select__ic-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ods-select__control {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 52px;                 /* > 44px richiesti dal brief */
  padding: 0.72rem 0.85rem;
  color: var(--ods-color-text, #1b2437);
  font-size: 16px;                  /* evita lo zoom automatico su iOS */
  font-weight: 450;
  line-height: 1.35;
  text-align: left;
  background: #fff;
  border: 1px solid var(--ods-color-border, #d5dbe6);
  border-radius: var(--ods-radius-field, 12px);
  box-shadow: var(--ods-shadow-field, 0 1px 2px rgba(16, 24, 40, .05));
  transition: border-color .18s ease, box-shadow .18s ease;
  cursor: pointer;
}

.ods-select__control:hover { border-color: var(--ods-color-border-strong, #aab4c6); }
.ods-select__control:focus-visible,
.ods-select.is-open .ods-select__control {
  border-color: var(--ods-color-accent, #1a5fd0);
  box-shadow: var(--ods-focus-ring, 0 0 0 3px rgba(26, 95, 208, .25));
  outline: none;
}
/* Fuoco sempre percepibile anche dove :focus-visible non scatta (tocco + tastiera esterna). */
.ods-select__control:focus { outline: 2px solid transparent; outline-offset: 2px; }

.ods-select.is-empty .ods-select__value { color: #6b7688; }

.ods-select.is-invalid .ods-select__control {
  border: 2px solid var(--ods-color-danger, #c62828);
  box-shadow: none;
}

.ods-select__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ods-select__chevron { flex: 0 0 auto; display: flex; color: #64708a; transition: transform .18s ease; }
.ods-select.is-open .ods-select__chevron { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Icone: logo di piattaforma, bandiera, piastrella di ripiego
   -------------------------------------------------------------------------- */
.ods-select__ic-slot { flex: 0 0 auto; display: flex; }
.ods-select__ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.ods-select__ic-svg { width: 22px; height: 22px; }
.ods-select__ic-svg.is-flag {
  width: 26px; height: 18.2px;              /* 20x14 -> proporzione mantenuta */
  border-radius: 2.5px;
}
.ods-select__mono {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0;
  background: #7c8798;                       /* ripiego neutro: piattaforme NON coperte */
  border-radius: 6px;
}
.ods-select__mono.is-brand { color: #fff; }  /* piattaforma coperta senza glifo disponibile */

/* --------------------------------------------------------------------------
   Il pannello. Vive in <body>, posizionato via JS: cosi' l'accordion del form
   (public/start-dispute-accordion.js) non puo' tagliarlo.
   -------------------------------------------------------------------------- */
.ods-select__pop {
  position: fixed;
  z-index: 2147483000;               /* sopra la barra sticky e il widget di chat */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ods-color-border, #d5dbe6);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(11, 22, 44, .22);
}
.ods-select__pop[hidden] { display: none; }

.ods-select__pop.is-sheet {
  border-right: 0; border-bottom: 0; border-left: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(11, 22, 44, .28);
}
/* Maniglia della tendina: dice "questo si trascina/chiude" senza una riga di testo. */
.ods-select__pop.is-sheet::before {
  display: block;
  width: 42px; height: 4px;
  margin: 8px auto 2px;
  background: #cfd6e2;
  border-radius: 2px;
  content: "";
}

.ods-select__backdrop {
  position: fixed; inset: 0;
  z-index: 2147482999;
  background: rgba(12, 20, 38, .38);
}
.ods-select__backdrop[hidden] { display: none; }

/* Intestazione: esiste solo nella tendina a telefono. */
.ods-select__sheet-head { display: none; }
.ods-select__pop.is-sheet .ods-select__sheet-head {
  display: flex;
  flex: 0 0 auto;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 4px 14px;
}
.ods-select__sheet-title {
  min-width: 0;
  overflow: hidden;
  color: #1b2437;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ods-select__close {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;                      /* bersaglio pieno, non l'icona da 17px */
  height: 44px;
  color: #3b4759;
  background: transparent;
  border: 0;
  border-radius: 10px;
}
.ods-select__close:hover { background: #f1f4f9; }
.ods-select__close:focus-visible { box-shadow: var(--ods-focus-ring, 0 0 0 3px rgba(26, 95, 208, .25)); outline: none; }

.ods-select__searchbar { flex: 0 0 auto; padding: 10px 12px 8px; border-bottom: 1px solid #eef1f6; }
.ods-select__search {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  color: #1b2437;
  font-size: 16px;
  background: #f6f8fb;
  border: 1px solid #dde3ec;
  border-radius: 10px;
}
.ods-select__search:focus { background: #fff; border-color: var(--ods-color-accent, #1a5fd0); box-shadow: var(--ods-focus-ring, 0 0 0 3px rgba(26, 95, 208, .25)); outline: none; }

.ods-select__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ods-select__list:focus { outline: none; }

.ods-select__opt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;                  /* > 44px richiesti dal brief */
  padding: 0.5rem 0.6rem;
  font-size: 16px;
  line-height: 1.3;
  border-radius: 10px;
  cursor: pointer;
}
.ods-select__opt[hidden] { display: none; }
.ods-select__opt-text { flex: 1 1 auto; min-width: 0; }
.ods-select__opt .ods-select__tick { flex: 0 0 auto; display: none; color: var(--ods-color-accent, #1a5fd0); }
.ods-select__opt.is-selected .ods-select__tick { display: flex; }
.ods-select__opt.is-selected { font-weight: 650; }
.ods-select__opt.is-active { background: #eaf1fd; box-shadow: inset 0 0 0 2px var(--ods-color-accent, #1a5fd0); }

.ods-select__empty { margin: 0; padding: 18px 14px 22px; color: #64708a; font-size: 0.95rem; text-align: center; }
.ods-select__empty[hidden] { display: none; }

/* Il conteggio dei risultati serve allo screen reader, non allo schermo. */
.ods-select__status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ods-select__control, .ods-select__chevron { transition: none; }
}

/* ==========================================================================
   SELETTORE DI LINGUA NELLA BARRA DI NAVIGAZIONE
   ==========================================================================
   Stesso componente del modulo, ma qui non e' un campo: e' un comando piccolo
   in una barra affollata. Quindi niente etichetta flottante, larghezza al
   contenuto e altezza ridotta — restando sopra i 44px di area toccabile che il
   brief impone.

   L'ordine su schermo largo: nella barra il controllo e' scritto PRIMA del menu
   (una sola copia invece delle due di prima, che esistevano solo per mostrarne
   una per breakpoint). `order` lo rimanda in fondo sopra i 992px, dov'era il
   comando di destra, senza duplicare il markup.
   ========================================================================== */
.ods-lang-picker {
  flex: 0 0 auto;
  margin: 0 0 0 0.5rem;
}

/* Sotto i 992px nella barra restano il marchio e il pulsante del menu: il nome
   esteso della lingua ("Nederlands") faceva sfondare la riga e il comando
   finiva a capo, sotto il logo. Resta la bandiera con la freccia — la stessa
   larghezza del vecchio comando "(it)" — e il nome per intero si legge appena
   il pannello si apre. Il nome accessibile e' sull'aria-label, quindi lo
   screen reader continua a dire di che comando si tratta. */
@media (max-width: 1199.98px) {
  .ods-lang-picker .ods-select__value {
    display: none;
  }
  .custom-navbar .ods-lang-picker .ods-select__control {
    width: auto;
    min-width: 72px;
    gap: 0.35rem;
    padding-right: 0.55rem;
    padding-left: 0.55rem;
  }
}

@media (min-width: 1200px) {
  .ods-lang-picker {
    order: 5;
    margin-left: 0.75rem;
  }
}

/* Il componente sostituisce il select: da qui in giu' si veste il bottone. */
.ods-lang-picker .ods-select__control {
  min-height: 44px;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.ods-lang-picker .ods-select__value {
  flex: 0 1 auto;
  font-size: 0.92rem;
  font-weight: 650;
}

/* Senza etichetta il valore non deve lasciare spazio sopra di se'. */
.ods-lang-picker .ods-select__control .ods-select__label,
.ods-lang-picker > label {
  display: none;
}

/* Il pannello non deve essere largo quanto lo schermo su desktop. */
.ods-lang-picker .ods-select__panel {
  min-width: 240px;
}

/* Ripiego quando il JS del componente non parte: resta il select nativo. */
.ods-lang-picker > .form-select {
  min-height: 44px;
  width: auto;
  padding: 0.25rem 2rem 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.92rem;
}

/* I link della versione senza JavaScript. */
.ods-lang-noscript {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.85rem;
}

/* ==========================================================================
   IL SELETTORE DI PIATTAFORMA NELL'HERO
   ==========================================================================
   L'hero ha il fondo blu scuro. Il componente porta la label FUORI dal riquadro
   (regola .form-floating.ods-select-host > label, qui sopra: e' la scelta che
   tiene in piedi l'associazione label/controllo), e li' il grigio #334057 su
   blu scuro non si legge. Nel solo hero la label torna chiara.
   ========================================================================== */
.hero-form .form-floating.ods-select-host > label {
  color: #ffffff !important;
}

/* Nella hero il selettore e la CTA formano un'unica coppia visiva: da tablet
   in su restano entrambi alti 62px. I select del modulo conservano invece la
   misura compatta da 52px, uguale agli input di testo. */
@media (min-width: 768px) {
  .hero-form .ods-select__control {
    min-height: 62px;
    padding: 0.9rem 1rem;
  }
}

/* --------------------------------------------------------------------------
   La barra deve restare su UNA riga anche col selettore di lingua.
   Il contenitore della navbar e' flex con wrap e `justify-content:
   space-between`: marchio e pulsante del menu si spingono ai due estremi e il
   terzo elemento — il selettore — finiva a capo, sotto il logo. Con nowrap i
   tre stanno in fila e il logo, che e' l'unico elastico, cede i pochi pixel
   necessari senza deformarsi (max-width + height auto).
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .custom-navbar > .container {
    flex-wrap: nowrap;
  }
  .custom-navbar .navbar-brand {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 0.25rem;
  }
  .custom-navbar .navbar-brand img {
    max-width: 100%;
    height: auto;
  }
  .ods-lang-picker {
    margin-left: auto;
  }
}

/* --------------------------------------------------------------------------
   HERO SU TELEFONO (operatore 13/08): il selettore deve essere largo quanto
   il bottone arancione sotto di lui. In colonna l'align-self:center di sopra
   (giusto per la riga desktop) lo restringe al contenuto e lo centra: sotto
   i 768 si passa a stretch, piena colonna come la CTA.
   ========================================================================== */
@media (max-width: 767.98px) {
  .hero-form .d-flex > .ods-select-host {
    align-self: stretch;
    width: 100%;
  }
}
