/* базовая раскладка */
.sf-drop{position:relative}
.sf-drop.drop-disab .sf-drop__list{display:none}
.sf-drop.drop-enab .sf-drop__list{display:block}

/* кнопка */
.sf-drop__btn::after {
  content: '';
  background: url(https://starkframe.store/wp-content/themes/starkframe/libraries/sf-dropdown/assets/drop-arr.svg);
  background-size: cover;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 6px;
  right: 8px;
  transition: transform 0.3s, opacity 0.3s ease;
}

.sf-drop.drop-enab .sf-drop__btn::after {
    transform: rotate(180deg);
}

.sf-drop__btn{
  display: block;
  width: 100%;
  min-height: 36px;
  padding: .5rem 2.25rem .5rem .75rem;
  text-align: left;
  border: 0px solid #ddd;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #ffffff22 !important;
  color: #fff;
  cursor: pointer;
  font-family: 'Poppins';
  font-size: 13px;
}

/* список */
.sf-drop__list{
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 6px);
  bottom: auto;
  z-index: 50;
  background: #25242e;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  max-height: 260px;
  overflow: auto;
  min-width: 100%;
  padding: 0.25em 0;

  input {
    opacity: 0;
    visibility: hidden;
  }
}

/* если открыть ВВЕРХ */
.sf-drop.sf-drop--up .sf-drop__list{
  top:auto; bottom:calc(100% + 6px);
}

/* пункт */
.sf-drop__opt.sf-checked::before {
    background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/done-o1.svg);
    background-size: cover;
    opacity: 1;
    width: 18px;
    height: 18px;
    top: 8px;
    left: 12.5px;
}

.sf-drop__opt.sf-selected::before {
    background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a-radio-o1.svg);
    background-size: cover;
    opacity: 1;
}

.sf-drop__opt::before {
    content: '';
    position: absolute;
    background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a-radio1.svg);
    background-size: cover;
    width: 24px;
    height: 24px;
    top: 5px;
    left: 10px;
    z-index: 9;
    opacity: 0.5;
    transition: transform .25s ease, background .25s ease;
    z-index: 9;
}

.sf-drop__opt{display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; cursor:pointer; position: relative;}
.sf-drop__opt:hover{color: #ffb471 !important;}

.sfDropValue, .sf-drop__value, [data-drop-value]{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}