/** Shopify CDN: Minification failed

Line 718:0 Expected "}" to go with "{"

**/
/* =================================
   MODULAR NOTIFICATION SYSTEM STYLES
   Enhanced visual design with modern UI patterns
   ================================= */

@layer components {
	/* ---------------------------------- */
	/* 1. Container & Scrollbar           */
	/* ---------------------------------- */
	.notification-container {
		position: fixed;
		top: 20px;
		right: 20px;
		z-index: 9999;
		max-width: 450px;
		max-height: calc(100vh - 40px);
		pointer-events: none;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}



	/* Notifications list container */
	.notification-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
		position: relative;
		z-index: 1;
		pointer-events: auto;

		&::-webkit-scrollbar {
			width: 8px;
		}

		&::-webkit-scrollbar-track {
			background: transparent;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background: rgba(255, 255, 255, 0.4);
			border-radius: 4px;
			transition: all 0.3s ease;
			border: 1px solid rgba(255, 255, 255, 0.1);

			&:hover {
				background: rgba(255, 255, 255, 0.6);
				transform: scaleY(1.1);
			}
		}
	}

	/* ---------------------------------- */
	/* 2. Base Notification               */
	/* ---------------------------------- */
	.notification {
		color: white;
		padding: 14px 16px;
		margin-bottom: 0;
		border-radius: 8px;
		box-shadow:
			0 4px 12px rgba(0, 0, 0, 0.15),
			0 2px 4px rgba(0, 0, 0, 0.1);
		font-size: 13px;
		line-height: 1.4;
		opacity: 0;
		transform: translateX(100%) scale(0.95);
		transition:
			opacity 0.3s ease,
			transform 0.3s ease,
			box-shadow 0.2s ease;
		pointer-events: auto;
		cursor: pointer;
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(8px);
		overflow: hidden;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		font-weight: 500;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: inherit;
			border-radius: inherit;
			filter: blur(1px);
			opacity: 0.8;
			z-index: -1;
		}

		&:hover {
			transform: translateX(-2px) scale(1.01);
			box-shadow:
				0 6px 20px rgba(0, 0, 0, 0.2),
				0 3px 8px rgba(0, 0, 0, 0.15);
		}

		&.animate-in {
			opacity: 1 !important;
			transform: translateX(0) scale(1) !important;
			animation: notificationSlideIn 0.4s ease-out !important;
		}

		&.animate-out {
			animation: notificationHide 0.6s cubic-bezier(0.55, 0, 0.74, 0.2) forwards !important;
			pointer-events: none !important;
		}

		&.filter-hidden:not(.animate-out) {
			opacity: 0 !important;
			transform: translateY(-15px) scale(0.95) !important;
			display: none !important; /* Hide completely */
			transition:
				opacity 0.3s cubic-bezier(0.55, 0, 0.74, 0.2),
				transform 0.3s cubic-bezier(0.55, 0, 0.74, 0.2) !important;
		}

		&.filter-visible:not(.animate-out):not(.animate-in) {
			opacity: 1 !important;
			transform: translateY(0) scale(1) !important;
			display: block !important; /* Show completely */
			transition:
				opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
				transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
		}
	}

	/* ---------------------------------- */
	/* 3. Notification Type Colors        */
	/* ---------------------------------- */
	.notification-success {
		background: linear-gradient(135deg, #10b981, #059669);
		border-color: rgba(16, 185, 129, 0.3);
	}

	.notification-error {
		background: linear-gradient(135deg, #ef4444, #dc2626);
		border-color: rgba(239, 68, 68, 0.3);
	}

	.notification-info {
		background: linear-gradient(135deg, #3b82f6, #2563eb);
		border-color: rgba(59, 130, 246, 0.3);
	}

	.notification-warning {
		background: linear-gradient(135deg, #f59e0b, #d97706);
		border-color: rgba(245, 158, 11, 0.3);
	}

	/* ---------------------------------- */
	/* 4. Internal Notification Elements  */
	/* ---------------------------------- */
	.notification-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		user-select: none;
		position: relative;
		z-index: 2;
		transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
		border-radius: 8px;
		padding: 2px;
		margin: -2px;
		gap: 8px;

		&:hover .notification-title {
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		}
	}

	.notification-content {
		display: flex;
		align-items: center;
		flex: 1;
		min-width: 0;
		padding: 2px;
	}

	.notification-controls {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}

	.notification-title {
		font-weight: 600;
		font-size: 15px;
		letter-spacing: 0.02em;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		line-height: 1.4;
		transition: all 0.3s ease;
	}

	.notification-toggle {
		width: 24px;
		height: 24px;
		border-radius: 6px;
		background: rgba(255, 255, 255, 0.15);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
		font-size: 12px;
		font-weight: bold;
		flex-shrink: 0;
		border: 1px solid rgba(255, 255, 255, 0.25);
		box-shadow:
			0 2px 6px rgba(0, 0, 0, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(6px);
		position: relative;
		overflow: hidden;
		cursor: pointer;
		opacity: 0.8;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 70%);
			border-radius: inherit;
			opacity: 0.6;
		}

		svg {
			transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
			filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
			z-index: 1;
		}

		&.expanded {
			background: rgba(255, 255, 255, 0.3);
			transform: scale(1.05);
			box-shadow:
				0 5px 15px rgba(0, 0, 0, 0.2),
				inset 0 1px 0 rgba(255, 255, 255, 0.4);
			opacity: 1;

			svg {
				transform: rotate(180deg) scale(1.1);
			}

			&:hover {
				transform: scale(1.08) rotate(-2deg);
			}
		}

		&:hover {
			opacity: 1;
			background: rgba(255, 255, 255, 0.25);
			transform: scale(1.08) rotate(2deg);
			box-shadow:
				0 6px 18px rgba(0, 0, 0, 0.2),
				inset 0 1px 0 rgba(255, 255, 255, 0.3);
		}
	}

	.notification-details {
		margin: 0;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1),
			opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1),
			margin-top 0.4s cubic-bezier(0.23, 1, 0.32, 1),
			padding-top 0.4s cubic-bezier(0.23, 1, 0.32, 1),
			transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
		border-top: 1px solid transparent;
		padding-top: 0;
		transform: translateY(-10px);
		border-radius: 0 0 12px 12px;
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 1px;
			background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.3) 80%, transparent 100%);
			opacity: 0;
			transition: opacity 0.4s ease;
		}

		&.expanded {
			margin-top: 16px;
			opacity: 1;
			border-top-color: rgba(255, 255, 255, 0.2);
			padding-top: 16px;
			transform: translateY(0);
			background: rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(8px);
			border-radius: 12px; /* This seems to conflict with border-radius: 0 0 12px 12px from parent */
			padding: 16px; /* Padding for the content inside */
			margin-top: 12px; /* Adjusted margin based on original */
			box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);

			&::before {
				opacity: 1;
			}
		}
	}

	.notification-details-content {
		font-size: 13px;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.95);
		padding: 0;
		border: none;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		font-weight: 400;
		letter-spacing: 0.01em;
	}

	.notification-close {
		width: 24px;
		height: 24px;
		border-radius: 6px;
		background: rgba(255, 255, 255, 0.15);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		opacity: 0.8;
		transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
		border: 1px solid rgba(255, 255, 255, 0.25);
		font-size: 20px;
		font-weight: bold;
		flex-shrink: 0;
		position: relative;
		z-index: 10;
		pointer-events: auto !important;
		user-select: none;
		text-align: center;
		line-height: 1;
	}

	.notification-close:hover {
		opacity: 1;
		background: rgba(255, 255, 255, 0.25);
		border-color: rgba(255, 255, 255, 0.4);
		transform: scale(1.1);
	}

	.notification-close:active {
		background: rgba(255, 255, 255, 0.35);
		transform: scale(0.95);
	}

	.notification-close:focus {
		outline: 2px solid rgba(255, 255, 255, 0.5);
		outline-offset: 2px;
	}

	.notification-shimmer {
		position: absolute;
		top: 0;
		left: -120%;
		width: 120%;
		height: 100%;
		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.08) 20%,
			rgba(255, 255, 255, 0.25) 40%,
			rgba(255, 255, 255, 0.35) 50%,
			rgba(255, 255, 255, 0.25) 60%,
			rgba(255, 255, 255, 0.08) 80%,
			transparent 100%
		);
		transition: left 1s cubic-bezier(0.23, 1, 0.32, 1);
		pointer-events: none;
		border-radius: inherit;
		z-index: 1;
		transform: skewX(-20deg);
		filter: blur(0.5px);
	}





	/* ---------------------------------- */
	/* 5. Priority Styles                 */
	/* ---------------------------------- */
	.notification-priority-critical {
		animation: criticalPulse 2s infinite !important;
		border-color: rgba(220, 38, 38, 0.6) !important;

		&:hover {
			box-shadow:
				0 20px 50px rgba(220, 38, 38, 0.3),
				0 10px 30px rgba(0, 0, 0, 0.25),
				0 4px 15px rgba(0, 0, 0, 0.15) !important;
		}
	}

	.notification-priority-error:hover {
		box-shadow:
			0 20px 45px rgba(220, 38, 38, 0.25),
			0 10px 25px rgba(0, 0, 0, 0.22),
			0 4px 12px rgba(0, 0, 0, 0.12) !important;
	}

	.notification-priority-warning:hover {
		box-shadow:
			0 20px 45px rgba(245, 158, 11, 0.25),
			0 10px 25px rgba(0, 0, 0, 0.22),
			0 4px 12px rgba(0, 0, 0, 0.12) !important;
	}

	.notification-priority-success:hover {
		box-shadow:
			0 20px 45px rgba(16, 185, 129, 0.25),
			0 10px 25px rgba(0, 0, 0, 0.22),
			0 4px 12px rgba(0, 0, 0, 0.12) !important;
	}

	.notification-priority-info:hover {
		box-shadow:
			0 20px 45px rgba(59, 130, 246, 0.25),
			0 10px 25px rgba(0, 0, 0, 0.22),
			0 4px 12px rgba(0, 0, 0, 0.12) !important;
	}

	/* ---------------------------------- */
	/* 6. Global Animations               */
	/* ---------------------------------- */
	@keyframes notificationSlideIn {
		0% {
			opacity: 0;
			transform: translateX(100%) scale(0.95);
		}
		100% {
			opacity: 1;
			transform: translateX(0) scale(1);
		}
	}

	@keyframes notificationHide {
		0% {
			opacity: 1;
			transform: translateX(0) scale(1);
			filter: blur(0px) brightness(1);
			max-height: 500px;
		}
		25% {
			opacity: 0.8;
			transform: translateX(30%) scale(0.98);
			filter: blur(1px) brightness(1.05);
			max-height: 500px;
		}
		50% {
			opacity: 0.4;
			transform: translateX(80%) scale(0.92);
			filter: blur(3px) brightness(1.2);
			max-height: 300px;
		}
		75% {
			opacity: 0.1;
			transform: translateX(120%) scale(0.85);
			filter: blur(5px) brightness(0.8);
			max-height: 100px;
		}
		100% {
			opacity: 0;
			transform: translateX(150%) scale(0.75);
			filter: blur(6px) brightness(0.5);
			max-height: 0;
			padding: 0;
		}
	}

	@keyframes successPulse {
		0%,
		100% {
			transform: scale(1);
			box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
		}
		50% {
			transform: scale(1.1);
			box-shadow: 0 0 0 20px rgba(34, 197, 94, 0);
		}
	}

	@keyframes errorShake {
		0%,
		100% {
			transform: translateX(0) rotate(0deg);
		}
		10%,
		30%,
		50%,
		70%,
		90% {
			transform: translateX(-3px) rotate(-2deg);
		}
		20%,
		40%,
		60%,
		80% {
			transform: translateX(3px) rotate(2deg);
		}
	}

	@keyframes menuSlideUp {
		0% {
			opacity: 0;
			transform: translateY(20px) scale(0.9);
		}
		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	@keyframes menuSlideDown {
		0% {
			opacity: 0;
			transform: translateY(-20px) scale(0.9);
		}
		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	@keyframes criticalPulse {
		0%,
		100% {
			box-shadow:
				0 12px 32px rgba(0, 0, 0, 0.18),
				0 6px 16px rgba(0, 0, 0, 0.12),
				0 2px 8px rgba(0, 0, 0, 0.08),
				0 0 0 0 rgba(220, 38, 38, 0.5);
		}
		50% {
			box-shadow:
				0 12px 32px rgba(0, 0, 0, 0.18),
				0 6px 16px rgba(0, 0, 0, 0.12),
				0 2px 8px rgba(0, 0, 0, 0.08),
				0 0 0 15px rgba(220, 38, 38, 0);
		}
	}

	/* These are used for dynamic JavaScript effects, which may add/remove classes
		 * or apply inline styles, and the original CSS had these separate.
		 * Maintaining them as separate global keyframes. */
	@keyframes pulse-critical {
		0%,
		100% {
			transform: scale(1);
			filter: brightness(1);
		}
		50% {
			transform: scale(1.02);
			filter: brightness(1.1);
		}
	}

	@keyframes staggerBounce {
		0% {
			transform: translateX(0) scale(1);
		}
		25% {
			transform: translateX(-3px) scale(1.008);
		}
		50% {
			transform: translateX(-2px) scale(1.005);
		}
		75% {
			transform: translateX(-1px) scale(1.002);
		}
		100% {
			transform: translateX(0) scale(1);
		}
	}

	.notification.slide-up {
		animation: slideUpSmooth 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
	}

	@keyframes slideUpSmooth {
		0% {
			transform: translateY(0) scale(1);
		}
		40% {
			transform: translateY(-8px) scale(1.01);
		}
		70% {
			transform: translateY(-3px) scale(1.005);
		}
		100% {
			transform: translateY(0) scale(1);
		}
	}

	.notification.removal-effect {
		/* This class isn't used in JS, but keeping for completeness */
		animation: removalShift 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	}

	@keyframes removalShift {
		0% {
			transform: translateY(0) scale(1);
		}
		30% {
			transform: translateY(-8px) scale(0.995);
		}
		60% {
			transform: translateY(-3px) scale(0.998);
		}
		100% {
			transform: translateY(0) scale(1);
		}
	}

	.notification.reveal-sequence {
		/* This class isn't used in JS, but keeping for completeness */
		animation: revealSequence 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	}

	@keyframes revealSequence {
		0% {
			opacity: 0;
			transform: translateX(100%) scale(0.9) rotateY(10deg);
			filter: blur(4px);
		}
		40% {
			opacity: 0.6;
			transform: translateX(30%) scale(0.96) rotateY(4deg);
			filter: blur(2px);
		}
		70% {
			opacity: 0.9;
			transform: translateX(-5px) scale(1.01) rotateY(-1deg);
			filter: blur(0px);
		}
		100% {
			opacity: 1;
			transform: translateX(0) scale(1) rotateY(0deg);
			filter: blur(0px);
		}
	}

	/* Loading bar animation for dev tools */
	@keyframes loadingBar {
		0% {
			width: 0%;
			background: linear-gradient(90deg, #10b981, #3b82f6);
		}
		25% {
			width: 30%;
			background: linear-gradient(90deg, #10b981, #059669);
		}
		50% {
			width: 65%;
			background: linear-gradient(90deg, #059669, #3b82f6);
		}
		75% {
			width: 85%;
			background: linear-gradient(90deg, #3b82f6, #1d4ed8);
		}
		100% {
			width: 100%;
			background: linear-gradient(90deg, #10b981, #3b82f6);
		}
	}

	/* Enhanced pulse animation for dev tools */
	@keyframes devToolsPulse {
		0% {
			box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
			transform: scale(1);
		}
		50% {
			box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
			transform: scale(1.02);
		}
		100% {
			box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
			transform: scale(1);
		}
	}

	/* ---------------------------------- */
	/* 7. Responsive Adjustments          */
	/* ---------------------------------- */
	@media (max-width: 768px) {
			.notification-container {
			display: none;
		}
}