/**
 * Loading States & Skeleton Screens
 *
 * @package CurrencyFlow
 */

/* ==========================================================================
   Skeleton Loading Animations
   ========================================================================== */

@keyframes skeleton-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

@keyframes skeleton-shimmer {
	0% {
		background-position: -468px 0;
	}
	100% {
		background-position: 468px 0;
	}
}

.skeleton {
	display: inline-block;
	background: linear-gradient(
		90deg,
		#f0f0f0 0%,
		#f8f8f8 20%,
		#f0f0f0 40%,
		#f0f0f0 100%
	);
	background-size: 468px 100%;
	animation: skeleton-shimmer 1.2s ease-in-out infinite;
	border-radius: 4px;
}

.skeleton-text {
	display: block;
	height: 16px;
	width: 100%;
	margin: 4px 0;
}

.skeleton-flag {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ==========================================================================
   Loading State for Form Elements
   ========================================================================== */

.is-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid #ddd;
	border-top-color: #1a56db;
	border-radius: 50%;
	animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Hero Form Loading States
   ========================================================================== */

.hero-form__block.is-loading {
	opacity: 1;
}

.hero-form__block.is-loading .hero-form__block-input,
.hero-form__block.is-loading .hero-form__block-select {
	background: #f9fafb;
	color: transparent;
}

.hero-form__block.is-loading::after {
	top: 50%;
	right: 16px;
	left: auto;
	transform: translateY(-50%);
}

/* ==========================================================================
   Rates Table Loading
   ========================================================================== */

.rates-table .skeleton-row td {
	padding: 20px 16px;
}

.rates-table .skeleton-row .rates-table__currency {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rates-table .skeleton-row .rates-table__currency-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* ==========================================================================
   Error Messages
   ========================================================================== */

.hero-form__error,
.rates-error {
	padding: 12px 16px;
	margin-top: 12px;
	background: #fee;
	border-left: 4px solid #ef4444;
	border-radius: 8px;
	color: #991b1b;
	font-size: 14px;
	line-height: 1.5;
	animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Loading Overlay for Full Sections
   ========================================================================== */

.section-loading {
	position: relative;
	min-height: 200px;
}

.section-loading::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	z-index: 10;
}

.section-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 4px solid #e5e7eb;
	border-top-color: #1a56db;
	border-radius: 50%;
	animation: spinner 0.8s linear infinite;
	z-index: 11;
}

/* ==========================================================================
   Disabled State
   ========================================================================== */

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   Success States
   ========================================================================== */

.success-message {
	padding: 12px 16px;
	margin-top: 12px;
	background: #d1fae5;
	border-left: 4px solid #10b981;
	border-radius: 8px;
	color: #065f46;
	font-size: 14px;
	line-height: 1.5;
	animation: slideIn 0.3s ease-out;
}

/* ==========================================================================
   Loading Button State
   ========================================================================== */

.btn--loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.btn--loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spinner 0.6s linear infinite;
}

/* ==========================================================================
   Responsive Loading States
   ========================================================================== */

@media (max-width: 768px) {
	.skeleton-row td {
		padding: 16px 12px;
	}

	.hero-form__error,
	.rates-error {
		font-size: 13px;
		padding: 10px 14px;
	}
}

/* ==========================================================================
   Dark Mode Support (if implemented)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.skeleton {
		background: linear-gradient(
			90deg,
			#2d3748 0%,
			#4a5568 20%,
			#2d3748 40%,
			#2d3748 100%
		);
	}

	.is-loading::after {
		border-color: #4a5568;
		border-top-color: #3b82f6;
	}

	.section-loading::before {
		background: rgba(0, 0, 0, 0.6);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.skeleton,
	.is-loading::after,
	.section-loading::after,
	.btn--loading::after {
		animation: none;
	}

	.skeleton {
		opacity: 0.7;
	}

	.hero-form__error,
	.rates-error,
	.success-message {
		animation: none;
	}
}

/* ==========================================================================
   Loading Text Alternative
   ========================================================================== */

.loading-text {
	display: inline-block;
	color: #6b7280;
	font-size: 14px;
	font-style: italic;
}

.loading-text::after {
	content: '...';
	animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
	0%, 20% {
		content: '.';
	}
	40% {
		content: '..';
	}
	60%, 100% {
		content: '...';
	}
}