/* ==========================================================================
   Fragrance On Flames — PWA install banner + installed-app bottom nav
   Loaded on customer-facing pages only (assets/css/pwa.css).
   ========================================================================== */

:root {
  --fof-navy: #0d1452;
  --fof-gold: #d4ac3d;
  --fof-cream: #faf8f3;
}

/* ---- Install banner (Android beforeinstallprompt + iOS instructions) --- */

#fofInstallBanner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 100000;
  max-width: 460px;
  margin: 0 auto;
  background: var(--fof-navy);
  color: var(--fof-cream);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 14px 14px 14px 16px;
  display: none;
  align-items: center;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
#fofInstallBanner.fof-show {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
#fofInstallBanner .fof-install-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(212,172,61,0.15);
  border: 1px solid rgba(212,172,61,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: var(--fof-gold);
  font-size: 15px;
}
#fofInstallBanner .fof-install-text {
  flex: 1 1 auto;
  min-width: 0;
}
#fofInstallBanner .fof-install-text strong {
  display: block;
  font-size: 14px;
  color: #fff;
  margin-bottom: 2px;
}
#fofInstallBanner .fof-install-text span {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(250,248,243,0.75);
}
#fofInstallBanner .fof-install-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
#fofInstallBanner button {
  border: none;
  cursor: pointer;
  font-size: 13px;
  border-radius: 5px;
  padding: 8px 12px;
  font-weight: 600;
}
#fofInstallBanner .fof-install-btn {
  background: var(--fof-gold);
  color: #1c130c;
  white-space: nowrap;
}
#fofInstallBanner .fof-dismiss-btn {
  background: transparent;
  color: rgba(250,248,243,0.6);
  padding: 8px 8px;
  font-size: 18px;
  line-height: 1;
}
#fofInstallBanner .fof-dismiss-btn:hover { color: #fff; }

@media (max-width: 480px) {
  #fofInstallBanner .fof-install-text span { display: none; }
}

/* ---------------------- Installed-app bottom tab bar --------------------- */
/* Only ever shown when the site is actually running as the installed PWA
   (display-mode: standalone / iOS navigator.standalone) — never inside an
   ordinary browser tab, so normal browsing is completely unaffected. */

#fofAppNav {
  display: none;
}

body.fof-standalone #fofAppNav {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99998;
  height: 58px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--fof-navy);
  border-top: 1px solid rgba(212,172,61,0.25);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.2);
}

body.fof-standalone {
  /* keep page content clear of the fixed bottom nav */
  padding-bottom: calc(58px + env(safe-area-inset-bottom, 0));
}

/* Nudge the existing floating buttons above our bottom nav bar so they
   don't overlap it once the app is installed and running standalone. */
body.fof-standalone .scrollup { bottom: calc(58px + 18px + env(safe-area-inset-bottom, 0)); }
body.fof-standalone .whatsapp-icon { bottom: calc(58px + 33px + env(safe-area-inset-bottom, 0)); }
/* .scrollup's own icon is 50px tall, so in standalone mode it occupies
   roughly the 76px-126px band above the bottom nav (58+18 to that plus
   its 50px height). The chat bubble sits in the same bottom-right
   corner, so it needs to clear that whole band, not just start above
   .scrollup's bottom edge - 30px (old value) put the bubble's own
   bottom edge inside that band, which is exactly the overlap reported
   on the installed Android app. Cleared with a visible gap instead. */
body.fof-standalone #fofchat-bubble { bottom: calc(58px + 80px + env(safe-area-inset-bottom, 0)); }
@media (max-width: 576px) {
  body.fof-standalone .whatsapp-icon { bottom: calc(58px + 23px + env(safe-area-inset-bottom, 0)); }
}

/* The AI chat widget (chat-widget.php) goes full-screen on narrow
   viewports when opened. Its panel sits at a lower z-index than our
   bottom nav, so without this the nav would stay visible - and
   tappable - on top of an open chat. pwa-install.js toggles this body
   class to match the chat panel's own open/closed state. */
body.fof-chat-open #fofAppNav { display: none; }

/* Belt-and-braces alongside the chat panel's own z-index: on some mobile
   browsers the on-screen keyboard opening while composing a message can
   resize the visual viewport in ways that don't perfectly track a
   position:fixed, height:100% panel, which can let body-level fixed
   elements - main.css's "scroll to top" arrow (.scrollup) and the
   WhatsApp button (.whatsapp-icon) - become visible again even while the
   chat is open, right where the Send button and the message list are.
   Actually hiding them (not just relying on stacking order) removes that
   whole class of problem. !important is required because both are
   toggled on/off via jQuery .show()/.hide(), which set an inline
   `style="display:..."` that would otherwise outrank a plain class rule. */
body.fof-chat-open .scrollup,
body.fof-chat-open .whatsapp-icon {
  display: none !important;
}

#fofAppNav a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: rgba(250,248,243,0.6);
  text-decoration: none;
  font-size: 10.5px;
  letter-spacing: 0.2px;
}
#fofAppNav a i {
  font-size: 18px;
  line-height: 1;
}
#fofAppNav a.fof-active {
  color: var(--fof-gold);
}
#fofAppNav a:hover {
  color: var(--fof-cream);
}