/**
 * Business Explained — Checkout v2: Express checkout skeleton
 * be-co2-express-v1.css — mobile only (≤1024px), scoped to body.be-co2
 * Ported unchanged from be-sticky-summary-v11.css (dequeued in v2).
 * Phase 3 will add the Figma layout for the express row here.
 */

@media (max-width: 1024px) {

	body.be-co2 .be-express-skeleton {
		margin: 0;
		padding: 0;
		opacity: 1;
		max-height: 200px;
		overflow: hidden;
		transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease;
	}

	body.be-co2 .be-express-skeleton.is-loaded {
		opacity: 0;
		max-height: 0;
		margin: 0;
		pointer-events: none;
	}

	body.be-co2 .be-express-skeleton__title {
		margin-bottom: 11px;
		text-align: center;
		font-size: 15px;
		font-weight: 400;
		color: #707070;
	}

	body.be-co2 .be-express-skeleton__row {
		display: flex;
		gap: 8px;
		width: 100%;
	}

	body.be-co2 .be-express-skeleton__button {
		flex: 1;
		height: 55px;
		border-radius: 6px;
		background: linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 40%, #f3f4f6 50%, #e5e7eb 60%, #e5e7eb 100%);
		background-size: 200% 100%;
		animation: be-co2-shimmer 1.6s ease-in-out infinite;
	}

	@keyframes be-co2-shimmer {
		0%   { background-position: 100% 0; }
		100% { background-position: -100% 0; }
	}

	body.be-co2 .be-express-skeleton__or {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 24px 0 !important;
		color: #6b7280;
		font-size: 14px;
		font-weight: 400;
		text-align: center;
	}

	body.be-co2 .be-express-skeleton__or::before,
	body.be-co2 .be-express-skeleton__or::after {
		content: "";
		display: block;
		flex: 1;
		height: 1px;
		background: #d1d5db;
	}

	@media print {
		body.be-co2 .be-express-skeleton {
			display: none !important;
		}
	}

} /* end @media (max-width: 1024px) */