/**
 * All of the CSS for the public-facing functionality of the plugin.
 *
 * @package    MyFilters
 * @subpackage MyFilters/public/css
 */

/* Product Edit Meta Box Styles */
.myfilters-metabox-container {
    padding: 10px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.myfilters-metabox-container .description {
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.5;
}

#myfilters-categories-notice {
    margin-bottom: 15px;
}

#myfilters-categories-notice p {
    padding: 12px 15px;
    margin: 0;
    background: #f0f6fc;
    border-left: 4px solid #007cba;
    font-size: 13px;
    line-height: 1.5;
}

/* Prefix Section Styles */
.prefix-section {
    margin-bottom: 15px;
    border: 1px solid #e2e4e7;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

.prefix-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e2e4e7;
    border-radius: 4px 4px 0 0;
}

.prefix-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: #1e1e1e;
}

.prefix-description {
    padding: 10px 15px 0;
    margin: 0;
    font-size: 12px;
    color: #757575;
    font-style: italic;
}

.prefix-values {
    padding: 10px 15px 15px;
}

/* Dropdown Styles */
.dropdown-container {
    position: relative;
    width: 100%;
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

.dropdown-header:hover {
    border-color: #999;
}

.dropdown-toggle {
    color: #757575;
    transition: transform 0.2s ease;
}

.dropdown-container.open .dropdown-toggle {
    transform: rotate(180deg);
}

.dropdown-content {
    display: none;
    position: absolute;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-top: -1px;
}

.dropdown-container.open .dropdown-content {
    display: block;
}

.selected-count {
    font-size: 13px;
    color: #555;
}

/* Checkbox List Styles */
.checkbox-list {
    padding: 8px;
}

.checkbox-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.checkbox-item:last-child {
    margin-bottom: 0;
}

.checkbox-item input[type="checkbox"] {
    margin: 0 8px 0 0;
}

.checkbox-item label {
    font-size: 13px;
    cursor: pointer;
}

/* Loading and Messages */
#myfilters-loading {
    padding: 10px 0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

#myfilters-loading .spinner {
    float: none;
    margin: 0 10px 0 0;
}

.spinner.is-active {
    visibility: visible;
}

.no-prefixes-message {
    padding: 15px;
    background-color: #f8f9fa;
    border-left: 4px solid #ddd;
    margin: 10px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
}

/* Widget and Shortcode Styles */
.myfilters-widget-filters,
.myfilters-shortcode-filters {
    margin-bottom: 20px;
}

.myfilters-widget-filters .filter-group,
.myfilters-shortcode-filters .filter-group {
    margin-bottom: 25px !important; /* Increased consistent bottom margin to 25px */
    padding-bottom: 0 !important; /* Keep bottom padding at 0 */
    border-bottom: 1px solid #eee; /* Keep border for visual separation */
}

.myfilters-widget-filters .filter-group:last-child,
.myfilters-shortcode-filters .filter-group:last-child {
    border-bottom: none;
}

.myfilters-widget-filters .filter-heading,
.myfilters-shortcode-filters .filter-heading {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.myfilters-shortcode-title {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

.myfilters-widget-filters .filter-values,
.myfilters-shortcode-filters .filter-values {
    margin-bottom: 10px;
}

.myfilters-widget-filters .filter-checkbox-label,
.myfilters-shortcode-filters .filter-checkbox-label,
.myfilters-widget-filters .filter-radio-label,
.myfilters-shortcode-filters .filter-radio-label {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.myfilters-widget-filters .filter-checkbox-label:hover,
.myfilters-shortcode-filters .filter-checkbox-label:hover,
.myfilters-widget-filters .filter-radio-label:hover,
.myfilters-shortcode-filters .filter-radio-label:hover {
    background-color: rgba(150, 88, 138, 0.05);
}

.myfilters-widget-filters .filter-checkbox,
.myfilters-shortcode-filters .filter-checkbox,
.myfilters-widget-filters .filter-radio,
.myfilters-shortcode-filters .filter-radio {
    margin-right: 8px !important;
    position: relative;
    top: 0px;
    flex-shrink: 0;
}

.myfilters-widget-filters .filter-select,
.myfilters-shortcode-filters .filter-select {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.myfilters-widget-filters .count,
.myfilters-shortcode-filters .count {
    color: #777;
    font-size: 13px;
    margin-left: 4px;
    display: inline-block;
}

/* Filter Actions */
.myfilters-widget-filters .filter-actions,
.myfilters-shortcode-filters .filter-actions {
    margin-top: 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    align-items: center !important;
}

/* Center the apply button now that it's alone */
.myfilters-widget-filters .filter-buttons,
.myfilters-shortcode-filters .filter-buttons {
    margin-top: 15px !important;
    display: flex !important;
    justify-content: center !important;
}

/* Button specific styles - fix padding and width for Greek text */
.myfilters-apply-btn,
button.apply-filters,
a.apply-filters,
.myfilters-widget-filters .apply-filters,
.myfilters-shortcode-filters .apply-filters {
    padding: 8px 10px !important; /* Reduced horizontal padding */
    background-color: #3AA6B9 !important; /* Changed from purple to greenish */
    color: white !important;
    border: none !important;
    border-color: #3AA6B9 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
    text-align: center !important;
    font-weight: normal !important;
    flex-grow: 1.5 !important; /* Reduced from 2 for more balanced sizing */
    flex-basis: 0 !important;
    min-width: 90px !important; /* Slightly increased from 80px */
    max-width: 120px !important; /* Reduced max-width for better fit */
    width: auto !important; /* Let text determine width within min/max constraints */
    box-shadow: none !important;
    line-height: 1.5 !important;
    display: inline-block !important;
}

.myfilters-reset-btn,
a.reset-filters,
.myfilters-widget-filters .reset-filters,
.myfilters-shortcode-filters .reset-filters {
    padding: 8px 10px !important; /* Reduced horizontal padding */
    background-color: #f5f5f5 !important;
    color: #444 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
    text-align: center !important;
    flex-grow: 1 !important;
    flex-basis: 0 !important;
    min-width: 90px !important; /* Slightly increased from 80px */
    max-width: 120px !important; /* Reduced max-width */
    width: auto !important; /* Let text determine width within min/max constraints */
    box-shadow: none !important;
    line-height: 1.5 !important;
    display: inline-block !important;
}

.myfilters-apply-btn:hover,
button.apply-filters:hover,
a.apply-filters:hover,
.myfilters-widget-filters .apply-filters:hover,
.myfilters-shortcode-filters .apply-filters:hover {
    background-color: #2E8496 !important; /* Darker greenish on hover */
    border-color: #2E8496 !important;
}

.myfilters-reset-btn:hover,
a.reset-filters:hover,
.myfilters-widget-filters .reset-filters:hover,
.myfilters-shortcode-filters .reset-filters:hover {
    background-color: #eee !important;
}

.no-filters-message {
    color: #666;
    padding: 10px;
    background: #f9f9f9;
    border-left: 4px solid #ddd;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .myfilters-widget-filters .filter-select,
    .myfilters-shortcode-filters .filter-select {
        max-width: 100%;
    }
    
    .myfilters-widget-filters .filter-actions,
    .myfilters-shortcode-filters .filter-actions {
        flex-direction: column;
    }
    
    .myfilters-widget-filters .reset-filters,
    .myfilters-shortcode-filters .reset-filters {
        width: 100%;
    }
}

/* Ensure filter layout consistency on desktop & mobile */
.myfilters-widget-filters .filter-heading,
.myfilters-shortcode-filters .filter-heading {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.myfilters-filter-group, 
.myfilters-widget-filters .filter-group,
.myfilters-shortcode-filters .filter-group {
    margin-bottom: 25px !important; /* Increased consistent bottom margin to 25px */
    padding-bottom: 0 !important; /* Keep bottom padding at 0 */
    border-bottom: 1px solid #eee; /* Keep border for visual separation */
}

/* Price Slider Specific Styles */
.price-slider-container {
    padding: 5px 0 !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    visibility: visible !important;
    display: block !important;
}

/* Price slider values container */
.price-slider-values {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 15px !important;
    width: 100% !important; /* Ensure it takes full width */
    gap: 10px !important; /* Add gap instead of separator */
}

/* Styles for input container */
.price-input-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important; /* Allow the container to expand */
    max-width: none !important; /* Remove any max-width limitations */
}

/* Styles for the currency symbol inside the input */
.price-input-container .currency-symbol {
    position: absolute !important;
    left: 12px !important; /* Match mobile */
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #757575 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    font-size: 14px !important; /* Match mobile */
}

/* Styles for the number input fields */
.price-slider-input {
    width: 100% !important; /* Allow full width within container */
    min-width: 120px !important; /* Set minimum width */
    height: 40px !important; /* Match mobile height */
    padding: 8px 12px 8px 30px !important; /* Match mobile padding */
    border: 1px solid #ccc !important;
    border-radius: 20px !important; /* Match mobile radius */
    text-align: right !important;
    font-size: 15px !important; /* Match mobile font size */
    box-sizing: border-box !important;
    position: relative !important;
    background-color: #f9f9f9 !important; /* Match mobile background */
    -moz-appearance: textfield !important; /* Hide spinners in Firefox */
}

/* Hide spinners in Chrome, Safari, Edge */
.price-slider-input::-webkit-outer-spin-button,
.price-slider-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Remove styles for separator as we'll remove it */
.price-range-separator {
    display: none !important; /* Hide separator */
}

/* Adjust focus style to match mobile */
.price-slider-input:focus {
    outline: none !important;
    border-color: #3AA6B9 !important; /* Match mobile color */
    background-color: #fff !important; /* Match mobile */
    box-shadow: 0 0 0 1px #3AA6B9 !important; /* Match mobile */
}

/* Price Histogram Styles */
.price-histogram-container {
    width: 100% !important;
    height: 50px !important;
    margin: 10px 0 5px !important;
    position: relative !important;
    overflow: hidden !important;
}

.price-histogram {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 10px !important;
}

.histogram-bar {
    flex: 1 !important;
    background-color: #f0f0f0 !important;
    border: 1px solid #eeeeee !important;
    margin: 0 1px !important;
    border-radius: 2px 2px 0 0 !important;
    min-height: 5% !important;
    transition: opacity 0.2s ease !important;
}

.histogram-bar.active {
    background-color: rgba(58, 166, 185, 0.3) !important;
    border-color: rgba(58, 166, 185, 0.4) !important;
}

.histogram-bar.inactive {
    opacity: 0.3 !important;
}

.price-slider {
    margin: 5px 10px 30px !important;
    height: 4px !important;
    background: #f8f8f8 !important;
    border-radius: 3px !important;
    border: 1px solid #eeeeee !important;
    box-shadow: none !important;
}

.price-slider.noUi-target {
    box-shadow: none !important;
    border: 1px solid #eeeeee !important; /* Lighter border */
    background: #f8f8f8 !important;
}

.price-slider .noUi-connect {
    background-color: #3AA6B9 !important;
    border-radius: 3px !important;
}

.price-slider .noUi-handle {
    width: 16px !important; /* Reduced from 20px */
    height: 16px !important; /* Reduced from 20px */
    top: -7px !important; /* Adjusted for new height */
    right: -8px !important; /* Adjusted for new width */
    background-color: #3AA6B9 !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: none !important; /* Removed shadow */
    cursor: pointer !important;
}

/* Remove default noUiSlider handle styling */
.price-slider .noUi-handle::before,
.price-slider .noUi-handle::after {
    display: none !important;
}

/* NEW: Styles for input container */
.price-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* NEW: Styles for the currency symbol inside the input */
.price-input-container .currency-symbol {
    position: absolute;
    left: 10px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    color: #757575;
    pointer-events: none; /* Prevent interaction with the symbol */
    z-index: 1;
    font-size: 13px;
}

/* NEW: Styles for the number input fields */
.price-slider-input {
    width: 100px; /* Adjust width */
    height: 32px; /* Make it shorter */
    padding: 5px 10px 5px 25px; /* Top/Bottom, Right, Left (space for symbol) */
    border: 1px solid #ccc;
    border-radius: 16px; /* Fully rounded corners */
    text-align: right; /* Align text to the right */
    font-size: 14px;
    box-sizing: border-box;
    position: relative; /* Needed for z-index to work */
    -moz-appearance: textfield; /* Hide spinners in Firefox */
}

/* NEW: Hide spinners in Chrome, Safari, Edge */
.price-slider-input::-webkit-outer-spin-button,
.price-slider-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* NEW: Styles for the separator */
.price-range-separator {
    margin: 0 5px; /* Add some space around the dash */
    color: #757575;
    font-weight: bold;
}

/* Adjust focus style */
.price-slider-input:focus {
    outline: none;
    border-color: #95bf47;
    box-shadow: 0 0 0 1px #95bf47;
}

/* Make sure the price filter group is always visible */
.myfilters-filter-group.price-filter,
.filter-group.price-filter-group {
    display: block !important;
    visibility: visible !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

/* Further reduce spacing between filter values */
.myfilters-value-label,
.myfilters-widget-filters .filter-checkbox-label,
.myfilters-shortcode-filters .filter-checkbox-label,
.myfilters-widget-filters .filter-radio-label,
.myfilters-shortcode-filters .filter-radio-label {
    margin-bottom: 2px !important; /* Further reduced from 4px */
    padding: 3px 0 !important; /* Reduced from 4px */
    display: block !important;
}

/* Reduce checkbox item container spacing even more */
.myfilters-value-item {
    margin-bottom: 2px !important; /* Further reduced from 3px */
}

/* Compact filter values list spacing */
.myfilters-filter-values,
.myfilters-widget-filters .filter-values,
.myfilters-shortcode-filters .filter-values {
    margin-top: 5px !important; /* Reduced from 6px */
    margin-bottom: 5px !important; /* Reduced from 6px */
}

/* Make checkboxes and labels more compact but properly spaced */
.myfilters-checkbox-label,
.filter-checkbox-label {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    padding: 4px 0 !important;
    width: 100% !important;
    flex-direction: row !important;
}

/* Increase checkbox spacing */
.myfilters-widget-filters .filter-checkbox,
.myfilters-shortcode-filters .filter-checkbox,
.myfilters-widget-filters .filter-radio,
.myfilters-shortcode-filters .filter-radio {
    margin-right: 18px !important; /* Increased from 12px */
    position: relative;
    top: -1px !important; /* Adjusted to align properly with text */
}

/* Clear specific theme interference with checkboxes */
input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background-color: #fff !important;
    border: 1px solid #bbb !important;
    border-radius: 3px !important;
    outline: none !important;
    cursor: pointer !important;
    position: relative !important;
    display: inline-block;
    vertical-align: middle;
    margin-right: 18px;
    transform: scale(1.2) !important;
    top: -1px;
}

input[type="checkbox"]:checked {
    background-color: #3AA6B9 !important;
    border-color: #3AA6B9 !important;
}

/* Ensure checkbox styling is consistent */
.filter-label-type-text input[type="checkbox"]:checked,
.myfilters-value-item input[type="checkbox"]:checked,
.myfilters-checkbox-label input[type="checkbox"]:checked,
.filter-checkbox-label input[type="checkbox"]:checked,
.myfilters-widget-filters input[type="checkbox"]:checked,
.myfilters-shortcode-filters input[type="checkbox"]:checked {
    background-color: #3AA6B9 !important;
    border-color: #3AA6B9 !important;
}

/* CONSOLIDATED: Checkmark styling - SINGLE SOURCE OF TRUTH */
input[type="checkbox"]:checked::before,
.filter-label-type-text input[type="checkbox"]:checked::before,
.myfilters-value-item input[type="checkbox"]:checked::before,
.myfilters-checkbox-label input[type="checkbox"]:checked::before,
.filter-checkbox-label input[type="checkbox"]:checked::before,
.myfilters-widget-filters input[type="checkbox"]:checked::before,
.myfilters-shortcode-filters input[type="checkbox"]:checked::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 6px !important;
    top: 2px !important;
    width: 4px !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 */
input[type="checkbox"]:checked::after,
.filter-label-type-text input[type="checkbox"]:checked::after,
.myfilters-value-item input[type="checkbox"]:checked::after,
.myfilters-checkbox-label input[type="checkbox"]:checked::after,
.filter-checkbox-label input[type="checkbox"]:checked::after,
.myfilters-widget-filters input[type="checkbox"]:checked::after,
.myfilters-shortcode-filters input[type="checkbox"]:checked::after {
    content: none !important;
    display: none !important;
}

/* Greek product filter button */
.products-filter-button,
button.products-filter-button,
a.products-filter-button,
.myfilters-products-button,
#myfilters-products-button,
[id*="products-filter"],
[class*="products-filter"],
.woocommerce-products-header button,
.woocommerce-products-header .button {
    background-color: #3AA6B9 !important;
    color: white !important;
    border-color: #3AA6B9 !important;
}

.products-filter-button:hover,
button.products-filter-button:hover,
a.products-filter-button:hover,
.myfilters-products-button:hover,
#myfilters-products-button:hover,
[id*="products-filter"]:hover,
[class*="products-filter"]:hover,
.woocommerce-products-header button:hover,
.woocommerce-products-header .button:hover {
    background-color: #2E8496 !important;
    border-color: #2E8496 !important;
}

/* Header with title and clear button */
.myfilters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.myfilters-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #333 !important;
}

.myfilters-clear-all {
    color: #3AA6B9 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    display: inline-block !important;
}

.myfilters-clear-all:hover {
    text-decoration: underline !important;
    color: #2E8496 !important;
}

/* Auto-submit desktop styles - hide buttons on desktop */
@media (min-width: 768px) {
    .myfilters-widget .filter-buttons.desktop-hidden {
        display: none !important;
    }
}

/* Apply button color to match our color scheme */
.myfilters-widget button,
.myfilters-widget .button,
.myfilters-widget input[type="submit"],
.myfilters-filter-buttons button,
.myfilters-filter-buttons .button,
.myfilters-filter-buttons input[type="submit"] {
    background-color: #3AA6B9 !important; /* Changed from default theme or purple to greenish */
    color: white !important;
    border-color: #3AA6B9 !important; /* Changed to match background */
}

.myfilters-widget button:hover,
.myfilters-widget .button:hover,
.myfilters-widget input[type="submit"]:hover,
.myfilters-filter-buttons button:hover,
.myfilters-filter-buttons .button:hover,
.myfilters-filter-buttons input[type="submit"]:hover {
    background-color: #2E8496 !important; /* Darker greenish on hover */
    border-color: #2E8496 !important; /* Darker greenish on hover */
}

/* Active/Hover states for filter items */
.myfilters-widget .filter-item:hover,
.myfilters-widget .filter-checkbox-label:hover {
    background-color: rgba(58, 166, 185, 0.05) !important; /* Light greenish hover */
}

/* Price slider colors */
.price-slider .noUi-connect {
    background-color: #3AA6B9 !important;
}

.price-slider .noUi-handle {
    background-color: #3AA6B9 !important;
    border: 2px solid #fff !important;
    box-shadow: none !important; /* Removed shadow */
}

/* Price slider customization */
.myfilters-content .ui-slider.ui-widget-content {
    height: 5px;
    background: #e6e6e6;
    border-radius: 3px;
    border: none;
    box-shadow: none;
    margin-top: 5px;  
}

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

.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-histogram-bar.in-range {
    opacity: 1;
    background-color: rgba(58, 166, 185, 0.7);
}

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

/* Price filter heading specific spacing */
.myfilters-widget-filters .price-filter .filter-heading,
.myfilters-shortcode-filters .price-filter .filter-heading,
.myfilters-filter-group.price-filter .myfilters-filter-heading,
.filter-group.price-filter-group .filter-heading {
    margin-bottom: 20px !important;
}

/* Important override styles for desktop inputs */
body .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 .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 .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 .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 */
body .price-slider-container .price-slider-values .price-range-separator,
body .price-range-separator {
    display: none !important;
}

/* Styles for Image Template Values */
/* Apply Grid to parent container IF it contains image filters */
/* Note: Uses explicit class added by JS for broader browser support */
.myfilters-widget-filters .filter-values.has-image-grid,
.myfilters-shortcode-filters .filter-values.has-image-grid /* Added shortcode selector */
{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* Create 2 columns */
    row-gap: 2px !important; /* Reduced vertical gap between grid rows */
    column-gap: 10px !important; /* Keep horizontal gap between columns */
    /* Remove flexbox properties that might conflict */
    flex-direction: unset !important;
    flex-wrap: unset !important;
    /* NEW: Limit height and add scroll */
    max-height: 410px !important; /* Increased height for 3 rows */
    overflow-y: auto !important; /* Enable vertical scroll */
    overflow-x: hidden !important; /* Prevent horizontal scroll */
    padding-right: 5px !important; /* Reduced padding for scrollbar */
}

/* Ensure items within the grid behave correctly */
.myfilters-widget-filters .filter-values.has-image-grid > .filter-checkbox-label,
.myfilters-widget-filters .filter-values.has-image-grid > .filter-radio-label {
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* NEW: Reduce space below image specifically within the grid layout */
.myfilters-widget-filters .filter-values.has-image-grid .filter-value-image,
.myfilters-shortcode-filters .filter-values.has-image-grid .filter-value-image {
    margin-bottom: 0px !important; /* Drastically reduced to 0px for grid layout */
}

/* NEW: Reduce space above text wrapper specifically within the grid layout */
.myfilters-widget-filters .filter-values.has-image-grid .filter-label-type-image .filter-label-text-wrapper,
.myfilters-shortcode-filters .filter-values.has-image-grid .filter-label-type-image .filter-label-text-wrapper {
    margin-top: -25px !important; /* Increased negative margin to -25px */
    padding-top: 0 !important; /* Ensure padding remains 0 */
}

.filter-label-type-image {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    padding: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.filter-value-image {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 35px !important;
    order: 1 !important; /* Explicitly order before text wrapper */
    min-height: 1px !important; /* Prevent container collapse */
}

.filter-value-image img {
    max-width: 120px !important; /* INCREASED SIZE */
    max-height: 120px !important; /* INCREASED SIZE */
    height: auto !important;
    display: block !important; /* Make image a block element */
    border: none !important; /* Remove border from image itself */
    padding: 0 !important;
    margin: 0 auto 8px auto !important; /* Center image and add space below */
    border-radius: 4px !important; /* Optional: rounded corners */
}

/* Style the LABEL when its corresponding checkbox/radio is checked */
.filter-input-type-image:checked + .filter-value-display + span, /* If count exists */
.filter-input-type-image:checked + .filter-value-display, /* If no count exists */
.filter-label-type-image.checked /* If JS adds class */
{
    /* We need to target the PARENT label for the border now */
    /* This selector might need adjustment depending on final HTML structure */
}

/* Style the PARENT LABEL on select */
.filter-label-type-image input[type="checkbox"]:checked,
.filter-label-type-image input[type="radio"]:checked {
    /* Add style to parent label when input is checked */
    /* The actual style application might need JS if :has() isn't supported */
}

/* Let's apply the style directly to the label for simplicity for now */
.filter-label-type-image.selected,
.filter-label-type-image:has(input:checked) /* If :has is supported */
{
     border-color: #3AA6B9 !important; /* Use theme's greenish color */
     box-shadow: 0 0 5px rgba(58, 166, 185, 0.6) !important;
     padding: 10px 5px !important; /* More vertical, less horizontal padding */
}

/* Hide the actual radio/checkbox input visually for image types */
.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;
}

/* Style for the wrapper containing text label and count */
/* Applies to BOTH text and image filters */
.filter-label-text-wrapper {
    display: flex !important;
    flex-direction: row !important; /* For label and count on same line */
    justify-content: center !important; /* Center horizontally */
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 8px !important; /* Space between image and label */
    order: 2 !important; /* Always place after image */
    /* white-space: nowrap !important; /* REMOVED - Replaced with flexbox solution */
}

/* Style for the text label */
.filter-value-label {
    display: inline !important; /* Keep inline display */
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #333 !important;
    text-align: center !important;
    margin: 0 4px 0 0 !important; /* Add slight right margin */
    /* Allow label to shrink but prevent breaking */
    flex-shrink: 1 !important; 
    min-width: 0 !important; /* Allows shrinking below intrinsic width */
    white-space: nowrap !important; /* Keep label text itself on one line */
    overflow: hidden !important; /* Hide overflow */
    text-overflow: ellipsis !important; /* Add ellipsis if text overflows */
}

/* Style for the count */
.myfilters-widget-filters .count,
.myfilters-shortcode-filters .count {
    color: #777;
    font-size: 13px;
    margin-left: 0px; /* Adjusted from 4px */
    display: inline-block;
    flex-shrink: 0 !important; /* Prevent count from shrinking */
    white-space: nowrap !important; /* Ensure count itself doesn't wrap */
}

/* Adjust alignment for normal TEXT labels */
.filter-label-type-text,
.myfilters-value-item label,
.myfilters-checkbox-label,
.filter-checkbox-label {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    padding: 4px 30px 4px 0 !important; /* Add padding-right for checkbox, remove left/right from previous */
    width: 100% !important;
    flex-direction: row !important;
    position: relative !important; /* Make label the positioning context */
}

/* Specific adjustments for TEXT label wrapper */
.filter-label-type-text .filter-label-text-wrapper,
.myfilters-value-item label .filter-label-text-wrapper,
.myfilters-checkbox-label .filter-label-text-wrapper,
.filter-checkbox-label .filter-label-text-wrapper,
.myfilters-value-item .myfilters-value-label {
    order: 1 !important; /* Keep text first */
    flex-grow: 1 !important; /* Allow text to take available space */
    justify-content: flex-start !important;
    margin-top: 0 !important; 
    margin-right: 0 !important; /* Remove margin, padding on label handles space */
    text-align: left !important; 
}

/* Position TEXT inputs absolutely to the right */
.filter-label-type-text input[type="checkbox"],
.filter-label-type-text input[type="radio"],
.myfilters-value-item input[type="checkbox"],
.myfilters-value-item input[type="radio"],
.myfilters-checkbox-label input[type="checkbox"],
.myfilters-checkbox-label input[type="radio"],
.filter-checkbox-label input[type="checkbox"],
.filter-checkbox-label input[type="radio"],
.myfilters-widget-filters input[type="checkbox"],
.myfilters-shortcode-filters input[type="checkbox"] {
    /* REMOVE order: 2 !important; */
    /* REMOVE margin-right: 0 !important; */
    position: absolute !important; /* Position absolutely */
    right: 0px !important; /* Align to the right edge of label padding */
    top: 50% !important; /* Center vertically */
    transform: translateY(-50%) scale(1.2) !important; /* Adjust vertical center & scale */
    opacity: 1 !important; 
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important; 
    min-height: 18px !important; 
    clip: auto !important; 
    /* REMOVE flex-shrink: 0 !important; */
    visibility: visible !important; 
    z-index: 5 !important; 
    float: none !important; 
    clear: none !important; 
    /* Appearance styles remain */
    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;
    cursor: pointer !important;
}

/* Ensure checkbox styling is consistent */
.filter-label-type-text input[type="checkbox"]:checked,
.myfilters-value-item input[type="checkbox"]:checked,
.myfilters-checkbox-label input[type="checkbox"]:checked,
.filter-checkbox-label input[type="checkbox"]:checked,
.myfilters-widget-filters input[type="checkbox"]:checked,
.myfilters-shortcode-filters input[type="checkbox"]:checked {
    background-color: #3AA6B9 !important;
    border-color: #3AA6B9 !important;
}

/* Checkmark styling */
.filter-label-type-text input[type="checkbox"]:checked::before,
.myfilters-value-item input[type="checkbox"]:checked::before,
.myfilters-checkbox-label input[type="checkbox"]:checked::before,
.filter-checkbox-label input[type="checkbox"]:checked::before,
.myfilters-widget-filters input[type="checkbox"]:checked::before,
.myfilters-shortcode-filters input[type="checkbox"]:checked::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 6px !important;
    top: 2px !important;
    width: 4px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* Image filter label container - stronger overrides for vertical stacking */
.filter-label-type-image {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    padding: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Image container - ensure it's block level */
.filter-value-image {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 35px !important;
}

/* Ensure image wrapper is full width */
.filter-label-type-image .filter-value-display {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* Force image labels to be centered below image */
.filter-label-type-image > span,
.filter-label-type-image > .filter-label-text-wrapper,
.filter-label-type-image > .filter-value-display + span,
.filter-label-type-image > .filter-value-display + .filter-label-text-wrapper {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 8px !important;
    order: 999 !important; /* Ensure it comes after everything else */
}

/* Extreme override for image label text wrapper */
.filter-label-type-image .filter-label-text-wrapper {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin-top: 4px !important; /* Reduced from 8px to bring text closer to image */
    clear: both !important;
    float: none !important;
    position: static !important;
}

/* Text label inside image filter */
.filter-label-type-image .filter-value-label {
    display: inline-block !important;
    text-align: center !important;
    float: none !important;
    margin: 0 auto !important;
    width: auto !important;
}

/* Force all image label elements to stack vertically */
.filter-label-type-image > * {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure the count badge is displayed inline with the label */
.filter-label-type-image .count {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* --- DIAGNOSTIC STYLES --- */
/* Force image container visibility and add border */
/* .myfilters-widget-filters .filter-group .filter-values .filter-checkbox-label.filter-label-type-image .filter-value-image,
.myfilters-widget-filters .filter-group .filter-values .filter-radio-label.filter-label-type-image .filter-value-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 50px !important; /* Force some height * /
    width: 100% !important;
    border: 1px dashed red !important; /* VISUAL DEBUG * /
    order: 1 !important; /* Reiterate order * /
    position: static !important; /* Override absolute positioning if any * /
    overflow: visible !important; /* Override hidden overflow * /
} */

/* Force image visibility and add border */
/* .myfilters-widget-filters .filter-group .filter-values .filter-checkbox-label.filter-label-type-image .filter-value-image img,
.myfilters-widget-filters .filter-group .filter-values .filter-radio-label.filter-label-type-image .filter-value-image img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100px !important; /* Force size * /
    height: 100px !important; /* Force size * /
    max-width: 100px !important;
    max-height: 100px !important;
    border: 1px dashed blue !important; /* VISUAL DEBUG * /
    position: static !important; /* Override absolute positioning if any * /
    margin: 5px auto !important; /* Ensure some margin * /
} */
/* --- END DIAGNOSTIC STYLES --- */ 

/* REMOVED: Commented out rule adding extra space below image grid groups 
.myfilters-widget-filters .filter-group:has(.filter-values.has-image-grid),
.myfilters-shortcode-filters .filter-group:has(.filter-values.has-image-grid) {
    margin-bottom: 32px !important; 
    padding-bottom: 16px !important; 
}
*/

/* Ensure filter groups with image grids have proper spacing from next groups */
/* REMOVED: Unwanted top spacing added to groups following image grids 
.myfilters-widget-filters .filter-group:has(.filter-values.has-image-grid) + .filter-group,
.myfilters-shortcode-filters .filter-group:has(.filter-values.has-image-grid) + .filter-group {
    margin-top: 32px !important; 
    padding-top: 16px !important; 
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important; 
}
*/

/* Ensure images are fully visible and containers have enough space */
.filter-value-image {
    min-height: 120px !important; /* Ensure enough height for image container */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 35px !important; /* Increased from 10px to 35px to add more space below image */
}

.filter-value-image img {
    max-width: 100% !important;
    max-height: 110px !important; /* Slightly increase height */
    height: auto !important;
    width: auto !important;
    object-fit: contain !important; /* Ensure entire image is visible */
    display: block !important;
    margin: 0 auto !important;
}

/* Improve text spacing and alignment for image filters */
.filter-label-type-image .filter-label-text-wrapper {
    padding-top: 4px !important; /* Reduced from 8px */
    padding-bottom: 8px !important;
    margin-top: 5px !important; /* Reduced from 10px to bring text closer to image */
}

.myfilters-widget-filters .filter-values.has-image-grid > .filter-radio-label {
    width: 100% !important;
    margin-bottom: 0 !important;
}

/*
 * Grid Layout Specific Overrides
 * Applied last to ensure they take precedence
 */

/* Reduce space below image specifically within the grid layout */
.myfilters-widget-filters .filter-values.has-image-grid .filter-value-image,
.myfilters-shortcode-filters .filter-values.has-image-grid .filter-value-image {
    margin-bottom: 0px !important; /* Drastically reduced to 0px for grid layout */
}

/* Reduce space above text wrapper specifically within the grid layout */
.myfilters-widget-filters .filter-values.has-image-grid .filter-label-type-image .filter-label-text-wrapper,
.myfilters-shortcode-filters .filter-values.has-image-grid .filter-label-type-image .filter-label-text-wrapper {
    margin-top: -25px !important; /* Increased negative margin to -25px */
    padding-top: 0 !important; /* Ensure padding remains 0 */
}

/* Subtle Scrollbar Styling */
/* For Webkit browsers (Chrome, Safari, Edge, etc.) */
.myfilters-widget-filters .filter-values.has-image-grid::-webkit-scrollbar,
.myfilters-shortcode-filters .filter-values.has-image-grid::-webkit-scrollbar {
    width: 5px !important; /* Make scrollbar slightly thinner */
}

.myfilters-widget-filters .filter-values.has-image-grid::-webkit-scrollbar-track,
.myfilters-shortcode-filters .filter-values.has-image-grid::-webkit-scrollbar-track {
    background: #f1f1f1 !important; /* Light grey track */
    border-radius: 3px !important;
}

.myfilters-widget-filters .filter-values.has-image-grid::-webkit-scrollbar-thumb,
.myfilters-shortcode-filters .filter-values.has-image-grid::-webkit-scrollbar-thumb {
    background: #cccccc !important; /* Medium grey thumb */
    border-radius: 3px !important;
    transition: background 0.2s ease !important;
}

.myfilters-widget-filters .filter-values.has-image-grid::-webkit-scrollbar-thumb:hover,
.myfilters-shortcode-filters .filter-values.has-image-grid::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa !important; /* Darker grey thumb on hover */
}

/* For Firefox */
.myfilters-widget-filters .filter-values.has-image-grid,
.myfilters-shortcode-filters .filter-values.has-image-grid {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #cccccc #f1f1f1; /* thumb track */
}