/* Fix for search icon alignment */
#search-box .button-search,
#search-box .button-search-end {
  display: flex  ;
  align-items: center  ;
  justify-content: center  ;
  height: 100%  ;
  margin: 0  ;
  padding: 0 8px  ;
  min-width: 38px  ;
  position: relative  ;
  top: auto  ;
  bottom: auto  ;
}

#search-box form {
  height: 38px  ; /* Set a specific height to match input height */
  position: relative  ;
  display: flex  ;
  align-items: center  ;
  width: 100%  ;
}

#search-box input.inputbox {
  height: 100%  ;
  padding-right: 5rem  ; /* Ensure text doesn't overlap with the buttons */
}

#search-box .absolute {
  top: 0  ;
  bottom: 0  ;
  display: flex  ;
  align-items: center  ;
  justify-content: center  ;
  right: 0  ;
  height: 100%  ;
}

/* Fix for the divider line */
#search-box .border-r {
  height: 1.25rem  ;
  margin: 0 2px  ;
}

/* Fix icon alignment inside buttons */
#search-box .iconify {
  display: inline-block  ;
  width: 18px  ;
  height: 18px  ;
  font-size: 18px  ;
  line-height: 1  ;
  vertical-align: middle  ;
  position: relative  ;
  top: -1px  ;
}

/* Force display of icons even if iconify hasn't loaded */
#search-box .button-search .iconify:before {
  content: "\1F50D"; /* Unicode magnifying glass */
  display: inline-block;
}

#search-box .button-search-end .iconify:before {
  content: "\2699"; /* Unicode gear/settings */
  display: inline-block;
}

/* Fix for search and settings icons alignment */
#search-box .search-icon,
#search-box .settings-icon {
  display: flex  ;
  align-items: center  ;
  justify-content: center  ;
  position: relative  ;
  top: 0  ;
}

/* Fix for button wrapper container */
#search-box .ltr\:right-1 {
  right: 0.25rem  ;
  height: 100%  ;
}

/* Ensure responsive behavior */
@media (max-width: 768px) {
  #search-box form {
    height: 42px  ; /* Slightly taller on mobile */
  }
}