/* ================================
   METRONIC 2025 FIXED NOTIFICATIONS
   ================================ */

.fixed-error,
.fixed-success {
	position: fixed !important;
	top: 20px;
	right: 20px;
	z-index: 999999 !important;

	min-width: 340px;
	max-width: 420px;
	padding: 16px 18px 18px 18px;

	border-radius: 14px;
	border: none;

	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);

	box-shadow:
		0 10px 30px rgba(0, 0, 0, .35),
		0 0 0 1px rgba(255,255,255,.08) inset;

	animation: notifySlideIn .55s cubic-bezier(.2,.8,.2,1);
}

/* text */
.fixed-error > div,
.fixed-success > div {
	font-size: 14px;
	line-height: 1.45;
	font-weight: 500;
	padding-right: 25px;
}

/* close button */
.fixed-error .btn-close,
.fixed-success .btn-close {
	position: absolute;
	top: 6px;
	right: 16px;
	filter: invert(1);
	opacity: .65;
}
.fixed-error .btn-close:hover,
.fixed-success .btn-close:hover {
	opacity: 1;
}

/* ================================
   ERROR – red / pink cyber glow
   ================================ */

.fixed-error {
	background: linear-gradient(
		135deg,
		rgba(255, 56, 96, .9),
		rgba(160, 20, 60, .92)
	);
	color: #fff;

	box-shadow:
		0 10px 30px rgba(255, 0, 80, .38),
		0 0 0 1px rgba(255,255,255,.07) inset;
}

/* little progress bar */
.fixed-error::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: rgba(255,255,255,.4);
	animation: notifyProgress linear forwards;
	animation-duration: var(--notify-delay, 6s);
}

/* ================================
   SUCCESS – green / emerald glow
   ================================ */

.fixed-success {
	background: linear-gradient(
		135deg,
		rgba(0, 200, 140, .9),
		rgba(0, 120, 90, .95)
	);
	color: #fff;

	box-shadow:
		0 10px 30px rgba(0, 200, 140, .38),
		0 0 0 1px rgba(255,255,255,.07) inset;
}

.fixed-success::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: rgba(255,255,255,.4);
	animation: notifyProgress linear forwards;
	animation-duration: var(--notify-delay, 6s);
}

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

@keyframes notifySlideIn {
	from {
		opacity: 0;
		transform: translateX(50px) scale(.95);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes notifyProgress {
	from { width: 100%; }
	to   { width: 0%; }
}

@media (max-width: 768px) {

	.fixed-error,
	.fixed-success {
		left: 50% !important;
		right: auto !important;
		top: 16px;

		transform: translateX(-50%);
		width: calc(100% - 32px);
		max-width: 520px;

		border-radius: 16px;
	}

	/* animație adaptată */
	@keyframes notifySlideIn {
		from {
			opacity: 0;
			transform: translateX(-50%) translateY(-20px) scale(.96);
		}
		to {
			opacity: 1;
			transform: translateX(-50%) translateY(0) scale(1);
		}
	}
}