/* =========================================================================
   L'AVVISO DI SERVIZIO

   Colore d'attenzione e non di errore. Un ritardo dei corrieri non e' un
   guasto del sito: il rosso qui farebbe pensare a un ordine che non si
   puo' fare, e chi legge chiude la pagina invece di leggere la riga.

   NEL FLUSSO, non fissa. La testata si appiccica scorrendo: una striscia
   fissa in cima le si sarebbe sommata, e due fasce che si inseguono sono
   il difetto gia' pagato alla cassa.
   ========================================================================= */

.rt-avviso {
  background: var(--rt-attenzione-tenue);
  border-bottom: 1px solid var(--rt-attenzione);
  color: var(--rt-ink);
}

.rt-avviso[hidden] { display: none; }

.rt-avviso__dentro {
  display: flex;
  align-items: flex-start;
  gap: var(--rt-s3);
  padding-block: var(--rt-s3);
}

.rt-avviso__segno {
  flex: none;
  display: flex;
  margin-top: var(--rt-s1);
  color: var(--rt-attenzione);
}

.rt-avviso__testo {
  /* min-width: 0 perche' un elemento flex non scende sotto il suo
     contenuto se non glielo si dice: senza, su schermi stretti la riga
     spingeva fuori il pulsante di chiusura. */
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--rt-t-sm);
  line-height: var(--rt-interlinea);
}

/* Il comando dentro la frase: una parola che si puo' premere, non un
   pulsante che interrompe la lettura. Sottolineato, perche' in mezzo al
   testo il solo colore non basta a dire che e' premibile. */
.rt-avviso__scrivi,
.rt-avviso__testo a {
  padding: 0;
  border: 0;
  background: none;
  color: var(--rt-blu);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  cursor: pointer;
}

.rt-avviso__scrivi:hover,
.rt-avviso__testo a:hover { color: var(--rt-blu-scuro); }

/* Sul telefono la striscia prendeva 304px, piu' di un terzo della prima
   schermata: il marchio e l'eroe finivano sotto la piega prima ancora
   che si cominciasse a leggere. Stesso testo, corpo e spazi piu' stretti.
   Scritto qui sotto la regola che sovrascrive, non in fondo al foglio. */
@media (max-width: 620px) {
  .rt-avviso__dentro { gap: var(--rt-s2); padding-block: var(--rt-s2); }
  .rt-avviso__testo  { font-size: var(--rt-t-xs); }
}

.rt-avviso__chiudi {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rt-s8);
  height: var(--rt-s8);
  margin: calc(var(--rt-s1) * -1) calc(var(--rt-s2) * -1) 0 0;
  border: 0;
  border-radius: var(--rt-r-pill);
  background: none;
  color: var(--rt-ink-2);
  cursor: pointer;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}

.rt-avviso__chiudi:hover {
  background: rgb(0 0 0 / 0.06);
  color: var(--rt-ink);
}

/* =========================================================================
   LO STESSO AVVISO NELLA SCHEDA PRODOTTO

   Sta attaccato al riquadro della consegna, sotto la data: la notizia
   serve esattamente dove c'e' scritto "ti arriva giovedi'", perche' e'
   quella frase che l'avviso corregge. Staccato di qualche pixel piu' su
   sarebbe una riga qualsiasi della pagina.
   ========================================================================= */

.rt-sp__avviso {
  margin: calc(var(--rt-s2) * -1) 0 var(--rt-s4);
  padding: var(--rt-s3) var(--rt-s4);
  border-radius: 0 0 var(--rt-r-md) var(--rt-r-md);
  background: var(--rt-attenzione-tenue);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-xs);
  line-height: var(--rt-interlinea);
}

.rt-sp__avviso strong { color: var(--rt-ink); }