/* Container Formatting */
.optipro-filter-container {
    background: #FFFFFF !important;
    border: 1px solid #E2D7C5 !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    color: #3B2B1E !important;
    font-family: inherit !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 25px !important;
}

.ct-sidebar, aside.ct-sidebar, #secondary, .widget-area, aside.sidebar, #sidebar {
    max-width: 280px !important;
    box-sizing: border-box !important;
}

/* Header */
.optipro-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #E2D7C5 !important;
    margin-bottom: 12px !important;
}

.optipro-title {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #3B2B1E !important;
    text-transform: capitalize !important;
}

.optipro-clear-btn {
    background: transparent !important;
    border: 1px solid #B9924A !important;
    color: #B9924A !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.optipro-clear-btn:hover {
    background: #B9924A !important;
    color: #FFFFFF !important;
}

.optipro-group-content {
    height: auto !important;
    overflow: visible !important;
}

/* AJAX Visual Loading State */
.optipro-ajax-loading {
    opacity: 0.4 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease-in-out !important;
}

/* Desktop Only: Hide Floating Drawer triggers */
@media (min-width: 993px) {
    .optipro-global-floating-bar,
    .optipro-offcanvas-drawer, 
    .optipro-drawer-backdrop {
        display: none !important;
    }
}

/* Mobile & Tablet Only */
@media (max-width: 992px) {
    /* Hide the standard widget on mobile to prevent duplicate/collapsed inline views */
    .widget-area .optipro-filter-container,
    #sidebar .optipro-filter-container,
    .ct-sidebar .optipro-filter-container {
        display: none !important;
    }

    /* Centered Bottom Floating Button */
    .optipro-global-floating-bar { 
        position: fixed !important; 
        bottom: 20px !important; 
        left: 50% !important; 
        transform: translateX(-50%) !important; 
        z-index: 999997 !important; 
        display: flex !important;
        justify-content: center !important;
    }

    .optipro-float-btn { 
        background: #3B2B1E !important; 
        color: #FFFFFF !important; 
        border: 1px solid #B9924A !important; 
        padding: 10px 24px !important; 
        border-radius: 30px !important; 
        font-size: 13px !important; 
        font-weight: 700 !important; 
        box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important; 
        cursor: pointer !important; 
        display: flex !important; 
        align-items: center !important; 
        gap: 6px !important; 
        white-space: nowrap !important;
    }

    .optipro-drawer-backdrop { 
        display: none; 
        position: fixed !important; 
        inset: 0 !important; 
        background: rgba(0,0,0,0.5) !important; 
        z-index: 999998 !important; 
    }
    
    .optipro-offcanvas-drawer { 
        position: fixed !important; 
        bottom: -100% !important; 
        left: 0 !important; 
        right: 0 !important; 
        background: #FFFFFF !important; 
        border-radius: 14px 14px 0 0 !important; 
        padding: 18px !important; 
        max-height: 85vh !important; 
        overflow-y: auto !important; 
        z-index: 999999 !important; 
        transition: bottom 0.3s ease !important; 
    }
    
    .optipro-offcanvas-drawer.active { 
        bottom: 0 !important; 
    }
}

/* Amazon-Style Dual Range Price Slider */
.optipro-price-slider-wrap { margin-top: 10px !important; }
.optipro-slider-container { position: relative !important; height: 6px !important; background: #E2D7C5 !important; border-radius: 4px !important; margin: 12px 6px 16px 6px !important; }
.optipro-slider-track { position: absolute !important; height: 100% !important; background: #B9924A !important; border-radius: 4px !important; }
.optipro-range-slider { position: absolute !important; width: 100% !important; height: 6px !important; top: 0 !important; left: 0 !important; background: none !important; pointer-events: none !important; -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; }
.optipro-range-slider::-webkit-slider-thumb { height: 16px !important; width: 16px !important; border-radius: 50% !important; background: #B9924A !important; border: 2px solid #FFFFFF !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; pointer-events: auto !important; -webkit-appearance: none !important; cursor: pointer !important; }
.optipro-range-slider::-moz-range-thumb { height: 16px !important; width: 16px !important; border-radius: 50% !important; background: #B9924A !important; border: 2px solid #FFFFFF !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; pointer-events: auto !important; cursor: pointer !important; }

.optipro-price-inputs { display: flex !important; align-items: center !important; gap: 6px !important; margin-top: 8px !important; }
.optipro-price-inputs input { width: 65px !important; padding: 4px 6px !important; border: 1px solid #E2D7C5 !important; border-radius: 4px !important; font-size: 12px !important; }
.optipro-price-inputs button { background: #B9924A !important; color: #fff !important; border: none !important; padding: 4px 10px !important; border-radius: 4px !important; cursor: pointer !important; font-size: 12px !important; font-weight: bold !important; }

/* Group Typography */
.optipro-group-title { font-size: 12.5px !important; font-weight: 700 !important; color: #3B2B1E !important; margin: 0 0 6px 0 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.optipro-divider { border-top: 1px solid #E2D7C5 !important; margin: 10px 0 !important; }
.optipro-cat-tree, .optipro-sub-tree, .optipro-chk-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.optipro-chk-label { display: flex !important; align-items: center !important; gap: 7px !important; padding: 2.5px 0 !important; cursor: pointer !important; font-size: 12.5px !important; color: #3B2B1E !important; }
.optipro-chk { accent-color: #B9924A !important; width: 14px !important; height: 14px !important; cursor: pointer !important; }
.optipro-sub-tree { padding-left: 14px !important; }
.optipro-arrow-icon { font-size: 8px !important; color: #B9924A !important; margin-left: auto !important; cursor: pointer !important; transition: transform 0.2s ease !important; }
.optipro-parent-li.sub-collapsed .optipro-sub-tree { display: none !important; }
.optipro-parent-li.sub-collapsed .optipro-arrow-icon { transform: rotate(-90deg) !important; }
.optipro-chips-wrap { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-top: 6px !important; }
.optipro-chip { background: #FAF7F2 !important; border: 1px solid #E2D7C5 !important; border-radius: 4px !important; padding: 2px 6px !important; font-size: 11px !important; }
.optipro-chip-remove { cursor: pointer !important; color: #990000 !important; font-weight: bold !important; margin-left: 3px !important; }