/* Safe Area Insets for Android & iOS Gesture Navigation */

:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
  --safe-area-inset-left: env(safe-area-inset-left, 0);
  --safe-area-inset-right: env(safe-area-inset-right, 0);
}

html {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile keyboards */
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-left: max(0px, var(--safe-area-inset-left));
  padding-right: max(0px, var(--safe-area-inset-right));
}

/* Bottom navigation & fixed elements that may overlap with gestures */
nav, 
nav[role="navigation"],
.bottom-nav,
.bottom-sheet,
.navbar-bottom,
[data-position="bottom"],
#cartSheet,
#cart-sheet,
#bid-modal,
#phone-modal,
#cart-sheet-overlay,
footer {
  padding-bottom: max(0px, var(--safe-area-inset-bottom));
}

/* Top bar/header with notch support */
header,
[role="banner"],
.navbar-top {
  padding-top: max(0px, var(--safe-area-inset-top));
}

/* Modal overlays should not be affected by safe area */
.modal-overlay,
[role="dialog"],
.dialog-backdrop {
  /* Reset safe area for overlays */
}

/* Forms and scrollable areas */
main,
.container,
.content-area {
  padding-left: max(0px, var(--safe-area-inset-left));
  padding-right: max(0px, var(--safe-area-inset-right));
}

/* Ensure scrollable areas don't get cut off */
.scroll-container,
[data-scrollable="true"] {
  padding-bottom: max(0px, var(--safe-area-inset-bottom));
}