/* =========================================================
   MP Popup — بوب أب صورة
   شغال RTL و LTR أوتوماتيك (Logical Properties).
   ========================================================= */

.mp-popup {
	--mp-max-width: 560px;   /* أقصى عرض للصورة */
	--mp-radius: 14px;
	--mp-backdrop: rgba(10, 13, 18, 0.62);

	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.mp-popup[hidden] {
	display: none;
}

/* ---------- الخلفية ---------- */

.mp-popup__overlay {
	position: absolute;
	inset: 0;
	background: var(--mp-backdrop);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mp-popup.is-open .mp-popup__overlay {
	opacity: 1;
}

/* ---------- الكارت (الصورة) ---------- */

.mp-popup__panel {
	position: relative;
	max-width: min(var(--mp-max-width), 100%);
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.mp-popup.is-open .mp-popup__panel {
	opacity: 1;
	transform: none;
}

.mp-popup__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100dvh - 100px);
	object-fit: contain;
	border-radius: var(--mp-radius);
	box-shadow: 0 24px 60px -14px rgba(16, 24, 40, 0.4);
}

.mp-popup__link {
	display: block;
	line-height: 0;
	border: 0;
	box-shadow: none;
}

/* ---------- زرار الإغلاق ---------- */

.mp-popup__close {
	position: absolute;
	inset-block-start: -14px;
	inset-inline-end: -14px;
	inline-size: 34px;
	block-size: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #14181f;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.mp-popup__close:hover {
	transform: rotate(90deg);
	background: #f2f4f7;
}

.mp-popup__close svg {
	inline-size: 17px;
	block-size: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.mp-popup__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- الموبايل ---------- */

@media (max-width: 600px) {
	.mp-popup {
		padding: 18px;
	}

	/* الزرار يفضل جوه الشاشة مش بره الصورة */
	.mp-popup__close {
		inset-block-start: 8px;
		inset-inline-end: 8px;
		background: rgba(255, 255, 255, 0.94);
	}

	.mp-popup__image {
		max-height: calc(100dvh - 80px);
	}
}

/* ---------- احترام تقليل الحركة ---------- */

@media (prefers-reduced-motion: reduce) {
	.mp-popup__overlay,
	.mp-popup__panel {
		transition-duration: 0.01ms;
		transform: none;
	}

	.mp-popup__close:hover {
		transform: none;
	}
}