/*
 * Pricing Plans — frontend styles.
 *
 * Values are a best-effort pixel match against the supplied Figma
 * screenshot (no exported spec/redlines were provided alongside this
 * build) — typography scale, spacing, and color usage follow the same
 * conventions already established elsewhere in this theme (Poppins,
 * #000000 body text, #58595B secondary gray, #219FD6 accent blue,
 * green_sign.svg checkmarks). Adjust the values below directly if a
 * pixel-redline Figma export becomes available.
 *
 * @package Greenova
 */

.pricing-plans {
	background-color: #FFFFFF;
	padding-block:     100px;
}

.pricing-plans__intro {
	text-align: center;
	max-width:  760px;
	margin:     0 auto 40px;
}

.pricing-plans__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      40px;
	font-weight:    500;
	line-height:    1.2;
	letter-spacing: -0.02em;
	color:          #000000;
	margin:         0 0 16px;
}

.pricing-plans__description {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 1.6;
	color:       #58595B;
	margin:      0;
}

/* =============================================================================
   Monthly / Yearly toggle
   ============================================================================= */

.pricing-plans__toggle {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	margin:          0 0 48px;
}

.pricing-plans__toggle-label {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   14px;
	font-weight: 500;
	color:       #9CA3AF;
	cursor:      pointer;
	transition:  color 0.2s ease;
}

.pricing-plans__toggle-label[data-pricing-toggle-label="monthly"] {
	color: #000000;
}

.pricing-plans__toggle.is-yearly .pricing-plans__toggle-label[data-pricing-toggle-label="monthly"] {
	color: #9CA3AF;
}

.pricing-plans__toggle.is-yearly .pricing-plans__toggle-label[data-pricing-toggle-label="yearly"] {
	color: #000000;
}

.pricing-plans__switch {
	position:      relative;
	width:         44px;
	height:        24px;
	padding:       0;
	border:        none;
	border-radius: 24px;
	background:    #219FD6;
	cursor:        pointer;
	flex-shrink:   0;
	transition:    background-color 0.25s ease;
}

.pricing-plans__switch-thumb {
	position:         absolute;
	top:              3px;
	left:             3px;
	width:            18px;
	height:           18px;
	border-radius:    50%;
	background-color: #FFFFFF;
	box-shadow:       0 1px 3px rgba(0, 0, 0, 0.25);
	transition:       transform 0.25s ease;
}

.pricing-plans__toggle.is-yearly .pricing-plans__switch-thumb {
	transform: translateX(20px);
}

.pricing-plans__badge {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      12px;
	font-weight:    600;
	color:          #14532D;
	background:     #DCFCE7;
	padding:        4px 10px;
	border-radius:  20px;
	white-space:    nowrap;
}

/* =============================================================================
   Loading / empty / error states
   ============================================================================= */

.pricing-plans__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;
}

.pricing-plans__state--error {
	color: #B91C1C;
}

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

/*
 * align-items is left at its grid default (stretch, not "start") so every
 * card in the row matches the tallest one exactly — combined with each
 * card's feature list being capped to 4 rows (see the template), this is
 * what guarantees identical card heights even when descriptions/eyebrows
 * differ slightly in line count: .pricing-plans__feature-list's
 * flex:1 1 auto (below) absorbs that stretched extra height, keeping the
 * CTA pinned to the same bottom edge on every card either way.
 */
.pricing-plans__cards {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
	max-width:              1120px;
	margin:                 0 auto;
}

.pricing-plans__card {
	position:      relative;
	display:       flex;
	flex-direction: column;
	background:    #FFFFFF;
	border:        1px solid #E5E7EB;
	border-radius: 20px;
	padding:       32px;
	box-sizing:    border-box;
	transition:    box-shadow 0.25s ease, transform 0.25s ease;
}

.pricing-plans__card:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	transform:  translateY(-4px);
}

.pricing-plans__card--popular {
	border-width: 2px;
	border-color: #F97316; /* Falls back to this orange if the API doesn't supply its own accent color — the inline style (see template) overrides it when it does. */
}

.pricing-plans__popular-badge {
	position:       absolute;
	top:            -14px;
	left:           50%;
	transform:      translateX(-50%);
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color:          #FFFFFF;
	background:     #F97316;
	padding:        5px 16px;
	border-radius:  20px;
	white-space:    nowrap;
}

.pricing-plans__card-eyebrow {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      12px;
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          #9CA3AF;
	margin:         0 0 16px;
}

.pricing-plans__card-price {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   36px;
	font-weight: 600;
	line-height: 1.1;
	color:       #000000;
	margin:      0 0 16px;
}

.pricing-plans__card-price--custom {
	font-size: 28px;
}

.pricing-plans__card-price-suffix {
	font-size:   14px;
	font-weight: 400;
	color:       #9CA3AF;
	margin-left: 4px;
}

.pricing-plans__card-desc {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   14px;
	font-weight: 400;
	line-height: 1.6;
	color:       #58595B;
	margin:      0 0 20px;
}

.pricing-plans__includes-label {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          #9CA3AF;
	margin:         0 0 12px;
}

.pricing-plans__feature-list {
	list-style: none;
	margin:     0 0 24px;
	padding:    0;
	flex:       1 1 auto; /* Pushes the CTA button to a consistent bottom edge across cards of different feature-list lengths. */
}

.pricing-plans__feature {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      14px;
	font-weight:    500;
	line-height:    1.4;
	color:          #111827;
	display:        flex;
	flex-wrap:      wrap;
	align-items:    center;
	gap:            8px;
	margin:         0 0 12px;
}

.pricing-plans__feature:last-child {
	margin-bottom: 0;
}

.pricing-plans__feature-icon {
	flex-shrink: 0;
	width:       14px;
	height:      14px;
	display:     block;
	object-fit:  contain;
}

.pricing-plans__sub-feature-list {
	list-style: none;
	margin:     8px 0 0 22px;
	padding:    0;
	width:      100%;
}

.pricing-plans__sub-feature {
	font-size:   13px;
	font-weight: 400;
	color:       #58595B;
	display:     flex;
	align-items: center;
	gap:         8px;
	margin:      0 0 8px;
}

.pricing-plans__sub-feature:last-child {
	margin-bottom: 0;
}

/* =============================================================================
   "More Features" — trigger + popover for the hidden overflow features
   ============================================================================= */

.pricing-plans__more-wrap {
	position: relative;
	margin:   -12px 0 24px;
}

.pricing-plans__more-trigger {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      13px;
	font-weight:    600;
	color:          #219FD6;
	background:     transparent;
	border:         none;
	padding:        0;
	cursor:         pointer;
}

.pricing-plans__more-trigger svg {
	flex-shrink: 0;
	transition:  transform 0.2s ease;
}

.pricing-plans__more-wrap.is-open .pricing-plans__more-trigger svg {
	transform: rotate(180deg);
}

.pricing-plans__more-popover {
	position:      absolute;
	left:          0;
	right:         0;
	bottom:        calc(100% + 10px);
	z-index:       5;
	max-height:    240px;
	overflow-y:    auto;
	background:    #FFFFFF;
	border:        1px solid #E5E7EB;
	border-radius: 16px;
	box-shadow:    0 16px 40px rgba(0, 0, 0, 0.12);
	padding:       20px;
	box-sizing:    border-box;
	opacity:       0;
	visibility:    hidden;
	transform:     translateY(8px);
	transition:    opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.pricing-plans__more-wrap.is-open .pricing-plans__more-popover {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
}

/* Popover reuses .pricing-plans__feature-list wholesale — it's a plain
   block context here (not the card's flex column), so that list's own
   flex:1 1 auto is simply inert, and every checkmark/indent/spacing rule
   applies identically to both places for free. */
.pricing-plans__more-popover .pricing-plans__feature-list {
	margin: 0;
}

.pricing-plans__cta {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	font-family:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:       15px;
	font-weight:     500;
	color:           #000000;
	background:      transparent;
	border:          1px solid #D1D5DB;
	border-radius:   999px;
	padding:         12px 20px;
	text-decoration: none;
	transition:      background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pricing-plans__cta:hover {
	background:   #000000;
	border-color: #000000;
	color:        #FFFFFF;
}

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

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

	.pricing-plans__heading {
		font-size: 2rem;
	}
}

@media ( max-width: 991.98px ) {
	.pricing-plans__cards {
		grid-template-columns: 1fr;
		max-width:  520px;
	}

	.pricing-plans__card--popular {
		order: -1; /* Popular plan reads first on a single stacked column. */
	}
}

@media ( max-width: 575.98px ) {
	.pricing-plans {
		padding-block: 56px;
	}

	.pricing-plans__heading {
		font-size: 1.75rem;
	}

	.pricing-plans__card {
		padding: 24px;
	}

	.pricing-plans__toggle {
		flex-wrap: wrap;
		gap:       8px;
	}
}