/* PWA Safe Area Utilities and Styles */

/* ============================================
   SAFE AREA INSETS FOR PWA STANDALONE MODE
   ============================================ */

:root {
  /* CSS Variables for safe area insets */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  
  /* Backwards compatibility for older iOS */
  --sat-legacy: constant(safe-area-inset-top, 0px);
  --sar-legacy: constant(safe-area-inset-right, 0px);
  --sab-legacy: constant(safe-area-inset-bottom, 0px);
  --sal-legacy: constant(safe-area-inset-left, 0px);
}

/* ============================================
   PWA SAFE AREA TOP SPACER
   ============================================ */

.pwa-safe-area-top {
  height: var(--sat);
  min-height: 0;
  display: none;
  background: inherit;
  position: relative;
  z-index: 50;
}

/* Show spacer only in PWA standalone mode */
@media (display-mode: standalone), 
       (display-mode: fullscreen),
       (display-mode: minimal-ui) {
  .pwa-safe-area-top {
    display: block;
  }
}

/* ============================================
   BODY ADJUSTMENTS FOR PWA
   ============================================ */

/* Prevent content from going under status bar/notch in PWA mode */
@media (display-mode: standalone) {
  body {
    /* Legacy iOS support */
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    
    /* Modern syntax */
    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);
  }
}

/* ============================================
   HEADER SAFE AREA ADJUSTMENTS
   ============================================ */

/* Ensure header respects safe area */
@supports (padding: max(0px)) {
  header.safe-top {
    padding-top: max(0.75rem, env(safe-area-inset-top));
  }
  
  @media (min-width: 640px) {
    header.safe-top {
      padding-top: max(1rem, env(safe-area-inset-top));
    }
  }
}

/* Additional header spacing for notched devices in PWA mode */
@media (display-mode: standalone) and (max-width: 768px) {
  header.safe-top {
    position: sticky;
    top: 0;
  }
  
  /* Prevent header overlap with status bar */
  .pwa-safe-area-top {
    min-height: 20px; /* Minimum spacing even if env() returns 0 */
  }
  
  /* iPhone X and newer with notch */
  @supports (padding-top: constant(safe-area-inset-top)) {
    .pwa-safe-area-top {
      min-height: constant(safe-area-inset-top);
    }
  }
  
  @supports (padding-top: env(safe-area-inset-top)) {
    .pwa-safe-area-top {
      min-height: env(safe-area-inset-top);
    }
  }
}

/* ============================================
   FIXED ELEMENTS SAFE AREA
   ============================================ */

/* For fixed position elements like floating buttons */
.safe-fixed-top {
  top: var(--sat);
}

/* Floating filter button - positioned below header */
.safe-fixed-top-filter {
  /* Default position: 8rem (128px) from top */
  top: 8rem;
}

/* In PWA mode, add safe area offset to avoid status bar overlap */
@media (display-mode: standalone) {
  .safe-fixed-top-filter {
    top: calc(8rem + env(safe-area-inset-top, 0px));
  }
  
  /* Additional adjustment for devices with notch */
  @supports (top: constant(safe-area-inset-top)) {
    .safe-fixed-top-filter {
      top: calc(8rem + constant(safe-area-inset-top, 0px));
    }
  }
}

.safe-fixed-bottom {
  bottom: var(--sab);
}

.safe-fixed-left {
  left: var(--sal);
}

.safe-fixed-right {
  right: var(--sar);
}

/* ============================================
   INSTALL PWA PROMPT ADJUSTMENTS
   ============================================ */

/* Ensure PWA install prompt doesn't overlap with status bar */
@media (display-mode: standalone) {
  .pwa-install-modal {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ============================================
   CART SIDEBAR ADJUSTMENTS
   ============================================ */

/* Ensure cart sidebar respects safe areas */
.cart-sidebar {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================
   DEVICE-SPECIFIC ADJUSTMENTS
   ============================================ */

/* iPhone X, XS, 11 Pro (375x812) */
@media only screen 
  and (device-width: 375px) 
  and (device-height: 812px) 
  and (-webkit-device-pixel-ratio: 3)
  and (display-mode: standalone) {
  .pwa-safe-area-top {
    min-height: 44px; /* Status bar height for iPhone X */
  }
}

/* iPhone XR, 11 (414x896) */
@media only screen 
  and (device-width: 414px) 
  and (device-height: 896px) 
  and (-webkit-device-pixel-ratio: 2)
  and (display-mode: standalone) {
  .pwa-safe-area-top {
    min-height: 44px;
  }
}

/* iPhone 12, 13, 14 (390x844) */
@media only screen 
  and (device-width: 390px) 
  and (device-height: 844px) 
  and (-webkit-device-pixel-ratio: 3)
  and (display-mode: standalone) {
  .pwa-safe-area-top {
    min-height: 47px; /* Slightly taller status bar */
  }
}

/* iPhone 14 Pro Max, 15 Pro Max (430x932) */
@media only screen 
  and (device-width: 430px) 
  and (device-height: 932px) 
  and (-webkit-device-pixel-ratio: 3)
  and (display-mode: standalone) {
  .pwa-safe-area-top {
    min-height: 59px; /* Dynamic Island area */
  }
}

/* ============================================
   ANDROID SAFE AREA HANDLING
   ============================================ */

/* Android devices with notch/camera cutout */
@media (display-mode: standalone) and (orientation: portrait) {
  @supports (padding-top: env(safe-area-inset-top)) {
    .pwa-safe-area-top {
      background: linear-gradient(to bottom, rgba(240, 240, 240, 1) 0%, rgba(240, 240, 240, 0.95) 100%);
    }
  }
}

/* ============================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ============================================ */

@media (display-mode: standalone) and (orientation: landscape) {
  .pwa-safe-area-top {
    min-height: 0; /* Less spacing needed in landscape */
  }
  
  /* But still respect device safe areas */
  @supports (padding-top: env(safe-area-inset-top)) {
    .pwa-safe-area-top {
      height: env(safe-area-inset-top);
    }
  }
}

/* ============================================
   DEBUGGING HELPERS (Remove in production)
   ============================================ */

/* Uncomment to visualize safe areas during development */
/*
@media (display-mode: standalone) {
  .pwa-safe-area-top {
    background: rgba(255, 0, 0, 0.2) !important;
    border-bottom: 2px dashed red;
  }
  
  .pwa-safe-area-top::after {
    content: 'Safe Area: ' attr(data-height);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 10px;
    font-weight: bold;
  }
}
*/

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Add padding to respect safe areas */
.safe-padding-top {
  padding-top: env(safe-area-inset-top) !important;
}

.safe-padding-bottom {
  padding-bottom: env(safe-area-inset-bottom) !important;
}

.safe-padding-left {
  padding-left: env(safe-area-inset-left) !important;
}

.safe-padding-right {
  padding-right: env(safe-area-inset-right) !important;
}

/* Add margin to respect safe areas */
.safe-margin-top {
  margin-top: env(safe-area-inset-top) !important;
}

.safe-margin-bottom {
  margin-bottom: env(safe-area-inset-bottom) !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .pwa-safe-area-top {
    display: none !important;
  }
}