/* Выпадающие списки в стиле сайта — поверх обычного <select> (сам select остаётся в форме, скрыт).
   Подключается и на сайте, и в админке; цвета — из переменных каждой темы. JS — static/js/main.js (enhanceSelects). */

.dd{position:relative;display:block;width:100%;min-width:0;font:inherit}
.dd--inline{display:inline-block;width:auto;max-width:100%;vertical-align:middle}
.dd > select{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0;pointer-events:none;
  margin:0;border:0;padding:0}

.dd__btn{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:9px 12px 9px 14px;text-align:left;cursor:pointer;
  font:inherit;font-size:.92rem;font-weight:600;color:var(--ink,#3d2b23);background:#fff;border:1px solid var(--slate-300,#ccbdaf);
  border-radius:10px;transition:border-color .15s,box-shadow .15s,background .15s}
.dd__btn:hover{border-color:var(--slate-400,#a89484)}
.dd__btn:focus-visible,.dd.is-open .dd__btn{outline:none;border-color:var(--accent,#f47d08);box-shadow:0 0 0 3px rgba(244,125,8,.15)}
.dd__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__val.is-ph{color:var(--slate-400,#a89484);font-weight:500}
.dd__chev{flex:none;width:18px;height:18px;color:var(--slate-500,#8a7264);transition:transform .2s}
.dd.is-open .dd__chev{transform:rotate(180deg);color:var(--accent,#f47d08)}
.dd.is-disabled .dd__btn{opacity:.55;cursor:not-allowed}

.dd__pop{position:absolute;z-index:60;left:0;top:calc(100% + 6px);min-width:100%;width:max-content;max-width:min(480px,calc(100vw - 24px));
  background:#fff;border:1px solid var(--line,#e8ddd3);border-radius:14px;padding:6px;
  box-shadow:0 18px 44px -14px rgba(46,30,22,.35),0 2px 6px rgba(46,30,22,.06);
  transform-origin:top center;animation:dd-in .14s ease-out}
.dd--up .dd__pop{top:auto;bottom:calc(100% + 6px);transform-origin:bottom center}
.dd__pop[hidden]{display:none}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

.dd__search{display:block;width:100%;height:38px;margin:0 0 6px;padding:0 12px 0 34px;border:1px solid var(--line,#e8ddd3);border-radius:9px;
  font:inherit;font-size:.88rem;color:var(--ink,#3d2b23);
  background:#faf6f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a89484' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 11px 50%/15px no-repeat}
.dd__search:focus{outline:none;border-color:var(--accent,#f47d08);background-color:#fff}

.dd__list{max-height:300px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.dd__group{padding:10px 10px 4px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-400,#a89484)}
.dd__opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:.9rem;line-height:1.3;
  color:var(--slate-700,#5f4a3f)}
.dd__opt-tx{flex:1;min-width:0}
.dd__opt-note{flex:none;font-size:.74rem;font-weight:700;color:var(--slate-400,#a89484)}
.dd__opt svg{flex:none;width:16px;height:16px;color:var(--accent,#f47d08);opacity:0}
.dd__opt.is-active{background:#fbf1e7;color:var(--ink,#3d2b23)}
.dd__opt.is-sel{font-weight:700;color:var(--ink,#3d2b23)}
.dd__opt.is-sel svg{opacity:1}
.dd__opt.is-dis{cursor:not-allowed;color:var(--slate-400,#a89484)}
.dd__opt.is-dis.is-active{background:transparent}
.dd__opt[hidden]{display:none}
.dd__empty{padding:12px 10px;font-size:.86rem;color:var(--slate-400,#a89484)}

@media (max-width:560px){
  .dd__pop{width:auto;right:0;max-width:none}
  .dd--inline .dd__pop{min-width:min(100%,260px)}
  .dd__list{max-height:min(320px,50vh)}
  .dd__opt{padding:11px 10px}
}
@media (prefers-reduced-motion:reduce){.dd__pop{animation:none}.dd__chev{transition:none}}