/* =============================================
   Blog Filters — Mobile Category Dropdown & Sort
   ============================================= */

/* ---------- Flex Container ---------- */
.blog-filters-container {
  display: flex;
  gap: var(--space-m, 12px);
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .blog-filters-container {
    flex-wrap: nowrap;
  }
}

/* ---------- Dropdown wrappers ---------- */
.blog-mobile-cat-dropdown,
.blog-sort-dropdown {
  display: block;
  flex: 1;
  /* Equal width on mobile */
}

/* Hide native pills on mobile securely */
@media (max-width: 767px) {
  .blog-cat-filter {
    display: none !important;
  }

  #desktop-sort {
    display: none !important;
  }
}

/* Sort is always visible */
.blog-sort-dropdown {
  display: block;
}

@media (min-width: 768px) {

  /* On desktop, container holds pills + sort dropdown */
  .blog-filters-container {
    gap: 24px;
    width: 100%;
  }

  /* Hide the mobile category dropdown securely on desktop */
  .blog-mobile-cat-dropdown {
    display: none !important;
  }

  /* Hide the explicit mobile sort container on desktop */
  #mobile-sort {
    display: none !important;
  }

  .blog-sort-dropdown {
    flex: none;
    /* min-width: 200px; */
    margin-left: auto;
    /* Push to right */
  }

  .blog-cat-filter {
    flex: 1;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ---------- Common Custom Select Override for Blog Filters ---------- */

/* Custom Select Wrapper adjustment for blog context */
.blog-sort-dropdown.custom-select-wrapper,
.blog-mobile-cat-dropdown.custom-select-wrapper {
  margin: 0;
  width: auto;
}

/* Base override to ensure padding is uniform */
.blog-sort-dropdown .custom-select,
.blog-mobile-cat-dropdown .custom-select {
  padding: 17px 12px;
  gap: 16px;
}

.blog-sort-dropdown .custom-select-trigger,
.blog-mobile-cat-dropdown .custom-select-trigger {
  padding: 0;
}

.blog-sort-dropdown .custom-select-trigger {
  line-height: 1.5em;
}

/* ---------- Ported Saved Search Styles (Since we are outside a <form>) ---------- */
.blog-sort-dropdown li.options-item-save-search input[type=radio],
.blog-mobile-cat-dropdown li.options-item-save-search input[type=radio] {
  display: none;
}

.blog-sort-dropdown li.options-item-save-search,
.blog-mobile-cat-dropdown li.options-item-save-search {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: var(--space-lg);
  background-color: var(--bg-secondary);
  border-radius: 8px;
  /* margin-bottom: 8px; */
  cursor: pointer;
}

.blog-sort-dropdown li.options-item-save-search:last-child,
.blog-mobile-cat-dropdown li.options-item-save-search:last-child {
  margin-bottom: 0;
}

.blog-sort-dropdown li.options-item-save-search label,
.blog-mobile-cat-dropdown li.options-item-save-search label {
  font-size: var(--text-s);
  font-style: normal;
  font-weight: 400;
  line-height: 1.14em;
  color: var(--button-seconddary-fg);
  cursor: pointer;
  margin: 0;
}

.blog-sort-dropdown li.options-item-save-search:has(input:checked),
.blog-mobile-cat-dropdown li.options-item-save-search:has(input:checked) {
  background-color: var(--button-secondary-color-bg_hover);
}

.blog-sort-dropdown li.options-item-save-search:has(input:checked) label,
.blog-mobile-cat-dropdown li.options-item-save-search:has(input:checked) label {
  color: var(--button-secondary-color-fg);
}