/* =====================================================================
   Mulhern Sidebar Toggle: Collapse/Expand + Drag Resize CSS
   
   DESIGN:
   - Toggle tab positioned relative to #search-parent (NOT the widget)
   - When EXPANDED: Tab is on the RIGHT edge of the widget
   - When COLLAPSED: Tab moves to the LEFT edge of the container
   - Widget fully collapses (width: 0) to release space for results
   ===================================================================== */

/* =====================================================================
   CSS CUSTOM PROPERTIES
   ===================================================================== */
#search-parent {
    --mb-sw-width: 320px;
    --mb-sw-min-width: 280px;
    --mb-sw-max-width: 450px;
    --mb-toggle-tab-width: 40px;
    --mb-toggle-tab-height: 80px;
    --mb-primary-color: #018345;
    --mb-primary-hover: #016835;
    --mb-transition-speed: 0.3s;
}

/* =====================================================================
   BASE LAYOUT - DESKTOP (>=768px)
   ===================================================================== */
@media (min-width: 768px) {
    #search-parent {
        display: flex !important;
        align-items: flex-start !important;
        gap: 20px !important;
        position: relative !important;
    }

    /* Sidebar container */
    #search-parent #search-widget-div {
        flex: 0 0 var(--mb-sw-width) !important;
        width: var(--mb-sw-width) !important;
        max-width: var(--mb-sw-max-width) !important;
        min-width: 0 !important;
        position: relative !important;
        transition: flex-basis var(--mb-transition-speed) ease,
                    width var(--mb-transition-speed) ease,
                    margin var(--mb-transition-speed) ease,
                    padding var(--mb-transition-speed) ease,
                    opacity var(--mb-transition-speed) ease !important;
        overflow: visible !important;
    }

    /* Results container takes remaining space */
    #search-parent #search-data-div {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        transition: flex var(--mb-transition-speed) ease !important;
    }
}

/* =====================================================================
   TOGGLE TAB - The key element that stays visible
   Positioned relative to #search-parent, NOT the widget
   ===================================================================== */
.mb-toggle-tab {
    position: absolute !important;
    top: 100px !important;
    z-index: 1000 !important;
    width: var(--mb-toggle-tab-width) !important;
    height: var(--mb-toggle-tab-height) !important;
    background: #fff !important;
    border: 2px solid var(--mb-primary-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: left var(--mb-transition-speed) ease,
                right var(--mb-transition-speed) ease,
                background-color 0.2s ease, 
                box-shadow 0.2s ease,
                transform 0.2s ease !important;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* When EXPANDED: Tab on RIGHT edge of widget */
#search-parent:not(.mb-sidebar-collapsed) .mb-toggle-tab {
    left: calc(var(--mb-sw-width) - 2px) !important;
    right: auto !important;
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important;
}

/* When COLLAPSED: Tab on LEFT edge of container */
#search-parent.mb-sidebar-collapsed .mb-toggle-tab {
    left: 0 !important;
    right: auto !important;
    border-radius: 0 8px 8px 0 !important;
    border-left: 2px solid var(--mb-primary-color) !important;
}

.mb-toggle-tab:hover {
    background: #e8f5e9 !important;
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.25) !important;
}

.mb-toggle-tab:focus {
    outline: 3px solid rgba(1, 131, 69, 0.4) !important;
    outline-offset: 2px !important;
}

.mb-toggle-tab:active {
    transform: scale(0.95) !important;
}

/* Toggle Icon */
.mb-toggle-tab .mb-toggle-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.3s ease !important;
}

/* Arrow: points LEFT (◀) when expanded = "click to collapse/hide" */
#search-parent:not(.mb-sidebar-collapsed) .mb-toggle-tab .mb-toggle-icon::before {
    content: "◀" !important;
    color: var(--mb-primary-color) !important;
    font-size: 18px !important;
}

/* Arrow: points RIGHT (▶) when collapsed = "click to expand/show" */
#search-parent.mb-sidebar-collapsed .mb-toggle-tab .mb-toggle-icon::before {
    content: "▶" !important;
    color: var(--mb-primary-color) !important;
    font-size: 18px !important;
}

/* =====================================================================
   COLLAPSED STATE - Widget hidden, space recovered
   ===================================================================== */
#search-parent.mb-sidebar-collapsed #search-widget-div {
    flex-basis: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Results take full width when collapsed */
#search-parent.mb-sidebar-collapsed #search-data-div {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

/* =====================================================================
   EXPANDED STATE
   ===================================================================== */
#search-parent:not(.mb-sidebar-collapsed) #search-widget-div {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =====================================================================
   RESIZE HANDLE - Bottom-right corner only
   ===================================================================== */
#search-widget-div .mb-resize-handle {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 16px !important;
    height: 60px !important;
    z-index: 60 !important;
    cursor: ew-resize !important;
    touch-action: none !important;
    user-select: none !important;
    background: transparent !important;
    border-radius: 0 0 5px 0 !important;
    transition: background 0.2s ease !important;
}

#search-widget-div .mb-resize-handle::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 4px !important;
    height: 30px !important;
    background: radial-gradient(circle, rgba(0,0,0,0.25) 2px, transparent 2px) !important;
    background-size: 4px 8px !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

#search-widget-div .mb-resize-handle:hover {
    background: linear-gradient(to left, rgba(1, 131, 69, 0.15), transparent) !important;
}

#search-widget-div .mb-resize-handle:hover::before {
    opacity: 1 !important;
    background: radial-gradient(circle, var(--mb-primary-color) 2px, transparent 2px) !important;
    background-size: 4px 8px !important;
}

#search-widget-div .mb-resize-handle::after {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    bottom: 10px !important;
    right: 2px !important;
    width: 2px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 1px !important;
    transition: background 0.2s ease !important;
}

#search-widget-div .mb-resize-handle:hover::after {
    background: var(--mb-primary-color) !important;
}

/* Hide resize handle when collapsed */
#search-parent.mb-sidebar-collapsed #search-widget-div .mb-resize-handle {
    display: none !important;
}

/* =====================================================================
   LEGACY PIN BUTTON - Hidden (replaced by toggle tab)
   ===================================================================== */
#search-widget-div .mb-pin-btn {
    display: none !important;
}

/* =====================================================================
   DRAGGING STATE
   ===================================================================== */
body.mb-resizing,
body.mb-resizing * {
    cursor: ew-resize !important;
}

body.mb-resizing {
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.mb-resizing #search-widget-div .mb-resize-handle {
    background: linear-gradient(to left, rgba(1, 131, 69, 0.25), transparent) !important;
}

body.mb-resizing #search-widget-div .mb-resize-handle::after {
    background: var(--mb-primary-color) !important;
}

/* =====================================================================
   SCROLLBAR STYLING
   ===================================================================== */
#belts-search-widget,
#fabrications-search-widget {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}

#belts-search-widget::-webkit-scrollbar,
#fabrications-search-widget::-webkit-scrollbar {
    width: 8px !important;
}

#belts-search-widget::-webkit-scrollbar-track,
#fabrications-search-widget::-webkit-scrollbar-track {
    background: transparent !important;
}

#belts-search-widget::-webkit-scrollbar-thumb,
#fabrications-search-widget::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
}

#belts-search-widget::-webkit-scrollbar-thumb:hover,
#fabrications-search-widget::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35) !important;
}

/* =====================================================================
   TABLET & MOBILE (<=1024px)
   ===================================================================== */
@media (max-width: 1024px) {
    #search-parent {
        display: block !important;
        position: relative !important;
    }

    #search-parent #search-widget-div {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        transition: max-height var(--mb-transition-speed) ease,
                    opacity var(--mb-transition-speed) ease,
                    margin var(--mb-transition-speed) ease !important;
    }

    /* Hide resize handle on tablet/mobile */
    #search-widget-div .mb-resize-handle {
        display: none !important;
    }

    /* Toggle tab at top of widget area */
    .mb-toggle-tab {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 50px !important;
        border-radius: 8px !important;
        border: 2px solid var(--mb-primary-color) !important;
        margin-bottom: 10px !important;
    }

    #search-parent:not(.mb-sidebar-collapsed) .mb-toggle-tab {
        left: auto !important;
        border-left: 2px solid var(--mb-primary-color) !important;
    }

    #search-parent.mb-sidebar-collapsed .mb-toggle-tab {
        left: auto !important;
        margin-bottom: 20px !important;
    }

    /* Arrow points DOWN when expanded, UP when collapsed (mobile) */
    #search-parent:not(.mb-sidebar-collapsed) .mb-toggle-tab .mb-toggle-icon::before {
        content: "▲ Hide Filters" !important;
        font-size: 14px !important;
    }

    #search-parent.mb-sidebar-collapsed .mb-toggle-tab .mb-toggle-icon::before {
        content: "▼ Show Filters" !important;
        font-size: 14px !important;
    }

    /* Collapsed on mobile: hide content but keep toggle visible */
    #search-parent.mb-sidebar-collapsed #search-widget-div {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        opacity: 0 !important;
    }

    /* Keep widget wrapper visible for the toggle button */
    #search-parent.mb-sidebar-collapsed #search-widget-div {
        visibility: visible !important;
    }
}

/* =====================================================================
   DESKTOP CONTAINER CONSTRAINTS
   ===================================================================== */
@media (min-width: 1025px) {
    #search-parent,
    #search-parent.e-con,
    #search-parent .e-con-inner {
        max-width: 1400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
        box-sizing: border-box !important;
    }
}

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */
.mb-toggle-tab:focus-visible {
    outline: 3px solid var(--mb-primary-color) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    #search-widget-div,
    #search-data-div,
    .mb-toggle-tab,
    .mb-resize-handle,
    .mb-toggle-icon {
        transition: none !important;
    }
}

/* =====================================================================
   ELEMENTOR INTEGRATION
   ===================================================================== */
.elementor-sticky__spacer {
    display: block !important;
    height: auto !important;
}

#search-widget-div.e-con {
    overflow: visible !important;
}

/* =====================================================================
   RESPONSIVE LOOP GRID - Auto-fill columns based on available width
   This makes the grid add more columns when the sidebar collapses
   ===================================================================== */
@media (min-width: 768px) {
    /* Override Elementor's fixed column grid with auto-fill */
    #search-data-div .elementor-loop-container.elementor-grid,
    #search-data-div .e-loop-container,
    #search-data-div .elementor-grid {
        display: grid !important;
        /* Auto-fill: create as many ~280px columns as will fit */
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* Reset any Elementor column width constraints on grid items */
    #search-data-div .elementor-loop-container .e-loop-item,
    #search-data-div .elementor-grid > .e-con,
    #search-data-div .elementor-grid > .elementor-element,
    #search-data-div .elementor-grid-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important; /* Override any flex settings */
    }

    /* When sidebar is EXPANDED - results area is narrower, fewer columns */
    #search-parent:not(.mb-sidebar-collapsed) #search-data-div .elementor-grid,
    #search-parent:not(.mb-sidebar-collapsed) #search-data-div .e-loop-container {
        /* With sidebar visible (~320px), remaining space fits ~3-4 columns */
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }

    /* When sidebar is COLLAPSED - full width, more columns possible */
    #search-parent.mb-sidebar-collapsed #search-data-div .elementor-grid,
    #search-parent.mb-sidebar-collapsed #search-data-div .e-loop-container {
        /* Full width can fit 5-6 columns at ~250px each */
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    }
}

/* Larger screens - can fit even more columns when collapsed */
@media (min-width: 1400px) {
    #search-parent.mb-sidebar-collapsed #search-data-div .elementor-grid,
    #search-parent.mb-sidebar-collapsed #search-data-div .e-loop-container {
        /* On wide screens, allow smaller min to fit more columns */
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    }
}

/* Extra large screens */
@media (min-width: 1800px) {
    #search-parent.mb-sidebar-collapsed #search-data-div .elementor-grid,
    #search-parent.mb-sidebar-collapsed #search-data-div .e-loop-container {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    }
}