wordpress-theme-aksrt/assets/css/frontend/nav/zib-search-box.css

/* zibll search-box / menu_search panel parity */

/* Layout-2 focus dropdown */
.navbar-collapse .form-group.relative.dropdown {
  position: relative;
}

.navbar-collapse .search-input ~ .dropdown-menu,
.navbar-collapse .form-group .dropdown-menu.hover-show-con {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 1002;
  min-width: 320px;
  width: max(320px, 100%);
  max-width: 460px;
  margin-top: 10px;
  padding: 10px;
  background: var(--main-bg-color, #fff);
  border-radius: var(--main-radius, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  visibility: visible;
  opacity: 1;
}

.navbar-form.hover-show:hover .dropdown-menu.hover-show-con,
.navbar-form.hover-show:focus-within .dropdown-menu.hover-show-con,
.navbar-collapse .form-group:focus-within .dropdown-menu.hover-show-con,
.navbar-collapse .dropdown-menu.hover-show-con.is-open {
  display: block;
}

/* Search box body */
.search-input .search-keywords {
  padding: 6px 10px 2px;
}
.search-input .search-keywords > p {
  margin: 0 0 6px;
  font-size: 0.9em;
}
.search-input .search-keywords .but,
.search-input .search-keywords a.but {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 2px 10px;
  font-size: 0.85em;
  border-radius: 20px;
  background: var(--main-shadow, rgba(0, 0, 0, 0.05));
  color: inherit;
  text-decoration: none;
}
.search-input .search-keywords .but:hover {
  color: var(--focus-color, #2997f7);
}

.search-input .history-search .trash-history-search {
  text-decoration: none;
  opacity: 0.7;
}
.search-input .history-search .trash-history-search:hover {
  opacity: 1;
  color: var(--focus-color, #2997f7);
}

/* Hot posts swiper row */
.search-input .relates-thumb {
  overflow: hidden;
}
.search-input .relates-thumb .swiper-container,
.search-input .relates-thumb .swiper-scroll {
  overflow: hidden;
  position: relative;
}
.search-input .relates-thumb .swiper-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  scrollbar-width: none;
}
.search-input .relates-thumb .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.search-input .relates-thumb .swiper-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.search-input .relates-thumb .swiper-button-prev,
.search-input .relates-thumb .swiper-button-next {
  display: none;
}

/* Full navbar-search slide (layout 1/3) — position/transition from zib-navbar-core */
.navbar-search {
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
}
.navbar-search .container {
  max-width: var(--nav-max-width, 1200px);
  margin: 0 auto;
  position: relative;
  padding: 10px 15px 20px;
}
.navbar-search .navbar-search-close,
.navbar-search > .container > .close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  background: none;
  border: 0;
  font-size: 1.25rem;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}
.navbar-search .navbar-search-close:hover {
  opacity: 1;
}

/* Line form (full search box) */
.search-input .line-form {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}
.search-input .search-input-text {
  flex: 1;
  position: relative;
  min-width: 0;
}
.search-input .line-form-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 40px 12px 4px;
  font-size: 1.05em;
  outline: none;
  color: inherit;
}
.search-input .scale-placeholder {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.45;
  transition: 0.2s;
}
.search-input .scale-placeholder.is-focus,
.search-input .line-form-input:focus + .line-form-line + .scale-placeholder,
.search-input .line-form-input:not([value=""]) ~ .scale-placeholder {
  opacity: 0;
}
.search-input .option-dropdown {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-right: 8px;
}
.search-input .search-type-but-average .but {
  margin: 0 4px;
}
.search-input .search-type-but-average .but.active {
  color: #fff;
  background: var(--focus-color, #2997f7);
}

/* Live suggest (extension) */
.navbar-inline-search-suggest__item,
.aksrt-menu-search-suggest a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 4px;
  text-decoration: none;
  color: inherit;
}
.navbar-inline-search-suggest__item:hover {
  color: var(--focus-color, #2997f7);
}

body.theme-dark .navbar-collapse .form-group .dropdown-menu.hover-show-con,
html.dark .navbar-collapse .form-group .dropdown-menu.hover-show-con,
body.dark-theme .navbar-collapse .form-group .dropdown-menu.hover-show-con {
  background: var(--main-bg-color, #1e1e1e);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}