/* iOS PWA Specific Fixes */

/* Fix for iOS viewport issues */
:root {
  --vh: 1vh;
}

/* iOS PWA specific styles */
.ios-pwa {
  /* Hide address bar completely */
  -webkit-appearance: none;
}

.ios-pwa body {
  /* Use custom viewport height */
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Fix for iOS input zoom - EXCLUDE checkboxes and radio buttons */
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  font-size: 16px !important;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Fix for iOS button styling */
button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Ensure checkboxes and radio buttons work properly */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  font-size: inherit !important;
}

/* Prevent iOS bounce scroll - ONLY when running as PWA */
.ios-pwa body {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 100%;
  /* Remove side padding that causes margins */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ios-pwa #root {
  overflow: visible;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  /* Ensure full width */
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Normal scroll for web browser */
body:not(.ios-pwa) {
  position: relative;
  overflow: auto;
}

/* iOS safe area insets - ONLY for PWA mode */
@supports (padding: max(0px)) {
  .ios-pwa .safe-area-top {
    padding-top: max(0px, env(safe-area-inset-top));
  }
  
  .ios-pwa .safe-area-bottom {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  
  /* Don't add side padding in PWA mode */
  .ios-pwa .safe-area-left {
    padding-left: 0;
  }
  
  .ios-pwa .safe-area-right {
    padding-right: 0;
  }
}

/* Fix for iOS status bar in PWA */
@media (display-mode: standalone) {
  body {
    /* Only top padding for status bar, no sides */
    padding-top: env(safe-area-inset-top);
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure sticky elements work in PWA */
  .sticky, [style*="position: sticky"], [class*="sticky"] {
    position: -webkit-sticky !important;
    position: sticky !important;
    z-index: 100;
  }
}

/* iOS specific loading screen */
.ios-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1D5C69;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ios-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}