/**
 * Alpine Horizontal Filter System CSS
 * Modern glassmorphism design with enhanced functionality
 * Version 2.1.0
 */

/* ===== CSS Variables ===== */
:root {
  --alpine-filter-primary: #e0383f;
  --alpine-filter-secondary: #1B1B1B;
  --alpine-filter-bg: rgba(255, 255, 255, 0.95);
  --alpine-filter-bg-glass: rgba(255, 255, 255, 0.85);
  --alpine-filter-border: rgba(255, 255, 255, 0.2);
  --alpine-filter-shadow: 0 8px 32px rgb(203 203 203 / 37%);
  --alpine-filter-shadow-hover: 0 12px 40px rgba(31, 38, 135, 0.5);
  --alpine-filter-radius: 16px;
  --alpine-filter-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  --alpine-filter-text: #333;
  --alpine-filter-text-light: #666;
  --alpine-filter-text-lighter: #999;
  --alpine-filter-success: #28a745;
  --alpine-filter-warning: #ffc107;
  --alpine-filter-danger: #dc3545;
  --alpine-filter-z-dropdown: 1000;
  --alpine-filter-z-mobile: 2000;
}

/* ===== Main Container ===== */
.alpine-horizontal-filter {
  position: sticky;
  top: 0px;
  z-index: 999999;
  background: var(--alpine-filter-bg-glass);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--alpine-filter-border);
  box-shadow: var(--alpine-filter-shadow);
  transition: var(--alpine-filter-transition);
  margin-bottom: 2rem;
}

.alpine-horizontal-filter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  pointer-events: none;
}

/* ===== Filter Bar ===== */
.alpine-filter-bar {
  padding: 0.6rem 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: fit-content;
  margin: auto;
  gap: 60px;
}

.alpine-filter-main {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* ===== Search Section ===== */
.alpine-filter-section[data-filter-type="search"] {
  position: relative;
  flex: 1;
  min-width: 210px;
  max-width: 310px;
}

.alpine-filter-search {
  width: 100%;
  padding: 0.55rem 1rem 0.55rem 1rem;
  padding-inline-end: 3rem;
  border: 1px solid transparent;
  border-radius: var(--alpine-filter-radius);
  background: var(--alpine-filter-bg);
  backdrop-filter: blur(10px);
  color: var(--alpine-filter-text);
  font-size: 0.9rem;
  transition: var(--alpine-filter-transition);
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
}

.alpine-filter-search:focus {
  outline: none;
  border-color: var(--alpine-filter-primary);
  box-shadow: 0 0 0 3px rgba(224, 25, 46, 0.1), 0 8px 24px rgba(0, 0, 0, 0.15);
}

.alpine-filter-search::placeholder {
  color: var(--alpine-filter-text-lighter);
  font-weight: 400;
}

.alpine-filter-section[data-filter-type="search"] i {
  position: absolute;
  inset-inline-end: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--alpine-filter-text-light);
  font-size: 1.1rem;
  transition: var(--alpine-filter-transition);
  z-index: 10;
}

.alpine-filter-search:focus + i {
  color: var(--alpine-filter-primary);
}

/* ===== Filter Sections ===== */
.alpine-filter-section {
  position: relative;
  display: flex;
  align-items: center;
}

.alpine-filter-section:not([data-filter-type="search"]) {
  min-width: auto;
}

/* ===== Filter Toggle Buttons ===== */
.alpine-filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--alpine-filter-radius);
  background: var(--alpine-filter-bg);
  backdrop-filter: blur(10px);
  color: var(--alpine-filter-text);
  font-weight: 400;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  /* overflow: hidden; */
}

.alpine-filter-toggle::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); */
  transition: inset-inline-start 0.6s;
}

.alpine-filter-toggle:hover {
  /* transform: translateY(-2px); */
  /* box-shadow: var(--alpine-filter-shadow-hover); */
  border-color: var(--alpine-filter-primary);
}

.alpine-filter-toggle:hover::before {
  inset-inline-start: 100%;
}

.alpine-filter-toggle:active {
  transform: translateY(0);
}

.alpine-filter-section.open .alpine-filter-toggle {
  background: var(--alpine-filter-primary);
  color: white;
  border-color: var(--alpine-filter-primary);
  outline: 0;
}

.alpine-filter-section.has-selections .alpine-filter-toggle {
  background: linear-gradient(135deg, var(--alpine-filter-primary), #e0383f);
  color: white;
  border-color: var(--alpine-filter-primary);
  position: relative;
}

.alpine-filter-section.has-selections .alpine-filter-toggle::after {
  content: attr(data-count);
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  min-width: 20px;
  height: 20px;
  background: var(--alpine-filter-warning);
  color: var(--alpine-filter-secondary);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.alpine-filter-toggle i:first-child {
  font-size: 1rem;
  opacity: 0.9;
}

.alpine-filter-toggle i:last-child {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.alpine-filter-section.open .alpine-filter-toggle i:last-child {
  transform: rotate(180deg);
}

/* ===== Filter Dropdown ===== */
.alpine-filter-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  inset-inline-start: 0;
  min-width: 370px;
  max-width: 450px;
  background: var(--alpine-filter-bg);
  backdrop-filter: blur(25px);
  border: 1px solid var(--alpine-filter-border);
  border-radius: var(--alpine-filter-radius);
  box-shadow: var(--alpine-filter-shadow-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-15px) scale(0.95);
  transition: var(--alpine-filter-transition);
  z-index: var(--alpine-filter-z-dropdown);
  max-height: 450px;
  overflow: hidden;
  pointer-events: none;
}

.alpine-filter-section.open .alpine-filter-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.alpine-filter-dropdown::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  pointer-events: none;
  border-radius: var(--alpine-filter-radius);
}

.alpine-filter-dropdown-header {
  padding: 0.25rem 1.5rem 0rem;
  border-bottom: 1px solid rgb(229 229 229 / 72%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.alpine-filter-dropdown-title {
  font-weight: 700;
  color: var(--alpine-filter-secondary);
  margin: 0;
  font-size: 1.1rem;
}

.alpine-filter-dropdown-content {
  padding: 0.5rem 1rem 1.5rem;
  /* padding-inline-start: 2.5rem; */
  max-height: 350px;
  overflow-y: auto;
  position: relative;
  z-index: 2;
}

.alpine-filter-dropdown-content::-webkit-scrollbar {
  width: 6px;
}

.alpine-filter-dropdown-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.alpine-filter-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--alpine-filter-primary);
  border-radius: 3px;
}

/* ===== Filter Options ===== */
.alpine-filter-options {
  display: grid;
  gap: 0.25rem;
}

.alpine-filter-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
  border: 2px solid transparent;
  /* background: rgba(255, 255, 255, 0.3); */
  /* backdrop-filter: blur(5px); */
}

.alpine-filter-option:hover {
  /* background: rgba(255, 255, 255, 0.6); */
  color: var(--alpine-filter-primary);
  /* transform: translateX(5px); */
}

.alpine-filter-option.selected {
}

.alpine-filter-option-check {
  width: 20px;
  height: 20px;
  border: 2px solid rgb(222 222 222);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--alpine-filter-transition);
  background: rgba(255, 255, 255, 0.5);
}

.alpine-filter-option.selected .alpine-filter-option-check {
  background: var(--alpine-filter-primary);
  color: white;
  border-color: var(--alpine-filter-primary);
}

.alpine-filter-option-check i {
  font-size: 0.75rem;
  opacity: 0;
  transition: var(--alpine-filter-transition);
}

.alpine-filter-option.selected .alpine-filter-option-check i {
  opacity: 1;
}

.alpine-filter-option-info {
  flex: 1;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  gap: 10px;
}

.alpine-filter-option-name {
  font-weight: 400;
  font-size: 0.8rem;
}

.alpine-filter-option-count {
  font-size: 0.75rem;
  opacity: 0.8;
  font-weight: 500;
}

/* ===== Color Swatches ===== */
.alpine-filter-options.colors {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
}

.alpine-filter-option.color {
  flex-direction: column;
  text-align: center;
  padding: 0.5rem;
  gap: 0.25rem;
}

.alpine-filter-option-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color, #ccc);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: var(--alpine-filter-transition);
}

.alpine-filter-option.color:hover .alpine-filter-option-swatch {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.alpine-filter-option.color.selected .alpine-filter-option-swatch {
  border-color: var(--alpine-filter-primary);
  box-shadow: 0 0 0 3px rgba(224, 25, 46, 0.3);
}

/* ===== Hierarchical Categories ===== */
.alpine-filter-options.hierarchical .alpine-filter-option {
  margin-inline-start: calc(var(--depth, 0) * 1.5rem);
  position: relative;
}

.alpine-filter-options.hierarchical .alpine-filter-option::before {
  content: '';
  position: absolute;
  inset-inline-start: -1rem;
  top: 50%;
  width: 8px;
  height: 2px;
  background: var(--alpine-filter-text-lighter);
  display: none;
}

/* ===== Price Range ===== */
.alpine-price-range {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.alpine-price-inputs {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.alpine-price-input {
  flex: 1;
  padding: 0.75rem;
  border: 2px solid var(--alpine-filter-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--alpine-filter-text);
  font-size: 0.95rem;
  transition: var(--alpine-filter-transition);
}

.alpine-price-input:focus {
  outline: none;
  border-color: var(--alpine-filter-primary);
  box-shadow: 0 0 0 3px rgba(224, 25, 46, 0.1);
}

.alpine-price-inputs span {
  color: var(--alpine-filter-text-light);
  font-weight: 600;
}

.alpine-price-info {
  text-align: center;
}

.alpine-price-info small {
  color: var(--alpine-filter-text-light);
  font-size: 0.85rem;
}

/* ===== Filter Actions ===== */
.alpine-filter-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-inline-start: auto;
}

/* ===== Sort Dropdown ===== */
.alpine-filter-sort {
  padding: 0.55rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--alpine-filter-radius);
  background: var(--alpine-filter-bg);
  backdrop-filter: blur(10px);
  color: var(--alpine-filter-text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.alpine-filter-sort:focus {
  outline: none;
  border-color: var(--alpine-filter-primary);
  box-shadow: 0 0 0 3px rgba(224, 25, 46, 0.1);
}

.alpine-filter-sort:hover {
  /* transform: translateY(-1px); */
  /* box-shadow: var(--alpine-filter-shadow-hover); */
}

/* ===== Clear Button ===== */
.alpine-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--alpine-filter-radius);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
  text-decoration: none;
}

.alpine-filter-btn-clear {
  background: linear-gradient(135deg, var(--alpine-filter-danger), #ff4757);
  color: white;
  border-color: var(--alpine-filter-danger);
  box-shadow: 0 4px 16px rgba(220, 53, 69, 0.3);
}

.alpine-filter-btn-clear:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(220, 53, 69, 0.4);
  text-decoration: none;
  color: white;
}

.alpine-filter-btn-clear:active {
  transform: translateY(0);
}

/* ===== Active Filters Display ===== */
.alpine-active-filters {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--alpine-filter-border);
  display: none;
}

.alpine-active-filters.has-filters {
  display: block;
}

.alpine-active-filters-title {
  font-weight: 700;
  color: var(--alpine-filter-secondary);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alpine-active-filters-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.alpine-active-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, var(--alpine-filter-primary), #ff2d4a);
  color: white;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(224, 25, 46, 0.3);
  transition: var(--alpine-filter-transition);
}

.alpine-active-filter:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(224, 25, 46, 0.4);
}

.alpine-active-filter-icon {
  font-size: 0.8rem;
  opacity: 0.9;
}

.alpine-active-filter-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
}

.alpine-active-filter-remove:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.alpine-active-filter-remove i {
  font-size: 0.7rem;
}

/* ===== Loading State ===== */
.alpine-horizontal-filter.loading {
  position: relative;
}

.alpine-horizontal-filter.loading::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9998;
  animation: alpine-fade-in 0.3s ease;
}

.alpine-horizontal-filter.loading::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border: 4px solid rgba(224, 25, 46, 0.2);
  border-top: 4px solid var(--alpine-filter-primary);
  border-radius: 50%;
  animation: alpine-spin 1s linear infinite;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.alpine-horizontal-filter.loading .alpine-loading-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 50px));
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  z-index: 9999;
  animation: alpine-fade-in 0.5s ease 0.2s both;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.alpine-horizontal-filter.loading .alpine-loading-dots {
  display: inline-block;
  position: relative;
  width: 20px;
  margin-right: 4px;
}

.alpine-horizontal-filter.loading .alpine-loading-dots::after {
  content: '';
  animation: alpine-loading-dots 1.5s infinite;
}

@keyframes alpine-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes alpine-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes alpine-loading-dots {
  0%, 20% {
    content: '.';
  }
  40% {
    content: '..';
  }
  60%, 100% {
    content: '...';
  }
}

/* ===== Mobile Filter FAB (Floating Action Button) ===== */
.alpine-mobile-filter-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999999;
  display: none;
  /* Mobile fixed positioning improvements */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  left: 20px;
  margin: auto;
  display: none;
}

@media (max-width: 768px) {
  .alpine-mobile-filter-fab {
    display: table;
  }
  
  /* Hide horizontal filter on mobile */
  .alpine-horizontal-filter {
    display: none;
  }
  
  /* Hide all color filter elements on mobile */
  .alpine-filter-section[data-filter-type="colors"],
  .alpine-filter-options.colors,
  .alpine-color-filter,
  .alpine-filter-option.color,
  .alpine-color-option,
  .color-swatch,
  .color-image-swatch,
  .color-placeholder,
  .color-name,
  .alpine-mobile-color-swatch {
    display: none !important;
  }
}

.alpine-mobile-filter-btn {
  background: var(--alpine-filter-primary);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(224, 25, 46, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  min-width: 80px;
}

.alpine-mobile-filter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(224, 25, 46, 0.4);
}

.alpine-mobile-filter-btn .alpine-filter-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #fff;
  color: var(--alpine-filter-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===== Mobile Filter Modal (Side Panel) ===== */
.alpine-mobile-filter-modal {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  z-index: 9999999;
  background: var(--alpine-filter-bg-glass);
  backdrop-filter: blur(20px);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  transform: translateZ(0);
  transition: right 0.35s ease-in-out;
  border-left: 1px solid var(--alpine-filter-border);
}

html[dir="ltr"] .alpine-mobile-filter-modal {
  right: auto;
  left: calc(-1 * 400px);
  transition: left 0.35s ease-in-out;
  border-left: none;
  border-right: 1px solid var(--alpine-filter-border);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.15);
}

.alpine-mobile-filter-modal.active {
  right: 0;
}

html[dir="ltr"] .alpine-mobile-filter-modal.active {
  left: 0;
}

.alpine-mobile-filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.alpine-mobile-filter-modal.active + .alpine-mobile-filter-overlay {
  opacity: 1;
  visibility: visible;
}

.alpine-mobile-filter-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
}

/* ===== Mobile Filter Header ===== */
.alpine-mobile-filter-header {
  background: var(--alpine-filter-bg);
  color: var(--alpine-dark-text, #333);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border-bottom: 1px solid var(--alpine-border-color, #ddd); */
  flex-shrink: 0;
}

.alpine-mobile-filter-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.alpine-mobile-filter-close {
  background: none;
  border: none;
  color: var(--alpine-text-secondary, #555);
  font-size: 28px;
  padding: 5px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alpine-mobile-filter-close:hover {
  color: var(--alpine-red, #e0192e);
  background: rgba(224, 25, 46, 0.1);
  transform: scale(1.1);
}

/* ===== Mobile Filter Content ===== */
.alpine-mobile-filter-content {
  flex: 1;
  overflow-y: auto;
  background: white;
  -webkit-overflow-scrolling: touch;
}

/* ===== Mobile Filter Footer ===== */
.alpine-mobile-filter-footer {
  background: var(--alpine-filter-bg);
  padding: 15px 20px;
  border-top: 1px solid var(--alpine-border-color, #ddd);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.alpine-mobile-clear {
  flex: 1;
  background: transparent;
  color: var(--alpine-filter-text);
  border: 1px solid #ddd;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.alpine-mobile-clear:hover {
  background: #e9ecef;
  color: var(--alpine-filter-text);
}

.alpine-mobile-apply {
  flex: 2;
  background: var(--alpine-filter-primary);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.alpine-mobile-apply:hover {
  background: #c01729;
  transform: translateY(-1px);
}

.alpine-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ===== Mobile Filter Sections & Options (Compact) ===== */
@media (max-width: 768px) {
  .alpine-mobile-filter-section {
    margin: 0;
    padding: 15px 20px;
    border-bottom: 1px solid var(--alpine-light-grey, #f5f5f5);
    background: white;
  }
  
  .alpine-mobile-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--alpine-dark-text, #333);
    margin-bottom: 15px;
  }
  
  .alpine-mobile-section-title i {
    font-size: 14px;
    color: var(--alpine-text-secondary, #555);
  }
  
  .alpine-mobile-badge {
    background: var(--alpine-filter-primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    margin-left: auto;
  }
  
  .alpine-mobile-section-content {
    padding-left: 0;
  }
  
  .alpine-mobile-options {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  .alpine-mobile-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: auto;
    border-bottom: 1px solid var(--alpine-light-grey, #f5f5f5);
  }
  
  .alpine-mobile-option:last-child {
    border-bottom: none;
  }
  
  .alpine-mobile-option:hover {
    /* background: rgba(224, 25, 46, 0.05); */
  }
  
  .alpine-mobile-option:active {
    background: rgba(224, 25, 46, 0.1);
    transform: scale(0.98);
  }
  
  .alpine-mobile-option input[type="checkbox"] {
    display: none;
  }
  
  .alpine-mobile-option-check {
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-size: 10px;
  }
  
  .alpine-mobile-option input:checked + .alpine-mobile-option-check {
    background: var(--alpine-filter-primary);
    border-color: var(--alpine-filter-primary);
    color: opa;
  }
  
  .alpine-mobile-option-info {
    flex: 1;
    min-width: 0;
  }
  
  .alpine-mobile-option-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--alpine-dark-text, #333);
    line-height: 1.3;
    margin-bottom: 2px;
  }
  
  .alpine-mobile-option-count {
    font-size: 12px;
    color: var(--alpine-text-secondary, #555);
    font-weight: 400;
  }
  
  /* Mobile Colors (Compact Grid) */
  .alpine-mobile-colors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
  }
  
  .alpine-mobile-color {
    flex-direction: column;
    text-align: center;
    padding: 12px 8px;
    min-height: 70px;
  }
  
  .alpine-mobile-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    transition: all 0.2s ease;
    color: transparent;
    font-size: 10px;
  }
  
  .alpine-mobile-color input:checked + .alpine-mobile-color-swatch {
    border-color: var(--alpine-filter-primary);
    color: white;
    text-shadow: 0 0 2px rgba(0,0,0,0.3);
    transform: scale(1.1);
  }
  
  /* Mobile Input/Select Styling */
  .alpine-mobile-input,
  .alpine-mobile-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 14px;
    background: white;
    transition: border-color 0.2s ease;
  }
  
  .alpine-mobile-input:focus,
  .alpine-mobile-select:focus {
    outline: none;
    border-color: transparent;
  }
  
  /* Reduce section spacing on very small screens */
  @media (max-width: 480px) {
    .alpine-mobile-filter-content {
      padding: 16px;
    }
    
    .alpine-mobile-filter-section {
      padding: 12px 0;
    }
    
    .alpine-mobile-option {
      min-height: 44px;
      padding: 10px;
      gap: 10px;
    }
    
    .alpine-mobile-option-name {
      font-size: 13px;
    }
  }
}

/* ===== Old Mobile Filter Drawer (for fallback) ===== */
.alpine-mobile-filter-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Debug border to make sure it's visible */
  border: 3px solid red;
}

.alpine-mobile-filter-drawer.open {
  transform: translateY(0);
}

.alpine-mobile-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1.25rem;
  background: var(--alpine-filter-primary);
  color: white;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
  flex-shrink: 0;
}

.alpine-mobile-filter-title {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
}

.alpine-mobile-filter-close {
  width: 40px;
  height: 40px;
  border: none;
  /* background: rgba(255, 255, 255, 0.2); */
  color: white;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  inset-inline-end: -15px;
  position: relative;
}

.alpine-mobile-filter-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.alpine-mobile-filter-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.alpine-mobile-filter-section {
  border-bottom: 1px solid #f0f0f0;
}

.alpine-mobile-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--alpine-filter-text);
  margin: 0;
  padding: 1.05rem 1.25rem 1.05rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fafafa;
  border-bottom: 1px solid #eee;
}

.alpine-mobile-section-title i {
  color: var(--alpine-filter-primary);
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.alpine-mobile-badge {
  background: var(--alpine-filter-primary);
  color: white;
  border-radius: 12px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-inline-start: auto;
}

.alpine-mobile-section-content {
  padding: 0;
}

/* Mobile Filter Options */
.alpine-mobile-options {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

.alpine-mobile-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
  font-size: 1rem;
  min-height: 56px; /* Touch-friendly height */
}

.alpine-mobile-option:hover {
  /* border-color: var(--alpine-filter-primary); */
  background: rgba(224, 25, 46, 0.02);
}

.alpine-mobile-option.selected {
  border-color: var(--alpine-filter-primary);
  background: rgba(224, 25, 46, 0.05);
}

.alpine-mobile-option input[type="checkbox"] {
  display: none;
}

.alpine-mobile-option-check {
  width: 24px;
  height: 24px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--alpine-filter-transition);
  flex-shrink: 0;
}

.alpine-mobile-option.selected .alpine-mobile-option-check {
  border-color: var(--alpine-filter-primary);
  background: var(--alpine-filter-primary);
  color: white;
}

.alpine-mobile-option-check i {
  font-size: 1.3rem;
  opacity: 0;
  transform: scale(0.5);
  transition: var(--alpine-filter-transition);
}

.alpine-mobile-option.selected .alpine-mobile-option-check i {
  opacity: 1;
  transform: scale(1);
}

.alpine-mobile-option-info {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 0.45rem;
  align-items: center;
}

.alpine-mobile-option-name {
  font-weight: 500;
  color: var(--alpine-filter-text);
  line-height: 1.3;
}

.alpine-mobile-option-count {
  font-size: 0.85rem;
  color: var(--alpine-filter-text-secondary);
  font-weight: 400;
}

/* Mobile Category Hierarchy */
.alpine-mobile-category-wrapper {
  margin-bottom: 0.5rem;
}

.alpine-mobile-category-wrapper.has-children .alpine-mobile-option {
  position: relative;
}

.alpine-mobile-option-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* background: rgba(224, 25, 46, 0.1); */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
  flex-shrink: 0;
}

.alpine-mobile-option-toggle:hover {
  background: rgba(224, 25, 46, 0.2);
}

.alpine-mobile-option-toggle i {
  font-size: 0.8rem;
  color: var(--alpine-filter-primary);
  transition: transform 0.3s ease;
}

.alpine-mobile-category-wrapper.expanded .alpine-mobile-option-toggle i {
  transform: rotate(180deg);
}

.alpine-mobile-subcategories {
  margin-top: 0.5rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid rgba(224, 25, 46, 0.2);
  display: none;
}

.alpine-mobile-category-wrapper.expanded .alpine-mobile-subcategories {
  display: block;
}

/* Mobile Breadcrumbs */
.alpine-mobile-breadcrumbs {
  background: rgba(224, 25, 46, 0.05);
  border-radius: 8px;
  padding: 0.875rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(224, 25, 46, 0.1);
  font-size: 0.9rem;
  line-height: 1.4;
}

.alpine-mobile-breadcrumbs i {
  color: var(--alpine-filter-primary);
  margin-inline-end: 0.5rem;
}

.breadcrumb-link {
  color: var(--alpine-filter-primary);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb-link:hover {
  text-decoration: underline;
}

.breadcrumb-current {
  color: var(--alpine-filter-text);
  font-weight: 600;
}

.breadcrumb-separator {
  margin: 0 0.4rem;
  color: var(--alpine-filter-text-secondary);
}

/* Mobile Select and Input Styling */
.alpine-mobile-input,
.alpine-mobile-select {
  width: 100%;
  padding: 0.875rem;
  border: 1px solid #d1d5db;
  /* border-radius: 8px; */
  font-size: 1rem;
  background: white;
  transition: var(--alpine-filter-transition);
  min-height: 56px; /* Touch-friendly */
}

.alpine-mobile-input:focus,
.alpine-mobile-select:focus {
  outline: none;
  /* border-color: var(--alpine-filter-primary); */
  box-shadow: inset 3px 3px 13px -6px #555555a8;
}

/* Mobile Trigger Button */
.alpine-mobile-filter-trigger {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--alpine-filter-primary);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
  box-shadow: 0 4px 20px rgba(224, 25, 46, 0.3);
  display: none; /* Hidden by default, shown on mobile via media query */
  align-items: center;
  gap: 0.5rem;
  min-height: 56px;
}

.alpine-mobile-filter-trigger:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 25px rgba(224, 25, 46, 0.4);
}

.alpine-mobile-filter-trigger i {
  font-size: 1.1rem;
}

.alpine-mobile-filter-count {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  margin-inline-start: 0.25rem;
}

/* Responsive Behavior */
@media (max-width: 768px) {
  /* Hide desktop filter on mobile */
  .alpine-horizontal-filter {
    display: none;
  }
  
  /* Hide color filters on mobile like desktop */
  .alpine-filter-section[data-filter-type="colors"],
  .alpine-mobile-filter-section[data-filter-type="colors"] {
    display: none !important;
  }
  
  /* Show mobile trigger */
  .alpine-mobile-filter-trigger {
    display: flex !important;
    position: relative;
    z-index: 10;
    background: var(--alpine-filter-primary) !important;
    color: white !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    margin: 10px auto !important;
    max-width: 200px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  /* Prevent body scroll when modal is open */
  body.alpine-mobile-filters-open {
    overflow: hidden;
    /* Removed position: fixed as it breaks mobile fixed positioning */
    /* Use overflow: hidden and touch-action to prevent scrolling instead */
    touch-action: none;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Ensure mobile drawer is properly positioned */
  .alpine-mobile-filter-drawer {
    display: block;
  }
  
  /* Prevent old mobile filters from showing */
  .mobile-filter,
  .alpine-mobile-filters-container,
  #mobile-filters {
    display: none !important;
  }
}

@media (min-width: 769px) {
  /* Hide mobile elements on desktop */
  .alpine-mobile-filter-drawer,
  .alpine-mobile-filter-trigger {
    display: none !important;
  }
}

/* ===== Category Breadcrumbs ===== */
.alpine-category-breadcrumbs,
.alpine-mobile-breadcrumbs {
  display: flex;
  align-items: center;
  padding: 0.75rem 0 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--alpine-filter-border);
  font-size: 0.85rem;
  direction: rtl;
  text-align: right;
}

.alpine-category-breadcrumbs i,
.alpine-mobile-breadcrumbs i {
  margin-inline-end: 0.5rem;
  color: var(--alpine-filter-primary);
  font-size: 0.9rem;
}

.breadcrumb-link {
  color: var(--alpine-filter-primary);
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
}

.breadcrumb-link:hover {
  color: #c01625;
  text-decoration: underline;
}

.breadcrumb-current {
  color: var(--alpine-filter-text);
  font-weight: 600;
}

.breadcrumb-separator {
  margin: 0 0.4rem;
  color: var(--alpine-filter-text-secondary);
  opacity: 0.6;
}

/* ===== Subcategory Count Styling ===== */
.subcategories-count {
  color: var(--alpine-filter-text-secondary);
  font-size: 0.75rem;
  font-weight: 400;
  margin-inline-end: 0.5rem;
  opacity: 0.8;
  display: none;
}

.alpine-filter-option:hover .subcategories-count,
.alpine-mobile-option:hover .subcategories-count {
  opacity: 1;
}

/* ===== Mobile Breadcrumbs Specific ===== */
.alpine-mobile-breadcrumbs {
  background: rgba(224, 25, 46, 0.05);
  border-radius: 0;
  padding: 0.6rem 0.8rem;
  margin: 0;
  /* border: 1px solid rgba(224, 25, 46, 0.1); */
}

/* ===== Hierarchical Category Structure ===== */

/* Desktop Hierarchical Categories */
.alpine-filter-options.hierarchical {
  display: block;
}

.alpine-filter-option.has-children {
  position: relative;
}

.alpine-filter-option.has-children .alpine-filter-option-check {
  border-radius: 6px;
  /* background: rgba(224, 25, 46, 0.05); */
  transition: all 0.3s ease;
}

.alpine-filter-option.has-children .alpine-filter-option-check:hover {
  /* background: rgba(224, 25, 46, 0.1); */
  box-shadow: 0 2px 4px rgba(224, 25, 46, 0.1);
}


.alpine-filter-option-toggle {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
  z-index: 2;
}

.alpine-filter-option-toggle:hover {
  background: rgba(224, 25, 46, 0.1);
  color: var(--alpine-filter-primary);
}


.alpine-filter-option-toggle i {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.alpine-filter-option.expanded .alpine-filter-option-toggle i {
  transform: rotate(180deg);
}

.alpine-filter-subcategories {
  border-inline-start: 2px solid rgba(224, 25, 46, 0.1);
  margin-inline-start: 14px;
  padding-inline-start: 8px;
  margin-top: 0px;
  display: none;
}

.alpine-filter-option.expanded + .alpine-filter-subcategories {
  display: block;
}

/* Level-based indentation for desktop */
.alpine-filter-option.level-1 {
  margin-inline-start: 0 !important;
}

.alpine-filter-option.level-2 {
  margin-inline-start: 0 !important;
}

.alpine-filter-option.level-3 {
  margin-inline-start: 48px;
}

/* Category indentation visual */
.category-indent {
  color: var(--alpine-filter-text-secondary);
  margin-inline-end: 0;
  font-size: 0;
  opacity: 0.6;
}

/* Mobile Hierarchical Categories */
.alpine-mobile-options.hierarchical {
  display: block;
}

.alpine-mobile-category-wrapper {
  position: relative;
  margin-bottom: 0;
}

.alpine-mobile-category-wrapper.has-children .alpine-mobile-option {
  padding-inline-end: 40px;
}

.alpine-mobile-option-toggle {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: rgba(0, 0, 0, 0.05); */
  border-radius: 50%;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
}

.alpine-mobile-option-toggle:hover {
  background: rgba(224, 25, 46, 0.1);
  color: var(--alpine-filter-primary);
}

.alpine-mobile-option-toggle i {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.alpine-mobile-category-wrapper.expanded .alpine-mobile-option-toggle i {
  transform: rotate(180deg);
}

.alpine-mobile-subcategories {
  /* border-inline-start: 2px solid rgb(224 56 63); */
  margin-inline-start: 0;
  padding-inline-start: 0;
  margin-top: 0;
  display: none;
}

.alpine-mobile-category-wrapper.expanded .alpine-mobile-subcategories {
  display: block;
}

/* Level-based styling for mobile */
.alpine-mobile-category-wrapper.level-1 .alpine-mobile-option {
  margin-inline-start: 23px; 
  border-inline-start: 2px solid rgb(224 56 63);
}

.alpine-mobile-category-wrapper.level-2 .alpine-mobile-option {
  margin-inline-start: 46px;
  /* background: rgba(0, 0, 0, 0.04); */
  border-inline-start: 2px solid rgb(224 56 63);
}

.alpine-mobile-category-wrapper.level-3 .alpine-mobile-option {
  margin-inline-start: 48px;
  background: rgba(0, 0, 0, 0.06);
}

/* Mobile category indentation visual */
.mobile-category-indent {
  color: var(--alpine-filter-text-secondary);
  margin-inline-end: 0.5rem;
  font-size: 0.7rem;
  opacity: 0.6;
} 


/* Hide color filters completely */
.alpine-filter-section[data-filter-type="colors"],
.alpine-filter-options.colors,
.alpine-color-filter {
  display: none !important;
}

/* ===== Price Range Slider Styling ===== */

.alpine-price-range {
  padding: 1rem;
}

.alpine-price-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 0.75rem;
  background: rgba(224, 25, 46, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(224, 25, 46, 0.1);
}

.alpine-price-value-min,
.alpine-price-value-max {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.alpine-price-label {
  font-size: 0.8rem;
  color: var(--alpine-filter-text-secondary);
  font-weight: 500;
}

.alpine-price-amount {
  font-size: 1.1rem;
  color: var(--alpine-filter-primary);
  font-weight: 700;
}

/* Dual Range Slider Container */
.alpine-price-slider-container {
  position: relative;
  margin: 0 0;
  padding: 0.5rem 0;
  direction: ltr; /* Force LTR for slider functionality */
}

.alpine-price-slider-track {
  position: relative;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin: 1rem 0;
  width: -webkit-fill-available;
}

.alpine-price-slider-range {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, var(--alpine-filter-primary), #ff2d4a);
  border-radius: 3px;
  transition: var(--alpine-filter-transition);
}

.alpine-price-slider {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  pointer-events: none;
  margin: 0;
}

.alpine-price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--alpine-filter-primary);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: var(--alpine-filter-transition);
  position: relative;
  z-index: 2;
}

.alpine-price-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(224, 25, 46, 0.3);
}

.alpine-price-slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
  box-shadow: 0 0 0 8px rgba(224, 25, 46, 0.1);
}

.alpine-price-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--alpine-filter-primary);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: var(--alpine-filter-transition);
  position: relative;
  z-index: 2;
}

.alpine-price-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(224, 25, 46, 0.3);
}

.alpine-price-slider::-moz-range-thumb:active {
  transform: scale(1.2);
  box-shadow: 0 0 0 8px rgba(224, 25, 46, 0.1);
}

.alpine-price-slider::-moz-range-track {
  background: transparent;
  border: none;
}

.alpine-price-slider.alpine-price-slider-max {
  z-index: 1;
}

.alpine-price-info {
  text-align: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(224, 25, 46, 0.1);
}

.alpine-price-info small {
  color: var(--alpine-filter-text-secondary);
  font-size: 0.8rem;
}

/* RTL Support for Price Display */
[dir="rtl"] .alpine-price-display {
  direction: rtl;
}

[dir="rtl"] .alpine-price-value-min,
[dir="rtl"] .alpine-price-value-max {
  direction: rtl;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .alpine-price-display {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .alpine-price-value-min,
  .alpine-price-value-max {
    flex-direction: row;
    gap: 0.5rem;
  }
  
  .alpine-price-slider-container {
    margin: 1rem 0;
  }
  
  .alpine-price-slider::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  
  .alpine-price-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
  
  /* Mobile-specific price display styling */
  .alpine-mobile-price-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 0.75rem;
    background: rgba(224, 25, 46, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(224, 25, 46, 0.1);
    flex-direction: row;
    gap: 0.75rem;
    text-align: center;
    justify-content: center;
  }
  
  .alpine-mobile-price-value-min,
  .alpine-mobile-price-value-max {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  
  .alpine-mobile-price-label {
    font-size: 0.8rem;
    color: var(--alpine-filter-text-secondary);
    font-weight: 500;
  }
  
  .alpine-mobile-price-amount {
    font-size: 0.9rem;
    color: var(--alpine-filter-primary);
    font-weight: 700;
  }
  
  .alpine-mobile-price-slider-container {
    position: relative;
    margin: 0;
    padding: 0.5rem 2rem;
    direction: ltr;
  }
  
  .alpine-mobile-price-info {
    text-align: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(224, 25, 46, 0.1);
  }
}

/* ===== Filter Toggle Tooltips ===== */
.alpine-filter-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--alpine-filter-bg-glass);
  border: 0px solid var(--alpine-filter-border);
  border-radius: var(--alpine-filter-radius);
  backdrop-filter: blur(10px);
  color: var(--alpine-filter-text);
  font-weight: 600;
  cursor: pointer;
  transition: var(--alpine-filter-transition);
  white-space: nowrap;
  /* transform: translateY(-2px); */
  /* box-shadow: var(--alpine-filter-shadow-hover); */
  border-color: var(--alpine-filter-primary);
}

.alpine-filter-toggle:hover {
  border-color: var(--alpine-filter-primary);
}

.alpine-filter-toggle[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  background: var(--alpine-filter-primary);
  color: white;
  border-radius: 12px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(224, 25, 46, 0.3);
  animation: alpine-badge-pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes alpine-badge-pop {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}


/* Tooltip arrow */
.alpine-filter-section.has-selections .alpine-filter-toggle::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  border: 5px solid transparent;
  /* border-top-color: var(--alpine-filter-text); */
  opacity: 0;
  visibility: hidden;
  transition: var(--alpine-filter-transition);
  z-index: 1002;
}

.alpine-filter-section.has-selections .alpine-filter-toggle:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Handle count badge when tooltip is present */
.alpine-filter-section.has-selections .alpine-filter-toggle[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  background: #091c15;
  color: white;
  border-radius: 12px;
  padding: 0.2rem 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  box-shadow: 0 0px 6px -1px rgb(0 0 0 / 60%);
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 1003;
}

/* Remove old active filters styling since we're using tooltips now */
.alpine-active-filters {
  display: none !important;
}


/* Compact Clear Button - Icon Only */
.alpine-filter-btn-clear.alpine-filter-btn-compact {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: unset;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.25);
}

.alpine-filter-btn-clear.alpine-filter-btn-compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
}

.alpine-filter-btn-clear.alpine-filter-btn-compact .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


@media (max-width: 768px) {
    
  /* Mobile-specific styles */
  .alpine-mobile-filter-section {
    border-bottom: 0;
    padding: 0;
  }

  .alpine-mobile-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 15px;
    font-weight: 600;
    color: var(--alpine-filter-primary);
    margin-bottom: 0;
  }

  .alpine-mobile-badge {
    background: var(--alpine-filter-accent);
    color: white;
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    margin-right: auto;
  }

  .alpine-mobile-section-content {
    padding-right: 0;
  }

  .alpine-mobile-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .alpine-mobile-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    transition: var(--alpine-filter-transition);
    /* min-height: 60px; */
    border-bottom: 0px solid #ddd;
    margin: 0;
  }

  .alpine-mobile-option:hover {
    background: rgba(0, 188, 168, 0.05);
    border-color: var(--alpine-filter-accent);
  }

  .alpine-mobile-option input[type="checkbox"] {
    display: none;
  }

  .alpine-mobile-option-check {
    width: 24px;
    height: 24px;
    border: 2px solid #ddd;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--alpine-filter-transition);
  }

  .alpine-mobile-option input:checked + .alpine-mobile-option-check i {
    /* background: var(--alpine-filter-accent); */
    /* border-color: var(--alpine-filter-accent); */
    color: white;
    opacity: 1;
  }

  .alpine-mobile-option-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
    background: white;
    padding: 4px;
    flex-shrink: 0;
  }

  .alpine-mobile-option-info {
    flex: 1;
    min-width: 0;
  }

  .alpine-mobile-option-name {
    font-weight: 500;
    display: block;
    /* margin-bottom: 0.25rem; */
  }

  .alpine-mobile-option-count,
  .alpine-mobile-option-desc {
    font-size: 12px;
    color: #666;
    display: block;
    background: #eee;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
  }

  /* Mobile Colors */
  .alpine-mobile-colors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
  }

  .alpine-mobile-color {
    flex-direction: column;
    text-align: center;
    padding: 1rem 0.75rem;
  }

  .alpine-mobile-color-swatch {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    transition: var(--alpine-filter-transition);
    color: transparent;
  }

  .alpine-mobile-color input:checked + .alpine-mobile-color-swatch {
    border-color: var(--alpine-filter-accent);
    color: white;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
  }

  /* Mobile Price */
  .alpine-mobile-price-inputs {
    display: grid;
    gap: 1rem;
  }

  .alpine-mobile-price-group label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
  }

  .alpine-mobile-input,
  .alpine-mobile-select {
    width: 100%;
    padding: 1rem;
    border: transparent;
    border-radius: 0;
    font-size: 15px;
    background: white;
    border-bottom: 1px solid #eee;
  }

  .alpine-mobile-price-info {
    margin-top: 1rem;
    text-align: center;
    color: #666;
    display: none;
  }



}