/* =========================================================================
   JetTulio — stili PWA condivisi da tutta la suite (pagine interne e accesso):
   avviso "nuova versione" e banner di installazione. Palette del marchio:
   antracite profondo + rosso Acton, coerente con la pagina di accesso.
   ========================================================================= */

.pwa-toast,
.pwa-install-banner{
  position:fixed;left:50%;z-index:1000;
  transform:translateX(-50%);
  width:min(480px,calc(100vw - 24px));
  color:#f6f6f7;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:rgba(20,21,25,.94);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.5);
}
@supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){
  .pwa-toast,
  .pwa-install-banner{
    background:rgba(20,21,25,.78);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    backdrop-filter:blur(14px) saturate(1.2);
  }
}

.pwa-btn{
  min-height:40px;padding:9px 18px;
  font:inherit;font-size:14px;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,#ff2b35,#e10712);
  border:0;border-radius:10px;
  box-shadow:0 8px 22px rgba(225,7,18,.32);
}
.pwa-btn:active{transform:translateY(1px)}

.pwa-close{
  position:absolute;top:6px;right:6px;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;color:#9aa0a6;cursor:pointer;
  background:transparent;border:0;border-radius:8px;
}
.pwa-close:hover{color:#fff;background:rgba(255,255,255,.08)}

/* --- Avviso "nuova versione" --------------------------------------------- */
.pwa-toast{
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;
  padding:12px 40px 12px 16px;
  animation:pwa-slide-in .35s cubic-bezier(.2,.8,.25,1) both;
}
.pwa-toast-text{font-size:13.5px;line-height:1.4;flex:1}
.pwa-toast .pwa-close{top:50%;transform:translateY(-50%)}

/* --- Banner di installazione --------------------------------------------- */
.pwa-install-banner{
  bottom:calc(14px + env(safe-area-inset-bottom));
  padding:16px 16px 14px;
  display:grid;gap:12px;
  opacity:0;transform:translate(-50%,16px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.25,1);
}
.pwa-install-banner.is-visible{opacity:1;transform:translate(-50%,0)}
.pwa-install-head{display:flex;align-items:center;gap:12px;padding-right:26px}
.pwa-install-icon{width:48px;height:48px;border-radius:11px;flex:none}
.pwa-install-head strong{display:block;font-size:15px;letter-spacing:.01em}
.pwa-install-head span{display:block;font-size:12.5px;line-height:1.4;color:#9aa0a6;margin-top:2px}
.pwa-install-banner .pwa-btn{justify-self:start}

/* Guida iOS: passaggi con icone */
.pwa-ios-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pwa-ios-steps li{
  display:flex;align-items:center;gap:9px;
  font-size:13px;line-height:1.45;color:#c9ccd2;
}
.pwa-ios-steps li span{
  flex:none;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#ff2b35,#e10712);
}
.pwa-ios-steps li b{color:#f6f6f7}
.pwa-ios-steps svg{width:18px;height:18px;flex:none;color:#4da3ff;vertical-align:-3px}

@keyframes pwa-slide-in{
  from{opacity:0;transform:translate(-50%,16px)}
  to{opacity:1;transform:translate(-50%,0)}
}

@media (prefers-reduced-motion:reduce){
  .pwa-toast{animation:none}
  .pwa-install-banner{transition:none;opacity:1;transform:translate(-50%,0)}
}