/* Extra styles for the player price list only: the sort row, the filters and a
   little more detail in a result row. Everything else comes from site.css. */

/* ---------- the sort row and the filters above the list ---------- */
.tools { margin: 0 0 16px; }

.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* the sort buttons are the same chips as the rating row, just without the margin */
.sortbar .chips { margin: 0; min-width: 0; }

.fld-cap {
  color: var(--dim); font: 600 10.5px/1 system-ui;
  text-transform: uppercase; letter-spacing: .5px;
}

.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px;
  margin-top: 12px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
/* min-width 0 so a long option name can never push the row past the screen */
.fld { display: flex; flex-direction: column; gap: 6px; flex: 1 1 165px; min-width: 0; }
.fld-end { flex: 1 1 165px; flex-direction: row; align-items: center; gap: 10px; }
.fld-end .btn { margin-left: auto; }

/* a shorter input and select than the search bar uses. The width beats the
   min-width of .input, so two of them still fit next to each other on a phone. */
.select.sm, .input.sm {
  height: 38px; padding: 0 10px; border-radius: 9px; font-size: 14px;
  width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto;
}

.frange { display: flex; gap: 8px; min-width: 0; }
.frange .input { flex: 1 1 0; }

.fcount { color: var(--muted); font-size: 13px; }
.fcount b { color: var(--text); font-weight: 600; }

/* ---------- a bit more on a result row ---------- */
/* the other positions the card can play, the way futbin lists them */
.prow .alts {
  flex: 0 1 auto; min-width: 0; max-width: 74px; color: var(--dim);
  font: 600 11px/1 system-ui; letter-spacing: .4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the label and the positions give way first, so a narrow row never scrolls sideways */
.prow .tag { flex: 0 1 auto; min-width: 0; }
/* icons and heroes get the same gold label a special card gets */
.prow .tag.icon { background: rgba(240, 193, 75, .16); border-color: rgba(240, 193, 75, .45); }

@media (max-width: 620px) {
  /* on a phone only the name, the rating and the price have to fit */
  .prow { gap: 9px; }
  .prow .alts { display: none; }
  .prow .tag { max-width: 84px; }
  .prow .cost { min-width: 74px; }
  .filters { padding: 12px; }
  .fld, .fld-end { flex: 1 1 100%; }
}