/* One coordinated area, community, age and availability filter panel. */
.directory-filter-panel {
  padding: 24px;
  margin-bottom: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.directory-filter-panel[hidden], .directory-filter-panel [hidden] { display: none !important; }
.directory-filter-fields { display: grid; grid-template-columns: 1.15fr 1.4fr; gap: 28px; align-items: start; }
.directory-area-group, #listing-filters .filter-group { min-width: 0; display: grid; gap: 8px; }
.directory-filter-panel .filter-label { text-transform: none; letter-spacing: 0; font-size: 0.85rem; }
#listing-tabs { justify-content: flex-start; flex-wrap: nowrap; gap: 6px; margin: 0; }
#listing-tabs .listing-tab { justify-content: center; flex: 1; gap: 5px; min-height: 48px; padding: 8px; border-radius: var(--radius-md); font-size: 0.85rem; }
#listing-tabs .listing-tab__count { padding: 1px 5px; font-size: 0.72rem; color: var(--color-text-secondary); }
#listing-tabs .listing-tab.active { background: var(--color-primary-dark); }
#listing-tabs .listing-tab.active .listing-tab__count { color: #fff; }
#listing-tabs .listing-tab:focus-visible, .directory-filter-panel .filters-reset:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
#listing-filters.directory-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
#listing-filters .filter-select { min-height: 48px; font-size: 16px; box-shadow: none; }
.directory-filter-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.directory-filter-summary { margin: 0; color: var(--color-text); font-size: 0.85rem; font-weight: 600; }
.directory-filter-panel .filters-reset { padding: 8px 0 8px 12px; min-height: 44px; background: transparent; border: 0; color: var(--color-primary-accessible); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.directory-filter-panel .filters-reset:hover:not(:disabled) { text-decoration: underline; }
.directory-filter-panel .filters-reset:disabled { color: var(--color-text-secondary); opacity: 0.65; cursor: default; }
.directory-filter-help { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 0.8rem; }
.directory-community { margin-top: 22px; min-width: 0; }
.directory-community > .filter-label { margin: 0 0 8px; }
.directory-community__optional { font-weight: 400; }
.directory-community__row { display: flex; align-items: center; gap: 16px; }
.directory-community__picker { position: relative; flex: 0 0 38%; min-width: 0; }
.directory-community__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 18px; color: var(--color-text); font-size: 16px; text-align: left; box-shadow: none; cursor: pointer; }
.directory-community__trigger span { min-width: 0; overflow-wrap: anywhere; }
.directory-community__trigger img { flex: 0 0 18px; }
.directory-community__trigger[aria-expanded="true"] { border-color: var(--color-primary-dark); }
.directory-community__trigger[aria-expanded="true"] img { transform: rotate(180deg); }
.directory-community__chips { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.directory-community__chip { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid transparent; border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--color-text); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
.directory-community__chip span { min-width: 0; overflow-wrap: anywhere; }
.directory-community__chip img { flex: 0 0 16px; }
.directory-community__chip:hover { background: var(--color-primary-100); }
.directory-community__help { margin: 10px 0 0; color: var(--color-text-secondary); font-size: 0.85rem; line-height: 1.5; }
.directory-community__popover { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.directory-community__search { min-height: 44px; padding: 8px 12px; font-size: 16px; color: var(--color-text); box-shadow: none; }
.directory-community__options { margin-top: 8px; max-height: min(260px, 35vh); overflow-y: auto; overscroll-behavior: contain; }
.directory-community__option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px; border-radius: var(--radius-sm); color: var(--color-text); font-size: 0.9rem; line-height: 1.4; cursor: pointer; }
.directory-community__option:hover { background: var(--color-primary-50); }
.directory-community__option input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary-dark); cursor: pointer; }
.directory-community__option span { min-width: 0; overflow-wrap: anywhere; }
.directory-community__empty { margin: 12px 8px; color: var(--color-text-secondary); font-size: 0.85rem; }
.directory-community__actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.directory-community__actions button { min-height: 44px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-primary-accessible); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.directory-community__actions button:hover:not(:disabled) { background: var(--color-primary-50); }
.directory-community__actions button:disabled { color: var(--color-text-secondary); opacity: 0.65; cursor: default; }
.directory-community button:focus-visible, .directory-community input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
#listings-empty { padding: 32px 16px 40px; }
@media (max-width: 1100px) {
  .directory-filter-fields { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #listing-tabs { max-width: 480px; }
}
@media (max-width: 768px) {
  .directory-community__row { flex-direction: column; align-items: stretch; gap: 10px; }
  .directory-community__picker { flex: auto; }
  .directory-community__chips { flex: auto; }
}
@media (max-width: 480px) {
  .directory-filter-panel { padding: 16px; }
  #listing-filters.directory-filter-controls { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #listing-tabs { gap: 4px; }
  #listing-tabs .listing-tab { flex-direction: column; gap: 2px; min-width: 0; padding: 6px 4px; min-height: 56px; }
  .directory-filter-footer { gap: 8px; margin-top: 16px; }
}

#listings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.listing-card__featured {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid #dec99b;
  border-radius: var(--radius-full);
  color: #6d501b;
  background: #faf1d9;
  font-size: 0.75rem;
  font-weight: 700;
}

.listing-pagination {
  margin-top: var(--space-xl);
  text-align: center;
}

.listing-pagination[hidden] { display: none !important; }

.listing-pagination__summary {
  margin: 0 0 var(--space-md);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.listing-pagination__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.listing-pagination__button {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.listing-pagination__button[aria-current="page"] {
  background: var(--color-primary-dark);
  color: #fff;
  border-color: var(--color-primary-dark);
}

.listing-pagination__button:disabled { opacity: 0.45; cursor: default; }
.listing-pagination__button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.listing-pagination__ellipsis { padding: 0 0.2rem; }
#listings-heading { scroll-margin-top: 100px; }
#listings-heading:focus { outline: none; }

@media (max-width: 1024px) {
  #listings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  #listings-grid { grid-template-columns: minmax(0, 1fr); }
}