/*
 * Gli avvisi della vetrina, in home.
 *
 * Stessa informazione che sta sulla TV del negozio ("arrivo tra 10 minuti",
 * "oggi si ritira fino alle 18"), per chi il negozio lo guarda da casa. Deve
 * saltare all'occhio ma non urlare: e' una nota di servizio in mezzo a una
 * pagina commerciale, non un banner.
 *
 * Il riquadro nasce nascosto (attributo hidden nel markup) e compare solo
 * quando c'e' davvero qualcosa da leggere: una fascia vuota che dice "nessun
 * avviso" occuperebbe spazio per non dire niente.
 */

/* Il riquadro vive dentro la hero, sopra il titolo: la hero e' alta piu' di
   mille pixel, e piu' in basso da telefono l'avviso non lo vedrebbe nessuno.
   z-index perche' il tema sovrappone le sezioni con forme decorative
   (.round-shape, .bg-effect-2): senza, finisce sotto una vela bianca pur
   essendo regolarmente nel DOM. */
.vetrina-avvisi {
  position: relative;
  z-index: 2;
  margin-bottom: 22px;
}

/* Il tema mette padding su ogni <section>: se un domani ci aggiungesse anche
   un display, l'attributo hidden smetterebbe di nascondere e in home
   comparirebbe un riquadro bianco vuoto. */
.vetrina-avvisi[hidden] {
  display: none !important;
}

/* Compatto: sta sopra l'h1 e arriva a pagina gia' disegnata, quindi ogni
   pixel in piu' e' un pixel di titolo che si sposta sotto gli occhi. */
.vetrina-avvisi-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 13px 18px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(72, 73, 121, 0.13);
}

.vetrina-avvisi-etichetta {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 5px 14px;
  border-radius: 30px;
  background: #2575fc;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vetrina-avvisi-etichetta:empty {
  display: none;
}

.vetrina-avvisi-lista {
  flex: 1 1 260px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vetrina-avvisi-lista li {
  position: relative;
  padding-left: 18px;
  color: #1c1d3e;
  font-size: 16px;
  line-height: 1.45;
}

.vetrina-avvisi-lista li + li {
  margin-top: 8px;
}

/* Il pallino ripete il colore scelto per l'avviso in vetrina: chi lo scrive
   sceglie una volta sola e i due posti restano coerenti. */
.vetrina-avvisi-lista li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #999999;
}

.vetrina-avvisi-lista li.is-verde::before { background: #16a34a; }
.vetrina-avvisi-lista li.is-ambra::before { background: #f59e0b; }
.vetrina-avvisi-lista li.is-rosso::before { background: #dc2626; }

.vetrina-avvisi-lista li.is-rosso {
  font-weight: 600;
}

@media (max-width: 575px) {
  .vetrina-avvisi {
    margin-bottom: 18px;
  }

  .vetrina-avvisi-card {
    padding: 12px 15px;
  }

  .vetrina-avvisi-lista li {
    font-size: 15px;
  }
}