/**
 * search-compare.css
 *
 * Favorite (heart) + compare (checkbox) chrome for the /new-search (classic) and
 * /searchwp results pages. The heart/checkbox buttons themselves reuse the
 * site-wide .product-card-action-btn styles from style.css; this file adds:
 *   1. the compare checkmark visibility (only when a card is selected),
 *   2. the inline "Compare" pill that sits immediately left of each family's
 *      "X models match" badge — inactive (gray outline) with nothing selected,
 *      active (orange fill) once one or more cards are checked, and
 *   3. the comparison popup. To keep a consistent look-and-feel with the rest of
 *      the site, this is the SAME markup + CSS as the React product-filter tool's
 *      `comparison-tool-content` (configurator.css). The .comparison-tool-* rules
 *      below are copied verbatim from that source; the only addition is a scoped
 *      token block (the configurator's wordpress.css design tokens) so the rules
 *      resolve identically on the search page, where that bundle isn't loaded.
 *
 * Scoped via the .usai-cmp-* / .usai-search-card-actions / .comparison-tool-*
 * namespaces so nothing else on the site is affected.
 */

/* The relevance pill (top-left) is non-interactive except its own button; the
   action buttons own the top-right. Keep them clickable above .product-card-link. */
.product-card-section .usai-search-card-actions { pointer-events: none; }
.product-card-section .usai-search-card-actions .product-card-action-btn { pointer-events: auto; }

/* Compare checkbox: the checkmark only shows when the card is selected. */
.product-card-action-btn.compare-btn .usai-compare-check {
	opacity: 0;
	transition: opacity 0.15s ease;
}
.product-card-action-btn.compare-btn.active .usai-compare-check {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Inline "Compare" pill (lives in each family header, left of the badge)
 * ------------------------------------------------------------------------- */
/* Wrapper that holds the Compare pill + the "X models match" badge together on
   the right of the family header (.usai-family-hdr is justify-content:
   space-between, so this group hugs the right edge with the pill left of the
   badge). Injected by js/search-compare.js. */
.usai-cmp-hdr-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
/* The badge keeps its own type styles; only drop its top margin so it sits
   vertically centered against the taller pill inside the flex group. */
.usai-cmp-hdr-actions .usai-family-badge {
	margin-top: 0;
}

/* Inactive: nothing selected → gray outline pill (compare-inactive comp). */
.usai-cmp-inline-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	padding: 8px 20px;
	border-radius: 999px;
	border: 1px solid #cfcfcf;
	background: #fff;
	color: #8a8a8a;
	cursor: default;
	transition: background-color 0.15s ease, color 0.15s ease,
		border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Active: one or more cards checked → orange fill pill (compare-active comp). */
.usai-cmp-inline-btn.is-active {
	background: var(--primary-color, #f47e2c);
	border-color: var(--primary-color, #f47e2c);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(244, 126, 44, 0.35);
}
.usai-cmp-inline-btn.is-active:hover {
	filter: brightness(1.05);
}

/* Soft-cap feedback (a brief shake) when a 5th card is checked. */
.usai-cmp-inline-btn.is-cap {
	animation: usai-cmp-shake 0.4s ease;
}
@keyframes usai-cmp-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

/* ===========================================================================
 * Comparison popup — copied from the React product-filter tool so the search
 * results comparison matches it 1:1 (HTML in js/search-compare.js,
 * CSS below from configurator.css `.comparison-tool-*`).
 *
 * The configurator loads its design tokens from wordpress.css; that bundle is
 * NOT enqueued on the search pages, so we re-declare exactly those token values
 * (scoped to the overlay) and keep everything else byte-for-byte identical. The
 * fade/slide keyframes are renamed (usaiCmp*) to avoid clobbering any site-wide
 * `fadeIn` / `slideUp`.
 * ========================================================================= */
.comparison-tool-overlay {
	/* configurator wordpress.css :root tokens used by the rules below. */
	--black: #000;
	--white: #fff;
	--primary-color: #f47e2c;
	--text-color: #231f20;
	--text-color-primary: #231f20;
	--text-color-gray-lighter: #999;
	--gray: #949494;
	--gray-light: #e0e0e0;
	--gray-lighter: #e6e6e6;
	--background-color: #e6e7e8;
	--border-color-light: #ccc;
	--border-radius-full: 100px;
	--font-size-2xs: 14px;
	--base-spacing: 8px;
	--spacing-md: calc(var(--base-spacing) * 1.875);
	--spacing-lg: calc(var(--base-spacing) * 2.25);
	--spacing-xl: calc(var(--base-spacing) * 2.5);
	--spacing-3xl: calc(var(--base-spacing) * 3.75);
	--spacing-4xl: calc(var(--base-spacing) * 6.25);
	--comparison-tool-select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath stroke='%23f47e2c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

@keyframes usaiCmpFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes usaiCmpSlideUp {
	from { transform: translateY(20px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.comparison-tool-overlay {
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--black) 60%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999 !important;
	padding: var(--spacing-xl);
	animation: usaiCmpFadeIn 0.3s ease;
	backdrop-filter: blur(12px);
}

.comparison-tool-content {
	--comparison-rule-inset: 12px;
	--comparison-rule-color: var(--gray-lighter);
	background: var(--white);
	border-radius: 24px;
	max-width: 1200px;
	width: 100%;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1000000 !important;
	box-shadow:
		0 20px 60px color-mix(in srgb, var(--black) 25%, transparent),
		0 0 1px color-mix(in srgb, var(--black) 10%, transparent);
	animation: usaiCmpSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	overflow: hidden;
	font-family: inherit;
}

.comparison-tool-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 5;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--gray-lighter);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background 0.2s ease,
		transform 0.2s ease;
}

.comparison-tool-close:hover {
	background: var(--gray-light);
	transform: scale(1.05);
}

.comparison-tool-close svg {
	width: 22px;
	height: 22px;
	color: var(--text-color);
}

.comparison-tool-header-block {
	padding: 28px 56px 20px 28px;
	flex-shrink: 0;
}

.comparison-tool-product-row {
	display: grid;
	grid-template-columns: repeat(
		var(--comparison-col-count, 1),
		minmax(280px, 1fr)
	);
	width: fit-content;
	min-width: 100%;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 4px 0 16px;
	column-gap: 0;
}

.comparison-tool-product-slot {
	min-width: 0;
	box-sizing: border-box;
	padding: 0 20px;
}

.comparison-tool-title {
	margin: 0 0 18px 0;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.comparison-tool-title-brand {
	color: var(--primary-color);
}

.comparison-tool-title-rest {
	color: var(--text-color);
}

.comparison-tool-compare-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.comparison-tool-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-color);
}

.comparison-tool-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid var(--border-color-light);
	border-radius: var(--border-radius-full);
	padding: var(--spacing-lg) var(--spacing-4xl) var(--spacing-lg)
		var(--spacing-3xl);
	font-size: var(--font-size-2xs);
	font-weight: 500;
	color: var(--text-color);
	background-color: var(--white);
	background-image: var(--comparison-tool-select-caret);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
	min-width: 200px;
	max-width: 100%;
	font-family: inherit;
}

.comparison-tool-select:focus:not(.comparison-tool-select--compare-by) {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* “Compare by”: underline + caret only (not a rounded box) — matches design spec. */
.comparison-tool-select.comparison-tool-select--compare-by {
	border: none;
	border-radius: 0;
	border-bottom: 1px solid var(--black);
	background-color: transparent;
	padding: 4px 32px 8px 0;
	min-width: 10rem;
	max-width: min(100%, 22rem);
	box-shadow: none;
}

.comparison-tool-select.comparison-tool-select--compare-by:focus {
	outline: none;
	border-bottom-color: var(--primary-color);
	box-shadow: 0 1px 0 0 var(--primary-color);
}

.comparison-tool-product-select {
	width: 100%;
	margin-bottom: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}

.comparison-tool-body {
	flex: 1;
	overflow-x: auto;
	overflow-y: auto;
	min-height: 0;
	padding: 0 24px 16px;
	box-sizing: border-box;
}

.comparison-tool-grid {
	display: grid;
	grid-template-columns: repeat(
		var(--comparison-col-count, 1),
		minmax(280px, 1fr)
	);
	column-gap: 0;
	row-gap: 0;
	width: fit-content;
	min-width: 100%;
	box-sizing: border-box;
}

.comparison-tool-cell {
	min-width: 0;
	box-sizing: border-box;
	align-self: stretch;
	position: relative;
	border-bottom: none;
}

/* Vertical rules only in the scrollable grid (column dividers in the “table”), not in the product dropdown row. */
.comparison-tool-grid .comparison-tool-cell--between-cols {
	border-right: none;
	box-shadow: 1px 0 0 0 var(--comparison-rule-color);
}

/*
	Inset horizontal rules: centered in padding box so left/right gap matches
	(avoids subpixel skew from left + width positioning).
*/
.comparison-tool-cell--image,
.comparison-tool-cell--section {
	background-image: linear-gradient(
		var(--comparison-rule-color),
		var(--comparison-rule-color)
	);
	background-size: calc(100% - 2 * var(--comparison-rule-inset)) 1px;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-origin: padding-box;
	background-clip: padding-box;
}

/* Remove horizontal line from last row (all columns in the last row) */
.comparison-tool-cell--last-row {
	background-image: none;
}

.comparison-tool-cell--image {
	padding-block: 12px 19px;
	padding-inline: 20px;
}

.comparison-tool-cell--section {
	padding-block: 18px 21px;
	padding-inline: 20px;
}

.comparison-tool-image-inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-radius: 8px;
}

.comparison-tool-image {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 8px;
}

.comparison-tool-image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--background-color);
	color: var(--text-color-gray-lighter);
}

.comparison-tool-section-heading {
	margin: 0 0 12px 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-color);
}

.comparison-tool-section-heading--spacer {
	color: transparent;
	user-select: none;
	pointer-events: none;
}

.comparison-tool-description {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--text-color);
	opacity: 0.9;
}

.comparison-tool-plain-value {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--text-color);
}

.comparison-tool-empty {
	font-size: 0.9rem;
	color: var(--text-color-gray-lighter);
}

.comparison-tool-tier-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.comparison-tool-tier-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--white);
	background-color: var(--tier-bg-color);
}

.comparison-tool-tier-pill-name {
	white-space: nowrap;
}

.comparison-tool-tier-dollars {
	display: flex;
	gap: 6px;
	align-items: center;
}

.comparison-tool-tier-dollar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--white) 28%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
}

.comparison-tool-color-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.comparison-tool-color-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.comparison-tool-color-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-image: var(--color-image-url);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 2px solid var(--border-color-light);
	transition:
		transform 0.2s ease,
		border-color 0.2s ease;
	flex-shrink: 0;
}

.comparison-tool-color-row:hover .comparison-tool-color-circle {
	transform: scale(1.05);
	border-color: var(--primary-color);
}

.comparison-tool-color-name {
	font-size: 0.875rem;
	color: var(--text-color-primary);
	line-height: 1.3;
	flex: 1;
}

.comparison-tool-value-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.comparison-tool-value-item {
	font-size: 0.9rem;
	color: var(--text-color-primary);
	line-height: 1.4;
}

.comparison-tool-footer {
	padding: 16px 28px 24px;
	flex-shrink: 0;
	border-top: 1px solid color-mix(in srgb, var(--black) 6%, transparent);
}

.comparison-tool-show-all {
	border: none;
	border-radius: 999px;
	padding: 12px 28px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--white);
	background: var(--primary-color);
	cursor: pointer;
	font-family: inherit;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

.comparison-tool-show-all:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

@media (max-width: 768px) {
	.comparison-tool-overlay {
		padding: var(--spacing-md);
	}

	.comparison-tool-header-block {
		padding: 24px 48px 16px 16px;
	}

	.comparison-tool-title {
		font-size: 1.35rem;
	}

	.comparison-tool-body {
		overflow-x: auto;
		padding: 0 16px 16px;
	}

	.comparison-tool-product-row {
		padding: 4px 0 12px;
	}

	.comparison-tool-product-slot {
		padding-inline: 16px;
	}

	.comparison-tool-grid {
		min-width: 100%;
	}

	.comparison-tool-close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}
}