/* Existing Styles */
@media (min-width: 768px) {
    .collapse.dont-collapse-md {
        display: block;
        height: auto !important;
        visibility: visible;
    }
}

@media (max-width: 768px) {
    .review-count {
        display: block;
    }
}

/* Filter Count Badge and Clear Button */
.filter-count-badge {
    display: none;
    background-color: #e5648a;
    color: white;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.85em;
    margin-left: 5px;
}

.clear-filter-btn {
    padding: 2px 10px;
    font-size: 0.85em;
    box-shadow: none;
    border: 1px solid #e5648a;
    color: #e5648a;
    background-color: white;
    font-weight: 600;
    transition: all 0.2s ease;
}

.clear-filter-btn:hover {
    background-color: #e5648a;
    color: white;
    transform: translateY(-1px);
}

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

/* Filter option animations */
#filter-form input[type="checkbox"] + span + label,
#filter-form input[type="radio"] + span + label {
    display: inline-block;
}

.filter-animate {
    animation: optionBounce 0.5s ease-out;
}

/* Keyframe animations */
@keyframes optionBounce {
    0% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-6px);
    }
    60% {
        transform: translateY(-3px);
    }
    80% {
        transform: translateY(-1px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Mobile Filter Drawer Styles */
@media (max-width: 767px) {
    /* On mobile, change filter sidebar to full width */
    #filter-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-right: 0 !important;
        padding-left: 15px !important;
        margin-bottom: 15px;
    }
    
    /* Hide only the filter section well, keep subcategory well visible */
    #filter-section-well {
        display: none !important;
    }
    
    /* Subcategory well should have light gray background on mobile */
    #filter-sidebar .well {
        background-color: #f8f9fa !important;
        border-color: #eeeeee !important;
    }
    
    /* Mobile filter button */
    .mobile-filter-button {
        width: 100%;
        background: #f8f9fa;
        border: 1px solid #eeeeee;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        font-weight: 600;
        color: #333;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    /* Drawer overlay - only visible on mobile */
    .filter-drawer-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        z-index: 1040;
    }
    
    /* Drawer container - only visible on mobile */
    .filter-drawer {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        max-height: 90%;
        background-color: white;
        z-index: 1050;
        transition: bottom 0.3s ease;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 20px 20px 0 0;
    }
    
    .filter-drawer.open {
        bottom: 0;
    }
    
    /* Drawer header */
    .filter-drawer-header {
        background-color: white;
        padding: 15px 20px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 10;
        border-radius: 20px 20px 0 0;
    }
    
    .filter-drawer-title {
        font-size: 16px;
        font-weight: 700;
        color: #333;
        text-transform: capitalize;
    }
    
    .filter-drawer-close {
        width: 28px;
        height: 28px;
        border: none;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        color: #999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        padding: 0;
    }
    
    /* Drawer content */
    .filter-drawer-content {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        padding-bottom: 90px;
        background-color: white;
    }
    
    .filter-drawer-content .well {
        background-color: white;
        border: none;
        border-radius: 0;
        margin-bottom: 0;
        box-shadow: none;
        display: block !important;
    }
    
    /* Hide clear button and badge inside drawer */
    .filter-drawer-content .clear-filter-btn,
    .filter-drawer-content #drawer-filter-count-badge {
        display: none !important;
    }
    
    /* Remove collapse functionality in drawer - show everything */
    .filter-drawer-content .collapse {
        display: block !important;
        height: auto !important;
    }
    
    /* Hide collapse toggle arrows/icons in drawer */
    .filter-drawer-content [data-toggle="collapse"] {
        display: none !important;
    }
    
    /* Hide float clearing divs but keep margin helpers */
    .filter-drawer-content div[style*="clear: both"] {
        display: none !important;
    }
    
    .filter-drawer-content .margin-bottom-05 {
        height: 0px;
        display: none !important;
    }
    
    .filter-drawer-content .margin-bottom-10 {
        height: 0px;
        display: none !important;
    }
    
    /* Hide select arrow support div */
    .filter-drawer-content .js-select-support,
    .filter-drawer-content .select-arrow-space {
        display: none !important;
    }
    
    /* Hide chosen plugin container - show native select instead */
    .filter-drawer-content .chosen-container {
        display: none !important;
    }
    
    /* Show native select in drawer */
    .filter-drawer-content select.chosen {
        display: block !important;
        opacity: 1 !important;
        position: static !important;
        width: 100% !important;
    }
    
    /* Filter section titles in drawer */
    .filter-drawer-content span.text-muted {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        margin-top: 40px !important;
        margin-bottom: 5px !important;
        padding: 0 !important;
        float: none !important;
        border-bottom: 2px solid #f0f0f0 !important;
        padding-bottom: 8px !important;
    }
    
    /* Only first title (brands section if exists) has no top margin */
    .filter-drawer-content > .well > span.text-muted:first-of-type {
        margin-top: 0 !important;
    }
    
    .filter-drawer-content .text-muted small {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #333 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
    }
    
    /* Hide "FILTERS" title at top of well */
    .filter-drawer-content .well > div:first-child {
        display: none !important;
    }
    
    /* Container divs for each filter option */
    .filter-drawer-content #drawer-brands > div:not(.brand-hidden) {
        display: block !important;
        clear: both !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }
    
    /* Brand search input styling in drawer */
    .filter-drawer-content #drawer-search-brand {
        display: block !important;
        width: 100% !important;
        padding: 12px 14px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
        clear: both !important;
        float: none !important;
        background-color: white !important;
        transition: all 0.2s ease !important;
    }
    
    .filter-drawer-content #drawer-search-brand:focus {
        outline: none !important;
        border-color: #e5648a !important;
        background-color: white !important;
        box-shadow: 0 0 0 3px rgba(229, 100, 138, 0.1) !important;
    }
    
    .filter-drawer-content #drawer-search-brand::placeholder {
        color: #999;
    }
    
    /* Remove extra margins and paddings */
    .filter-drawer-content .well {
        padding: 0;
        overflow: visible !important;
    }
    
    /* Clear floats properly */
    .filter-drawer-content .well::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Prevent any absolute/fixed positioning issues */
    .filter-drawer-content * {
        position: relative !important;
    }
    
    .filter-drawer-content select,
    .filter-drawer-content input {
        position: static !important;
    }
    
    /* Select/dropdown styling */
    .filter-drawer-content select {
        display: block !important;
        width: 100% !important;
        padding: 12px 14px !important;
        padding-right: 40px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        clear: both !important;
        float: none !important;
        background-color: white !important;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23999" d="M6 9L1 4h10z"/></svg>') !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        background-size: 12px !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }
    
    .filter-drawer-content select:focus {
        outline: none !important;
        border-color: #e5648a !important;
        background-color: white !important;
    }
    
    /* Star rating in drawer */
    .filter-drawer-content .fa-star {
        color: #f39c12;
        font-size: 16px;
    }
    
    /* Rating container padding */
    .filter-drawer-content input[type="radio"] + span + label {
        padding: 6px 0;
    }
    
    /* Better spacing for filter groups */
    .filter-drawer-content .well > .collapse,
    .filter-drawer-content .well > #drawer-brands,
    .filter-drawer-content #drawer-brands {
        display: block !important;
        clear: both !important;
        width: 100% !important;
        float: none !important;
    }
    
    /* Drawer uses standard checkboxes - hide custom checkbox styling */
    .filter-drawer-content input[type="checkbox"],
    .filter-drawer-content input[type="radio"] {
        position: static !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 10px 0 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
        float: none !important;
        cursor: pointer !important;
        accent-color: #e5648a !important;
    }
    
    /* Hide custom checkbox span in drawer */
    .filter-drawer-content input[type="checkbox"] + span,
    .filter-drawer-content input[type="radio"] + span {
        display: none !important;
    }
    
    /* Labels should be clickable and next to checkbox */
    .filter-drawer-content label {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        color: #333 !important;
        cursor: pointer !important;
        float: none !important;
        width: auto !important;
        line-height: 1.5 !important;
    }
    
    /* Wrapping divs for each checkbox/radio */
    .filter-drawer-content #drawer-brands > div {
        clear: both;
        margin-bottom: 0;
        padding: 6px 0;
        cursor: pointer;
    }
    
    .filter-drawer-content .collapse > div {
        clear: both !important;
        margin-bottom: 0 !important;
        padding: 6px 0;
    }
    
    /* Hidden state for search filtering */
    .filter-drawer-content #drawer-brands > div.search-hidden,
    .filter-drawer-content .collapse > div.search-hidden {
        display: none !important;
    }
    
    /* Make entire row clickable with hover effect */
    .filter-drawer-content #drawer-brands > div:hover,
    .filter-drawer-content .collapse > div:hover {
        background-color: #fafafa;
        transition: background-color 0.2s ease;
    }
    
    /* Active/checked row styling - removed for cleaner look */
    /* .filter-drawer-content #drawer-brands > div:has(input:checked),
    .filter-drawer-content .collapse > div:has(input:checked) {
        background-color: #fff5f8;
    } */
    
    /* Selected Filters Section */
    .selected-filters-section {
        background-color: white;
        padding: 15px;
        border-bottom: 1px solid #e0e0e0;
        display: none;
    }
    
    .selected-filters-section.has-filters {
        display: block;
    }
    
    .selected-filters-title {
        font-size: 12px;
        font-weight: 600;
        color: #999;
        margin-bottom: 10px;
        text-transform: uppercase;
    }
    
    .selected-filters-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background-color: white;
        border: 1px solid #e5648a;
        color: #e5648a;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
    }
    
    .filter-chip-remove {
        cursor: pointer;
        font-weight: 700;
        font-size: 16px;
    }
    
    /* Drawer footer */
    .filter-drawer-footer {
        background-color: white;
        padding: 12px 15px;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        display: flex;
        gap: 10px;
        position: sticky;
        bottom: 0;
        z-index: 10;
    }
    
    .apply-filters-button {
        background-color: #e5648a;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        flex: 1;
    }
    
    #drawer-clear-button-wrapper {
        flex: 1;
    }
    
    #drawer-clear-button-wrapper.has-filters {
        display: block !important;
    }
    
    .apply-filters-button.full-width {
        flex: 2;
    }
    
    .filter-drawer-footer .btn-outline-secondary:hover {
        background-color: #e5648a;
        color: white;
    }
    
    /* Brand visibility management */
    .filter-drawer-content .brand-hidden {
        display: none !important;
    }
    
    /* Show more button styling for drawer */
    .filter-drawer-content #drawer-show-more-brands {
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 15px;
        padding: 8px 15px;
        font-size: 14px;
        font-weight: 500;
        color: #e5648a;
        text-decoration: none;
        border: none;
        background: none;
        transition: all 0.2s ease;
    }
    
    .filter-drawer-content #drawer-show-more-brands:hover {
        text-decoration: underline;
    }
}

/* Desktop Filter Styling (same as drawer design) */
@media (min-width: 768px) {
    /* Filter section titles on desktop */
    #filter-section-well span.text-muted {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        margin-top: 30px !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
        float: none !important;
        border-bottom: 2px solid #f0f0f0 !important;
        padding-bottom: 8px !important;
    }
    
    /* First title has no top margin */
    #filter-section-well > .well > span.text-muted:first-of-type,
    #filter-section-well span.text-muted:first-child {
        margin-top: 0 !important;
    }
    
    #filter-section-well .text-muted small {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #333 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
    }
    
    /* Desktop filter uses standard checkboxes */
    #filter-section-well input[type="checkbox"],
    #filter-section-well input[type="radio"] {
        position: static !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 10px 0 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
        float: none !important;
        cursor: pointer !important;
        accent-color: #e5648a !important;
    }
    
    /* Hide custom checkbox span on desktop */
    #filter-section-well input[type="checkbox"] + span,
    #filter-section-well input[type="radio"] + span {
        display: none !important;
    }
    
    /* Desktop labels - clickable and next to checkbox */
    #filter-section-well label {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        color: #333 !important;
        cursor: pointer !important;
        float: none !important;
        width: auto !important;
        line-height: 1.5 !important;
    }
    
    /* Container divs for each filter option on desktop */
    #filter-section-well #brands > div,
    #filter-section-well .collapse > div {
        clear: both !important;
        margin-bottom: 0 !important;
        padding: 8px 0 !important;
        border-bottom: none !important;
    }
    
    /* Brand search input styling on desktop */
    #filter-section-well #search-brand {
        display: block !important;
        width: 100% !important;
        padding: 12px 14px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
        clear: both !important;
        float: none !important;
        background-color: white !important;
        transition: all 0.2s ease !important;
    }
    
    #filter-section-well #search-brand:focus {
        outline: none !important;
        border-color: #e5648a !important;
        background-color: white !important;
        box-shadow: 0 0 0 3px rgba(229, 100, 138, 0.1) !important;
    }
    
    #filter-section-well #search-brand::placeholder {
        color: #999;
    }
    
    /* Hide chosen plugin container and support divs on desktop - show native select instead */
    #filter-section-well .chosen-container,
    #filter-section-well .js-select-support,
    #filter-section-well .select-arrow-space {
        display: none !important;
    }
    
    /* Select/dropdown styling on desktop */
    #filter-section-well select,
    #filter-section-well select.chosen {
        display: block !important;
        width: 100% !important;
        padding: 12px 14px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        cursor: pointer !important;
        background-color: white !important;
        transition: all 0.2s ease !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        padding-right: 40px !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        opacity: 1 !important;
        position: static !important;
    }
    
    #filter-section-well select:focus {
        outline: none !important;
        border-color: #e5648a !important;
        background-color: white !important;
    }
    
    /* Star rating icons */
    #filter-section-well .fa-star {
        color: #f39c12;
        font-size: 16px;
    }
    
    /* Well background and padding */
    #filter-section-well .well,
    #filter-sidebar .well {
        background-color: #f8f9fa;
        border: 1px solid #eeeeee;
        border-radius: 8px;
        padding: 20px;
    }
    
    /* Remove extra margin helpers */
    #filter-section-well .margin-bottom-05,
    #filter-section-well .margin-bottom-10 {
        height: 0;
        margin: 0;
    }
}