/* ===========================================================================
   dropdown.css — shared custom-select skin. Loaded on every page, before the
   page's own <style>. dropdown.js wraps each native <select> in a .spf-dd and
   drives it; the real <select> stays in the DOM as the source of truth.
   Visual language matches the admin "Manage" menu (.rowmenu).
   Tokens fall back to the canonical palette if a page hasn't declared them.
   =========================================================================== */

.spf-dd{
  position:relative;display:inline-block;max-width:100%;vertical-align:middle;
  font-family:'Bricolage Grotesque',system-ui,sans-serif}

/* the native <select> stays for form + JS, visually removed but reachable */
.spf-dd__native{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.spf-dd__btn{
  display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;
  font:inherit;font-weight:600;font-size:13.5px;color:var(--ink,#ECE7F7);
  padding:10px 12px;border-radius:var(--r-sm,11px);
  background:rgba(255,255,255,.03);border:1px solid var(--glass-brd,rgba(37,99,235,.16));
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.spf-dd__btn:hover{border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.05)}
.spf-dd__btn:focus-visible{outline:none;border-color:var(--electric,#2563EB);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.spf-dd__btn:disabled{opacity:.5;cursor:not-allowed}
.spf-dd.open .spf-dd__btn{border-color:var(--electric,#2563EB);box-shadow:0 0 0 3px rgba(37,99,235,.14)}

.spf-dd__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.spf-dd__label.is-placeholder{color:var(--faint,#6B5E85);font-weight:500}

.spf-dd__caret{
  width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.6;
  transition:transform .2s ease}
.spf-dd.open .spf-dd__caret{transform:rotate(180deg)}

/* position:fixed so it escapes every overflow:hidden card / modal / scroll box.
   JS sets top/left/width against the trigger each time it opens. */
.spf-dd__pop{
  position:fixed;z-index:2147482000;left:0;top:0;width:220px;
  padding:6px;border-radius:var(--r,14px);
  background:linear-gradient(180deg,#191325,#120d1f);
  border:1px solid var(--glass-brd,rgba(37,99,235,.28));
  box-shadow:0 28px 70px -18px rgba(0,0,0,.8),0 0 0 1px rgba(147,165,255,.05),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;
  transition:opacity .16s ease,transform .16s cubic-bezier(.16,1,.3,1),visibility .16s}
.spf-dd__pop::before{
  content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.spf-dd.up .spf-dd__pop{transform-origin:bottom left;transform:translateY(6px) scale(.98)}
.spf-dd.open .spf-dd__pop{opacity:1;visibility:visible;transform:none}

.spf-dd__search{
  display:block;margin:2px 2px 6px;width:calc(100% - 4px);padding:8px 10px;border-radius:9px;
  font:inherit;font-size:12.5px;color:var(--ink,#ECE7F7);
  background:rgba(255,255,255,.04);border:1px solid var(--glass-brd,rgba(37,99,235,.16));outline:none}
.spf-dd__search:focus{border-color:var(--electric,#2563EB);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.spf-dd__search[hidden]{display:none}

.spf-dd__list{max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.spf-dd__list::-webkit-scrollbar{width:8px}
.spf-dd__list::-webkit-scrollbar-thumb{background:rgba(37,99,235,.3);border-radius:100px;border:2px solid transparent;background-clip:content-box}

.spf-dd__opt{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:9px 11px;border:0;border-radius:9px;background:none;
  font:inherit;font-weight:600;font-size:12.5px;color:var(--ink,#ECE7F7);
  box-shadow:inset 0 0 0 0 var(--glow,#93A5FF);
  transition:background .12s ease,box-shadow .14s ease,color .12s ease}
.spf-dd__opt > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spf-dd__opt[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.spf-dd__opt.active,
.spf-dd__opt:hover:not([aria-disabled="true"]){background:rgba(37,99,235,.14);box-shadow:inset 2px 0 0 0 var(--glow,#93A5FF)}
.spf-dd__opt[aria-selected="true"]{color:var(--glow,#93A5FF)}
.spf-dd__tick{
  margin-left:auto;width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .12s}
.spf-dd__opt[aria-selected="true"] .spf-dd__tick{opacity:1}
.spf-dd__empty{padding:12px;text-align:center;color:var(--faint,#6B5E85);font-size:12px;font-weight:500}

.spf-dd.open .spf-dd__opt{animation:spfddIn .22s ease backwards}
.spf-dd.open .spf-dd__list > *:nth-child(1){animation-delay:.015s}
.spf-dd.open .spf-dd__list > *:nth-child(2){animation-delay:.03s}
.spf-dd.open .spf-dd__list > *:nth-child(3){animation-delay:.045s}
.spf-dd.open .spf-dd__list > *:nth-child(4){animation-delay:.06s}
.spf-dd.open .spf-dd__list > *:nth-child(5){animation-delay:.075s}
.spf-dd.open .spf-dd__list > *:nth-child(6){animation-delay:.09s}
.spf-dd.open .spf-dd__list > *:nth-child(7){animation-delay:.105s}
.spf-dd.open .spf-dd__list > *:nth-child(8){animation-delay:.12s}
@keyframes spfddIn{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .spf-dd__pop,.spf-dd__caret,.spf-dd__opt{transition:none}
  .spf-dd.open .spf-dd__opt{animation:none}
}