/**
 * Frontend Styles for SPA Mode
 *
 * @package    Kupal
 * @subpackage Assets\CSS
 */

/* Namespace to prevent conflicts */

/* ============================================
   Model 1: Horizontal bar (top of page) - Default
   ============================================ */
.kupal-spa-loading.kupal-loading-bar-horizontal,
.kupal-loading-bar-horizontal {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: rgba(0, 0, 0, 0.1);
	z-index: 999999;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	direction: rtl;
	contain: layout style paint;
}

.kupal-loading-bar-horizontal.active {
	visibility: visible;
	opacity: 1;
}

.kupal-loading-bar-horizontal .kupal-loading-progress {
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.2s ease;
	box-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
	position: absolute;
	right: 0;
	top: 0;
	background: var(--kupal-spa-loading-color, #00c2ff);
	will-change: transform;
	backface-visibility: hidden;
}

/* ============================================
   Model 2: Vertical bar (right side)
   ============================================ */
.kupal-loading-bar-vertical {
	position: fixed;
	top: 0;
	right: 0;
	width: 4px;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	z-index: 999999;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	contain: layout style paint;
}

.kupal-loading-bar-vertical.active {
	visibility: visible;
	opacity: 1;
}

.kupal-loading-bar-vertical .kupal-loading-progress {
	width: 100%;
	height: 100%;
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 0.2s ease;
	box-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
	position: absolute;
	right: 0;
	top: 0;
	background: var(--kupal-spa-loading-color, #00c2ff);
	will-change: transform;
	backface-visibility: hidden;
}

/* ============================================
   Model 3: Circular (center of page)
   ============================================ */
.kupal-loading-circle {
	position: fixed;
	top: 50%;
	right: 50%;
	transform: translate3d(50%, -50%, 0);
	width: 60px;
	height: 60px;
	z-index: 999999;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	contain: layout style paint;
}

.kupal-loading-circle.active {
	visibility: visible;
	opacity: 1;
}

.kupal-loading-circle .kupal-loading-progress {
	width: 100%;
	height: 100%;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--kupal-spa-loading-color, #00c2ff);
	border-radius: 50%;
	animation: kupal-spin 1s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
	transform-origin: center center;
}

@keyframes kupal-spin {
	0% {
		transform: rotate3d(0, 0, 1, 0deg);
	}

	100% {
		transform: rotate3d(0, 0, 1, 360deg);
	}
}

/* ============================================
   Model 4: Spinner (Spinner)
   ============================================ */
.kupal-loading-spinner {
	position: fixed;
	top: 50%;
	right: 50%;
	transform: translate3d(50%, -50%, 0);
	width: 50px;
	height: 50px;
	z-index: 999999;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	contain: layout style paint;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.kupal-loading-spinner.active {
	visibility: visible;
	opacity: 1;
}

.kupal-loading-spinner .kupal-loading-progress {
	width: 100%;
	height: 100%;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--kupal-spa-loading-color, #00c2ff);
	border-right-color: var(--kupal-spa-loading-color, #00c2ff);
	border-radius: 50%;
	animation: kupal-spin-fast 0.8s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
	transform-origin: center center;
}

@keyframes kupal-spin-fast {
	0% {
		transform: rotate3d(0, 0, 1, 0deg);
	}

	100% {
		transform: rotate3d(0, 0, 1, 360deg);
	}
}

/* ============================================
   Model 5: Skeleton (Skeleton)
   ============================================ */
.kupal-loading-skeleton {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.95);
	z-index: 999998;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	direction: rtl;
	contain: layout style paint;
	--kupal-skeleton-color: #e0e0e0;
	--kupal-skeleton-color-light: #f0f0f0;
}

.kupal-loading-skeleton.active {
	visibility: visible;
	opacity: 1;
}

.kupal-loading-skeleton .kupal-skeleton-content {
	max-width: 1200px;
	margin: 40px auto;
	padding: 20px;
}

.kupal-loading-skeleton .kupal-skeleton-line {
	height: 20px;
	background: linear-gradient(90deg, var(--kupal-skeleton-color-light) 25%, var(--kupal-skeleton-color) 50%, var(--kupal-skeleton-color-light) 75%);
	background-size: 200% 100%;
	animation: kupal-skeleton-loading 1.5s ease-in-out infinite;
	border-radius: 4px;
	margin-bottom: 15px;
	will-change: background-position;
	backface-visibility: hidden;
}

.kupal-loading-skeleton .kupal-skeleton-line:nth-child(1) {
	width: 100%;
}

.kupal-loading-skeleton .kupal-skeleton-line:nth-child(2) {
	width: 90%;
}

.kupal-loading-skeleton .kupal-skeleton-line:nth-child(3) {
	width: 100%;
}

.kupal-loading-skeleton .kupal-skeleton-line:nth-child(4) {
	width: 80%;
}

.kupal-loading-skeleton .kupal-skeleton-line:nth-child(5) {
	width: 100%;
}

@keyframes kupal-skeleton-loading {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kupal-loading-skeleton .kupal-skeleton-line {
		animation: none;
		background-position: 100% 0;
	}
}

/* ============================================
   Model 6: Pulse (Pulse)
   ============================================ */
.kupal-loading-pulse {
	position: fixed;
	top: 50%;
	right: 50%;
	transform: translate3d(50%, -50%, 0);
	width: 60px;
	height: 60px;
	z-index: 999999;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	contain: layout style paint;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.kupal-loading-pulse.active {
	visibility: visible;
	opacity: 1;
}

.kupal-loading-pulse .kupal-loading-progress {
	width: 100%;
	height: 100%;
	background: var(--kupal-spa-loading-color, #00c2ff);
	border-radius: 50%;
	animation: kupal-pulse 1.5s ease-in-out infinite;
	will-change: transform, opacity;
	backface-visibility: hidden;
	transform-origin: center center;
}

@keyframes kupal-pulse {

	0%,
	100% {
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}

	50% {
		transform: scale3d(1.2, 1.2, 1);
		opacity: 0.7;
	}
}

/* ============================================
   Model 7: Fade (Fade)
   ============================================ */
.kupal-loading-fade {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.9);
	z-index: 999998;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	contain: layout style paint;
}

.kupal-loading-fade.active {
	visibility: visible;
	opacity: 1;
}

.kupal-loading-fade .kupal-loading-progress {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate3d(50%, -50%, 0);
	width: 50px;
	height: 50px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--kupal-spa-loading-color, #00c2ff);
	border-radius: 50%;
	animation: kupal-spin 1s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
	transform-origin: center center;
}


/* ============================================
   Fade animation for content
   ============================================ */
.kupal-content-fade {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.kupal-content-fade.active {
	opacity: 1;
}

/* ============================================
   Loading Text (for Spinner, Pulse, Fade)
   ============================================ */
.kupal-loading-text {
	position: absolute;
	font-family: 'Logical', Tahoma, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #555;
	text-align: center;
	direction: rtl;
	white-space: nowrap;
	animation: kupal-text-fade 1.5s ease-in-out infinite;
	user-select: none;
	pointer-events: none;
	letter-spacing: 0.5px;
}

@keyframes kupal-text-fade {

	0%,
	100% {
		opacity: 0.7;
	}

	50% {
		opacity: 1;
	}
}

/* Position for Spinner */
.kupal-loading-spinner .kupal-loading-text {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	right: 0;
	margin: 0 auto;
	width: max-content;
}

/* Position for Pulse */
.kupal-loading-pulse .kupal-loading-text {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	right: 0;
	margin: 0 auto;
	width: max-content;
}

/* Position for Fade */
.kupal-loading-fade .kupal-loading-text {
	position: absolute;
	top: calc(50% + 40px);
	left: 0;
	right: 0;
	margin: 0 auto;
	width: max-content;
	font-size: 16px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.kupal-loading-text {
		animation: none;
		opacity: 0.85;
	}
}