/*SEARCHBAR - OVERFLOW FIX*/

#header .header-top,
#header .header-top .search,
#formSearchForm,
#formSearchForm fieldset {
  overflow: visible !important;
}

#header .header-top .search {
  display: block !important;
  position: relative !important;
  width: 100%;
  overflow: visible !important;
}

#header .navigation-buttons {
  padding: 0 !important;
}

/*SEARCHBAR - INLINE FORM*/

#formSearchForm.inline-search {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100%;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 30 !important;
}

/* Shoptet přidává tyto třídy dynamicky — přebití aby form zůstal viditelný */
#formSearchForm.inline-search.hovered,
#formSearchForm.inline-search.compact-form,
#formSearchForm.inline-search.js-search-main {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/*SEARCHBAR - TOGGLE*/

#formSearchForm.inline-search .search-toggle,
.search-inline-ready #header .search-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/*SEARCHBAR - FIELDSET*/

#formSearchForm.inline-search fieldset {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  right: 0 !important;
}

/*SEARCHBAR - INPUT*/

/* Input — roztáhne se na zbývající šířku, zaoblení vlevo */
#formSearchForm.inline-search .query-input,
#formSearchForm.inline-search .search-input,
#formSearchForm.inline-search input[type="search"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #c4bfb1 !important;
  background: #fff !important;
  color: #122038 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 30px 0 0 30px !important;
}

/* Placeholder */
#formSearchForm.inline-search input::placeholder {
  font-size: 16px;
}

/*SEARCHBAR - BUTTON*/

/* Tlačítko Hledat — fixní šířka, zaoblení vpravo */
#formSearchForm.inline-search button[type="submit"] {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 110px !important;
  height: 42px !important;
  padding: 0 18px !important;
  margin: 0 0 0 -1px !important;
  border: none !important;
  background: #c4bfb0 !important;
  color: #fff !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 2 !important;
  border-radius: 0 30px 30px 0;
  flex-shrink: 0;
}

#formSearchForm.inline-search button[type="submit"]:hover {
  color: #122038 !important;
}

/*SEARCHBAR - NAŠEPTÁVAČ*/

/* Našeptávač — absolutně pod inputem */
#formSearchForm.inline-search .search-whisper {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #ddd !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  z-index: 9999 !important;
}

/* Aktivní stav našeptávače */
.search-whisperer.active {
  display: block !important;
  top: 50px !important;
}

/* Scrollovatelný seznam výsledků */
ul.search-whisperer-products {
  max-height: 55vh;
  overflow-y: auto;
}

/*SEARCHBAR - ORIGINÁLNÍ SHOPTET*/

#header
  .search-form
  input.query-input.form-control.search-input.js-search-input {
  border-radius: 30px 0 0 30px !important;
}

#header .search-form button.btn.btn-default {
  border-radius: 0 30px 30px 0 !important;
  background-color: #c4bfb0 !important;
  color: white !important;
}

#header .search-form button.btn.btn-default:hover {
  background-color: #c4bfb0 !important;
  color: #122038 !important;
}

#header .search-form.hovered fieldset {
  background: unset;
  position: relative;
  top: 51px !important;
  margin: 0px !important;
  padding: 0px !important;
}

#header .search-form.hovered .search-toggle {
  filter: invert(0) !important;
  top: 40px !important;
  right: 20% !important;
  width: 15px;
  height: 15px;
}

/*SEARCHBAR - MEDIA QUERIES*/

@media only screen and (min-width: 768px) and (max-width: 992px) {
  #header .search-form.hovered fieldset input[type="search"],
  #header .search-form.hovered fieldset input.query-input {
    width: 400px !important;
  }
}

@media screen and (max-width: 800px) {
  #header .search-form.hovered .search-toggle {
    right: 18% !important;
  }
}

@media screen and (max-width: 767px) {
  form#formSearchForm {
    top: 90px !important;
    background-color: #122038 !important;
  }
}