/* Skeleton Loading Animation */
.skeleton {
	position: relative;
	overflow: hidden;
	background-color: #e9ecef;
	border-radius: 4px;
}

.skeleton::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.4),
		transparent
	);
	animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* Skeleton variants */
.skeleton-text {
	height: 14px;
	margin-bottom: 10px;
	border-radius: 4px;
}

.skeleton-text-sm {
	height: 10px;
	margin-bottom: 8px;
	border-radius: 3px;
}

.skeleton-title {
	height: 24px;
	width: 40%;
	margin-bottom: 16px;
	border-radius: 4px;
}

.skeleton-img {
	width: 100%;
	height: 300px;
	border-radius: 8px;
}

.skeleton-img-sm {
	width: 100%;
	height: 180px;
	border-radius: 8px;
}

.skeleton-card {
	padding: 20px;
	border-radius: 8px;
	background: #fff;
}

/* Skeleton section layout */
.skeleton-section {
	padding: 2rem;
}

.skeleton-section-header {
	height: 36px;
	width: 30%;
	margin: 0 auto 1.5rem auto;
	border-radius: 4px;
}

.skeleton-row {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.skeleton-col {
	flex: 1;
}

/* Carousel skeleton */
.skeleton-carousel {
	width: 100%;
	height: 400px;
	border-radius: 8px;
}

/* Two-column layout skeleton */
.skeleton-two-col {
	display: flex;
	gap: 2rem;
	padding: 2rem;
}

.skeleton-two-col .skeleton-col-img {
	flex: 0 0 40%;
}

.skeleton-two-col .skeleton-col-text {
	flex: 1;
}