/* Tree Photo Timeline Styles for Verification Pages */

/* Tree Photo History Styles */
.photo-timeline {
  padding: 10px 0;
}

.photo-item {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.photo-item:hover {
  transform: translateY(-2px);
}

.photo-preview-container {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.photo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.photo-preview-placeholder {
  width: 100%;
  height: 100%;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
}

.photo-item:hover .photo-preview {
  transform: scale(1.05);
}

.age-badge .badge {
  font-size: 10px;
  padding: 4px 6px;
}

.photo-type-indicator .badge {
  padding: 4px 6px;
}

.click-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.photo-item:hover .click-overlay {
  opacity: 1;
}

.click-icon {
  width: 36px;
  height: 36px;
}

/* Photo modal z-index fix for verification pages */
#photoModal {
  z-index: 9999 !important;
  position: fixed !important;
}

.custom-modal-backdrop {
  z-index: 1040 !important;
}

#photoModal .modal-dialog {
  z-index: 10000 !important;
  position: relative;
  margin: 1.75rem auto;
}

body.modal-open {
  overflow: hidden;
}