/* ==========================================================================
   The app (PWA): install button in the top bar, offline card.
   Palette follows app.css: violet #780090, magma orange #FC6000.
   ========================================================================== */

.pwa-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(120,0,144,.18);
  background:linear-gradient(120deg,#F6ECFB 0%,#FFF1E8 100%);
  color:var(--violet,#780090);
  font:inherit;font-size:13.5px;font-weight:650;line-height:1;
  box-shadow:0 8px 18px -14px rgba(58,0,72,.55);
  transition:transform .16s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
}
.pwa-btn[hidden]{display:none}
.pwa-btn:hover{
  color:#fff;
  background:linear-gradient(120deg,#780090 0%,#A21BC0 60%,#FC6000 130%);
  box-shadow:0 12px 24px -14px rgba(120,0,144,.6);
  transform:translateY(-1px);
}
.pwa-btn:active{transform:translateY(0) scale(.98)}
.pwa-btn svg{flex:none}

.pwa-tip{
  position:fixed;inset-inline:12px;bottom:12px;z-index:9999;
  max-width:420px;margin:0 auto;
  padding:14px 16px;border-radius:16px;
  background:#1B0B2A;color:#fff;font-size:13.5px;line-height:1.5;
  box-shadow:0 22px 44px -22px rgba(27,11,42,.8);
}
.pwa-tip[hidden]{display:none}
.pwa-tip button{
  position:absolute;inset-inline-end:8px;top:6px;
  background:none;border:0;color:#fff;font-size:18px;line-height:1;cursor:pointer;opacity:.7;
}

/* ---------- offline card ---------- */
.off-card{text-align:center;padding:34px 22px}
.off-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:20px;margin-bottom:12px;
  color:var(--violet,#780090);background:var(--violet-soft,#F6ECFB);
}
.off-card h1{font-size:21px;margin:0 0 8px}
.off-card .btn{margin-top:8px}

@media (max-width:720px){
  .pwa-btn{font-size:12.5px;padding:7px 11px}
  .pwa-btn span,.pwa-btn .pwa-lbl{display:none}
}