/**
 * notifications.css — toast notifications for the Available Works cart flow.
 *
 * JS that creates these lives in assets/js/add-to-cart.js — it appends
 * <div class="cart-notification cart-notification--{success|info|error}">
 * children inside a top-right ARIA-live container.
 *
 * Variants:
 *   - success → green accent (--color-success)
 *   - info    → neutral text-primary
 *   - error   → primary red (--color-primary)
 *
 * Mobile (≤767px): container becomes a top full-width banner with no offset.
 */

/* ============================================================
   Container — fixed top-right.
   ============================================================ */
.cart-notifications {
	position: fixed;
	top: var(--Space-l);
	right: var(--Space-l);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: var(--Space-2xs);
	pointer-events: none;
	max-width: min(360px, calc(100vw - 2 * var(--Space-l)));
}

.cart-notification {
	pointer-events: auto;
	padding: var(--Space-2xs) var(--Space-xs); /* halved from Space-s/Space-m — tighter toast */
	background: var(--color-surface);
	color: var(--text-primary);
	font-family: var(--font-body); /* aktiv-grotesk */
	font-size: var(--body-s);
	line-height: 1.4;
	border: 1px solid var(--text-primary-l-8);
	border-left-width: 3px;
	border-radius: var(--Space-4xs);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.cart-notification.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.cart-notification.is-leaving {
	opacity: 0;
	transform: translateX(20px);
}

/* ============================================================
   Variants — distinguished by left accent border colour.
   ============================================================ */
.cart-notification--success {
	border-left-color: var(--color-success);
}

.cart-notification--info {
	border-left-color: var(--text-primary);
}

.cart-notification--error {
	border-left-color: var(--color-primary);
	color: var(--text-primary);
}

/* ============================================================
   Mobile — top full-width banner.
   ============================================================ */
@media (max-width: 767px) {
	.cart-notifications {
		top: var(--Space-s);
		right: var(--Space-s);
		left: var(--Space-s);
		max-width: none;
	}

	.cart-notification {
		font-size: var(--body-s);
	}
}

/* ============================================================
   Reduced motion — no slide, only fade.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.cart-notification,
	.cart-notification.is-visible,
	.cart-notification.is-leaving {
		transform: none;
		transition: opacity 0.2s ease;
	}
}