/*
 * Design System - AELITA
 * components/catalog-check.css - "AELITA CHECK / Trade-In" banner on the
 * used-cars catalog (s-probegom term).
 *
 * Reinterpreted from the Stitch "Авто з пробігом" design into the AELITA
 * design system: sharp radius, one brand red + graphite neutrals, MyriadSetPro
 * type, Font Awesome icons, no decorative shadows. Two cards: a light
 * "AELITA CHECK" card and a dark "Trade-In / викуп" card.
 *
 * Scoped under .a-car-filter so no other page or catalog is affected.
 * Consumes tokens.css only.
 *
 * Loaded on cars_category archives only (see inc/enqueue.php).
 */

/* -------------------------------------------------------------------- */
/* Grid                                                                 */
/* -------------------------------------------------------------------- */
.a-car-filter .a-catalog-check {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	/* Keep a clear, systematic gap to the filter panel below. */
	margin: 0 0 var(--space-4);
}

@media (min-width: 768px) {
	.a-car-filter .a-catalog-check {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------- */
/* Card                                                                 */
/* -------------------------------------------------------------------- */
.a-car-filter .a-check-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-color: var(--bg);
	transition: border-color var(--dur-press) var(--ease-out);
}

.a-car-filter .a-check-card--trade {
	border-color: var(--c-ink-800);
	background-color: var(--c-ink-800);
	color: var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
	.a-car-filter .a-check-card--check:hover {
		border-color: var(--text-secondary);
	}
}

/* Top row: badge + icon. */
.a-car-filter .a-check-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
}

.a-car-filter .a-check-card__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background-color: var(--bg-muted);
	color: var(--c-red-600);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	line-height: var(--lh-heading);
	text-transform: uppercase;
}

.a-car-filter .a-check-card--trade .a-check-card__badge {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--c-red-500);
}

.a-car-filter .a-check-card__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--c-red-600);
	color: var(--c-white);
	font-size: 20px;
	line-height: 1;
}

/* Title + text. */
.a-car-filter .a-check-card__title {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	/* The legacy theme uppercases all headings; long card titles read better
	   in sentence case, matching the source design. */
	text-transform: none;
	transition: color var(--dur-press) var(--ease-out);
}

.a-car-filter .a-check-card--trade .a-check-card__title {
	color: var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
	.a-car-filter .a-check-card--check:hover .a-check-card__title {
		color: var(--c-red-600);
	}
}

.a-car-filter .a-check-card__text {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.a-car-filter .a-check-card--trade .a-check-card__text {
	color: var(--c-ink-100);
}

/* Feature pills (AELITA CHECK card). */
.a-car-filter .a-check-card__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-car-filter .a-check-card__pills li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	background-color: var(--bg-muted);
	color: var(--text-primary);
	font-size: var(--fs-small);
	line-height: var(--lh-heading);
}

.a-car-filter .a-check-card__pills i {
	color: var(--c-red-600);
}

/* Stats (Trade-In card). */
.a-car-filter .a-check-card__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2);
	text-align: center;
}

.a-car-filter .a-check-card__stats > div {
	padding: var(--space-2);
	background-color: rgba(255, 255, 255, 0.06);
}

.a-car-filter .a-check-card__stats strong {
	display: block;
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
}

.a-car-filter .a-check-card__stats span {
	display: block;
	color: var(--c-ink-100);
	font-size: var(--fs-small);
	line-height: var(--lh-heading);
}

/* Footer: action + meta. */
.a-car-filter .a-check-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: var(--border-w) solid var(--border);
}

.a-car-filter .a-check-card--trade .a-check-card__footer {
	border-top-color: rgba(255, 255, 255, 0.15);
}

.a-car-filter .a-check-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-primary);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: var(--lh-heading);
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--dur-press) var(--ease-out);
}

.a-car-filter .a-check-card__link i {
	transition: transform var(--dur-press) var(--ease-out);
}

.a-car-filter .a-check-card__link:hover,
.a-car-filter .a-check-card__link:focus-visible {
	color: var(--link-hover);
}

.a-car-filter .a-check-card__link:hover i {
	transform: translateX(3px);
}

.a-car-filter .a-check-card__link:focus-visible,
.a-car-filter .a-check-card__cta:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

.a-car-filter .a-check-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-5);
	border: var(--border-w) solid var(--c-red-600);
	border-radius: var(--radius);
	background-color: var(--c-red-600);
	color: var(--c-white);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: var(--lh-heading);
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color var(--dur-press) var(--ease-out),
		border-color var(--dur-press) var(--ease-out),
		transform var(--dur-press) var(--ease-out);
}

.a-car-filter .a-check-card__cta:hover,
.a-car-filter .a-check-card__cta:focus-visible {
	border-color: var(--c-red-700);
	background-color: var(--c-red-700);
	color: var(--c-white);
	text-decoration: none;
}

.a-car-filter .a-check-card__cta:active {
	transform: scale(0.98);
}

.a-car-filter .a-check-card__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--text-secondary);
	font-size: var(--fs-small);
	line-height: var(--lh-heading);
}

.a-car-filter .a-check-card--trade .a-check-card__meta {
	color: var(--c-ink-100);
}

.a-car-filter .a-check-card--trade .a-check-card__meta i {
	color: var(--status-success);
}

@media (prefers-reduced-motion: reduce) {
	.a-car-filter .a-check-card,
	.a-car-filter .a-check-card__title,
	.a-car-filter .a-check-card__link,
	.a-car-filter .a-check-card__link i,
	.a-car-filter .a-check-card__cta {
		transition-duration: 0.01ms;
	}
}