/* pwa-standalone.css — styles for installed PWA (standalone display mode) */

@media (display-mode: standalone) {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
  }

  html,
  body {
    height: 100%;
    height: 100dvh;
    overflow-x: hidden;
  }

  /* Side + bottom safe areas only — top offset is handled by header stack below */
  body {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    padding-bottom: var(--safe-bottom);
    overscroll-behavior-y: contain;
    -webkit-user-select: none;
    user-select: text;
  }

  /* Status bar fill — match orange top nav (not white gap) */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--safe-top);
    background: var(--unimart-orange, #f68b1e);
    z-index: 10003;
    pointer-events: none;
  }

  body.has-hybrid-header::before {
    background: var(--unimart-orange, #f68b1e);
  }

  /* Top nav: fixed flush to top, extend through notch */
  .top-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    padding-top: var(--safe-top) !important;
    height: calc(var(--top-nav-height-mobile, 48px) + var(--safe-top)) !important;
    min-height: calc(var(--top-nav-height-mobile, 48px) + var(--safe-top)) !important;
    background: var(--unimart-orange, #f68b1e) !important;
    z-index: 10002 !important;
    box-sizing: border-box;
  }

  @media (min-width: 769px) {
    .top-nav {
      height: calc(var(--top-nav-height-desktop, 50px) + var(--safe-top)) !important;
      min-height: calc(var(--top-nav-height-desktop, 50px) + var(--safe-top)) !important;
    }
  }

  /* Hybrid header stack — include safe-top in body offset */
  body.has-hybrid-header {
    padding-top: calc(var(--top-nav-height-mobile, 48px) + var(--safe-top)) !important;
  }

  body.has-hybrid-header.header-has-search {
    padding-top: calc(var(--top-nav-height-mobile, 48px) + var(--search-bar-height, 60px) + var(--safe-top)) !important;
  }

  body.has-hybrid-header.header-has-search.header-has-categories {
    padding-top: calc(
      var(--top-nav-height-mobile, 48px) + var(--search-bar-height, 60px) + var(--mobile-category-height, 40px) + var(--safe-top)
    ) !important;
  }

  @media (min-width: 769px) {
    body.has-hybrid-header {
      padding-top: calc(var(--top-nav-height-desktop, 50px) + var(--safe-top)) !important;
    }

    body.has-hybrid-header.header-has-search {
      padding-top: calc(var(--top-nav-height-desktop, 50px) + var(--search-bar-height, 60px) + var(--safe-top)) !important;
    }

    body.has-hybrid-header.header-has-search.header-has-categories {
      padding-top: calc(var(--top-nav-height-desktop, 50px) + var(--search-bar-height, 60px) + var(--safe-top)) !important;
    }
  }

  .search-filter-bar {
    position: fixed !important;
    top: calc(var(--top-nav-height-mobile, 48px) + var(--safe-top)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10001 !important;
  }

  @media (min-width: 769px) {
    .search-filter-bar {
      top: calc(var(--top-nav-height-desktop, 50px) + var(--safe-top)) !important;
    }
  }

  body.has-hybrid-header.header-has-search .mobile-category-nav {
    top: calc(var(--top-nav-height-mobile, 48px) + var(--search-bar-height, 60px) + var(--safe-top)) !important;
  }

  /* Bottom nav: respect home indicator */
  .unimart-nav,
  .bottom-nav,
  .confidence-bottom-nav,
  .hybrid-bottom-nav {
    padding-bottom: var(--safe-bottom);
  }

  .content-wrapper {
    min-height: calc(100dvh - var(--top-nav-height-mobile, 48px) - var(--safe-top) - var(--safe-bottom));
  }

  .pwa-install-banner,
  .pwa-install,
  [data-pwa-install],
  .pwa-install-prompt {
    display: none !important;
  }

  .browser-only,
  .desktop-address-bar-hint {
    display: none !important;
  }

  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  button,
  a,
  .bottom-nav-item,
  .nav-links a,
  .top-nav__utilities a {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  .position-fixed,
  #toast-container {
    padding-bottom: var(--safe-bottom);
  }

  .modal-dialog {
    padding-top: var(--safe-top);
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  }
}

html.pwa-standalone body,
body.pwa-standalone {
  overscroll-behavior-y: contain;
}

html.pwa-standalone .pwa-install-banner,
html.pwa-standalone .pwa-install,
html.pwa-standalone [data-pwa-install] {
  display: none !important;
}

html.is-offline .online-only {
  opacity: 0.4;
  pointer-events: none;
}

html.is-offline .offline-hidden {
  display: none !important;
}

html.is-offline .offline-visible {
  display: block !important;
}