/**
 * Mobile-specific styles for MyFilters plugin
 *
 * @package    MyFilters
 * @subpackage MyFilters/public/css
 */

/* Hide mobile UI elements BY DEFAULT */
.myfilters-mobile-bar,
.myfilters-mobile-panel,
.myfilters-mobile-overlay,
.myfilters-mobile-panel-footer,
.myfilters-mobile-panel .myfilters-apply-btn,
.myfilters-mobile-panel .myfilters-reset-btn {
    display: none !important; /* Hide by default */
    visibility: hidden !important; /* Reinforce hiding */
}

/* Keep base styles for the bar, panel, overlay separate from display */
.myfilters-mobile-bar {
    /* Non-display base styles */
    position: sticky;
    top: 0;
    left: 0; /* Align to left edge */
    right: 0;
    background-color: transparent;
    box-shadow: none;
    z-index: 100;
    height: 50px;
    width: 100vw !important; /* Force viewport width */
    max-width: 100vw !important; /* Override any theme max-width */
    padding: 0 !important; /* REMOVE padding */
    box-sizing: border-box;
    overflow: visible !important; /* Ensure bar allows children to overflow */
}
.myfilters-mobile-panel {
    /* Non-display base styles */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    height: 90vh;
    max-height: 90vh;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    overflow-x: visible !important; /* ADDED: Allow content to overflow horizontally */
}
.myfilters-mobile-overlay {
    /* Non-display base styles */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important; /* Allow vertical touch actions */
}

/* Hide desktop filters on mobile & TABLET */
@media (max-width: 1024px) { /* Increased from 767px to include tablets */
    /* Prevent body horizontal scroll */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Hide all filter elements except those in footers */
    .myfilters-widget-container,
    .myfilters-widget, 
    .myfilters-widget-filters,
    .myfilters-shortcode-filters,
    .widget_myfilters_widget,
    .myfilters-desktop-filter,
    .woocommerce-widget-layered-nav,
    .filter-widgets-container,
    .sidebar .widget_layered_nav,
    .sidebar .widget_product_categories,
    .filter-sidebar,
    .woocommerce-sidebar-area,
    body.theme-storefront .widget-area .widget_layered_nav,
    body.theme-astra .widget-area .woocommerce-widget-layered-nav {
        display: none !important;
    }
    
    /* Exception for items in footer */
    footer .myfilters-widget-container,
    footer .myfilters-widget,
    .site-footer .myfilters-widget,
    .footer-widgets .myfilters-widget,
    [class*="footer"] .myfilters-widget,
    #footer .myfilters-widget {
        display: block !important;
    }
    
    /* SHOW mobile bar ONLY on smaller screens when active */
    .myfilters-mobile-bar.active {
        display: flex !important; 
        visibility: visible !important; /* Explicitly show */
        flex-direction: row;
        align-items: center;
        width: 100vw !important; 
        max-width: 100vw !important; 
        padding: 0 !important; 
        position: relative;
        overflow: visible !important; 
        left: 0; 
    }

    /* Show overlay/panel when they get the 'open' class (JS controlled) */
    .myfilters-mobile-panel.open,
    .myfilters-mobile-overlay.open {
        display: flex !important; /* Or block depending on the element */
        visibility: visible !important; /* Explicitly show */
    }

    /* ADD: Show panel footer and buttons ONLY when panel is open */
    .myfilters-mobile-panel.open .myfilters-mobile-panel-footer,
    .myfilters-mobile-panel.open .myfilters-apply-btn,
    .myfilters-mobile-panel.open .myfilters-reset-btn {
        display: flex !important; /* Or inline-block if needed */
        visibility: visible !important;
    }

    /* Explicitly ensure footer remains visible */
    footer, 
    .site-footer, 
    .footer-widgets, 
    .footer-area, 
    .footer-sidebar,
    [class*="footer"],
    #footer,
    .footer {
        display: block !important; 
        visibility: visible !important;
    }
}

/* Show desktop filters ONLY on larger screens */
@media (min-width: 1025px) {
    /* ADD: Explicitly hide mobile elements on desktop WITH HIGH SPECIFICITY */
    body .myfilters-mobile-bar,
    body .myfilters-mobile-panel,
    body .myfilters-mobile-overlay,
    body .myfilters-mobile-panel-footer,
    body .myfilters-mobile-panel .myfilters-apply-btn,
    body .myfilters-mobile-panel .myfilters-reset-btn {
        display: none !important;
        visibility: hidden !important;
    }

    /* ADD: Explicitly hide the DESKTOP button container on desktop */
    .myfilters-widget-filters .filter-buttons {
        display: none !important;
    }

    /* Show desktop elements (Reverse of the mobile hiding rules) */
    .myfilters-widget-container,
    .myfilters-widget, 
    .myfilters-widget-filters,
    .myfilters-shortcode-filters,
    .widget_myfilters_widget,
    .myfilters-desktop-filter,
    .woocommerce-widget-layered-nav,
    .filter-widgets-container,
    .sidebar .widget_layered_nav,
    .sidebar .widget_product_categories,
    .filter-sidebar,
    .woocommerce-sidebar-area,
    body.theme-storefront .widget-area .widget_layered_nav,
    body.theme-astra .widget-area .woocommerce-widget-layered-nav {
        display: block !important; /* Or appropriate display value */
    }
}

/* Mobile Filter Bar - FORCE Full Width & Visible Overflow */
.myfilters-mobile-bar.active {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100vw !important; /* Force viewport width */
    max-width: 100vw !important; /* Override any theme max-width */
    padding: 0 !important; /* REMOVE padding */
    position: relative;
    overflow: visible !important; /* Ensure bar allows children to overflow */
    left: 0; /* Ensure alignment */
}

/* Remove gradient from the bar */
.myfilters-mobile-bar.active::after {
    content: none !important;
    display: none !important;
}

/* Filter Icon - Add margin since bar padding is removed */
.myfilters-mobile-filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3AA6B9;
    height: 40px;
    min-width: 80px;
    padding: 0 12px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    margin-left: 0px !important; /* Reduced margin from 16px */
}

.myfilters-filter-icon {
    display: flex;
    align-items: center;
    margin-right: 6px;
    color: #ffffff;
}

.myfilters-filter-text {
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    margin-right: 4px;
    display: flex;
    align-items: center;
}

.myfilters-active-count {
    position: relative;
    top: auto;
    right: auto;
    background-color: #ffffff;
    color: #29C3B9;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    box-sizing: border-box;
}

/* Scrollable Filter Chips - Adjust for full-width parent with NO padding */
.myfilters-mobile-filter-chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    overflow-x: auto;
    padding: 0 16px 0 16px !important; /* Keep internal padding for chip alignment */
    margin-left: 0 !important; /* RESET negative margin */
    margin-right: 0 !important; /* RESET negative margin */
    width: 100% !important; /* Full width of parent (now 100vw) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-behavior: smooth;
    position: relative !important;
    box-sizing: border-box !important;
}

.myfilters-mobile-filter-chips::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Gradient MOVED to the chips container - NOW REMOVED */
.myfilters-mobile-filter-chips::after {
    content: none !important;
    display: none !important;
    /*
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: 30px !important;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9)) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    */
}

.myfilters-filter-chip {
    white-space: nowrap;
    padding: 8px 14px;
    margin-right: 10px;
    background-color: #f5f5f5;
    border-radius: 20px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.myfilters-filter-chip.active {
    background-color: rgba(58, 166, 185, 0.1);
    color: #3AA6B9;
    border-color: rgba(58, 166, 185, 0.2);
}

.myfilters-chip-count {
    margin-left: 6px;
    font-size: 11px;
    background-color: #3AA6B9;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.myfilters-no-filters {
    padding: 10px;
    color: #999;
    font-style: italic;
}

/* Slide-up Panel - Allow horizontal overflow */
.myfilters-mobile-panel.open {
    transform: translateY(0);
}

/* Panel Header */
.myfilters-mobile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px 16px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.myfilters-mobile-panel-header:after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background-color: #ddd;
    border-radius: 4px;
}

.myfilters-panel-title {
    font-size: 16px;
    font-weight: 600;
    padding-top: 8px;
    color: #333;
}

.myfilters-panel-close {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.myfilters-panel-close:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Panel Content - Ensure default padding & ALLOW horizontal overflow */
.myfilters-mobile-panel-content {
    flex: 1;
    overflow-y: auto; /* Keep vertical scroll */
    padding: 16px 16px !important; /* Default horizontal padding */
    position: relative;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important; 
    overflow-x: visible !important; /* ADD BACK: Allow inner negative margins to work */
    touch-action: pan-y !important; /* Explicitly allow vertical scrolling */
}

/* Standard filter group styles - Should respect parent padding */
.myfilters-filter-group {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px; 
    width: 100%;
    box-sizing: border-box;
    /* Padding is inherited from .myfilters-mobile-panel-content */
    position: relative; /* Needed for absolute positioning of pseudo-elements */
}

/* Filter Group (Image Type) - REMOVE specific padding/margin overrides */
.myfilters-filter-group:has(.myfilters-group-values:has(.filter-label-type-image)) {
    /* Inherit standard group styles */
    position: relative !important; /* Still needed for potential pseudo-elements if any remain, but not gradient */
    /* Remove gradient from here */
}

/* REMOVE Gradient from Filter Group - Commented out code REMOVED */
/* 
.myfilters-filter-group:has(.myfilters-group-values:has(.filter-label-type-image))::after {
    content: none !important; 
    display: none !important;
} 
*/

/* REMOVE Gradient from the Inner Scroll Container - NOW REMOVED */
.myfilters-group-values:has(.filter-label-type-image)::after {
    content: none !important;
    display: none !important;
    /*
    position: absolute !important;
    right: 0 !important;
    top: 0 !important; 
    height: 100% !important; 
    width: 30px !important;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9)) !important;
    pointer-events: none !important;
    z-index: 100 !important;
    */
}

/* Adjust image filter labels for horizontal scrolling */
#myfiltersMobilePanel .filter-label-type-image,
.myfilters-mobile-panel .filter-label-type-image,
#myfiltersMobilePanel .myfilters-checkbox-label.filter-label-type-image,
.myfilters-mobile-panel .myfilters-checkbox-label.filter-label-type-image {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    /*justify-content: flex-start !important; */
    text-align: center !important;
    margin: 0 0 !important;
    padding: 2px !important;
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    min-width: 110px !important; /* Increased from 85px */
    max-width: 110px !important; /* Increased from 85px */
    width: 110px !important; /* Increased from 85px */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
    cursor: pointer !important;
    position: relative !important;
}

/* Text filter labels - ensure proper spacing and layout */
.myfilters-mobile-panel .myfilters-checkbox-label,
.myfilters-mobile-panel .filter-label-type-text,
.myfilters-mobile-panel .myfilters-value-item label,
.myfilters-mobile-panel .filter-checkbox-label,
#myfiltersMobilePanel .myfilters-checkbox-label,
#myfiltersMobilePanel .filter-label-type-text,
#myfiltersMobilePanel .myfilters-value-item label,
#myfiltersMobilePanel .filter-checkbox-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Label left, checkbox right */
    padding: 6px 0 !important;
    width: 100% !important;
    margin-bottom: 4px !important; /* Add spacing between items */
    flex-direction: row !important; /* Ensure horizontal layout */
}

/* Fix spacing for mobile filter values */
.myfilters-mobile-panel .myfilters-value-item,
#myfiltersMobilePanel .myfilters-value-item {
    margin-bottom: 10px !important; /* Increased spacing between items */
    padding: 0 !important;
}

/* Enhance label text display */
.myfilters-mobile-panel .filter-value-label,
.myfilters-mobile-panel .myfilters-value-label,
.myfilters-mobile-panel .filter-label-text-wrapper,
#myfiltersMobilePanel .filter-value-label,
#myfiltersMobilePanel .myfilters-value-label,
#myfiltersMobilePanel .filter-label-text-wrapper {
    flex-grow: 1 !important;
    order: 1 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    margin-right: 10px !important;
    font-size: 14px !important;
    display: block !important;
}

/* Mobile checkbox styling - make them properly visible */
.myfilters-mobile-panel input[type="checkbox"],
.myfilters-mobile-panel input[type="radio"],
#myfiltersMobilePanel input[type="checkbox"],
#myfiltersMobilePanel input[type="radio"],
.myfilters-mobile-panel .myfilters-checkbox-label input[type="checkbox"],
.myfilters-mobile-panel .filter-label-type-text input[type="checkbox"],
.myfilters-mobile-panel .myfilters-value-item input[type="checkbox"],
.myfilters-mobile-panel .filter-checkbox-label input[type="checkbox"],
#myfiltersMobilePanel .myfilters-checkbox-label input[type="checkbox"],
#myfiltersMobilePanel .filter-label-type-text input[type="checkbox"],
#myfiltersMobilePanel .myfilters-value-item input[type="checkbox"],
#myfiltersMobilePanel .filter-checkbox-label input[type="checkbox"] {
    order: 2 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #fff !important;
    border: 1px solid #bbb !important;
    border-radius: 3px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    display: inline-block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transform: scale(1.1) !important;
    float: none !important;
    clear: none !important;
    clip: auto !important;
}

/* Style the checked state for mobile checkboxes */
.myfilters-mobile-panel input[type="checkbox"]:checked,
#myfiltersMobilePanel input[type="checkbox"]:checked,
.myfilters-mobile-panel .myfilters-value-checkbox:checked,
#myfiltersMobilePanel .myfilters-value-checkbox:checked {
    background-color: #3AA6B9 !important;
    border-color: #3AA6B9 !important;
}

/* CONSOLIDATED: Style the checkbox checkmark for mobile - SINGLE SOURCE OF TRUTH */
.myfilters-mobile-panel input[type="checkbox"]:checked::before,
#myfiltersMobilePanel input[type="checkbox"]:checked::before,
.myfilters-mobile-panel .myfilters-value-checkbox:checked::before,
#myfiltersMobilePanel .myfilters-value-checkbox:checked::before,
.myfilters-mobile-panel .filter-label-type-text input[type="checkbox"]:checked::before,
#myfiltersMobilePanel .filter-label-type-text input[type="checkbox"]:checked::before,
.filter-label-type-text input[type="checkbox"]:checked::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 7px !important;
    top: 3px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* REMOVE any potential ::after styles that might create duplicate checkmarks */
.myfilters-mobile-panel input[type="checkbox"]:checked::after,
#myfiltersMobilePanel input[type="checkbox"]:checked::after,
.myfilters-mobile-panel .myfilters-value-checkbox:checked::after,
#myfiltersMobilePanel .myfilters-value-checkbox:checked::after,
.myfilters-mobile-panel .filter-label-type-text input[type="checkbox"]:checked::after,
#myfiltersMobilePanel .filter-label-type-text input[type="checkbox"]:checked::after,
.filter-label-type-text input[type="checkbox"]:checked::after {
    content: none !important;
    display: none !important;
}

/* Fix radio buttons if needed */
.myfilters-mobile-panel input[type="radio"],
#myfiltersMobilePanel input[type="radio"] {
    border-radius: 50% !important;
}

.myfilters-mobile-panel input[type="radio"]:checked::before,
#myfiltersMobilePanel input[type="radio"]:checked::before {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: white !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Override any styles that might be hiding or transforming checkboxes */
body .myfilters-mobile-panel input[type="checkbox"],
body #myfiltersMobilePanel input[type="checkbox"],
body .myfilters-mobile-panel .myfilters-value-checkbox,
body #myfiltersMobilePanel .myfilters-value-checkbox {
    visibility: visible !important;
    display: inline-block !important;
    opacity: 1 !important;
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: auto !important;
    float: none !important;
    clip: auto !important;
}

/* Hide ONLY image type checkboxes */
.myfilters-mobile-panel .filter-label-type-image input[type="checkbox"],
.myfilters-mobile-panel .filter-label-type-image input[type="radio"],
#myfiltersMobilePanel .filter-label-type-image input[type="checkbox"],
#myfiltersMobilePanel .filter-label-type-image input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* CONSOLIDATED: Image sizing for horizontal scrolling - FIXED SIZE FOR ALL IMAGES */
#myfiltersMobilePanel .filter-value-image img,
.myfilters-mobile-panel .filter-value-image img {
    width: 106px !important; /* Increased to match new container size minus padding */
    height: 106px !important; /* Increased to match new container size minus padding */
    object-fit: contain !important; /* Maintain aspect ratio */
    display: block !important;
    margin: 0 auto 0 auto !important;
    border-radius: 4px !important;
}

/* Override other image styling to ensure consistency */
.myfilters-mobile-panel .filter-label-type-image img,
#myfiltersMobilePanel .filter-label-type-image img {
    width: 106px !important; 
    height: 106px !important;
    max-width: 106px !important;
    max-height: 106px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 0 auto !important;
    float: none !important;
    border-radius: 4px !important;
}

/* CONSOLIDATED: Label text styles - CLOSER TO IMAGES */
.myfilters-mobile-panel .filter-label-type-image .filter-value-label,
#myfiltersMobilePanel .filter-label-type-image .filter-value-label,
.myfilters-mobile-panel .filter-label-type-image .filter-label-text-wrapper,
#myfiltersMobilePanel .filter-label-type-image .filter-label-text-wrapper {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    order: 2 !important; /* Force text second */
    margin-top: 0px !important; /* Reduced to bring text right next to image */
    font-size: 13px !important;
    line-height: 1.2 !important;
}

/* CONSOLIDATED: Image container styles - CONSISTENT SPACING */
.myfilters-mobile-panel .filter-label-type-image .filter-value-image,
#myfiltersMobilePanel .filter-label-type-image .filter-value-image,
.myfilters-mobile-panel .filter-label-type-image .filter-value-display,
#myfiltersMobilePanel .filter-label-type-image .filter-value-display {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    order: 1 !important; /* Force image first */
    margin-bottom: 2px !important; /* Small consistent margin before text */
}

/* Create proper wrapper structure for image + text */
.myfilters-mobile-panel .filter-label-type-image-wrapper,
#myfiltersMobilePanel .filter-label-type-image-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

/* Ensure image container in selected state maintains text placement */
.myfilters-mobile-panel .filter-label-type-image.selected .filter-value-image,
#myfiltersMobilePanel .filter-label-type-image.selected .filter-value-image,
.myfilters-mobile-panel .filter-label-type-image:has(input:checked) .filter-value-image,
#myfiltersMobilePanel .filter-label-type-image:has(input:checked) .filter-value-image {
    margin-bottom: 0 !important; /* Ensure spacing is handled by the text margin-top */
}

/* Ensure label text wrapper is block level */
.myfilters-mobile-panel .filter-label-type-image .filter-label-text-wrapper,
#myfiltersMobilePanel .filter-label-type-image .filter-label-text-wrapper {
    display: block !important;
    text-align: center !important;
    clear: both !important;
    float: none !important;
    margin-top: -35px !important;
    width: 100% !important;
    position: static !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Clear any floats that might cause horizontal layout */
.myfilters-mobile-panel .filter-label-type-image:after,
#myfiltersMobilePanel .filter-label-type-image:after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Image styling to ensure proper sizing and spacing */
.myfilters-mobile-panel .filter-label-type-image img,
#myfiltersMobilePanel .filter-label-type-image img {
    max-width: 80% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 8px auto !important;
    float: none !important;
    border-radius: 4px !important;
}

/* Force all direct children to stack vertically */
.myfilters-mobile-panel .filter-label-type-image > *,
#myfiltersMobilePanel .filter-label-type-image > * {
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    position: relative !important;
}

/* Break any existing horizontal flexbox layouts */
.myfilters-mobile-panel .filter-label-type-image *,
#myfiltersMobilePanel .filter-label-type-image * {
    flex: none !important;
    float: none !important;
}

/* Specific fix for product count to appear inline with label */
.myfilters-mobile-panel .filter-label-type-image .count,
#myfiltersMobilePanel .filter-label-type-image .count {
    display: inline !important;
    width: auto !important;
    margin: 0 0 0 4px !important;
    vertical-align: baseline !important;
}

/* Text Wrapper Styling (Common for both types) */
.filter-label-text-wrapper {
    display: flex;
    align-items: baseline;
    width: 100%;
    margin-top: 4px;
}

/* Specific Text Wrapper Alignment for Text Filters */
.filter-label-type-text .filter-label-text-wrapper {
    order: 1; /* Text first */
    flex-grow: 1;
    justify-content: flex-start; /* Align left */
    margin-top: 0;
    margin-right: 10px;
}

/* Specific Text Wrapper Alignment for Image Filters */
.filter-label-type-image .filter-label-text-wrapper {
    justify-content: center; /* Center text below image */
}

/* Filter Value Label (Text under image or next to checkbox) */
.filter-value-label {
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    display: inline;
}

/* Filter Value Count */
.myfilters-value-count {
    font-size: 12px;
    color: #777;
    margin-left: 5px;
    white-space: nowrap;
}

/* Filter Input Base */
.myfilters-value-checkbox {
    cursor: pointer;
}

/* HIDE ONLY IMAGE checkboxes/radios */
.filter-label-type-image input[type="checkbox"].filter-input-type-image,
.filter-label-type-image input[type="radio"].filter-input-type-image {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Ensure TEXT checkboxes/radios are visible and positioned correctly */
.filter-label-type-text input[type="checkbox"].myfilters-value-checkbox,
.filter-label-type-text input[type="radio"].myfilters-value-checkbox {
    order: 2 !important; /* Checkbox second */
    margin-left: auto !important;
    position: relative !important; /* Reset hiding styles */
    opacity: 1 !important; 
    width: 20px !important; /* Consistent size */
    height: 20px !important;
    clip: auto !important;
    flex-shrink: 0 !important;
    display: block !important; /* Ensure display is set */
    visibility: visible !important; /* Ensure visibility */
    /* Add custom checkbox appearance */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #fff !important;
    border: 1px solid #bbb !important;
    border-radius: 3px !important;
    outline: none !important;
    vertical-align: middle !important;
    transform: scale(1.1) !important; /* Slightly larger */
}

/* Further ensure proper display for mobile text filter inputs */
#myfiltersMobilePanel .filter-label-type-text input[type="checkbox"],
#myfiltersMobilePanel .filter-label-type-text input[type="radio"],
.myfilters-mobile-panel .filter-label-type-text input[type="checkbox"],
.myfilters-mobile-panel .filter-label-type-text input[type="radio"] {
    margin-right: 0 !important; /* Remove right margin since we're using justify-content: space-between */
    margin-left: auto !important; /* Push to the right */
    transform: scale(1.1) !important;
    position: relative !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    clip: auto !important;
    display: block !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
}

.filter-label-type-text input[type="checkbox"]:checked,
.filter-label-type-text input[type="radio"]:checked {
    background-color: #3AA6B9;
    border-color: #3AA6B9;
    position: relative;
}

/* Center dot for Text Radio Buttons (if needed) */
.filter-label-type-text input[type="radio"] {
    border-radius: 50%; /* Make radios round */
}

.filter-label-type-text input[type="radio"]:checked::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #3AA6B9;
    border-radius: 50%;
    border: 2px solid white;
}

/* Panel Footer - Higher specificity selector to override conflicts */
body .myfilters-mobile-panel .myfilters-mobile-panel-footer,
body #myfiltersMobilePanel .myfilters-mobile-panel-footer,
.myfilters-mobile-panel-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Force buttons to the right */
    padding: 16px !important;
    border-top: 1px solid #eee !important;
    background-color: #fff !important;
    gap: 10px !important;
    flex-direction: row !important; /* Ensure horizontal layout */
    width: 100% !important; /* Full width to ensure proper alignment */
}

/* Reset button with higher specificity */
body .myfilters-mobile-panel .myfilters-reset-btn,
body #myfiltersMobilePanel .myfilters-reset-btn,
.myfilters-reset-btn {
    background-color: #f5f5f5;
    color: #444;
    border: 1px solid #ddd;
    padding: 8px 10px !important;
    border-radius: 4px;
    font-size: 13px !important;
    cursor: pointer;
    flex: 0 0 auto !important; /* Prevent flex stretching */
    width: auto !important; /* Override width constraints */
    min-width: 90px !important; /* Minimum width */
    margin-right: 10px !important;
    transition: background-color 0.2s ease;
    order: 1 !important; /* Ensure correct order */
    float: none !important; /* Clear any float */
    position: static !important; /* Reset positioning */
}

/* Apply button with higher specificity */
body .myfilters-mobile-panel .myfilters-apply-btn,
body #myfiltersMobilePanel .myfilters-apply-btn,
.myfilters-apply-btn {
    background-color: #3AA6B9;
    color: white;
    border: none;
    padding: 10px 12px !important;
    border-radius: 4px;
    font-size: 13px !important;
    cursor: pointer;
    flex: 0 0 auto !important; /* Prevent flex stretching */
    width: auto !important; /* Override width constraints */
    min-width: 100px !important; /* Minimum width */
    transition: background-color 0.2s ease;
    order: 2 !important; /* Ensure correct order */
    float: none !important; /* Clear any float */
    position: static !important; /* Reset positioning */
}

.myfilters-apply-btn.has-filters {
    background-color: #3AA6B9;
    font-weight: 500;
}

/* Overlay */
.myfilters-mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Loading indicators */
.myfilters-loading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-height: 30px;
}

.myfilters-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    color: #666;
    min-height: 100px;
    width: 100%;
}

.myfilters-loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid #3AA6B9;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error display */
.myfilters-error-container {
    padding: 20px;
    text-align: center;
    width: 100%;
}

.myfilters-error {
    color: #e53935;
    font-size: 14px;
    margin: 10px 0;
}

/* Body class for preventing scroll */
body.myfilters-panel-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Additional responsive adjustments */
@media (max-width: 480px) {
    .myfilters-filter-icon-text {
        display: none;
    }
    
    .myfilters-scrollable-filters {
        margin-left: 45px;
        width: calc(100% - 45px);
    }

    .myfilters-mobile-filter-chips {
        max-width: calc(100% - 82px); /* Adjust for smaller screens */
        width: 100%;
        padding-right: 12px;
    }
}

/* Mobile price slider styles */
#myfiltersMobilePanel .price-slider-container,
.myfilters-mobile-panel .price-slider-container {
    visibility: visible !important;
    display: block !important;
}

/* Mobile price histogram styles - Allow inline height */
#myfiltersMobilePanel .price-histogram-container,
.myfilters-mobile-panel .price-histogram-container {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 35px !important; /* Keep fixed container height */
    min-height: 35px !important;
    margin: 0 0 5px 0 !important;
    position: relative !important;
    overflow: hidden !important; /* Change back to hidden to clip bars */
    opacity: 1 !important;
}

#myfiltersMobilePanel .price-histogram,
.myfilters-mobile-panel .price-histogram {
    display: flex !important;
    visibility: visible !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 8px !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
}

#myfiltersMobilePanel .histogram-bar,
.myfilters-mobile-panel .histogram-bar,
.myfilters-histogram-bar {
    display: block !important;
    visibility: visible !important;
    flex: 1 1 auto !important;
    background-color: rgba(58, 166, 185, 0.5) !important;
    border: none !important;
    margin: 0 1px !important;
    border-radius: 2px 2px 0 0 !important;
    min-height: 1px !important; /* Minimal height, allow JS to override */
    height: auto; /* REMOVED !important - Allow inline style to override */
    max-height: 100% !important;
    transition: none !important;
    opacity: 1 !important;
    /* Height is now set by inline style from JS */
}

/* Override active/inactive state opacity just in case */
#myfiltersMobilePanel .histogram-bar.active,
.myfilters-mobile-panel .histogram-bar.active,
#myfiltersMobilePanel .histogram-bar.in-range,
.myfilters-mobile-panel .histogram-bar.in-range {
    background-color: rgba(58, 166, 185, 0.7) !important;
    opacity: 1 !important;
}

#myfiltersMobilePanel .histogram-bar.inactive,
.myfilters-mobile-panel .histogram-bar.inactive,
#myfiltersMobilePanel .histogram-bar.out-of-range,
.myfilters-mobile-panel .histogram-bar.out-of-range {
    background-color: rgba(58, 166, 185, 0.3) !important;
    opacity: 0.4 !important;
    min-height: 1px !important; /* Ensure inactive bars are minimally visible */
}

/* Ensure the price filter group itself is visible */
.myfilters-mobile-panel .myfilters-filter-group.price-filter,
#myfiltersMobilePanel .price-filter .myfilters-filter-heading {
    margin-bottom: 30px !important;
}

/* Remove all these conflicting styles */
#myfiltersMobilePanel .price-slider,
.myfilters-mobile-panel .price-slider {
    height: 4px !important;
    background: #f8f8f8 !important;
    border: 1px solid #eeeeee !important;
    box-shadow: none !important;
    margin: 3px 10px 30px !important;
}

#myfiltersMobilePanel .price-slider.noUi-target,
.myfilters-mobile-panel .price-slider.noUi-target {
    box-shadow: none !important;
    border: 1px solid #eeeeee !important;
    background: #f8f8f8 !important;
}

/* Price slider specific touch actions */
#myfiltersMobilePanel .price-slider,
.myfilters-mobile-panel .price-slider,
.myfilters-mobile-panel .noUi-handle,
#myfiltersMobilePanel .noUi-handle {
    touch-action: none !important; /* Allow all touch interactions on slider */
}

/* Original slider handle styling */
#myfiltersMobilePanel .price-slider .noUi-handle,
.myfilters-mobile-panel .price-slider .noUi-handle {
    width: 16px !important;
    height: 16px !important;
    top: -7px !important;
    right: -8px !important;
    box-shadow: none !important;
    border-radius: 50% !important; /* Keep this for rounded handles */
}

#myfiltersMobilePanel .price-slider .noUi-connect,
.myfilters-mobile-panel .price-slider .noUi-connect {
    background-color: #3AA6B9 !important;
}

#myfiltersMobilePanel .price-slider-values,
.myfilters-mobile-panel .price-slider-values {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 15px !important;
    width: 100% !important; /* Full width */
    gap: 12px !important; /* Increase gap for better spacing */
    flex-wrap: nowrap !important; /* Prevent wrapping on narrow screens */
}

/* Styles for mobile input container - make full width and more flexible */
#myfiltersMobilePanel .price-input-container,
.myfilters-mobile-panel .price-input-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important; /* Equal flex growth */
    width: 100% !important; /* Full width */
    min-width: 0 !important; /* Allow shrinking below min-content */
    max-width: none !important;
    margin: 0 !important;
}

/* Styles for the mobile currency symbol */
#myfiltersMobilePanel .price-input-container .currency-symbol,
.myfilters-mobile-panel .price-input-container .currency-symbol {
    position: absolute;
    left: 12px; /* Consistent with desktop */
    top: 50%;
    transform: translateY(-50%);
    color: #757575;
    pointer-events: none;
    z-index: 1;
    font-size: 14px;
}

/* Make input fields take full container width */
#myfiltersMobilePanel .price-slider-input,
.myfilters-mobile-panel .price-slider-input {
    width: 100% !important;
    min-width: 0 !important; /* Allow inputs to shrink below min-content */
    max-width: 100% !important;
    height: 40px !important;
    padding: 8px 12px 8px 30px !important;
    border: 1px solid #ccc !important;
    border-radius: 20px !important;
    text-align: right !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    position: relative !important;
    background-color: #f9f9f9 !important;
    background-color: #f9f9f9 !important; /* Light background */
    -moz-appearance: textfield !important; /* Hide spinners */
}

/* Hide mobile spinners */
#myfiltersMobilePanel .price-slider-input::-webkit-outer-spin-button,
#myfiltersMobilePanel .price-slider-input::-webkit-inner-spin-button,
.myfilters-mobile-panel .price-slider-input::-webkit-outer-spin-button,
.myfilters-mobile-panel .price-slider-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide the separator */
#myfiltersMobilePanel .price-range-separator,
.myfilters-mobile-panel .price-range-separator {
    display: none; /* Hide separator */
}

/* Adjust mobile focus style */
#myfiltersMobilePanel .price-slider-input:focus,
.myfilters-mobile-panel .price-slider-input:focus {
    outline: none;
    border-color: #3AA6B9;
    background-color: #fff;
    box-shadow: 0 0 0 1px #3AA6B9;
}

/* Ensure price group has padding */
.myfilters-mobile-panel .myfilters-filter-group.price-filter,
#myfiltersMobilePanel .price-filter .myfilters-filter-heading {
    margin-bottom: 30px !important;
}

/* Match button styling with desktop for consistent button sizes on mobile */
.myfilters-mobile-panel .myfilters-apply-btn,
.myfilters-mobile-panel button.apply-filters,
.myfilters-mobile-panel .apply-filters {
    padding: 8px 10px !important;
    font-size: 13px !important;
    min-width: 90px !important;
    max-width: 120px !important;
    width: auto !important;
    display: inline-block !important;
}

.myfilters-mobile-panel .myfilters-reset-btn,
.myfilters-mobile-panel .reset-filters {
    padding: 8px 10px !important;
    font-size: 13px !important;
    min-width: 90px !important;
    max-width: 120px !important;
    width: auto !important;
    display: inline-block !important;
}

/* Further reduce spacing between filter items for mobile too */
.myfilters-mobile-panel .myfilters-value-label,
.myfilters-mobile-panel .myfilters-checkbox-label {
    margin-bottom: 2px !important;
    padding: 3px 0 !important;
    line-height: 1.2 !important;
}

.myfilters-mobile-panel .myfilters-value-item {
    margin-bottom: 2px !important;
}

/* Filter group spacing */
.myfilters-mobile-panel .myfilters-filter-group,
.myfilters-mobile-panel .filter-group {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
}

/* Fix for the Greek "προιοντα" button that's still purple */
.myfilters-mobile-bar button,
.myfilters-mobile-bar .button,
.myfilters-mobile-filter-bar button,
.myfilters-mobile-filter-bar .button,
button.myfilters-mobile-filter-button,
.myfilters-mobile-filter-button {
    background-color: #3AA6B9 !important;
    color: white !important;
    border-color: #3AA6B9 !important;
}

.myfilters-mobile-bar button:hover,
.myfilters-mobile-bar .button:hover,
.myfilters-mobile-filter-bar button:hover,
.myfilters-mobile-filter-bar .button:hover,
button.myfilters-mobile-filter-button:hover,
.myfilters-mobile-filter-button:hover {
    background-color: #2E8496 !important;
    border-color: #2E8496 !important;
}

/* Price slider */
.myfilters-mobile-filter-panel .price-filter-container {
    padding: 10px 15px 0;
}

/* Histogram styling */
.myfilters-mobile-filter-panel .myfilters-price-histogram {
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
    height: 35px;
}

.myfilters-mobile-filter-panel .myfilters-histogram-bar {
    flex: 1;
    background-color: rgba(58, 166, 185, 0.5);
    margin: 0 1px;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    transition: opacity 0.3s ease, height 0.3s ease;
}

.myfilters-mobile-filter-panel .myfilters-histogram-bar.in-range {
    opacity: 1;
    background-color: rgba(58, 166, 185, 0.7);
}

.myfilters-mobile-filter-panel .myfilters-histogram-bar.out-of-range {
    opacity: 0.3;
    background-color: rgba(58, 166, 185, 0.3);
}

/* Also update styles for the standard histogram-bar class */
.myfilters-mobile-filter-panel .histogram-bar.in-range {
    opacity: 1;
    background-color: rgba(58, 166, 185, 0.7) !important;
}

.myfilters-mobile-filter-panel .histogram-bar.out-of-range {
    opacity: 0.3;
    background-color: rgba(58, 166, 185, 0.3) !important;
}

/* Ensure the base color of histogram bars is also consistent with the theme */
.myfilters-mobile-filter-panel .price-histogram-container .histogram-bar,
.myfilters-mobile-filter-panel .price-histogram .histogram-bar {
    background-color: rgba(58, 166, 185, 0.5);
}

/* Update these rules to match the desktop colors EXACTLY */
#myfiltersMobilePanel .histogram-bar.active,
.myfilters-mobile-panel .histogram-bar.active,
#myfiltersMobilePanel .histogram-bar.in-range,
.myfilters-mobile-panel .histogram-bar.in-range {
    background-color: rgba(58, 166, 185, 0.7) !important;
    border-color: transparent !important;
    opacity: 1 !important;
}

#myfiltersMobilePanel .histogram-bar.inactive,
.myfilters-mobile-panel .histogram-bar.inactive,
#myfiltersMobilePanel .histogram-bar.out-of-range,
.myfilters-mobile-panel .histogram-bar.out-of-range {
    background-color: rgba(58, 166, 185, 0.3) !important;
    border-color: transparent !important;
    opacity: 0.3 !important;
}

#myfiltersMobilePanel .histogram-bar,
.myfilters-mobile-panel .histogram-bar,
.myfilters-histogram-bar {
    flex: 1 !important;
    background-color: rgba(58, 166, 185, 0.5) !important;
    border: none !important;
    margin: 0 1px !important;
    border-radius: 2px 2px 0 0 !important;
    min-height: 5% !important;
    transition: opacity 0.2s ease !important;
}

/* Important override styles for mobile inputs */
body .myfilters-mobile-panel .price-slider-container .price-slider-values .price-input-container,
body #myfiltersMobilePanel .price-slider-container .price-slider-values .price-input-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    max-width: none !important;
    margin: 0 !important;
}

body .myfilters-mobile-panel .price-slider-container .price-slider-values .price-input-container .currency-symbol,
body #myfiltersMobilePanel .price-slider-container .price-slider-values .price-input-container .currency-symbol {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #757575 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    font-size: 14px !important;
}

body .myfilters-mobile-panel .price-slider-container .price-slider-values .price-input-container .price-slider-input,
body #myfiltersMobilePanel .price-slider-container .price-slider-values .price-input-container .price-slider-input {
    width: 100% !important;
    min-width: 120px !important;
    height: 40px !important;
    padding: 8px 12px 8px 30px !important;
    border: 1px solid #ccc !important;
    border-radius: 20px !important;
    text-align: right !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    position: relative !important;
    background-color: #f9f9f9 !important;
    -moz-appearance: textfield !important;
}

body .myfilters-mobile-panel .price-slider-container .price-slider-values .price-input-container .price-slider-input:focus,
body #myfiltersMobilePanel .price-slider-container .price-slider-values .price-input-container .price-slider-input:focus {
    outline: none !important;
    border-color: #3AA6B9 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 1px #3AA6B9 !important;
}

/* Critical styles to remove/hide separator in mobile */
body .myfilters-mobile-panel .price-slider-container .price-slider-values .price-range-separator,
body #myfiltersMobilePanel .price-slider-container .price-slider-values .price-range-separator {
    display: none !important;
}

/* Added mobile optimizations for price inputs */
/* This section improves responsiveness for mobile price inputs */
@media (max-width: 767px) {
    /* Optimize price slider container */
    #myfiltersMobilePanel .price-slider-values,
    .myfilters-mobile-panel .price-slider-values,
    body .myfilters-mobile-panel .price-slider-container .price-slider-values,
    body #myfiltersMobilePanel .price-slider-container .price-slider-values {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 12px !important;
        margin-top: 15px !important;
    }
    
    /* Optimize input containers */
    #myfiltersMobilePanel .price-input-container,
    .myfilters-mobile-panel .price-input-container,
    body .myfilters-mobile-panel .price-slider-container .price-slider-values .price-input-container,
    body #myfiltersMobilePanel .price-slider-container .price-slider-values .price-input-container {
        position: relative !important;
        display: flex !important;
        flex: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }
    
    /* Optimize input fields */
    #myfiltersMobilePanel .price-slider-input,
    .myfilters-mobile-panel .price-slider-input,
    body .myfilters-mobile-panel .price-slider-container .price-slider-values .price-input-container .price-slider-input,
    body #myfiltersMobilePanel .price-slider-container .price-slider-values .price-input-container .price-slider-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        padding: 8px 12px 8px 30px !important;
        font-size: 15px !important;
    }
}

/* Further optimization for very small screens */
@media (max-width: 480px) {
    /* Reduce the gap */
    #myfiltersMobilePanel .price-slider-values,
    .myfilters-mobile-panel .price-slider-values,
    body .myfilters-mobile-panel .price-slider-container .price-slider-values,
    body #myfiltersMobilePanel .price-slider-container .price-slider-values {
        gap: 8px !important;
    }
    
    /* Adjust font size */
    #myfiltersMobilePanel .price-slider-input,
    .myfilters-mobile-panel .price-slider-input,
    body .myfilters-mobile-panel .price-slider-container .price-slider-values .price-input-container .price-slider-input,
    body #myfiltersMobilePanel .price-slider-container .price-slider-values .price-input-container .price-slider-input {
        font-size: 14px !important;
        padding: 8px 8px 8px 28px !important; /* Slightly reduce padding on very small screens */
    }
    
    /* Adjust currency symbol */
    #myfiltersMobilePanel .price-input-container .currency-symbol,
    .myfilters-mobile-panel .price-input-container .currency-symbol,
    body .myfilters-mobile-panel .price-slider-container .price-slider-values .price-input-container .currency-symbol,
    body #myfiltersMobilePanel .price-slider-container .price-slider-values .price-input-container .currency-symbol {
        left: 10px !important;
        font-size: 13px !important;
    }
}

/* Styles for Mobile App - Last item before closing brace */
.myfilters-active-filter-chip .remove-chip {
    margin-left: 6px;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

/* Price slider specific touch actions */
#myfiltersMobilePanel .price-slider,
.myfilters-mobile-panel .price-slider,
.myfilters-mobile-panel .noUi-handle,
#myfiltersMobilePanel .noUi-handle {
    touch-action: none !important; /* Allow all touch interactions on slider */
}

/* Mobile filter image grid layout - FINAL MAXIMUM FORCE COMPACTION */
.myfilters-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap, 10px);
    margin-top: 10px;
}

.myfilters-image-grid .myfilters-grid-item {
    height: var(--grid-item-height, 120px);
    position: relative;
}

.myfilters-image-grid.myfilters-grid-scrollable {
    padding-bottom: 5px; /* Add some space at the bottom for better scrolling */
}

/* Add a subtle fading shadow at the bottom to indicate scrollable content */
.myfilters-grid-scrollable::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top, rgba(255,255,255,0.7), rgba(255,255,255,0));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.myfilters-grid-scrollable:not([data-scroll-at-bottom="true"])::after {
    opacity: 1;
}

/* Improve appearance of filter grid items */
.myfilters-grid-item .filter-label-type-image {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 5px;
    border-radius: 8px;
    background-color: #f5f5f5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.myfilters-grid-item .filter-label-type-image:hover,
.myfilters-grid-item .filter-label-type-image.selected {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    background-color: #eef9f9;
}

.myfilters-grid-item .filter-value-image {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70%;
    width: 100%;
    overflow: hidden;
}

.myfilters-grid-item .filter-value-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.myfilters-grid-item .filter-label-text-wrapper {
    font-size: 12px;
    margin-top: 5px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2;
}

/* Filter heading with toggle button */
.myfilters-filter-heading-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px; /* Reduced from 10px */
}

.myfilters-filter-heading {
    margin: 0;
    flex: 1;
}

.myfilters-view-toggle {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: #666;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.myfilters-view-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

.myfilters-view-toggle svg {
    transition: transform 0.2s ease;
}

/* Scroll view for image filters */
.myfilters-image-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px; /* Use negative margin to extend to panel edges */
    padding: 5px 16px; /* Padding to compensate for negative margin */
    scrollbar-width: none; /* Firefox */
    width: calc(100% + 32px); /* Full width plus padding */
    box-sizing: border-box;
    /* Improved scroll snapping for smoother scrolling */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-scroll-snap-type: x mandatory;
    -webkit-scroll-snap-type: x mandatory;
    /* Enhanced touch scrolling */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}

.myfilters-image-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.myfilters-image-scroll .myfilters-grid-item {
    flex: 0 0 auto;
    width: 110px; /* Reduced from 120px */
    margin-right: 8px; /* Reduced from 10px */
    /* Ensure full item is visible with improved snap alignment */
    scroll-snap-align: center;
}

/* Common styles for image items in both views */
.myfilters-grid-item .filter-label-type-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 3px; /* Reduced from 5px */
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.myfilters-grid-item .filter-label-type-image:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.myfilters-grid-item .filter-label-type-image.selected {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Image styling for both views */
.myfilters-grid-item .filter-value-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
    border-radius: 6px;
    display: block;
    margin: 0 auto 2px; /* Reduced from 5px */
}

/* Label text for both views */
.myfilters-grid-item .filter-label-text-wrapper {
    width: 100%;
    text-align: center;
    font-size: 0.8em; /* Slightly reduced from 0.85em */
    line-height: 1.1; /* Slightly reduced from 1.2 */
    margin-top: 2px;
}

.myfilters-grid-item .filter-value-label {
    display: block;
    text-align: center;
    width: 100%;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 2.2em; /* Reduced from 2.4em */
}

/* Add responsive adjustments for different screen sizes */
@media (max-width: 360px) {
    /* For very small screens, make grid even more compact */
    .myfilters-image-grid {
        gap: 2px; /* Even more compact */
    }
    
    .myfilters-image-grid .filter-label-type-image {
        padding: 1px; /* Even more compact */
        border-radius: 4px;
    }
}

/* Apply to the group containing the grid/scroll */
#myfiltersMobilePanel .myfilters-group-values.myfilters-image-grid,
#myfiltersMobilePanel .myfilters-group-values.myfilters-image-scroll {
    padding: 0 !important;
    margin: 0 !important;
}

/* Apply to the overall filter group holding the image values */
#myfiltersMobilePanel .myfilters-filter-group:has(.myfilters-image-grid),
#myfiltersMobilePanel .myfilters-filter-group:has(.myfilters-image-scroll) {
    padding-top: 5px !important; /* Minimal top padding */
    padding-bottom: 5px !important; /* Minimal bottom padding */
    padding-left: 0 !important; /* No side padding */
    padding-right: 0 !important;
    margin-bottom: 5px !important; /* Minimal margin */
    border-bottom: 1px solid #eee !important; /* Keep separator */
}

/* ========================================================= */
/* END: AGGRESSIVE MOBILE GRID COMPACTION OVERRIDE           */
/* ========================================================= */

/* Remove the previous attempt rules - REMOVED */

/* Media queries for responsive grid items */
@media screen and (max-width: 480px) {
    .myfilters-image-grid {
        --grid-item-height: 100px;
        --grid-gap: 8px;
    }
    
    .myfilters-grid-item .filter-label-type-image {
        padding: 4px;
    }
    
    .myfilters-grid-item .filter-label-text-wrapper {
        font-size: 11px;
    }
}

@media screen and (max-width: 360px) {
    .myfilters-image-grid {
        --grid-item-height: 90px;
        --grid-gap: 6px;
    }
    
    .myfilters-grid-item .filter-label-text-wrapper {
        font-size: 10px;
    }
}

/* Fix for iOS scrolling in mobile filters */
.myfilters-mobile-panel-content {
    -webkit-overflow-scrolling: touch;
}

/* Scrollable Grid Shadows (Outer) */
.myfilters-filter-group {
    position: relative; /* Needed for absolute positioning of pseudo-elements */
}

/* Common styles for shadows */
.myfilters-filter-group::before,
.myfilters-filter-group::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 15px; /* Adjust shadow height as needed */
    z-index: 2; /* Ensure shadows are above the grid items */
    pointer-events: none; /* Allow clicks to pass through */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Top shadow */
.myfilters-filter-group::before {
    top: 38px; /* Pushed down to clear the heading (adjust as needed) */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}

/* Bottom shadow */
.myfilters-filter-group::after {
    bottom: 0; /* Position at the bottom of the filter group */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}

/* Show shadows based on classes added by JS - ONLY for GRID view */
.myfilters-filter-group:has(.myfilters-image-grid).has-scroll-top::before {
    opacity: 1;
}

.myfilters-filter-group:has(.myfilters-image-grid).has-scroll-bottom::after {
    opacity: 1;
}

/* Adjustments for the scrollable container itself */
.myfilters-group-values.myfilters-grid-scrollable {
    /* Make sure the scrollable container doesn't obscure the shadows */
    /* No specific changes needed here if shadows are on the parent */
    /* Remove the previous internal shadow attempt if it exists */
    box-shadow: none; 
}

/* Remove the old inner shadow style if present */
.myfilters-grid-scrollable:not([data-scroll-at-bottom="true"])::after {
   display: none; /* Disable the old internal bottom shadow */
   content: none;
}

/* Grid Scrollable Styles */
.myfilters-image-grid {
    display: grid; 
}

/* Fix spacing between filter groups with image grids */
.myfilters-filter-group:has(.myfilters-image-grid) {
    margin-bottom: 32px !important; /* Increase from default margin-bottom */
    padding-bottom: 16px !important; /* Add padding at the bottom */
}

/* Ensure images are fully visible and not cut off */
.myfilters-grid-item .filter-value-image img {
    max-width: 100% !important;
    max-height: 110px !important; /* Slightly increase from original */
    height: auto !important;
    width: auto !important;
    object-fit: contain !important; /* Ensure the entire image is visible */
    margin-bottom: 12px !important; /* Increase bottom margin to prevent text overlap */
}

/* Improve text label spacing */
.myfilters-grid-item .filter-label-text-wrapper {
    margin-top: 10px !important;
    padding-bottom: 8px !important; /* Add padding at the bottom */
}

/* Add specific fix for scrollable image grids */
.myfilters-group-values.myfilters-image-grid.myfilters-grid-scrollable {
    margin-bottom: 16px !important; /* Add margin at the bottom of scrollable grids */
    padding-bottom: 8px !important; /* Add padding at the bottom */
}

/* Ensure enough vertical space for images in grid items */
.myfilters-image-grid .myfilters-grid-item {
    min-height: 160px !important; /* Ensure enough height for the image */
}

/* Additional spacing between image filter groups and the next filter group */
.myfilters-filter-group[data-filter-type="prefix"]:has(.myfilters-image-grid) + .myfilters-filter-group[data-filter-type="prefix"] {
    margin-top: 32px !important; /* Add substantial space between groups */
    /* border-top: 1px solid rgba(0, 0, 0, 0.05) !important; /* REMOVED Optional: add a subtle divider */
    padding-top: 24px !important; /* Add padding at the top of the next group */
}

/* Ensure image containers have enough space for the full image */
.myfilters-value-item.myfilters-grid-item .filter-value-image {
    min-height: 120px !important; /* Ensure enough height for the image */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure images are fully visible with proper containment */
.myfilters-value-item.myfilters-grid-item .filter-value-image img {
    object-fit: contain !important;
    max-height: 110px !important;
    max-width: 100% !important; 
    height: auto !important;
    width: auto !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Improve text wrapper spacing and alignment */
.myfilters-grid-item .filter-label-text-wrapper {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    text-align: center !important;
}

/* Target the specific problem areas in your HTML */
.myfilters-filter-group[data-prefix-id="3741"] + .myfilters-filter-group[data-prefix-id="3745"],
.myfilters-filter-group[data-prefix-id="3745"] + .myfilters-filter-group[data-prefix-id="3754"] {
    margin-top: 36px !important; /* Even more space for these specific groups */
    padding-top: 24px !important; 
    position: relative !important;
}

/* Optional: add a subtle divider between specific groups */
.myfilters-filter-group[data-prefix-id="3741"] + .myfilters-filter-group[data-prefix-id="3745"]::before,
.myfilters-filter-group[data-prefix-id="3745"] + .myfilters-filter-group[data-prefix-id="3754"]::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}