/* Shared filter-bar UI: the horizontal-scrolling row of dropdown filter buttons
   (search bar, .filter-select popups, sort dropdown, active-filter badges).
   Moved out of item-list-template.css so the frontpage/wishlist/locker/list pages
   and /heroes share one source of truth. Page sheets (item-list-template.css,
   heroes-template.css) depend on this handle and load AFTER it — page-specific
   overrides belong there, not here. Popup CONTENT styles stay page-specific
   (e.g. .hero-option / .filter-popup-list--collections / .hero-popup-bar live
   in item-list-template.css). */

.search-bar {
  position: relative; /* Ensures .clear-search is positioned relative to this container */
  width: 100%; /* Makes the search bar responsive */
  max-width: 250px; /* Optional: cap the width for larger screens */
}

.search-bar input {
  min-width: 200px;
  width: 100%; /* Takes up the full width of the parent */
  padding-right: 40px; /* Adds space for the clear-search button */
  font-size: 14px;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 20px;
  outline: none;
  transition: background-color 0.3s ease;
  text-transform: uppercase;
}

.search-bar input::placeholder {
  color: #aaa; /* Placeholder text color */
}

.search-bar input:focus {
  background-color: #444;

  /* Unset WP Astra default styles */
  border-color: unset !important;
  color: unset !important;
  border-style: unset !important;
  border-width: unset !important;
}

.clear-search {
  position: absolute;
  right: 5px; /* Keeps it within the bounds of the input */
  padding: 10px; /* Adjust padding for better alignment */
  top: 50%; /* Vertically centers the button */
  transform: translateY(-50%); /* Ensures proper centering */
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.clear-search img {
  height: 20px;
}

.clear-search:hover {
  /* Unset WP Astra default styles */
  background-color: unset !important;
  border-color: unset !important;
}

/* Hide button if not needed */
.clear-search[style*="display: none"] {
  display: none !important;
}

.filter-select,
.sort-by-button,
.filter-badge,
.clear-filters {
  position: relative;
  cursor: pointer;
  padding: 8px 15px 6px 15px;
  background: #333;
  border-radius: 20px;
  color: #fff;
  text-align: center;
  user-select: none;
  transition: background-color 0.2s;
  flex: none; /* Buttons retain their natural width */
  height: 100%;
  width: max-content;
}

.filter-select:hover,
.sort-by-button:hover,
.filter-badge:hover {
  background-color: #444;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between icon and text */
  background: #333; /* Background color */
  border-radius: 5px; /* Rounded corners */
  padding: 10px 20px 10px 10px;
  cursor: pointer;
  transition: background-color 0.2s; /* Smooth hover effect */
}

.filter-option:hover {
  background: #444; /* Slightly lighter background on hover */
}

.filter-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.filter-name {
  color: #fff; /* Text color */
  font-size: 14px; /* Match font size */
}

/* Container for Sort By */
.sort-by-container {
  position: relative; /* Required for its dropdown alignment */
  margin-left: auto; /* Push button to the right */
  /*min-width: 100px;*/
}

.sort-by-button:focus {
  background-color: #444;

  /* Unset WP Astra default styles */
  border-color: unset !important;
}

/* Dropdown Options */
.sort-options {
  display: none; /* Hidden by default */
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  gap: 10px; /* Space between options */
  white-space: nowrap;
}

/* Global Popup Specific Styling */
.sort-options.global-popup {
  display: grid !important; /* Display as grid */
  position: absolute; /* Ensure it is positioned absolutely */
  top: 100%; /* Position the popup below the button */
  background-color: #222; /* Popup background */
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 1000030; /* Ensure it is above all other elements */
  padding: 10px;
  overflow: hidden; /* Prevent content overflow */
  min-width: 200px; /* Ensure minimum width for content */
}

/* Sort Options */
.sort-options .sort-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background-color: #333;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.sort-options .sort-option:hover {
  background-color: #444;
}

/* Show Dropdown */
.sort-by-container.active .sort-options {
  display: grid; /* Default grid for non-global-popup dropdowns */
}

.active-filters-parent {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping to new lines */
  gap: 10px; /* Space between badges and button */
  align-items: center; /* Align items vertically */
}

.active-filters {
  display: flex;
  gap: 10px; /* Space between badges */
}

.filter-badge,
.clear-filters {
  margin-top: 10px;
}

.remove-filter img {
  height: 20px;
  margin-bottom: 3px;
}

.filter-badge .remove-filter {
  margin-left: 5px;
  transition: color 0.3s ease;
}

.clear-filters {
  color: #d91717;
  background: transparent;
  height: unset;
  border: 1px solid #d91717;
}

.clear-filters:hover {
  color: #fff;
  background-color: #d91717;
  border: 1px solid #d91717;
}

/* General container styling for scrollable rows */
.scrollable-row {
  display: flex;
  overflow-x: auto; /* Allow horizontal scrolling */
  overflow-y: hidden; /* Prevent vertical scrolling */
  gap: 10px; /* Space between items */
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
  scrollbar-width: auto; /* Wider scrollbar for non-WebKit browsers */
}

/* Custom scrollbar styling */
.scrollable-row::-webkit-scrollbar {
  height: 16px; /* Horizontal scrollbar height */
}

.scrollable-row::-webkit-scrollbar-thumb {
  background: #555; /* Scrollbar color */
  border-radius: 8px; /* Rounded corners */
  border: 4px solid transparent; /* Add spacing around the scrollbar thumb */
  background-clip: content-box; /* Prevent the border from overlapping the thumb */
}

.scrollable-row::-webkit-scrollbar-thumb:hover {
  background: #777; /* Hover color */
}

.scrollable-row::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 8px; /* Match the thumb's border-radius */
}

/* Disable scrollbar pointer events on mobile */
@media (pointer: coarse) {
  .scrollable-row {
    overflow-x: auto; /* Ensure touch dragging works */
    pointer-events: auto; /* Allow interaction with items inside */
  }

  .scrollable-row::-webkit-scrollbar {
    pointer-events: none; /* Disable interaction with the scrollbar */
  }
}

/* Filter rows never wrap — horizontal scroll only.
   (.item-type-filters only exists on the frontpage/list pages; harmless here.) */
.item-type-filters,
.filter-buttons,
.active-filters-parent {
  flex-wrap: nowrap; /* Prevent wrapping */
  overflow-x: auto; /* Horizontal scrolling only */
  overflow-y: hidden; /* Prevent vertical scrolling */
}

.filter-popup {
  position: absolute;
  top: calc(100% + 5px); /* Default positioning below the button */
  left: 0;
  background: #222;
  border: 1px solid #444;
  border-radius: 10px;
  display: none; /* Hidden by default */
  padding: 15px;
  z-index: 100;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  width: max-content;
  max-width: calc(100vw - 10px); /* never wider than the screen (long names on small phones) */
}

.filter-popup-list {
  text-align: left;
  display: grid;
  gap: 10px;
}

/* Search input inside a filter popup (heroes / collections) */
.popup-search {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-bottom: 12px;
}

.popup-search input {
  width: 100%;
  padding: 8px 15px;
  font-size: 14px;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 20px;
  outline: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.popup-search input::placeholder {
  color: #aaa;
}

.popup-search input:focus {
  background-color: #444;

  /* Unset WP Astra default styles */
  border-color: unset !important;
  color: unset !important;
  border-style: unset !important;
  border-width: unset !important;
}

.filter-select.active .filter-popup {
  display: block; /* Show the popup when active */
}

.global-popup {
  z-index: 1000030; /* Ensure it is on top of everything */
  background: #222;
  border: 1px solid #444;
  border-radius: 8px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.5);
  padding: 15px;
  text-align: center; /* Center content inside */
}

/* Default arrow styling */
.arrow {
  display: inline-block;
  margin-left: 5px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg);
  transition: transform 0.2s ease; /* Smooth rotation */
  margin-bottom: 4px;
}

/* Arrow pointing down */
.filter-select.active .arrow,
.sort-by-container.active .arrow {
  transform: rotate(225deg);
  margin-bottom: 0px;
}

/* Selected option inside a filter popup (used by /heroes; the frontpage shows
   active state via badges instead). */
.filter-option.selected {
  background: #555;
  box-shadow: inset 0 0 0 1px #888;
}

/* Options may be real <a> landing-page links (/heroes) — unset theme link styling. */
a.filter-option {
  text-decoration: none !important;
  color: #fff;
}

@media (max-width: 768px) {
  .item-type-filters,
  .filter-buttons,
  .active-filters-parent {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Narrower search on phones — leaves room for the filter buttons. The fixed
     flex basis stops the scrollable row from shrinking it any further (the
     input's desktop min-width used to be that guard). */
  .search-bar {
    flex: 0 0 170px;
    max-width: 170px;
  }

  .search-bar input {
    min-width: 0;
  }
}

/* Keyboard focus. The theme CSS unsets a:focus/button:focus outlines globally
   (style.css) and the filter controls are divs, so without these rules keyboard
   users get no focus indication at all. filter-popup.js supplies the tabindex/
   role/aria plumbing. :focus-visible keeps mouse clicks outline-free. */
.filter-select:focus-visible,
.sort-by-container:focus-visible,
.filter-option:focus-visible,
.sort-option:focus-visible,
.global-popup a:focus-visible,
.global-popup input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}