/**
 * Laxmiloka Popup Notifications — frontend styles.
 */

.lpn-stack {
	--lpn-gap: 12px;
	--lpn-edge: 20px;
	--lpn-radius: 10px;
	--lpn-width: 360px;
	--lpn-notification: #2563eb;
	--lpn-success: #16a34a;
	--lpn-error: #dc2626;

	position: fixed;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: var(--lpn-gap);
	max-width: calc( 100vw - 2 * var(--lpn-edge) );
	width: var(--lpn-width);
	pointer-events: none; /* let clicks through the gaps; popups re-enable it */
}

/* ---- Anchor positions (set via data-position on the stack) ---- */
.lpn-stack[data-position="top-left"]      { top: var(--lpn-edge); left: var(--lpn-edge); }
.lpn-stack[data-position="top-right"]     { top: var(--lpn-edge); right: var(--lpn-edge); }
.lpn-stack[data-position="top-center"]    { top: var(--lpn-edge); left: 50%; transform: translateX(-50%); }
.lpn-stack[data-position="bottom-left"]   { bottom: var(--lpn-edge); left: var(--lpn-edge); }
.lpn-stack[data-position="bottom-right"]  { bottom: var(--lpn-edge); right: var(--lpn-edge); }
.lpn-stack[data-position="bottom-center"] { bottom: var(--lpn-edge); left: 50%; transform: translateX(-50%); }

/* Bottom anchors stack newest nearest the corner. */
.lpn-stack[data-position^="bottom"] { flex-direction: column-reverse; }

/* ---- Popup card ---- */
.lpn-popup {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: var(--lpn-radius);
	background: #fff;
	color: #1f2937;
	border-left: 4px solid var(--lpn-clr, var(--lpn-notification));
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.16 );
	font-weight: 500;
	font-size: 14px;
	font-family: "Figtree", Sans-serif;
	line-height: 1.45;
	animation: lpn-in 0.35s cubic-bezier( 0.21, 1, 0.4, 1 ) both;
}

.lpn-popup[data-type="notification"] { --lpn-clr: var(--lpn-notification); }
.lpn-popup[data-type="success"]      { --lpn-clr: var(--lpn-success); background: #f0fdf4; }
.lpn-popup[data-type="error"]        { --lpn-clr: var(--lpn-error); background: #fef2f2; }

.lpn-popup__icon { flex: 0 0 auto; color: var(--lpn-clr); margin-top: 1px; }
.lpn-popup__body { flex: 1 1 auto; min-width: 0; padding-top: 20px; }
.lpn-popup__message { margin: 0; word-break: break-word; }

.lpn-popup__link {
	display: inline-block;
	margin-top: 4px;
	color: var(--lpn-clr);
	font-weight: 600;
	text-decoration: underline;
}
.lpn-popup__link[hidden] { display: none; }

.lpn-popup__close {
	flex: 0 0 auto;
	appearance: none;
	border: 0;
	background: none !important;
	color: var(--lpn-clr);
	font-size: 16px;
	line-height: 1;
	padding: 0 2px;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.15s;
        position : absolute;
        top: -5px;
        right: -14px;
}

.lpn-popup__close i::before {
    
    color: var(--e-global-color-primary);
    font-size: 30px;
}


.lpn-popup__close:hover { opacity: 1; }
.lpn-popup__close[hidden] { display: none; }

/* eicon-editor-close (0xe803) in the popup's primary colour. */
.lpn-popup__close .eicon-editor-close { font-size: 16px; }
.lpn-popup__close .eicon-editor-close::before { content: "\e803"; font-family: eicons; }

/* ---- Icons: show only the one matching the popup type ---- */
.lpn-icon { display: none; }
.lpn-popup[data-type="notification"] .lpn-icon--notification,
.lpn-popup[data-type="success"] .lpn-icon--success,
.lpn-popup[data-type="error"] .lpn-icon--error { display: block; }

/* ---- Enter / leave animations ---- */
@keyframes lpn-in {
	from { opacity: 0; transform: translateY( 40px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

.lpn-popup.is-leaving {
	animation: none;
	opacity: 0;
	transform: translateX( 16px );
	transition: opacity 0.24s ease, transform 0.24s ease;
}
.lpn-stack[data-position$="left"] .lpn-popup.is-leaving { transform: translateX( -16px ); }

@media (prefers-reduced-motion: reduce) {
	.lpn-popup { animation: none; }
	.lpn-popup.is-leaving { transition: opacity 0.24s ease; transform: none; }
}

/* ---- Demo widget ([lpn_demo]) ---- */
.lpn-demo__row { display: flex; flex-wrap: wrap; gap: 8px; }
.lpn-demo__btn {
	appearance: none;
	border: 1px solid #d1d5db;
	background: #f9fafb;
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
}
.lpn-demo__btn:hover { background: #f3f4f6; }