/**
 * Listing Comparison — Block Styles.
 *
 * The bulk of the comparison-table styles live in pro-admin.css
 * (so the shortcode also works). This file only adds block-specific
 * concerns: empty-state card, page actions bar, and remove buttons.
 *
 * @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-text, var(--listora-wp-admin-text));
}

.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-text, var(--listora-wp-admin-text));
	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;
}

.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;
}