/**
 * Analytics Upgrade Prompt
 *
 * Centered, outcome-focused upgrade prompt with value cards.
 *
 * @package    SmartCycleDiscounts
 * @since      1.8.15
 */

/* ==========================================================================
   Container
   ========================================================================== */

.wsscd-analytics-locked {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

.wsscd-upgrade-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 860px;
	margin: 0 auto;
	padding: var(--wsscd-spacing-xxxl) var(--wsscd-spacing-xl);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.wsscd-upgrade-hero {
	text-align: center;
	max-width: 600px;
	margin-bottom: var(--wsscd-spacing-xxl);
}

.wsscd-upgrade-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--wsscd-spacing-lg);
	border-radius: var(--wsscd-radius-xl);
	background: linear-gradient(
		135deg,
		var(--wsscd-color-pro-alpha-8, rgba(124, 58, 237, 0.08)),
		var(--wsscd-color-pro-alpha-15, rgba(124, 58, 237, 0.15))
	);
	color: var(--wsscd-color-pro, #7c3aed);
}

.wsscd-upgrade-icon-wrap .wsscd-icon {
	width: 32px;
	height: 32px;
}

.wsscd-upgrade-hero h2 {
	margin: 0 0 var(--wsscd-spacing-base) 0;
	font-size: 26px;
	font-weight: 700;
	color: var(--wsscd-color-text);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.wsscd-upgrade-description {
	margin: 0;
	font-size: var(--wsscd-font-size-medium-large);
	color: var(--wsscd-color-text-muted);
	line-height: 1.6;
}

/* ==========================================================================
   Value Cards
   ========================================================================== */

.wsscd-upgrade-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Matches the page-level 10px rhythm. */
	gap: var(--wsscd-spacing-sm-large, 10px);
	width: 100%;
	margin-bottom: 0;
}

.wsscd-upgrade-card {
	padding: var(--wsscd-spacing-xl);
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-lg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wsscd-upgrade-card:hover {
	border-color: var(--wsscd-color-pro-alpha-25, rgba(124, 58, 237, 0.25));
	box-shadow: 0 4px 12px rgba(var(--wsscd-shadow-color-neutral), 0.06);
}

.wsscd-upgrade-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--wsscd-spacing-base);
	border-radius: var(--wsscd-radius-md);
	background: var(--wsscd-color-pro-alpha-8, rgba(124, 58, 237, 0.08));
	color: var(--wsscd-color-pro, #7c3aed);
}

.wsscd-upgrade-card__icon .wsscd-icon {
	width: 24px;
	height: 24px;
}

.wsscd-upgrade-card h3 {
	margin: 0 0 var(--wsscd-spacing-sm) 0;
	font-size: var(--wsscd-font-size-medium-large);
	font-weight: 600;
	color: var(--wsscd-color-text);
}

.wsscd-upgrade-card p {
	margin: 0;
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-color-text-muted);
	line-height: 1.5;
}

/* ==========================================================================
   Footer (CTA + Note)
   ========================================================================== */

.wsscd-upgrade-footer {
	text-align: center;
}

.wsscd-upgrade-actions {
	display: flex;
	justify-content: center;
	gap: var(--wsscd-gap-normal);
	margin-bottom: var(--wsscd-spacing-base);
}

.wsscd-upgrade-note {
	margin: 0;
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-color-text-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 782px) {
	.wsscd-upgrade-container {
		padding: var(--wsscd-spacing-xl) var(--wsscd-spacing-base);
	}

	.wsscd-upgrade-cards {
		grid-template-columns: 1fr;
	}

	.wsscd-upgrade-hero h2 {
		font-size: 22px;
	}
}