/* Tabs Styling */
#search-order-input-clear{
  min-width: 40px;
  height: 32;
  border: none;
  background: #fff url(../images/close.svg) center center no-repeat;
  border-radius: 3px;
}

.notification-tabs {
  margin-bottom: 20px;
}

.notification-tabs ul.tabs {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 16px;
}

.notification-tabs ul.tabs a {
  width: 20%;
  padding-bottom: 12px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.notification-tabs ul.tabs a li {
  color: #000;
  font-size: 16px;
  font-family: 'GothamHTF-Medium';
}

.notification-tabs ul.tabs a:has(li.active) {
  border-bottom: 5px solid #000;
}

/* Filter Section Styling */
.filter-section {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-section .search-wrapper {
  flex: 1;
}

.filter-section .form-item {
  width: 100%;
}

.filter-section input.client-search {
  width: 100%;
  padding: 16px 8px;
  border-radius: 0px 8px 8px 0px;
  display: flex;
  justify-content: flex-start;
  background-color: #fff;
  height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
  white-space: nowrap;
  color: #000;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  background-image: none;
  font-family: 'GothamHTF-Book';
}

.filter-section select.form-select {
  padding: 8px 10px;
  border-radius: 4px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  background-color: #F2F1F6;
  height: 40px;
  border-right: none !important;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
  white-space: nowrap;
  color: #000;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  font-family: 'GothamHTF-Book', 'Sans-serif';
}

.filter-section .todo-client-sel {
  border-radius: 8px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.25);
}

/* Results Section Styling */

/* General Styling */
.results-section {
  margin-top: 16px;
}

.results-heading {
  padding: 20px 16px;
  background: #F2F1F6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.results-heading p {
  font-size: 15px;
  margin-bottom: 0;
  font-family: 'GothamHTF-Medium';
}

.results-heading p span {
  font-size: 13px;
  padding-left: 10px;
  font-family: 'GothamHTF-Book';
}

.results-found {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.results-description {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 16px;
}

.results {
  padding: 0;
  margin: 0;
  list-style: none;
}

.result-item {
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}

.result-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.result-image {
  flex: 1;
  text-align: center;
}

.result-image img {
  max-width: 150px;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.result-details {
  flex: 2;
}

.product-title {
  display: block;
  font-size: 1.2em;
  margin-bottom: 5px;
}

.product-brand {
  display: block;
  font-size: 0.9em;
  color: #555;
}

.product-cost {
  display: block;
  font-size: 1em;
  color: #000;
  margin-top: 10px;
}

.result-date {
  display: block;
  font-size: 0.8em;
  color: #888;
  margin-top: 10px;
}

.date-container {
  display: grid;
  grid-gap: 10px;
}

.date-container p {
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
}

.date-value-reason {
  text-transform: uppercase;
}

.date-label {
  font-family: 'GothamHTF-Book';
  color: #808080;
}

.date-value {
  font-family: 'GothamHTF-Medium';
  color: #222;
}

#notification-section {
  padding-top: 30px;
  padding-bottom: 30px;
}

.filter-section .todo-client-sel .selected-item {
  padding: 12px 41px;
  height: 48px;
  border: none !important;
}

.results-description li h3 {
  font-size: 20px;
  line-height: 24px;
  min-height: 48px;
  font-family: 'GothamHTF-Medium';
}

.recommend-image {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.recommend-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 3px;
  margin-top: 10px;
}

.recommend-content p {
  margin-bottom: 0;
}

.recommend-content p.highlight {
  font-family: 'GothamHTF-Medium';
}

.cl-read-more .load-more {
  border: none;
  background: transparent;
  outline: none;
}

.results-section .cl-read-more {
  justify-content: center;
}

.filter-section .todo-client-sel .selected-item::before {
  background-image: url('../../client_search/images/icons/black-search.svg');
}

.filter-section .todo-client-sel .selected-item::after {
  background-image: url('../../client_search/images/icons/down-arrow.svg');
}

.empty-state {
  text-align: center;
  margin-bottom: 0;
  padding-top: 20px;
}

.ajax-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}


@media (max-width: 767px) {

  #notification-section {
    max-width: 450px;
  }
}

@media (max-width: 992px){
  .results-description{
    grid-template-columns: 1fr 1fr 1fr;
  }


  .results-description {
    grid-template-columns: 1fr;
    /* grid-gap: 0; */
    padding-left: 0;
    padding-right: 0;
  }

  .results-description li h3 {
    min-height: auto;
  }

  .notification-tabs ul.tabs a {
    width: 50%;
  }

  .filter-section {
    margin-bottom: 16px;
  }

  .results-description li {
    border-bottom: 1px solid rgba(128, 128, 128, 0.4);
    padding-bottom: 12px;
    margin-bottom: 12px;
    margin: 0 auto;
    width: 100%;
  }

  .results-section .cl-read-more {
    margin-bottom: 0;
  }

  .results-description li:last-child {
    border: none;
  }

  .results-description li .recommend-image img {
    height: auto !important;
    object-fit: contain;
  }
}