/**
 * Listing Comparison — Block Styles.
 *
 * The full comparison-table CSS now lives here (relocated from pro-admin.css
 * 2026-06-23 so the admin stylesheet is never loaded on the frontend). The
 * block auto-enqueues this file via block.json "style"; the [listora_compare]
 * shortcode enqueues the same handle through Comparison::enqueue_comparison_styles().
 * Site-wide compare bar / toggle / verified-badge styles live in pro-frontend.css.
 *
 * @package WBListoraPro
 */

/* ── Wrapper ───────────────────────────────────────────────────── */

.listora-compare-block {
	max-width: 1200px;
	margin-inline: auto;
}

/* ── Empty-state card ──────────────────────────────────────────── */

.listora-compare-empty-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--listora-space-4, 1rem);
	padding: var(--listora-space-12, 2.5rem) var(--listora-space-6, 1.5rem);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: var(--listora-card-border, 1px solid var(--listora-border-default));
	border-radius: var(--listora-radius-xl, 1rem);
	box-shadow: var(--listora-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.listora-compare-empty-card__icon {
	width: 56px;
	height: 56px;
	color: var(--listora-primary, var(--listora-info));
	opacity: 0.85;
}

.listora-compare-empty-card__title {
	margin: 0;
	font-size: var(--listora-text-xl, 1.25rem);
	font-weight: var(--listora-weight-bold, 700);
	color: var(--listora-fg-default);
}

.listora-compare-empty-card__msg {
	max-width: 38rem;
	margin: 0;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	font-size: var(--listora-text-base, 1rem);
	line-height: 1.55;
}

.listora-compare-empty-card__cta {
	margin-block-start: var(--listora-space-2, 0.75rem);
}

/* ── Page actions bar ─────────────────────────────────────────── */

.listora-compare-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--listora-space-2, 0.75rem);
	margin-block-end: var(--listora-space-4, 1rem);
}

.listora-compare-action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1rem;
	border-radius: var(--listora-radius-md, 0.5rem);
	font-size: var(--listora-text-sm, 0.875rem);
	font-weight: var(--listora-weight-semibold, 600);
	cursor: pointer;
	border: var(--listora-card-border, 1px solid var(--listora-border-default));
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	color: var(--listora-fg-default);
	text-decoration: none;
	transition: background var(--listora-transition-fast, 0.15s),
		color var(--listora-transition-fast, 0.15s);
}

.listora-compare-action:hover,
.listora-compare-action:focus-visible {
	background: var(--listora-bg-subtle, var(--listora-admin-bg-paper));
}

.listora-compare-action--browse {
	background: var(--listora-primary, var(--listora-info));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border-color: transparent;
}

.listora-compare-action--browse:hover,
.listora-compare-action--browse:focus-visible {
	filter: brightness(0.9);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	background: var(--listora-primary, var(--listora-info));
}

/* ── Per-column remove button ─────────────────────────────────── */

.listora-comparison-table__listing-col {
	position: relative;
	min-width: 180px;
	/*
	 * Left-aligned (logical `start`, so RTL mirrors) to match the value cells
	 * below it. The header was centred while the values were not, and the
	 * thumbnail's `margin: 0 auto` centred the image even where the text
	 * alignment was overridden — so a column read as a centred image sitting
	 * above a left-aligned title, rating and every value under it. One ragged
	 * edge per column is exactly what a comparison table cannot afford, since
	 * scanning ACROSS columns is the entire point (BC 10208510133).
	 */
	text-align: start;
	vertical-align: top;
	/* Room for the absolutely-positioned remove button. */
	padding-inline-end: 2.5rem;
}

.listora-compare-remove {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 6px;
	/* Mobile UX audit 2026-05-25: 26px raised to 40px tap-target floor. */
	min-width: var(--listora-tap-target, 40px);
	min-height: var(--listora-tap-target, 40px);
	width: var(--listora-tap-target, 40px);
	height: var(--listora-tap-target, 40px);
	border-radius: 50%;
	border: 1px solid var(--listora-border, var(--listora-border-default));
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	font-size: 18px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background var(--listora-transition-fast, 0.15s),
		color var(--listora-transition-fast, 0.15s);
}

.listora-compare-remove:hover,
.listora-compare-remove:focus-visible {
	background: var(--listora-danger, var(--listora-danger));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border-color: transparent;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.listora-compare-empty-card {
		padding: var(--listora-space-8, 2rem) var(--listora-space-4, 1rem);
	}
}

@media (max-width: 640px) {
	.listora-comparison-table {
		font-size: 0.85rem;
	}
	.listora-comparison-table__thumb {
		max-width: 80px;
	}
	.listora-compare-empty-card__icon {
		width: 44px;
		height: 44px;
	}
	.listora-compare-actions {
		justify-content: center;
	}
	.listora-compare-action {
		flex: 1 1 auto;
		text-align: center;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.listora-comparison-table th,
	.listora-comparison-table td {
		padding: 0.5rem 0.4rem;
	}
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.listora-compare-action,
	.listora-compare-remove {
		transition: none;
	}
}

/* Per-type comparison group heading (shown when comparing across types).
   Listings of different types compare in their own table — the heading labels
   each group. Theme-independent (own typography, not theme heading skins). */
.listora-compare-type-heading {
	margin: var(--listora-space-6, 1.5rem) 0 var(--listora-space-3, 0.75rem);
	font-size: var(--listora-text-size-lg, 1.125rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-fg-default, #1a1a1a);
	padding-bottom: var(--listora-space-2, 0.5rem);
	border-bottom: 2px solid var(--listora-primary, #ef5455);
}
.listora-compare-type-heading:first-of-type {
	margin-top: 0;
}

/* THEME-INDEPENDENCE — compare page action buttons (theme-skin guard). */
.listora-compare-action.listora-compare-action {
	background: transparent;
	color: var(--listora-fg-default, #1a1a1a);
	border: 1px solid var(--listora-border-subtle, rgba(0, 0, 0, 0.12));
	border-radius: 9999px;
	box-shadow: none;
}
.listora-compare-action.listora-compare-action:hover {
	border-color: var(--listora-primary);
	color: var(--listora-primary);
}
.listora-compare-remove.listora-compare-remove {
	background: var(--listora-bg-muted, rgba(0, 0, 0, 0.06));
	color: var(--listora-fg-default, #1a1a1a);
	border: none;
	border-radius: 9999px;
	box-shadow: none;
}
.listora-compare-remove.listora-compare-remove:hover {
	background: var(--listora-danger, #dc2626);
	color: #fff;
}

/* === Comparison TABLE (block + [listora_compare] shortcode) — relocated from pro-admin.css 2026-06-23 === */
/* ─── Comparison Table ─── */
.listora-compare-page {
	margin: 1.5rem 0;
}

.listora-compare-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.listora-comparison-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.listora-comparison-table thead tr {
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
}

.listora-comparison-table th,
.listora-comparison-table td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--listora-border, var(--listora-border-default));
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}

.listora-comparison-table__label-col {
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	font-weight: 600;
	/* Labels must WRAP, not nowrap — with table-layout:fixed a long label
	   ("Insurance Accepted", "Years of Experience") painted past the 150px
	   column straight over the adjacent value cell (BC #9962541597). */
	white-space: normal;
	overflow-wrap: break-word;
	width: 150px;
	min-width: 120px;
}


.listora-comparison-table__thumb {
	display: block;
	width: 100%;
	max-width: 160px;
	height: 110px;
	object-fit: cover;
	border-radius: 6px;
	/* Logical, and NOT auto — `margin: 0 auto` centred the image regardless of
	   the column's text alignment, which is what broke the shared left edge. */
	margin-inline: 0;
	margin-block: 0 0.5rem;
}

.listora-comparison-table__title-link {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--listora-primary, var(--listora-wp-admin-link));
	text-decoration: none;
	margin-bottom: 0.4rem;
}

.listora-comparison-table__title-link:hover {
	text-decoration: underline;
}

.listora-comparison-table__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.85rem;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-comparison-table__rating .listora-rating__star {
	width: 14px;
	height: 14px;
	color: var(--listora-rating, var(--listora-rating));
}

.listora-comparison-table__rating-count {
	color: var(--listora-fg-faint, var(--listora-fg-faint));
}

.listora-comparison-table__field-row:nth-child(even) td,
.listora-comparison-table__field-row:nth-child(even) th {
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
}

.listora-comparison-table__value {
	font-size: 0.9rem;
	color: var(--listora-fg-default);
}

.listora-comparison-table__na {
	color: var(--listora-fg-faint, var(--listora-fg-faint));
}

/* Features list inside table cell */
.listora-comparison-table__feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.listora-comparison-table__feature-list li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.875rem;
}

.listora-comparison-table__check {
	width: 16px;
	height: 16px;
	color: var(--listora-success, var(--listora-success));
	flex-shrink: 0;
}

/* View Listing button */
.listora-comparison-table__cta-row td {
	text-align: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* The "View Listing" CTA is styled by the shared design-system button
   primitive (listora-btn listora-btn--primary) on the markup — see
   blocks/comparison/render.php + src/blocks/comparison/view.js. The former
   bespoke rule here set color:var(--listora-fg-inverse) which resolved to a
   dark value on the frontend, rendering the button text near-invisible on the
   blue background (QA card 9989808239). Removed to keep a single source of
   button styling. */

/* Empty state */
.listora-compare-empty {
	padding: 1.5rem;
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	border-radius: 8px;
	text-align: center;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}