/**
 * Pulse Garage - Spin Wheel (Woo Spin Wheel plugin).
 * Spin cards, the single spin page and, with "Use Pulse Garage colours" on
 * (body.pg-spin-theme), the plugin's colour/font variables mapped to theme tokens.
 */

/* ==========================================================================
   Theme tokens for the plugin
   ========================================================================== */

body.pg-spin-theme {
	--wsw-brand-black: var(--pg-black);
	--wsw-brand-black-soft: var(--pg-charcoal);
	--wsw-brand-panel: #141a1c;
	--wsw-brand-panel-strong: #0e1213;
	--wsw-brand-border: #2c3638;
	--wsw-brand-gold: var(--pg-lime);
	--wsw-brand-gold-strong: var(--pg-lime-hover);
	--wsw-brand-gold-deep: var(--pg-lime-2);
	--wsw-brand-text: var(--pg-text);
	--wsw-brand-text-soft: var(--pg-muted);
	--wsw-shell-frame: var(--pg-lime);
	--wsw-notice-bg: var(--pg-lime);
	--wsw-notice-border: var(--pg-lime-2);
	--wsw-countdown-tile-bg: var(--pg-charcoal);
	--wsw-countdown-number: var(--pg-lime);
	--wsw-prize-accent: var(--pg-lime);
	--wsw-prize-accent-end: var(--pg-lime-2);
	--wsw-prize-text: var(--pg-text);
	--wsw-prize-title-text: var(--pg-text);
	--wsw-prize-meta-value-text: var(--pg-text);
	--wsw-prize-muted: var(--pg-muted);
	--wsw-prize-border: #2c3638;
	--wsw-prize-card-bg: #141a1c;
	--wsw-prize-chip-bg: #1b2224;
	--wsw-prize-section-bg: transparent;
	--wsw-prize-progress-track: #22292b;
	--wsw-prize-available: var(--pg-lime);
	--wsw-progress-track: #22292b;
	--wsw-progress-stat-bg: #141a1c;
	--wsw-progress-stat-label: var(--pg-muted);
	--wsw-progress-stat-value: var(--pg-text);
	--wsw-wheel-stats-bg: #141a1c;
	--wsw-wheel-stats-border: #2c3638;
	--wsw-wheel-stats-icon: var(--pg-lime);
	--wsw-wheel-stats-value: var(--pg-text);
	--wsw-wheel-stats-label: var(--pg-muted);
	--wsw-font-body: var(--pg-font-body);
	--wsw-font-heading: var(--pg-font-display);
	--wsw-font-button: var(--pg-font-body);
	--wsw-font-countdown: var(--pg-font-display);
	--wsw-font-wheel: var(--pg-font-display);
}

/* The plugin stylesheet also reads Elementor global colours; point them at
   the theme inside the spin page only. */
body.pg-spin-theme .pg-spin-single {
	--e-global-color-primary: var(--pg-lime);
	--e-global-color-secondary: var(--pg-lime-2);
	--e-global-color-c068604: var(--pg-lime-hover);
	--e-global-color-text: var(--pg-text);
	--e-global-color-2b9519f: var(--pg-muted);
	--e-global-color-6ca0ffe: #1b2224;
	--e-global-color-8a24601: #101415;
	--e-global-typography-primary-font-family: var(--pg-font-display);
	--e-global-typography-secondary-font-family: var(--pg-font-display);
	--e-global-typography-text-font-family: var(--pg-font-body);
	--e-global-typography-accent-font-family: var(--pg-font-body);
}

/* ==========================================================================
   Spin cards
   ========================================================================== */

.pg-spin-badge .pg-svg {
	fill: none;
	stroke: currentColor;
}

.pg-spin-note {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 8px 10px;
	border: 1px dashed #2f383a;
	border-radius: 5px;
	color: var(--pg-lime);
}

.pg-spin-note .pg-svg {
	width: 22px;
	height: 22px;
}

.pg-spin-note span {
	display: grid;
	gap: 2px;
}

.pg-spin-note strong {
	font: 700 17px/1 var(--pg-font-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pg-spin-note small {
	color: #a9b2b2;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

.pg-comp-card.is-scheduled .pg-comp-card__media img {
	filter: brightness(0.8);
}

.pg-comp-card.is-scheduled .pg-comp-card__enter,
.pg-comp-card.is-scheduled .pg-comp-card__time {
	color: var(--pg-muted);
}

/* ==========================================================================
   Single spin page
   ========================================================================== */

/* The wheel sits in a gallery-style panel; the plugin's own framed shell is flattened into it. */
.pg-spin-stage {
	display: grid;
	align-content: center;
	min-height: 540px;
	max-height: none;
	overflow: visible;
	padding: 22px 18px;
	border: 1px solid #2c3638;
	border-radius: 8px;
	background:
		radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--pg-lime) 10%, transparent) 0, transparent 60%),
		linear-gradient(145deg, #141a1c, #0e1213);
}

.pg-spin-stage .wsw-wheel-shell {
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.pg-spin-stage .wsw-wheel-shell__disc {
	width: min(100%, 400px);
}

.pg-spin-stage .wsw-wheel-shell__message {
	width: min(100%, 400px);
	padding: 11px 16px;
	border: 1px solid var(--pg-lime);
	border-radius: 6px;
	background: rgba(9, 11, 12, 0.6);
	box-shadow: none;
	color: var(--pg-text);
	font: 700 13px/1.4 var(--pg-font-body);
}
.pg-spin-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pg-spin-eyebrow .pg-svg {
	width: 14px;
	height: 14px;
}

.pg-spin-when {
	display: grid;
	gap: 3px;
	padding: 9px 14px;
	border: 1px solid #2c3638;
	border-radius: 6px;
	text-align: right;
}

.pg-spin-when strong {
	color: var(--pg-lime);
	font: 700 20px/1 var(--pg-font-display);
	text-transform: uppercase;
}

.pg-spin-when small {
	color: var(--pg-muted);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

.pg-spin-when.is-closed strong {
	color: var(--pg-muted);
}

.pg-spin-ready {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0;
	padding: 10px 12px;
	border: 1px solid var(--pg-lime);
	border-radius: 6px;
	color: var(--pg-text);
	font-size: 13px;
	font-weight: 700;
}

.pg-spin-ready > .pg-svg {
	color: var(--pg-lime);
}

.pg-spin-ready .pg-btn {
	margin-left: auto;
}

.pg-spin-state {
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid #2c3638;
	border-radius: 6px;
	color: var(--pg-text-soft);
	font-weight: 700;
}

/* Prize tiles: theme colour by default, a prize's own segment colour when theme colours are off. */
.pg-spin-prize-tile {
	--pg-spin-prize: var(--pg-lime);
	position: relative;
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 12px),
		linear-gradient(135deg, color-mix(in srgb, var(--pg-spin-prize) 28%, #111719), color-mix(in srgb, var(--pg-spin-prize) 10%, #0e1213));
	color: var(--pg-spin-prize);
}

.pg-spin-prize-card {
	--pg-spin-prize: var(--pg-lime);
}

.pg-spin-prize-tile .wsw-prize-card__icon,
.pg-spin-prize-tile svg {
	width: 38px;
	height: 38px;
	color: var(--pg-spin-prize);
	font-size: 38px;
	fill: currentColor;
}

.pg-spin-prize-tile__badge {
	position: absolute;
	top: 6px;
	left: 6px;
	padding: 3px 6px;
	border-radius: 3px;
	background: var(--pg-spin-prize);
	color: var(--pg-on-lime);
	font: 800 8px/1.2 var(--pg-font-body);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pg-spin-prize-card p .amount {
	color: var(--pg-text);
	font-weight: 800;
}

.pg-spin-prize-desc {
	margin: 0 0 14px;
	color: var(--pg-text-soft);
	font-size: 13px;
}

.pg-spin-winners {
	display: grid;
	gap: 6px;
	max-height: 340px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.pg-spin-winners li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid #2c3638;
	border-radius: 6px;
	background: #111719;
}

.pg-spin-winners li .pg-svg {
	color: var(--pg-lime);
}

.pg-spin-winners li small {
	margin-left: auto;
	color: var(--pg-muted);
	font-size: 11px;
}

.pg-spin-winners__more,
.pg-spin-winners__empty {
	margin: 12px 0 0;
	color: var(--pg-muted);
	font-size: 13px;
}

.pg-spin-winners__empty {
	padding: 14px;
	border: 1px dashed #2c3638;
	border-radius: 6px;
	text-align: center;
}

@media (max-width: 1100px) {
	.pg-spin-stage {
		min-height: 0;
	}
}