/**
 * toast.css — the notification stack.
 *
 * Pairs with assets/js/toast.js, which owns the markup and explains the
 * mechanism. This file owns the surface, the stack geometry and the motion.
 *
 * THE SURFACE IS GLASS, AND IT IS THE ONLY PLACE IN THE THEME THAT IS.
 * The client asked for "beautiful our style semi transparent blurry toast".
 * A blur earns its place here for a reason it does not elsewhere: a toast
 * floats over arbitrary content — a product photograph, a table, a dark hero —
 * and a solid fill would either fight whatever is under it or need a shadow
 * heavy enough to look like a modal. A frosted sheet reads as "above, and
 * temporary" without either.
 *
 * Every other blur in this theme is load-bearing the same way: the page veil
 * behind the category rail (ui.css §1) and the scrolled header bar
 * (header.css §6b). There is no decorative glassmorphism anywhere, and none
 * should be added.
 *
 * WHERE THE STACK SITS. Bottom inline-end on desktop — out of the reading
 * path, near the cart icon the visitor is about to look at anyway. Top on a
 * phone, because the bottom of a phone viewport is where the browser chrome
 * and the thumb live.
 *
 * Sections
 *   1. Hiding WooCommerce's originals
 *   2. The stack
 *   3. One toast
 *   4. Kinds
 *   5. Reduced motion, forced colours, print
 */

/* =========================================================================
 * 1. WOOCOMMERCE'S ORIGINALS
 *
 * `.bedi-js` IS THE WHOLE SAFETY MECHANISM HERE. nav.js and header.js swap
 * `no-js` for it on the root element; both run on every page. Scoping the
 * hide to that class means a visitor with JavaScript off — or a visitor whose
 * JavaScript threw before toast.js ran — still sees WooCommerce's notices
 * inline, where they have always been.
 *
 * A checkout error the visitor cannot see is a broken shop, and "hide it and
 * trust the script" is exactly how that ships.
 * ====================================================================== */

.bedi-js .woocommerce-notices-wrapper > .woocommerce-message,
.bedi-js .woocommerce-notices-wrapper > .woocommerce-error,
.bedi-js .woocommerce-notices-wrapper > .woocommerce-info {
	/*
	 * clip rather than display:none. toast.js reads textContent off these
	 * elements before removing them, and a display:none subtree still has
	 * textContent — but a future reader reaching for `visibility: hidden` or
	 * removing the element in CSS would break the lift silently, so the intent
	 * is stated: present, measured at zero, never painted.
	 */
	block-size: 0;
	clip-path: inset(50%);
	margin: 0;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
}

/* The wrapper itself keeps no space once its children are gone. */
.bedi-js .woocommerce-notices-wrapper:empty {
	display: none;
}

/* =========================================================================
 * 2. THE STACK
 * ====================================================================== */

.bedi-toasts {
	/*
	 * --bedi-z-toast (250) is above the drawer and the sheet and below the
	 * skip link. A toast that a modal could cover would be a toast nobody
	 * reads; a toast above the skip link would trap a keyboard visitor.
	 */
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-2xs);
	inset-block-end: var(--bedi-space-md);
	inset-inline-end: var(--bedi-space-md);
	max-inline-size: min(380px, calc(100vw - var(--bedi-space-md) * 2));
	position: fixed;
	z-index: var(--bedi-z-toast);
	/*
	 * The CONTAINER never takes pointer events; each toast turns them back on.
	 * Without this the empty column of stack above the toasts swallows clicks
	 * on whatever is beneath it — which, bottom-right on a product page, is
	 * the buy rail.
	 */
	pointer-events: none;
}

/* =========================================================================
 * 3. ONE TOAST
 * ====================================================================== */

.bedi-toast {
	align-items: flex-start;
	background-color: rgba(255, 255, 255, 0.82);
	border: var(--bedi-border-width) solid rgba(255, 255, 255, 0.7);
	border-radius: var(--bedi-radius-lg);
	box-shadow:
		0 1px 2px rgba(37, 37, 49, 0.08),
		0 16px 40px -16px rgba(37, 37, 49, 0.35);
	color: var(--bedi-ink);
	column-gap: var(--bedi-space-2xs);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	overflow: hidden;
	padding: var(--bedi-space-2xs);
	pointer-events: auto;
	position: relative;
	/*
	 * The entrance: in from the inline-end edge, scaled down a touch. It slides
	 * from the direction it lives in, which is what makes a stack read as a
	 * stack rather than as things appearing at random.
	 */
	opacity: 0;
	transform: translateX(16px) scale(0.98);
	transition:
		opacity var(--bedi-dur) var(--bedi-ease-out),
		transform var(--bedi-dur) var(--bedi-ease-out);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.bedi-toast {
		-webkit-backdrop-filter: blur(20px) saturate(160%);
		backdrop-filter: blur(20px) saturate(160%);
		/*
		 * The fill drops to 72% once there is a blur behind it. Without the
		 * blur it has to do the separating on its own and stays at 82%.
		 */
		background-color: rgba(255, 255, 255, 0.72);
	}
}

.bedi-toast.is-in {
	opacity: 1;
	transform: none;
}

/*
 * The exit is FASTER than the entrance and goes the other way — down and away
 * rather than back out the side. An exit that mirrors the entrance reads as
 * "undo"; an exit that differs reads as "done".
 */
.bedi-toast.is-out {
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transition:
		opacity 180ms var(--bedi-ease-out),
		transform 180ms var(--bedi-ease-out);
}

/* ---- the leading visual ---- */

.bedi-toast__lead {
	align-items: center;
	block-size: 32px;
	border-radius: var(--bedi-radius-md);
	display: flex;
	inline-size: 32px;
	justify-content: center;
}

/*
 * With a product thumbnail the lead box grows and loses its tint — the
 * photograph is the signal, and a coloured plate behind a cut-out product shot
 * draws a rectangle the eye reads as the product's own edge.
 */
.bedi-toast.has-thumb .bedi-toast__lead {
	background: none;
	block-size: 48px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	inline-size: 48px;
	padding: 3px;
}

.bedi-toast__thumb {
	block-size: 100%;
	inline-size: 100%;
	object-fit: contain;
}

/* ---- the copy ---- */

.bedi-toast__body {
	min-inline-size: 0;
	padding-block: 3px;
}

.bedi-toast__title {
	font-size: var(--bedi-text-base);
	font-weight: var(--bedi-weight-medium);
	line-height: 1.4;
	margin: 0;
	/*
	 * Two lines, then ellipsis. Georgian product names run to sixty characters
	 * and a toast that grows to six lines stops being a toast. -webkit-box is
	 * still the only cross-browser line clamp; `line-clamp` alone is not yet
	 * safe to rely on here.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.bedi-toast__text {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	line-height: 1.4;
	margin: 2px 0 0;
}

.bedi-toast__action {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	color: var(--bedi-accent);
	display: inline-block;
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
	margin-block-start: var(--bedi-space-3xs);
	text-decoration: none;
	transition:
		background-size var(--bedi-dur) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

/*
 * The underline RETRACTS on hover rather than growing. Everywhere else in this
 * theme it grows from nothing — here the link is already the only coloured
 * thing in a small box and starts underlined, so the hover has to move the
 * other way to register at all.
 */
.bedi-toast__action:hover,
.bedi-toast__action:focus-visible {
	background-size: 0% 1px;
	color: var(--bedi-accent-strong);
}

/* ---- dismiss ---- */

.bedi-toast__close {
	appearance: none;
	background: none;
	border: 0;
	border-radius: var(--bedi-radius-round);
	color: var(--bedi-ink-muted);
	cursor: pointer;
	display: grid;
	block-size: 26px;
	inline-size: 26px;
	padding: 0;
	place-items: center;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-toast__close:hover,
.bedi-toast__close:focus-visible {
	background-color: rgba(37, 37, 49, 0.06);
	color: var(--bedi-ink);
}

.bedi-toast__close:active {
	transform: scale(0.9);
}

/* ---- the countdown ---- */

/*
 * A 2px bar along the bottom edge, scaling from full to nothing over exactly
 * the dismiss timeout — toast.js writes the duration inline because only it
 * knows the value.
 *
 * It exists so the toast never surprises anyone: something about to disappear
 * should say how long is left. `is-held` pauses it in place while the pointer
 * or focus is inside, which is the same instant the timer itself is cleared —
 * so the bar cannot lie about the state.
 */
.bedi-toast__timer {
	animation-fill-mode: forwards;
	animation-name: bedi-toast-timer;
	animation-timing-function: linear;
	background-color: var(--bedi-accent);
	block-size: 2px;
	inset-block-end: 0;
	inset-inline: 0;
	opacity: 0.55;
	position: absolute;
	transform-origin: 0 50%;
}

.bedi-toast.is-held .bedi-toast__timer {
	animation-play-state: paused;
}

@keyframes bedi-toast-timer {
	from {
		transform: scaleX(1);
	}

	to {
		transform: scaleX(0);
	}
}

/* =========================================================================
 * 4. KINDS
 *
 * The kind colours the LEAD and the TIMER and nothing else. A whole toast
 * tinted green or red is a notification that shouts; a coloured 32px mark on a
 * white sheet is one that tells you which sort it is and then gets out of the
 * way.
 * ====================================================================== */

.bedi-toast--success .bedi-toast__lead,
.bedi-toast--cart .bedi-toast__lead {
	background-color: rgba(6, 158, 96, 0.12);
	color: #069e60;
}

.bedi-toast--success .bedi-toast__timer,
.bedi-toast--cart .bedi-toast__timer {
	background-color: #069e60;
}

.bedi-toast--error .bedi-toast__lead {
	background-color: rgba(213, 0, 69, 0.12);
	color: var(--bedi-alert, #d50045);
}

.bedi-toast--error .bedi-toast__timer {
	background-color: var(--bedi-alert, #d50045);
}

.bedi-toast--info .bedi-toast__lead {
	background-color: rgba(45, 129, 255, 0.12);
	color: var(--bedi-accent);
}

.bedi-toast--wish .bedi-toast__lead {
	background-color: rgba(45, 129, 255, 0.12);
	color: var(--bedi-accent);
}

/* The cart kind keeps its green mark only when there is no photograph. */
.bedi-toast.has-thumb .bedi-toast__lead {
	color: var(--bedi-ink);
}

/* =========================================================================
 * 5. NARROW, REDUCED MOTION, FORCED COLOURS, PRINT
 * ====================================================================== */

/*
 * TOP ON A PHONE, not bottom. The bottom of a phone viewport is where the
 * browser's own chrome appears and disappears and where the thumb rests; a
 * toast there is either covered or tapped by accident. Full width less the
 * gutter, because 380px in a 375px viewport is not a card, it is a bar.
 */
@media (max-width: 35.9375em) {
	/*
	 * ON A PHONE THE TOAST SITS AT THE BOTTOM, NOT UNDER THE HEADER.
	 *
	 * It used to pin to the top edge and stretch the full width, which put it
	 * over the header — the one region a customer is most likely to be
	 * reaching for, and the place a notification is least expected on a phone.
	 * The client asked for it bottom-right, above the bottom bar.
	 *
	 * --bedi-bottombar-h is the lever: it is 0 today, so the toast simply sits
	 * above the safe area. When the mobile bottom bar lands, setting that one
	 * token lifts the toast clear of it without touching this rule.
	 *
	 * It also stops being full-bleed: a toast that spans the screen reads as a
	 * banner the visitor must deal with, and this one dismisses itself.
	 */
	.bedi-toasts {
		inset-block: auto calc(
			var(--bedi-bottombar-h, 0px) + var(--bedi-space-3) + env(safe-area-inset-bottom, 0px)
		);
		inset-inline: auto var(--bedi-space-3);
		max-inline-size: min(340px, calc(100vw - var(--bedi-space-3) * 2));
	}

	/* Entering from BELOW now, because that is the edge it comes from. */
	.bedi-toast {
		transform: translateY(12px) scale(0.98);
	}

	.bedi-toast.is-out {
		transform: translateY(-8px) scale(0.96);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bedi-toast,
	.bedi-toast.is-out,
	.bedi-toast__action,
	.bedi-toast__close {
		transition-duration: 1ms !important;
	}

	/*
	 * The transform is dropped entirely rather than made instant: a 1ms
	 * transition to translateX(16px) still moves the element, and the point of
	 * the preference is that it should not move.
	 */
	.bedi-toast,
	.bedi-toast.is-in,
	.bedi-toast.is-out {
		transform: none !important;
	}

	.bedi-toast__close:active {
		transform: none !important;
	}

	/*
	 * The countdown bar is NOT switched off. It is not decoration — it is the
	 * only thing telling the visitor the toast is about to leave, and removing
	 * it under reduced motion would take away information rather than movement.
	 * A linear scale on a 2px bar is about as inoffensive as motion gets.
	 */
}

@media (forced-colors: active) {
	/*
	 * The glass is gone in forced colours — there is no translucency to render
	 * it with — so the toast needs a real edge or it is loose text over the
	 * page.
	 */
	.bedi-toast {
		background-color: Canvas;
		border: 1px solid CanvasText;
	}

	.bedi-toast__close {
		border: 1px solid ButtonText;
	}
}

@media print {
	.bedi-toasts {
		display: none;
	}
}