/* ============================================================
   <pb-sort-menu> — the "Sortieren" dropdown
   ------------------------------------------------------------
   Gleiche Sprache wie die Beruf-/Ort-Filter-Popover (13.08.,
   Wunsch Mathias): dasselbe Panel (surface, r-xl, shadow-lg,
   gleicher Eintritt) und dieselben Zeilen wie `.alt .lp-row`
   (konzentrischer Radius, fill-hover, aktiv = fett +
   Häkchen — keine Füllung). Eigene Keyframes-Kopie, damit das
   Menü nicht am Stylesheet des Location-Pickers hängt.
   ============================================================ */

.sortpop {
  position: fixed;
  z-index: var(--z-popover);
  min-width: 13rem;
  max-width: calc(100vw - 1rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: none;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;                       /* wie .lp-list */
  text-align: left;
  animation: sortpop-in 0.16s var(--ease);
}
@keyframes sortpop-in {
  from { opacity: 0; transform: translateY(-0.25rem) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* Öffnet das Menü nach OBEN, wächst es aus der Unterkante. */
.sortpop.up { transform-origin: bottom left; }

/* ---- Option rows — wie .alt .lp-row ------------------------ */
.sort-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-xl) - 0.5rem);   /* konzentrisch zum Panel */
  padding: 0.5625rem 0.8125rem;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.sort-opt:hover { background: var(--fill-hover); }
.sort-opt.on .sort-opt-t { font-weight: 600; }
.sort-opt-t { flex: 1; }

/* The check reserves its slot on every row (kept invisible) so the
   labels stay aligned; it appears only on the active row. */
.sort-opt-ck {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text);
  opacity: 0;
}
.sort-opt.on .sort-opt-ck { opacity: 1; }
.sort-opt-ck svg { width: 14px; height: 14px; }
/* Gesperrte Zeilen (Tagessatz ohne Berechtigung): ausgegraut + Schloss.
   Seit 03.10.2026 klickbar (Tooltip, Klick öffnet den Tarif) — Zeiger
   statt Pfeil, kein Hover-Fill: die Zeile bleibt sichtbar gesperrt. */
.sort-opt.locked { color: var(--text-faint); cursor: pointer; }
.sort-opt.locked:hover { background: transparent; color: var(--text-faint); }
.sort-opt-lock {
  flex: none;
  display: grid;
  place-items: center;
  /* Schloss-Sprache: warn wie die Tagessatz-Pille (30.08., Mathias) */
  color: var(--warn);
}
.sort-opt-lock svg { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .sortpop { animation: none; }
}