/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Cart badge animations */
@keyframes cart-badge-pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.0); /* indigo */
		background-color: #4f46e5; /* indigo-600 */
	}
	35% {
		transform: scale(1.22);
		box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.20);
		background-color: #6366f1; /* indigo-500 */
	}
	70% {
		transform: scale(0.98);
		box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.10);
		background-color: #4f46e5;
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.0);
		background-color: #4f46e5;
	}
}

.cart-badge-pulse {
	animation: cart-badge-pulse 1100ms ease-out;
}

/* Optional subtle pulse for the entire cart link */
@keyframes cart-link-pulse {
	0% { transform: translateZ(0) scale(1); }
	40% { transform: translateZ(0) scale(1.04); }
	100% { transform: translateZ(0) scale(1); }
}

.cart-link-pulse {
	animation: cart-link-pulse 700ms ease-out;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.cart-badge-pulse, .cart-link-pulse {
		animation-duration: 200ms;
		animation-iteration-count: 1;
	}
}

/* Footer link readability on images */
.footer-links { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* Modal content spacing */
.modal-content p { margin-bottom: 0.75rem; }
.modal-content ul { margin: 0.5rem 0 0.75rem 1.25rem; list-style: disc outside; padding-left: 1.25rem; }
.modal-content ol { margin: 0.5rem 0 0.75rem 1.25rem; list-style: decimal outside; padding-left: 1.25rem; }
.modal-content h3 { margin-top: 1rem; margin-bottom: 0.5rem; }