/**
 * Compare Page — Sticky header, horizontal scroll, difference highlight.
 *
 * @package NewTechPrice
 */

.ntp-compare-scroll {
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.ntp-compare-scroll::-webkit-scrollbar {
	height: 8px;
}

.ntp-compare-scroll::-webkit-scrollbar-track {
	background: var(--ntp-surface-color, #f1f2f6);
}

[data-theme="dark"] .ntp-compare-scroll::-webkit-scrollbar-track {
	background: var(--ntp-surface-color, #1e293b);
}

.ntp-compare-scroll::-webkit-scrollbar-thumb {
	background: var(--ntp-border-color, #dfe4ea);
	border-radius: 4px;
}

[data-theme="dark"] .ntp-compare-scroll::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--ntp-border-color, #334155) 85%, var(--ntp-surface-color, #1e293b));
}

.ntp-compare-table .ntp-compare-header-row th {
	box-shadow: 0 1px 0 0 var(--ntp-border-color, #dfe4ea);
}

[data-theme="dark"] .ntp-compare-table .ntp-compare-header-row th {
	box-shadow: 0 1px 0 0 var(--ntp-border-color, #334155);
}

.ntp-compare-table .ntp-compare-spec-label {
	box-shadow: 2px 0 4px -2px color-mix(in srgb, var(--ntp-text-color, #2f3542) 8%, transparent);
}

[data-theme="dark"] .ntp-compare-table .ntp-compare-spec-label {
	box-shadow: 2px 0 4px -2px color-mix(in srgb, var(--ntp-bg-color, #0f172a) 30%, transparent);
}

.ntp-compare-spec-row.ntp-has-diff:not(.ntp-diff-visible) {
	opacity: 0.85;
}

.ntp-compare-spec-row.ntp-has-diff.ntp-diff-visible {
	background: color-mix(in srgb, var(--ntp-secondary-color, #ffc107) 8%, var(--ntp-bg-color, #ffffff));
}

[data-theme="dark"] .ntp-compare-spec-row.ntp-has-diff.ntp-diff-visible {
	background: color-mix(in srgb, var(--ntp-secondary-color, #fbbf24) 12%, var(--ntp-bg-color, #0f172a));
}

.ntp-compare-spec-row.ntp-has-diff.ntp-diff-visible .ntp-compare-spec-value {
	font-weight: 500;
}

.ntp-compare-add-suggest.ntp-visible,
.ntp-compare-search-suggest.ntp-search-suggest--visible {
	display: block !important;
}

.ntp-compare-search-suggest .ntp-search-suggest__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	transition: background 0.15s;
}

.ntp-compare-search-suggest .ntp-search-suggest__item:hover {
	background: var(--ntp-surface-color, #f1f2f6);
}

[data-theme="dark"] .ntp-compare-search-suggest .ntp-search-suggest__item:hover {
	background: color-mix(in srgb, var(--ntp-border-color, #334155) 55%, var(--ntp-surface-color, #1e293b));
}

.ntp-compare-search-suggest .ntp-search-suggest__item {
	cursor: pointer;
}

.ntp-compare-add-suggest .ntp-compare-add-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background 0.15s;
}

.ntp-compare-add-suggest .ntp-compare-add-item:hover {
	background: var(--ntp-surface-color, #f1f2f6);
}

[data-theme="dark"] .ntp-compare-add-suggest .ntp-compare-add-item:hover {
	background: color-mix(in srgb, var(--ntp-border-color, #334155) 55%, var(--ntp-surface-color, #1e293b));
}

/* Empty state: comparison slots (dashed boxes) */
.ntp-compare-slot--empty {
	transition: border-color 0.2s, background-color 0.2s;
}

.ntp-compare-slot--empty:hover {
	border-color: var(--ntp-text-muted, #64748b);
	background-color: color-mix(in srgb, var(--ntp-surface-color, #f1f2f6) 80%, var(--ntp-bg-color, #fff));
}

[data-theme="dark"] .ntp-compare-slot--empty:hover {
	border-color: color-mix(in srgb, var(--ntp-border-color, #334155) 70%, var(--ntp-text-muted, #94a3b8));
	background-color: color-mix(in srgb, var(--ntp-surface-color, #1e293b) 50%, var(--ntp-bg-color, #0f172a));
}