/* "Install the app" card + footer button (markup: includes/footer.php, script: pwa-install.js).
   Bottom-LEFT on purpose: bottom-right belongs to Quick Connect and back-to-top. On a phone
   (<=480px) Quick Connect is a 62px bottom bar, so the card sits just above it, full width. */
.sj-install {
  position: fixed; left: 24px; bottom: 24px; z-index: 9996;
  width: 340px; max-width: calc(100vw - 24px);
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  padding: 14px; box-sizing: border-box;
  background: var(--white, #FFF); color: var(--ink, #3E4095);
  border: 1px solid var(--line, #E6E6F1); border-radius: var(--radius, 14px);
  box-shadow: 0 12px 32px rgba(47, 49, 120, .16);
  opacity: 0; transform: translateY(16px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.sj-install.is-in { opacity: 1; transform: none; }
.sj-install.is-lifted { bottom: calc(24px + var(--sj-lift, 0px)); }
.sj-install[hidden] { display: none; }
.sj-install-ic { width: 52px; height: 52px; border-radius: 12px; background: var(--ivory, #F5F5F9); }
.sj-install-t { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--navy, #3E4095); margin: 0; }
.sj-install-s { font-size: 13px; line-height: 1.4; color: var(--muted-strong, #55579F); margin: 2px 0 0; }
.sj-install-x {
  align-self: start; width: 30px; height: 30px; margin: -6px -6px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted, #55579F);
  font-size: 16px; cursor: pointer;
}
.sj-install-x:hover { background: var(--tint, #F0F0F7); color: var(--ink, #3E4095); }
.sj-install-go {
  grid-column: 1 / -1; width: 100%; padding: 11px 16px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill, 999px); background: var(--navy, #3E4095); color: #FFF;
  font: inherit; font-weight: 600; font-size: 14px;
}
.sj-install-go:hover { background: var(--navy-dark, #2F3178); }

/* iPhone / iPad: no install dialog exists, so the card shows the two steps instead. */
.sj-install-ios { grid-column: 1 / -1; display: none; margin: 0; padding: 10px 12px 10px 30px;
                  background: var(--tint, #F0F0F7); border-radius: 10px; font-size: 13.5px; line-height: 1.55; }
.sj-install-ios i { color: #55579F; margin: 0 2px; }
.sj-install.is-ios .sj-install-ios { display: block; }
.sj-install.is-ios .sj-install-go { display: none; }

/* Footer button, beside Ask an Expert on the forest ground. Hidden until the browser can install. */
.sj-foot-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.foot .sj-install-foot { background: transparent; color: #FFF; border: 1px solid rgba(255, 255, 255, .4); white-space: nowrap; }
.foot .sj-install-foot:hover { background: #FFF; color: var(--ink, #3E4095); border-color: #FFF; }
.sj-install-foot[hidden] { display: none; }

@media (max-width: 480px) {
  .sj-install { left: 12px; right: 12px; width: auto; max-width: none;
                bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .sj-install.is-lifted { bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--sj-lift, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .sj-install { transition: none; transform: none; }
}
@media print { .sj-install { display: none !important; } }