/**
 * Caiman Media Wishlist - functional styles only.
 *
 * This file deliberately contains no colours, no borders, no spacing and no
 * typography. Every site this plugin lands on has its own design system, and a
 * plugin stylesheet that ships opinions is a plugin stylesheet that gets fought
 * with `!important` for the rest of its life. What remains here is the part
 * that is behaviour rather than taste: hiding a live region from sight but not
 * from screen readers, and signalling that a control is mid-request.
 *
 * Style the buttons from your own system. The hooks are:
 *
 *   [data-cmw-toggle]                     the button
 *   [data-cmw-toggle][aria-pressed="true"]  saved
 *   .cmw-is-saved                         same state as a class, for convenience
 *   .cmw-is-busy                          request in flight
 *   [data-cmw-count]                      the number saved
 *   .cmw-count--empty                     that number is zero
 */

/* The announcement region: read aloud, never seen, and never affecting layout.
   clip-path alone is not enough on older engines, hence the belt-and-braces. */
.cmw-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Mid-request. Pointer events stay on so the button keeps focus and its
   accessible name; only the affordance changes. */
.cmw-is-busy {
	cursor: progress;
	opacity: 0.6;
}

/* A toggle is a button. If a site renders it as one, this stops a stray theme
   rule from making it look inert. */
[data-cmw-toggle],
[data-cmw-add-to-cart],
[data-cmw-clear] {
	cursor: pointer;
}

[data-cmw-toggle][aria-busy="true"],
[data-cmw-add-to-cart][aria-busy="true"] {
	pointer-events: none;
}

/* ---------- confirmation toast ----------
   The one place this stylesheet carries a visible default, and the exception
   proves the rule: everywhere else the markup is the site's own, so shipping
   colours would be shipping opinions. The toast is chrome the script creates
   itself, so a site that styles nothing would otherwise get bare text floating
   over the page. The default below is intentionally plain and trivially
   overridden - every declaration loses to a single class rule.

   visibility is transitioned with a delay rather than toggled, so the toast is
   removed from the accessibility tree and from hit-testing once faded, without
   snapping out mid-fade. */
.cmw-toast {
	position: fixed;
	z-index: 100000;
	left: 50%;
	bottom: 24px;
	max-width: min(92vw, 420px);
	transform: translate(-50%, 10px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
	padding: 14px 20px;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	color: #111;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}
.cmw-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	visibility: visible;
	transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
	.cmw-toast {
		transition-duration: 1ms;
	}
}

/* The empty-state region the script reveals when the last item is removed.
   [hidden] is only display:none at user-agent specificity (0,0,1), so any
   design-system class setting display on the same element silently wins and the
   "your wishlist is empty" message sits there under a full grid. This plugin
   owns the [data-cmw-empty] contract, so it owns making hidden actually hide. */
[data-cmw-empty][hidden] {
	display: none !important;
}

/* The count element's opt-in "hide at zero". Two classes because the script
   keeps .cmw-count--empty in sync per visitor, while --hide-empty is the
   author's choice; only the combination hides anything. */
.cmw-count--hide-empty.cmw-count--empty {
	display: none;
}

/* Respect the setting rather than assuming everyone wants the transition. */
@media (prefers-reduced-motion: reduce) {
	.cmw-is-busy {
		transition: none !important;
	}
}