/**
 * Devgraphix Elementor Addons — Comparison Table Checked.
 *
 * A true row/column comparison matrix: a sticky-capable feature column on the
 * left, one column per product, and a check / dash / text / badge in every
 * cell. One product column can be highlighted (solid header + tinted cells).
 *
 * Responsive strategy
 *   - Desktop / tablet: the table keeps its grid and scrolls horizontally
 *     inside .dgx-cmpc__scroll when it is wider than the container. The label
 *     column can stay pinned while you scroll.
 *   - Mobile: either keep scrolling (default) or switch to the stacked layout
 *     (.dgx-cmpc--stack), where every feature becomes its own card and each
 *     value is labelled with its column name via data-col.
 *
 * Every colour / size below is driven by a custom property so the Elementor
 * Style tab can override it per breakpoint.
 */

.dgx-cmpc {
	/* Palette. */
	--cmpc-brand: #1668d6;
	--cmpc-ink: #0f2745;
	--cmpc-text: #33475b;
	--cmpc-border: #dce8f5;
	--cmpc-border-w: 1px;

	--cmpc-corner-bg: #eaf2fb;
	--cmpc-head-bg: #ffffff;
	--cmpc-label-bg: #f4f8fd;

	--cmpc-hl-head-bg: #0f56bd;
	--cmpc-hl-head-color: #ffffff;
	--cmpc-hl-tint: #eaf2fd;
	--cmpc-hl-value-color: #1668d6;

	--cmpc-zebra: transparent;
	--cmpc-hover: transparent;

	--cmpc-check: #22b573;
	--cmpc-dash: #c3ced9;
	--cmpc-badge-bg: #fdf0d5;
	--cmpc-badge-color: #b07d1a;

	/* Metrics. */
	--cmpc-label-w: 150px;
	--cmpc-col-min: 100px;
	--cmpc-cols: 1;
	--cmpc-radius: 0px;
	--cmpc-mark-size: 17px;
	--cmpc-dash-size: 15px;

	--cmpc-head-pad-y: 16px;
	--cmpc-head-pad-x: 12px;
	--cmpc-cell-pad-y: 14px;
	--cmpc-cell-pad-x: 12px;

	font-family: inherit;
	color: var(--cmpc-text);
}

.dgx-cmpc *,
.dgx-cmpc *::before,
.dgx-cmpc *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Scroll shell
 * ------------------------------------------------------------------------- */
.dgx-cmpc__scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--cmpc-radius);
	scrollbar-width: thin;
}

.dgx-cmpc__scroll::-webkit-scrollbar {
	height: 8px;
}

.dgx-cmpc__scroll::-webkit-scrollbar-track {
	background: rgba(15, 39, 69, 0.05);
}

.dgx-cmpc__scroll::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(15, 39, 69, 0.22);
}

/* ---------------------------------------------------------------------------
 * Table grid
 * ------------------------------------------------------------------------- */
.dgx-cmpc__table {
	width: 100%;
	min-width: calc(var(--cmpc-label-w) + (var(--cmpc-cols) * var(--cmpc-col-min)));
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	background: transparent;
}

/* Neutralise theme table styling (many themes stripe / border tables). */
.dgx-cmpc__table tr,
.dgx-cmpc__table th,
.dgx-cmpc__table td {
	background-image: none;
}

.dgx-cmpc__cell {
	border: var(--cmpc-border-w) solid var(--cmpc-border);
	vertical-align: middle;
	word-break: break-word;
	hyphens: auto;
}

/* --- Header row ---------------------------------------------------------- */
.dgx-cmpc__cell--feature,
.dgx-cmpc__cell--head {
	padding: var(--cmpc-head-pad-y) var(--cmpc-head-pad-x);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.dgx-cmpc__cell--feature {
	width: var(--cmpc-label-w);
	background: var(--cmpc-corner-bg);
	color: var(--cmpc-ink);
	text-align: left;
}

.dgx-cmpc__cell--head {
	background: var(--cmpc-head-bg);
	color: var(--cmpc-brand);
	text-align: center;
}

.dgx-cmpc__cell--head.is-hl {
	background: var(--cmpc-hl-head-bg);
	color: var(--cmpc-hl-head-color);
}

.dgx-cmpc__head-link {
	color: inherit;
	text-decoration: none;
}

.dgx-cmpc__head-link:hover {
	text-decoration: underline;
}

.dgx-cmpc__logo {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.dgx-cmpc__head-sub {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 500;
	opacity: 0.75;
}

/* --- Body ---------------------------------------------------------------- */
.dgx-cmpc__cell--label,
.dgx-cmpc__cell--val {
	padding: var(--cmpc-cell-pad-y) var(--cmpc-cell-pad-x);
}

.dgx-cmpc__cell--label {
	width: var(--cmpc-label-w);
	background: var(--cmpc-label-bg);
	color: var(--cmpc-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}

.dgx-cmpc__cell--val {
	background: transparent;
	color: var(--cmpc-text);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	text-align: center;
}

.dgx-cmpc__cell--val.is-hl {
	background: var(--cmpc-hl-tint);
	color: var(--cmpc-hl-value-color);
	font-weight: 600;
}

/* Zebra + hover sit under the highlight tint so the highlight always wins. */
.dgx-cmpc__row:nth-child(even) .dgx-cmpc__cell--val:not(.is-hl) {
	background: var(--cmpc-zebra);
}

.dgx-cmpc__row:hover .dgx-cmpc__cell--val:not(.is-hl) {
	background: var(--cmpc-hover);
}

/* Optional per-row emphasis (e.g. a summary row). */
.dgx-cmpc__row--emphasis .dgx-cmpc__cell--val,
.dgx-cmpc__row--emphasis .dgx-cmpc__cell--label {
	font-weight: 700;
}

/* --- Marks --------------------------------------------------------------- */
.dgx-cmpc__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	line-height: 1;
}

.dgx-cmpc__check {
	color: var(--cmpc-check);
	font-size: var(--cmpc-mark-size);
}

.dgx-cmpc__check svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.dgx-cmpc__check i,
.dgx-cmpc__check svg[class] {
	font-size: 1em;
	line-height: 1;
}

.dgx-cmpc__dash {
	color: var(--cmpc-dash);
	font-size: var(--cmpc-dash-size);
	line-height: 1;
}

.dgx-cmpc__mark-text {
	color: inherit;
	font-size: inherit;
}

.dgx-cmpc__badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cmpc-badge-bg);
	color: var(--cmpc-badge-color);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

/* --- Sticky label column -------------------------------------------------
 * Chrome drops collapsed borders on sticky cells while they are pinned, so the
 * right-hand divider is painted as an inset shadow instead.
 * ------------------------------------------------------------------------- */
.dgx-cmpc--sticky .dgx-cmpc__cell--feature,
.dgx-cmpc--sticky .dgx-cmpc__cell--label {
	position: sticky;
	left: 0;
	z-index: 2;
	box-shadow: inset calc(var(--cmpc-border-w) * -1) 0 0 0 var(--cmpc-border);
}

/* --- Footnote ------------------------------------------------------------ */
.dgx-cmpc__note {
	margin: 18px 0 0;
	color: #8aa0b5;
	font-size: 12px;
	line-height: 1.6;
	text-align: left;
}

/* Hide the scroll hint once the viewport is wide enough to show everything. */
.dgx-cmpc__hint {
	display: none;
	margin: 10px 0 0;
	color: #8aa0b5;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Tablet / mobile
 *
 * Padding, font sizes and mark sizes are NOT re-declared here: the Elementor
 * controls emit them per breakpoint at a higher specificity (they are prefixed
 * with the element wrapper), so anything set here would be dead weight. Only
 * rules Elementor cannot express live in these media queries.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.dgx-cmpc__hint {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile — stacked mode: one card per feature row
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.dgx-cmpc--stack .dgx-cmpc__scroll {
		overflow: visible;
	}

	.dgx-cmpc--stack .dgx-cmpc__hint {
		display: none;
	}

	.dgx-cmpc--stack .dgx-cmpc__table {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.dgx-cmpc--stack .dgx-cmpc__thead {
		display: none;
	}

	.dgx-cmpc--stack .dgx-cmpc__tbody {
		display: block;
	}

	.dgx-cmpc--stack .dgx-cmpc__row {
		display: block;
		margin-bottom: 14px;
		border: var(--cmpc-border-w) solid var(--cmpc-border);
		border-radius: 12px;
		overflow: hidden;
	}

	.dgx-cmpc--stack .dgx-cmpc__row:last-child {
		margin-bottom: 0;
	}

	.dgx-cmpc--stack .dgx-cmpc__cell {
		display: block;
		width: auto;
		border: 0;
		border-bottom: var(--cmpc-border-w) solid var(--cmpc-border);
	}

	.dgx-cmpc--stack .dgx-cmpc__row .dgx-cmpc__cell:last-child {
		border-bottom: 0;
	}

	.dgx-cmpc--stack .dgx-cmpc__cell--label {
		position: static;
		width: auto;
		box-shadow: none;
		font-size: 14px;
		font-weight: 700;
	}

	.dgx-cmpc--stack .dgx-cmpc__cell--val {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		text-align: right;
	}

	.dgx-cmpc--stack .dgx-cmpc__cell--val::before {
		content: attr(data-col);
		flex: 1 1 auto;
		color: var(--cmpc-ink);
		font-size: 12px;
		font-weight: 600;
		text-align: left;
		opacity: 0.75;
	}

	.dgx-cmpc--stack .dgx-cmpc__cell--val.is-hl::before {
		color: var(--cmpc-hl-value-color);
		opacity: 1;
	}

	.dgx-cmpc--stack .dgx-cmpc__cell--val > * {
		flex: 0 0 auto;
	}

	.dgx-cmpc--stack .dgx-cmpc__note {
		text-align: left;
	}
}

/* Respect reduced motion / print. */
@media print {
	.dgx-cmpc__scroll {
		overflow: visible;
	}

	.dgx-cmpc__hint {
		display: none;
	}
}