/* ==========================================================================
   Eminence One — Pakistan Independence Day 2026 campaign popup
   Image-only popup. Scoped to #e1-eid-overlay only — does not alter any
   other site styles. Popup is positioned below the header (see JS, which
   sets #e1-eid-overlay's `top` to the measured header height) so it never
   overlaps the header/navigation.
   ========================================================================== */

#e1-eid-overlay {
	position: fixed;
	top: 0; /* overridden inline by JS to the actual header height */
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	box-sizing: border-box;
}

#e1-eid-overlay.e1-eid-open {
	opacity: 1;
	visibility: visible;
}

#e1-eid-overlay * {
	box-sizing: border-box;
}

.e1-eid-modal {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: min(900px, 94vw);
	max-height: 100%; /* resolves against the overlay's content box, i.e. calc(100vh - header height - 30px) */
}

/* The <picture> wrapper (added for WebP) has no intrinsic size of its own and
   isn't reliably shrink-wrapped by all browsers when it's a flex item -- give it
   the same constraints as the image so it can't throw off horizontal centering. */
.e1-eid-modal picture {
	display: block;
	max-width: min(900px, 94vw);
	max-height: 100%;
	line-height: 0;
}

.e1-eid-modal img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(900px, 94vw);
	max-height: 100%;
	object-fit: contain;
	border: 0;
}

.e1-eid-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	transition: background .15s ease;
}

.e1-eid-close:hover,
.e1-eid-close:focus-visible {
	background: #ffffff;
}

.e1-eid-close svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	#e1-eid-overlay {
		transition: none !important;
	}
}

/* Lock background scroll while popup is open */
body.e1-eid-lock {
	overflow: hidden !important;
}