/* Church PWA v2.0.0 */
:root{
  --cpwa-blue:#3a489b; --cpwa-dark:#162d68; --cpwa-yellow:#dddb00;
  --cpwa-white:#fff; --cpwa-radius:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ── Install banner ────────────────────────────────────────── */
#cpwa-install-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:88888;
  padding:0 12px calc(12px + var(--safe-b));
  transform:translateY(100%); transition:transform .35s cubic-bezier(.34,1.2,.64,1);
  pointer-events:none;
}
#cpwa-install-banner.cpwa-visible{ transform:translateY(0); pointer-events:all; }
.cpwa-install-inner{
  background:#fff; border-radius:var(--cpwa-radius);
  padding:14px 16px; display:flex; align-items:center; gap:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.18); border-top:3px solid var(--cpwa-blue);
  max-width:560px; margin:0 auto;
}
.cpwa-install-icon{ width:48px; height:48px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.cpwa-install-text{ flex:1; min-width:0; }
.cpwa-install-title{ font-size:14px; font-weight:800; color:#162d68; margin:0 0 2px; }
.cpwa-install-desc{  font-size:12px; color:#6b7280; margin:0; }
.cpwa-install-btns{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }

/* ── Push prompt ───────────────────────────────────────────── */
#cpwa-push-prompt{
  position:fixed; inset:0; z-index:88899;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .3s;
}
#cpwa-push-prompt.cpwa-visible{ opacity:1; }
.cpwa-prompt-inner{
  background:#fff; border-radius:20px; padding:32px 24px;
  text-align:center; max-width:320px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:scale(.9); transition:transform .3s cubic-bezier(.34,1.2,.64,1);
}
#cpwa-push-prompt.cpwa-visible .cpwa-prompt-inner{ transform:scale(1); }
.cpwa-prompt-icon{ font-size:52px; margin-bottom:14px; }
.cpwa-prompt-title{ font-size:20px; font-weight:900; color:#162d68; margin:0 0 10px; }
.cpwa-prompt-desc{  font-size:14px; color:#6b7280; margin:0 0 24px; line-height:1.6; }

/* ── Buttons ───────────────────────────────────────────────── */
.cpwa-btn-primary{
  display:block; width:100%; padding:13px;
  background:linear-gradient(135deg,#3a489b,#162d68); color:#fff;
  border:none; border-radius:50px; font-size:15px; font-weight:700;
  cursor:pointer; transition:opacity .15s; margin-bottom:10px;
}
.cpwa-btn-primary:hover{ opacity:.85; }
.cpwa-btn-later{
  display:block; width:100%; padding:8px;
  background:none; border:none; color:#9ca3af;
  font-size:13px; cursor:pointer;
}

/* ── Offline / Online bar ──────────────────────────────────── */
#cpwa-offline-bar{
  position:fixed; top:0; left:0; right:0; z-index:88888;
  padding:10px 16px; font-size:13px; font-weight:700;
  color:#fff; text-align:center;
  transform:translateY(-100%); transition:transform .3s ease, background .3s;
}
#cpwa-offline-bar.cpwa-offline{
  background:#ef4444; transform:translateY(0);
}
#cpwa-offline-bar.cpwa-online{
  background:#22c55e; transform:translateY(0);
}

/* ── Update banner ─────────────────────────────────────────── */
#cpwa-update-bar{
  position:fixed; bottom:calc(70px + var(--safe-b)); left:12px; right:12px;
  z-index:88888; background:linear-gradient(135deg,#3a489b,#162d68);
  border-radius:12px; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 8px 24px rgba(0,0,0,.2); color:#fff;
}
#cpwa-update-bar p{ font-size:14px; font-weight:600; margin:0; }
#cpwa-update-btn{
  padding:8px 16px; background:#dddb00; color:#111;
  border:none; border-radius:50px; font-size:13px;
  font-weight:700; cursor:pointer; flex-shrink:0;
}