/**
 * Quick Filters - Standalone CSS
 * Styles for quickFilterTag, quickSearchTag, and quickPriceTag buttons
 * All classes prefixed with "quickFilters" for standalone use
 */

/* ==========================================
   CSS Variables - Customize All Styling Here
   ========================================== */

    :root { 
     /* ==========================================
        Default State
        ========================================== */
     --quickfilters-border-color: #151515;
     --quickfilters-background: #fff;
     --quickfilters-text-color: #151515;
     --quickfilters-icon-color: #0605ab;
     
     /* ==========================================
        Hover State
        ========================================== */
     --quickfilters-border-color-hover: #0505fd;
     --quickfilters-background-hover: #fff;
     --quickfilters-text-color-hover: #0505fd;
     --quickfilters-icon-color-hover: #0505fd;
     
     /* ==========================================
        Selected/Active State
        ========================================== */
     --quickfilters-border-color-selected: #0505fd;
     --quickfilters-background-selected: #0505fd;
     --quickfilters-text-color-selected: #fff;
     --quickfilters-icon-color-selected: #fff;
     
     /* ==========================================
        Unavailable State
        ========================================== */
     --quickfilters-border-color-unavailable: #bcbcbc69;
     --quickfilters-background-unavailable: #fff;
     --quickfilters-text-color-unavailable: #92929257;
     --quickfilters-icon-color-unavailable: #9d9d9d69;
     
     /* Unavailable Hover State */
     --quickfilters-border-color-unavailable-hover: #97979769;
     --quickfilters-text-color-unavailable-hover: #979797;
    
    
    /* Border & Spacing */
     --quickfilters-border-width: 1px;
     --quickfilters-border-radius: 10px;
     --quickfilters-padding-vertical: 8px;
     --quickfilters-padding-left: 22px;
     --quickfilters-padding-right: 42px;
     --quickfilters-gap: 1em;
    
    /* Icon */
     --quickfilters-icon-size: 18px;
     --quickfilters-icon-position-right: 10px;
    
    /* Typography */
     --quickfilters-font-family: ;
     --quickfilters-font-size: smaller;
     --quickfilters-font-weight: bold;
     --quickfilters-text-transform: initial;
    
    /* Transitions */
     --quickfilters-transition: all 0.3s ease-in-out;
    
    /* Section Title */
     --quickfilters-title-font-size: 20px;
     --quickfilters-title-font-weight: 600;
     --quickfilters-title-color: #252525;
     --quickfilters-title-margin-bottom: 1.3rem;
     --quickfilters-title-margin-top: 0;
     --quickfilters-title-line-height: 1.4;
     --quickfilters-title-letter-spacing: 0;
     --quickfilters-title-text-align: left;
     --quickfilters-title-text-transform: none;
    
    /* Container */
     --quickfilters-container-gap: 1em;
     --quickfilters-container-margin-bottom: 1rem;
     --quickfilters-container-scroll-padding: 1rem;
     --quickfilters-container-justify: flex-start;
    
    /* Image Style */
     --quickfilters-image-size: 60px;
     --quickfilters-image-border-radius: var(--quickfilters-border-radius);
     --quickfilters-image-margin-right: 10px;
     --quickfilters-image-padding-left: 8px;
  }
  
  /* ==========================================
     Base Button Styles (All Types)
     ========================================== */
  
  .quickFilterTag,
  .quickSearchTag,
  .quickPriceTag,
  .quickLinkTag {
    margin: 0;
    border: var(--quickfilters-border-width) solid var(--quickfilters-border-color);
    font-family: var(--quickfilters-font-family);
    width: auto;
    text-transform: var(--quickfilters-text-transform);
    text-align: left;
    border-radius: var(--quickfilters-border-radius);
    color: var(--quickfilters-text-color);
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    font-size: var(--quickfilters-font-size);
    padding: var(--quickfilters-padding-vertical) var(--quickfilters-padding-right) var(--quickfilters-padding-vertical) var(--quickfilters-padding-left);
    max-width: 100%;
    font-weight: var(--quickfilters-font-weight);
    position: relative;
    transition: var(--quickfilters-transition);
    cursor: pointer;
    background: var(--quickfilters-background);
    text-decoration: none;
  }
  
  /* Base hover state - applies to all buttons */
  .quickFilterTag:hover,
  .quickSearchTag:hover,
  .quickPriceTag:hover,
  .quickLinkTag:hover {
    border: var(--quickfilters-border-width) solid var(--quickfilters-border-color-hover);
    background: var(--quickfilters-background-hover);
    color: var(--quickfilters-text-color-hover);
    cursor: pointer;
  }
  
  /* ==========================================
     Selected/Active States (All Button Types)
     ========================================== */
  
  /* Selected/Active state - same for all button types */
  .quickFilterTagSelected,
  .quickSearchTag.active,
  .quickPriceTag.active {
    border: var(--quickfilters-border-width) solid var(--quickfilters-border-color-selected);
    background: var(--quickfilters-background-selected);
    color: var(--quickfilters-text-color-selected);
  }
  
  /* Selected/Active hover - maintains selected colors */
  .quickFilterTagSelected:hover,
  .quickFilterTag:hover.quickFilterTagSelected,
  .quickSearchTag.active:hover,
  .quickPriceTag.active:hover {
    border: var(--quickfilters-border-width) solid var(--quickfilters-border-color-selected);
    background: var(--quickfilters-background-selected);
    color: var(--quickfilters-text-color-selected);
  }
  
  /* ==========================================
     Unavailable State (Filter Tags Only)
     ========================================== */
  
  .quickFilterTagUnavailable {
    background: var(--quickfilters-background-unavailable);
    color: var(--quickfilters-text-color-unavailable);
    border: var(--quickfilters-border-width) solid var(--quickfilters-border-color-unavailable);
    cursor: default;
  }
  
  .quickFilterTagUnavailable:hover {
    background: var(--quickfilters-background-unavailable);
    color: var(--quickfilters-text-color-unavailable-hover);
    border: var(--quickfilters-border-width) solid var(--quickfilters-border-color-unavailable-hover);
    cursor: default;
  }
  
  /* ==========================================
     Link Tag
     ========================================== */
  
  /* Link tags don't have active/selected states, they're just links */
  .quickLinkTag {
    text-decoration: none;
  }
  
  .quickLinkTag:hover {
    text-decoration: none;
  }
  
  /* ==========================================
     Section Title
     ========================================== */
  
  .quickFilters-section-title {
    font-size: var(--quickfilters-title-font-size);
    font-weight: var(--quickfilters-title-font-weight);
    color: var(--quickfilters-title-color);
    margin: var(--quickfilters-title-margin-top) 0 var(--quickfilters-title-margin-bottom) 0;
    padding: 0;
    line-height: var(--quickfilters-title-line-height);
    letter-spacing: var(--quickfilters-title-letter-spacing);
    text-align: var(--quickfilters-title-text-align);
    text-transform: var(--quickfilters-title-text-transform);
    font-family: var(--quickfilters-font-family);
    border-bottom: 1px solid #c2c2c2;
    padding-bottom: .5rem;
  }
  
  /* ==========================================
     Container Styles (Optional)
     ========================================== */
  
  .quickFilters-container {
    margin: -8px;
    width: 100%;
    margin: 0 0 var(--quickfilters-container-margin-bottom) !important;
    display: flex;
    flex-wrap: wrap;
    gap: var(--quickfilters-container-gap);
    justify-content: var(--quickfilters-container-justify);
    align-items: flex-start;
  }
  
  .quickFilters-title-section {
    width: 100%;
    margin-bottom: var(--quickfilters-title-margin-bottom);
  }
  
  .quickFilters-buttons-preview {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--quickfilters-container-gap);
    justify-content: var(--quickfilters-container-justify);
  }
  
  .quickFilters-buttons-preview > div {
    display: contents; 
  }
  
  /* Container direct children inherit base button styles */
  
  /* On smaller screens: horizontal scroll with snap */
  @media (max-width: 768px) {
  .quickFilters-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: var(--quickfilters-container-scroll-padding);
    padding-bottom: var(--quickfilters-container-margin-bottom);
    margin-bottom: 0 !important;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar on some browsers */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
    
  /* Make buttons snap points and prevent shrinking - works for both preview and generated HTML */
  .quickFilters-buttons-preview .quickFilterTag,
  .quickFilters-buttons-preview .quickSearchTag,
  .quickFilters-buttons-preview .quickPriceTag,
  .quickFilters-buttons-preview .quickLinkTag,
  .quickFilters-container > .quickFilterTag,
  .quickFilters-container > .quickSearchTag,
  .quickFilters-container > .quickPriceTag,
  .quickFilters-container > .quickLinkTag {
    scroll-snap-align: start;
    flex-shrink: 0;
    padding-right: calc(var(--quickfilters-icon-size) + 20px );
  }
}

  
  /* ==========================================
     SVG Icons (::after pseudo-elements)
     ========================================== */
  
  .quickFilterTag::after,
  .quickSearchTag::after,
  .quickPriceTag::after,
  .quickLinkTag::after {
    content: "";
    display: inline-block;
    width: var(--quickfilters-icon-size);
    height: var(--quickfilters-icon-size);
    background-color: var(--quickfilters-icon-color);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    position: absolute;
    right: var(--quickfilters-icon-position-right);
    transition: var(--quickfilters-transition);
  }
  
  /* Default icon for filter tags (checkbox) */
  .quickFilterTag::after {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='3' rx='4'/%3E%3Cpath d='m9 12l2.25 2L15 10'/%3E%3C/g%3E%3C/svg%3E");
  }
  
  /* Selected filter tag icon (checkmark) */
  .quickFilterTagSelected::after,
  .quickFilterTag:hover.quickFilterTagSelected::after {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M7 2a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5zm8.73 8.684a1 1 0 1 0-1.46-1.368l-3.083 3.29l-1.523-1.353a1 1 0 0 0-1.328 1.494l2.25 2a1 1 0 0 0 1.393-.063z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: var(--quickfilters-icon-color-selected) !important;
  }
  
  /* Unavailable filter tag icon (X) */
  .quickFilterTagUnavailable::after {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M5.47 5.47a.75.75 0 0 1 1.06 0l12 12a.75.75 0 1 1-1.06 1.06l-12-12a.75.75 0 0 1 0-1.06'/%3E%3Cpath d='M18.53 5.47a.75.75 0 0 1 0 1.06l-12 12a.75.75 0 0 1-1.06-1.06l12-12a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3C/svg%3E");
    background: var(--quickfilters-icon-color-unavailable);
  }
  
  /* Search tag icon (filter/search icon) */
  .quickSearchTag::after {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6zM10.905 8l-1.437 8m4.937-8l-1.437 8m3.314-5.75H7.718m8.564 3.5H7.718'/%3E%3C/svg%3E");
  }
  
  /* Active search tag icon (dollar/filter icon) */
  .quickSearchTag.active::after {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M10.769 13h1.976l.359-2h-1.976z'/%3E%3Cpath d='M9.367 2.25c-1.092 0-1.958 0-2.655.057c-.714.058-1.317.18-1.868.46a4.75 4.75 0 0 0-2.076 2.077c-.281.55-.403 1.154-.461 1.868c-.057.697-.057 1.563-.057 2.655v5.266c0 1.092 0 1.958.057 2.655c.058.714.18 1.317.46 1.869a4.75 4.75 0 0 0 2.077 2.075c.55.281 1.154.403 1.868.461c.697.057 1.563.057 2.655.057h5.266c1.092 0 1.958 0 2.655-.057c.714-.058 1.317-.18 1.869-.46a4.75 4.75 0 0 0 2.075-2.076c.281-.552.403-1.155.461-1.869c.057-.697.057-1.563.057-2.655V9.367c0-1.092 0-1.958-.057-2.655c-.058-.714-.18-1.317-.46-1.868a4.75 4.75 0 0 0-2.076-2.076c-.552-.281-1.155-.403-1.869-.461c-.697-.057-1.563-.057-2.655-.057zm1.67 5.012a.75.75 0 0 1 .606.87L11.397 9.5h1.976l.293-1.633a.75.75 0 0 1 1.477.266L14.897 9.5h1.385a.75.75 0 0 1 0 1.5h-1.654l-.36 2h2.014a.75.75 0 0 1 0 1.5H14l-.293 1.633a.75.75 0 0 1-1.477-.265l.246-1.368H10.5l-.293 1.633a.75.75 0 0 1-1.477-.265l.246-1.368H7.718a.75.75 0 0 1 0-1.5h1.527l.359-2H7.718a.75.75 0 0 1 0-1.5h2.155l.293-1.633a.75.75 0 0 1 .871-.605'/%3E%3C/g%3E%3C/svg%3E");
    background-color: var(--quickfilters-icon-color-selected) !important;
  }
  
  /* Price tag icon (price tag SVG) */
  .quickPriceTag::after {
    --svg: url("data:image/svg+xml,%3Csvg fill='%23000' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M36.6,20.5a2.05,2.05,0,0,1,2.1,2.1V24a2.05,2.05,0,0,1-2.1,2.1H30.3a4.19,4.19,0,0,0-4.2,4V69.7a4.19,4.19,0,0,0,4,4.2H69.7a4.19,4.19,0,0,0,4.2-4V63.4A2.05,2.05,0,0,1,76,61.3h1.4a2.05,2.05,0,0,1,2.1,2.1v7.7a8.39,8.39,0,0,1-8.4,8.4H28.9a8.39,8.39,0,0,1-8.4-8.4V28.9a8.39,8.39,0,0,1,8.4-8.4Z' fill-rule='evenodd'%3E%3C/path%3E%3Cg%3E%3Cpath d='M54.6,24l10.4.2a4.31,4.31,0,0,1,2.2.9h0l4.1,4.1,4.1,4.1a2.94,2.94,0,0,1,.9,2.2h0l.2,10.4a3.17,3.17,0,0,1-.9,2.3h0L58.5,65.3a3.14,3.14,0,0,1-4.4,0h0l-9.4-9.4-9.4-9.4a3.14,3.14,0,0,1,0-4.4h0L52.4,25a2.57,2.57,0,0,1,2.2-1ZM48.8,40.6l-1.7,1.7a.78.78,0,0,0,0,1.1l10,10a.78.78,0,0,0,1.1,0l1.7-1.7a.78.78,0,0,0,0-1.1l-10-10A.78.78,0,0,0,48.8,40.6Zm4.7-4.7-1.7,1.7a.78.78,0,0,0,0,1.1l10,10a.78.78,0,0,0,1.1,0L64.6,47a.78.78,0,0,0,0-1.1l-10-10A.78.78,0,0,0,53.5,35.9Zm16.1-5a3.11,3.11,0,1,0,0,4.4A3.14,3.14,0,0,0,69.6,30.9Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    width: var(--quickfilters-icon-size);
  }
  
  /* Link tag icon (external link SVG) */
  .quickLinkTag::after {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 11a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1'/%3E%3Cpath fill='%23000' d='M16 5h1.58l-6.29 6.28a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0L19 6.42V8a1 1 0 0 0 1 1a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-4a1 1 0 0 0 0 2'/%3E%3C/svg%3E");
  }
  
  /* Hover states for icons */
  .quickFilterTag:hover::after,
  .quickSearchTag:hover::after,
  .quickPriceTag:hover::after,
  .quickLinkTag:hover::after {
    background-color: var(--quickfilters-icon-color-hover);
  }
  
  /* ==========================================
     Image Style Variants
     ========================================== */
  
  /* Image style - thumbnail on left, text on right */
  .quickFilterTag-image,
  .quickSearchTag-image,
  .quickPriceTag-image,
  .quickLinkTag-image {
    padding-left: var(--quickfilters-image-padding-left);
    align-items: center;
  }
  
  .quickFilterTag-image img,
  .quickSearchTag-image img,
  .quickPriceTag-image img,
  .quickLinkTag-image img {
    width: var(--quickfilters-image-size) !important; /* Important's to get around collection styling */
    height: var(--quickfilters-image-size) !important;
    object-fit: contain;
    border-radius: var(--quickfilters-image-border-radius) !important;
    margin-right: var(--quickfilters-image-margin-right);
    flex-shrink: 0;
    display: block;
  }
  
  .quickFilterTag-image::after,
  .quickSearchTag-image::after,
  .quickPriceTag-image::after,
  .quickLinkTag-image::after {
    /* Keep icon on the right even with image */
    right: var(--quickfilters-icon-position-right);
  }
  
  /* ==========================================
     Responsive Adjustments
     ========================================== */
  
  @media (max-width: 768px) {
    .quickFilterTag,
    .quickSearchTag,
    .quickPriceTag,
    .quickLinkTag {
      font-size: 13px;
      /* margin: 0 var(--quickfilters-container-gap) 0 0; */
    }
    
    .quickFilters-section-title {
      font-size: 18px;
    }
  }