/**
 * Easy Popup Lightbox Maker - Frontend CSS
 *
 * Minimal, lightweight styles for rendering popups on the frontend.
 *
 * @package EasyPopupLightboxMaker
 */

/* ===========================
   Popup Container
   =========================== */

.eplmkr-popup {
	position: fixed;
	inset: 0;
	z-index: 999998;
	display: none;
}

/* Inline style="display:none" set by PHP always beats a class rule.
   Use !important so the visible state wins. */
.eplmkr-popup.eplmkr-popup--visible {
	display: block !important;
}


/* ===========================
   Overlay
   =========================== */

.eplmkr-popup__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}


/* ===========================
   Popup Container / Position
   =========================== */

.eplmkr-popup__container {
	position: absolute;
	z-index: 2;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
	overflow-y: auto;
	max-height: 90vh;
}

/* Center */
.eplmkr-popup--center .eplmkr-popup__container {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Top */
.eplmkr-popup--top .eplmkr-popup__container {
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
}

/* Bottom */
.eplmkr-popup--bottom .eplmkr-popup__container {
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}

/* Bottom Right */
.eplmkr-popup--bottom-right .eplmkr-popup__container {
	bottom: 20px;
	right: 20px;
}

/* Bottom Left */
.eplmkr-popup--bottom-left .eplmkr-popup__container {
	bottom: 20px;
	left: 20px;
}


/* ===========================
   Close Button
   =========================== */

.eplmkr-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.06);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: #333;
	transition: background 0.2s ease, color 0.2s ease;
	z-index: 3;
	padding: 0;
	line-height: 1;
}

.eplmkr-popup__close:hover {
	background: rgba(0, 0, 0, 0.12);
	color: #000;
}


/* ===========================
   Content
   =========================== */

.eplmkr-popup__content {
	position: relative;
}

.eplmkr-popup__content h1,
.eplmkr-popup__content h2,
.eplmkr-popup__content h3,
.eplmkr-popup__content h4 {
	margin: 0 0 0.75rem 0;
	line-height: 1.3;
}

.eplmkr-popup__content p {
	margin: 0 0 0.75rem 0;
	line-height: 1.6;
}

.eplmkr-popup__content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.eplmkr-popup__button {
	display: inline-block;
	padding: 0.625rem 1.5rem;
	background: linear-gradient(135deg, #ae1c59, #5a3bdd);
	color: #fff;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.eplmkr-popup__button:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	color: #fff;
}

.eplmkr-popup__video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: 0.75rem;
}

.eplmkr-popup__video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ===========================
   Animations
   =========================== */

.eplmkr-anim-fadeIn .eplmkr-popup__container {
	animation: eplmkr_fadeIn 0.35s ease-out both;
}

.eplmkr-anim-slideUp .eplmkr-popup__container {
	animation: eplmkr_slideUp 0.4s ease-out both;
}

.eplmkr-anim-slideDown .eplmkr-popup__container {
	animation: eplmkr_slideDown 0.4s ease-out both;
}

.eplmkr-anim-zoomIn .eplmkr-popup__container {
	animation: eplmkr_zoomIn 0.35s ease-out both;
}

.eplmkr-popup__overlay {
	animation: eplmkr_fadeIn 0.3s ease-out both;
}

/* Exit animations */
.eplmkr-popup--closing .eplmkr-popup__container {
	animation: eplmkr_fadeOut 0.25s ease-in forwards;
}

.eplmkr-popup--closing .eplmkr-popup__overlay {
	animation: eplmkr_fadeOut 0.25s ease-in forwards;
}

@keyframes eplmkr_fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes eplmkr_fadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes eplmkr_slideUp {
	from {
		opacity: 0;
		transform: translate(-50%, calc(-50% + 40px));
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

@keyframes eplmkr_slideDown {
	from {
		opacity: 0;
		transform: translate(-50%, calc(-50% - 40px));
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

@keyframes eplmkr_zoomIn {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.85);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}