/* =========================================
   SOUKPRO QUOTE COMPARISON
   Table view, cards view, bottom bar
   ========================================= */

/* --- Toggle --- */
.sp-compare-toggle {
	display: flex;
	gap: var(--sp-space-xs);
	margin-bottom: var(--sp-space-lg);
}

.sp-compare-toggle .sp-btn.is-active {
	background: var(--sp-color-primary);
	color: var(--sp-color-white);
	border-color: var(--sp-color-primary);
}

/* --- Table View --- */
.sp-compare-table {
	width: 100%;
	text-align: center;
}

.sp-compare-table th,
.sp-compare-table td {
	padding: var(--sp-space-md);
	vertical-align: middle;
}

.sp-compare-table th:first-child,
.sp-compare-table td:first-child {
	text-align: right;
	background: var(--sp-color-bg-alt);
	font-weight: var(--sp-font-weight-semibold);
	white-space: nowrap;
}

.sp-compare-table__supplier-name {
	font-family: var(--sp-font-heading);
	font-weight: var(--sp-font-weight-bold);
	font-size: var(--sp-text-base);
}

.sp-compare-table__price {
	font-size: var(--sp-text-lg);
	font-weight: var(--sp-font-weight-bold);
	color: var(--sp-color-primary);
}

/* --- Cards View --- */
.sp-compare-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sp-space-lg);
}

.sp-compare-card {
	background: var(--sp-color-white);
	border: 1px solid var(--sp-color-border-light);
	border-radius: var(--sp-radius-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--sp-transition-fast), border-color var(--sp-transition-fast);
}

.sp-compare-card:hover {
	box-shadow: var(--sp-shadow-md);
}

.sp-compare-card.is-selected {
	border-color: var(--sp-color-primary);
	box-shadow: 0 0 0 2px var(--sp-color-primary);
}

.sp-compare-card__header {
	padding: var(--sp-space-lg);
	border-bottom: 1px solid var(--sp-color-border-light);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sp-compare-card__supplier {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-text-lg);
	font-weight: var(--sp-font-weight-bold);
	margin: 0;
}

.sp-compare-card__body {
	padding: var(--sp-space-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-sm);
}

.sp-compare-card__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--sp-space-xs) 0;
}

.sp-compare-card__label {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-muted);
}

.sp-compare-card__value {
	font-weight: var(--sp-font-weight-semibold);
	color: var(--sp-color-text);
}

.sp-compare-card__value--price {
	font-size: var(--sp-text-lg);
	color: var(--sp-color-primary);
	font-weight: var(--sp-font-weight-bold);
}

.sp-compare-card__actions {
	padding: 0 var(--sp-space-lg) var(--sp-space-lg);
}

/* --- Bottom Bar --- */
.sp-compare-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--sp-color-white);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
	border-top: 1px solid var(--sp-color-border-light);
	padding: var(--sp-space-md) 0;
}

.sp-compare-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--sp-space-xl);
}

.sp-compare-bar__count {
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-font-weight-semibold);
	color: var(--sp-color-text);
}

.sp-compare-bar__actions {
	display: flex;
	gap: var(--sp-space-sm);
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.sp-compare-view--table {
		display: none !important;
	}

	.sp-compare-view--cards {
		display: block !important;
	}

	.sp-compare-toggle {
		display: none;
	}

	.sp-compare-bar__inner {
		flex-direction: column;
		gap: var(--sp-space-sm);
	}

	.sp-compare-bar__actions {
		width: 100%;
	}

	.sp-compare-bar__actions .sp-btn {
		flex: 1;
	}
}