<div class="cbgp-combo" role="group" aria-label="Sort options">
  <button
    type="button"
    class="cbgp-combo-trigger"
    aria-haspopup="listbox"
    aria-expanded="false"
    data-cbgp-combo
  >
    <span>Sort: Newest</span>
    <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" /></svg>
  </button>
  <ul class="cbgp-combo-list" role="listbox" hidden>
    <li role="option" aria-selected="true">Newest</li>
    <li role="option">Oldest</li>
    <li role="option">A → Z</li>
    <li role="option">Z → A</li>
    <li role="option">Most popular</li>
  </ul>
</div>

.cbgp-combo {
  position: relative;
  display: inline-block;
}
.cbgp-combo-trigger {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid #00ffe0;
  border-radius: 10px;
  color: #c8fffa;
  font: 600 12px/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 12px rgba(0,255,224,0.15), inset 0 0 0 1px rgba(0,255,224,0.1);
  transition: box-shadow 0.25s, color 0.2s;
}
.cbgp-combo-trigger:hover {
  box-shadow: 0 0 22px rgba(0,255,224,0.35), inset 0 0 0 1px rgba(0,255,224,0.2);
  color: #fff;
}
.cbgp-combo-trigger:focus-visible { outline: 2px solid #ff5af1; outline-offset: 3px; }
.cbgp-combo-trigger svg { width: 11px; height: 11px; fill: none; stroke: #00ffe0; stroke-width: 2; transition: transform 0.3s cubic-bezier(.65,0,.35,1); }
.cbgp-combo-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.cbgp-combo-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 4px;
  list-style: none;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(0,255,224,0.4);
  border-radius: 10px;
  z-index: 10;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 24px rgba(0,255,224,0.1);
  animation: cbgp-combo-in 0.28s cubic-bezier(.65,0,.35,1);
}
@keyframes cbgp-combo-in {
  from { clip-path: inset(0 0 100% 0 round 10px); opacity: 0; }
  to   { clip-path: inset(0 0 0 0 round 10px);    opacity: 1; }
}
.cbgp-combo-list li {
  padding: 8px 14px;
  font: 600 12px/1 ui-monospace, monospace;
  color: rgba(200,255,250,0.7);
  cursor: pointer;
  border-radius: 6px;
  letter-spacing: 0.06em;
  transition: background 0.15s, color 0.15s;
}
.cbgp-combo-list li[aria-selected="true"] {
  color: #00ffe0;
  background: rgba(0,255,224,0.08);
}
.cbgp-combo-list li:hover { background: rgba(0,255,224,0.15); color: #fff; }

/* Plasma combobox dropdown — toggle aria-expanded; click outside or Escape to close. */
document.querySelectorAll('[data-cbgp-combo]').forEach(function (trigger) {
  var list  = trigger.parentElement.querySelector('.cbgp-combo-list');
  var label = trigger.querySelector('span');
  if (!list) return;
  function open()  { list.hidden = false; trigger.setAttribute('aria-expanded', 'true'); }
  function close() { list.hidden = true;  trigger.setAttribute('aria-expanded', 'false'); }
  trigger.addEventListener('click', function (e) {
    e.stopPropagation();
    list.hidden ? open() : close();
  });
  trigger.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') { close(); trigger.focus(); }
  });
  list.addEventListener('click', function (e) {
    var li = e.target.closest('li[role="option"]');
    if (!li) return;
    list.querySelectorAll('li').forEach(function (x) { x.removeAttribute('aria-selected'); });
    li.setAttribute('aria-selected', 'true');
    if (label) label.textContent = label.textContent.split(': ')[0] + ': ' + li.textContent;
    close();
  });
  document.addEventListener('click', close);
});