/* Image Viewer Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Image Loading States */
#image-viewer-modal img {
  transition: opacity 0.3s ease-in-out;
}

/* Prevent image selection/drag */
#image-viewer-modal img {
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* Smooth transitions for viewer controls */
#image-viewer-modal button {
  transition: all 0.2s ease;
}

#image-viewer-modal button:active {
  transform: scale(0.95);
}

/* Line clamp utility for product names */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Truncate text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Z-Index Management for Proper Layering */
/* Layer 1: Base content (z-index: 1-9) */
/* Layer 2: Maps and content overlays (z-index: 10-29) */
/* Layer 3: Bottom Navigation (z-index: 50) */
/* Layer 4: Modals and overlays (z-index: 100+) */

/* Leaflet Map Container - below bottom navigation */
.leaflet-container {
  z-index: 10 !important;
}

.leaflet-pane {
  z-index: 400 !important;
}

.leaflet-tile-pane {
  z-index: 200 !important;
}

.leaflet-overlay-pane {
  z-index: 400 !important;
}

.leaflet-shadow-pane {
  z-index: 500 !important;
}

.leaflet-marker-pane {
  z-index: 600 !important;
}

.leaflet-tooltip-pane {
  z-index: 650 !important;
}

.leaflet-popup-pane {
  z-index: 700 !important;
}

.leaflet-map-pane {
  z-index: 10 !important;
}

.leaflet-control {
  z-index: 800 !important;
}

/* Map Containers */
#map-container,
#taxi-map,
#delivery-map,
#food-delivery-map,
#service-map,
.map-view {
  position: relative;
  z-index: 10 !important;
  height: 400px;
  width: 100%;
}

/* Bottom Navigation - Always on top of maps */
#bottom-nav {
  z-index: 50 !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Modals - Higher than everything */
.modal,
[role="dialog"],
.fixed.inset-0 {
  z-index: 100 !important;
}

/* Toasts and Notifications */
.toast,
.notification {
  z-index: 150 !important;
}