/* =====================================================================
   PVV v5 — PWA install prompt CTA.
   Reader-first discipline: never a popover, never full-screen. A small,
   bordered chip that can be dismissed in one tap.
   ===================================================================== */

.pvv-pwa-cta {
  position: relative;
  max-width: 560px;
  margin: 1.75em auto;
  padding: 0;
  border: 1px solid rgba(11, 79, 63, .28);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff8ed 0%, #fff 85%);
  box-shadow: 0 2px 10px rgba(11, 79, 63, .06);
  font: 14px/1.42 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #222;
  box-sizing: border-box;
}

/* Footer variant slides up from the bottom, quieter */
.pvv-pwa-cta-footer {
  position: fixed;
  left: 50%;
  bottom: 16px;
  right: auto;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  z-index: 2147483000;
  animation: pvv-slide-in 280ms ease-out;
}

@keyframes pvv-slide-in {
  from { transform: translate(-50%, 40px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

.pvv-pwa-cta-inner {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  flex-wrap: wrap;
}

.pvv-pwa-cta-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 220px;
  min-width: 0;
}

.pvv-pwa-cta-title {
  font-weight: 600;
  font-size: 14px;
  color: #0b4f3f;
}

.pvv-pwa-cta-dek {
  font-size: 13px;
  color: #555;
  line-height: 1.3;
}

.pvv-pwa-cta-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.pvv-pwa-cta-accept {
  background: #0b4f3f;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease;
}

.pvv-pwa-cta-accept:hover  { background: #136451; }
.pvv-pwa-cta-accept:focus  { outline: 2px solid #ffc107; outline-offset: 1px; }
.pvv-pwa-cta-accept:active { background: #0a3d30; }

.pvv-pwa-cta-dismiss {
  background: transparent;
  color: #555;
  border: 1px solid rgba(11, 79, 63, .25);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease;
}

.pvv-pwa-cta-dismiss:hover  { border-color: #0b4f3f; color: #0b4f3f; }
.pvv-pwa-cta-dismiss:focus  { outline: 2px solid #ffc107; outline-offset: 1px; }

/* Dark-mode courtesy */
@media (prefers-color-scheme: dark) {
  .pvv-pwa-cta {
    background: linear-gradient(180deg, #1a2624 0%, #0f1615 85%);
    color: #eee;
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
  }
  .pvv-pwa-cta-title { color: #9fd8c5; }
  .pvv-pwa-cta-dek   { color: #aaa; }
  .pvv-pwa-cta-dismiss {
    color: #ccc;
    border-color: rgba(255,255,255,.18);
  }
  .pvv-pwa-cta-dismiss:hover { color: #9fd8c5; border-color: #9fd8c5; }
}

/* Respect user reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .pvv-pwa-cta-footer { animation: none; }
}

/* When the PWA is already installed and the site runs in standalone mode,
   we never want the install chip — hide defensively. */
@media (display-mode: standalone) {
  .pvv-pwa-cta { display: none !important; }
}