/**
 * Waito Animated Preloader — progress bar templates.
 *
 * Kept separate from frontend.css so the base overlay stays small. Every rule
 * here is original to this plugin.
 */

/* ================================================================
   Progress bars

   The template alone decides how the bar looks — there is no separate
   bar-style setting to disagree with it, so a template card, the live
   preview and the real overlay always render the same thing.

   Every template keeps the shared width from .waitoap-progress; only the
   ones whose identity is a different layout (top bar, stacked, centred)
   change it.
   ================================================================ */

/* Text + Line Bar — square edges. */
.waitoap-tpl-progress-line .waitoap-track {
	border-radius: 0;
}

/* Text + Pill Bar — fully rounded and a little chunkier. */
.waitoap-tpl-progress-pill .waitoap-track {
	height: calc(var(--waitoap-bar-height) * 1.6);
}

/* Percent Counter — the number is the whole loader. */
.waitoap-tpl-progress-percent .waitoap-progress {
	width: auto;
	justify-content: center;
}
.waitoap-tpl-progress-percent .waitoap-track {
	display: none;
}
.waitoap-tpl-progress-percent .waitoap-percent {
	min-width: 0;
	text-align: center;
	font-weight: 800;
	font-size: calc(var(--waitoap-percent-size, 12px) * 2.4);
	line-height: 1.1;
}

/* Top Bar — a hairline pinned to the top edge, no counter. */
.waitoap-preloader.waitoap-tpl-progress-top .waitoap-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: auto;
	gap: 0;
}
.waitoap-mini.waitoap-tpl-progress-top .waitoap-progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: auto;
	gap: 0;
}
.waitoap-tpl-progress-top .waitoap-track {
	height: 3px;
	border-radius: 0;
	background: transparent;
}
.waitoap-tpl-progress-top .waitoap-percent {
	display: none;
}

/* Centred Bar — counter sits under the bar. */
.waitoap-tpl-progress-centred .waitoap-progress {
	flex-direction: column;
	gap: 7px;
}
.waitoap-tpl-progress-centred .waitoap-track {
	width: 100%;
	flex: none;
}
.waitoap-tpl-progress-centred .waitoap-percent {
	min-width: 0;
	text-align: center;
}