/*
 * FindMyNyumba PWA / mobile polish.
 * Conservative and additive — it must not change the desktop look or break pages.
 */

/* Nicer taps on mobile (no grey flash box). */
html { -webkit-tap-highlight-color: transparent; }

/* Belt-and-suspenders: never allow the page to scroll sideways on a phone. */
html, body { max-width: 100%; }
@media (max-width: 640px) {
  body { overflow-x: hidden; }
}

/* When launched from the home screen, damp the rubber-band / pull-to-refresh. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: contain; }
  /* Respect the bottom safe area (home indicator) for anything pinned to the bottom. */
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* Safe-area helpers pages can opt into if they have fixed bars. */
.fmn-safe-top    { padding-top:    env(safe-area-inset-top); }
.fmn-safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ---- Install banner ---------------------------------------------------- */
#fmn-install-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 2147483000;
  display: none;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .28);
  border-radius: 16px;
  padding: 12px 14px;
  font-family: inherit;
  animation: fmn-slide-up .28s ease;
}
#fmn-install-banner.fmn-show { display: flex; }
@keyframes fmn-slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

#fmn-install-banner .fmn-ib-icon {
  width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; object-fit: cover;
  box-shadow: 0 6px 16px -8px rgba(234, 88, 12, .6);
}
#fmn-install-banner .fmn-ib-text { flex: 1 1 auto; min-width: 0; }
#fmn-install-banner .fmn-ib-title { font-size: 13.5px; font-weight: 800; color: #0f172a; margin: 0 0 1px; }
#fmn-install-banner .fmn-ib-sub { font-size: 11.5px; color: #64748b; margin: 0; line-height: 1.35; }
#fmn-install-banner .fmn-ib-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#fmn-install-banner button {
  border: 0; cursor: pointer; font-family: inherit; font-weight: 800; border-radius: 10px;
}
#fmn-install-banner .fmn-ib-install {
  background: #ea580c; color: #fff; font-size: 12.5px; padding: 9px 14px;
}
#fmn-install-banner .fmn-ib-install:active { transform: translateY(1px); }
#fmn-install-banner .fmn-ib-close {
  background: transparent; color: #94a3b8; font-size: 18px; line-height: 1; padding: 6px 8px;
}

/* iOS "how to install" sheet */
#fmn-ios-help {
  position: fixed; inset: 0; z-index: 2147483001; display: none;
  align-items: flex-end; justify-content: center;
  background: rgba(15, 23, 42, .45);
  padding: 0 12px calc(14px + env(safe-area-inset-bottom));
  font-family: inherit;
}
#fmn-ios-help.fmn-show { display: flex; }
#fmn-ios-help .fmn-ios-card {
  background: #fff; border-radius: 18px; padding: 20px 18px 22px; max-width: 420px; width: 100%;
  box-shadow: 0 -10px 40px -8px rgba(15, 23, 42, .35); animation: fmn-slide-up .28s ease;
}
#fmn-ios-help h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #0f172a; }
#fmn-ios-help p { margin: 0 0 14px; font-size: 13px; color: #64748b; line-height: 1.5; }
#fmn-ios-help ol { margin: 0; padding-left: 18px; }
#fmn-ios-help li { font-size: 13.5px; color: #0f172a; margin-bottom: 9px; line-height: 1.45; }
#fmn-ios-help .fmn-ios-share { color: #ea580c; font-weight: 800; }
#fmn-ios-help .fmn-ios-done {
  margin-top: 8px; width: 100%; background: #0f172a; color: #fff; border: 0; border-radius: 12px;
  font-weight: 800; font-size: 13.5px; padding: 12px; cursor: pointer;
}