/* =========================================
   AECP Skeleton Loader Styles
========================================= */

.aecp-skeleton {
	display: grid;
	gap: 12px;
	width: 100%;
	position: relative;
}

/* =========================================
   Base Shapes
========================================= */

.aecp-line,
.aecp-block {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--aecp-base, #e5e7eb);
	border-radius: var(--aecp-radius, 12px);
}

.aecp-line {
	height: 14px;
	width: 100%;
}

.aecp-line--single {
	width: 70%;
}

.aecp-line--short {
	width: 40%;
}

.aecp-line--medium {
	width: 65%;
}

.aecp-line--button {
	width: 45%;
	height: 36px;
}

.aecp-block {
	min-height: 90px;
}

.aecp-block--hero {
	min-height: 160px;
}

.aecp-block--image,
.aecp-block--product {
	aspect-ratio: 4 / 3;
}

.aecp-block--thumb {
	width: 90px;
	height: 90px;
	min-height: 90px;
}

/* =========================================
   Universal Shimmer Overlay
   Applies to every skeleton shape.
========================================= */

.aecp-line::after,
.aecp-block::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--aecp-highlight, #f8fafc) 45%,
		transparent 100%
	);
	animation: aecp-universal-shimmer var(--aecp-speed, 1200ms) ease-in-out infinite;
}

/* =========================================
   Style Variants
========================================= */

.aecp-skeleton--classic-pulse .aecp-line,
.aecp-skeleton--classic-pulse .aecp-block {
	animation: aecp-pulse var(--aecp-speed, 1200ms) ease-in-out infinite;
}

.aecp-skeleton--wave .aecp-line,
.aecp-skeleton--wave .aecp-block {
	animation: aecp-wave var(--aecp-speed, 1200ms) ease-in-out infinite;
}

.aecp-skeleton--shimmer .aecp-line::after,
.aecp-skeleton--shimmer .aecp-block::after,
.aecp-skeleton--card .aecp-line::after,
.aecp-skeleton--card .aecp-block::after,
.aecp-skeleton--woo-grid .aecp-line::after,
.aecp-skeleton--woo-grid .aecp-block::after,
.aecp-skeleton--image-text .aecp-line::after,
.aecp-skeleton--image-text .aecp-block::after,
.aecp-skeleton--table-rows .aecp-line::after,
.aecp-skeleton--table-rows .aecp-block::after,
.aecp-skeleton--blocks .aecp-line::after,
.aecp-skeleton--blocks .aecp-block::after,
.aecp-skeleton--single-line .aecp-line::after,
.aecp-skeleton--multi-line .aecp-line::after {
	animation-name: aecp-universal-shimmer;
}

/* =========================================
   Layout Types
========================================= */

.aecp-skeleton-grid,
.aecp-woo-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.aecp-woo-card {
	display: grid;
	gap: 10px;
}

.aecp-image-text {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 14px;
	align-items: center;
}

.aecp-table {
	display: grid;
	gap: 10px;
}

.aecp-table-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
}

/* =========================================
   Staggered Wave Delays
========================================= */

.aecp-wave-delay-1 {
	animation-delay: 100ms;
}

.aecp-wave-delay-2 {
	animation-delay: 200ms;
}

.aecp-wave-delay-3 {
	animation-delay: 300ms;
}

.aecp-wave-delay-4 {
	animation-delay: 400ms;
}

.aecp-wave-delay-5 {
	animation-delay: 500ms;
}

/* =========================================
   Lottie / Custom SVG
========================================= */

.aecp-skeleton--lottie {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
}

.aecp-skeleton--custom-svg svg {
	width: 100%;
	height: auto;
	max-height: 180px;
	opacity: 0.85;
	animation: aecp-pulse var(--aecp-speed, 1200ms) ease-in-out infinite;
}

/* =========================================
   Loaded/Error States
========================================= */

.aecp-ajax-container.aecp-is-loaded .aecp-skeleton,
.aecp-ajax-container.aecp-is-fallback .aecp-skeleton {
	display: none;
}

.aecp-loaded-content {
	animation: aecp-fade-in 260ms ease both;
}

/* =========================================
   Animations
========================================= */

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

	100% {
		transform: translateX(100%);
	}
}

@keyframes aecp-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.58;
	}
}

@keyframes aecp-wave {
	0%,
	100% {
		transform: scaleX(1);
		opacity: 0.78;
	}

	50% {
		transform: scaleX(0.96);
		opacity: 1;
	}
}

@keyframes aecp-fade-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================================
   Reduced Motion Accessibility
========================================= */

@media (prefers-reduced-motion: reduce) {
	.aecp-line,
	.aecp-block,
	.aecp-line::after,
	.aecp-block::after,
	.aecp-skeleton--custom-svg svg,
	.aecp-loaded-content {
		animation: none !important;
		transform: none !important;
	}
}

/* Disable skeleton loader per Elementor element */
.aecp-ajax-container.aecp-no-skeleton > .aecp-skeleton,
.aecp-ajax-container[data-aecp-disable-skeleton="1"] > .aecp-skeleton {
	display: none !important;
}

.aecp-ajax-container.aecp-no-skeleton,
.aecp-ajax-container[data-aecp-disable-skeleton="1"] {
	background: transparent !important;
}


/* 1.0.6 preview spacing fixes for complex skeleton layouts */
.aecp-skeleton--woo-product-grid,
.aecp-skeleton--woocommerce-product-grid,
.aecp-skeleton--product-grid {
	gap: 18px !important;
}

.aecp-skeleton--woo-product-grid .aecp-skeleton__item,
.aecp-skeleton--woocommerce-product-grid .aecp-skeleton__item,
.aecp-skeleton--product-grid .aecp-skeleton__item {
	margin-bottom: 18px !important;
}

.aecp-skeleton--image-text,
.aecp-skeleton--image-with-text,
.aecp-skeleton--media-text {
	gap: 22px !important;
	align-items: flex-start !important;
}

.aecp-skeleton--image-text > *,
.aecp-skeleton--image-with-text > *,
.aecp-skeleton--media-text > * {
	margin-bottom: 10px !important;
}