/**
 * APS Sale Campaign — Frontend Styles
 *
 * Styles for sale badge, campaign prices, savings info, and
 * product page enhancements.
 *
 * CSS custom properties for badge colors are injected inline by PHP
 * so they automatically reflect the admin-configured values.
 *
 * @package APS_Sale_Campaign
 */

/* =========================================================================
   CSS Custom Properties (defaults — overridden by inline style from PHP)
   ====================================================================== */
:root {
	--aps-badge-bg:    #ff0000;
	--aps-badge-color: #ffffff;
}

/* =========================================================================
   Sale Badge
   ====================================================================== */
.aps-sale-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--aps-badge-bg);
	color: var(--aps-badge-color);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 4px;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	/* Subtle shimmer animation */
	background-image: linear-gradient(
		135deg,
		var(--aps-badge-bg) 0%,
		var(--aps-badge-bg) 45%,
		rgba(255, 255, 255, 0.25) 50%,
		var(--aps-badge-bg) 55%,
		var(--aps-badge-bg) 100%
	);
	background-size: 300% 100%;
	animation: aps-badge-shimmer 2.4s linear infinite;
}

@keyframes aps-badge-shimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

/* Ensure parent has position relative so badge positions correctly */
ul.products li.product,
.product .images,
.woocommerce-loop-product__link {
	position: relative;
}

/* =========================================================================
   Campaign Price HTML
   ====================================================================== */

/* Strike-through original price */
.aps-original-price,
.woocommerce-Price-amount.aps-original-price {
	color: #9ca3af !important;
	text-decoration: line-through;
	font-size: 0.9em;
	opacity: 0.85;
}

/* Highlighted campaign price */
.aps-campaign-price,
.aps-campaign-price .woocommerce-Price-amount {
	color: #dc2626 !important;
	font-weight: 700;
	font-size: 1.1em;
}

/* =========================================================================
   Savings Info
   ====================================================================== */
.aps-savings {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 600;
	color: #16a34a;
	background: rgba(22, 163, 74, 0.08);
	border: 1px solid rgba(22, 163, 74, 0.2);
	border-radius: 4px;
	padding: 3px 8px;
	width: fit-content;
}

/* =========================================================================
   Shop Loop — price block spacing
   ====================================================================== */
ul.products li.product .price {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

ul.products li.product .price del,
ul.products li.product .price del .amount {
	color: #9ca3af;
	font-size: 0.88em;
}

ul.products li.product .price ins,
ul.products li.product .price ins .amount {
	color: #dc2626;
	font-weight: 700;
	text-decoration: none;
}

/* =========================================================================
   Single Product Page
   ====================================================================== */
.single-product .product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.single-product .product .price del {
	font-size: 0.9em;
	color: #9ca3af;
}

.single-product .product .price ins {
	text-decoration: none;
}

.single-product .product .price ins .amount {
	color: #dc2626;
	font-size: 1.6em;
	font-weight: 700;
}

/* =========================================================================
   Cart & Checkout
   ====================================================================== */
.woocommerce-cart .woocommerce-Price-amount,
.woocommerce-checkout .woocommerce-Price-amount {
	color: #111827;
}

/* =========================================================================
   Responsive adjustments
   ====================================================================== */
@media (max-width: 600px) {
	.aps-sale-badge {
		font-size: 10px;
		padding: 4px 9px;
	}

	.aps-savings {
		font-size: 11px;
	}
}