/* ==========================================================================
   HouseList Compare Module — Design polish
   Matches global design language: Plus Jakarta Sans, gray palette, rounded-xl.
   ========================================================================== */

/* Hide the theme's page title ("Compare") — scoped to the compare page only.
   This stylesheet loads on every page (for the compare button on cards), so the
   rule is gated on the presence of the compare wrapper via :has(). */
body:has(#houselist-compare-page) .entry-header .entry-title,
body:has(#houselist-compare-page) h1.entry-title,
body:has(#houselist-compare-page) .page-title { display: none !important; }

/* --------------------------------------------------------------------------
   Compare button on cards
   -------------------------------------------------------------------------- */
.houselist-compare-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: 1.5px solid var(--hl-gray-200);
	border-radius: var(--hl-radius, 10px);
	padding: 6px 12px;
	cursor: pointer;
	color: var(--hl-gray-500, #6b7280);
	font-size: 0.82rem;
	font-weight: 600;
	font-family: var(--hl-font, 'Plus Jakarta Sans', sans-serif);
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.houselist-compare-btn:hover,
.houselist-compare-btn.houselist-compare-active {
	border-color: var(--hl-primary, #0f766e);
	color: var(--hl-primary, #0f766e);
	background: var(--hl-primary-soft, rgba(15,118,110,0.08));
}
.houselist-compare-btn:focus-visible {
	outline: 2px solid var(--hl-primary, #0f766e);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Floating compare bar
   -------------------------------------------------------------------------- */
#houselist-compare-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: var(--hl-gray-800, #1f2937);
	color: #f9fafb;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 14px 24px;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	box-shadow: 0 -4px 24px rgba(0,0,0,.25);
	font-family: var(--hl-font, 'Plus Jakarta Sans', sans-serif);
}
#houselist-compare-bar.houselist-compare-bar-visible {
	transform: translateY(0);
}

.houselist-compare-bar-count {
	font-weight: 600;
	font-size: 0.875rem;
	color: #d1d5db;
}

.houselist-compare-bar-btn {
	background: var(--hl-primary, #0f766e);
	color: #fff !important;
	border: none;
	border-radius: 999px;
	padding: 9px 22px;
	font-size: 0.875rem;
	font-weight: 700;
	font-family: var(--hl-font, 'Plus Jakarta Sans', sans-serif);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	display: inline-flex;
	align-items: center;
}
.houselist-compare-bar-btn:hover {
	background: var(--hl-primary-dark, #115e59);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px var(--hl-primary-soft, rgba(15,118,110,.25));
}

.houselist-compare-bar-clear {
	background: transparent;
	border: 1.5px solid #4b5563;
	color: #9ca3af;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 0.82rem;
	font-weight: 600;
	font-family: var(--hl-font, 'Plus Jakarta Sans', sans-serif);
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}
.houselist-compare-bar-clear:hover {
	border-color: #9ca3af;
	color: #f9fafb;
}

/* --------------------------------------------------------------------------
   Compare page
   -------------------------------------------------------------------------- */
.houselist-compare-page {
	max-width: 1100px;
	margin: 40px auto;
	padding: 0 20px 60px;
	font-family: var(--hl-font, 'Plus Jakarta Sans', sans-serif);
}

/* --------------------------------------------------------------------------
   Compare table — sticky first column, listing thumbs, diff rows
   -------------------------------------------------------------------------- */
.houselist-compare-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
	border: 1px solid #e5e7eb;
}

/* Sticky first column (label column) */
.houselist-compare-table td.houselist-compare-label,
.houselist-compare-table th.houselist-compare-label {
	position: sticky;
	left: 0;
	z-index: 2;
	background: #f9fafb;
}

.houselist-compare-table th,
.houselist-compare-table td {
	padding: 13px 16px;
	border-bottom: 1px solid #e5e7eb;
	border-right: 1px solid #f3f4f6;
	text-align: left;
	vertical-align: middle;
	font-size: 0.875rem;
	line-height: 1.5;
}
.houselist-compare-table tr:last-child th,
.houselist-compare-table tr:last-child td {
	border-bottom: none;
}
.houselist-compare-table th:last-child,
.houselist-compare-table td:last-child {
	border-right: none;
}

/* Header cells (listing name row) */
.houselist-compare-table th {
	font-weight: 700;
	background: #f9fafb;
	color: #111827;
	vertical-align: top;
}

/* Label column */
.houselist-compare-table td.houselist-compare-label {
	font-weight: 600;
	color: #6b7280;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	width: 130px;
	min-width: 110px;
}

/* Difference highlight rows */
.houselist-compare-table td.houselist-compare-diff {
	background: #fefce8;
	color: #713f12;
	font-weight: 600;
}

/* Listing thumbnail cells */
.houselist-compare-table img {
	width: 100%;
	max-height: 160px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	transition: transform 0.2s ease;
}
.houselist-compare-table img:hover {
	transform: scale(1.02);
}

/* Remove button — subtle, becomes red on hover */
.houselist-compare-remove {
	background: transparent;
	border: 1px solid #fca5a5;
	color: #ef4444;
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	margin-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	transition: background 0.18s ease, border-color 0.18s ease;
	font-family: var(--hl-font, 'Plus Jakarta Sans', sans-serif);
}
.houselist-compare-remove:hover {
	background: #fef2f2;
	border-color: #ef4444;
}

.houselist-compare-loading {
	text-align: center;
	color: #6b7280;
	padding: 48px 0;
	font-size: 0.9rem;
	font-weight: 500;
}

/* Stars in compare table */
.houselist-compare-stars {
	color: #f59e0b;
	font-size: 0.95rem;
	letter-spacing: 1px;
}

/* Overflow scroll wrapper for table on narrow screens */
#houselist-compare-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Empty state — premium
   -------------------------------------------------------------------------- */
.houselist-compare-empty {
	max-width: 520px;
	margin: 40px auto;
	padding: 48px 36px;
	text-align: center;
	background: var(--hl-white, #fff);
	border: 1px solid var(--hl-gray-200, #e5e7eb);
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}
.houselist-compare-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: 22px;
	border-radius: 50%;
	color: var(--hl-primary, #0f766e);
	background: var(--hl-primary-soft, rgba(15, 118, 110, 0.10));
}
.houselist-compare-empty__title {
	margin: 0 0 10px;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--hl-gray-900, #0f172a);
}
.houselist-compare-empty__text {
	margin: 0 auto 26px;
	max-width: 400px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--hl-gray-500, #6b7280);
}
.houselist-compare-empty__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	border-radius: 12px;
	background: var(--hl-primary, #0f766e);
	color: #fff !important;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.houselist-compare-empty__btn:hover {
	background: var(--hl-primary-dark, #115e59);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(15, 118, 110, 0.28);
	color: #fff;
}
.houselist-compare-empty__hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 24px 0 0;
	font-size: 0.82rem;
	color: var(--hl-gray-400, #9ca3af);
}
.houselist-compare-empty__hint svg {
	flex-shrink: 0;
}