/* tokens so the component works in admin/panel pages too */
.wdm-dd { --wdm-red:#d81830; --wdm-red-50:#fff3f5; --wdm-red-100:#ffe1e5; --wdm-grad:linear-gradient(135deg,#f0213a 0%,#b10f26 100%); --wdm-ink:#12142b; --wdm-ink-2:#3a3f5f; --wdm-muted:#6a6f8c; --wdm-line:#f0dde1; --wdm-line-2:#ead3d8; --wdm-soft:#fff3f5; --wdm-font:'Plus Jakarta Sans',system-ui,sans-serif; --wdm-ease:cubic-bezier(.22,.8,.3,1); }
.wdm-dd--sm .wdm-dd__btn { padding: 8px 12px; min-height: 38px; font-size: 13.5px; border-radius: 11px; }
.wdm-dd__grp { padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wdm-muted); list-style: none; }
.wdm-dd__opt.is-dis { opacity: .4; cursor: not-allowed; }
.wdm-dd.is-disabled .wdm-dd__btn { opacity: .55; cursor: not-allowed; background: #faf5f6; }
.wdm-dd__opt { list-style: none; }
/* =====================================================================
   Custom dropdown (replaces native <select> on the public site)
   ===================================================================== */
.wdm-dd { position: relative; width: 100%; font-family: var(--wdm-font); }
.wdm-dd > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.wdm-dd__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: #fff; border: 1.5px solid var(--wdm-line-2); border-radius: 14px;
  padding: 13px 16px; font: 600 15px var(--wdm-font); color: var(--wdm-ink); cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; min-height: 50px; }
.wdm-dd__btn:hover { border-color: #e3a0ab; }
.wdm-dd.is-open .wdm-dd__btn, .wdm-dd__btn:focus-visible { border-color: var(--wdm-red); box-shadow: 0 0 0 4px rgba(216,24,48,.12); outline: 0; }
.wdm-dd__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wdm-dd__val.is-ph { color: #9ca1ba; font-weight: 500; }
.wdm-dd__chev { flex: none; width: 26px; height: 26px; border-radius: 9px; background: var(--wdm-red-50); color: var(--wdm-red); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; transition: transform .3s var(--wdm-ease), background .2s, color .2s; }
.wdm-dd.is-open .wdm-dd__chev { transform: rotate(180deg); background: var(--wdm-red); color: #fff; }
.wdm-dd__panel { position: absolute; z-index: 1500; left: 0; right: 0; top: calc(100% + 8px); min-width: 200px; background: #fff; border: 1px solid var(--wdm-line-2); border-radius: 18px; padding: 8px;
  box-shadow: 0 26px 60px rgba(160,20,40,.22), 0 2px 6px rgba(18,20,43,.05); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top; transition: all .22s var(--wdm-ease); }
.wdm-dd.is-open .wdm-dd__panel { opacity: 1; visibility: visible; transform: none; }
.wdm-dd.is-up .wdm-dd__panel { top: auto; bottom: calc(100% + 8px); transform-origin: bottom; }
.wdm-dd__search { display: flex; align-items: center; gap: 9px; padding: 0 12px; margin-bottom: 6px; border-radius: 12px; background: var(--wdm-soft); border: 1px solid var(--wdm-line); }
.wdm-dd__search i { color: var(--wdm-muted); font-size: 13px; }
.wdm-dd__search input { flex: 1; border: 0; outline: 0; background: transparent; padding: 11px 0; font: 600 14px var(--wdm-font); color: var(--wdm-ink); }
.wdm-dd__list { max-height: 264px; overflow-y: auto; list-style: none; margin: 0; padding: 0; scrollbar-width: thin; scrollbar-color: #e3a0ab transparent; }
.wdm-dd__list::-webkit-scrollbar { width: 6px; } .wdm-dd__list::-webkit-scrollbar-thumb { background: #efc3ca; border-radius: 99px; }
.wdm-dd__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--wdm-ink-2); cursor: pointer; transition: background .15s, color .15s, padding .2s; }
.wdm-dd__opt:hover, .wdm-dd__opt.is-hl { background: var(--wdm-red-50); color: var(--wdm-red); padding-left: 16px; }
.wdm-dd__opt.is-sel { background: var(--wdm-grad); color: #fff; }
.wdm-dd__opt.is-sel::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; }
.wdm-dd__empty { padding: 14px; text-align: center; color: var(--wdm-muted); font-weight: 600; font-size: 13.5px; }

/* no stray focus box inside the search field */
.wdm-dd__search input, .wdm-dd__search input:focus, .wdm-dd__search input:focus-visible, .wdm-dd__search input:hover {
  border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; height: auto !important; padding: 11px 0 !important; border-radius: 0 !important; }
.wdm-dd__search:focus-within { border-color: var(--wdm-red); background: #fff; box-shadow: 0 0 0 3px rgba(216,24,48,.1); }