/*
 * SaloCart V5.2.7 — Mobile dialog + navigation hardening
 * Final mobile interaction layer: correct visual-viewport sizing, stable page
 * lock, safe keyboard behavior, and a single reliable dialog scroll surface.
 */

:root {
  --sc-modal-vv-height: 100dvh;
  --sc-modal-vv-top: 0px;
  --sc-modal-vv-left: 0px;
}

/* Never leave an empty full-screen root interactive above the application. */
#modal-root {
  pointer-events: none !important;
  visibility: hidden;
}

#modal-root.is-open {
  pointer-events: auto !important;
  visibility: visible;
}

/* Override the legacy inset lock. Using top tied to the saved scroll position
   stops the document from jumping to the top when a sheet opens or closes. */
html.sc-modal-open body.sc-modal-locked {
  inset: auto !important;
  top: var(--sc-lock-top, 0px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  padding-right: var(--sc-lock-scrollbar, 0px) !important;
}


/* One stable overlay that follows the browser visual viewport. This keeps the
   active field and bottom-sheet actions above the on-screen keyboard. */
#modal-root .modal-backdrop-sc {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: var(--sc-modal-vv-top, 0px) auto auto var(--sc-modal-vv-left, 0px) !important;
  width: 100vw !important;
  min-width: 0 !important;
  height: var(--sc-modal-vv-height, 100dvh) !important;
  min-height: 0 !important;
  max-height: var(--sc-modal-vv-height, 100dvh) !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y;
}

#modal-root .modal-sheet,
#modal-root .modal-sheet.cart-sheet,
#modal-root .cart-sheet {
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: min(760px, calc(var(--sc-modal-vv-height, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  contain: layout paint style;
}

#modal-root .sheet-head {
  flex: 0 0 auto !important;
}

#modal-root .sheet-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y;
}

/* Avoid showing a second floating layer while the application itself is inert. */
body.sc-modal-locked .mobile-nav {
  display: none !important;
}

@media (max-width: 991.98px) {
  #modal-root .modal-backdrop-sc {
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  #modal-root .modal-sheet,
  #modal-root .modal-sheet.cart-sheet,
  #modal-root .cart-sheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(var(--sc-modal-vv-height, 100dvh) - max(8px, env(safe-area-inset-top))) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  /* A focused mobile input stays inside a sheet that has shrunk for the keyboard. */
  #modal-root .modal-sheet:focus-within {
    max-height: calc(var(--sc-modal-vv-height, 100dvh) - max(4px, env(safe-area-inset-top))) !important;
  }

  #modal-root .sheet-head {
    position: sticky !important;
    top: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
  }

  #modal-root .sheet-body {
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  /* Auth stays intentionally compact, but must still follow a raised keyboard. */
  #modal-root .auth-sheet {
    max-height: calc(var(--sc-modal-vv-height, 100dvh) - max(16px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
    margin-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 575.98px) {
  #modal-root .modal-sheet,
  #modal-root .modal-sheet.cart-sheet,
  #modal-root .cart-sheet {
    max-height: calc(var(--sc-modal-vv-height, 100dvh) - max(4px, env(safe-area-inset-top))) !important;
  }

  /* Keep system notices clear of keyboard and top browser chrome too. */
  #notice-root {
    min-height: var(--sc-modal-vv-height, 100svh) !important;
    height: var(--sc-modal-vv-height, 100svh) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #modal-root,
  #modal-root .modal-backdrop-sc,
  #modal-root .modal-sheet,
  #modal-root .cart-sheet {
    scroll-behavior: auto !important;
  }
}