/* recommendations — result bar (count + per-page + view toggle) and pagination.
 * Per-page matches the Figma "Small Dropdown": surface-2 fill, 4px radius. */

.rec-resultbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}
.rec-resultbar-count {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--text-secondary);
}
.rec-resultbar-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

/* Per-page — small dropdown. Native <select> styled to match the filter fields;
 * the chevron is a baked grey glyph (data URIs can't read currentColor). */
.rec-perpage {
  appearance: none;
  -webkit-appearance: none;
  height: 32px;
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-32);
  border: 0;
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-size: var(--font-size-14);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9aa2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-8) center;
}
.rec-perpage:hover { background-color: var(--background-hover); }

.rec-view-toggle {
  display: inline-flex;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
}
.rec-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--corner-radius-xs);
  color: var(--text-tertiary);
}
.rec-view-btn svg { width: var(--spacing-16); height: var(--spacing-16); }
.rec-view-btn:hover { color: var(--text-primary); }
.rec-view-btn.is-active {
  background-color: var(--background-surface-1);
  color: var(--text-primary);
}

/* ---- Pagination ---- */
.rec-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  margin-top: var(--spacing-16);
}
.rec-page-link {
  padding-block: var(--spacing-4);
  padding-inline: var(--spacing-12);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-size: var(--font-size-14);
}
.rec-page-link:hover { background-color: var(--background-hover); }
.rec-page-status {
  font-size: var(--font-size-14);
  color: var(--text-tertiary);
}