/* === MZ Smart Notifications — Frontend Styles === */

/* Bar notifications (top & bottom) */
.mzn-bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 99999;
	background: var(--mzn-bg, #1e3a5f);
	color: var(--mzn-color, #ffffff);
	padding: 10px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.mzn-bar--top {
	top: 0;
	transform: translateY(-100%);
}

.mzn-bar--bottom {
	bottom: 0;
	transform: translateY(100%);
}

.mzn-bar.mzn-visible {
	transform: translateY(0);
	opacity: 1;
}

.mzn-bar.mzn-hidden {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

.mzn-bar--bottom.mzn-hidden {
	transform: translateY(100%);
}

.mzn-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.mzn-bar__message {
	flex: 1;
	font-size: 14px;
	line-height: 1.5;
}

.mzn-bar__cta {
	background: rgba(255, 255, 255, 0.2);
	color: inherit;
	padding: 5px 14px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, 0.4);
	transition: background 0.2s;
}

.mzn-bar__cta:hover {
	background: rgba(255, 255, 255, 0.35);
	color: inherit;
}

.mzn-bar__close {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: 18px;
	padding: 0 4px;
	opacity: 0.7;
	transition: opacity 0.2s;
	margin-inline-start: auto;
}



.mzn-bar__close:hover {
	opacity: 1;
}

/* Floating card (specific user) */
.mzn-card {
	position: fixed;
	bottom: 80px;
	inset-inline-end: 20px;
	z-index: 99999;
	background: var(--mzn-bg, #7c3aed);
	color: var(--mzn-color, #fff);
	border-radius: 10px;
	padding: 16px 18px;
	max-width: 320px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	transform: translateX(var(--mzn-card-offset, 120%));
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.mzn-card.mzn-visible {
	transform: translateX(0);
	opacity: 1;
}

.mzn-card.mzn-hidden {
	transform: translateX(var(--mzn-card-offset, 120%));
	opacity: 0;
	pointer-events: none;
}



.mzn-card__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 40px;
}

.mzn-card__message {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}
.mzn-card__close {
    position: absolute;
    top: 5px;
    inset-inline-end: 10px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.7;
}
.mzn-card__close:hover {
	opacity: 1;
}

.mzn-card__cta {
	align-self: start;
	background: rgba(255, 255, 255, 0.2);
	color: inherit;
	padding: 6px 14px;
	border-radius: 5px;
	text-decoration: none;
	font-size: 13px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	transition: background 0.2s;
}

.mzn-card__cta:hover {
	background: rgba(255, 255, 255, 0.35);
	color: inherit;
}

/* WP Admin Bar offset */
.admin-bar .mzn-bar--top {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .mzn-bar--top {
		top: 46px;
	}
}

/* === Queue States === */
.mzn-queued {
	display: none !important;
	pointer-events: none;
}

.mzn-active {
	display: block;
}

.mzn-bar.mzn-active {
	display: flex;
}

/* Queue counter badge */
.mzn-bar__counter,
.mzn-card__counter {
	font-size: 11px;
	opacity: 0.65;
	white-space: nowrap;
	padding: 0 6px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.3);
}

/* Exit animations */
.mzn-bar.mzn-exiting {
	animation: mznSlideOutTop 0.3s ease forwards;
}

.mzn-bar--bottom.mzn-exiting {
	animation: mznSlideOutBottom 0.3s ease forwards;
}

.mzn-card.mzn-exiting {
	animation: mznSlideOutRight 0.3s ease forwards;
}

@keyframes mznSlideOutTop {
	to {
		transform: translateY(-110%);
		opacity: 0;
	}
}

@keyframes mznSlideOutBottom {
	to {
		transform: translateY(110%);
		opacity: 0;
	}
}

@keyframes mznSlideOutRight {
	to {
		transform: translateX(var(--mzn-card-offset, 120%));
		opacity: 0;
	}
}

/* === RTL Support === */
html[dir="rtl"] {
	--mzn-card-offset: -120%;
}

/* Responsive */
@media (max-width: 480px) {
	.mzn-card {
		inset-inline-end: 10px;
		inset-inline-start: 10px;
		max-width: none;
		bottom: 60px;
	}

	.mzn-bar__inner {
		padding: 0 12px;
	}

	.mzn-bar__message {
		font-size: 13px;
	}
}