/* Mobile Back Button Overlap Fix */

/* Reset body positioning and add proper safe areas */
body {
    font-family: ubuntu, sans-serif;
    font-size: 13px;
    background-color: #f0f2f5;
    margin: 0;
    padding: 0;
    /* Use safe area insets for mobile devices */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    /* Prevent horizontal scrolling */
    overflow-x: hidden;
    /* Ensure proper viewport handling */
    -webkit-overflow-scrolling: touch;
}

/* Fix the app header positioning */
.app-header {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    /* Add backdrop for better visibility */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Main content container adjustments */
.osahan-home-page {
    /* Add top margin to account for fixed header */
    margin-top: calc(116px - env(safe-area-inset-top, 0px));
    min-height: 100vh;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

/* Footer positioning fix */
.osahan-menu-fotter {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0);
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e0e0e0;
    z-index: 999;
    /* Ensure it doesn't interfere with gestures */
    touch-action: manipulation;
}

/* Account page fixes */
.osahan-account {
    /* margin-top: calc(116px + env(safe-area-inset-top, 0px)); */
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

/* Sign in/up page fixes */
.osahan-signin,
.osahan-signup {
    margin-top: calc(60px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

/* Back button in headers - ensure it's not in gesture area */
.back-page {
    font-size: 19px;
    vertical-align: bottom;
    /* Add minimum touch target size */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Ensure it's not too close to screen edge */
    margin-left: 8px;
}

/* Modal fixes for mobile */
.modal {
    /* Ensure modals respect safe areas */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.modal-content {
    /* Add safe area padding to modal content */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Loading overlay fixes */
#lod1 {
    /* Ensure loading overlay covers safe areas */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 9999;
}

/* Prevent content from going under notches on newer phones */
@supports (padding: max(0px)) {
    body {
        padding-left: max(env(safe-area-inset-left), 0px);
        padding-right: max(env(safe-area-inset-right), 0px);
    }

    .app-header {
        padding-left: max(env(safe-area-inset-left), 16px);
        padding-right: max(env(safe-area-inset-right), 16px);
    }

    .osahan-menu-fotter {
        padding-left: max(env(safe-area-inset-left), 0px);
        padding-right: max(env(safe-area-inset-right), 0px);
        padding-bottom: max(env(safe-area-inset-bottom), 8px);
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {

    /* iOS Safari specific adjustments */
    body {
        /* Prevent bounce scrolling */
        -webkit-overflow-scrolling: touch;
        /* Prevent zoom on input focus */
        -webkit-text-size-adjust: 100%;
    }

    /* Prevent iOS from adding margins */
    .app-header {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}



/* Android specific fixes */
@media screen and (max-width: 768px) {

    /* Ensure proper viewport on Android */
    .osahan-home-page {
        /* Account for Android navigation bar */
        padding-bottom: calc(70px + 20px);
    }

    /* Adjust for Android back gesture area */
    .back-page {
        margin-left: 16px;
    }
}

/* SIMPLE MOBILE NAVIGATION FIX */

/* Mobile specific fixes */
@media (max-width: 768px) {
  /* Fix body scrolling */
  body {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    scroll-behavior: auto;
  }
  
  /* Prevent auto-scroll */
  html, body {
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Simple component layout */
  app-home, app-signin, app-signup, app-landing,
  app-listing, app-product-details, app-cart,
  app-my-account, app-notification {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #f0f2f5;
    overflow-y: auto;
  }
  
  /* Page content layout */
   .osahan-home-page
   {
       position: relative;
       background: #f0f2f5;
       min-height: 100vh;
       padding-top: 0px;
   }
 .osahan-my_address{
margin-top: 72px;
 }
  .osahan-my_address1 {
      margin-top: 0px;
  }
  .osahan-account,
  .osahan-signin,
  .osahan-signup {
    position: relative;
    background: #f0f2f5;
    min-height: 100vh;
    padding-top: 15px;
  }
  .osahan-verification
    {
        margin-top: 115px;
    }
  
  /* Header positioning */
  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
  }
}

/* Router outlet */
router-outlet {
  display: block;
}

/* Landscape orientation fixes */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .osahan-home-page {
        margin-top: calc(80px + env(safe-area-inset-top, 0px));
    }

    .app-header {
        padding: 8px 16px;
    }
}

/* High DPI screen adjustments */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .back-page {
        /* Ensure crisp rendering on high DPI screens */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

  :root {
      --safe-bottom: env(safe-area-inset-bottom);
  }

  body {
      padding-bottom: var(--safe-bottom);
  }
  .fixed-bottom {
    padding-bottom: env(safe-area-inset-bottom);
        height: calc(50px + env(safe-area-inset-bottom));
            bottom: 0px;
  }