/* Extracted from module/computer/group/filter.phtml during audit Step 6c. */

#groupBrandsFilter,
#groupGroupsFilter,
#groupStockFilter,
#groupOriginFilter{
    font-size: 16px;
    font-weight: 400;
    padding-left: 15px;
    line-height: 24px;
}

#groupGroupsFilter label{
    max-width: 86%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

/* Custom checkbox styling - cross-browser compatible */
#brandCheckboxAll,
#groupCheckboxAll,
.filterBrandCheckbox,
.filterGroupCheckbox,
.filterAvailabilityCheckbox,
.filterOriginCheckbox{
    /* Hide native checkbox */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Custom size */
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
    
    /* Styling */
    border: 2px solid #adb5bd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    
    /* Alignment - remove all margins, let flexbox handle spacing */
    vertical-align: middle;
    position: relative;
    margin: 0;
    
    /* Smooth transitions */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Checked state */
#brandCheckboxAll:checked,
#groupCheckboxAll:checked,
.filterBrandCheckbox:checked,
.filterGroupCheckbox:checked,
.filterAvailabilityCheckbox:checked,
.filterOriginCheckbox:checked{
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Checkmark using pseudo-element */
#brandCheckboxAll:checked::after,
#groupCheckboxAll:checked::after,
.filterBrandCheckbox:checked::after,
.filterGroupCheckbox:checked::after,
.filterAvailabilityCheckbox:checked::after,
.filterOriginCheckbox:checked::after{
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Hover state */
#brandCheckboxAll:hover:not(:disabled),
#groupCheckboxAll:hover:not(:disabled),
.filterBrandCheckbox:hover:not(:disabled),
.filterGroupCheckbox:hover:not(:disabled),
.filterAvailabilityCheckbox:hover:not(:disabled),
.filterOriginCheckbox:hover:not(:disabled){
    border-color: #0d6efd;
}

/* Disabled state */
#brandCheckboxAll:disabled,
#groupCheckboxAll:disabled,
.filterBrandCheckbox:disabled,
.filterGroupCheckbox:disabled,
.filterAvailabilityCheckbox:disabled,
.filterOriginCheckbox:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

/* Label alignment fix - ensures perfect vertical centering */
#groupBrandsFilter label,
#groupGroupsFilter label,
#groupStockFilter label,
#groupOriginFilter label{
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Consistent spacing between checkbox and text */
    cursor: pointer;
    margin-bottom: 0;
    line-height: 1;
}

/* Text span inside label for better control */
#groupBrandsFilter label span,
#groupGroupsFilter label span,
#groupStockFilter label span,
#groupOriginFilter label span{
    line-height: 22px; /* Match checkbox height */
    padding-top: 2px; /* Fine-tune vertical alignment */
    font-weight: 500;
}


.clearFilters{
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}

.clearFilters:hover{
    text-decoration: none;
}


.select2-selection__clear{
    color: #d9534f;
    font-size: 26px;
    cursor: pointer;
}

.select2-selection__clear:hover{
    color: #973a37;
}


/*
#groupGroupsFilterContainer::-webkit-scrollbar,
#groupBrandsFilterContainer::-webkit-scrollbar{
    width: 10px;
}

#groupGroupsFilterContainer::-webkit-scrollbar-track,
#groupBrandsFilterContainer::-webkit-scrollbar-track{
    background: #f1f1f1;
}

#groupGroupsFilterContainer::-webkit-scrollbar-thumb,
#groupBrandsFilterContainer::-webkit-scrollbar-thumb{
    background: #888;
}

#groupGroupsFilterContainer::-webkit-scrollbar-thumb:hover,
#groupBrandsFilterContainer::-webkit-scrollbar-thumb:hover{
    background: #555;
}
*/
    /* Double Range Slider Styles */
    .price-slider-container {
        position: relative;
        width: 100%;
        height: 40px;
        margin-top: 15px;
    }
    
    .price-slider-track {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 6px;
        background: #e0e0e0;
        border-radius: 3px;
    }
    
    .price-slider-range {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 6px;
        background: #0d6efd;
        border-radius: 3px;
    }
    
    .price-slider-container input[type="range"] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 6px;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        pointer-events: none;
        margin: 0;
    }
    
    .price-slider-container input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: #0d6efd;
        border: 3px solid #fff;
        border-radius: 50%;
        cursor: pointer;
        pointer-events: auto;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        transition: transform 0.1s ease;
    }
    
    .price-slider-container input[type="range"]::-webkit-slider-thumb:hover {
        transform: scale(1.15);
    }
    
    .price-slider-container input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: #0d6efd;
        border: 3px solid #fff;
        border-radius: 50%;
        cursor: pointer;
        pointer-events: auto;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    
    .price-values-display {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        font-size: 14px;
        color: #333;
    }
    
    .price-values-display .price-value {
        font-weight: 600;
        color: #0d6efd;
    }
    
    .price-apply-btn {
        margin-top: 12px;
    }
    
    .price-apply-btn .btn {
        background-color: transparent;
        border-color: #0d6efd;
        color: #0d6efd;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .price-apply-btn .btn:hover,
    .price-apply-btn .btn:focus {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
    }
    
    .price-apply-btn .btn:active {
        background-color: #0a58ca;
        border-color: #0a58ca;
        color: #ffffff;
    }