/**
 * استایل‌های Frontend برای SPA Mode
 *
 * @package    Kupal
 * @subpackage Assets\CSS
 */

/* Namespace برای جلوگیری از تداخل */

/* ============================================
   مدل 1: نوار افقی (بالای صفحه) - پیش‌فرض
   ============================================ */
.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;
}

/* ============================================
   مدل 2: نوار عمودی (سمت راست)
   ============================================ */
.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;
}

/* ============================================
   مدل 3: دایره‌ای (مرکز صفحه)
   ============================================ */
.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); }
}

/* ============================================
   مدل 4: چرخان (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;
}

.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); }
}

/* ============================================
   مدل 5: اسکلت (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-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, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 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; }
}

/* ============================================
   مدل 6: ضربان (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;
}

.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;
	}
}

/* ============================================
   مدل 7: محو شدن (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 برای محتوا
   ============================================ */
.kupal-content-fade {
	opacity: 0;
	transition: opacity 0.3s ease;
}

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