/* Mobile Responsive Styles for 88Days Map */

/* Viewport settings for better mobile performance */
@viewport {
  width: device-width;
  zoom: 1.0;
}

/* Mobile-first responsive design */
@media screen and (max-width: 768px) {
  /* Optimize map container for mobile */
  #map {
    height: 100vh;
    width: 100vw;
    /* Enable hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Optimize rendering */
    will-change: transform;
  }

  /* Optimize search container for mobile */
  #search-container {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    transform: none;
    width: auto;
    max-width: calc(100vw - 20px);
  }

  #search-input {
    width: 100%;
    max-width: none;
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px;
  }

  /* Mobile-optimized legend */
  #legend {
    position: fixed;
    top: 70px;
    left: 10px;
    right: 10px;
    max-width: none;
    width: auto;
    max-height: 40vh;
    overflow-y: auto;
    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;
  }

  .legend-item {
    padding: 12px 8px;
    margin: 4px 0;
    /* Larger touch targets */
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Mobile-optimized info panel */
  #info-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    max-width: none;
    border-radius: 15px 15px 0 0;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .info-title {
    font-size: 18px;
    margin-bottom: 15px;
    padding-right: 30px; /* Space for close button */
  }

  .close-btn {
    font-size: 24px;
    padding: 5px;
    position: absolute;
    top: 15px;
    right: 15px;
    /* Larger touch target */
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Visitor stats - position for mobile */
  #visitor-stats {
    position: fixed;
    bottom: 10px;
    right: 10px;
    left: auto;
    font-size: 11px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.95);
  }

  /* Loading overlay optimizations */
  #loading-overlay {
    /* Prevent scrolling on mobile */
    position: fixed;
    overflow: hidden;
  }

  .loading-text {
    font-size: 16px;
    text-align: center;
    padding: 0 20px;
  }

  /* Button optimizations for mobile */
  .btn-primary {
    padding: 12px 20px;
    font-size: 16px;
    min-height: 44px; /* Minimum touch target size */
    border-radius: 8px;
  }

  /* Search results optimization */
  #search-results {
    max-height: 30vh;
    border-radius: 0 0 8px 8px;
  }

  .search-result {
    padding: 12px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    /* Larger touch targets */
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* High DPI displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  /* Optimize for retina displays */
  .legend-color {
    border-width: 0.5px;
  }
  
  .spinner {
    border-width: 2px;
  }
}

/* Landscape orientation on mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
  #legend {
    max-height: 30vh;
    font-size: 12px;
  }
  
  #info-panel {
    max-height: 40vh;
  }
  
  #search-container {
    top: 5px;
  }
}

/* Very small screens */
@media screen and (max-width: 480px) {
  #search-input {
    font-size: 16px;
    padding: 10px;
  }
  
  .legend-item {
    font-size: 12px;
    padding: 10px 6px;
  }
  
  .info-title {
    font-size: 16px;
  }
  
  .info-content {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* Reduce animations on mobile for better performance */
@media screen and (max-width: 768px) {
  .legend-item,
  .search-result {
    transition: background-color 0.2s ease;
    /* Remove transform animations that can cause performance issues */
  }
  
  .legend-item:hover {
    transform: none;
  }
  
  /* Disable hover effects on touch devices */
  .legend-item:hover,
  .search-result:hover,
  .btn-primary:hover {
    background: initial;
  }
  
  /* Enable active states for touch */
  .legend-item:active {
    background: #f0f0f0;
  }
  
  .search-result:active {
    background: #f0f0f0;
  }
  
  .btn-primary:active {
    background: #357abd;
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  #map {
    /* Fix iOS Safari viewport issues */
    height: -webkit-fill-available;
  }
  
  /* Prevent elastic scrolling */
  body {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  
  /* Fix input zoom issues */
  input[type="text"] {
    font-size: 16px !important;
  }
}