/* Project Pulse - PWA install banner styles (glass design) */
:root{
  /* Allow themes to override --primary as either HSL token or color string */
}

.pp-pwa-install-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:20px;
  max-width:560px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 22px;
  border-radius:25px;
  background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 8px 25px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  transition:all 0.28s cubic-bezier(0.4,0,0.2,1);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color:#111827; /* default text for light mode */
  z-index:10000;
}

.pp-pwa-install-banner--dark{
  background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  color:var(--popover-foreground, #e5e7eb);
  border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 8px 25px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
}

.pp-pwa-text{
  font-size:16px;
  line-height:1.4;
  font-weight:500;
  flex:1;
  min-width:0;
}

.pp-pwa-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.pp-pwa-btn{
  border-radius:20px;
  padding:12px 16px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  min-width:88px;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  backdrop-filter:blur(6px);
}

.pp-pwa-btn--install{
  background:#1f2937;
  color:#fff;
  padding:12px 20px;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
}

.pp-pwa-install-banner--dark .pp-pwa-btn--install{
  background:#0f1216;
}

.pp-pwa-btn--install:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
  background: var(--primary);
}

/* If --primary is defined as HSL token (e.g. "338 80% 42%"), allow using hsl(var(--primary))
   fall back to a pink hex if not available */
.pp-pwa-btn--install:hover{
  background: hsl(var(--primary, 338 80% 42%));
}

.pp-pwa-btn--secondary{
  background:transparent;
  border:1px solid rgba(0,0,0,0.06);
  color:var(--muted-foreground, #6b7280);
}

.pp-pwa-install-banner--dark .pp-pwa-btn--secondary{
  border:1px solid rgba(255,255,255,0.06);
  color:var(--muted-foreground, #9ca3af);
}

.pp-pwa-btn--secondary:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.04);
}

/* Responsive: stack vertically on small screens */
@media (max-width:520px){
  .pp-pwa-install-banner{
    left:12px;
    right:12px;
    bottom:14px;
    padding:14px;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    max-width:calc(100% - 24px);
  }
  .pp-pwa-text{order:1}
  .pp-pwa-actions{order:2;justify-content:flex-end}
  .pp-pwa-btn{min-width:72px}
  .pp-pwa-btn--install{min-width:92px}
}