/* Effects Guide comparison table — /effects/ page (was inline in Avada Code Block; style tags get kses-stripped). */

.serenite-table-wrapper {
	--sage-green: #9caf88;
	--text-color: #2f3a2f;
	--border-color: #e3e7e0;
	--row-alt: #f8faf7;
	--empty-star: #d7ddd2;

	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 2rem;
}

table.serenite-effects-table {
	min-width: 1100px;
	width: 100%;
	border-collapse: collapse;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
	color: var(--text-color);
}

table.serenite-effects-table th,
table.serenite-effects-table td {
	text-align: left;
	padding: 12px 10px;
	border-bottom: 1px solid var(--border-color);
	white-space: nowrap;
	vertical-align: middle;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

table.serenite-effects-table th {
	font-weight: 600;
	font-size: 15px;
	background: #fbfcfa;
	cursor: pointer;
	user-select: none;
}

table.serenite-effects-table tbody tr:nth-child(even) {
	background-color: var(--row-alt);
}

table.serenite-effects-table th.sort-asc::after {
	content: " ▲";
	font-size: 11px;
}

table.serenite-effects-table th.sort-desc::after {
	content: " ▼";
	font-size: 11px;
}

.serenite-table-wrapper .rating {
	letter-spacing: 1px;
	font-size: 14px;
	color: var(--sage-green);
	font-weight: 600;
	display: inline-block;
	min-width: 78px;
}

.serenite-table-wrapper .rating .empty {
	color: var(--empty-star);
}

.serenite-table-wrapper .table-note {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #5b6659;
	margin-top: 10px;
	line-height: 1.5;
	white-space: normal;
}