/* gif-popup.css */

.gif-trigger {
  color: inherit;/* 繼承父元素的顏色，使其與周邊文字一致 */
  cursor: pointer;
  text-decoration: none;    /* 移除底線 */
}
/* 選擇性：如果你希望滑鼠移上去時有一點視覺回饋，可以加入下面這段 */
.gif-trigger:hover {
  opacity: 0.8;             /* 稍微變淡一點點 */
}

.gif-modal {
  display: none;
  position: fixed;
  z-index: 10000; /* 提高層級，避免被其他元素擋住 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 加深遮罩顏色 */
  justify-content: center;
  align-items: center;
  
  /* 關鍵：防止手機版出現水平位移 */
  overflow: hidden; 
  touch-action: none; 
}

/* 2. 修改內容容器，建議捨棄 vw 改用 % */
.gif-modal-content {
  background-color: rgba(0, 0, 0, 0.85);
  padding: 15px;
  border-radius: 12px;
  text-align: center;
  position: relative;
  
  /* 關鍵修正：確保寬度計算包含 padding */
  box-sizing: border-box; 
  width: 85%;      /* 改成 85% 在手機上更保險 */
  max-width: 400px; /* 電腦版維持最大寬度 */
  
  /* 確保在手機上不會因為 Flexbox 偏移 */
  margin: auto; 
}

/* 3. 確保圖片不會超出容器 */
#gifImage {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh; /* 防止長圖超出螢幕高度 */
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* 下方按鈕群組 */
/* 4. 確保按鈕群組寬度正常 */
.gif-button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 按鈕樣式 (圓形或圓角) */
.gif-btn {
  background: #333;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s;
}

.gif-btn:hover {
  background: #555;
}

.gif-btn svg {
  width: 24px;
  height: 24px;
  fill: white;
}