/* "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, #2A1C12);
  border: 1px solid var(--line, #ECE4D3); border-radius: var(--radius, 14px);
  box-shadow: 0 12px 32px rgba(42, 28, 18, .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, #FBF8F1); }
.sj-install-t { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--navy, #1E4A25); margin: 0; }
.sj-install-s { font-size: 13px; line-height: 1.4; color: var(--muted-strong, #625C50); 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, #857E70);
  font-size: 16px; cursor: pointer;
}
.sj-install-x:hover { background: var(--tint, #F3EDE0); color: var(--ink, #2A1C12); }
.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, #1E4A25); color: #fff;
  font: inherit; font-weight: 600; font-size: 14px;
}
.sj-install-go:hover { background: var(--navy-dark, #163A1C); }

/* 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, #F3EDE0); border-radius: 10px; font-size: 13.5px; line-height: 1.55; }
.sj-install-ios i { color: #0A84FF; 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, #2A1C12); 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; } }