:root{
  --mstq-red:   #e53030;
  --mstq-dark:  #181818;
  --mstq-light: #eeeeee;
}

/* Обёртка */
.search-wrapper{
  flex: 0 1 520px;
  min-width: 500px;
  /* max-width: 520px; */
}

/* Поле */
.searchbar{
  height:44px;
  border:1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  transition:box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.searchbar:focus-within{
  border-color:var(--mstq-red);
  box-shadow:0 0 0 .2rem rgba(229,48,48,.3);
}
.searchbar input{
  outline:none!important;
  color:var(--mstq-dark);
  font-size:1rem;
}
.searchbar input::placeholder {
    color: rgba(0,0,0,.65);      /* чёрный цвет */
    opacity: 1;       /* важно для Firefox */
}

/* Подсказка */
.kbd-hint{
  border:1px solid var(--mstq-dark);
  padding:0 .35rem;
  border-radius:2px;
  font-size: 1rem;
  opacity:.8;
  color:var(--mstq-dark);
  background:rgba(255,255,255,.05);
}

/* Выпадающий список */
#search-results{
  min-width: 500px;
  position:absolute;
  font-size: 0.9rem;
  top:100%;
  /* left:0; */
  right:0;
  width:100%;
  margin-top:.4rem;
  background:var(--mstq-light);
  border:1px solid var(--mstq-red);
  border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  z-index:1080;
}

/* Элементы */
.search-item{
  padding:.7rem 1rem;
  border-bottom:1px solid var(--mstq-dark);
  background:transparent;
}
.search-item:last-child{ border-bottom:0; }

.search-item .title{ color:var(--mstq-dark); }
.search-item .meta,
.search-item .desc{ color:rgba(0, 0, 0, 0.7);  }

.search-item:hover,
.search-item.active{
  background:rgb(230, 230, 230); /* background:rgba(229,48,48,.15);  color:rgba(255,255,255,.7); */
}

/* Подсветка */
.search-highlight{
  background:rgba(229,48,48,.5); /*var(--mstq-red)*/
  color:var(--mstq-dark);
  padding:.05rem .15rem;
  border-radius:.25rem;
}

/* Пустое состояние */
.search-empty{
  padding:1rem;
  text-align:center;
  color:rgba(255,255,255,.6);
  color:var(--mstq-dark);

}




/* --- Для устройств до 1600px --- */
@media (max-width: 1600px) {
  
  /* Форма растягивается на всю ширину навбара */
  .navbar form[role="search"] {
    width: 100%;
  }

  /* Обертка поиска */
  .search-wrapper {
    flex-basis: auto;
    min-width: 100%;
    max-width: 100%;
  }

  /* Строка поиска — удобный тап-таргет */
  .navbar .searchbar {
    height: 52px;
    border-radius: 4px;
  }

  /* Дропдаун — ровно по ширине инпута */
  #search-results {
    min-width: 0px;
    width: 100%;
    border-radius: 0 0 4px 4px;
    margin-top: .35rem;
  }

  /* Читаемый размер шрифта */
  .searchbar input {
    font-size: 1rem;
  }
}

/* --- Для очень узких устройств (до 360px) --- */
@media (max-width: 360px) {
  .searchbar {
    height: 50px;
  }

  .searchbar input {
    font-size: .95rem;
  }
}