/**
 * Unified Loader System
 *
 * Provides consistent loading states across the plugin using WordPress core
 * spinner with custom overlay and positioning styles.
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/shared
 * @author     Webstepper <contact@webstepper.io>
 * @copyright  2025 Webstepper
 * @license    GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html
 * @link       https://webstepper.io/wordpress/plugins/smart-cycle-discounts/
 * @since      1.0.0
 */

/* ==========================================================================
   Base Loader Overlay
   ========================================================================== */

.wsscd-loader-overlay {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px); /* Safari support */
	z-index: var(--wsscd-z-dropdown);
}

/* ==========================================================================
   Loader Content (Centered Container)
   ========================================================================== */

.wsscd-loader-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wsscd-gap-normal);
}

/* ==========================================================================
   Loader Text
   ========================================================================== */

.wsscd-loader-text {
	font-size: var(--wsscd-font-size-medium);
	color: var(--wsscd-color-text-muted);
	font-weight: var(--wsscd-font-weight-normal);
	line-height: 1.4;
}

/* ==========================================================================
   Full-Screen Loader
   Covers viewport excluding WordPress admin sidebar
   ========================================================================== */

.wsscd-loader-fullscreen {
	position: fixed;
	top: 0;
	left: 160px; /* WordPress admin sidebar width */
	right: 0;
	bottom: 0;
	z-index: var(--wsscd-z-notification); /* Above navigation (9999) to cover buttons during completion */
}

/* Adjust for folded sidebar */
@media screen and (max-width: 960px) {
	.wsscd-loader-fullscreen {
		left: 36px;
	}
}

/* Adjust for mobile (no sidebar) */
@media screen and (max-width: 782px) {
	.wsscd-loader-fullscreen {
		left: 0;
	}
}

/* ==========================================================================
   Container Loader
   Covers a specific container with absolute positioning
   ========================================================================== */

.wsscd-loader-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Inline Loader
   Small spinner for inline elements (no overlay)
   ========================================================================== */

.wsscd-loader-inline {
	display: none;
	align-items: center;
	justify-content: center;
	margin: 0 8px;
}

.wsscd-loader-inline.is-active {
	display: inline-flex;
}

.wsscd-loader-inline .spinner {
	float: none;
	margin: 0;
}

/* ==========================================================================
   Button Loader
   Spinner that replaces button text during processing
   ========================================================================== */

.wsscd-loader-button {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--wsscd-gap-tight);
}

.wsscd-loader-button .spinner {
	float: none;
	margin: 0;
}

.wsscd-loader-button .wsscd-loader-text {
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
}

/* Button loading state helper classes */
.wsscd-button-loading .wsscd-button-text {
	display: none;
}

.wsscd-button-loading .wsscd-loader-button {
	display: inline-flex;
}

/* ==========================================================================
   WordPress Spinner Adjustments
   Ensure WordPress spinner works correctly in all contexts
   ========================================================================== */

.wsscd-loader-overlay .spinner,
.wsscd-loader-content .spinner,
.wsscd-loader-inline .spinner,
.wsscd-loader-button .spinner {
	float: none;
	margin: 0;
}

/* Make spinner visible and active */
.wsscd-loader-overlay .spinner.is-active,
.wsscd-loader-content .spinner.is-active,
.wsscd-loader-inline .spinner.is-active,
.wsscd-loader-button .spinner.is-active {
	display: inline-block;
	visibility: visible;
}

/* ==========================================================================
   Animation States
   ========================================================================== */

/* Fade in loader overlay */
.wsscd-loader-overlay.wsscd-loader-fade-in {
	animation: wsscd-loader-fade-in 0.2s ease-in-out;
}

@keyframes wsscd-loader-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Fade out loader overlay */
.wsscd-loader-overlay.wsscd-loader-fade-out {
	animation: wsscd-loader-fade-out 0.2s ease-in-out;
}

@keyframes wsscd-loader-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Screen reader text for loading state - use .wsscd-sr-only from shared/_utilities.css */

/* Add ARIA live region for loading announcements */
.wsscd-loader-overlay[aria-live="polite"],
.wsscd-loader-overlay[aria-live="assertive"] {
	/* Ensure screen readers announce loading state */
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
	.wsscd-loader-overlay {
		background: var(--wsscd-color-white);
		border: 2px solid var(--wsscd-color-gray-900);
	}

	.wsscd-loader-text {
		color: var(--wsscd-color-gray-900);
		font-weight: var(--wsscd-font-weight-semibold);
	}
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wsscd-loader-overlay.wsscd-loader-fade-in,
	.wsscd-loader-overlay.wsscd-loader-fade-out {
		animation: none;
	}

	/* WordPress spinner respects reduced motion by default */
}