/**
 * Widget fallback image — on-page presentation.
 *
 * Styles the <img> this plugin injects into the theme's widget shortcodes
 * (.ew-widget / .pw-widget / .ppw-widget). It serves as the initial loader and,
 * when the theme's widget JS keeps it on a failed handshake, the on-page
 * fallback. These rules used to live in the theme's *widgets.css; they moved
 * here so the plugin owns its own presentation and the theme stays untouched.
 *
 * Selectors target the theme's stable widget wrapper classes — keep them in
 * sync if the theme ever renames those.
 */

/* The injected image: block, full-width, rounded, fades in when shown. */
.widget-fallback-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.75rem;
	opacity: 0;
	animation: widget-fade-in 0.4s ease forwards;
}

@keyframes widget-fade-in {
	to {
		opacity: 1;
	}
}

/* Reserve roughly the live widget's height while the loader image is up so
   swapping it for the mounted widget doesn't jump the page. Tunable. */
.ew-widget[data-widget="explorer"] {
	min-height: 360px;
}
.ew-widget[data-widget="quotes"] {
	min-height: 260px;
}
.pw-widget[data-widget="tug_of_war"] {
	min-height: 260px;
}
.pw-widget[data-widget="tracker"] {
	min-height: 300px;
}
.ppw-widget[data-widget="scenario"] {
	min-height: 360px;
}
.ppw-widget[data-widget="target"] {
	min-height: 240px;
}
.ppw-widget[data-widget="ratings"] {
	min-height: 200px;
}

/* Soft fade-in for the live widget when it replaces the loader image, so the
   swap isn't a hard cut. The fallback image keeps its own fade above. */
@keyframes widget-content-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.ew-widget[aria-busy="false"] > *:not(.widget-fallback-img),
.pw-widget[aria-busy="false"] > *:not(.widget-fallback-img),
.ppw-widget[aria-busy="false"] > *:not(.widget-fallback-img) {
	animation: widget-content-in 0.4s ease both;
}