/* Mobile-specific CSS fixes for UniTalks */

/* Prevent horizontal scrolling on mobile */
html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Fix viewport issues on mobile */
@media (max-width: 768px) {
  /* Ensure proper touch targets */
  button, a, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Fix video element sizing */
  video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
  
  /* Prevent zoom on input focus */
  input, select, textarea {
    font-size: 16px;
  }
  
  /* Fix fixed positioning issues */
  .fixed-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
  }
  
  /* Ensure proper spacing for mobile */
  .mobile-padding {
    padding: 1rem !important;
  }
  
  /* Fix flexbox issues on mobile */
  .mobile-flex-column {
    flex-direction: column !important;
  }
  
  /* Prevent text selection on UI elements */
  .no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Fix touch scrolling */
  .scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  
  /* Ensure proper button spacing */
  .mobile-button-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Fix modal and overlay positioning */
  .modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
  }
  
  /* Fix sidebar positioning */
  .mobile-sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: 60px !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    z-index: 9999 !important;
  }
  
  /* Fix video container sizing */
  .mobile-video-container {
    width: 100% !important;
    max-width: 100vw !important;
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  
  /* Fix header positioning */
  .mobile-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  }
  
  /* Add safe area padding for devices with notches */
  .safe-area-padding {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    /* Fix iOS Safari viewport issues */
    .ios-fix {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
    
    /* Fix iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
      font-size: 16px !important;
    }
  }
}

/* Android specific fixes */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  /* Fix Android Chrome issues */
  .android-fix {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}