/* Safe Area Insets for Mobile Browsers and PWAs */
:root {
  /* Safe area insets with fallbacks */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}

/* Apply safe area padding to the root element */
html {
  /* For browsers that don't support env() */
  padding: 0;
  
  /* Apply safe area insets */
  padding: 
    var(--safe-area-top) 
    var(--safe-area-right) 
    var(--safe-area-bottom) 
    var(--safe-area-left);
  
  /* Ensure the padding is included in the element's total width and height */
  box-sizing: border-box;
}

/* Ensure the body takes full height and accounts for safe areas */
body {
  /* Ensure the body takes at least the full viewport height */
  min-height: 100vh;
  min-height: -webkit-fill-available; /* For mobile viewport height bug */
  
  /* Prevent horizontal scrolling */
  overflow-x: hidden;
  
  /* Account for safe areas in the minimum height */
  min-height: calc(100vh - var(--safe-area-top) - var(--safe-area-bottom));
}

/* Fix for iOS 15+ where 100vh includes the address bar */
@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

/* Ensure full viewport elements respect safe areas */
.full-viewport {
  width: 100vw;
  height: 100vh;
  padding: 
    env(safe-area-inset-top, 0px) 
    env(safe-area-inset-right, 0px) 
    env(safe-area-inset-bottom, 0px) 
    env(safe-area-inset-left, 0px);
}

/* Utility classes for safe area padding */
.safe-padding {
  padding: 
    env(safe-area-inset-top, 0px) 
    env(safe-area-inset-right, 0px) 
    env(safe-area-inset-bottom, 0px) 
    env(safe-area-inset-left, 0px);
}

.safe-padding-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-padding-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Fix for fixed/fullscreen elements */
.fixed-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 
    env(safe-area-inset-top, 0px) 
    env(safe-area-inset-right, 0px) 
    env(safe-area-inset-bottom, 0px) 
    env(safe-area-inset-left, 0px);
  width: 100%;
  height: 100%;
  overflow: hidden;
}