/* Variables */
:root {
  --search-bg-color: #ffffff;
  --search-text-color: #344;
  --search-active-bg: #ededed;
  --search-border-color: #d6d6d6;
  --search-spacing-sm: 9px;
  --search-spacing-md: 15px;
  --search-spacing-lg: 30px;
}

/* Layout and Position Styles */
#topsearchelastic_widget form {
  position: relative;
}

#checkout #search_widget {
  display: none;
}

#pagenotfound .page-content #search_widget {
  width: 100%;
}

.page-not-found #topsearchelastic_widget form {
  display: inline-block;
}

/* Search Results Container */
#topsearchelastic_result {
  background-color: var(--search-bg-color);
  box-sizing: border-box;
  color: var(--search-text-color);
  max-width: 1200px;
  margin: 15px auto 15px auto;
}

#topsearchelastic_result .col-xs-12 {
  overflow: hidden;
}

#topsearchelastic_result_left {
  box-sizing: border-box;
  margin-right: -0.5px;
}

#topsearchelastic_result_right {
  box-sizing: border-box;
  margin-left: -0.5px;
}

/* Search Item Styles */
.topsearchelastic_item {
  cursor: pointer;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.topsearchelastic_item .text-primary {
  font-weight: 800;
}

/* Category and Suggestion Results */
#category_results .topsearchelastic_item,
#suggestion_results .topsearchelastic_item {
  line-height: 27px;
  padding: 0 var(--search-spacing-sm);
}

#category_results .topsearchelastic_item.active,
#suggestion_results .topsearchelastic_item.active {
  background: var(--search-active-bg);
}

/* Product Results */
#product_results {
  display: flex;
  gap: var(--search-spacing-md);
}

#product_results .topsearchelastic_item {
  text-align: center;
}

#product_results .topsearchelastic_item:last-child {
  border: 0;
}

/* Elasticsearch Modal */
.elasticsearch-modal {
  padding: 0!important;
}

.elasticsearch-modal .modal-dialog {
  max-width: 100%;
  width: 100%;
  height: 100vh;
  margin: 0;
}

.elasticsearch-modal .modal-content {
  height: 100%;
}

.elasticsearch-modal .modal-header {
  padding: var(--search-spacing-lg);
}

.elasticsearch-modal .search-form {
  max-width: 100%;
}

.elasticsearch-modal .modal-body {
  overflow: hidden auto;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  #topsearchelastic_result_left,
  #topsearchelastic_result_right {
    float: none;
    border: none;
    margin: 0;
    padding: 0;
  }

  #topsearchelastic_result {
    max-height: none;
    padding: 0;
  }
}

@media (max-width: 768px) {
  #product_results .topsearchelastic_item:nth-child(3n+1) {
    display: none;
  }
}