/**
 * OneTwenty Giveaways — competition card decorations.
 * Own markup + classes, so nothing collides with theme CSS.
 * Palette (portable): navy #14263a, indigo #3a1976, violet-deep #6d28d9,
 * plum #5b21b6, muted #374758.
 *
 * Colour on a competition card: a deep indigo band under the image, navy
 * countdown figures and "% sold" label, and the violet CTA the site uses
 * everywhere — darkening to plum when the card is hovered. The one moving
 * element is the cash-alternative tick, which is where the eye should land.
 *
 * The pulse matches the theme's `ep-pulse` (a primary dot on .title-medium) but
 * is defined here under its own name, so the plugin animates the same way on a
 * site that doesn't ship that stylesheet.
 */

/* ---- Strip below the card image ----
 * Rendered at the top of the card body, NOT inside .ep-card-image-wrap — that
 * wrapper has a gradient scrim pinned to its bottom edge which would sit over
 * the strip and dim it. */
.otg-card-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Negative margins cancel the card body's padding (25px 15px) so the strip
	 * sits flush against the image with no gap and runs the full card width. */
	gap: 0.5rem;
	margin: -25px -15px 18px;
	padding: 0.6rem 0.75rem;
	background: #3a1976;
	color: #fff;
	font-size: var(--ep-fs-xs, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

.otg-card-strip__text {
	display: inline-block;
	color: #fff;
}

/* ---- Centred card copy ----
 * Scoped to the card body, not just to the product type. This stylesheet loads
 * on every front-end page, and `.product-type-lottery` is on the wrapper of the
 * SINGLE competition too — so the un-scoped version centred the price there as
 * well, under a left-aligned title. */
.product-type-lottery .card-body .woocommerce-loop-product__title,
.product-type-lottery .card-body .price {
	display: block;
	text-align: center;
}

/* ---- Card pricing: sale items only ----
 * On a sale item the original steps back to the faint tone and the live price
 * takes the brand violet, so the pair reads as "was / now" instead of two
 * equally loud numbers.
 *
 * Deliberately scoped to <del>/<ins>, which WooCommerce only emits for a sale.
 * A card with a single price keeps the theme's navy — violet is what marks a
 * price as reduced here, so spending it on every card would say nothing.
 *
 * Specificity note: the theme sets this colour at three classes
 * (`.card-body .woocommerce-Price-amount.amount`), so these have to match or
 * beat that rather than relying on load order. */
.product-type-lottery .card-body .price del,
.product-type-lottery .card-body .price del .woocommerce-Price-amount.amount {
	color: var(--otg-faint, #64748b);
	font-weight: 600;
}

/* <ins> is underlined by default in every browser, which fights the price. */
.product-type-lottery .card-body .price ins,
.product-type-lottery .card-body .price ins .woocommerce-Price-amount.amount {
	color: var(--otg-violet-deep, #6d28d9);
	text-decoration: none;
}

/* ---- Cash alternative, under the card title ---- */
.otg-card-cashalt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0 0 16px;
	color: #374758;
	font-size: var(--ep-fs-xs, 0.8125rem);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* The pulse lives here — it draws the eye to the cash alternative, which is
 * the selling point, rather than to the strip, which is just a label. */
.otg-card-cashalt__tick {
	display: inline-flex;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	color: #6d28d9;
	animation: otg-pulse 2s infinite;
	-webkit-animation: otg-pulse 2s infinite;
}

.otg-card-cashalt__tick svg {
	display: block;
}

/* wc_price() wraps the amount in .woocommerce-Price-amount, which the theme
 * sizes up to 18px/700 via `.card-body .woocommerce-Price-amount.amount`
 * (three classes). The `p.` prefix outranks that without depending on which
 * stylesheet loads last. Flattens the line into one piece of text. */
p.otg-card-cashalt span:not(.otg-card-cashalt__tick),
p.otg-card-cashalt bdi,
p.otg-card-cashalt .woocommerce-Price-amount.amount,
p.otg-card-cashalt .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

@keyframes otg-pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.9);
	}
	50% {
		transform: scale(1);
		box-shadow: 0 0 0 8px rgba(109, 40, 217, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(109, 40, 217, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.otg-card-cashalt__tick {
		animation: none;
		-webkit-animation: none;
	}
}

/* ---------------------------------------------------------------------------
   Sold-out badge
   ---------------------------------------------------------------------------
   Sits in the same corner, at the same size, as the theme's .ep-sale-badge
   (bootscore-child/inc/wc-sale-badge.php) and reuses its Bootstrap positioning
   utilities, so a competition selling out never shifts the card layout. Navy
   rather than violet: violet is the "act now" colour on these cards and this
   state is the opposite of that. The two badges never co-exist — the sale flash
   is suppressed when a competition is sold out. */

.badge.otg-soldout-badge {
	background-color: var(--otg-navy, #14263a);
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.375rem 0.75rem;
	border-radius: 0.375rem;
	font-size: var(--ep-fs-xs, 0.8125rem);
	text-transform: uppercase;
	/* Sits over product artwork, so it needs to hold against a busy photo. */
	box-shadow: 0 2px 6px rgba(76, 29, 149, 0.35);
}