/* ==========================================================================
 * Fast Woo Checkout — Skeleton Loader (UX 1.0)
 * Cart / Checkout loading experience
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Shimmer keyframes
 * -------------------------------------------------------------------------- */

@keyframes fwc-shimmer {
	0%   { background-position: -600px 0; }
	100% { background-position:  600px 0; }
}

.fwc-shimmer {
	background: linear-gradient(
		90deg,
		#f3f4f6 25%,
		#ececec 50%,
		#f3f4f6 75%
	);
	background-size: 1200px 100%;
	animation: fwc-shimmer 1.35s ease-in-out infinite;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
 * Real content fade-in — only fires on actual rendered elements, not skeleton
 * (.fwc-cart-item, .fwc-cart-empty, .fwc-checkout-card are set by JS)
 * -------------------------------------------------------------------------- */

@keyframes fwc-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.fwc-cart-items > .fwc-cart-item,
.fwc-cart-items > .fwc-cart-empty,
.fwc-checkout-cart > .fwc-checkout-card,
.fwc-checkout-cart > .fwc-checkout-empty,
.fwc-checkout-form > .fwc-checkout-card {
	animation: fwc-fadein 0.22s ease-out;
}

/* --------------------------------------------------------------------------
 * Min-height: prevents page jump while skeleton is visible
 * -------------------------------------------------------------------------- */

.fwc-cart[aria-busy="true"] .fwc-cart-items {
	min-height: 230px;
}

.fwc-checkout[aria-busy="true"] .fwc-checkout-form,
.fwc-checkout[aria-busy="true"] .fwc-checkout-cart {
	min-height: 260px;
}

/* ==========================================================================
 * Cart skeleton item
 * Mirrors .fwc-cart-item: grid-template-columns: 96px minmax(0, 1fr) auto
 * ========================================================================== */

.fwc-skeleton-item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 56px;
	gap: 16px;
	align-items: start;
	padding: 18px;
	border: 1px solid #e5e7eb;
	border-radius: 2px;
	background: #ffffff;
}

.fwc-skel-image {
	width: 96px;
	height: 96px;
	border-radius: 2px;
	flex-shrink: 0;
}

.fwc-skel-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 4px;
}

.fwc-skel-line {
	height: 14px;
	border-radius: 2px;
	width: 100%;
}

.fwc-skel-line--title    { height: 18px; width: 70%; }
.fwc-skel-line--subtitle { width: 42%; }
.fwc-skel-line--controls { height: 36px; width: 58%; }

.fwc-skel-price {
	width: 56px;
	height: 18px;
	border-radius: 2px;
	margin-top: 4px;
}

/* ==========================================================================
 * Cart summary skeleton (inside .fwc-cart-summary)
 * .fwc-cart-summary already provides padding, border, bg from fast-checkout.css
 * ========================================================================== */

.fwc-skeleton-summary {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fwc-skel-summary-row {
	height: 18px;
	border-radius: 2px;
}

.fwc-skel-summary-row:nth-child(2) { width: 76%; }
.fwc-skel-summary-row:nth-child(3) { width: 88%; }

.fwc-skel-summary-actions {
	display: flex;
	gap: 12px;
	margin-top: 6px;
}

.fwc-skel-btn {
	height: 48px;
	border-radius: 2px;
	flex: 1;
}

/* ==========================================================================
 * Checkout skeleton card
 * Mirrors .fwc-checkout-card: padding 20px 22px, border, bg
 * ========================================================================== */

.fwc-skeleton-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 22px;
	border: 1px solid #e5e7eb;
	border-radius: 2px;
	background: #ffffff;
}

.fwc-skel-heading {
	height: 22px;
	width: 44%;
	border-radius: 2px;
	margin-bottom: 2px;
}

.fwc-skel-field {
	height: 48px;
	border-radius: 2px;
}

.fwc-skel-checkout-line {
	height: 22px;
	border-radius: 2px;
}

.fwc-skel-checkout-line:nth-child(3) { width: 80%; }

/* ==========================================================================
 * Mobile — matches fast-checkout.css breakpoints
 * ========================================================================== */

@media (max-width: 768px) {
	.fwc-skeleton-item {
		grid-template-columns: 1fr;
	}

	.fwc-skel-image {
		width: 100%;
		max-width: 180px;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.fwc-skel-price {
		display: none;
	}

	.fwc-skel-summary-actions {
		flex-direction: column;
	}
}