/* The searchable country field (countrypick.js): a glass field, a frosted list, the picked row in cyan. Uses the
   button and glow tokens from app.css; works on any page that loads app.css. */
.cp { position: relative; }
.cp-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.cp input[role=combobox] { padding-right: 46px; }
.cp-caret { position: absolute; right: 6px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.cp-caret::before { content: ""; width: 8px; height: 8px; border: solid #9fe9ff; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.cp-open .cp-caret::before { transform: translateY(2px) rotate(-135deg); }
.cp-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; max-height: min(360px, 52vh); overflow: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 16px; background: rgb(10 15 28 / 96%);
  box-shadow: var(--wm-sheen), 0 0 0 1px rgba(214,228,242,.16), 0 0 0 2px rgba(55,215,255,.18), 0 24px 60px -12px rgba(0,0,0,.75);
  scrollbar-width: thin; scrollbar-color: rgba(159,233,255,.35) transparent;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cp-list { background: rgb(10 15 28 / 97%); -webkit-backdrop-filter: blur(24px) saturate(115%); backdrop-filter: blur(24px) saturate(115%); }
}
@media (prefers-reduced-transparency: reduce) { .cp-list { background: #0a101c; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.cp-group + .cp-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.07); }
.cp-head { padding: 8px 12px 4px; font: 600 11px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #8d97ab; }
.cp-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 10px; cursor: pointer; color: #e8edf5; font-size: 16px; }
.cp-opt:hover { background: rgba(255,255,255,.05); }
.cp-opt.cp-active { background: rgba(55,215,255,.12); box-shadow: inset 0 0 0 1px rgba(55,215,255,.35); }
.cp-opt[aria-selected=true] { color: #5ce7fa; font-weight: 600; }
.cp-opt[aria-selected=true]::after { content: ""; order: 3; width: 6px; height: 11px; margin: 0 2px 3px 0; border: solid #5ce7fa; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cp-dial { margin-left: auto; font: 400 13px/1 var(--body); color: #8d97ab; font-variant-numeric: tabular-nums; }
.cp-empty { padding: 14px 12px; color: #8d97ab; font-size: 15px; }
@media (forced-colors: active) { .cp-list { border: 1px solid CanvasText; } .cp-opt.cp-active { outline: 2px solid Highlight; } }
@media (prefers-reduced-motion: reduce) { .cp-caret::before { transition: none; } }