/* Self-contained styles for the PWA install banner.
   Written in plain CSS (not Tailwind utility classes) so the banner renders
   identically on every page, even ones whose stylesheet doesn't include
   every Tailwind utility class (e.g. currentaffairs.html's purged ca.css). */

#pwa-install-banner {
  display: none;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  background-color: #fff;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
}

#pwa-install-banner.flex {
  display: flex;
}

#pwa-install-banner .pwa-install-icon {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: #e0e7ff;
  color: #4f46e5;
}

#pwa-install-banner .pwa-install-icon svg {
  height: 1.5rem;
  width: 1.5rem;
}

#pwa-install-banner .pwa-install-copy {
  min-width: 0;
  flex: 1 1 auto;
}

#pwa-install-banner .pwa-install-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
}

#pwa-install-banner #pwa-install-tagline {
  margin: 0;
  font-size: 0.75rem;
  color: #64748b;
}

#pwa-install-banner #pwa-install-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 0.5rem;
  background-color: #4f46e5;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

#pwa-install-banner #pwa-install-btn:hover {
  background-color: #4338ca;
}

#pwa-install-banner #pwa-install-dismiss {
  flex-shrink: 0;
  border: none;
  background: none;
  border-radius: 0.5rem;
  padding: 0.375rem;
  color: #94a3b8;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

#pwa-install-banner #pwa-install-dismiss:hover {
  background-color: #f1f5f9;
  color: #475569;
}

#pwa-install-banner #pwa-install-dismiss svg {
  height: 1rem;
  width: 1rem;
}