/* ============================================================
   MGM 推薦好友 挽留彈窗（獨立樣式，勿與 headfooter.css 混寫）
   背景遮罩沿用站內共用的 .alert-background
   ============================================================ */

.mgm-popup{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 100000;              /* 需高於 .alert-background 與 header(1200) */
	width: 380px;
	max-width: 90vw;
	max-height: 92vh;
	box-sizing: border-box;
}

.mgm-popup-link{
	display: block;
	line-height: 0;
}

.mgm-popup-img{
	display: block;
	width: 100%;
	height: auto;
	max-height: 92vh;
	object-fit: contain;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* 右上角關閉鈕（放在圖片內側，避免小螢幕溢出被裁切） */
.mgm-popup-close{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	line-height: 29px;
	text-align: center;
	background: #ffffff;
	color: #6C45D6;
	border-radius: 50%;
	font-size: 18px;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
	z-index: 2;
	cursor: pointer;
	transition: all .2s;
}
.mgm-popup-close i{ vertical-align: middle; }

@media (min-width:1080px){
	.mgm-popup-close:hover{ background: #6C45D6; color: #fff; }
}

@media (max-width:767px){
	.mgm-popup{
		width: 86vw;
		max-height: 88vh;
	}
	.mgm-popup-img{ max-height: 88vh; }
	.mgm-popup-close{
		top: 8px;
		right: 8px;
		width: 30px;
		height: 30px;
		line-height: 30px;
		font-size: 16px;
	}
}