/* Custom Button-Style Radio Buttons for Woo Product Filter
 * Converts radio buttons to horizontally aligned buttons with scrolling
 * Includes responsive design for mobile devices
 */

/* Hide checkbox containers */
.wpfCheckbox {
  display: none !important;
}

/* Container for radio buttons - add horizontal scrolling */
.wpfFilterWrapper .wpfFilterContent {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 5px 0;
  margin: 0;
  scrollbar-width: thin;
  white-space: nowrap;
  /* Ensure horizontal scroll works on all devices */
  max-width: 100%;
  width: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* Force hardware acceleration for smoother scrolling */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.wpfFilterWrapper .wpfFilterContent::-webkit-scrollbar {
  height: 4px;
}

/* Track */
.wpfFilterWrapper .wpfFilterContent::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* Handle */
.wpfFilterWrapper .wpfFilterContent::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

/* Handle on hover */
.wpfFilterWrapper .wpfFilterContent::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* Hide the actual radio input */
.wpfFilterWrapper input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style for the radio button labels to appear as pill buttons */
.wpfFilterWrapper .wpfFilterContent label {
  display: inline-block;
  padding: 6px 16px;
  margin: 4px;
  background-color: #ff0000;
  border: 1px solid #ff0000;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  font-weight: normal;
  color: #fff;
  /* Make sure tap targets are large enough for mobile */
  min-height: 24px;
  /* Ensure elements don't shrink */
  flex: 0 0 auto;
}

/* Style for hover state */
.wpfFilterWrapper .wpfFilterContent label:hover {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* Style for selected/checked state */
.wpfFilterWrapper .wpfFilterContent input[type=radio]:checked + label {
  background-color: #222;
  color: white;
  border-color: #222;
}

/* Add count styling */
.wpfFilterWrapper .wpfFilterContent .wpfCount {
  display: inline-block;
  margin-left: 5px;
  font-size: 0.9em;
  opacity: 0.7;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
  .wpfFilterWrapper .wpfFilterContent {
    /* Keep the scrollbar for mobile */
    padding: 3px 0;
    /* Remove any potential max-width limitations on mobile */
    max-width: 100vw;
    /* Make sure no other properties are limiting scroll */
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .wpfFilterWrapper .wpfFilterContent label {
    padding: 5px 14px;
    font-size: 12px;
    margin: 3px;
    /* Better touch targets for mobile */
    min-height: 30px;
    line-height: 20px;
  }
}

/* Special styling for elements in lists that should appear as buttons */
.wpfFilterWrapper[data-filter-type="wpfCategory"] .wpfFilterContent ul,
.wpfFilterWrapper[data-filter-type="wpfAttribute"] .wpfFilterContent ul,
.wpfFilterWrapper[data-filter-type="wpfRating"] .wpfFilterContent ul,
.wpfFilterWrapper[data-filter-type="wpfPriceRange"] .wpfFilterContent ul,
.wpfFilterWrapper[data-filter-type="wpfSortBy"] .wpfFilterContent ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Mobile scroll fixes */
  width: 100%;
  flex: 1 1 auto;
}

.wpfFilterWrapper[data-filter-type="wpfCategory"] .wpfFilterContent ul li,
.wpfFilterWrapper[data-filter-type="wpfAttribute"] .wpfFilterContent ul li,
.wpfFilterWrapper[data-filter-type="wpfRating"] .wpfFilterContent ul li,
.wpfFilterWrapper[data-filter-type="wpfPriceRange"] .wpfFilterContent ul li,
.wpfFilterWrapper[data-filter-type="wpfSortBy"] .wpfFilterContent ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style-type: none;
  white-space: nowrap;
  /* Prevent items from shrinking */
  flex: 0 0 auto;
}

/* Remove default list styling */
.wpfFilterWrapper .wpfFilterContent ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Ensure lists scroll properly */
  width: 100%;
}

/* Override potential conflicts with theme */
.wpfFilterWrapper .wpfFilterContent ul li:before {
  content: none !important;
}

/* Add horizontal scroll indicators to show there's more content */
.wpfFilterWrapper .wpfFilterContent:after {
  content: '';
  padding-right: 10px; /* Added more padding for better scrolling */
  flex: 0 0 auto;
}

.wpfFilterWrapper .wpfFilterContent:before {
  content: '';
  padding-left: 5px;
  flex: 0 0 auto;
}

/* Add fading effect to indicate scrolling */
.wpfFilterWrapper {
  position: relative;
  /* Make sure container doesn't limit width */
  max-width: 100%;
  width: 100%;
}

.wpfFilterWrapper:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  pointer-events: none;
  z-index: 1;
}

.wpfFilterWrapper:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 5px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  pointer-events: none;
  z-index: 1;
}

/* Fix for iOS and Android specific issues */
@media (pointer: coarse) {
  .wpfFilterWrapper .wpfFilterContent {
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Ensure parent containers don't prevent scrolling */
  .wpfFilterWrapper {
    overflow: visible !important;
  }
}