/**
 * Storefront styling for Dapper Sweepstakes Engine.
 * Colours come from CSS variables set by Settings (Assets::cssVariables),
 * with fallbacks. Every class is theme-overridable.
 */

:root {
	--dse-accent: #c1121f;
	--dse-panel-bg: #0e0e10;
	--dse-panel-text: #fff;
	--dse-bar-bg: var(--dse-panel-bg);
	--dse-bar-text: var(--dse-panel-text);
	--dse-button-text: #fff;
	--dse-radius: 8px;
}

/* --- Announcement bar --------------------------------------------------- */
.dse-bar {
	background: var(--dse-bar-bg);
	color: var(--dse-bar-text);
	font-weight: 700;
}

.dse-bar--sticky {
	position: sticky;
	top: 0;
	z-index: 9999;
}

.dse-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.25rem;
	padding: 0.6rem 1rem;
	text-align: center;
}

.dse-bar__prize {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.dse-bar__mult,
.dse-bar__countdown {
	color: var(--dse-accent);
	font-variant-numeric: tabular-nums;
}

.dse-bar__cta {
	background: var(--dse-accent);
	color: var(--dse-button-text);
	padding: 0.35rem 0.9rem;
	border-radius: calc(var(--dse-radius) / 2);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.85rem;
}

.dse-bar__rules {
	color: inherit;
	opacity: 0.7;
	font-size: 0.75rem;
	text-decoration: underline;
}

/* --- Product entry panel ------------------------------------------------ */
.dse-entry-panel {
	margin: 1rem 0;
	padding: 1rem 1.25rem;
	border-radius: var(--dse-radius);
	background: var(--dse-panel-bg);
	color: var(--dse-panel-text);
}

.dse-entry-panel--compact {
	padding: 0.6rem 0.9rem;
}

.dse-entry-panel--compact .dse-entry-panel__count {
	font-size: 1.3rem;
}

.dse-entry-panel--bold .dse-entry-panel__count {
	font-size: 2.6rem;
}

.dse-entry-panel--bold .dse-entry-panel__label {
	font-size: 0.9rem;
}

.dse-entry-panel__label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	opacity: 0.7;
}

.dse-entry-panel__values {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
}

.dse-entry-panel__count {
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--dse-accent);
}

.dse-entry-panel__campaign {
	font-size: 0.95rem;
	opacity: 0.85;
}

.dse-entry-panel__disclosure {
	margin: 0.75rem 0 0;
	font-size: 0.72rem;
	opacity: 0.6;
}

/* --- Product card badge ------------------------------------------------- */
.dse-badge {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.2rem 0.5rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--dse-accent);
	border-radius: 4px;
}

.dse-badge--prominent {
	display: block;
	margin: 0.5rem 0;
	padding: 0.5rem 0.75rem;
	background: transparent;
	color: inherit;
}

.dse-badge--prominent .dse-badge__count {
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--dse-accent);
	line-height: 1;
}

.dse-badge--prominent .dse-badge__suffix {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.dse-badge__mult {
	display: inline-block;
	margin-right: 0.4rem;
	padding: 0.1rem 0.4rem;
	font-size: 0.72rem;
	font-weight: 800;
	color: #fff;
	background: var(--dse-accent);
	border-radius: 3px;
	vertical-align: middle;
}

.dse-badge--prominent .dse-badge__mult {
	font-size: 0.85rem;
	padding: 0.15rem 0.5rem;
}

/* Badge style variants (Settings → Styling → Card badge style). */
.dse-badge--style-outline {
	background: transparent;
	color: var(--dse-accent);
	border: 2px solid var(--dse-accent);
}

.dse-badge--style-outline.dse-badge--prominent {
	border: 0;
}

.dse-badge--style-minimal {
	background: transparent;
	color: inherit;
	padding-left: 0;
	padding-right: 0;
}

/* Active boost chip from the Boosts admin (e.g. "20X WEEKEND"). */
.dse-badge__promo {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.12rem 0.45rem;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	color: var(--dse-panel-bg);
	background: #ffd166;
	border-radius: 3px;
	vertical-align: middle;
	text-transform: uppercase;
}

/* --- Winners gallery ----------------------------------------------------- */
.dse-winners__heading {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dse-winners__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

.dse-winners__card {
	padding: 1rem 1.15rem;
	border-radius: var(--dse-radius);
	background: var(--dse-panel-bg);
	color: var(--dse-panel-text);
	border-left: 4px solid var(--dse-accent);
}

.dse-winners__name {
	font-weight: 800;
	font-size: 1.05rem;
}

.dse-winners__location,
.dse-winners__date {
	font-size: 0.8rem;
	opacity: 0.7;
}

.dse-winners__prize {
	margin-top: 0.35rem;
	color: var(--dse-accent);
	font-weight: 700;
}

/* --- Cart / mini-cart --------------------------------------------------- */
.dse-cart-entries th,
.dse-mini-cart-entries__label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.78rem;
}

.dse-mini-cart-entries {
	margin: 0.5rem 0;
	padding: 0.5rem 0;
	border-top: 1px dashed rgba( 0, 0, 0, 0.15 );
}

.dse-mini-cart-entries ul,
.dse-account__history {
	margin: 0.25rem 0 0;
}

/* --- Bonus-threshold nudge ---------------------------------------------- */
.dse-threshold {
	margin: 0.5rem 0;
	font-size: 0.82rem;
}

.dse-threshold--reached {
	color: #008a20;
	font-weight: 700;
}

.dse-threshold__bar {
	display: block;
	height: 6px;
	margin-top: 0.35rem;
	background: rgba( 0, 0, 0, 0.12 );
	border-radius: 3px;
	overflow: hidden;
}

.dse-threshold__fill {
	display: block;
	height: 100%;
	background: var(--dse-accent);
	transition: width 0.4s ease;
}

/* --- Thank-you / account ------------------------------------------------ */
.dse-thankyou,
.dse-account__campaign {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--dse-accent);
	background: rgba( 0, 0, 0, 0.03 );
}

/* --- Hero --------------------------------------------------------------- */
.dse-hero {
	padding: 3rem 1.5rem;
	text-align: center;
	background: var(--dse-panel-bg);
	color: var(--dse-panel-text);
}

.dse-hero__multiplier {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--dse-accent);
}

.dse-countdown {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

@media ( prefers-reduced-motion: reduce ) {
	.dse-countdown,
	.dse-threshold__fill {
		transition: none;
	}
}