/**
 * Flavors Comparison Table - base layout & cell styling.
 *
 * The table is a CSS grid: column count comes from `--flavor-ct-cols` (set
 * inline on .flavor-ct as a structural value, the only render-side custom
 * property). Every visual value (colors, padding, typography, dividers,
 * highlight emphasis) is injected by Elementor control `selectors` as CSS
 * custom properties / scoped rules, so this file stays static and
 * HTTP-cacheable (no per-render inline <style>).
 *
 * Grid model: 1 feature-label column + N value columns. Header / body / footer
 * rows are `display: contents` so their cells participate in the parent grid,
 * giving every value column a perfectly shared width.
 */

.flavor-ct-wrap {
	width: 100%;
}

.flavor-ct {
	display: grid;
	grid-template-columns: minmax(140px, 1.4fr) repeat(var(--flavor-ct-cols, 3), minmax(0, 1fr));
	position: relative;
	overflow: hidden;
	/* Defaults; overridden by control selectors. */
	--flavor-ct-divider: #e7e9ec;
	--flavor-ct-col-divider: transparent;
	--flavor-ct-stripe: #f6f7f9;
	--flavor-ct-hl-scale: 1;
	--flavor-ct-hl-border: transparent;
	--flavor-ct-hl-border-width: 0px;
}

/* Rows are layout-transparent so their cells land on the parent grid tracks. */
.flavor-ct-row {
	display: contents;
}
/* The body wrapper must be layout-transparent too. .flavor-ct is the grid and
   .flavor-ct-row is display:contents so its cells land on the grid tracks, but
   this rowgroup sits between them. Without a rule it defaults to display:block,
   becomes a single grid item, and every body cell stacks vertically instead of
   forming columns: a six-row table rendered 1176px tall as one column. */
.flavor-ct-body {
	display: contents;
}


.flavor-ct-cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	box-sizing: border-box;
	border-bottom: 1px solid var(--flavor-ct-divider);
}

/* Vertical separators between value columns (off by default - transparent). */
.flavor-ct-col {
	border-left: 1px solid var(--flavor-ct-col-divider);
}

/* ------------------------------------------------------------------ Header */
.flavor-ct-head .flavor-ct-cell {
	gap: 6px;
	position: relative;
}

.flavor-ct-plan-name {
	display: block;
	line-height: 1.25;
	font-weight: 600;
}

.flavor-ct-plan-subtitle {
	display: block;
	line-height: 1.3;
}

.flavor-ct-corner-text {
	font-weight: 600;
}

/* "Most popular" badge */
.flavor-ct-badge {
	display: inline-block;
	align-self: center;
	margin-bottom: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ------------------------------------------------------------- Feature label */
.flavor-ct-feature {
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
}

/* ---------------------------------------------------------------- Value cells */
.flavor-ct-value {
	align-items: center;
}

.flavor-ct-body .flavor-ct-col {
	align-items: center;
}

.flavor-ct-value-text {
	display: block;
	line-height: 1.4;
	word-break: break-word;
}

.flavor-ct-empty {
	opacity: .5;
}

/* Icons (check / cross) rendered as styled spans wrapping an <i>/<svg>/glyph. */
.flavor-ct-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.flavor-ct-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.flavor-ct-icon i {
	font-size: inherit;
	color: inherit;
}

.flavor-ct-glyph {
	font-size: inherit;
	line-height: 1;
}

/* --------------------------------------------------------- Highlighted column */
/*
 * The highlighted column gets a colored side/top border drawn with insets,
 * an optional emphasis scale, and lifts above neighbouring column dividers.
 */
.flavor-ct-col.is-highlighted {
	position: relative;
	border-left-color: transparent;
}

.flavor-ct-col.is-highlighted::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-left: var(--flavor-ct-hl-border-width, 0px) solid var(--flavor-ct-hl-border, transparent);
	border-right: var(--flavor-ct-hl-border-width, 0px) solid var(--flavor-ct-hl-border, transparent);
	z-index: 2;
}

/* Cap the highlight outline: top edge on the header, bottom edge on the last row. */
.flavor-ct-head .flavor-ct-col.is-highlighted::before {
	border-top: var(--flavor-ct-hl-border-width, 0px) solid var(--flavor-ct-hl-border, transparent);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.flavor-ct-foot .flavor-ct-col.is-highlighted::before {
	border-bottom: var(--flavor-ct-hl-border-width, 0px) solid var(--flavor-ct-hl-border, transparent);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/*
 * When no footer row exists, the last body row carries the bottom border cap.
 * (Footer absent -> body is the final rowgroup.)
 */
.flavor-ct-body:last-child .flavor-ct-row:last-child .flavor-ct-col.is-highlighted::before {
	border-bottom: var(--flavor-ct-hl-border-width, 0px) solid var(--flavor-ct-hl-border, transparent);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* Emphasis scale (1 by default; disabled on mobile further down). The old
   selector looked for the variable in the inline style attribute, where it
   never is (the control sets it through a stylesheet), so it never applied.
   The table also stops clipping so the enlarged header is not cut off. */
@media (min-width: 768px) {
	.flavor-ct .flavor-ct-head .flavor-ct-col.is-highlighted {
		transform: scale(var(--flavor-ct-hl-scale, 1));
		transform-origin: center bottom;
		z-index: 2;
	}

	.flavor-ct:has(.flavor-ct-head .flavor-ct-col.is-highlighted) {
		overflow: visible;
	}
}

/* ----------------------------------------------------------------- Zebra rows */
/*
 * Stripe every other BODY row. Because rows use display:contents, we tint the
 * cells of even rows. Highlighted-column cells keep their own background.
 */
.flavor-ct-zebra-yes .flavor-ct-body .flavor-ct-row:nth-child(even) .flavor-ct-cell {
	background-color: var(--flavor-ct-stripe);
}

.flavor-ct-zebra-yes .flavor-ct-body .flavor-ct-row:nth-child(even) .flavor-ct-col.is-highlighted {
	/* Keep the highlight colour over the stripe, darkened a touch so the
	   striping still reads inside the highlighted column. */
	background-color: var(--flavor-ct-hl-bg, var(--flavor-ct-stripe));
	background-image: linear-gradient(0deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .03));
}

/* --------------------------------------------------------------------- Footer */
.flavor-ct-foot .flavor-ct-cell {
	border-bottom: 0;
}

.flavor-ct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	border: 0;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.flavor-ct-btn:hover {
	transform: translateY(-1px);
}

.flavor-ct-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* A CTA without a URL is a plain label: no pointer, no hover lift. */
.flavor-ct-btn--static {
	cursor: default;
}

.flavor-ct-btn--static:hover {
	transform: none;
}

.flavor-ct-btn-text {
	display: inline-block;
}

/* ----------------------------------------------------------- Editor empty-state */
.flavor-ct-empty-state {
	padding: 40px;
	text-align: center;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	color: #646970;
}

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

/*
 * Mode A - Horizontal scroll (default, body class flavor-ct-mobile-scroll):
 * keep the table laid out and let the wrapper scroll sideways on small screens.
 * A minimum table width forces the scroll instead of crushing columns.
 */
@media (max-width: 767px) {
	.flavor-ct-mobile-scroll .flavor-ct-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.flavor-ct-mobile-scroll .flavor-ct {
		min-width: 520px;
	}

	/* No scale emphasis on mobile - avoids clipping inside the scroller. */
	.flavor-ct-mobile-scroll .flavor-ct-head .flavor-ct-col.is-highlighted {
		transform: none;
	}
}

/*
 * Mode B - Shrink to fit (body class flavor-ct-mobile-fit): no horizontal
 * scroll; tighten paddings/typography so all columns stay visible.
 */
@media (max-width: 767px) {
	.flavor-ct-mobile-fit .flavor-ct {
		grid-template-columns: minmax(84px, 1.1fr) repeat(var(--flavor-ct-cols, 3), minmax(0, 1fr));
	}

	.flavor-ct-mobile-fit .flavor-ct-cell {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.flavor-ct-mobile-fit .flavor-ct-head .flavor-ct-col.is-highlighted {
		transform: none;
	}

	.flavor-ct-mobile-fit .flavor-ct-badge {
		font-size: 9px;
		padding: 1px 6px;
	}
}

/* Reduced-motion: drop the button lift transform. */
@media (prefers-reduced-motion: reduce) {
	.flavor-ct-btn,
	.flavor-ct-head .flavor-ct-col.is-highlighted {
		transition: none;
	}

	.flavor-ct-btn:hover {
		transform: none;
	}
}