/* --- 灯箱基础样式 --- */
#custom-lightbox {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* 半透明黑色背景 */

  /* 关键：初始状态透明且缩小 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease; /* 平滑过渡 */

  /* --- 优化 2: 移动端缩放优化 --- */
  /* 禁止浏览器默认的触摸缩放行为，只允许灯箱库自己的缩放 */
  touch-action: manipulation; /* 或者 touch-action: none; 如果灯箱库完全控制 */
  /* --- 优化 2 结束 --- */
}

/* 灯箱内容容器 */
.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  /* 关键：初始状态透明且缩小 */
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.3s ease, opacity 0.3s ease; /* 平滑过渡 */

  /* --- 优化 2: 移动端缩放优化 (补充) --- */
  touch-action: manipulation;
  /* --- 优化 2 结束 --- */
}

/* 灯箱打开时的背景样式 */
#custom-lightbox.lightbox-open {
  opacity: 1;
  visibility: visible;
}

/* 灯箱打开时的内容样式 */
#custom-lightbox.lightbox-open .lightbox-content {
  opacity: 1;
  transform: scale(1);
}

/* 灯箱图片 */
#lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  /* --- 优化 1: 移除边框和阴影 --- */
  /*
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  */
  /* --- 优化 1 结束 --- */
  cursor: zoom-out; /* 提示用户可以点击关闭 */
}

/* --- 优化 1: 隐藏关闭按钮 --- */
#lightbox-close {
  display: none !important; /* 彻底隐藏关闭按钮 */
}
/* --- 优化 1 结束 --- */

/* 信息文字样式 */
.lightbox-info {
  color: #fff;
  text-align: center;
  margin-top: 15px;
  font-size: 16px;
  max-width: 80%;
  word-wrap: break-word;
  /* --- 微调：确保信息文字也能垂直居中 --- */
  margin: 15px auto 0 auto;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .lightbox-info {
    font-size: 14px;
    max-width: 95%;
  }

  #lightbox-image {
    max-height: 70vh;
    cursor: pointer; /* 或者保持 zoom-out */
  }
}