/* 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: 9999;
inset: 0;
	background-color: rgba(0,0,0,0.4);
	display: flex;
  justify-content: center;
  align-items: center;
}

.gif-modal-content {
  background-color: rgba(0,0,0,0.8); 
  padding: 15px; /* 增加一點邊距放按鈕 */
  border-radius: 12px;
  text-align: center;
  position: relative;
	box-sizing: border-box;
  width: 90vw;
max-width: 400px;
}

#gifImage {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* 下方按鈕群組 */
.gif-button-group {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 20px; /* 按鈕間距 */
}

/* 按鈕樣式 (圓形或圓角) */
.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;
}