/* ===================================================================
   [NWS-01] IL RICHIAMO AL CLUB
   Dal disegno "PAGINA CATEGORIE (VEDI TUTTO MENU).xd", artboard
   "VEDI TUTTO BORSE – 1", misurato sull'artboard (disegnata a 2x: qui i
   valori sono gia' riportati alla scala vera):

       scatola      530 x 552
       margini      53 ai lati, 102 in alto, 100 in basso
       logo Club    424 x 57, a 102 dal bordo alto
       frase        a 179, corpo 17,5
       privilegi    a 259, corpo 17,5
       bottone      424 x 44, a 408, scritta 15 di peso medio

   La scatola sta al centro dello schermo e passa DAVANTI alla testata,
   come la finestra della ricerca (z-index 10000): una cosa che
   interrompe deve stare sopra tutto, se no sembra un errore.
   =================================================================== */

.bb-nws-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.bb-nws-popup[hidden] {
  display: none;
}

/* ---- Il velo ---- */
.bb-nws-popup__velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.bb-nws-popup.is-active .bb-nws-popup__velo {
  opacity: 1;
}

/* ---- La scatola ----
   530px e' la misura del disegno; sotto quella soglia si restringe da
   sola, perche' su un telefono da 390 una scatola da 530 non ci sta e
   verrebbe tagliata a meta'. */
.bb-nws-popup__scatola {
  position: relative;
  width: min(530px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bb-bg, #fff);
  /* [NWS-01, Fabio 25/09] Piu' aria attorno al blocco di testo: i margini
     laterali passano da 53 a 72. Il disegno ne dava 53, ma li' il testo
     era centrato e riempiva la riga; a bandiera sinistra il blocco e' piu'
     stretto e regge — anzi chiede — piu' bianco intorno. */
  padding: 92px 72px 84px;
  /* A bandiera sinistra, non centrato. */
  text-align: left;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.bb-nws-popup.is-active .bb-nws-popup__scatola {
  opacity: 1;
  transform: translateY(0);
}

/* ---- La X ----
   Nel disegno sta all'angolo in alto a destra, appena dentro la scatola. */
.bb-nws-popup__chiudi,
.bb-nws-popup__chiudi.bb-nws-popup__chiudi {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--bb-fg, #111);
  cursor: pointer;
  transition: opacity var(--bb-transition-fast, 0.2s ease);
}

.bb-nws-popup__chiudi:hover {
  opacity: 0.6;
}

/* ---- Il logo del Club ----
   E' la stessa immagine del pannello Club e del fondo pagina
   (raggruppa-59.webp): nel disegno l'elemento si chiama proprio
   "Raggruppa-59". */
.bb-nws-popup__logo {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  /* allineato a sinistra come il testo, non piu' centrato */
  margin: 0 0 20px;
}

/* ---- La frase ---- */
.bb-nws-popup__frase {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bb-fg, #111);
  /* Nel disegno la spaziatura fra le lettere e' 0,1em su tutto. Sulle
     etichette ci sta; su una frase da leggere no — allarga le parole e
     rallenta la lettura. Qui resta appena accennata, e i 0,1em restano
     dove servono, sul bottone. */
  letter-spacing: 0.01em;
}

/* ---- I quattro privilegi ----
   Elenco vero, ma senza pallini: nel disegno sono righe introdotte da un
   trattino, e il trattino lo mette il CSS invece di stare dentro il testo
   — se no finisce anche nelle traduzioni, dove magari non si usa. */
.bb-nws-popup__privilegi {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  text-align: left;
  /* era inline-block per stare al centro con dentro il testo a sinistra:
     ora che tutto e' a bandiera non serve piu' quel trucco. */
  display: block;
}

.bb-nws-popup__privilegi li {
  position: relative;
  margin: 0 0 4px;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bb-fg, #111);
  letter-spacing: 0.01em;
}

.bb-nws-popup__privilegi li::before {
  content: '–';
  position: absolute;
  left: 0;
}

.bb-nws-popup__privilegi li:last-child {
  margin-bottom: 0;
}

/* ---- Il bottone ----
   Classe raddoppiata, non !important: su questo sito
   .elementor-kit-6 button dipinge di nero ogni bottone e una classe sola
   non basta a passargli davanti. Due classi si'. */
.bb-nws-popup__cta,
.bb-nws-popup__cta.bb-nws-popup__cta {
  display: block;
  width: 100%;
  max-width: 424px;
  margin: 0;
  padding: 12px 24px;
  background: var(--bb-fg, #111);
  background-color: var(--bb-fg, #111);
  color: var(--bb-bg, #fff);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--bb-transition-fast, 0.2s ease);
}

.bb-nws-popup__cta:hover,
.bb-nws-popup__cta.bb-nws-popup__cta:hover {
  opacity: 0.85;
}

/* ===================================================================
   TELEFONO
   I margini del disegno (102 in alto, 53 ai lati) su uno schermo da 390
   si mangerebbero meta' scatola: qui si stringono, tenendo le stesse
   proporzioni fra un pezzo e l'altro.
   =================================================================== */
@media (max-width: 600px) {
  .bb-nws-popup__scatola {
    padding: 58px 32px 36px;
  }

  .bb-nws-popup__logo {
    margin-bottom: 20px;
  }

  .bb-nws-popup__frase,
  .bb-nws-popup__privilegi li {
    font-size: 13px;
  }

  .bb-nws-popup__privilegi {
    margin-bottom: 26px;
  }
}

/* Chi ha chiesto meno animazioni la trova gia' aperta, senza entrata. */
@media (prefers-reduced-motion: reduce) {
  .bb-nws-popup__velo,
  .bb-nws-popup__scatola {
    transition: none;
  }
}

/* La finestra si mette a fuoco da codice all'apertura: non deve mostrare
   l'anello, che li' sarebbe solo un bordo comparso dal nulla. I comandi
   dentro (la X, il bottone) il loro anello ce l'hanno e resta. */
.bb-nws-popup__scatola:focus {
  outline: none;
}