/******
  * @name: colorbox_燈箱
  * @author: openAI
  * @version: 1.0.4
  * @update: 2025/11/28
******/

/* =========================
   背景遮罩
   ========================= */
.popup-cb-overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
  display: none;
}

/* =========================
   外層容器（全螢幕覆蓋）
   ========================= */
.popup-cb-box {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* 由 jQuery fadeIn/fadeOut 控制顯示 */
}

/* =========================
   內層框（真正的彈出視窗）
   利用 top/left + transform 置中
   ========================= */
.popup-cb-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 90vh;
  background: #fff5e0;
  border-radius: var(--img-radius); /*弧角*/
  overflow: hidden;
}

/* =========================
   通用內容區：圖片 / 表格 / 文字 / HTML / iframe
   ========================= */
.popup-cb-content {
  max-width: 90vw;
  max-height: 80vh;
  overflow: auto;   /* 內容太高時可捲動 */
  background: #fff; /* 表格看起來比較清楚，可自行改色 */
  padding: 20px;
  opacity: 1;
}

/* （預留：若之後要用 class 控制淡入淡出，可配合 JS 切 .is-hidden） */
.popup-cb-content.is-hidden {
  opacity: 0;
}

/* 內容是圖片時 */
.popup-cb-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 內容是 iframe（桌機預設） */
.popup-cb-content iframe {
  width: 100%;      /* 先讓 iframe 吃滿內容寬度 */
  height: 70vh;
  border: 0;
  display: block;
}

/* =========================
   手機版調整
   ========================= */
@media (max-width: 767px) {

  /* 外框寬度固定為 90% 視窗寬度，仍維持置中 */
  .popup-cb-inner {
    width: 90vw;
    max-width: 90vw;
    max-height: 80vh;
  }

  /* 內容不要比外框還寬，避免出現橫向卷軸 */
  .popup-cb-content {
    max-width: 100%;
    max-height: 70vh;
    padding: 8px;
  }

  /* 手機上 iframe 一律 100% 寬，避免橫向捲動 */
  .popup-cb-content iframe {
    width: 100% !important;  /* 蓋掉 iframe 的 width 屬性（含 data-width） */
    height: 65vh;            /* 可依需要調整，例如 50vh 或 60vh */
  }
}

/* =========================
   標題列
   ========================= */
.popup-cb-title {
  padding: 8px 12px;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 110, 55, .5);
}

/* =========================
   按鈕（關閉 / 上一張 / 下一張）
   ========================= */
.popup-cb-close,
.popup-cb-prev,
.popup-cb-next {
  position: absolute;
  top: 10px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 160, .45);
  color: #ff6e37;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 18px;
  transition: background .2s ease, color .2s ease;
}

/* 滑鼠移入 */
.popup-cb-close:hover,
.popup-cb-prev:hover,
.popup-cb-next:hover {
  background: rgba(255, 225, 160, .9);
  color: #ff6e37;
}

/* 按壓狀態（如果之後想加縮放，可以在這邊補 transform） */
.popup-cb-close:active,
.popup-cb-prev:active,
.popup-cb-next:active {
  /* transform: scale(.96); */
}

/* 關閉按鈕（右上角） */
.popup-cb-close {
  right: 10px;
}

/* 上一張（左側置中） */
.popup-cb-prev {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* 下一張（右側置中） */
.popup-cb-next {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* =========================
   Loading 圓圈
   ========================= */
.popup-cb-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--accent);
  animation: popup-spin 1s linear infinite;
  display: none;
}

/* 旋轉動畫 */
@keyframes popup-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}