/* =============================================================================
   IL CAMPO LUOGO — paese e citta', un vestito solo
   -----------------------------------------------------------------------------
   Questo foglio e' l'unica sorgente estetica dei campi «Nazione» e «Citta' o
   CAP» e delle loro tendine. Prima erano due componenti scritti due volte, con
   due vocabolari diversi e la stessa funzione:

     /welcome   paese:  `.log-select-btn.dd-trigger`
                        `.log-dropdown > .country-search-wrap + .dd-list > .log-dd-item`
                citta': `.log-city-field > .log-input`
                        `.log-dropdown.qq-city-dd > .city-list > .qq-city-item`

     /shipping  paese:  `select.country-select` vestito da Select2
                        `.select2-selection--single`, `.select2-dropdown`,
                        `.select2-search__field`, `.select2-results__option`
                citta': `input.form-control` + `.city-dd > .item`

   E il vestito della seconda non stava nemmeno in un foglio di stile: se lo
   iniettava a mano il JavaScript, in `public/js/shipping/shipping-flow-unified.js`
   (`ensureACStyles`, `<style id="ac-style-injected">`). Chi cercava «perche' la
   tendina delle citta' e' cosi'» in `public/css/` non lo trovava.

   Qui i due vocabolari puntano alle stesse dichiarazioni. La logica — quale
   pannello si apre, quando, chi lo riempie — non e' toccata: restano il JS di
   /welcome, Select2 e l'autocomplete di /shipping esattamente com'erano.

   Il colore non e' mai scritto: sono i token del sito, quindi il tema scuro
   viene da se'. Le misure proprie del componente stanno nei token `--sw-place-*`
   qui sotto: cambiare una riga li' cambia le quattro tendine in tutte e due le
   pagine, su desktop e su telefono.

   Il foglio si carica per ultimo, dopo `restyling-fixes.css`: e' l'ultima
   parola su questo componente, e per questo puo' permettersi una corazza
   moderata invece di rincorrere le regole sparse.

   UN PEZZO NON E' ANCORA QUI: la vista a tutto schermo del pannello dei paesi
   di /welcome sul telefono — `.log-dropdown.qq-dd-sheet` — sta ancora nella
   sezione 88 di `spedireweb-pro.css`, e funziona. Il riquadro qui sotto la
   esclude (`:not(.qq-dd-sheet)`) per non spegnerla: caricandosi per ultimo,
   questo foglio le vincerebbe sopra — 4 id e 10 classi contro 6 classi,
   contate — e la vista piena tornerebbe una finestrella. Portare quelle righe
   qui e' il passo che manca perche' il componente stia davvero in un file solo.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. I token del componente
   -------------------------------------------------------------------------- */
html body.nedate-ui-standard {
  --sw-place-panel-bg:     var(--sw-surface);
  --sw-place-panel-line:   var(--sw-line);
  --sw-place-panel-r:      var(--sw-radius-sm, 10px);
  --sw-place-panel-shadow: var(--sw-shadow-md);
  --sw-place-panel-max-h:  288px;
  --sw-place-panel-z:      940;

  --sw-place-row-pad:      8px 14px;
  --sw-place-row-h:        40px;
  --sw-place-row-gap:      10px;
  --sw-place-row-fs:       var(--sw-control-fs, 15px);
  --sw-place-row-fw:       var(--sw-weight-medium, 500);
  --sw-place-row-ink:      var(--sw-ink);

  --sw-place-row-hover-bg: var(--sw-surface-2);
  --sw-place-row-hover-ink:var(--sw-ink);
  --sw-place-row-sel-bg:   var(--sw-brand-50);
  --sw-place-row-sel-ink:  var(--sw-brand-700);

  --sw-place-search-h:     48px;
  --sw-place-field-fs:     var(--sw-control-fs, 15px);
  --sw-place-value-fw:     var(--sw-weight-light, 300);
  --sw-place-value-lh:     1.15;
  --sw-place-arrow-inset:  var(--sw-field-pad-x, 16px);
  --sw-place-arrow-size:   13px;
  --sw-place-arrow-ink:    var(--sw-muted);
  /* Il chevron e' disegnato, non preso dal font delle icone: `\f282` rende un
     chevron singolo su /welcome e un chevron **doppio** su /shipping, perche'
     le due pagine caricano due build diverse di bootstrap-icons (visto sui
     pixel). Una maschera SVG e' la stessa ovunque e prende il colore dal
     token invece di portarselo dentro. */
  --sw-place-arrow-mask:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --sw-place-empty-ink:    var(--sw-muted);
  --sw-place-mark-ink:     var(--sw-brand-600);
  --sw-place-mark-fw:      var(--sw-weight-bold, 700);
}

/* -----------------------------------------------------------------------------
   2. Il pannello
   Quattro tendine, un riquadro. `.select2-dropdown` non sta dentro il campo —
   Select2 lo appende al `<body>` — quindi il selettore non puo' chiedere un
   antenato di pagina: e' la ragione per cui questo foglio non e' agganciato a
   `.welcome-modern-page` o a `.shipping-page-wrapper`.
   -------------------------------------------------------------------------- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-dropdown, .qq-city-dd, .city-dd, .country-dd, .select2-dropdown, .select2-dropdown.nedate-country-dropdown):not(.qq-dd-sheet) {
  background-color: var(--sw-place-panel-bg) !important;
  background-image: none !important;
  color: var(--sw-place-row-ink) !important;
  border: 1px solid var(--sw-place-panel-line) !important;
  border-radius: var(--sw-place-panel-r) !important;
  box-shadow: var(--sw-place-panel-shadow) !important;
  padding: 4px !important;
  overflow: hidden auto !important;
  max-height: var(--sw-place-panel-max-h) !important;
}
/* Le liste non aggiungono un secondo rientro al rientro del pannello. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-dropdown, .qq-city-dd, .city-dd, .country-dd, .select2-dropdown, .select2-dropdown.nedate-country-dropdown) > :is(.dd-list, .city-list, .country-list, .select2-results, .select2-results__options) {
  padding: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  list-style: none !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .select2-dropdown .select2-results__options {
  max-height: calc(var(--sw-place-panel-max-h) - 8px) !important;
  overflow-y: auto !important;
}

/* -----------------------------------------------------------------------------
   2a. Il controllo chiuso
   Misurato sui due campi «Nazione», alti 58px tutti e due e con la stessa
   cornice: il valore si posava in due punti diversi (testo a 29px dall'alto su
   /welcome, a 23 su /shipping) e la freccia era due oggetti — un chevron di
   13px grigio a 17px dal bordo destro contro il triangolo di Select2, largo 19,
   alto quanto tutto il campo, del colore del testo e a 8px dal bordo.

   Qui diventano lo stesso controllo. La freccia di Select2 prende il chevron
   vero, dal font delle icone, alla stessa misura e alla stessa distanza; il
   valore si appoggia al rientro alto del campo invece di centrarsi da solo.

   Una cosa il CSS non la puo' fare: la **bandiera**. Su /welcome il paese
   scelto mostra il suo vessillo accanto al nome, su /shipping Select2 stampa
   il solo nome, e metterla vorrebbe dire dare a Select2 un `templateSelection`
   — cioe' toccare il JavaScript, che qui resta com'e'.
   -------------------------------------------------------------------------- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-select-btn, .select2-container--default .select2-selection--single) {
  font-size: var(--sw-place-field-fs) !important;
  font-weight: var(--sw-place-value-fw) !important;
  line-height: 1.25 !important;
}
/* Il valore non si centra: parte dove il rientro alto del campo lo lascia
   partire, cioe' dove parte il valore di ogni altro campo del sito. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  height: auto !important;
  line-height: 1.25 !important;
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-place-value-fw) !important;
}
/* Lo spazio a destra: quello che serve alla freccia e non un pixel di piu',
   scritto come somma dei suoi token invece che come numero. */
html:not(#_):not(#__):not(#___):not(#____):not(#_____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .select2-container--default .select2-selection--single {
  padding-right: calc(var(--sw-place-arrow-inset) + var(--sw-place-arrow-size) + 10px) !important;
  /* Il valore si posa in mezzo alla riga che il rientro gli lascia, come su
     /welcome: Select2 lo appoggiava in fondo (`flex-end`) e usciva quattro
     pixel piu' in basso del gemello. */
  align-items: center !important;
}
/* La freccia. Il triangolo disegnato con i bordi sparisce e al suo posto c'e'
   il chevron del font delle icone: lo stesso glifo che /welcome mette nel suo
   campo, non uno che gli somiglia. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .select2-container--default .select2-selection--single .select2-selection__arrow {
  /* Il centraggio e' quello di casa — `top: 50%` piu' mezzo passo indietro —
     e non uno nuovo. Scrivere `top: 0; bottom: 0` senza spegnere la
     `translateY(-50%)` che gia' c'era faceva una scatola alta quanto il campo
     e poi la tirava su di meta': il chevron finiva sul filo superiore, a 29px
     dal centro (misurato). */
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  right: var(--sw-place-arrow-inset) !important;
  width: var(--sw-place-arrow-size) !important;
  height: var(--sw-place-arrow-size) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .select2-container--default .select2-selection--single .select2-selection__arrow::after,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .log-select-btn > .bi-chevron-down::before {
  content: "" !important;
  display: block !important;
  width: var(--sw-place-arrow-size) !important;
  height: var(--sw-place-arrow-size) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-color: var(--sw-place-arrow-ink) !important;
  -webkit-mask: var(--sw-place-arrow-mask) center / contain no-repeat !important;
  mask: var(--sw-place-arrow-mask) center / contain no-repeat !important;
}

/* Select2 multiplo che vuole comportarsi come i select di /shipping.
   Stesso identico caret del Select2 singolo sopra: stessi token, stessa
   maschera, stessa dimensione e stessa distanza dal bordo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class]
:is(.route-text-list-multiselect, .sw-text-list-multiselect) .select2-container--default .select2-selection--multiple {
  position: relative !important;
  padding-right: calc(var(--sw-place-arrow-inset) + var(--sw-place-arrow-size) + 10px) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class]
:is(.route-text-list-multiselect, .sw-text-list-multiselect) .select2-container--default .select2-selection--multiple::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  right: var(--sw-place-arrow-inset) !important;
  width: var(--sw-place-arrow-size) !important;
  height: var(--sw-place-arrow-size) !important;
  margin: 0 !important;
  border: 0 !important;
  transform: translateY(-50%) !important;
  background-color: var(--sw-place-arrow-ink) !important;
  -webkit-mask: var(--sw-place-arrow-mask) center / contain no-repeat !important;
  mask: var(--sw-place-arrow-mask) center / contain no-repeat !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* Multiselect comune: stesso campo, stesso pannello e stessa ricerca usati
   dagli altri picker del sito. Il valore chiuso resta testo semplice. */
.sw-multiselect-toolbar.qq-country-style {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sw-multiselect-toolbar.qq-country-style .qq-search-field {
  flex: 1 1 auto;
  min-width: 0;
}
.sw-multiselect-toolbar.qq-country-style .country-search {
  width: 100% !important;
}
.sw-multiselect-toolbar.qq-country-style .qq-dd-close {
  display: none;
}

.sw-text-list-multiselect .select2-selection__choice,
.sw-text-list-multiselect .select2-selection__choice__remove,
.sw-text-list-multiselect .select2-selection__clear {
  display: none !important;
}
.sw-text-list-multiselect .select2-search--inline,
.sw-text-list-multiselect .select2-search--inline .select2-search__field {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.sw-text-list-multiselect .select2-search__field {
  resize: none !important;
}
.sw-text-list-multiselect .route-selected-text {
  display: block !important;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nd-form-standard-text, var(--sw-ink, #111827));
  font: inherit;
  font-weight: 400;
}

/* Multiselect globale con icone nelle opzioni: le icone restano nel menu
   aperto, mentre il valore chiuso usa sempre il riepilogo testuale separato
   da virgole definito da .sw-text-list-multiselect. */
.sw-icon-multiselect + .select2-container .route-country-option,
.route-multiselect-dropdown .route-country-option {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: .5rem;
}
.sw-icon-multiselect + .select2-container .route-country-option .fi,
.route-multiselect-dropdown .route-country-option .fi {
  width: 1.25em;
  line-height: 1em;
  border-radius: .12rem;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
  flex: 0 0 auto;
}
.sw-icon-multiselect + .select2-container .route-country-option .route-country-name,
.route-multiselect-dropdown .route-country-option .route-country-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .select2-container--open .route-multiselect-dropdown .sw-multiselect-toolbar.qq-country-style {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    min-height: 56px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
    border-bottom: 1px solid var(--sw-place-panel-line, var(--sw-line)) !important;
    background: var(--sw-place-panel-bg, var(--sw-surface)) !important;
  }
  .select2-container--open .route-multiselect-dropdown .sw-multiselect-toolbar.qq-country-style .qq-dd-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--sw-place-panel-line, var(--sw-line)) !important;
    border-radius: var(--sw-radius-xs, 8px) !important;
    background: var(--sw-surface-2) !important;
    color: var(--sw-ink) !important;
  }
  .select2-container--open .route-multiselect-dropdown .select2-results {
    flex: 1 1 auto;
    overflow-y: auto;
  }
}
/* Il chevron di /welcome e' lo stesso oggetto: la scatola dell'icona diventa
   il riquadro del disegno, e il glifo del font sotto non si stampa piu'. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .log-select-btn > .bi-chevron-down {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--sw-place-arrow-size) !important;
  height: var(--sw-place-arrow-size) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
/* Anche la freccia dei `select` normali e' la stessa freccia: stessa distanza
   dal bordo e stessa misura. Il disegno resta quello dell'immagine di fondo di
   Bootstrap — un `select` non ha pseudo-elementi su cui posare la maschera. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] select.form-select {
  background-position: calc(100% - var(--sw-place-arrow-inset)) 50% !important;
  background-size: var(--sw-place-arrow-size) auto !important;
}
/* E quella del campo-bottone di /registrati, che e' anch'essa un'immagine di
   fondo (sezione 191 di spedireweb-pro.css). Il colore lo aveva gia' giusto —
   #617087 di giorno, #8fa1b8 di notte, cioe' gli stessi due del token — ma la
   misura era 16px contro 13 e la distanza 15,2px contro 16. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] button.log-select-btn {
  background-position: right var(--sw-place-arrow-inset) center !important;
  background-size: var(--sw-place-arrow-size) auto !important;
}

/* -----------------------------------------------------------------------------
   2b. Il valore scritto nel campo
   Misurato: il paese di /welcome usciva a 13,125px e la sua citta' a 14, mentre
   su /shipping tutti e due erano 15 — la misura dei controlli del sito. Tre
   misure per due campi che fanno la stessa cosa. La scatola invece era gia'
   identica: 58px di altezza, 5px di raggio, cornice di 1px su tutte e due le
   pagine. Il colore no, e di proposito: segue la tavolozza della pagina in cui
   il campo sta, che e' la regola decisa per il tema scuro.
   -------------------------------------------------------------------------- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-select-btn .country-name, .log-city-field .log-input, .select2-selection__rendered) {
  font-size: var(--sw-place-field-fs) !important;
  font-family: var(--sw-font-body, "IBM Plex Sans", system-ui, sans-serif) !important;
  /* L'interlinea e' un token. Su /welcome vale; sul valore di Select2 no —
     li' 18,75px arriva da una regola che pesa di piu', e il testo resta tre
     pixel piu' in basso del gemello (29 contro 32 dal bordo alto, misurati).
     E' l'ultimo scarto rimasto fra i due campi: si chiude togliendo
     l'interlinea a quella regola, non alzando ancora la corazza di questa. */
  line-height: var(--sw-place-value-lh) !important;
}

/* -----------------------------------------------------------------------------
   3. La riga
   -------------------------------------------------------------------------- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-dd-item, .qq-city-item, .city-dd .item, .country-dd .country-list > li, .city-dd .city-list > li, .select2-results__option) {
  display: flex !important;
  align-items: center !important;
  gap: var(--sw-place-row-gap) !important;
  min-height: var(--sw-place-row-h) !important;
  padding: var(--sw-place-row-pad) !important;
  border-radius: var(--sw-radius-xs, 8px) !important;
  font-size: var(--sw-place-row-fs) !important;
  font-weight: var(--sw-place-row-fw) !important;
  line-height: 1.25 !important;
  color: var(--sw-place-row-ink) !important;
  background-color: transparent !important;
  cursor: pointer !important;
  transition: background-color .12s ease, color .12s ease !important;
}
/* La riga «nessun risultato» non e' cliccabile e non si accende. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.city-dd .empty, .select2-results__message, .select2-results__option--disabled) {
  padding: var(--sw-place-row-pad) !important;
  color: var(--sw-place-empty-ink) !important;
  background-color: transparent !important;
  cursor: default !important;
  font-weight: var(--sw-weight-normal, 400) !important;
}

/* -----------------------------------------------------------------------------
   4. Gli stati
   Passaggio del dito e fuoco da tastiera si vedono uguali; la voce gia' scelta
   resta riconoscibile anche mentre se ne scorre un'altra.
   -------------------------------------------------------------------------- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-dd-item, .qq-city-item, .city-dd .item, .country-dd .country-list > li, .city-dd .city-list > li, .select2-results__option):is(:hover, .is-active, .active, .select2-results__option--highlighted):not(.select2-results__option--disabled) {
  background-color: var(--sw-place-row-hover-bg) !important;
  color: var(--sw-place-row-hover-ink) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-dd-item.is-selected, .qq-city-item.is-selected, .select2-results__option[aria-selected="true"], .select2-results__option--selected):not(.select2-results__option--disabled) {
  background-color: var(--sw-place-row-sel-bg) !important;
  color: var(--sw-place-row-sel-ink) !important;
}
/* Scelta **e** sotto il dito: vince l'evidenza del movimento, ma il colore del
   testo ricorda che quella e' la voce attiva. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-dd-item.is-selected, .select2-results__option[aria-selected="true"], .select2-results__option--selected):is(:hover, .is-active, .select2-results__option--highlighted):not(.select2-results__option--disabled):not(#_) {
  background-color: var(--sw-place-row-sel-bg) !important;
  color: var(--sw-place-row-sel-ink) !important;
}

/* -----------------------------------------------------------------------------
   5. Il pezzo di testo che corrisponde a quello che si e' scritto
   -------------------------------------------------------------------------- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-dropdown, .qq-city-dd, .city-dd, .country-dd, .select2-dropdown, .select2-dropdown.nedate-country-dropdown) .autocomplete-highlight,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-dropdown, .qq-city-dd, .city-dd, .country-dd, .select2-dropdown, .select2-dropdown.nedate-country-dropdown) mark {
  background: transparent !important;
  padding: 0 !important;
  font-weight: var(--sw-place-mark-fw) !important;
  color: var(--sw-place-mark-ink) !important;
  text-decoration: none !important;
  /* Keep a highlighted substring typographically attached to the rest of the
     word. Some mobile engines otherwise expose a visible inline-fragment gap. */
  display: inline !important;
  margin: 0 !important;
  border: 0 !important;
  letter-spacing: inherit !important;
  word-spacing: inherit !important;
  line-height: inherit !important;
}

/* -----------------------------------------------------------------------------
   6. Il campo di ricerca dentro il pannello
   Il paese si cerca scrivendo: su /welcome in `.country-search`, su /shipping
   nel campo che Select2 costruisce da se'. Stessa casella.
   -------------------------------------------------------------------------- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-dropdown .country-search, .country-dd .country-search, .select2-dropdown .select2-search__field) {
  width: 100% !important;
  height: var(--sw-place-search-h, 48px) !important;
  padding: 0 14px !important;
  border: var(--sw-field-bw, 1px) solid var(--sw-field-border) !important;
  border-radius: var(--sw-field-radius, 5px) !important;
  background-color: var(--sw-field-bg) !important;
  color: var(--sw-ink) !important;
  font-size: var(--sw-control-fs, 15px) !important;
  font-family: var(--sw-font-body, "IBM Plex Sans", system-ui, sans-serif) !important;
  box-shadow: none !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.log-dropdown .country-search, .country-dd .country-search, .select2-dropdown .select2-search__field):focus {
  border-color: var(--sw-brand-600) !important;
  box-shadow: var(--sw-focus-ring) !important;
  outline: none !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .select2-dropdown .select2-search--dropdown {
  padding: 4px 4px 8px !important;
}

/* -----------------------------------------------------------------------------
   7. Quello che faceva il JavaScript
   `shipping-flow-unified.js` iniettava un `<style>` con l'apertura della
   tendina delle citta' e i due z-index che servono a farla uscire dalla card.
   Sono qui perche' il foglio possa essere l'unica sorgente: il JS continua ad
   aggiungere e togliere `.open`, come prima.
   -------------------------------------------------------------------------- */
.city-dd {
  position: absolute;
  left: 0;
  right: 0;
  z-index: var(--sw-place-panel-z, 940);
  margin-top: .25rem;
  display: none;
}
.city-dd.open { display: block; }
.city-dd-layer-open { position: relative; z-index: 920; }
body .shipping-page-wrapper .card.city-dd-layer-open,
body .shipping-page-wrapper .shipping-card.city-dd-layer-open {
  z-index: 900;
  overflow: visible !important;
}
.white-space-prewrap { white-space: pre-wrap; }


/* La X del pannello a tutto schermo esiste solo sul telefono: sul computer si
   chiude toccando fuori o con Esc, e un bottone in piu' sarebbe rumore. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .country-dd .qq-dd-close {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   8. Telefono: la tendina diventa una vista piena
   Su /welcome il pannello dei paesi lo faceva gia' (sezione 88 di
   spedireweb-pro.css, classe `.qq-dd-sheet`). Un elenco di duecento nazioni
   dentro una finestrella alta poche righe non si scorre: lo stesso trattamento
   vale ora anche per la tendina di Select2 e per quella delle citta'.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Mezzo schermo per la tendina delle citta' — ma non quando e' gia' una
     vista piena: li' l'altezza la decide la sezione 88, e questi 50vh la
     tagliavano a meta' (422px su 844, misurati). */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.qq-city-dd, .city-dd):not(.qq-dd-sheet) {
    max-height: 50vh !important;
  }
  /* La X non serve sul computer: si chiude toccando fuori o con Esc. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .country-dd .qq-dd-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--sw-place-panel-line) !important;
    border-radius: var(--sw-radius-xs, 8px) !important;
    background: var(--sw-surface-2) !important;
    color: var(--sw-ink) !important;
    -webkit-text-fill-color: var(--sw-ink) !important;
    font-size: 16px !important;
  }

  /* A tutto schermo: la tendina di Select2 (/spedizioni) e quella dei paesi di
     /registrati. Stesse dichiarazioni, due vocabolari — e' il motivo per cui
     stanno in un selettore solo. Quella di /welcome fa gia' lo stesso, con la
     classe `.qq-dd-sheet`, nella sezione 88 di spedireweb-pro.css. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.select2-container--open .select2-dropdown, .country-dd:not(.d-none)):not(.qq-dd-sheet) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3000 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    background: var(--sw-place-panel-bg) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.select2-container--open .select2-dropdown .select2-search--dropdown, .country-dd:not(.d-none) > .country-search-wrap) {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
    border-bottom: 1px solid var(--sw-place-panel-line) !important;
    background: var(--sw-place-panel-bg) !important;
  }
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.select2-container--open .select2-dropdown .select2-results, .country-dd:not(.d-none) > .country-list) {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 4px !important;
  }
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.select2-container--open .select2-dropdown .select2-results__options, .country-dd:not(.d-none) > .country-list) {
    max-height: none !important;
  }
  /* La vista piena deve stare davvero sopra tutto. Su /spedizioni e' facile:
     Select2 appende la tendina al `<body>`. Su /registrati no — il pannello sta
     dentro il modulo, e sopra di lui ci sono due antenati con un `z-index`
     proprio (`.login-page__form-shell` a 2 dentro `.container-xl` a 1): quei
     due creano un contesto d'impilamento, e i 3000 del pannello dentro di
     esso valgono quanto l'1 del nonno. Misurato: la barra di ricerca stava a
     `top: 0` ma la navbar (1040) le finiva sopra, e a schermo si vedeva
     l'elenco che partiva sotto la barra del sito senza campo di ricerca ne'
     via d'uscita. Finche' il pannello e' aperto, i due antenati salgono. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .container-xl:has(.country-dd:not(.d-none)) {
    z-index: 3000 !important;
  }
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.login-page__form-shell, .login-page__card, .card-body):has(.country-dd:not(.d-none)) {
    z-index: auto !important;
  }

  /* Il campo di ricerca riempie la barra in cima, come su /welcome. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .country-dd:not(.d-none) .country-search {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--sw-place-search-h, 48px) !important;
  }

  /* Righe piu' alte: e' un elenco che si tocca con il dito, non con il mouse. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.select2-container--open .select2-dropdown .select2-results__option, .country-dd:not(.d-none) .country-list > li),
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.qq-city-dd, .city-dd) :is(.qq-city-item, .item) {
    min-height: 48px !important;
  }
  /* A tutto schermo non ci sono angoli: il pannello e' la pagina. La sezione
     88 lo dice gia', ma sul guscio `.city-dd` arrivava dopo un raggio di 5px
     (misurato), e questo foglio e' l'ultimo a parlare. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .qq-dd-sheet {
    border-radius: 0 !important;
  }

  /* Le righe dentro una vista piena si toccano col dito anche quando il
     pannello e' arrivato li' da un altro guscio (`.city-dd` di /registrati). */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .qq-dd-sheet :is(.qq-city-item, .item, .log-dd-item, .country-list > li, .city-list > li) {
    min-height: 48px !important;
  }
}

/* -----------------------------------------------------------------------------
   9. /register — gli ultimi due campi luogo del sito
   La pagina aveva il suo terzo dialetto: `.country-dd` con dentro `ul.country-list`
   e una barra di ricerca incartata in `.p-2.border-bottom.bg-light`. I nomi
   restano — sono gli agganci dello script — ma il vestito e' questo.
   -------------------------------------------------------------------------- */
/* L'altezza massima la decide il pannello. Qui era scritta nell'attributo
   `style` delle due liste (200px), e un attributo non lo si cambia da un
   foglio: si toglie di mezzo alzando il tetto della lista e lasciando il
   limite al riquadro che la contiene. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.country-dd, .city-dd) > :is(.country-list, .city-list)[style] {
  max-height: none !important;
  overflow: visible !important;
}
/* La fascia della ricerca: `bg-light` e' un fondo chiaro di Bootstrap, e al
   buio restava chiaro. Il colore lo mette il pannello. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .country-dd > div:has(> .country-search) {
  padding: 4px 4px 8px !important;
  border: 0 !important;
  background: transparent !important;
}
/* Le utilita' di cornice e ombra sul markup non decidono piu': lo fa il
   riquadro comune. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.country-dd, .city-dd).shadow-sm {
  box-shadow: var(--sw-place-panel-shadow) !important;
}

/* -----------------------------------------------------------------------------
   10. La spia dell'attesa
   Mentre si scrive, la ricerca delle citta' va in rete: finche' la risposta non
   torna, il campo lo dice con una rotella. Su /spedizioni e su /welcome e' la
   stessa — 16px, due pixel di tratto, colore di marca, la rotazione di Bootstrap
   a 0,6s. Su /registrati no: era un anello **nero** con una rotazione sua
   (`trkspin`, 0,75s) a 8px dal bordo invece di 11 — misurato. Una spia che su un
   campo bianco si nota appena, e diversa dalle altre due.

   Qui diventa una sola, e le misure stanno nei token: la rotella la si cambia
   in un punto per tutte e tre le pagine.

   La ricerca del **paese** resta senza rotella dove l'elenco e' gia' in pagina
   (l'elenco dei paesi di /welcome si filtra in memoria): fingere un'attesa che
   non c'e' e' peggio che non mostrarla. Lo dice gia' il commento accanto a
   `setBusy` in welcome.blade.php.
   -------------------------------------------------------------------------- */
html body.nedate-ui-standard {
  --sw-place-spin-size:  16px;
  --sw-place-spin-bw:    2px;
  --sw-place-spin-ink:   var(--sw-brand-600);
  --sw-place-spin-track: rgba(100, 116, 139, .35);
  --sw-place-spin-inset: .75rem;
  --sw-place-spin-time:  .6s;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.ac-loading-icon[class][class], .city-ac .spinner-ac[class][class]) {
  /* Due classi in piu' sul selettore: la rotella di /welcome usciva a 21px —
     1,5rem con la radice a 14 — perche' una regola di `.spinner-border` pesava
     di piu' di questa, e dentro un guscio da 14px sbordava. */
  width: var(--sw-place-spin-size) !important;
  height: var(--sw-place-spin-size) !important;
  border: var(--sw-place-spin-bw) solid var(--sw-place-spin-track) !important;
  border-top-color: var(--sw-place-spin-ink) !important;
  border-radius: 999px !important;
  /* La misura comprende il tratto: senza, i 16px erano quelli del cerchio
     interno e la rotella usciva 19-20 di fuori (misurato su /welcome). */
  box-sizing: border-box !important;
  animation: spinner-border var(--sw-place-spin-time) linear infinite !important;
}
/* Il suo posto nel campo: a filo con la freccia degli altri, non due pixel
   piu' dentro. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .city-ac .spinner-ac {
  right: var(--sw-place-spin-inset) !important;
}

/* Il guscio che /welcome costruisce attorno alla rotella e' largo 1rem, cioe'
   14px con la radice di questo sito: la rotella da 16 ci sbordava. Il guscio
   prende la misura dallo stesso token. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .ac-loading-icon-wrap {
  width: var(--sw-place-spin-size) !important;
  height: var(--sw-place-spin-size) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .sw-city-clear {
  position: absolute !important;
  right: .5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 2rem !important;
  height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--bs-secondary-color, #6c757d) !important;
  font: inherit !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .sw-city-clear[hidden] {
  display: none !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .sw-city-clear:hover,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .sw-city-clear:focus-visible {
  background: var(--bs-tertiary-bg, rgba(108,117,125,.12)) !important;
  color: var(--bs-body-color, #212529) !important;
  outline: none !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] input.sw-city-validated {
  padding-right: 2.75rem !important;
}






/* Autocomplete testuale comune (clienti/utenti): non è un select visivo,
   quindi il controllo chiuso non mostra il caret. */
html body.nedate-ui-standard .sw-text-autocomplete .select2-selection--single {
  padding-right: var(--sw-field-pad-x, 16px) !important;
}
html body.nedate-ui-standard .sw-text-autocomplete .select2-selection--single .select2-selection__arrow {
  display: none !important;
}
html body.nedate-ui-standard .sw-text-autocomplete .select2-container--default .select2-selection--single::after,
html body.nedate-ui-standard .sw-text-autocomplete .select2-container--bootstrap-5 .select2-selection--single::after {
  content: none !important;
  display: none !important;
}

/* Spinner della ricerca AJAX dentro la barra di ricerca. */
.select2-dropdown.sw-text-autocomplete-dropdown .select2-search--dropdown {
  position: relative;
}
.select2-dropdown.sw-text-autocomplete-dropdown .select2-search__field {
  padding-right: 42px !important;
}
.select2-dropdown.sw-text-autocomplete-dropdown .sw-autocomplete-spinner {
  position: absolute;
  right: 16px;
  top: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--sw-muted);
  z-index: 3;
}
.select2-dropdown.sw-text-autocomplete-dropdown .sw-autocomplete-spinner.is-searching {
  display: inline-flex;
}
.select2-dropdown.sw-text-autocomplete-dropdown .sw-autocomplete-close {
  display: none;
}

@media (max-width: 767.98px) {
  .select2-dropdown.sw-text-autocomplete-dropdown .select2-search--dropdown {
    gap: 8px !important;
  }
  .select2-dropdown.sw-text-autocomplete-dropdown .select2-search__field {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--sw-place-search-h, 48px) !important;
    padding-right: 42px !important;
  }
  .select2-dropdown.sw-text-autocomplete-dropdown .sw-autocomplete-spinner {
    right: 70px;
  }
  .select2-dropdown.sw-text-autocomplete-dropdown .sw-autocomplete-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--sw-place-panel-line, var(--sw-line)) !important;
    border-radius: var(--sw-radius-xs, 8px) !important;
    background: var(--sw-surface-2) !important;
    color: var(--sw-ink) !important;
  }
}



/* Shared missing-location resolver */
.sw-location-empty__message {
  padding: .7rem .8rem .35rem;
  color: var(--bs-secondary-color, #6c757d);
  font-size: .875rem;
  line-height: 1.35;
}

.sw-location-add-action {
  display: block;
  padding: .65rem .8rem;
  border-top: 1px solid var(--sw-line, rgba(15, 23, 42, .10));
  background: var(--sw-surface-2, #fff);
}

.sw-location-add-action__text {
  color: var(--sw-muted, var(--bs-secondary-color, #6c757d));
  font-size: .82rem;
  line-height: 1.4;
}

.sw-location-add-action__link {
  color: var(--sw-primary, var(--bs-primary, #dc1f3d));
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .14em;
}

.sw-location-add-action__link:hover,
.sw-location-add-action__link:focus-visible {
  color: var(--sw-primary-hover, var(--bs-link-hover-color, #b71932));
}