/**
 * Loading States, Spinner Component & Toast Notification Styles.
 *
 * @package Fyeen
 */

/* ==========================================================================
   1. Spinner Component Styles & Keyframe Animations
   ========================================================================== */

.fyeen-spinner {
	display: inline-block;
	border: 2px solid rgba(26, 35, 126, 0.2);
	border-top-color: var(--fyeen-primary, #1a237e);
	border-radius: 50%;
	animation: fyeen-spinner-rotate 0.65s linear infinite;
	flex-shrink: 0;
}

.fyeen-spinner--small .fyeen-spinner {
	width: 14px;
	height: 14px;
	border-width: 2px;
}

.fyeen-spinner--medium .fyeen-spinner {
	width: 22px;
	height: 22px;
	border-width: 2.5px;
}

.fyeen-spinner--large .fyeen-spinner {
	width: 36px;
	height: 36px;
	border-width: 3px;
}

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

/* ==========================================================================
   2. Skeleton Loader Pulse Animations
   ========================================================================== */

.fyeen-skeleton {
	background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
	background-size: 200% 100%;
	animation: fyeen-skeleton-pulse 1.4s ease-in-out infinite;
	border-radius: 0.375rem;
}

.fyeen-skeleton-text {
	height: 1rem;
	width: 100%;
	margin-bottom: 0.5rem;
}

.fyeen-skeleton-img {
	width: 100%;
	aspect-ratio: 1 / 1;
}

@keyframes fyeen-skeleton-pulse {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   3. Fixed Toast Notification Overlay Container
   ========================================================================== */

.fyeen-toast-container {
	position: fixed;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 1090;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	max-width: 380px;
	width: calc(100vw - 2.5rem);
	pointer-events: none;
}

.fyeen-toast {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: 0.65rem;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
	border-left: 4px solid #1a237e;
	animation: fyeen-toast-slide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.fyeen-toast--success {
	border-left-color: #16a34a;
}

.fyeen-toast--error {
	border-left-color: #dc2626;
}

.fyeen-toast--warning {
	border-left-color: #b45309;
}

.fyeen-toast--info {
	border-left-color: #1a237e;
}

.fyeen-toast__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.fyeen-toast--success .fyeen-toast__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2316a34a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

.fyeen-toast--error .fyeen-toast__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23dc2626' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}

.fyeen-toast--warning .fyeen-toast__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23b45309' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

.fyeen-toast--info .fyeen-toast__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231a237e' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

.fyeen-toast__message {
	flex-grow: 1;
	font-size: 0.875rem;
	color: #0f172a;
	font-weight: 500;
	line-height: 1.4;
}

.fyeen-toast__close {
	background: none;
	border: 0;
	padding: 0;
	color: #64748b;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.fyeen-toast__close:hover {
	opacity: 1;
	color: #0f172a;
}

@keyframes fyeen-toast-slide {
	from {
		opacity: 0;
		transform: translateY(-12px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ==========================================================================
   4. Overlay Container Loading Mask
   ========================================================================== */

.fyeen-loading-mask {
	position: relative;
	pointer-events: none !important;
}

.fyeen-loading-mask::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 10;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(1px);
	border-radius: inherit;
}

.fyeen-loading-mask::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 11;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	margin-left: -14px;
	border: 3px solid rgba(26, 35, 126, 0.2);
	border-top-color: #1a237e;
	border-radius: 50%;
	animation: fyeen-spinner-rotate 0.65s linear infinite;
}