/* One loading animation for the whole site (added to every public page by core/view.js).
 *
 * The marketplace's three pulsing blue dots are the model: the same dots, at three sizes,
 * are used for every kind of waiting:
 *   .nr-dots            page content and overlays (the marketplace size)
 *   .nr-dots--md        a section or table that is loading, with a short line of text
 *   .nr-dots--sm        inside buttons
 * Helpers and the automatic upgrade of older loaders are in assets/js/nr-loading.js. */

.nr-dots {
	--nr-dot: 18px;
	--nr-dot-gap: 12px;
	--nr-dot-color: #4260cb;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nr-dot-gap);
	line-height: 0;
	vertical-align: middle;
}
.nr-dots i {
	display: block;
	width: var(--nr-dot);
	height: var(--nr-dot);
	border-radius: 50%;
	background: var(--nr-dot-color);
	animation: nr-dot 1.2s ease-in-out infinite;
}
.nr-dots i:nth-child(2) { animation-delay: .16s; }
.nr-dots i:nth-child(3) { animation-delay: .32s; }
.nr-dots--md { --nr-dot: 11px; --nr-dot-gap: 7px; }
.nr-dots--sm { --nr-dot: 7px; --nr-dot-gap: 5px; }
.nr-dots--white { --nr-dot-color: #fff; }

@keyframes nr-dot {
	0%, 80%, 100% { transform: scale(.55); opacity: .5; }
	40% { transform: scale(1); opacity: 1; }
}

/* A section that is loading: dots with a short line under them */
.nr-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 40px 16px;
	text-align: center;
}
.nr-loading__text {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #8c94b0;
}

/* Older "Loading…" lines upgraded in place: dots before the text, centred */
.nr-loading-inline {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #8c94b0;
}
td.nr-loading-inline, th.nr-loading-inline { display: table-cell !important; text-align: center; }
td.nr-loading-inline .nr-dots, th.nr-loading-inline .nr-dots { margin-right: 10px; }

/* A busy button keeps its size; its label is hidden and the dots sit in the middle,
   white on filled buttons and blue on light ones (chosen by nr-loading.js). */
.nr-busy {
	position: relative !important;
	color: transparent !important;
	pointer-events: none;
	cursor: progress;
}
.nr-busy > *:not(.nr-busy__dots) { visibility: hidden; }
.nr-busy__dots {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.nr-busy__dots .nr-dots { --nr-dot-color: var(--nr-busy-color, #fff); }
/* Icon-only buttons (a bin, an ×) are too narrow for the button dots, so they get tiny ones */
.nr-busy--icon .nr-busy__dots .nr-dots { --nr-dot: 4px; --nr-dot-gap: 2px; }

/* The checkout's payment-button dots: the same shape and timing as everything else */
.dot-class .white-dot {
	width: 8px !important;
	height: 8px !important;
	margin: 0 3px !important;
	background: #fff !important;
	animation: nr-dot 1.2s ease-in-out infinite !important;
}
.dot-class .white-dot:nth-child(2) { animation-delay: .16s !important; }
.dot-class .white-dot:nth-child(3) { animation-delay: .32s !important; }

/* Old loader GIF wrappers keep their overlay, now holding the dots */
.custome-loader .nr-dots, .an-loader-wrap .nr-dots, .nc-loader-wrap .nr-dots, .pt-loader .nr-dots { position: relative; z-index: 100; }

@media (prefers-reduced-motion: reduce) {
	.nr-dots i, .dot-class .white-dot { animation-duration: 2.4s !important; }
}