/* ==========================================================================
   3. EXPANDABLE SEARCH COMPONENT
   ========================================================================== */

.custom-search-form {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  background-color: transparent !important;
  border-radius: 8px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  margin: 0 !important;
  height: 38px !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease-in-out !important;
}

.custom-search-form.is-expanded {
  background-color: #f4f4f5 !important;
  border: 1px solid #d4d4d8 !important;
}

.search-toggle-btn {
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}

.search-toggle-btn .header-search-svg {
  stroke: #27272a !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

.custom-search-form .search-field {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  font-size: 14px !important;
  color: #18181b !important;
  height: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  line-height: normal !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition:
    width 0.3s ease,
    opacity 0.2s ease !important;
}

.custom-search-form.is-expanded .search-field {
  width: 170px !important;
  padding: 0 8px 0 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.custom-search-form .search-field:focus,
.custom-search-form .search-field:active,
.custom-search-form .search-field:focus-visible {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.custom-search-form input[type="search"]::-webkit-search-decoration,
.custom-search-form input[type="search"]::-webkit-search-cancel-button,
.custom-search-form input[type="search"]::-webkit-search-results-button,
.custom-search-form input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}

.custom-search-form::before,
.custom-search-form::after,
.site-search::before,
.site-search::after,
.search-toggle-btn::before,
.search-toggle-btn::after {
  content: none !important;
  display: none !important;
}