/*
 * Feature Comparison — frontend styles.
 *
 * Header/alt-row colors and typography values come from the exact spec
 * given for this build; everything else (row heights, borders, column
 * proportions) is a best-effort match against the supplied Figma
 * screenshot, following the same conventions already established
 * elsewhere in this theme (Poppins, #000000 body text, green_sign.svg
 * checkmarks).
 *
 * @package Greenova
 */

.feature-comparison {
	background-color: #FFFFFF;
	padding-block:     100px;
}

.feature-comparison__intro {
	text-align: center;
	max-width:  700px;
	margin:     0 auto 48px;
}

.feature-comparison__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      48px;
	font-weight:    500;
	line-height:    52.8px;
	letter-spacing: -1.92px;
	color:          #000000;
	text-align:     center;
	margin:         0 0 16px;
}

.feature-comparison__description {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   18px;
	font-weight: 400;
	line-height: 28.8px;
	color:       #000000;
	text-align:  center;
	margin:      0;
}

.feature-comparison__state {
	text-align:  center;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	color:       #58595B;
	padding:     48px 0;
	margin:      0;
}

.feature-comparison__state--error {
	color: #B91C1C;
}

/* =============================================================================
   Table
   ============================================================================= */

.feature-comparison__scroll {
	max-width:     1120px;
	margin:        0 auto;
	overflow-x:    auto;
	border:        1px solid #E1E9F1;
	border-radius: 16px;
	/* Sticky first column needs a positioned scroll ancestor — this is it. */
	-webkit-overflow-scrolling: touch;
}

.feature-comparison__table {
	width:           100%;
	min-width:       640px; /* Below this the columns get too cramped — triggers the horizontal scroll instead of squashing content. */
	border-collapse: collapse;
	table-layout:    fixed;
}

.feature-comparison__table thead th {
	background-color: #EEF8FE;
	font-family:       'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:         13px;
	font-weight:       600;
	color:             #58595B;
	text-align:        center;
	padding:           16px 20px;
	border-bottom:     1px solid #E1E9F1;
}

.feature-comparison__table thead th.feature-comparison__col-feature {
	text-align: left;
}

.feature-comparison__table tbody tr {
	background-color: #FFFFFF;
}

.feature-comparison__table tbody tr.feature-comparison__row--alt {
	background-color: #F7FBFF;
}

.feature-comparison__table tbody tr:not(:last-child) th,
.feature-comparison__table tbody tr:not(:last-child) td {
	border-bottom: 1px solid #E1E9F1;
}

.feature-comparison__table tbody th,
.feature-comparison__table tbody td {
	padding:    14px 20px;
	vertical-align: middle;
}

/* =============================================================================
   Columns — Feature column wider than the (equal-width) plan columns.
   ============================================================================= */

.feature-comparison__col-feature {
	width:      34%;
	text-align: left;
}

.feature-comparison__col-plan {
	text-align: center;
}

.feature-comparison__feature-title {
	display:     block;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   15px;
	font-weight: 600;
	line-height: 1.4;
	color:       #000000;
}

.feature-comparison__feature-desc {
	display:     block;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   13px;
	font-weight: 400;
	line-height: 1.5;
	color:       #58595B;
	margin-top:  4px;
}

.feature-comparison__check {
	width:      18px;
	height:     18px;
	display:    inline-block;
	object-fit: contain;
	vertical-align: middle;
}

.feature-comparison__dash {
	font-size:   16px;
	font-weight: 400;
	color:       #9CA3AF;
}

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

@media ( max-width: 1199.98px ) {
	.feature-comparison {
		padding-block: 80px;
	}

	.feature-comparison__heading {
		font-size:      2.25rem;
		line-height:    1.2;
		letter-spacing: -0.03em;
	}
}

/*
 * Tablet/mobile: horizontal scroll (see .feature-comparison__scroll's
 * overflow-x:auto, always on) rather than squashing columns — plus a
 * sticky first column so the feature name/description stays visible while
 * scrolling the plan columns, per "keep the first column readable".
 */
@media ( max-width: 767.98px ) {
	.feature-comparison {
		padding-block: 56px;
	}

	.feature-comparison__heading {
		font-size: 1.75rem;
	}

	.feature-comparison__description {
		font-size: 1rem;
	}

	.feature-comparison__col-feature {
		position:   sticky;
		left:       0;
		z-index:    1;
		width:      auto;
		min-width:  180px;
		max-width:  220px;
		box-shadow: 1px 0 0 #E1E9F1;
	}

	.feature-comparison__table thead th.feature-comparison__col-feature {
		background-color: #EEF8FE;
	}

	.feature-comparison__table tbody tr .feature-comparison__col-feature {
		background-color: #FFFFFF;
	}

	.feature-comparison__table tbody tr.feature-comparison__row--alt .feature-comparison__col-feature {
		background-color: #F7FBFF;
	}

	.feature-comparison__col-plan {
		min-width: 110px;
	}
}