.input-suggest-host {
  position: relative;
}

.input-suggest {
  position: absolute;
  z-index: 60;
  max-height: 320px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--ib-bg, #fff);
  border: 1px solid var(--ib-line, #e4ebe9);
  border-radius: var(--ib-radius, 14px);
  box-shadow: 0 14px 34px rgb(16 32 30 / .14);
}

.input-suggest[hidden] {
  display: none;
}

.input-suggest__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: calc(var(--ib-radius, 14px) * .6);
  color: var(--ib-fg, #10201e);
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.input-suggest__item:hover,
.input-suggest__item.is-active {
  background: var(--ib-bg-soft, #f2f6f5);
}

.input-suggest__title b {
  color: var(--ib-accent-ink, var(--ib-accent, #007f69));
  font-weight: 600;
}

.input-suggest__sub {
  color: var(--ib-muted, #6b7573);
  font-size: 13px;
}

.input-suggest__note {
  display: block;
  margin-top: 6px;
  color: var(--ib-muted, #6b7573);
  font-size: 13px;
  line-height: 1.4;
}

.input-suggest__note:empty {
  display: none;
}

@media (max-width: 767px) {
  .input-suggest__item {
    padding: 12px;
    font-size: 16px;
  }
}