/**
 * Auto-refresh category filter styles
 */

/* Add a subtle transition when the form is submitting */
form[data-component="listing-filter"],
.hp-form--listing-filter {
    transition: opacity 0.2s ease-in-out;
    position: relative;
}

/* Only add vendor prefixes for older browsers */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    form[data-component="listing-filter"],
    .hp-form--listing-filter {
        -ms-transition: opacity 0.2s ease-in-out;
    }
}

form[data-component="listing-filter"].submitting,
.hp-form--listing-filter.submitting {
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
}

/* Mobile-specific styles - only load what's necessary */
@media (max-width: 767px) {
    /* Simplified mobile styles */
    form[data-component="listing-filter"].submitting-mobile,
    .hp-form--listing-filter.submitting-mobile {
        opacity: 0.5;
    }
    
    /* Loading indicator for mobile - simplified */
    form[data-component="listing-filter"].submitting-mobile:after,
    .hp-form--listing-filter.submitting-mobile:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin: -12px 0 0 -12px;
        border: 2px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top-color: #000;
        animation: spin 0.8s linear infinite;
        z-index: 10;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    /* Improve touch targets on mobile - only essential properties */
    form[data-component="listing-filter"] select,
    .hp-form--listing-filter select,
    form[data-component="listing-filter"] input[type="radio"] + label,
    .hp-form--listing-filter input[type="radio"] + label,
    .select2-container--default .select2-selection--single {
        min-height: 44px;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 44px;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px;
    }
}

/* Ensure the select2 dropdown has proper z-index */
.select2-container--open .select2-dropdown {
    z-index: 9999;
} 

/* Hide the filter trigger button ("Suodatin") on desktop, but keep it on mobile */
@media (min-width: 992px) {
    .hp-button--listing-filter {
        display: none !important;
    }
}