/* ===============================
   G FUN 匿名聊天室 - Confirm 公告彈窗樣式
   獨立樣式，不影響其他彈窗
   =============================== */

/* 📌 外層遮罩：畫面全罩灰暗背景 */
.confirm-popup-wrapper {
  position: fixed;               /* 固定定位：覆蓋整個螢幕畫面 */
  top: 0;
  left: 0;
  z-index: 9999;                 /* 最上層，確保遮罩優先顯示 */
  width: 100vw;                  /* 寬度填滿螢幕 */
  height: 100vh;                 /* 高度填滿螢幕 */
  background: rgba(0, 0, 0, 0.8);/* 黑色半透明背景 */
  display: none;                 /* 預設隱藏，觸發後才顯示 */
  justify-content: center;       /* 水平置中彈窗 */
  align-items: center;           /* 垂直置中彈窗 */
}

/* 📦 彈窗本體樣式 */
.confirm-popup-box {
  background: #111;              /* 深色背景，突顯主題 */
  border: 2px solid gold;        /* 金色外框，呼應品牌色 */
  border-radius: 16px;           /* 圓角，建議範圍 8px～24px */
  width: 70%;                    /* 寬度佔九成，適合電腦版 */
  max-width: 640px;              /* 最大寬度限制，避免過寬，建議 500~720px */
  padding: 25px 30px;            /* 上下 25px、左右 30px 內距，閱讀舒適 */
  color: #fff;                   /* 白字，對比深底 */
  font-family: "Noto Sans TC", sans-serif;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); /* 金色光暈效果 */
  overflow-y: auto;              /* 內容過多可捲動 */
  max-height: 85vh;              /* 不超過視窗 85% 高度，避免溢出 */
}

/* 🏷️ 標題樣式 */
.confirm-popup-box h2 {
  font-size: 24px;               /* 建議 20~28px，視主標層級而定 */
  color: gold;
  text-align: center;
  margin-bottom: 15px;           /* 標題與內文間距，建議 12~20px */
}

/* 📄 區塊通用樣式 */
.confirm-section {
  margin-bottom: 20px;           /* 區塊下方間距，建議 15~30px */
  font-size: 15px;               /* 區塊內文字體，建議 14~16px */
  line-height: 1.6;              /* 行高，建議 1.5~1.8 */
}

/* 🔔 子標題樣式 */
.confirm-section h3 {
  font-size: 17px;               /* 建議 16~20px */
  color: #ffcc00;
  margin-bottom: 8px;            /* 標題與列表間距，建議 6~12px */
}

/* 📌 段落提示兩行的垂直間距 */
.paragraph-gap {
  display: block;                 /* 確保段落有區塊性質 */
  margin-bottom: 5px !important;/* 段落底部間距，建議 8~20px，可依實際視覺微調 */
}

/* 📋 列表設定 */
.confirm-list {
  margin-top: 8px;               /* 列表與標題間距，建議 6~12px */
  padding-left: 20px;            /* 列表項目縮排，建議 16~28px */
}
.confirm-list li {
  list-style-type: disc;         /* 使用圓點標記 */
  margin: 3px 0;                 /* 單項上下間距，建議 2~6px */
}

/* 💎 顯眼色提示（如需） */
.confirm-bonus {
  color: #ff55aa;                /* 粉紅強調色 */
  font-weight: bold;             /* 加粗凸顯重點 */
}

/* 📄 條款連結區塊 */
.confirm-links {
  display: flex;
  justify-content: center;
  gap: 16px;                     /* 🔁 連結水平間距，建議 12～20px */
  margin: 15px auto 5px;         /* 📏 上間距 15px、下 5px，置中 */
  font-size: 14px;               /* 📏 文字大小，建議 13～15px */
}

.confirm-links a {
  color: #ffcc00;                /* 🟡 金黃色字 */
  text-decoration: none;
  font-weight: bold;
}

.confirm-links a:hover {
  text-decoration: underline;    /* 🖱️ 滑過加底線強調 */
}



/* 📢 底部提醒 */
.confirm-footer {
  font-size: 13px;               /* 字體略小 */
  color: #aaa;
  margin-top: 10px;              /* 與內容分隔距離 */
  border-top: 1px dashed #555;   /* 上方虛線分隔線 */
  padding-top: 10px;             /* 分隔線與文字間距 */
  text-align: center;            /* 置中對齊 */
}

/* 🔘 按鈕區塊設定 */
.confirm-button-box {
  display: flex;
  justify-content: center;
  gap: 20px;                     /* 按鈕之間的水平距離，建議 12~24px */
  margin-top: 25px;              /* 與上方內容距離 */
}

/* 🔲 所有按鈕統一樣式 */
.confirm-button-box button {
  padding: 10px 24px;           /* 按鈕內距，上下10px、左右24px */
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;             /* 最小寬度避免太小難點擊 */
}

/* ✅ 確定按鈕樣式 */
#confirm-btn-ok {
  background-color: gold;        /* 金色背景 */
  color: #111;
}
#confirm-btn-ok:hover {
  background-color: #ffcc00;     /* 滑鼠移入改亮金色 */
}

/* ❌ 取消按鈕樣式 */
#confirm-btn-cancel {
  background-color: #333;        /* 深底灰 */
  color: #eee;                   /* 字色偏白 */
  border: 1px solid #777;
}
#confirm-btn-cancel:hover {
  background-color: #555;        /* 滑鼠移入變亮一階 */
}

/* ===============================
   📱 手機版樣式調整（最大寬度 480px 以下）
   =============================== */
@media (max-width: 480px) {
  .confirm-popup-box {
    width: 92vw;                 /* 手機寬度占比可調整為 70~90% */
    max-width: 400px;         /* ✅ 防止在橫向手機過寬 */
    max-height: 75vh;           /* 彈窗高度略縮小，建議 70~80vh */
	padding: 16px 14px;         /* 內距縮小，建議 12~20px */
    font-size: 14.5px;          /* 主體文字建議 14~15.5px */
  }

  .confirm-popup-box h2 {
    font-size: 20px;            /* 標題建議 18~22px */
    margin-bottom: 12px;
  }

  .confirm-section h3 {
    font-size: 15.5px;          /* 子標題建議 14~16px */
    margin-bottom: 6px;
  }

  .confirm-button-box {
    flex-direction: column;     /* 改為上下排列方便手機點擊 */
    gap: 10px;                  /* 垂直間距，建議 8~12px */
    margin-top: 20px;
  }

  .confirm-button-box button {
    width: 100%;                /* 滿寬更好操作 */
    min-width: auto;
    font-size: 16px;            /* 手機按鈕字建議 15~17px */
    padding: 12px 0;            /* 上下更寬範圍，建議 10~14px */
  }

  .confirm-footer {
    font-size: 12.5px;          /* 底部文字略縮小 */
    margin-top: 8px;
  }
}


.overlay-top {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}

.terms-popup-box {
  background: #111;
  border: 2px solid gold;
  border-radius: 12px;
  padding: 25px;
}


.confirm-popup-box::-webkit-scrollbar {
  width: 6px;
}
.confirm-popup-box::-webkit-scrollbar-track {
  background: #222;
}
.confirm-popup-box::-webkit-scrollbar-thumb {
  background-color: gold;
  border-radius: 10px;
}
.confirm-popup-box {
  scrollbar-width: thin;
  scrollbar-color: gold #222;
}
.paragraph-tight {
  margin-top: 0 !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
}
/* ✅ 段落之間分隔的上下空白（前後段落用） */
.paragraph-gap-between {
  margin-top: 10px !important;
}