/**
 * Pricing Shortcodes Styles
 *
 * Styles for [edd_pricing_table] and [edd_pricing_comparison] shortcodes.
 * Based on Figma design specifications - pixel perfect match.
 *
 * @package Core
 * @since <next-version>
 */

/* ==========================================================================
   CSS Custom Properties - From Figma Design Tokens
   ========================================================================== */

.edd-pricing-table,
.edd-pricing-comparison {
	/* Colors from Figma */
	--edd-color-black: #171717;
	--edd-color-text: #0f172a;
	--edd-color-text-body: #292929;
	--edd-color-text-muted: #a1a1a1;
	--edd-color-text-strike: #334155;
	--edd-color-white: #ffffff;
	--edd-color-green: #05a82e;
	--edd-color-yellow: #fff085;
	--edd-color-pink: #ffccd3;
	--edd-color-purple: #e9d4ff;
	--edd-color-red: #ef4444;
	--edd-color-border-light: #d4d4d4;

	/* Typography */
	--edd-font-serif: 'IBM Plex Serif', Georgia, serif;
	--edd-font-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   SeedProd Wrapper - Background gradient
   ========================================================================== */

.pricing-table-wrapper {
	background: linear-gradient(to bottom, #EDF4FA 415px, #ffffff 415px);
}

/* ==========================================================================
   Pricing Table Container
   ========================================================================== */

.edd-pricing-table {
	max-width: 1280px;
	margin: 0 auto;
	padding: 2rem 1rem;
	box-sizing: border-box;
}

.edd-pricing-table *,
.edd-pricing-table *::before,
.edd-pricing-table *::after {
	box-sizing: border-box;
}

.edd-pricing-table__cards {
	display: flex;
	justify-content: center;
	gap: 0; /* Cards touch with no gap per Figma */
	flex-wrap: wrap;
}

/* ==========================================================================
   Pricing Card - NO ROUNDED CORNERS per Figma
   ========================================================================== */

.edd-pricing-table .edd-pricing-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	width: 300px !important;
	min-width: 300px !important;
	max-width: 300px !important;
	background: var(--edd-color-white) !important;
	border: 1px solid var(--edd-color-black) !important;
	border-left: none !important; /* Adjacent cards share borders */
	border-radius: 0 !important; /* NO rounded corners per Figma */
	padding: 0 !important;
	overflow: visible !important;
}

/* First card gets left border */
.edd-pricing-table .edd-pricing-card:first-child {
	border-left: 1px solid var(--edd-color-black) !important;
}

/* Inner padding container */
.edd-pricing-card__header,
.edd-pricing-card__pricing,
.edd-pricing-card__cta,
.edd-pricing-card__features,
.edd-pricing-card__see-all {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

.edd-pricing-card--disabled {
	opacity: 0.6;
	pointer-events: none;
}

/* ==========================================================================
   Top Colored Header Bar - ONLY All Access (pink) and Professional (purple)
   ========================================================================== */

.edd-pricing-table .edd-pricing-card__top-border {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 12px !important;
	width: 100% !important;
	z-index: 1 !important;
}

.edd-pricing-table .edd-pricing-card__top-border--pink {
	background: #FFCCD3 !important; /* All Access - Pink */
}

.edd-pricing-table .edd-pricing-card__top-border--purple {
	background: #E9D4FF !important; /* Professional - Purple */
}

.edd-pricing-table .edd-pricing-card__top-border--orange {
	background: #FFD6A8 !important; /* Extended - Orange/Peach */
}

.edd-pricing-table .edd-pricing-card__top-border--light-purple {
	background: #C6D2FF !important; /* Personal - Light Purple/Blue */
}

/* ==========================================================================
   Card Vertical Alignment - Other cards pushed down so titles align with Professional
   ========================================================================== */

.edd-pricing-table .edd-pricing-card--all-access,
.edd-pricing-table .edd-pricing-card--extended,
.edd-pricing-table .edd-pricing-card--personal {
	margin-top: 28px !important; /* Push down to align titles with Professional (which has Best Deal badge) */
}

/* Professional card needs its own left border since it extends 28px above All Access */
.edd-pricing-table .edd-pricing-card--professional {
	border-left: 1px solid var(--edd-color-black) !important;
	margin-left: -1px !important; /* Overlap with All Access right border to prevent double border */
}



/* ==========================================================================
   Best Deal Badge - Black pill
   ========================================================================== */

.edd-pricing-table .edd-pricing-card__badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--edd-color-black) !important;
	color: var(--edd-color-white) !important;
	font-family: var(--edd-font-sans) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	padding: 6px 8px !important;
	border-radius: 1000px !important; /* Pill shape for badge */
	margin: 33px 0 0 24px !important;
	width: fit-content !important;
}

/* ==========================================================================
   Card Header (Title + Description)
   ========================================================================== */

.edd-pricing-card__header {
	padding-top: 45px !important;
	padding-bottom: 0 !important;
}

/* Cards with colored top border need extra top padding */
.edd-pricing-card--all-access .edd-pricing-card__header {
	padding-top: 45px !important;
}

/* Professional card WITH badge (highlighted) - reduced padding since badge provides spacing */
.edd-pricing-card--professional.edd-pricing-card--highlighted .edd-pricing-card__header {
	padding-top: 12px !important;
}

/* Professional card WITHOUT badge - extra padding to align titles with other cards */
/* Other cards: 28px margin-top + 45px padding = 73px. Professional needs same distance to title. */
.edd-pricing-card--professional:not(.edd-pricing-card--highlighted) .edd-pricing-card__header {
	padding-top: 73px !important;
}

.edd-pricing-card__title {
	font-family: var(--edd-font-serif) !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 32px !important;
	color: var(--edd-color-text) !important;
	margin: 0 0 11px 0 !important;
}

.edd-pricing-card__description {
	font-family: var(--edd-font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 18px !important;
	color: var(--edd-color-text-body) !important;
	margin: 0 !important;
}

/* ==========================================================================
   Pricing Section
   ========================================================================== */

.edd-pricing-card__pricing {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}

/* Strikethrough normal price */
.edd-pricing-card__normal-price {
	position: relative !important;
	display: inline-block !important;
	width: fit-content !important;
}

.edd-pricing-card__normal-price-text {
	font-family: var(--edd-font-sans) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 24px !important;
	color: var(--edd-color-text-strike) !important;
	letter-spacing: 0.25px !important;
	text-decoration: line-through !important;
	text-decoration-color: var(--edd-color-red) !important;
}

/* Main price display */
.edd-pricing-card__price {
	display: flex !important;
	align-items: flex-start !important;
}

.edd-pricing-card__price-symbol {
	font-family: var(--edd-font-sans) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 28px !important;
	color: var(--edd-color-text-body) !important;
	margin-top: 13px !important;
}

.edd-pricing-card__price-amount {
	font-family: var(--edd-font-sans) !important;
	font-size: 48px !important;
	font-weight: 500 !important;
	line-height: 56px !important;
	color: var(--edd-color-black) !important;
	margin-left: 6px !important;
}

.edd-pricing-card__price-suffix {
	display: flex !important;
	flex-direction: column !important;
	gap: 7px !important;
	margin-left: 4px !important;
	margin-top: 3px !important;
}

.edd-pricing-card__price-cents {
	font-family: var(--edd-font-sans) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 18px !important;
	color: var(--edd-color-text-body) !important;
}

.edd-pricing-card__price-period {
	font-family: var(--edd-font-sans) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 18px !important;
	color: var(--edd-color-text-muted) !important;
}

/* Yellow savings badge - pill shaped */
.edd-pricing-card__savings {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--edd-color-yellow) !important;
	font-family: var(--edd-font-sans) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 24px !important;
	letter-spacing: 0.25px !important;
	color: var(--edd-color-text) !important;
	padding: 4px 12px !important;
	border-radius: 12px !important; /* Rounded for savings badge */
	height: 28px !important;
	width: 100% !important;
}

/* ==========================================================================
   CTA Buttons - Rounded corners (pill shape) per Figma
   ========================================================================== */

.edd-pricing-card__cta {
	padding-top: 0 !important;
	padding-bottom: 24px !important;
}

.edd-pricing-card__cta--bottom {
	margin-top: auto !important;
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}

.edd-pricing-table .edd-pricing-card__button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	width: 100% !important;
	padding: 12px 32px !important;
	font-family: var(--edd-font-sans) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	letter-spacing: -0.25px !important;
	text-decoration: none !important;
	border-radius: 12px !important; /* Rounded for buttons */
	cursor: pointer !important;
	transition: opacity 0.2s ease !important;
}

.edd-pricing-table .edd-pricing-card__button:hover {
	opacity: 0.9 !important;
	text-decoration: none !important;
}

/* Outlined button style - for All Access, Extended, Personal */
.edd-pricing-table .edd-pricing-card__button--outlined {
	background: transparent !important;
	color: var(--edd-color-black) !important;
	border: 1px solid var(--edd-color-border-light) !important;
}

.edd-pricing-table .edd-pricing-card__button--outlined:hover {
	color: var(--edd-color-black) !important;
}

/* Filled green button style - ONLY for Professional */
/* Uses transparent border to match height of outlined buttons for alignment */
.edd-pricing-table .edd-pricing-card__button--filled {
	background: var(--edd-color-green) !important;
	color: var(--edd-color-white) !important;
	border: 1px solid transparent !important;
}

.edd-pricing-table .edd-pricing-card__button--filled:hover {
	color: var(--edd-color-white) !important;
}

/* Current plan button - distinct green style */
.edd-pricing-table .edd-pricing-card__button--current {
	background: var(--edd-color-green) !important;
	color: var(--edd-color-white) !important;
	border: 1px solid transparent !important;
	cursor: default !important;
}

/* Disabled button */
.edd-pricing-table .edd-pricing-card__button--disabled {
	background: #e5e7eb !important;
	color: #6b7280 !important;
	border: none !important;
	cursor: not-allowed !important;
	opacity: 0.7 !important;
}

.edd-pricing-card__icon {
	width: 24px !important;
	height: 24px !important;
	flex-shrink: 0 !important;
}

/* ==========================================================================
   Divider
   ========================================================================== */

.edd-pricing-card__divider {
	border: none !important;
	border-top: 1px solid var(--edd-color-black) !important;
	margin: 0 0 32px 0 !important;
	width: 100% !important;
}

/* ==========================================================================
   Features Section
   ========================================================================== */

.edd-pricing-card__features {
	display: flex !important;
	flex-direction: column !important;
	gap: 32px !important;
	padding-bottom: 32px !important;
}

.edd-pricing-card__feature-section {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.edd-pricing-card__feature-title {
	font-family: var(--edd-font-sans) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	color: var(--edd-color-black) !important;
	margin: 0 !important;
	display: inline-block !important;
	width: fit-content !important;
	border-bottom: 1px dashed var(--edd-color-black) !important;
	padding-bottom: 2px !important;
}

/* Section titles with tooltips get cursor pointer */
.edd-pricing-card__feature-title--has-tooltip {
	cursor: help !important;
}

.edd-pricing-card__feature-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.edd-pricing-card__feature-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	font-family: var(--edd-font-sans) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 24px !important;
	color: var(--edd-color-text-body) !important;
}

/* Feature items with tooltips get dashed underline */
.edd-pricing-card__feature-item--has-tooltip span {
	border-bottom: 1px dashed var(--edd-color-text-body) !important;
	cursor: help !important;
}

/* Intro items (e.g., "Everything in Professional, and:") - no checkmark, bold */
.edd-pricing-card__feature-item--intro {
	font-weight: 700 !important;
	color: var(--edd-color-black) !important;
}

.edd-pricing-card__feature-item--intro span {
	border-bottom: none !important;
}

.edd-pricing-card__check {
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}

/* ==========================================================================
   Pricing Card Tooltips
   ========================================================================== */

/* Tooltip container for positioning */
.edd-pricing-card__feature-title[data-tooltip],
.edd-pricing-card__feature-item--has-tooltip span[data-tooltip] {
	position: relative !important;
}

/* Tooltip popup */
.edd-pricing-card__feature-title[data-tooltip]:hover::after,
.edd-pricing-card__feature-item--has-tooltip span[data-tooltip]:hover::after {
	content: attr(data-tooltip) !important;
	position: absolute !important;
	bottom: 100% !important;
	left: 0 !important;
	background: var(--edd-color-black) !important;
	color: var(--edd-color-white) !important;
	font-family: var(--edd-font-sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	padding: 10px 14px !important;
	border-radius: 8px !important;
	white-space: normal !important;
	width: 220px !important;
	max-width: 90vw !important;
	z-index: 100 !important;
	margin-bottom: 8px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Tooltip arrow */
.edd-pricing-card__feature-title[data-tooltip]:hover::before,
.edd-pricing-card__feature-item--has-tooltip span[data-tooltip]:hover::before {
	content: '' !important;
	position: absolute !important;
	bottom: 100% !important;
	left: 20px !important;
	margin-bottom: 2px !important;
	border: 6px solid transparent !important;
	border-top-color: var(--edd-color-black) !important;
	z-index: 101 !important;
}

/* ==========================================================================
   See All Features Link
   ========================================================================== */

.edd-pricing-card__see-all {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-family: var(--edd-font-sans) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	letter-spacing: -0.25px !important;
	color: #0a0a0a !important;
	text-decoration: none !important;
	padding-bottom: 32px !important;
}

.edd-pricing-card__see-all:hover {
	text-decoration: underline !important;
	color: #0a0a0a !important;
}

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

@media (max-width: 1300px) {
	.edd-pricing-table__cards {
		flex-wrap: wrap;
	}
}

/* 2-column layout for 4-column displays - prevents 3+1 orphan layout */
@media (max-width: 1250px) {
	.edd-pricing-table[data-columns="4"] .edd-pricing-card {
		width: 50% !important;
		min-width: auto !important;
		max-width: none !important;
	}

	/* First card of each row needs left border when wrapped */
	.edd-pricing-table[data-columns="4"] .edd-pricing-card:nth-child(2n+1) {
		border-left: 1px solid var(--edd-color-black) !important;
	}
}

/* Wider cards when only 3 columns (e.g., personal pass hidden) */
.edd-pricing-table[data-columns="3"] .edd-pricing-card {
	width: 380px !important;
	min-width: 380px !important;
	max-width: 380px !important;
}

/* 2-column layout for 3-column displays - prevents 2+1 orphan layout */
@media (max-width: 1180px) {
	.edd-pricing-table[data-columns="3"] .edd-pricing-card {
		width: 50% !important;
		min-width: auto !important;
		max-width: none !important;
	}

	/* First card of each row needs left border when wrapped */
	.edd-pricing-table[data-columns="3"] .edd-pricing-card:nth-child(2n+1) {
		border-left: 1px solid var(--edd-color-black) !important;
	}
}

@media (max-width: 768px) {
	.edd-pricing-table .edd-pricing-card,
	.edd-pricing-table[data-columns="3"] .edd-pricing-card,
	.edd-pricing-table[data-columns="4"] .edd-pricing-card {
		width: 100% !important;
		max-width: 100% !important;
		min-width: auto !important;
		/* Restore full border on mobile - cards don't share borders when stacked */
		border: 1px solid var(--edd-color-black) !important;
		/* Remove vertical alignment offset on mobile */
		margin-top: 0 !important;
	}

	.edd-pricing-table__cards {
		flex-direction: column;
		flex-wrap: nowrap !important;
		align-items: stretch;
		gap: 24px !important; /* Add gap between stacked cards */
	}

	/* Remove pseudo-element border extensions on mobile */
	.edd-pricing-table .edd-pricing-card--professional::before,
	.edd-pricing-table .edd-pricing-card--professional::after {
		display: none !important;
	}

	/* Normalize Professional header padding on mobile - no alignment offset needed when stacked */
	.edd-pricing-table .edd-pricing-card--professional:not(.edd-pricing-card--highlighted) .edd-pricing-card__header {
		padding-top: 45px !important;
	}

	/* Constrain pricing section to prevent text overflow */
	.edd-pricing-card__pricing {
		overflow: hidden !important;
	}

	/* Reduce price font size on mobile to prevent overflow */
	.edd-pricing-card__price-amount {
		font-size: 40px !important;
		line-height: 48px !important;
	}

	.edd-pricing-card__price-symbol {
		font-size: 16px !important;
		margin-top: 10px !important;
	}

	/* Constrain savings badge text */
	.edd-pricing-card__savings {
		font-size: 14px !important;
		padding: 4px 8px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	/* Constrain normal price text */
	.edd-pricing-card__normal-price-text {
		font-size: 14px !important;
	}
}

/* ==========================================================================
   Pricing Comparison Table
   ========================================================================== */

.edd-pricing-comparison {
	margin: 0 auto;
}

/* Mini Pricing Header - Table-style layout matching Figma */
.edd-pricing-comparison__pricing-header {
	display: grid;
	grid-template-columns: 2fr repeat(4, 1fr); /* Match section grid: feature col + 4 plan cols */
	background: var(--edd-color-white);
	border: none; /* No border on container - borders are on individual cards per Figma */
	border-radius: 0; /* No rounded corners per Figma */
	overflow: visible; /* Allow tooltips to show */
	margin-bottom: 0;
}

/* Adjust for 3 columns when personal pass is hidden */
.edd-pricing-comparison[data-columns="3"] .edd-pricing-comparison__pricing-header {
	grid-template-columns: 2fr repeat(3, 1fr);
}

/* Empty first cell to align with feature column - explicitly no borders */
.edd-pricing-comparison__pricing-header::before {
	content: '';
	display: block;
	border: none;
	background: transparent;
}

/* Mini Pricing Card - Table column style per Figma */
.edd-pricing-card-mini {
	text-align: center;
	padding: 24px 16px;
	background: var(--edd-color-white);
	border-top: 1px solid var(--edd-color-black);
	border-left: 1px solid var(--edd-color-black);
	border-bottom: none;
	border-right: none;
	min-width: 0;
}

/* Last card gets right border */
.edd-pricing-card-mini:last-child {
	border-right: 1px solid var(--edd-color-black);
}

.edd-pricing-card-mini--current {
	background: #f0fdf4;
}

.edd-pricing-card-mini--disabled {
	opacity: 0.6;
}

.edd-pricing-card-mini__title {
	font-family: var(--edd-font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--edd-color-text-body);
	margin: 0 0 8px 0;
}

.edd-pricing-card-mini__price {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 16px;
}

.edd-pricing-card-mini__symbol {
	font-family: var(--edd-font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--edd-color-text-body);
	margin-top: 8px;
	margin-right: 2px;
}

.edd-pricing-card-mini__amount {
	font-family: var(--edd-font-sans);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	color: var(--edd-color-black);
}

.edd-pricing-card-mini__suffix {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-left: 2px;
	margin-top: 6px;
}

.edd-pricing-card-mini__cents {
	font-family: var(--edd-font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--edd-color-text-body);
}

.edd-pricing-card-mini__period {
	font-family: var(--edd-font-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--edd-color-text-muted);
}

.edd-pricing-card-mini__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 20px;
	font-family: var(--edd-font-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	color: var(--edd-color-white);
	background: var(--edd-color-green);
	border-radius: 8px;
	transition: opacity 0.2s ease;
}

.edd-pricing-card-mini__button:hover {
	opacity: 0.9;
	color: var(--edd-color-white);
	text-decoration: none;
}

.edd-pricing-card-mini__button svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.edd-pricing-card-mini__button--current {
	background: var(--edd-color-green);
	color: var(--edd-color-white);
	cursor: default;
}

/* Comparison Section */
.edd-pricing-comparison__section {
	background: var(--edd-color-white);
	border: 1px solid var(--edd-color-black);
	border-radius: 0; /* No rounded corners */
	margin-bottom: 0;
	margin-top: 64px; /* 64px gap between sections */
	overflow: visible; /* Allow tooltips to show */
}

/* First section after header connects seamlessly - no gap */
.edd-pricing-comparison__pricing-header + .edd-pricing-comparison__section {
	border-top: 1px solid var(--edd-color-black);
	margin-top: 0;
}

/* Last section gets margin */
.edd-pricing-comparison__section:last-child {
	margin-bottom: 24px;
}

.edd-pricing-comparison__section-header {
	display: grid;
	grid-template-columns: 2fr repeat(4, 1fr);
	background: var(--edd-color-white);
	border-bottom: 1px solid var(--edd-color-black);
}

/* Section header columns - NO internal borders per Figma */
.edd-pricing-comparison__section-header .edd-pricing-comparison__feature-col,
.edd-pricing-comparison__section-header .edd-pricing-comparison__plan-col {
	border: none;
}

.edd-pricing-comparison[data-columns="3"] .edd-pricing-comparison__section-header {
	grid-template-columns: 2fr repeat(3, 1fr);
}

.edd-pricing-comparison__feature-col,
.edd-pricing-comparison__plan-col {
	padding: 16px;
	font-family: var(--edd-font-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--edd-color-black);
}

.edd-pricing-comparison__plan-col {
	text-align: center;
}

/* Comparison Row */
.edd-pricing-comparison__row {
	display: grid;
	grid-template-columns: 2fr repeat(4, 1fr);
	border-bottom: 1px solid #e5e7eb;
}

.edd-pricing-comparison[data-columns="3"] .edd-pricing-comparison__row {
	grid-template-columns: 2fr repeat(3, 1fr);
}

.edd-pricing-comparison__row:last-child {
	border-bottom: none;
}

.edd-pricing-comparison__feature {
	padding: 14px 16px;
	font-family: var(--edd-font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--edd-color-text-body);
	display: flex;
	align-items: center;
	gap: 8px;
	border-right: 1px solid var(--edd-color-border-light);
}

.edd-pricing-comparison__tooltip {
	color: var(--edd-color-text-muted);
	cursor: help;
	position: relative;
}

.edd-pricing-comparison__tooltip:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--edd-color-black);
	color: var(--edd-color-white);
	font-size: 12px;
	font-weight: 400;
	padding: 8px 12px;
	border-radius: 8px;
	white-space: normal;
	width: 200px;
	max-width: 90vw;
	z-index: 9999;
	margin-bottom: 8px;
	text-align: left;
	line-height: 1.4;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Comparison Cell - Plan columns with borders per Figma */
.edd-pricing-comparison__cell {
	padding: 14px 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--edd-font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--edd-color-text-body);
	border-left: 1px solid var(--edd-color-border-light); /* Column divider per Figma */
}

/* First cell after feature - no left border (feature column already has right border) */
.edd-pricing-comparison__feature + .edd-pricing-comparison__cell {
	border-left: none;
}

/* Last cell gets right border to close the row */
.edd-pricing-comparison__cell:last-child {
	border-right: 1px solid var(--edd-color-border-light);
}

.edd-pricing-comparison__cell--yes svg {
	color: var(--edd-color-green);
}

.edd-pricing-comparison__cell--no svg {
	color: #d1d5db;
}

.edd-pricing-comparison__plan-label {
	display: none;
}

.edd-pricing-comparison__check-tooltip {
	cursor: help;
	position: relative;
}

.edd-pricing-comparison__check-tooltip:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--edd-color-black);
	color: var(--edd-color-white);
	font-size: 12px;
	padding: 8px 12px;
	border-radius: 8px;
	white-space: nowrap;
	z-index: 10;
	margin-bottom: 8px;
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media (max-width: 768px) {
	.edd-pricing-comparison__section-header {
		display: none;
	}

	.edd-pricing-comparison__row {
		display: flex;
		flex-direction: column;
		padding: 16px;
	}

	.edd-pricing-comparison__feature {
		padding: 0 0 12px 0;
		font-weight: 600;
		border-bottom: 1px solid #e5e7eb;
		margin-bottom: 12px;
	}

	.edd-pricing-comparison__cell {
		flex-direction: row;
		justify-content: space-between;
		padding: 8px 0;
		border-bottom: 1px solid #f3f4f6;
	}

	.edd-pricing-comparison__cell:last-child {
		border-bottom: none;
	}

	/* Hide pricing header on mobile - pricing is shown in main table above */
	.edd-pricing-comparison__pricing-header {
		display: none;
	}

	/* Remove vertical column borders on mobile - not needed in stacked layout */
	.edd-pricing-comparison__cell,
	.edd-pricing-comparison__cell:last-child {
		border-left: none;
		border-right: none;
	}

	.edd-pricing-comparison__feature {
		border-right: none;
	}

	.edd-pricing-comparison__plan-label {
		display: block;
		font-weight: 500;
		color: var(--edd-color-text-muted);
	}
}

/* ==========================================================================
   Trusted By Logos Section
   ========================================================================== */

.trusted-by-logos .sp-el-row {
	margin-bottom: 52px;
}

.trusted-by-logos .sp-el-row:last-child {
	margin-bottom: 0;
}

.trusted-by-logos .sp-el-col {
	gap: 30px;
}

.trusted-by-logos .sp-image-wrapper {
	background: #fff;
	border: 1px solid #171717;
	width: 250px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
}