/**
 * APEX RecSite Builder — Elementor Widgets Styles
 *
 * Skeleton loading states (F4), Load More button (F2), and shared
 * widget utility classes used by the frontend JS (widgets.js).
 *
 * @package ApexRecSiteBuilderCore
 * @since   1.0.0
 */

/* -----------------------------------------------------------------------
   Skeleton loading animation (F4)
   ----------------------------------------------------------------------- */

/**
 * Shimmer keyframe — translates a bright overlay left-to-right entirely on
 * the GPU compositor (transform only, no paint or layout triggered).
 */
@keyframes apex-shimmer {
	to { transform: translateX( 100% ); }
}

/**
 * Base skeleton element: a rounded rect with the shimmer overlay.
 */
.apex-skeleton-card {
	background: #ffffff;
	border: 1px solid #e0e3e5;
	border-radius: var(--apex-radius, 4px);
	padding: 20px;
	margin-bottom: 12px;
}

.apex-skeleton-card__title,
.apex-skeleton-card__meta span,
.apex-skeleton-card__excerpt {
	display: block;
	border-radius: 4px;
	background: #f0f0f0;
	overflow: hidden;
	position: relative;
}

.apex-skeleton-card__title::after,
.apex-skeleton-card__meta span::after,
.apex-skeleton-card__excerpt::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba( 255, 255, 255, 0.6 ) 50%,
		transparent 100%
	);
	transform: translateX( -100% );
	will-change: transform;
	animation: apex-shimmer 1.4s ease-in-out infinite;
}

.apex-skeleton-card__title {
	height: 20px;
	width: 60%;
	margin-bottom: 12px;
}

.apex-skeleton-card__meta {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.apex-skeleton-card__meta span {
	height: 14px;
	width: 120px;
}

.apex-skeleton-card__excerpt {
	height: 14px;
	width: 90%;
}

/* -----------------------------------------------------------------------
   Load More button state (F2)
   ----------------------------------------------------------------------- */

.apex-load-more-wrap {
	text-align: center;
	margin-top: 24px;
}

.apex-load-more {
	min-width: 180px;
	transition: opacity 0.2s ease;
}

.apex-load-more:disabled,
.apex-load-more.apex-loading {
	opacity: 0.6;
	cursor: wait;
}

/* -----------------------------------------------------------------------
   General loading state overlay
   ----------------------------------------------------------------------- */

/**
 * When .apex-loading is on the .apex-job-listings-wrap container, fade
 * the entire block to indicate in-flight data. The skeleton cards
 * injected by showSkeleton() are visible at full opacity inside.
 */
.apex-job-listings-wrap.apex-loading .apex-pagination,
.apex-job-listings-wrap.apex-loading .apex-job-listings-count {
	opacity: 0;
	pointer-events: none;
}

/* Visually hide the error state until needed. */
.apex-error {
	color: #b91c1c;
	font-size: 0.9em;
	padding: 12px;
	background: #fef2f2;
	border-radius: var(--apex-radius, 4px);
	border: 1px solid #fecaca;
}