/*
  PWA install, iOS hint, and update banners.

  Install and iOS hints sit in the document flow after the main content, so they
  never cover controls. Update banners stay fixed above the mobile dock because
  they need immediate attention. Both reuse the prototype design system.
*/

.pwa-banner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 1148px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px 12px;
  padding: 12px;
  background: var(--white);
  color: var(--text-dark);
  border: 3px solid var(--text-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-nav);
  font-family: 'Nunito', sans-serif;
  animation: pwa-banner-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.pwa-banner--update {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  width: auto;
  max-width: 440px;
  margin: 0 auto;
}

body.is-auth-screen .pwa-banner--update {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

@keyframes pwa-banner-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pwa-banner-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--mango-soft);
  border: 2.5px solid var(--mango);
  border-radius: var(--radius-md);
  font-size: 1.35rem;
  line-height: 1;
}

.pwa-banner--ios .pwa-banner-icon {
  background: var(--sky-soft);
  border-color: var(--sky);
}

.pwa-banner--update .pwa-banner-icon {
  background: var(--mint-soft);
  border-color: var(--mint);
}

.pwa-banner-copy {
  min-width: 0;
}

.pwa-banner-title {
  margin: 0;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
}

.pwa-banner-text {
  margin: 3px 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.pwa-banner-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pwa-banner-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 3px solid var(--text-dark);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--text-dark);
  font-family: 'Fredoka', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-bounce);
}

.pwa-banner-btn--primary {
  background: var(--coral);
  box-shadow: 0 4px 0 var(--coral-dark);
}

.pwa-banner-btn--mint {
  background: var(--mint);
  box-shadow: 0 4px 0 var(--mint-dark);
}

.pwa-banner-btn--ghost {
  box-shadow: 0 4px 0 rgba(52, 51, 74, 0.18);
}

.pwa-banner-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.pwa-banner-btn:focus-visible {
  outline: 3px solid var(--sky-dark);
  outline-offset: 2px;
}

@media (hover: hover) {
  .pwa-banner-btn:hover {
    transform: translateY(-1px);
  }
}

@media (min-width: 460px) {
  .pwa-banner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .pwa-banner-actions {
    grid-column: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

@media (min-width: 820px) {
  .pwa-banner--update {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-banner {
    animation: none;
  }

  .pwa-banner-btn {
    transition: none;
  }

  .pwa-banner-btn:active,
  .pwa-banner-btn:hover {
    transform: none;
  }
}