/* Выпадающий список раздела. Не нативный select: счётчики, пометки и две строки
   в пункте, плюс видимый фокус на всём, что фокусируется. */

.dd { position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.dd__lb {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bt-text-3); white-space: nowrap;
}

.dd__btn {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 14px; border-radius: 12px; cursor: pointer;
  background: var(--bt-surface); border: 1px solid var(--bt-line);
  color: var(--bt-text); font: 600 14px/1.2 var(--bt-font-body); text-align: left;
}
.dd__btn:hover { border-color: var(--bt-text-3); }
.dd__btn:focus-visible,
.dd__list:focus-visible,
.dd__opt:focus-visible { outline: 2px solid var(--bt-primary); outline-offset: 2px; }
.dd[data-open="true"] .dd__btn { border-color: var(--bt-primary); }

.dd__badge {
  flex: 0 0 auto; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bt-primary); color: #16150F;
  font: 800 13px/1 var(--bt-font-display);
}
.dd__opt--off .dd__badge, .dd__btn .dd__badge--off {
  background: var(--bt-surface-3); color: var(--bt-text-3);
}
.dd__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__m { margin-left: auto; padding-left: 10px; font-weight: 400; font-size: 12.5px; color: var(--bt-text-3); white-space: nowrap; }
.dd__chev {
  flex: 0 0 auto; width: 9px; height: 9px; margin-left: 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); opacity: .55; transition: transform .15s;
}
.dd[data-open="true"] .dd__chev { transform: rotate(-135deg) translate(-3px, -3px); }

.dd__list {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%;
  max-height: 320px; overflow: auto; margin: 0; padding: 5px; list-style: none;
  background: var(--bt-surface); border: 1px solid var(--bt-line-2); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.dd[data-open="false"] .dd__list { display: none; }

.dd__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  font: 600 14px/1.25 var(--bt-font-body); color: var(--bt-text); white-space: nowrap;
}
.dd__opt.is-active { background: var(--bt-surface-2); }
.dd__opt.is-on { background: var(--bt-primary-soft); }
.dd__opt--off { color: var(--bt-text-2); }

/* На телефоне список раскрывается на всю ширину секции, а не узкой колонкой у кнопки */
@media (max-width: 620px) {
  .dd { display: flex; width: 100%; }
  .dd__lb { font-size: 12px; }
  .dd__btn { min-height: 44px; }
  .dd__btn { flex: 1; min-width: 0; }
  .dd__list { left: 0; right: 0; max-height: 60vh; }
  .dd__opt { padding: 12px 11px; }
}