#simple-pwa-popup[hidden] { display: none !important; }
#simple-pwa-popup {
  box-sizing: border-box;
  position: fixed;
  z-index: 2147483000;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  width: min(340px, calc(100% - 24px));
  padding: 14px;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  background: #fff;
  color: #18181b;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .16);
  font: 14px/1.4 system-ui, sans-serif;
  text-align: start;
}
#simple-pwa-popup img { display: block; width: 44px; height: 44px; object-fit: contain; border-radius: 10px; }
#simple-pwa-popup strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
#simple-pwa-popup .simple-pwa-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
#simple-pwa-popup button {
  box-sizing: border-box;
  flex: 1;
  min-height: 42px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 9px;
  background: #f4f4f5;
  color: #27272a;
  font: 500 14px/1.4 system-ui, sans-serif;
  text-transform: none;
  cursor: pointer;
}
#simple-pwa-popup button.simple-pwa-install { background: #18181b; border-color: #18181b; color: #fff; }
#simple-pwa-popup button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

/* Installed-app navigation. Browser pages receive no bar or extra padding. */
#simple-pwa-navigation[hidden] { display: none !important; }
#simple-pwa-navigation {
  box-sizing: border-box;
  position: fixed;
  z-index: 10000;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  padding: 5px max(4px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
  border-top: 1px solid #e4e4e7;
  background: #fff;
  color: #71717a;
  box-shadow: 0 -3px 16px rgba(0,0,0,.04);
  font: 11px/1.3 system-ui, sans-serif;
}
#simple-pwa-navigation a {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 54px;
  margin: 0;
  padding: 5px 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
#simple-pwa-navigation svg { display: block; flex: 0 0 auto; width: 22px; height: 22px; }
#simple-pwa-navigation span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#simple-pwa-navigation a[aria-current="page"] { color: #dc2626; font-weight: 600; }
#simple-pwa-navigation a:focus-visible { outline: 2px solid #dc2626; outline-offset: -2px; }
body.simple-pwa-has-navigation {
  padding-bottom: calc(var(--simple-pwa-page-padding, 0px) + 70px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Keep Solid Megamall's existing Order Help button above the app bar. */
body.simple-pwa-has-navigation #ms-smart-support {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}