html.theme-dark {
  color-scheme: dark;
}

html.theme-dark,
body.dark-category {
  --cat-bg: #131927;
  --cat-surface: #26324f;
  --cat-border: #3a4c78;
  --cat-text: #ebeef5;
  --cat-muted: #8498c4;
  background-color: var(--cat-bg);
  color: var(--cat-text);
}

body.dark-category .filter-modal .modal-content,
body.dark-category .filter-modal .modal-body,
body.dark-category .filter-modal .modal-footer,
body.dark-category .filter-modal .modal-header {
  background-color: var(--cat-surface);
  color: var(--cat-text);
  border-color: #303f63;
}

body.dark-category .sort-canvas,
body.dark-category .sort-canvas .offcanvas-body,
body.dark-category .sort-canvas .offcanvas-header {
  background-color: var(--cat-surface);
  color: var(--cat-text);
}

body.dark-category .modal-backdrop.show {
  opacity: 0.7;
}

body.dark-category .AZ-styled-select select {
  background-color: transparent;
  color: var(--cat-text);
}

body.dark-category .AZ-styled-select select option {
  background-color: var(--cat-surface);
  color: var(--cat-text);
}

body.dark-category .filter-wrapper .filter-link {
  background: var(--cat-surface);
  color: #ffffff;
  border-color: #99a9ce;
}

body.dark-category .bbbb {
  background: var(--cat-bg);
}

body.dark-category .category-load-sentinel,
body.dark-category .category-load-spinner,
body.dark-category .category-load-done {
  color: var(--cat-muted);
  font-family: "yekanBakh-Regular", sans-serif;
  font-size: 14px;
}

body.dark-category .range-wrapper .range-num {
  background-color: var(--cat-surface);
  border-color: var(--cat-border);
}

body.dark-category .filter-modal .quantity-field .number,
body.dark-category .filter-modal .range-wrapper .range__input {
  color: var(--cat-text);
}

body.dark-category .sort-canvas .AZ-radio-group label {
  color: var(--cat-text);
}

body.dark-category .sort-canvas .AZ-radio-group label:hover {
  color: #00c1ce;
}

/* Filter modal: dark theme */
body.dark-category .filter-modal {
  --bs-modal-bg: #26324f;
  --bs-modal-color: #ebeef5;
}

/* Desktop: centered dialog (not fullscreen) */
@media (min-width: 577px) {
  body.dark-category .filter-modal.modal-fullPage .modal-dialog {
    margin: 1.75rem auto;
    width: auto;
    max-width: 480px;
    min-height: auto;
    height: auto;
  }

  body.dark-category .filter-modal.modal-fullPage .modal-content {
    height: auto;
    min-height: auto;
    max-height: 85vh;
    border-radius: 8px;
    border: 0;
  }

  body.dark-category .filter-modal .modal-body {
    max-height: calc(85vh - 130px);
    overflow-y: auto;
  }
}

/* Mobile: fullscreen */
@media (max-width: 576px) {
  body.dark-category .filter-modal.modal-fullPage .modal-dialog {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    height: 100vh;
  }

  body.dark-category .filter-modal.modal-fullPage .modal-content {
    height: 100%;
    min-height: 100vh;
    border-radius: 0;
    border: 0;
  }

  body.dark-category .filter-modal .modal-body {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
}

body.dark-category .category-empty-filters {
  padding: 3rem 1rem;
}

body.dark-category .category-empty-filters__icon {
  font-size: 2.5rem;
  color: var(--text-muted, #888);
}

body.dark-category .category-empty-filters__title {
  color: var(--text-primary, #fff);
}

body.dark-category .category-empty-filters__text {
  color: var(--text-muted, #aaa);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}