/* Accordion Search Styles */

/* Search input wrapper with icons */
.accordion-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 46%;
}

/* Magnifier icon at start */
.accordion-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  pointer-events: none;
  z-index: 1;
}

/* Search input field */
.accordion-search-input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
  font-size: 1rem;
  border: 1px solid #565c65;
  border-radius: 4px;
  outline: none;
  background: #fff;
  max-width: 100%;
}

.accordion-search-input:focus {
  border-color: #005ea2;
  box-shadow: 0 0 0 2px #005ea2;
}

.accordion-search-input::placeholder {
  color: #71767a;
}

/* Clear button (X) at end - inside the input */
.accordion-search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #000;
  border-radius: 50%;
  z-index: 2;
}

.accordion-search-clear:hover {
  background: rgba(0, 0, 0, 0.1);
}

.accordion-search-clear:focus {
  outline: 2px solid #005ea2;
  outline-offset: 2px;
}

/* Show clear button when input has value */
.accordion-search-input-wrapper.has-value .accordion-search-clear {
  display: flex;
}

.accordion-search-results {
  text-align: center;
}

.accordion-search-results:empty,
.accordion-search-results:not(:has(.accordion-search-status:not(:empty))) {
  display: none;
}

.accordion-search-results:has(.accordion-search-status:not(:empty)) {
  margin-top: 0.75rem;
}

.accordion-search-status {
  display: inline-block;
  font-size: 0.875rem;
  color: #565c65;
  font-weight: 500;
}

/* Highlight styles */
mark {
  background-color: #ffc107;
  color: #000;
  padding: 0;
  margin: 0;
  border-radius: 2px;
  font-weight: 600;
  display: inline;
  line-height: inherit;
  vertical-align: baseline;
}

/* Hidden accordion items */
.accordion-search-no-match {
  display: none !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .accordion-search-container {
    max-width: 100%;
  }
}