/* 
#selection-panel.carousel {
  display: flex !important;
  justify-content: center !important; 
  align-items: center !important;
  overflow-x: hidden !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
} */

.carousel-item {
  margin: 5px !important; 
  padding: 5px !important; 
  width: auto !important; 
  display: inline-block !important; 
}

.selection-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center;
  flex-direction: row !important;
  margin: 10px;
}

.selectable-image {
  flex: 0 1 0;
  border-radius: 10px;
  border: 0.5px solid #ccc;  
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); 
  max-height: 46%;
  object-fit: contain;
  padding: 1px;          
  background-color: #dde9f7;   
  margin: 1% 5px 1% 5px;
  cursor: pointer;
}

#enlarged-image {
  max-height: 600px;
  max-width: 600px;
  max-width: 80%;
  z-index: 100;
  box-sizing: content-box; 
  position: fixed;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  background-color: white;
  pointer-events: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  transition: opacity 0.3s;
  opacity: 0%;
}

.selectable-image:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


.selectable-image.selected {
  border: 3px solid #4a7aa5; 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
}

/* Demo Examples 分页面板中的图片尺寸 */
#comparisonSelectionPanel .selectable-image {
  width: calc(25% - 12px);  /* 每行4张 */
  max-height: 120px;
  flex: 0 0 auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* Panorama 分页面板中的图片尺寸 */
#panoComparisonSelectionPanel .selectable-image,
#panoGallerySelectionPanel .selectable-image {
  width: calc(25% - 12px);  /* 每行4张（全景图较宽） */
  max-height: 100px;
  flex: 0 0 auto;
  object-fit: cover;
  aspect-ratio: 2/1;
}

/* 图片+名称标签容器 */
.selectable-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin: 1% 5px 1% 5px;
}

.selectable-item .selectable-image {
  margin: 0;  /* 容器已有 margin，图片不再需要 */
}

.selectable-item .image-label {
  font-size: 9px;
  color: #555;
  text-align: center;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  word-break: break-all;
}

/* 容器内的图片在 Demo Examples 面板中的尺寸 */
#comparisonSelectionPanel .selectable-item {
  width: calc(25% - 12px);
  flex: 0 0 auto;
}

#comparisonSelectionPanel .selectable-item .selectable-image {
  width: 100%;
  max-height: 120px;
  flex: 0 0 auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* Perspective Gallery 面板中的图片尺寸 */
#perspGallerySelectionPanel .selectable-image {
  width: calc(25% - 12px);  /* 每行4张 */
  max-height: 120px;
  flex: 0 0 auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

#perspGallerySelectionPanel .selectable-item {
  width: calc(25% - 12px);
  flex: 0 0 auto;
}

#perspGallerySelectionPanel .selectable-item .selectable-image {
  width: 100%;
  max-height: 120px;
  flex: 0 0 auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* 容器内的图片在 Panorama 面板中的尺寸（通用） */
#panoComparisonSelectionPanel .selectable-item,
#panoGallerySelectionPanel .selectable-item {
  width: calc(25% - 12px);
  flex: 0 0 auto;
}

#panoComparisonSelectionPanel .selectable-item .selectable-image,
#panoGallerySelectionPanel .selectable-item .selectable-image {
  width: 100%;
  max-height: 100px;
  flex: 0 0 auto;
  object-fit: cover;
  aspect-ratio: 2/1;
}