/* ==========================================================================
   DH Spinner — Shared loading indicators
   Three tiers: roundel (prominent), inline (small CSS), button (JS-controlled)
   ========================================================================== */

/* ------------------------------------------------------------------
   Base animation keyframes
   ------------------------------------------------------------------ */
@keyframes dh-spin {
	to { transform: rotate(360deg); }
}

@keyframes dh-roundel-spin {
	0%   { transform: rotate(0deg); opacity: 0.4; }
	50%  { opacity: 1; }
	100% { transform: rotate(360deg); opacity: 0.4; }
}

/* ------------------------------------------------------------------
   Tier 1: Roundel Spinner (prominent loading states, 36px+)
   Uses roundel PNG with CSS border-spinner fallback.
   If image fails to load, border-spinner shows through.
   ------------------------------------------------------------------ */
.dh-spinner-roundel {
	display: inline-block;
	border-radius: 50%;
	border: 3px solid #e2e8f0;
	border-top-color: #811DD1;
	background: var(--dh-roundel-url, url('../img/dh-roundel.png')) center / contain no-repeat;
	animation: dh-roundel-spin 1.2s ease-in-out infinite;
}

/* Utility: add roundel overlay to any existing border-spinner.
   Apply alongside the plugin's own spinner class, e.g.:
   <div class="dh-msp-spinner dh-has-roundel"></div>
   Or use in CSS: background-image: var(--dh-roundel-url); */


/* ------------------------------------------------------------------
   Tier 2: Inline Spinner (small, next to buttons/text, 16-24px)
   Pure CSS, no image.
   ------------------------------------------------------------------ */
.dh-spinner-inline {
	display: inline-block;
	border-radius: 50%;
	border: 2px solid #e2e8f0;
	border-top-color: #811DD1;
	animation: dh-spin 0.8s linear infinite;
}

/* ------------------------------------------------------------------
   Size variants (apply alongside .dh-spinner-roundel or .dh-spinner-inline)
   ------------------------------------------------------------------ */
.dh-spinner-sm  { width: 18px; height: 18px; }
.dh-spinner-md  { width: 36px; height: 36px; }
.dh-spinner-lg  { width: 48px; height: 48px; }
.dh-spinner-xl  { width: 64px; height: 64px; }

/* Adjust border width for larger sizes */
.dh-spinner-lg.dh-spinner-roundel,
.dh-spinner-xl.dh-spinner-roundel { border-width: 4px; }

.dh-spinner-sm.dh-spinner-inline  { border-width: 2px; }
.dh-spinner-md.dh-spinner-inline  { border-width: 2px; }
.dh-spinner-lg.dh-spinner-inline  { border-width: 3px; }

/* ------------------------------------------------------------------
   Tier 3: Button spinner state (JS-controlled)
   Applied by DH_Spinner.buttonOn(), removed by buttonOff().
   ------------------------------------------------------------------ */
.dh-spinner-active {
	position: relative;
	pointer-events: none;
}

.dh-spinner-active .dh-spinner-btn-img {
	display: inline-block;
	animation: dh-roundel-spin 1.2s ease-in-out infinite;
}

/* CSS fallback element inside buttons (shown if image onerror fires) */
.dh-spinner-btn-fallback {
	display: inline-block;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	animation: dh-spin 0.8s linear infinite;
}

/* ------------------------------------------------------------------
   Container overlay (for DH_Spinner.show/hide on sections)
   ------------------------------------------------------------------ */
.dh-spinner-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.6);
	z-index: 100;
}

/* ------------------------------------------------------------------
   Accessibility: reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.dh-spinner-roundel,
	.dh-spinner-inline,
	.dh-spinner-btn-img,
	.dh-spinner-btn-fallback {
		animation-duration: 4s;
	}
}