/**
 * Browse Page Styles
 * CSP-Compliant: All styles externalized from inline <style> tags
 * Responsive: Mobile and desktop support
 */

/* ============================================
   Filter Bar Responsive Styles
   ============================================ */

/* "Bộ Lọc" label - Ẩn mặc định cho mobile/tablet */
#filter-label {
  display: none; /* Ẩn mặc định cho mobile/tablet */
}

/* "Mức giá" label - Ẩn mặc định cho mobile/tablet */
#price-filter-label {
  display: none; /* Ẩn mặc định cho mobile/tablet */
}

/* Category filter - sẽ được điều chỉnh trong desktop media query */
#category-filter-select {
  width: 260px !important;
  max-width: 260px !important;
  min-width: 260px !important;
}

/* Brand select - sẽ được điều chỉnh trong desktop media query */
#brand-filter-select {
  width: 180px !important;
  min-width: 180px !important;
}

/* Ensure filter form uses full width without extra space */
#filter-form {
  width: 100%;
}

#filter-form > div:last-child {
  margin-right: 0;
}

/* Desktop (>= 1024px) - Allow wrapping when container shrinks, keep normal size on one row */
@media (min-width: 1024px) {
  /* Đổ nền màu xám nhẹ cho toàn bộ container filter bar - giống category buttons blog */
  #filter-bar {
    background-color: var(--bg-tertiary) !important;
  }

  /* Hiển thị "Bộ Lọc" label trên desktop */
  #filter-label {
    display: inline-block;
  }

  /* Hiển thị "Mức giá" label trên desktop */
  #price-filter-label {
    display: inline-block;
  }

  /* Override flex-nowrap from HTML to allow wrapping when container shrinks */
  #filter-form {
    flex-wrap: wrap !important; /* Cho phép wrap khi không đủ chỗ */
    gap: 0.75rem; /* Chia đều khoảng cách giữa các filter box */
    padding-right: 20px; /* Cách biên phải 20px */
  }

  /* Tất cả filter items có thể co giãn đều */
  #filter-form > div.filter-flexible {
    flex: 1 1 auto !important; /* Có thể grow và shrink, chia đều không gian */
    flex-shrink: 1 !important; /* Cho phép co lại khi cần */
    min-width: 0; /* Cho phép shrink nhỏ hơn content */
  }

  /* Category filter - min-width 260px (kích thước hiện tại) */
  #category-filter-container {
    min-width: 260px !important;
  }

  /* Brand filter - min-width 180px (kích thước hiện tại) */
  #brand-filter-container {
    min-width: 180px !important;
  }

  /* Rating filter - min-width 150px (kích thước hiện tại) */
  #rating-filter-container {
    min-width: 150px !important;
  }

  /* Price filter - min-width 180px + label width (kích thước hiện tại) */
  #price-filter-container {
    min-width: calc(180px + 4rem) !important; /* 180px slider + label width */
  }

  /* Sort filter - min-width 160px (kích thước hiện tại) */
  #sort-filter-container {
    min-width: 160px !important;
  }

  /* Tất cả select trong filter-flexible - width 100% để fill container */
  #filter-form > div.filter-flexible select {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Price slider container - width 100% để fill container */
  #price-filter-container > div {
    width: 100% !important;
    min-width: 180px !important; /* Giữ min-width cho slider */
  }

  /* Category select - override để width 100% */
  #category-filter-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  /* Brand select - override để width 100% */
  #brand-filter-select {
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* Horizontal filter bar responsive - Tablet (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
  /* Đổ nền màu xám nhẹ cho toàn bộ container filter bar - giống desktop */
  #filter-bar {
    background-color: var(--bg-tertiary) !important;
    padding: 0.5rem !important; /* Padding nhỏ tinh tế */
  }

  #filter-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.5rem; /* Gap nhỏ hơn để tận dụng diện tích */
    align-items: flex-start;
    padding: 0.25rem; /* Padding nhỏ cho form */
  }

  /* Container cho các filter - 2 cột (50% mỗi cột) */
  #filter-form > div {
    flex: 0 1 calc(50% - 0.25rem);
    min-width: calc(50% - 0.25rem);
    max-width: calc(50% - 0.25rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem; /* Gap nhỏ hơn */
    padding: 0.375rem; /* Padding nhỏ cho box filter */
  }

  /* Price filter - Full width, riêng 1 hàng */
  #filter-form > div:has(#price-slider) {
    width: 100%;
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
    order: 999; /* Đẩy xuống cuối */
    flex-direction: row !important; /* Hiển thị label và slider cùng hàng */
    align-items: center !important; /* Căn giữa theo chiều dọc */
    gap: 0.5rem !important; /* Gap giữa label và slider */
    padding: 0.375rem; /* Padding nhỏ cho box filter */
  }

  /* Hiển thị "Mức giá" label trên tablet - cùng hàng với slider */
  #price-filter-label {
    display: inline-block !important;
    flex-shrink: 0; /* Không co lại */
    white-space: nowrap; /* Không xuống dòng */
  }

  /* Price slider container full width */
  #filter-form > div:has(#price-slider) > div {
    width: 100%;
    flex: 1; /* Chiếm phần còn lại */
  }

  /* Override Tailwind w-[180px] class for price slider container */
  #filter-form > div:has(#price-slider) > div[class*="w-[180px]"] {
    width: 100% !important;
  }

  /* Optional "Lọc" label - Ẩn trên tablet */
  #filter-label {
    display: none;
  }

  /* Selects full width trong box của chúng */
  #filter-form select {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  /* Override specific select widths */
  #category-filter-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  #brand-filter-select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Price slider full width */
  #price-slider {
    width: 100%;
    min-width: 100%;
  }
}

/* Horizontal filter bar responsive - Mobile (< 640px) */
@media (max-width: 639px) {
  /* Đổ nền màu xám nhẹ cho toàn bộ container filter bar - giống desktop */
  #filter-bar {
    background-color: var(--bg-tertiary) !important;
    padding: 0.125rem !important; /* Padding cực nhỏ trên mobile */
  }

  #filter-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.25rem; /* Gap cực nhỏ để tận dụng diện tích */
    align-items: flex-start;
    padding: 0.0625rem; /* Padding cực nhỏ cho form */
  }

  /* Tất cả filters - Mỗi filter 1 hàng full width */
  #filter-form > div {
    width: 100%;
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1875rem; /* Gap cực nhỏ */
    padding: 0.1875rem; /* Padding cực nhỏ cho box filter */
  }

  /* Category - Hàng 1: Full width */
  #filter-form > div:has(#category-filter-select) {
    order: 1;
  }

  /* Brand - Hàng 2: Full width */
  #filter-form > div:has(#brand-filter-select) {
    order: 2;
  }

  /* Rating - Hàng 3: Full width */
  #filter-form > div:has(select[name="rating"]) {
    order: 3;
  }

  /* Sort - Hàng 4: Full width */
  #filter-form > div:has(select[name="sort"]) {
    order: 4;
  }

  /* Price filter - Cuối cùng: Full width */
  #filter-form > div:has(#price-slider) {
    order: 999; /* Đẩy xuống cuối cùng */
    flex-direction: row !important; /* Hiển thị label và slider cùng hàng */
    align-items: center !important; /* Căn giữa theo chiều dọc */
    gap: 0.25rem !important; /* Gap cực nhỏ giữa label và slider */
  }

  /* Hiển thị "Mức giá" label trên mobile - cùng hàng với slider */
  #price-filter-label {
    display: inline-block !important;
    flex-shrink: 0; /* Không co lại */
    white-space: nowrap; /* Không xuống dòng */
  }

  /* Price slider container full width */
  #filter-form > div:has(#price-slider) > div {
    width: 100%;
    flex: 1; /* Chiếm phần còn lại */
  }

  /* Override Tailwind w-[180px] class for price slider container */
  #filter-form > div:has(#price-slider) > div[class*="w-[180px]"] {
    width: 100% !important;
  }

  /* Optional "Lọc" label - Ẩn trên mobile */
  #filter-label {
    display: none;
  }

  /* Selects full width trong box của chúng */
  #filter-form select {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  /* Override specific select widths */
  #category-filter-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  #brand-filter-select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Price slider full width */
  #price-slider {
    width: 100%;
    min-width: 100%;
    margin: 4px 0;
  }
}

/* Extra small mobile devices (< 480px) - Vẫn giữ layout 2 cột nhưng gap nhỏ hơn */
@media (max-width: 480px) {
  #filter-form {
    gap: 0.75rem;
  }

  /* Vẫn giữ 2 cột nhưng gap nhỏ hơn */
  #filter-form > div {
    flex: 0 1 calc(50% - 0.375rem);
    gap: 0.375rem;
  }

  /* Optional "Lọc" label - Ẩn trên extra small mobile */
  #filter-label {
    display: none;
  }

  #filter-form select {
    font-size: var(--font-size-sm);
    padding: 0.5rem 0.75rem;
  }
}

/* ============================================
   Price Slider Styles - Simple & Elegant
   High Specificity to Override Vendor CSS
   ============================================ */

/* Simple thin slider track - just a thin line */
/* Use high specificity selector to override vendor CSS */
#price-slider.noUi-target,
#price-slider .noUi-target,
.noUi-horizontal.noUi-target {
  background: #e5e7eb !important;
  border: none !important;
  border-radius: 1px !important;
  height: 1px !important; /* Very thin track - just a line */
  box-shadow: none !important;
}

#price-slider .noUi-connects,
.noUi-horizontal .noUi-connects {
  border-radius: 1px !important;
}

#price-slider .noUi-connect,
.noUi-horizontal .noUi-connect {
  background: #6366f1 !important; /* Simple indigo line */
  border-radius: 1px !important;
  height: 1px !important;
}

/* Minimal handle - small and simple */
/* Use high specificity to override vendor .noUi-horizontal .noUi-handle */
#price-slider .noUi-handle,
#price-slider .noUi-horizontal .noUi-handle,
.noUi-horizontal.noUi-target .noUi-handle,
.noUi-horizontal .noUi-handle {
  background: #ffffff !important;
  border: 1px solid #6366f1 !important;
  border-radius: 50% !important;
  box-shadow: none !important; /* No shadow - simple */
  width: 10px !important; /* Smaller handle */
  height: 10px !important;
  right: -5px !important;
  top: -4.5px !important;
  cursor: pointer !important;
  transition: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

#price-slider .noUi-handle:before,
#price-slider .noUi-handle:after,
.noUi-horizontal .noUi-handle:before,
.noUi-horizontal .noUi-handle:after {
  display: none !important;
  content: none !important;
}

/* Simple hover - just border color change */
#price-slider .noUi-handle:hover,
.noUi-horizontal .noUi-handle:hover {
  border-color: var(--primary-color) !important;
}

#price-slider .noUi-handle:active,
.noUi-horizontal .noUi-handle:active {
  border-color: var(--primary-hover) !important;
  box-shadow: none !important;
}

#price-slider .noUi-handle:focus,
.noUi-horizontal .noUi-handle:focus {
  outline: none !important;
}

/* Remove all decorative elements */
#price-slider .noUi-pips,
.noUi-pips {
  display: none !important;
}

#price-slider .noUi-origin,
.noUi-horizontal .noUi-origin {
  border-radius: 1px !important;
}

/* Minimal spacing - override vendor margin */
#price-slider .noUi-horizontal .noUi-handle,
.noUi-horizontal.noUi-target .noUi-handle {
  margin-top: 0 !important;
}

/* Slider container */
#price-slider {
  margin: 4px 0;
  padding: 0 2px;
  min-width: 180px;
}

/* Mobile slider adjustments */
@media (max-width: 639px) {
  #price-slider {
    min-width: 100%;
    margin: 4px 0;
  }

  /* High specificity for mobile */
  #price-slider .noUi-handle,
  #price-slider .noUi-horizontal .noUi-handle,
  .noUi-horizontal.noUi-target .noUi-handle {
    width: 12px !important;
    height: 12px !important;
    top: -5.5px !important;
    right: -6px !important;
  }
}