/* Custom category mega-dropdown for the /courses filter bar.
   Progressive enhancement over the native <select name="category"> — the select
   stays the source of truth and the no-JS fallback. Class prefix: cm-  */

.cm-panel {
  --cm-accent: var(--accent, #2563eb);   /* per-site brand: pickaclass blue, learnflat teal */
  position: fixed;
  z-index: 1200;
  width: min(720px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid rgba(20, 34, 58, .09);
  border-radius: 16px;
  box-shadow: 0 24px 64px -22px rgba(20, 34, 58, .30),
              0 8px 22px -14px rgba(20, 34, 58, .18);
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  overflow: hidden;
  font-family: var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  opacity: 0;
  transform: translateY(-6px) scale(.99);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.cm-panel.cm-open { opacity: 1; transform: none; pointer-events: auto; }

.cm-col { padding: 10px; display: flex; flex-direction: column; min-width: 0; }
.cm-col--left { border-right: 1px solid rgba(20, 34, 58, .07); }
.cm-col--right { background: #fcfcfd; }

.cm-scroll {
  overflow-y: auto;
  max-height: 56vh;
  display: flex;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: thin;
}
.cm-scroll::-webkit-scrollbar { width: 8px; }
.cm-scroll::-webkit-scrollbar-thumb { background: rgba(20,34,58,.14); border-radius: 8px; border: 2px solid #fff; }

.cm-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  color: #1b2942;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.cm-item:hover,
.cm-item.cm-active { background: color-mix(in srgb, var(--cm-accent) 8%, transparent); }
.cm-item.cm-active { color: var(--cm-accent); font-weight: 600; }

.cm-item__ic { flex: 0 0 auto; width: 22px; height: 22px; color: #64708a; display: grid; place-items: center; }
.cm-item.cm-active .cm-item__ic,
.cm-item:hover .cm-item__ic { color: var(--cm-accent); }
.cm-item__ic svg { width: 20px; height: 20px; display: block; }

.cm-item__label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-item__chev { flex: 0 0 auto; width: 16px; height: 16px; color: #b3bacb; }
.cm-item__chev svg { width: 16px; height: 16px; display: block; }
.cm-item__count {
  flex: 0 0 auto;
  font-size: 12px; color: #9aa3b5;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* "All categories" — accent square with white arrow (matches the reference) */
.cm-item--all .cm-item__ic {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--cm-accent); color: #fff;
}
.cm-item--all .cm-item__ic svg { width: 15px; height: 15px; }
.cm-item--all.cm-active { background: color-mix(in srgb, var(--cm-accent) 11%, transparent); }

.cm-badge {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--cm-accent);
  background: color-mix(in srgb, var(--cm-accent) 13%, transparent);
  padding: 2px 7px; border-radius: 999px;
}

.cm-rhead {
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #9aa3b5;
  padding: 9px 11px 7px;
}

.cm-foot { margin-top: 6px; padding-top: 7px; border-top: 1px solid rgba(20, 34, 58, .07); }
.cm-foot .cm-item { font-weight: 600; font-size: 13.5px; }
.cm-foot--view .cm-item {
  color: var(--cm-accent);
  background: color-mix(in srgb, var(--cm-accent) 7%, transparent);
}
.cm-foot--view .cm-item:hover { background: color-mix(in srgb, var(--cm-accent) 13%, transparent); }
.cm-foot--view .cm-item__ic,
.cm-foot--view .cm-item__chev { color: var(--cm-accent); }
.cm-foot--view .cm-item__chev { margin-left: auto; }

/* the trigger cell gets a subtle "active" cue while the panel is open */
.filterbar__cell.cm-trigger-open { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cm-accent) 38%, transparent); border-radius: 12px; }

/* single-column variant — used by the "Sort by" dropdown */
.cm-panel--single { grid-template-columns: 1fr; width: min(290px, calc(100vw - 24px)); }
.cm-panel--single .cm-col { padding: 8px; }
.cm-item__check { flex: 0 0 auto; width: 18px; height: 18px; margin-left: auto; color: var(--cm-accent); opacity: 0; }
.cm-item__check svg { width: 18px; height: 18px; display: block; }
.cm-item.cm-active .cm-item__check { opacity: 1; }

@media (max-width: 720px) {
  .cm-panel { grid-template-columns: 1fr; width: calc(100vw - 16px); }
  .cm-col--right { display: none; }
  .cm-col--left { border-right: 0; }
  .cm-scroll { max-height: 60vh; }
  .cm-dom .cm-item__chev { color: #b3bacb; }
}