/**
 * The guided product recommender.
 *
 * Loaded only on the recommender page (see inc/enqueue.php) — it is a single-page feature and has
 * no business on the critical path of every other template.
 *
 * The choice rows and the step navigation are shared with the booking panel, so they live in
 * components.css. Only what is specific to this screen is here.
 */

.fb-recommender {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* -------------------------------------------------------------- questions ---- */

.fb-recommender__panel {
	max-width: 820px;
	width: 100%;
	padding: var(--space-8);
}

.fb-recommender__question {
	margin: 0;
	font-size: var(--text-h3);
}

.fb-recommender__help {
	margin: var(--space-2) 0 0;
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}

/* ---------------------------------------------------------------- results ---- */

.fb-recommender__results {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.fb-recommender__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fb-recommender__grid { margin-block: var(--space-3); }

.fb-recommender__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.fb-recommender__bulk { margin: 0; }

.fb-recommender__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0;
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}

.fb-recommender__foot a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

/* ----------------------------------------------------------------- mobile ---- */

@media (max-width: 640px) {
	.fb-recommender { gap: var(--space-6); }

	.fb-recommender__panel { padding: var(--space-5); }

	/* One CTA per row: three side by side at 375px leaves none of them a readable label. */
	.fb-recommender__actions { flex-direction: column; align-items: stretch; }

	.fb-recommender__actions > *,
	.fb-recommender__bulk .fb-btn {
		width: 100%;
		justify-content: center;
	}
}