/* WANDR custom dropdown — progressive enhancement of is kept in the DOM (hidden) for form submission + fallback. */ .wandr-select-wrap { position: relative; display: block; width: 100%; font-family: Arial, Helvetica, sans-serif; } .wandr-select-wrap .wandr-native { /* keep it submittable + accessible to autofill, but out of view */ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; } .wandr-select-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 12px; background: #1c1c1c; color: #ececec; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; font-size: 14px; line-height: 1.25; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .wandr-select-btn:hover { border-color: rgba(255, 255, 255, .30); background: #212121; } .wandr-select-btn:focus-visible { outline: none; border-color: #57b3dd; box-shadow: 0 0 0 2px rgba(87, 179, 221, .30); } .wandr-select-wrap.open .wandr-select-btn { border-color: #57b3dd; box-shadow: 0 0 0 2px rgba(87, 179, 221, .25); } .wandr-select-wrap.disabled { opacity: .5; pointer-events: none; } .wsb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wsb-caret { flex-shrink: 0; font-size: 11px; opacity: .7; transition: transform .18s ease; } .wandr-select-wrap.open .wsb-caret { transform: rotate(180deg); } .wandr-select-panel { /* portalled to and positioned via JS so it overflows any scrolling/clipping ancestor (e.g. a modal popup) */ position: fixed; top: 0; left: 0; z-index: 2147483000; background: #1c1c1c; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, .5); padding: 5px; max-height: 264px; overflow-y: auto; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .14s ease, transform .14s ease; } .wandr-select-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .wandr-select-opt { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 6px; color: #dcdcdc; font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wandr-select-opt .wso-text { overflow: hidden; text-overflow: ellipsis; } .wandr-select-opt.active { background: rgba(87, 179, 221, .18); } .wandr-select-opt.selected { color: #fff; } .wso-check { margin-left: auto; opacity: 0; flex-shrink: 0; color: #57b3dd; } .wandr-select-opt.selected .wso-check { opacity: 1; } .wandr-select-panel::-webkit-scrollbar { width: 10px; } .wandr-select-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 6px; } .wandr-select-panel::-webkit-scrollbar-track { background: transparent; }