/* --- Search Bar & Sort Dropdown --- */
.product-search-input {
    border-radius: 8px 0 0 8px; /* Rounded on right for RTL */
    border-color: #e0e0e0;
    padding: 9px 14px; /* کمی کوچکتر شد */
    font-size: 14px; /* کمی کوچکتر شد */
}

.search-btn {
    border-radius: 0 8px 8px 0; /* Rounded on left for RTL */
    background-color: #0A66C2; /* Primary blue for search button */
    border-color: #0A66C2;
    color: #FFFFFF;
    font-weight: 600;
    padding: 9px 18px; /* کمی کوچکتر شد */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    .search-btn:hover {
        background-color: #084c90; /* Darker blue on hover */
        border-color: #084c90;
    }

.sort-dropdown {
    border-radius: 8px;
    border-color: #e0e0e0;
    padding: 9px 14px; /* کمی کوچکتر شد */
    font-size: 14px; /* کمی کوچکتر شد */
    color: #333;
    background-color: #fff;
    cursor: pointer;
    margin-bottom: 15px;
}

/* Filters Sidebar */
.filters-sidebar {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 22px; /* کمی کوچکتر شد */
}

.filter-title {
    font-size: 20px; /* کمی کوچکتر شد */
    font-weight: 700;
    color: #0A66C2;
    margin-bottom: 22px; /* کمی کوچکتر شد */
    position: relative;
}

    .filter-title::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: -10px;
        width: 50px;
        height: 3px;
        background-color: #32CD32;
        border-radius: 5px;
    }

.filter-group {
    padding-bottom: 18px; /* کمی کوچکتر شد */
    border-bottom: 1px solid #F0F0F0;
    margin-bottom: 18px; /* کمی کوچکتر شد */
}

    .filter-group:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

.filter-group-title {
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #333333;
}


/* Custom Range Slider (placeholder for noUiSlider or similar) */
.price-range-slider {
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin-top: 12px; /* کمی کوچکتر شد */
    position: relative;
}

.price-range-values {
    font-size: 14px; /* کمی کوچکتر شد */
    color: #495057;
    font-weight: 500;
}

.filter-apply-btn {
    margin-top: 25px !important; /* کمی کوچکتر شد */
    padding: 10px 20px; /* کمی کوچکتر شد */
    font-size: 16px; /* کمی کوچکتر شد */
    border-radius: 8px;
    background-color: #32CD32;
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 8px rgba(50, 205, 50, 0.2);
    transition: all 0.3s ease;
}

    .filter-apply-btn:hover {
        background-color: #28a745;
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(50, 205, 50, 0.3);
    }

/******************Brand*********/
/* --- Brand Filter Styles --- */
/* --- Base Styles (Re-used/Adjusted from previous responses) --- */
.filter-group button {
    background: none;
    border: none;
    width: 100%;
    text-align: right; /* For RTL */
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    direction: rtl; /* Ensure button content aligns correctly in RTL */
}

.filter-group h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}

.filter-group .toggle-icon {
    transition: transform 0.3s ease;
}

.filter-options {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding-right: 15px; /* Adjust padding for checkbox alignment */
    margin-bottom: 10px;
    direction: rtl; /* Ensures content inside filter-options is RTL */
}

    .filter-options.show {
        max-height: 500px; /* Adjust as needed to contain content */
        transition: max-height 0.5s ease-in;
    }

.no-filter-options {
    font-size: 0.9rem;
    color: #666;
    padding: 5px 0;
    text-align: center;
}

/* --- Specific Styles for Brand and Color Filter Items --- */

/* Parent for each filter option item (both brands and colors) */
.filter-option-item {
    margin-bottom: 8px;
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Push content to left and right edges */
    width: 100%; /* Take full available width */
    padding: 6px 0; /* Padding inside each item */
    transition: background-color 0.2s ease;
    border-radius: 4px;
}

    .filter-option-item:hover {
        background-color: #f5f5f5; /* Light background on hover for any filter item */
    }


/* Styling for the LABEL containing checkbox and English name */
.filter-checkbox-label {
    display: flex; /* Make label content (checkbox + English name) flex */
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: 0.95rem;
    color: #333;
    /* No flex-grow here so it stays to the right (RTL) */
}

    /* Hide the default browser checkbox */
    .filter-checkbox-label input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Custom checkbox indicator */
.checkbox-custom {
    width: 18px;
    height: 18px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    margin-left: 8px; /* Space from brand info for RTL */
    flex-shrink: 0; /* Prevent shrinking */
}

/* Checkmark inside the custom checkbox */
.filter-checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom {
    background-color: #007bff; /* Primary color for checked state */
    border-color: #007bff;
}

    .filter-checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom::after {
        content: '\2713'; /* Unicode checkmark */
        font-size: 14px;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%; /* Cover the entire custom checkbox */
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px; /* Match border-radius of the box */
    }

/* Styles for the brand names */
.filter-name {
    white-space: nowrap; /* Prevent wrapping */
}

    .filter-name.english-name {
        font-weight: 500; /* Slightly bolder for main name */
        margin-right: 5px; /* Space between custom checkbox and English name (RTL) */
        text-align: right; /* Explicitly align right */
    }

    .filter-name.persian-name {
        font-size: 0.85em; /* Smaller font for Persian name */
        color: #666; /* Lighter color */
        margin-left: 5px; /* Space from English name (if needed) */
        text-align: left; /* Explicitly align left */
        direction: rtl; /* Ensure Persian text renders correctly RTL */
    }

/******************Brand*********/