#audio
{
	display: none;
}

/* Notification popup styling */
.notification
{
	position: fixed;
	top: 20px;
	right: 20px;
	display: inline-flex;
	align-items: flex-start;
	gap: 0.9rem;
	background: color-mix(in srgb, var(--surface-card, #ffffff) 92%, transparent);
	color: var(--text-primary);
	padding: 1rem 1.4rem 1rem 1.2rem;
	border-radius: 14px;
	border: 1px solid var(--border-light);
	box-shadow: 0 22px 48px -26px var(--shadow-primary);
	min-width: 280px;
	max-width: min(420px, calc(100vw - 2rem));
	opacity: 0;
	transform: translateY(-16px) scale(0.98);
	transition: opacity 0.35s ease, transform 0.35s ease;
	z-index: 9999;
}

.notification::before
{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent);
	pointer-events: none;
}

.notification__icon
{
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
	background: rgba(255, 255, 255, 0.45);
	flex-shrink: 0;
}

.notification__icon i
{
	width: 18px;
	height: 18px;
}

.notification__content
{
	position: relative;
	display: grid;
	gap: 0.15rem;
}

.notification__content h4
{
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
}

.notification__content p
{
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--text-secondary);
}

.notification__close
{
	position: relative;
	align-self: flex-start;
	margin-left: auto;
	border: none;
	background: transparent;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.notification__close:hover,
.notification__close:focus-visible
{
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.05);
	outline: none;
}

.notification__close i
{
	width: 16px;
	height: 16px;
}

.show
{
	opacity: 1;
	transform: translateY(0) scale(1);
}

.hide
{
	opacity: 0;
	transform: translateY(-12px) scale(0.96);
}

.notification.success
{
	border-color: color-mix(in srgb, var(--notify-success) 45%, transparent);
	box-shadow: 0 22px 48px -28px color-mix(in srgb, var(--notify-success) 32%, transparent);
	color: color-mix(in srgb, var(--notify-success) 62%, #0f2d29 38%);
}

.notification.success .notification__icon
{
	background: color-mix(in srgb, var(--notify-success) 22%, #ffffff 78%);
}

.notification.error
{
	border-color: color-mix(in srgb, var(--notify-error) 45%, transparent);
	box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--notify-error) 32%, transparent);
	color: color-mix(in srgb, var(--notify-error) 64%, #3a0d0d 36%);
}

.notification.error .notification__icon
{
	background: color-mix(in srgb, var(--notify-error) 22%, #ffffff 78%);
}

.notification.info
{
	border-color: color-mix(in srgb, var(--notify-info) 45%, transparent);
	box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--notify-info) 32%, transparent);
	color: color-mix(in srgb, var(--notify-info) 58%, #0f2436 42%);
}

.notification.info .notification__icon
{
	background: color-mix(in srgb, var(--notify-info) 22%, #ffffff 78%);
}

.notification.warning
{
	border-color: color-mix(in srgb, var(--notify-warning) 45%, transparent);
	box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--notify-warning) 32%, transparent);
	color: color-mix(in srgb, var(--notify-warning) 58%, #402512 42%);
}

.notification.warning .notification__icon
{
	background: color-mix(in srgb, var(--notify-warning) 22%, #ffffff 78%);
}

@media (max-width: 600px)
{
	.notification
	{
		left: 50%;
		right: auto;
		top: 16px;
		transform: translate(-50%, -16px) scale(0.98);
		width: calc(100vw - 1.5rem);
		min-width: unset;
	}

	.show
	{
		transform: translate(-50%, 0) scale(1);
	}

	.hide
	{
		transform: translate(-50%, -12px) scale(0.96);
	}
}