/* PWA Install Banner */
.pwa-install-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1020;
  background: #202122;
  border-top: 1px solid #313233;
  padding: 12px 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  animation: pwa-slide-up 0.3s ease-out;
}

@keyframes pwa-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.pwa-install-content,
.pwa-install-ios,
.pwa-install-other {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.pwa-install-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}

.pwa-install-text {
  flex: 1;
  min-width: 0;
}

.pwa-install-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.3;
}

.pwa-install-text span {
  display: block;
  font-size: 12px;
  color: #959799;
  line-height: 1.4;
}

.pwa-install-text svg {
  color: #959799;
}

.pwa-install-share-icon {
  vertical-align: middle;
}

.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-install-btn {
  padding: 8px 20px;
  background: linear-gradient(135deg, #f59e0b, #d4ff3a);
  color: #202122;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
}

.pwa-install-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.pwa-install-dismiss {
  padding: 8px 12px;
  background: none;
  border: none;
  color: #6c6e70;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.pwa-install-dismiss:hover {
  color: #959799;
}

/* Responsive */
@media (max-width: 479px) {
  .pwa-install-content,
  .pwa-install-ios,
  .pwa-install-other {
    flex-wrap: wrap;
  }

  .pwa-install-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 4px;
  }
}

/* Footer "Install App" link (owner, 17 Oct 2026): it carries the hidden attribute until the page knows the
   site is not already running as the installed app. Footer list styles set display on li, which would
   otherwise beat the attribute. */
[data-pwa-install-item][hidden] {
  display: none !important;
}