@use 'variables' as *;

// Upgrade Teaser (Figma 0:1526): 584 × 460. White bg, 1px Light Stroke colour, rounded 10, p-1.
.simplestats-upgrade {
	background: #fff;
	border: 1px solid #D0CEBC;              // Light Stroke colour
	border-radius: 10px;
	display: flex;
	flex-direction: column;

	// Header (0:1527 "Pro Variation 1"): cream bg #FFFBF0, only top corners rounded, p-20, gap-8.
	&__header {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 20px;
		background: #FFFBF0;
		border-radius: 10px 10px 0 0;
	}
	&__star  { display: block; width: 16px; height: 16px; flex-shrink: 0; }
	// "Unlock Premium Features" (0:1530): Typography/Body 2/Bold 16/24, neutral/900 #18191D.
	&__title {
		margin: 0;
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
		color: #18191D;                     // neutral/900
	}
	// Pro chip (0:1531): bg brand/400 #FACC15, text brand/900 #431A00, rounded 4, h-20, px-8, 13/20 medium.
	&__pro {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 20px;
		padding: 0 8px;
		background: #FACC15;                // brand/400
		border-radius: 4px;
		font-size: 13px;
		font-weight: 500;
		line-height: 20px;
		color: #431A00;                     // brand/900
	}

	// 1px #DCDCDE divider (240:1256 / 240:1321).
	&__divider {
		height: 1px;
		background: #DCDCDE;
	}

	&__features {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	// feat0 (240:1257): px-20 py-12, items-center justify-between.
	&__feat {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 12px 20px;
	}

	// Icon tile (0:1536): 40×40, bg neutral/100 #F4F3EE, rounded 3, centered icon (neutral/700 stroke).
	// For Heatmaps/Sessions the SVG itself is the full 40×40 tile so the wrapper bg is covered.
	&__feat-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		flex-shrink: 0;
		border-radius: 3px;
		background: #F4F3EE;                  // neutral/100
		color: #32343A;                       // neutral/700 (icon stroke when SVG uses currentColor)
		overflow: hidden;

		img { display: block; }
	}

	&__feat-text {
		flex: 1;
		min-width: 0;
	}
	// Title (0:1540): Typography/Body 3/SemiBold 14/20, neutral/900 #18191D.
	&__feat-title {
		margin: 0;
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: #18191D;                       // neutral/900
	}
	// Sub (0:1541): Typography/Body 3/Regular 14/20, neutral/500 #7A7660.
	&__feat-sub {
		margin: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		color: #7A7660;                       // neutral/500
	}
	// Lock (240:1265): 16×16, intrinsic colors from SVG.
	&__lock {
		display: block;
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	// Footer (0:1599): cream bg #FFFBF0, bottom corners rounded, p-16 20, gap-12 items-center.
	&__footer {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px 20px;
		background: #FFFBF0;
		border-radius: 0 0 10px 10px;
		margin-top: auto;
	}

	// CTA button (0:1600): bg neutral/900 #18191D, rounded 2 (button/radius), 14/20 SemiBold, gap-8.
	&__cta {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 16px;
		background: #18191D;                  // neutral/900
		border-radius: 2px;                   // button/radius
		color: #FFFFFF;
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		text-decoration: none;

		&:hover, &:focus { color: #FFFFFF; background: #000; }
	}

	// SVG wrapper span — strip baseline space so the lock sits flush with the label.
	&__cta-icon {
		line-height: 1;
		font-size: 0;
	}

	// Price line (0:1602): Typography/Body 3/SemiBold 14/20, neutral/900 #18191D.
	&__price {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: #18191D;                       // neutral/900
		white-space: pre-line;
	}
}
