/**
 * Frontend Styles
 *
 * Customer-facing styles for discount badges, price displays, and cart elements.
 * Designed to integrate seamlessly with WooCommerce themes while maintaining
 * consistent branding for Smart Cycle Discounts.
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/frontend/frontend.css
 * @author     Webstepper.io <contact@webstepper.io>
 * @copyright  2025 Webstepper.io
 * @license    GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html
 * @link       https://webstepper.io/wordpress/plugins/smart-cycle-discounts/
 * @since      1.0.0
 *
 * Table of Contents:
 * 1. CSS Custom Properties (Frontend-specific)
 * 2. Discount Badge Base Styles
 * 3. Badge Position Variants
 * 4. Badge Style Variants
 * 5. Price Display Styles
 * 6. Shop Loop Integration
 * 7. Single Product Integration
 * 8. Cart & Mini-Cart Integration
 * 9. Checkout Integration
 * 10. Tiered Discount Display
 * 11. BOGO Display
 * 12. Countdown Timer
 * 13. Animations & Transitions
 * 14. Responsive Styles
 * 15. Accessibility
 * 16. Print Styles
 */

/* ==========================================================================
   1. CSS Custom Properties (Frontend-specific)
   ========================================================================== */

:root {
	/* Badge Colors */
	--wsscd-frontend-badge-bg: #d63638;

	/* Discount Colors */
	--wsscd-frontend-discount-color: #00a32a;

	/* Badge Sizing */
	--wsscd-frontend-badge-radius: 4px;

	/* Spacing */
	--wsscd-frontend-spacing-xs: 4px;
	--wsscd-frontend-spacing-sm: 8px;
	--wsscd-frontend-spacing-md: 12px;
	--wsscd-frontend-spacing-lg: 16px;
}

/* ==========================================================================
   2. Discount Badge Base Styles
   ========================================================================== */

/* Badge text */

/* Long text handling */

/* ==========================================================================
   3. Badge Position Variants
   ========================================================================== */

/* Top Left */

/* Top Right (Default) */

/* Bottom Left */

/* Bottom Right */

/* Inline (next to price) */

/* ==========================================================================
   4. Badge Style Variants
   ========================================================================== */

/* Pill Style */

/* Square Style */

/* Ribbon Style */

/* Hide only the final add-on total row during WCPA recalculation to prevent base-total flash */
.wcpa_price_summary .wsscd-live-total-pending,
.wcpa-price-summary .wsscd-live-total-pending {
	visibility: hidden;
}

/* Ensure ribbon template always stays corner-anchored regardless of saved position classes */

/* Circle Style */

/* Outline Style */

/* Tag Style */

/* Dashed Style */

/* Banner Top */

/* Banner Bottom */

/* Ensure banner templates always keep full-width positioning in all contexts */

/* ==========================================================================
   5. Price Display Styles
   ========================================================================== */

/* Price with Discount Container */
.wsscd-price-wrapper {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wsscd-frontend-spacing-sm);
}

/* Inline Badge with Price */

/* ==========================================================================
   6. Shop Loop Integration
   ========================================================================== */

/*
 * Hide WooCommerce/Theme Sale Badges when SCD discount is active
 * Uses wsscd-has-discount class added to body and product elements
 * Covers standard WooCommerce and popular theme patterns
 */

/* Standard WooCommerce sale badge */
.wsscd-has-discount .onsale,
.wsscd-has-discount .woocommerce-onsale,
.wsscd-has-discount span.onsale,
li.product.wsscd-has-discount .onsale,
li.product.wsscd-has-discount .woocommerce-onsale {
	display: none !important;
}

/* Common theme sale badge patterns */
.wsscd-has-discount .sale-badge,
.wsscd-has-discount .product-badge.sale,
.wsscd-has-discount .badge-sale,
.wsscd-has-discount .product-label.sale,
.wsscd-has-discount .product-sale-label,
.wsscd-has-discount .sale-flash,
.wsscd-has-discount .sale-tag,
.wsscd-has-discount [class*="sale-badge"],
.wsscd-has-discount [class*="product-sale"],
li.product.wsscd-has-discount .sale-badge,
li.product.wsscd-has-discount .product-badge.sale,
li.product.wsscd-has-discount .badge-sale,
li.product.wsscd-has-discount [class*="sale-badge"] {
	display: none !important;
}

/* Popular theme-specific sale badges */

/* Astra theme */
.wsscd-has-discount .ast-onsale-card,
li.product.wsscd-has-discount .ast-onsale-card {
	display: none !important;
}

/* Flatsome theme */
.wsscd-has-discount .badge-container .badge,
.wsscd-has-discount .callout.badge,
.wsscd-has-discount .badge.onsale,
li.product.wsscd-has-discount .badge-container .badge.onsale {
	display: none !important;
}

/* OceanWP theme */
.wsscd-has-discount .owp-badge,
.wsscd-has-discount .woo-entry-onsale,
li.product.wsscd-has-discount .owp-badge {
	display: none !important;
}

/* GeneratePress theme */
.wsscd-has-discount .wc-sale-badge,
.wsscd-has-discount .gp-wc-sale-flash,
li.product.wsscd-has-discount .wc-sale-badge {
	display: none !important;
}

/* Flavor / flavor theme */
.wsscd-has-discount .product-tag.sale,
.wsscd-has-discount .product-flags .sale,
li.product.wsscd-has-discount .product-tag.sale {
	display: none !important;
}

/* Porto theme */
.wsscd-has-discount .onhot,
.wsscd-has-discount .porto-label-onsale,
li.product.wsscd-has-discount .onhot {
	display: none !important;
}

/* Flavor / flavor theme */
.wsscd-has-discount .ribbon-sale,
.wsscd-has-discount .label-sale,
li.product.wsscd-has-discount .ribbon-sale {
	display: none !important;
}

/* Elementor/JetWoo widgets */
.wsscd-has-discount .jet-woo-product-badge.sale,
.wsscd-has-discount .elementor-widget-wc-products .onsale,
li.product.wsscd-has-discount .jet-woo-product-badge.sale {
	display: none !important;
}

/* Divi theme */
.wsscd-has-discount .et_shop_sale_icon,
.wsscd-has-discount .et_pb_sale_badge,
li.product.wsscd-has-discount .et_shop_sale_icon {
	display: none !important;
}

/* Generic patterns (catch-all) */
.wsscd-has-discount [class*="-onsale"],
.wsscd-has-discount [class*="_onsale"],
.wsscd-has-discount [class*="-sale-badge"],
.wsscd-has-discount [class*="_sale_badge"],
.wsscd-has-discount [class*="sale-label"],
.wsscd-has-discount [class*="sale_label"],
li.product.wsscd-has-discount [class*="-onsale"],
li.product.wsscd-has-discount [class*="-sale-badge"] {
	display: none !important;
}

/* Single product page - body class approach */
body.wsscd-has-discount .woocommerce-product-gallery .onsale,
body.wsscd-has-discount .single-product .onsale,
body.wsscd-has-discount .product .onsale {
	display: none !important;
}

/* Product Card Badge */
.woocommerce ul.products li.product,
.wc-block-product {
	position: relative;
}

/* Blocksy-like image wrappers on shop/archive cards */
.woocommerce ul.products li.product .ct-image-container,
.woocommerce ul.products li.product .ct-media-container,
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wsscd-product-image-wrapper {
	position: relative;
}

/* Shop badge slot
 *
 * Positioning lives on the slot wrapper and on a marker class the frontend
 * script puts on whichever element it anchored the badge to. The previous
 * rules keyed the offsets off a hardcoded list of theme ancestors, so on any
 * theme outside that list nothing matched: the badge kept position:absolute
 * with no offsets and rendered wherever it happened to land in the flow.
 */
.wsscd-badge-anchor {
	position: relative;
}

.wsscd-badge-slot--shop {
	position: absolute;
	z-index: 15; /* Higher than WooCommerce .onsale (z-index: 9) */
	pointer-events: none;
}

.wsscd-badge-slot--shop > * {
	pointer-events: auto;
}

.wsscd-badge-slot--shop.wsscd-badge-slot--top-left {
	top: 10px;
	left: 10px;
	right: auto;
	bottom: auto;
}

.wsscd-badge-slot--shop.wsscd-badge-slot--top-right {
	top: 10px;
	right: 10px;
	left: auto;
	bottom: auto;
}

.wsscd-badge-slot--shop.wsscd-badge-slot--bottom-left {
	bottom: 10px;
	left: 10px;
	top: auto;
	right: auto;
}

.wsscd-badge-slot--shop.wsscd-badge-slot--bottom-right {
	bottom: 10px;
	right: 10px;
	top: auto;
	left: auto;
}

/* Sit below the theme's own sale flash when both share a corner. */
.wsscd-badge-slot--shop.wsscd-badge-slot--top-left.wsscd-badge-slot--with-sale,
.wsscd-badge-slot--shop.wsscd-badge-slot--top-right.wsscd-badge-slot--with-sale {
	top: 45px;
}

/* Respect WooCommerce sale badge positioning */

/* Product Image Container */
.woocommerce ul.products li.product .wsscd-product-image-wrapper,
.wc-block-product .wsscd-product-image-wrapper {
	position: relative;
	overflow: hidden;
}

/* ==========================================================================
   7. Single Product Integration
   ========================================================================== */

/* Single Product Badge - Base Styles */

/* Badge on Product Gallery - ensure gallery is positioned */
.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
}

/* Gallery image wrapper - contains image and badge */
.woocommerce div.product .wsscd-gallery-image-wrapper {
	position: relative;
	display: inline-block;
}

/* Legacy support - badges directly in gallery without position class */

/* Gallery Thumbnail Badges */
.woocommerce div.product .wsscd-gallery-thumbnail-wrapper {
	position: relative;
	display: inline-block;
}

/* Compact badge for thumbnails */

/* Responsive thumbnail badge sizing */

/* Surface-aware size variants.
   Auto-applied by WSSCD_WC_Display_Integration::get_size_for_context():
   - shop tiles & gallery thumbnails -> compact
   - product gallery main image      -> large
   - everything else (blocks, etc.)  -> standard (inherits base) */

/* ==========================================================================
   8. Cart & Mini-Cart Integration
   ========================================================================== */

/* Inline savings hint appended to cart line subtotal.
   Toggled by the "Show in Cart/Checkout" display setting. */
.wsscd-cart-savings {
	display: inline-block;
	margin-left: var(--wsscd-frontend-spacing-xs);
	padding: 1px 6px;
	font-size: 0.78em;
	font-weight: 600;
	color: var(--wsscd-frontend-discount-color);
	background-color: rgba(0, 0, 0, 0.04);
	border-radius: var(--wsscd-frontend-badge-radius);
	white-space: nowrap;
	vertical-align: middle;
}

/* ==========================================================================
   9. Checkout Integration
   ========================================================================== */

/* Checkout Badge Display */

/* ==========================================================================
   10. Tiered Discount Display
   ========================================================================== */

/* Tier Table Wrapper */
.wsscd-tier-table-wrapper {
	background-color: #f8f9fa;
	border-radius: var(--wsscd-frontend-badge-radius);
	padding: var(--wsscd-frontend-spacing-md);
	border: 1px solid #e0e0e0;
}

/* Tier Table Title */
.wsscd-tier-table-title {
	margin: 0 0 var(--wsscd-frontend-spacing-sm) 0;
	padding: 0;
	font-size: 1em;
	font-weight: 700;
	color: var(--wsscd-frontend-discount-color);
	text-align: center;
}

/* Tier Table */
.wsscd-tier-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.9em;
	background-color: #fff;
	border-radius: var(--wsscd-frontend-badge-radius);
	overflow: hidden;
}

.wsscd-tier-table th,
.wsscd-tier-table td {
	padding: var(--wsscd-frontend-spacing-sm) var(--wsscd-frontend-spacing-md);
	border-bottom: 1px solid #e9ecef;
	text-align: left;
}

.wsscd-tier-table thead tr {
	background-color: #f1f3f5;
}

.wsscd-tier-table th {
	font-weight: 600;
	color: #495057;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wsscd-tier-table tbody tr:last-child td {
	border-bottom: none;
}

.wsscd-tier-table tbody tr:hover {
	background-color: rgba(0, 163, 42, 0.04);
}

.wsscd-tier-table tr.active {
	background-color: rgba(0, 163, 42, 0.08);
}

.wsscd-tier-table .wsscd-tier-discount {
	color: var(--wsscd-frontend-discount-color);
	font-weight: 600;
}

/* Spend Threshold Progress Bar (Dynamic AJAX) */
.wsscd-spend-progress-container {
	margin: var(--wsscd-frontend-spacing-lg) 0;
}

.wsscd-spend-progress {
	background-color: #f8f9fa;
	border-radius: var(--wsscd-frontend-badge-radius);
	padding: var(--wsscd-frontend-spacing-md);
	margin-bottom: var(--wsscd-frontend-spacing-md);
}

.wsscd-spend-progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--wsscd-frontend-spacing-sm);
}

.wsscd-spend-title {
	font-weight: 600;
	color: #333;
	font-size: 0.95em;
}

.wsscd-spend-progress-bar-wrapper {
	height: 10px;
	background-color: #e0e0e0;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: var(--wsscd-frontend-spacing-sm);
}

.wsscd-spend-progress-bar {
	height: 100%;
	background-color: var(--wsscd-frontend-badge-bg);
	border-radius: 5px;
	transition: width 0.5s ease-out;
	min-width: 0;
}

.wsscd-spend-message {
	display: block;
	font-size: 0.9em;
	color: #555;
	text-align: center;
}

.wsscd-spend-message strong {
	color: var(--wsscd-frontend-badge-bg);
}

.wsscd-spend-message.wsscd-spend-complete {
	color: var(--wsscd-frontend-discount-color);
}

.wsscd-spend-message.wsscd-spend-complete strong {
	color: var(--wsscd-frontend-discount-color);
}

/* ==========================================================================
   11. BOGO Display
   ========================================================================== */

.wsscd-bogo-description {
	font-size: 0.9em;
	color: #555;
}

/* BOGO Badge Variant */

/* BOGO Details (on product page) */
.wsscd-bogo-details {
	background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
	border: 1px solid rgba(214, 54, 56, 0.2);
	border-radius: var(--wsscd-frontend-badge-radius);
	padding: var(--wsscd-frontend-spacing-md);
	text-align: center;
}

.wsscd-bogo-offer {
	margin: 0;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--wsscd-frontend-badge-bg);
}

/* ==========================================================================
   12. Countdown Timer
   ========================================================================== */

/* Campaign Countdown */
.wsscd-countdown {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-frontend-spacing-sm);
	padding: var(--wsscd-frontend-spacing-sm) var(--wsscd-frontend-spacing-md);
	background-color: #fff8e1;
	border: 1px solid #ffcc00;
	border-radius: var(--wsscd-frontend-badge-radius);
	font-size: 0.9em;
}

.wsscd-countdown-timer {
	display: flex;
	gap: var(--wsscd-frontend-spacing-xs);
	font-weight: 700;
	color: #333;
	font-variant-numeric: tabular-nums;
}

/* Urgency State */
.wsscd-countdown.wsscd-countdown-urgent {
	background-color: #fff5f5;
	border-color: var(--wsscd-frontend-badge-bg);
	animation: wsscd-pulse 2s infinite;
}

/* ==========================================================================
   13. Animations & Transitions
   ========================================================================== */

/* Pulse Animation */
@keyframes wsscd-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

/* ==========================================================================
   14. Responsive Styles
   ========================================================================== */

/* Tablet */
@media screen and (max-width: 782px) {

	.wsscd-countdown {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* Mobile */
@media screen and (max-width: 480px) {

	/* Tier Table Mobile */
	.wsscd-tier-table-wrapper {
		padding: var(--wsscd-frontend-spacing-sm);
	}

	.wsscd-tier-table-title {
		font-size: 0.9em;
	}

	.wsscd-tier-table {
		font-size: 0.85em;
	}

	.wsscd-tier-table th,
	.wsscd-tier-table td {
		padding: var(--wsscd-frontend-spacing-xs) var(--wsscd-frontend-spacing-sm);
	}

	.wsscd-countdown-timer {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ==========================================================================
   15. Accessibility
   ========================================================================== */

/* Focus States */

/* High Contrast Mode */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.wsscd-countdown {
		/* Disable entrance/pulse keyframes and transitions so motion-sensitive
		   users see a static countdown. */
		animation: none;
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   17. Print Styles
   ========================================================================== */

@media print {

	.wsscd-countdown {
		display: none;
	}
}