/* Filter/search layer extracted from the main stylesheet. */
#dir-service-wrapper .dir-tagbar:empty {
  display: none;
}

#dir-service-wrapper #dir-selected-tags .dir-selected-tag {
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1e3a8a;
}

#dir-service-wrapper #dir-selected-tags .dir-selected-tag-remove,
#dir-service-wrapper #dir-selected-tags .dir-selected-tag-remove-icon {
  color: inherit !important;
}

#dir-service-wrapper #dir-selected-tags .dir-selected-tag-remove {
  min-width: 2rem;
  min-height: 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  margin: -0.25rem -0.15rem -0.25rem 0;
  touch-action: manipulation;
}

#dir-service-wrapper #dir-selected-tags .dir-selected-tag-remove:hover {
  background: rgba(30, 58, 138, 0.08);
}

.dir-search-suggestions button.dir-sugg-item {
  font-size: 0.8em;
}

/* Robustness: WordPress can inject empty <p> tags into control labels. */
#dir-service-wrapper button.flex.w-full.items-center.justify-between.gap-3 {
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}

#dir-service-wrapper button.flex.w-full.items-center.justify-between.gap-3 p:empty {
  display: none !important;
}

#dir-service-wrapper button.flex.w-full.items-center.justify-between.gap-3 p {
  margin: 0 !important;
}

/* Search suggestions (type-ahead). */
.dir-search-suggestions .dir-sugg-meta {
  padding: 8px 10px;
  font-size: 12px;
  color: #475569;
}

.dir-search-suggestions .dir-sugg-head {
  padding: 6px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
}

.dir-search-suggestions .dir-sugg-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #0f172a;
}

.dir-search-suggestions .dir-sugg-item.is-hover,
.dir-search-suggestions .dir-sugg-item:hover {
  background: rgba(15, 23, 42, 0.04);
}

/* Keep dropdown panels inside the viewport on shorter/narrower layouts. */
#dir-service-wrapper .dir-multi {
  position: relative;
}

#dir-service-wrapper .dir-multi-panel {
  max-width: min(92vw, 320px);
}

#dir-service-wrapper .text-gray-500,
#dir-service-wrapper .text-gray-600,
#dir-service-wrapper .text-gray-700 {
  color: #334155 !important;
}

#dir-service-wrapper .dir-toolbar-filters {
  gap: 10px;
}

#dir-service-wrapper .dir-multi-option-disabled {
  color: #94a3b8 !important;
  cursor: not-allowed;
  opacity: 0.62;
}

#dir-service-wrapper .dir-multi-option-disabled input {
  cursor: not-allowed;
}

#dir-service-wrapper .dir-multi-option-disabled span {
  color: inherit !important;
}

#dir-service-wrapper .dir-toolbar-icon-btn {
  min-width: 2rem;
  min-height: 2rem;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
  justify-content: center;
}

#dir-service-wrapper #dir-sort-btn {
  min-width: 2rem;
  min-height: 2rem;
}

#dir-service-wrapper .dir-toolbar-icon-btn .dir-toolbar-btn-label {
  display: none;
}

/* Mid-width tablets / laptops:
   split the toolbar into two centered rows and slightly tighten the search
   field so Reset can stay on the same line more reliably. */
@media (min-width: 900px) and (max-width: 1460px) {
  #dir-service-wrapper .dir-toolbar {
    align-items: center;
    justify-content: center;
  }

  #dir-service-wrapper .dir-toolbar-filters {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    width: fit-content;
    margin-inline: auto;
    justify-content: center;
  }

  #dir-service-wrapper .dir-toolbar-actions {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }

  #dir-service-wrapper .dir-toolbar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
  }

  #dir-service-wrapper #dir-count-top {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
    line-height: 1.25;
  }

  #dir-service-wrapper .dir-toolbar-filters > .dir-multi {
    flex: 0 0 auto;
  }

  #dir-service-wrapper .dir-toolbar-filters > .relative {
    flex: 0 1 auto;
    width: auto;
  }

  #dir-service-wrapper #dir-filter-search {
    max-width: none !important;
  }

  #dir-service-wrapper .dir-toolbar-filters > .flex-1 {
    flex: 0 0 auto;
    width: auto;
  }

  #dir-service-wrapper .dir-toolbar-controls > .dir-view-toggle,
  #dir-service-wrapper .dir-toolbar-controls > .flex.items-center.gap-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  #dir-service-wrapper .dir-toolbar-controls > .flex.items-center.gap-2 span.text-xs.text-gray-500 {
    flex: 0 0 auto;
  }
}

@media (min-width: 1461px) {
  #dir-service-wrapper .dir-toolbar {
    align-items: center;
    justify-content: space-between;
  }

  #dir-service-wrapper .dir-toolbar-filters {
    flex: 0 1 auto;
    min-width: 0;
  }

  #dir-service-wrapper .dir-toolbar-actions {
    margin-left: auto;
    flex: 0 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }

  #dir-service-wrapper .dir-toolbar-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
  }

  #dir-service-wrapper #dir-count-top {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
  }
}

@media (max-width: 767px) {
  input#dir-filter-search {
    width: 100% !important;
    max-width: none !important;
  }

  #dir-service-wrapper .dir-toolbar {
    gap: 0.65rem;
    padding-bottom: 0.75rem;
  }

  #dir-service-wrapper .dir-toolbar-filters,
  #dir-service-wrapper .dir-toolbar-actions,
  #dir-service-wrapper .dir-toolbar-controls {
    width: 100%;
  }

  #dir-service-wrapper .dir-toolbar-filters {
    min-width: 0 !important;
    gap: 0.65rem;
  }

  #dir-service-wrapper .dir-toolbar-filters > .dir-multi,
  #dir-service-wrapper .dir-toolbar-filters > .relative {
    flex: 1 1 calc(50% - 0.325rem);
    min-width: 0;
  }

  #dir-service-wrapper .dir-toolbar-filters > .dir-multi:first-child {
    flex-basis: 100%;
  }

  #dir-service-wrapper .dir-toolbar-filters > .dir-multi:nth-child(2),
  #dir-service-wrapper .dir-toolbar-filters > .dir-multi:nth-child(3) {
    flex: 1 1 calc(50% - 0.325rem);
    max-width: calc(50% - 0.325rem);
  }

  #dir-service-wrapper .dir-toolbar-filters > .dir-toolbar-reset {
    flex: 0 0 auto;
    width: auto;
  }

  #dir-service-wrapper .dir-toolbar-filters > .relative {
    flex: 1 1 calc(100% - 88px - 0.65rem);
  }

  #dir-service-wrapper #dir-filter-reset {
    min-height: 2.9rem;
    padding: 0.65rem 1rem;
  }

  #dir-service-wrapper .dir-multi-btn,
  #dir-service-wrapper #dir-filter-search {
    min-height: 2.9rem;
  }

  #dir-service-wrapper .dir-multi-btn {
    width: 100%;
    max-width: none;
  }

  #dir-service-wrapper .dir-multi-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #dir-service-wrapper .dir-multi-panel {
    width: min(calc(100vw - 2rem), 320px) !important;
    max-width: min(calc(100vw - 2rem), 320px) !important;
    left: 0 !important;
    right: auto !important;
  }

  #dir-service-wrapper .dir-toolbar-filters > .dir-multi:nth-child(3n) .dir-multi-panel {
    left: auto !important;
    right: 0 !important;
  }

  #dir-service-wrapper .dir-multi-options {
    max-height: 48vh !important;
  }

  #dir-service-wrapper .dir-toolbar-actions {
    justify-content: center !important;
  }

  #dir-service-wrapper .dir-toolbar-controls {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "count view"
      "utility sort";
    justify-content: center;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.55rem;
  }

  #dir-service-wrapper #dir-count-top {
    width: auto;
    font-size: 0.92rem;
    line-height: 1.2;
    grid-area: count;
    white-space: nowrap;
  }

  #dir-service-wrapper .dir-view-toggle,
  #dir-service-wrapper .dir-toolbar-utility button,
  #dir-service-wrapper .dir-toolbar-sort button {
    flex: 0 0 auto;
  }

  #dir-service-wrapper .dir-view-toggle {
    grid-area: view;
  }

  #dir-service-wrapper .dir-toolbar-utility {
    grid-area: utility;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    justify-content: center;
    flex-wrap: nowrap;
    justify-self: center;
  }

  #dir-service-wrapper .dir-toolbar-sort {
    grid-area: sort;
    width: auto;
    justify-content: center;
    justify-self: center;
  }

  #dir-service-wrapper .dir-toolbar-controls > button,
  #dir-service-wrapper .dir-view-btn {
    min-height: 2.75rem;
    font-size: 0.76rem;
  }

  #dir-service-wrapper .dir-toolbar-utility button,
  #dir-service-wrapper .dir-toolbar-sort button {
    padding: 0.6rem 0.72rem !important;
  }

  #dir-service-wrapper .dir-toolbar-utility span.text-xs.text-gray-500 {
    order: 2;
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}